/* define colors */
:root {
    --black-cicd: #000000;
    --grey-cicd: #e3e3e2;
    --grey-cicd-header: #e3e3e260;
    --grey-cicd-footer: #e3e3e260;
    --glassy-cicd: #ffffff;
    --sunshine-cicd: #f4cf62;
  }
  
/* ----------------------------------------------------------------------------------------------- */
/* Special things fonts for complete Webpage */

/* helvetica new-regular */
@font-face {
    font-display: swap; 
    font-family: 'Helveticanow';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/helveticanowtext-black-demo.ttf') format('truetype');
  }
  
  /* helvetica new-italic */
  @font-face {
    font-display: swap; 
    font-family: 'Helveticanow';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/helveticanowtext-blackitalic-demo.ttf') format('truetype');
  }
  
  /* helvetica new-bold */
  @font-face {
    font-display: swap; 
    font-family: 'Helveticanow';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/helveticanowtext-bold-demo.ttf') format('truetype');
  }
  
  /* helvetica new-bolditalic */
  @font-face {
    font-display: swap; 
    font-family: 'Helveticanow';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/helveticanowtext-bolditalic-demo.ttf') format('truetype');
  }

/* ----------------------------------------------------------------------------------------------- */
/* Definition general formating of headers and other Text */

/* definition Header sizes & colors*/
h1, h2 {
    color: var(--sunshine-cicd);
    font-size: 2.6em;
    font-weight: 800;
    font-style: italic;
}

h3 {
    color: var(--black-cicd);
    font-size: 1.6em;
    font-weight: 400;
    font-style: italic;
}

p {
    color: var(--grey-cicd);
    line-height: 1.8em;
}


/* ----------------------------------------------------------------------------------------------- */
/* Definitions of general Spacers */

.spacer-top-bottom {
    padding: 5rem 0;
}

.spacer-top {
    padding-top: 5rem;
}

.spacer-bottom {
    padding-bottom: 5rem;
}


/* ----------------------------------------------------------------------------------------------- */
/* login page */

.form-text {
    color: var(--black-cicd)
}

/* ----------------------------------------------------------------------------------------------- */
/* start page */

html,body {
    background-image: url('../../../themes/dulma/img/background-blackboard.jpg');
    /* background-image: url('../../../themes/dulma/img/background-marmor.jpg'); */
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--glassy-cicd);
    font-family: 'Helveticanow', serif !important;
}

.region-mainnavigation {
    padding-right: 2rem;
    padding-top: 6rem;
}

.region-mainnavigation .navbar li a {
    padding: 0 1rem;
}

.navigation-header {
    background-color: var(--grey-cicd-header);
}

.navbar {
    background: none;
}

.menu--in-kooperation-mit > .navbar > li:nth-child(1) a {
    background-image: url('../../../themes/dulma/img/TheWhiskyShop.png');
    background-repeat: no-repeat;
    background-position-y: center;
    padding-left: 15%;
    display: block;
    background-size: 10%;
}

.menu--in-kooperation-mit > .navbar > li:nth-child(2) a {
    background-image: url('../../../themes/dulma/img/HistoricalGuidedTours.png');
    background-repeat: no-repeat;
    background-position-y: center;
    padding-left: 15%;
    display: block;
    background-size: 10%;
}

.menu__item {
    list-style: none;
    border-radius: 8px;
    margin-bottom: 10px;
}

.region-mainnavigation .menu__item:has(.is-active) {
    border-style: solid;
    border-width: 2px;
    border-color: var(--sunshine-cicd);
}

.navbar li a {
    color: var(--black-cicd);
    font-size: 1.6em;
    font-weight: bold;
}

.navbar-menu {
    padding-top: 1.5rem;
}

.socialimg img {
    max-width: 30px;
    margin-top: -8px;
    margin-right: 10px;
}

.socialtitle {
    /*padding: 2rem 1rem; */
    font-size: 1.4em;
    font-weight: 300;
    color:  var(--black-cicd);
}

.region-logo img {
    max-width: 250px;
}

/*
.region-logo {
    background-color: var(--grey-cicd);
    padding: 30px 30px 15px 30px;
    border-radius: 15px;
}
*/

.floatingbox {
    z-index: 10;
    max-width: 20%;
    display: block;
    float: right;
    padding-right: 20px;
    padding-top: 140px;
}

.floatingbox img {
    width: 40px;
}

.bigteaser {
    border-bottom: 1px solid var(--sunshine-cicd);
}

