/*
Theme Name:   Yellow Theme Child
Template:     kdgs-yellow
Version:      1.0.0
*/


/*** NICHT EINKOMMENTIEREN ***/
/* EINKOMMENTIEREN */


/*** Info: Pixelwerte für den Umbruch der Viewports ***/
/*** 'xs'     => max-width: 575px   ***/
/*** 'sm'     => min-width: 576px   ***/
/*** 'md'     => min-width: 768px   ***/
/*** 'lg'     => min-width: 992px   ***/
/*** 'xl'     => min-width: 1200px  ***/
/*** 'xxl'    => min-width: 1400px  ***/
/*** 'xxxl'   => min-width: 1800px  ***/


/**
 * Global Variables
 **/

:root {
    /* Header */
    --header-height: 60px;

    /* Font Family */
    --font-family-regular: 'HankenGrotesk', sans-serif;
    --font-family-bold: 'HankenGrotesk', sans-serif;

    /* Border Radius */
    --image-border-radius: 0px;
    --form-field-border-radius: 0px;

    /* not in yellow theme */
    --block-spacing-mobile: 25px;
    --block-spacing-desktop: 50px;

    /* img radius */
    --image-border-radius: 0px;
}
@media only screen and (min-width: 992px) {
    :root {
        --header-height: 204px;
    }
}

/**
 * General
 */
 .hide {display:none;}

/**
* Fix fonts that render as bold in Firefox
*
* Put this near the top of your style.css
* Before any overriding styles
*/

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-weight: 400;
}



/*** Einbinden der font-family ***/


@font-face {
    font-family: 'Prophetbold';
    src: url("fonts/ABCProphet-Bold.woff2") format('woff2'), url("fonts/ABCProphet-Bold.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HankenGrotesk';
    src:
      url('fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2 supports variations'),
      url('fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: fallback;
  }

  @font-face {
    font-family: 'Neco-Variable';
    src:
      url('fonts/Neco-Variable.woff2') format('woff2 supports variations'),
      url('fonts/Neco-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: fallback;
  }

/**
 * Fontsize, Font Family, Line Height (Zeilenabstand), Margins (Absatz Abstand), Font Colour
 **/ 


b, strong {
    font-family: 'HankenGrotesk', sans-serif; /* TODO, what if a Heading is made Bold in a wysiwyg field? */
    font-weight: 600; /* add so fonts aren't extra thick TODO: Fix in Yellow */
}

.mod-header .header-wrapper .mobile-menu .mobile-main-nav .menu .menu-item a {
    font-family: 'Neco-Variable', sans-serif;
}

/** Headings **/

h1, .h1 {
    font-family: 'Prophetbold', sans-serif;
    font-size: calc(60 / 16 * 1rem);
    line-height: 1;
}
@media screen and (min-width: 768px) {
    h1, .h1 {
        font-size: calc(80 / 16 * 1rem);
    }
}
@media screen and (min-width: 1200px) {
    h1, .h1 {
        font-size: calc(104 / 16 * 1rem);
        margin-bottom: 24px;
    }
}

h2, .h2 {
    font-family: 'Prophetbold', sans-serif;
    font-size: calc(40 / 16 * 1rem);
    line-height: 1.1;  
}
@media screen and (min-width: 768px) {
    h2, .h2{
        font-size: calc(60 / 16 * 1rem);
    }
}
@media screen and (min-width: 1200px) {
    h2, .h2 {
        font-size: calc(80 / 16 * 1rem);
    }
}

h3, .h3,
.lead-two {
   font-family: 'Prophetbold', sans-serif;
    font-size: calc(38 / 16 * 1rem);
    line-height: 1.2; 
    font-weight: 600; 
}

.lead, .lead-two {
    font-family: 'Neco-Variable', sans-serif;
}

@media screen and (min-width: 768px) {
    h3, .h3,
    .lead-two {
        font-size: calc(48 / 16 * 1rem);
    }
}
@media screen and (min-width: 1200px) {
    h3, .h3,
    .lead-two {
        font-size: calc(68 / 16 * 1rem);
    }
}

h4, .h4 {
    font-family: 'Prophetbold', sans-serif;
     font-size: calc(25 / 16 * 1rem);
     line-height: 1.3;  
     font-weight: 600;
 }
 @media screen and (min-width: 768px) {
     h4, .h4 {
         font-size: calc(35 / 16 * 1rem);
     }
 }
 @media screen and (min-width: 1200px) {
     h4, .h4 {
         font-size: calc(40 / 16 * 1rem);
     }
 }

h5, .h5, .lead {
    font-family: 'Neco-Variable', sans-serif;
    font-size: calc(20 / 16 * 1rem);
    line-height: 1.25;
    text-transform: none;
    font-weight: 600;
}
@media screen and (min-width: 768px) {
    h5, .h5, .lead {
        font-size: calc(25 / 16 * 1rem);
    }
}
@media screen and (min-width: 1200px) {
    h5, .h5, .lead {
        font-size: calc(30 / 16 * 1rem);
    }
}

body, .body {
    font-family: 'HankenGrotesk', sans-serif;
    font-size: calc(17 / 16 * 1rem);
    line-height: 1.3;
    font-weight: 500;
}
@media screen and (min-width: 768px) {
    body, .body {
        font-size: calc(20 / 16 * 1rem);
    }
}
@media screen and (min-width: 1200px) {
    body, .body {
        font-size: calc(24 / 16 * 1rem);
    }
}

img {
    border-radius: 0px;
}

.aligncenter {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
  }


/**
 * Header und Navigation
 **/

/** Header styling **/
.mod-header {
    /* Navi gradient background */
    background-color: transparent;
    /*background-image: linear-gradient(180deg, var(--theme-colour-2) 0%, var(--theme-colour-2) 32%, transparent 100%);*/
    color:#31573f;
    
}

.home .mod-header {
    color: #ffffff;
}

 .mod-header .sub-menu {
    color: #31573f;
}

.mobile-main-nav .sub-menu {
    color: #ffffff;
}


/** Navigation **/

/* Desktop Main Navigation */
.mod-header .header-wrapper .main-nav {
    font-family: 'Neco-Variable', sans-serif;
    font-size: calc(21 / 16 * 1rem);
    line-height: 1.25;
    font-weight: 600;
}
@media screen and (min-width: 1200px) {
    .mod-header .main-nav .menu-item {
        font-size: calc(21 / 16 * 1rem);
    }
}
/** Main Nav **/
@media only screen and (min-width: 992px) {
    /* Move Main Nav up */
    .mod-header .header-wrapper .main-nav {
        transform: translateY(-47px);
    }
}

@media only screen and (min-width: 992px) {
    .mod-header .header-wrapper .mobile-menu-trigger {
      display: block;
    }
  }
@media only screen and (min-width: 1200px) {
    .mod-header .header-wrapper .mobile-menu-trigger {
      display: none;
    }
  }
  @media only screen and (min-width: 992px) {
    .mod-header .header-wrapper .main-nav, .mod-header .header-wrapper .meta-nav {
      display: none;
    }
  }
  @media only screen and (min-width: 1200px) {
    .mod-header .header-wrapper .main-nav, .mod-header .header-wrapper .meta-nav {
      display: block;
    }
  }  

.mod-header .header-wrapper .main-nav .menu .sub-menu .menu-item a:hover {
    text-underline-offset: 0.2em;
}

.mod-header .header-wrapper .main-nav .menu .sub-menu .menu-item a {
    font-size: calc( 20/ 16 * 1rem);
}

.mod-header .header-wrapper .main-nav .menu .sub-menu .menu-item {
    margin-right: 0px;
}

.mod-header .header-wrapper .main-nav .menu .menu-item .sub-menu{
    padding: 5px 20px 10px 20px;
}


/* Logo Header */

.header-logo {
    border-radius: 0px;
}

.header-logo.blue-full {
    display: block;
    height: 162px;
}

 @media (max-width: 991px){
     .header-logo.blue-full {
        height: 80px;
        display: block;
    }
}

.header-logo.white-full {
    display:none;
}

.home .header-logo.blue-full {
    display: none;
}
.header-logo.blue-small {
    display:none;
}

.home .header-logo.white-full {
    height: 162px;
    display: block;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 991px){
    .home .header-logo.white-full {
        height: 80px;
        display: block;
    }

}

.page-scrolled .header-logo.white-full{
    display:none;
}
.page-scrolled .header-logo.blue-full{
    display:none;
}
.page-scrolled .header-logo.blue-small {
    display:block;
    height: 80px;
    transition: all 0.3s ease-in-out;
}

.mod-header .header-wrapper .home-link .img-wrapper {
    height: 100%;
    max-width: 300px;
    transition: all 0.3s ease-in-out;
  }

/* Nav-Bar styling */

.mod-header .header-wrapper {
    align-items: center !important;
}
@media (min-width:992px){
    .mod-header .header-wrapper .main-nav {
        transform: translateY(-47px);
    }
}

@media (max-width: 991px){
    .mod-header .header-wrapper {
        height: 150px;
    }
}

.page-scrolled .mod-header {
    background-color: #ffffff;
    height: 120px;
    transition: all 0.3s ease-in-out;
}
.page-scrolled .mod-header .header-wrapper {
    height: 120px;
    transition: all 0.3s ease-in-out;
}

.page-scrolled .mod-header .header-wrapper .main-nav {
    transform: translateY(0);
}

.mod-header .header-wrapper .home-link{
    height: fit-content;
}

.page-scrolled.home .mod-header {
    color: #31573f;
  }

  .mod-header .header-wrapper .main-nav .menu .menu-item .sub-menu {
    margin-top: 1px;
    font-family: 'HankenGrotesk', sans-serif;
    width: calc(100% + 25px);
    font-weight: 600;
  }

  .mod-header .header-wrapper .mobile-menu .mobile-main-nav .menu .menu-item.menu-item-has-children .sub-menu {
    border-left: 0;
  }
  .mod-header .header-wrapper .mobile-menu .mobile-main-nav .menu .menu-item.menu-item-has-children .sub-menu .menu-item a {
    font-size: 1.4rem;
  }

/* Ticket Navipunkt */

.menu-tickets a {
    background-color: #52b476;
    color: #31573f;
    border-radius: 0px;
    padding: 10px 20px;
    transform: rotate(-7deg);
    transition: all 0.3s ease-in-out;
    display: block;
    width: fit-content;
}

.mobile-main-nav .menu-tickets a {
    margin-top: 50px;
    background-color: #f7a428;
}

.menu-tickets a:hover {
    text-decoration: none !important;
    transform: rotate(0deg);
    transition: all 0.3s ease-in-out;
}


.mobile-menu-trigger .fa-solid.fa-bars, .mobile-menu-trigger .fa-solid.fa-xmark {
    font-size: 35px;
}

.mobile-main-nav .fa-solid.fa-chevron-down {
    font-size: 26px;
}

/* .mod-header .sub-menu {
    color: #ffffff;
  }
*/
/* Content - Container */



@media (max-width: 991px){
    .mod-main {
        margin-top: 150px;
    }
}


/* ---------------------------------------------------------------------------*/
/** Footer **/
/*----------------------------------------------------------------------------*/

/* Footer Nav */
.mod-footer .footer-nav {
    font-family: 'HankenGrotesk', sans-serif;
    font-size: calc(12 / 16 * 1rem);
    line-height: 1.25;
    font-weight: 600;
}
@media screen and (min-width: 768px) {
    .mod-footer .footer-nav {
        font-size: calc(12 / 16 * 1rem);
    }
}
@media screen and (min-width: 1200px) {
    .mod-footer .footer-nav {
        font-size: calc(14 / 16 * 1rem);
    }
}
.mod-footer {
    background-color: #31573f;
    color: #ffffff;
}

.footer-logo.white-img {
    height: 145px;
    margin-right: 30px;
  }
@media (max-width: 575px) {
    .footer-logo.white-img {
        height: 100px;
    }
}

  .col-12.col-sm.footer-col-left {
    display: flex;
    align-items: flex-end;
  }

.mod-footer .address {
    font-family: 'HankenGrotesk', sans-serif;
    font-size: calc(24 / 16 * 1rem);
    font-weight: 500;
}  
@media (max-width: 575px) {
    .mod-footer .address {
        font-size: calc(16 / 16 * 1rem);
        text-align: left;
    }
}

.mod-footer .address p {
    margin-bottom: 0;
    margin-top: 1rem;
}

.mod-footer .footer-bottom {
    background-color:#52b476;
    color:#31573f;
    font-size: calc(15 / 16 * 1rem);
  }

.footer-social-item .text {
    display: none;
}

.footer-content-base {
    align-items: flex-end !important;
}

.mod-footer .socials-wrapper {
    flex-direction: row;
    justify-content: flex-end;
}

@media (max-width: 575px) {
   .mod-footer .socials-wrapper {
        justify-content:center;
    }
}
.mod-footer .socials-wrapper .footer-social-item {
    width: fit-content;
    margin-left: 20px;
    font-size: 30px;
}

.mod-footer .socials-wrapper .footer-social-item:hover {
   margin-bottom: 15px;
   transition: all 0.3s ease-in-out;

}
/*===================== Block Styling ========================*/

/* Fullscreen Header */

.mod-full-screen-header .header-container .text-container {
    margin-top: -60vh;
    position: relative;
  }
.mod-full-screen-header{
    height: 100vh;
}

.mod-full-screen-header img {
    border-radius: 0;
}

.mod-full-screen-header .header-container .img-wrapper .a-image__picture img {
    height: 100vh;
    -webkit-mask-image: none;
    mask-image: none;
}
/* Text und Bild auf Farbfläche */

@media only screen and (min-width: 768px) {
    .mod-text-und-bild-auf-farbflaeche .container {
      padding: 75px var(--bs-gutter-x,.75rem);
    }
  }

/* Galerie */

.mod-galerie-mit-textboxen .gallery-row .img-wrapper {
   
    background-color: transparent;
}

.mod-galerie-mit-textboxen .gallery-row .textbox.small {
    font-size: 2.5rem;
    font-family: 'Prophetbold', sans-serif;
    font-size: 80px;
    line-height: 90px;
    border-radius: 0px;
  }

@media only screen and (min-width: 768px) {
        .mod-galerie-mit-textboxen .gallery-row .textbox.small {
         
        }
      }    

/* Kachelteaser */

.mod-teaserkacheln .teaser-container .link {
    text-decoration: none;
    background-color: #31573f;
    color: #52b476;
    padding: 5px 15px;
    font-size: 26px;
    width: fit-content;
    border-radius: 0px;
    font-family: 'HankenGrotesk', sans-serif;
    font-weight: 600;
    margin-bottom: -16px;
    transition: all 0.3s ease-in-out;
  }

@media (max-width: 1199px){
    .mod-teaserkacheln .teaser-container .link {
        font-size: calc(22 / 16 * 1rem);
    }
}  

  .mod-teaserkacheln .teaser-container .teaser .link {
    color: #31573f;
    background-color: #52b476;

}

.mod-teaserkacheln .teaser-container .link:hover {
    transform: rotate(0deg);
    transition: all 0.3s ease-in-out;
}

.mod-teaserkacheln .teaser-container .teaser-no-img{
    border-radius: 0px;
    padding-bottom: 0px;
}

@media (max-width: 575px){
    .mod-teaserkacheln .teaser-container .teaser-no-img{
        height: calc((100vw - 24px)* 1.33);
    }
}

.mod-teaserkacheln .teaser-container .teaser .img-wrapper {
    border-radius: 0px;
    background-color: transparent;
} 

.mod-teaserkacheln .teaser-container .title {
    font-family: 'Prophetbold', sans-serif;
    font-size: 80px;
    line-height: 90px;
}

@media (max-width: 991px){
    .mod-teaserkacheln .teaser-container .title {
        font-size: 60px;
        line-height: 75px;
      }
}

@media (min-width:992px) AND (max-width: 1199px){
    .mod-teaserkacheln .teaser-container .title {
        font-size: 54px;
        line-height: 68px;
      }
}

@media (min-width:576px) AND (max-width: 767px){
    .mod-teaserkacheln .teaser-container .title {
        font-size: 47px;
        line-height: 60px;
      }
}

.mod-teaserkacheln .teaser-container .teaser {
    position: relative;
}

.mod-teaserkacheln .teaser-container .content-wrapper {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 47px 44px 0;
}

.mod-teaserkacheln .teaser .title {
    color: #52b476;
}

@media (max-width: 575px) {
    .mod-teaserkacheln .teaser-container .teaser-no-img {
      height: calc((60vw - 24px)* 1.33);
    }

    .mod-teaserkacheln .teaser-container .teaser .img-wrapper {
        padding-top: 80%;
      }
      .mod-teaserkacheln .teaser-container {
        margin-bottom: 30px;
      }   
      .mod-teaserkacheln .teaser-container .teaser-no-img {
        margin-bottom: 25px;
      }
  } 

/* Teaser gross */

.mod-teaser-gross .teaser-wrapper .text-wrapper {
    padding: 50px;
  }

@media only screen and (min-width: 768px) {
    .mod-teaser-gross .teaser-wrapper .text-wrapper {
      padding: 100px;
    }
  }

@media only screen and (min-width: 992px) {
    .mod-teaser-gross .teaser-wrapper .text-wrapper {
      padding: 150px;
    }
  }
/* Accordeon */

.mod-accordion .accordion .accordion-item .accordion-header .accordion-button {
    font-size: 30px;
    line-height: 38px;
  }

@media (max-width: 768px){
    .mod-accordion .accordion .accordion-item .accordion-header .accordion-button {
        font-size: 22px;
        line-height: 28px;
      }
}  

/* Divider */

.mod-trennlinie .divider {
    height: 3px;
    width: 100%;
  }

/* ==========================================================================*/
/* Team */

.kdgs-team-item .team-image {
    padding-top: 120%;
  }

.kdgs-team-item .team-content {
    color: #000000;
    margin-top: 15px;
}

.team-content .team-name {
    font-family: 'HankenGrotesk', sans-serif;
    font-weight: 600;

}


@media (min-width: 768px) {
    .kdgs-team-list .col-md-3 {
      width: 33%;
    }
  }
@media (min-width: 1199px) {
    .kdgs-team-list .col-md-3 {
      width: 25%;
    }
  }
  @media (max-width: 767px) {
    .kdgs-team-list .col-md-3 {
      width: 50%;
    }
  }

  @media (max-width: 576px) {
    .kdgs-team-list .col-md-3 {
      width: 100%;
    }
  }


  /* Sponsoren */
  .sponsoren.horizontal {
    height: 125px;
    float: left;
    width: auto;
    margin-right: 50px;
  }

@media (max-width: 1199px){
  .sponsoren.vertikal {
    width: 50%;
  }
  .sponsoren.horizontal {
    height: 80px;
    
  }

}




  /* Todo */