.bigteaserbadge {
    width: 250px;
    height: 250px;
    background-color: var(--sunshine-cicd);
    border-radius: 50%;
    border: 5px solid var(--glassy-cicd);
}

.region-bigteaserbadge {
    margin: auto auto;
    padding-top: 77px;
    font-size: 1.6em;
    width: 75%;
    text-align: center;
    transform: translate(7%, -4%) rotate(17deg);
}

.region-bigteaserbadge p {
    color: var(--black-cicd);
}

.boxxy {
    background-color: var(--sunshine-cicd);
    height: 100%;
}

.boxxy a,
.boxxy p {
    color: var(--black-cicd);
}

.boxtitle {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    font-style: italic;
}

.region-actualsection .views-field-title,
.region-salesection .views-field-title {
    padding-top: 1rem;
}

.region-actualsection .views-field-title span,
.region-salesection .views-field-title span {
    font-size: 2em;
}

.region-actualsection .views-field-title span a,
.region-salesection .views-field-title span a, 
.region-order a {
    color: var(--glassy-cicd);
}

.region-aboutus .views-field-body {
    padding-top: 1rem;
}

.region-aboutus p,
.region-aboutus a {
    color: var(--glassy-cicd);
}

.region-titleorder {
    text-align: center;
}

.region-titleorder h3 {
    color: var(--glassy-cicd);    
}

.region-order {
    padding-top: 2rem;
    font-size: 2em;
    text-align: center;
}

.region-order a {
    color: var(--black-cicd);
    background-color: var(--sunshine-cicd);
    border-radius: 10px;
    border: 5px solid var(--glassy-cicd);
    padding: 10px 20px;
}

.region-seotextsection .field__item {
    padding-top: 1rem;
}

.region-seotextsection p {
    color: var(--glassy-cicd);
}

.contentarea {
    min-height: 85vh;
}

/* ----------------------------------------------------------------------------------------------- */
/* Special things About us */

.about-us-img {
    position: relative;
}

.about-us-img .standardimg {
    float: right;
    display: block;    
}

.about-us-img:hover .standardimg {
    display: none;    
}

.about-us-img .hoverimg {
    float: right;
    display: none;    
}

.about-us-img:hover .hoverimg {
    display: block;    
}

/*
.arrow {
    position: relative;
    align-items: center;
    transform: translate(-7%, -66%) rotate(6deg);
}

.arrow--polygone {
    fill: none;
    stroke:red;
    stroke-width:2px;
}

.about-us-img:hover .arrow {
    display: none;    
}
*/
/* ----------------------------------------------------------------------------------------------- */
/* Special things footer */
footer {
    background-color: var(--grey-cicd-footer);
    color: var(--black-cicd);
    border-top: 3px solid var(--sunshine-cicd);
}

footer h2 {
    color: var(--black-cicd);
    font-size: 1.4em;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 1rem;
}

footer .navbar {
    display: block;
}

footer .navbar li {
    width: 100%;
    display: block;
}

footer .navbar li a {
    font-size: 1.2em;
    color: var(--black-cicd);
}

footer .navbar li:hover a {
    color: var(--sunshine-cicd);
}

.region-footerbox1 img {
    max-width: 250px;
}

/* ----------------------------------------------------------------------------------------------- */
/* Special things views */
.view-header {
    text-align: center;
    padding: 5rem 0;
}

.view-content h2 {
    color: var(--sunshine-cicd);
    font-size: 2.6em;
    font-weight: 800;
    font-style: italic;
}

.view-content h2 a {
    color: var(--sunshine-cicd);
    font-style: italic;
}

.view-content .angebotsbild,
.view-content .aktuellesbild {
    float: right;
}

.view-header p,
.view-content .angebotstext,
.view-content .aktuellestext {
    font-size: 1.6em;
    color: var(--grey-cicd);
}

.view-content .angebotspreise {
    display: inline;
    margin-right: 15px;
}

.view-content .angebotspreise.neupreis {
    font-size: 1.6em;
    color: var(--sunshine-cicd);
}

.view-content .angebotspreise.altpreis {
    text-decoration: line-through;
}

/* ----------------------------------------------------------------------------------------------- */
/* Special things gallery */

.gallery-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(20, 5vw);
    grid-gap: 15px;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .gallery-image:nth-child(4n+1)
    grid-row-start: calc(12*var(n)+1);
    grid-row-end: calc(12*var(n)+5);
*/
.gallery-image:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 7;
}

/* .gallery-image:nth-child(4n+2) */
.gallery-image:nth-child(2) {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 7;
}

.gallery-image:nth-child(3) {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 12;
}

.gallery-image:nth-child(4) {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 7;
    grid-row-end: 15;
}

.gallery-image:nth-child(5) {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 12;
    grid-row-end: 24;
}

.gallery-image:nth-child(6) {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 12;
    grid-row-end: 16;
}

.gallery-image:nth-child(7) {
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row-start: 12;
    grid-row-end: 16;
}

.gallery-image:nth-child(8) {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 16;
    grid-row-end: 24;
}

.pager__items {
    padding: 20px 0;
}

.pager__item {
    font-style: italic;
    font-size: 2rem;
    color: var(--sunshine-cicd);
}

.pager__item a {
    font-style: italic;
    font-size: 2rem;
    color: var(--black-cicd);
}

.pager__item.is-active {
    font-weight: 400;
}

/* ----------------------------------------------------------------------------------------------- */
/* Special things Webform */
.webform-progress {
    background-color: #000000;
    border-radius: 1rem;
}
.webform-progress .progress-step.is-active {
    background-color: var(--sunshine-cicd);
}

.webform-progress-tracker li {
    border-radius: 1rem;
}

.webform-progress-tracker .progress-step {
    padding-top: 15px;
}

.progress-step.is-active .progress-marker::before {
    background-color: var(--black-cicd);
    color: var(--grey-cicd);
}
.progress-step.is-active .progress-marker::after {
    background-color: var(--grey-cicd);
}

.progress-step:not(.is-active) .progress-marker::before {
    color: var(--black-cicd);
}

.progress-step:not(.is-active) .progress-marker::after {
    background-color: var(--grey-cicd);
}

.field--name-webform input, 
.field--name-webform select, 
.field--name-webform textarea {
    border-radius: 0.5rem;
    border: 1px solid var(--sunshine-cicd);
    padding: 0.5rem;
    background-color: var(--black-cicd);
    color: var(--glassy-cicd);
    width: 100%;
}

.webform-button--previous.button {
    margin-top: 1rem;
    margin-bottom: 2rem;
    width: 47%;
    float: inline-start;
}
.webform-button--next.button {
    margin-top: 1rem;
    margin-bottom: 2rem;
    width: 47%;
    float: inline-end;
}

/* ----------------------------------------------------------------------------------------------- */
/* Special things buttons */
.button--sunshine {
    background-color: var(--sunshine-cicd);
    border-color: var(--black-cicd);
    color: var(--black-cicd);
}

.button a {
    font-style: italic;
}


/* ----------------------------------------------------------------------------------------------- */
/* Media Queries all for Mobile first!! */

@media screen and (max-width: 768px) {
    /* Start page*/
    .region-logo img {
        max-width: 100%;
        padding-top: 20px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .region-logo {
        padding: 2px 0 2px 0;
    }

    .navbar-brand {
        background-color: var(--grey-cicd);
    }

    .navbar-burger,
    .navbar-burger:hover,
    .navbar-burger.is-active {
        background: var(--sunshine-cicd);
        min-width: 15%;
    }

    .navbar-menu {
        padding: 0;
    }

    .region-mainnavigation {
        padding: 1rem;
        background-color: var(--black-cicd);
    }

    .region-mainnavigation .navbar{
        text-align: center;

    }

    .region-mainnavigation .navbar li{
        padding: 1rem 0;
    }

    .region-mainnavigation .navbar li a {
        color: var(--sunshine-cicd);
    }

    .frontpage .column {
        text-align: center;
        padding: 2rem;
    }

    .bigteaserbadge {
        margin: 0 auto;
    }

    .region-actualsection .views-field-title span a,
    .region-salesection .views-field-title span a {
        overflow: auto;
        white-space: unset;
        text-overflow: unset;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    /* all other pages*/
    .column {
        text-align: center;
    }

    .view-header {
        padding: 1rem 0;
    }

    .view-content h2 {
        font-size: 1.6em;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    /*
    .view-content > .container > .columns > .column {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    */

    .aktuellestext p,
    .angebotstext p {
        font-size: 0.8em;
    }

    /*.field--name-field-aktuellesbild */
    .field--name-field-media-image img {
        width: 100%;
        padding: 0 2rem;
    }

    .bodytext {
        padding: 0 2rem;
        margin-bottom: 2rem;
    }

}