/*
Theme Name:         Sage Starter Theme
Theme URI:          https://roots.io/sage/
Description:        Theme for Wohnbau Weil am Rhein by Southvision
Version:            1.0
Author:             Marco Försch
Author URI:         https://southvision.de/
Text Domain:        sage

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/
/* montserrat-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/montserrat-v29-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/montserrat-v29-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/montserrat-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/montserrat-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }


  /**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed ../fonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Filson Soft Black by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Black Italic by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Book by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Bold by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Heavy Italic by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Heavy by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Book Italic by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Light by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Light Italic by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Medium by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Medium Italic by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Regular by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Bold Italic by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Regular Italic by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Thin by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry

 * Webfont: Filson Soft Thin Italic by Mostardesign
 * URL: https://www.myfonts.com/collections/mostardesign-foundry
 
 * © 2025 MyFonts Inc. */


  
@font-face {
    font-family: "FilsonSoftHeavyItalic";
    src: url('../fonts/FilsonSoftHeavyItalic/font.woff2') format('woff2'), url('../fonts/FilsonSoftHeavyItalic/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftRegularItalic";
    src: url('../fonts/FilsonSoftRegularItalic/font.woff2') format('woff2'), url('../fonts/FilsonSoftRegularItalic/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftBook";
    src: url('../fonts/FilsonSoftBook/font.woff2') format('woff2'), url('../fonts/FilsonSoftBook/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftLightItalic";
    src: url('../fonts/FilsonSoftLightItalic/font.woff2') format('woff2'), url('../fonts/FilsonSoftLightItalic/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftBoldItalic";
    src: url('../fonts/FilsonSoftBoldItalic/font.woff2') format('woff2'), url('../fonts/FilsonSoftBoldItalic/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftMediumItalic";
    src: url('../fonts/FilsonSoftMediumItalic/font.woff2') format('woff2'), url('../fonts/FilsonSoftMediumItalic/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftThinItalic";
    src: url('../fonts/FilsonSoftThinItalic/font.woff2') format('woff2'), url('../fonts/FilsonSoftThinItalic/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftThin";
    src: url('../fonts/FilsonSoftThin/font.woff2') format('woff2'), url('../fonts/FilsonSoftThin/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftBlackItalic";
    src: url('../fonts/FilsonSoftBlackItalic/font.woff2') format('woff2'), url('../fonts/FilsonSoftBlackItalic/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftLight";
    src: url('../fonts/FilsonSoftLight/font.woff2') format('woff2'), url('../fonts/FilsonSoftLight/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftRegular";
    src: url('../fonts/FilsonSoftRegular/font.woff2') format('woff2'), url('../fonts/FilsonSoftRegular/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftBold";
    src: url('../fonts/FilsonSoftBold/font.woff2') format('woff2'), url('../fonts/FilsonSoftBold/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftBlack";
    src: url('../fonts/FilsonSoftBlack/font.woff2') format('woff2'), url('../fonts/FilsonSoftBlack/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftHeavy";
    src: url('../fonts/FilsonSoftHeavy/font.woff2') format('woff2'), url('../fonts/FilsonSoftHeavy/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftBookItalic";
    src: url('../fonts/FilsonSoftBookItalic/font.woff2') format('woff2'), url('../fonts/FilsonSoftBookItalic/font.woff') format('woff');
  }
  @font-face {
    font-family: "FilsonSoftMedium";
    src: url('../fonts/FilsonSoftMedium/font.woff2') format('woff2'), url('../fonts/FilsonSoftMedium/font.woff') format('woff');
  }
  

  
  /* VARIABLES */
  
  :root{
      --green: #7BB42D;
      --blue1: #1896D6;
      --blue2: #1DAFE0;
      --blue3: #006699;
      --blue4: #E5F0F7;
      --blue5: #1E3F50;
      --blue6: #536A71;
      --blue7: #0B425E;
      --blue8: #072E43;
      --blue9: #075075;
      --blue10: #095982;
      --blue11: #2C7396;
      --blue12: #006699;
      --blue13: #3F7A91;
      --grey: #707070;
      --orange: #E94E1B;
      --black: #000;
      --white: #fff;
      --sectionPadding: 8rem;
      --kaushan: 'KaushanScript', sans-serif;
      --base-font-size: 9px;
  }
  

@media(min-width: 576px){
    :root{
        --containerWidth: 540px;
    }
}

@media(min-width: 768px){
    :root{
        --containerWidth: 720px;
        --sectionPadding: 6rem;
    }
}

@media(min-width: 992px){
    :root{
        --containerWidth: 960px;
    }
}

@media(min-width: 1200px){
    :root{
        --containerWidth: 1140px;
    }
}

@media(min-width: 1400px){
    :root{
        --containerWidth: 1320px;
    }
}

@media(min-width: 1700px){
    :root{
        --containerWidth: 1640px;
    }
}

@media(max-width: 991px){
    :root{
        --base-font-size: 8.5px;
    }
}

@media(max-width: 767px){
    :root{
        --base-font-size: 8.5px;
    }    
}

@media(max-width: 575px){
    :root{
        --containerWidth: 100%;
    }
}
  
  /* ALLGEMEIN */
  
  *:focus {
      outline: none!important;
  }
  
  html {
      scroll-behavior: smooth;
      font-size: var(--base-font-size);
  }

  @media(max-width: 575px){
    html{
        font-size: 8px!important;
    }
  }

  a{
    color: var(--blue7);
  }
  
  body {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.8rem;
      overflow-x: hidden;
      color: var(--blue7);
  }
  
  section{
      padding-top: var(--sectionPadding);
      padding-bottom: var(--sectionPadding);
  }

  section.friedaSection{
    font-family: "FilsonSoftRegular", sans-serif;
    background-image: url('../images/frieda-background.webp');
    background-repeat: repeat;
    background-size: contain;
    color: var(--blue12);
  }

  section.friedaSection h1, 
  section.friedaSection .h1, 
  section.friedaSection h2, 
  section.friedaSection .h2, 
  section.friedaSection h3, 
  section.friedaSection .h3, 
  section.friedaSection h4,
  section.friedaSection .h4,
  section.friedaSection strong{
    font-family: 'FilsonSoftBold', sans-serif;
  }

  section.friedaSection em h1, 
  section.friedaSection em .h1, 
  section.friedaSection em h2, 
  section.friedaSection em .h2, 
  section.friedaSection em h3, 
  section.friedaSection em .h3, 
  section.friedaSection em h4,
  section.friedaSection em .h4,
  section.friedaSection em strong
  section.friedaSection h1 em, 
  section.friedaSection .h1 em, 
  section.friedaSection h2 em, 
  section.friedaSection .h2 em, 
  section.friedaSection h3 em, 
  section.friedaSection .h3 em, 
  section.friedaSection h4 em,
  section.friedaSection .h4 em,
  section.friedaSection strong em{
    font-family: 'FilsonSoftBoldItalic', sans-serif;
  }

  section.friedaSection em{
    font-family: 'FilsonSoftRegularItalic', sans-serif;
  }
  
  img, svg {
      width: 100%;
      height: auto;
  }
  
  iframe {
      width: 100%;
  }
  
  h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
      margin-top: 0;
      color: var(--blue7);
  }

  h1, .h1 {
    font-size: 8rem;
    font-weight: 700;
    line-height: 1.1;

  }

  h2, .h2 {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.1;
  }

  h3, .h3 {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.1;
  }

  h4, .h4 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .bigFont{
    font-size: 3.6rem;
}

  .xtremebigFont{
    font-size: 12rem;
    line-height: 1.08;
    font-weight: 700;
}

.welleGross img{
    width: 44rem;
    max-width: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.welleKlein img{
    width: 30rem;
    max-width: 100%;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

span.orangeText{
    color: var(--orange)!important;
}

@media(max-width: 1199px){
    .xtremebigFont{
        font-size: 10rem;
    }
}

  @media(max-width: 991px){
    h1, .h1 {
        font-size: 6.5rem;
    }
    h2, .h2 {
        font-size: 3.8rem;
    }
    h3, .h3 {
        font-size: 3.2rem;
    }
    h4, .h4 {
        font-size: 2.6rem;
    }
    .xtremebigFont{
        font-size: 9rem;
    }
  }
  @media(max-width: 767px){
    h1, .h1 {
        font-size: 4.2rem;
    }
    h2, .h2 {
        font-size: 3.2rem;
    }
    h3, .h3 {
        font-size: 2.8rem;
    }
    h4, .h4 {
        font-size: 2.4rem;
    }
    .bigFont{
        font-size: 2.6rem;
    }
    .xtremebigFont{
        font-size: 8rem;
    }
  }
  
  @media(max-width: 550px){
    .bigFont{
        font-size: 2.2rem;
    }
    .xtremebigFont{
        font-size: 6rem;
    }
  }
  
  .flexRow {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
  }
  
  .flexWrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  }
  
  .justCenter {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
  }
  
  .justBetween {
      -webkit-box-pack: space-between;
          -ms-flex-pack: space-between;
              justify-content: space-between;
  }
  
  .alignConCenter {
      -ms-flex-line-pack: center;
          align-content: center;
  }
  
  .alignItemsCenter {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
  }
  
  .alignItemsEnd {
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
  }
  
  .text-center{
      text-align: center;
  }
  
  .text-left{
      text-align: left;
  }
  
  .text-right{
      text-align: right;
  }
  
  .padTo3 {
      padding-top: 3rem;
  }
  
  .maTo3 {
      margin-top: 3rem;
  }
  
  .maTo6 {
      margin-top: 6rem;
  }
  
  .ctaBtn {
      padding: 1.5rem 5.5rem;
      border-radius: 25px;
      color: #fff;
      background-color: var(--blue2);
      -webkit-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transition: all 0.4s ease;
      display: inline-block;
      text-align: center;
      position: relative;
      font-size: 1.8rem;
      font-weight: 700;
      border: 2px solid var(--blue2);
  }
  
  .ctaBtn:hover {
      background-color: var(--white);
      color: var(--blue2);
  }
  
  
  .ctaBtn.ghostBtn {
      color: var(--blue2);
      background-color: transparent;
      border: 2px solid var(--blue2);
  }
  
  .ctaBtn.ghostBtn:hover {
      background-color: var(--white);
      color: var(--blue2);
  }
  
  section.friedaSection .ctaBtn {
    padding: 1.5rem 5.5rem;
    border-radius: 25px;
    color: #fff;
    background-color: var(--orange);
    border: 2px solid var(--orange);
}

section.friedaSection .ctaBtn:hover {
    background-color: var(--white);
    color: var(--orange);
}
  
section.friedaSection .ctaBtn.ghostBtn {
    color: var(--orange);
    background-color: transparent;
    border: 2px solid var(--orange);
}

section.friedaSection .ctaBtn.ghostBtn:hover {
    background-color: var(--white);
    color: var(--orange);
}

.multipleCtaWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    row-gap: 3rem;
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
}

  
  @media (min-width: 1200px) {	
      .order1lg {
          -webkit-box-ordinal-group: 2;
              -ms-flex-order: 1;
                  order: 1;
      }
      
      .order2lg {
          -webkit-box-ordinal-group: 3;
              -ms-flex-order: 2;
                  order: 2;
      }
  
      .order3lg {
          -webkit-box-ordinal-group: 4;
              -ms-flex-order: 3;
                  order: 3;
      }
      
      .order4lg {
          -webkit-box-ordinal-group: 5;
              -ms-flex-order: 4;
                  order: 4;
      }
  }
  
  @media (min-width: 992px) and (max-width: 1199px) {	
      .order1md {
          -webkit-box-ordinal-group: 2;
              -ms-flex-order: 1;
                  order: 1;
      }
      
      .order2md {
          -webkit-box-ordinal-group: 3;
              -ms-flex-order: 2;
                  order: 2;
      }
  
      .order3md {
          -webkit-box-ordinal-group: 4;
              -ms-flex-order: 3;
                  order: 3;
      }
      
      .order4md {
          -webkit-box-ordinal-group: 5;
              -ms-flex-order: 4;
                  order: 4;
      }
  }
  
  @media (max-width: 1199px){	
      .maToMD3 {
          margin-top: 3rem;
      }	
      
      .maToMD6 {
          margin-top: 6rem;
      }	
  }
  
  @media (max-width: 991px){	
  
      .maToSM3 {
          margin-top: 3rem;
      }	
      
      .maToSM6 {
          margin-top: 6rem;
      }	
  }
  
  @media (min-width: 768px) and (max-width: 991px){	
  
      .order1sm {
          -webkit-box-ordinal-group: 2;
              -ms-flex-order: 1;
                  order: 1;
      }
      
      .order2sm {
          -webkit-box-ordinal-group: 3;
              -ms-flex-order: 2;
                  order: 2;
      }
  
      .order3sm {
          -webkit-box-ordinal-group: 4;
              -ms-flex-order: 3;
                  order: 3;
      }
      
      .order4sm {
          -webkit-box-ordinal-group: 5;
              -ms-flex-order: 4;
                  order: 4;
      }
  }
  

  @media (max-width: 767px){

      .maToXS3 {
          margin-top: 3rem;
      }	
      
      .maToXS6 {
          margin-top: 6rem;
      }	
      
      .order1xs {
          -webkit-box-ordinal-group: 2;
              -ms-flex-order: 1;
                  order: 1;
      }
      
      .order2xs {
          -webkit-box-ordinal-group: 3;
              -ms-flex-order: 2;
                  order: 2;
      }
      
      .order3xs {
          -webkit-box-ordinal-group: 4;
              -ms-flex-order: 3;
                  order: 3;
      }
      
      .order4xs {
          -webkit-box-ordinal-group: 5;
              -ms-flex-order: 4;
                  order: 4;
      }
      
      .ctaBtn{
        padding: 1.2rem 4.5rem;
        font-size: 1.6rem;
      }
  }
  @media(min-width: 1700px){
    .container {
        width: 1640px;
    }
  }
  

#swipebox-bottom-bar{
    bottom: 0 !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
}

/* HEADER */
  
.topHeaderWrap{
    background-color: var(--blue3);
    color: var(--white);
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.8rem;
}
  
.topHeaderWrap .container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
  
.topHeaderWrap .container > div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: center;
        align-content: center;
    position: relative;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
  
.topHeaderWrap .container > div:after{
    content: '';
    position: absolute;
    top: 20%;
    right: 0;
    height: 60%;
    width: 3px;
    background-color: var(--white);
}
  
.topHeaderWrap .container > div:last-of-type:after{
    display: none;
}
  
.topHeaderWrap a{
    color: var(--white);
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.topHeaderWrap .crmLinkWrap img{
    margin-right: 1rem;
    width: 3.5rem;
}

.wpml-ls-legacy-list-horizontal>ul{
    padding-right: 0;
}

.langSwitcherWrap {
    margin-right: 1.5rem;
}

.controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-left: 1.5rem;
    padding-right: 17px;
}

.controlsWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.controlsWrap div{
    font-size: 3rem;
    padding: 1rem;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}

.controlsWrap div.disabled{
    opacity: .5;
}

.controls .fontSizeWrap{
    padding-left: 1rem;
}

.controls span{
    display: block;
    text-align: center;
    letter-spacing: 1px;
    text-transform: none;
}

header{
    font-size: 2rem;
}

header .navbar-brand img{
    margin-top: -4rem;
    width: 35rem;
}

header .navbar-nav > li > a{
    color: var(--blue7);
    font-weight: 700;
}

header .mobileMenu .navbar-nav > li > a{
    transition: color .4s ease;
}

header .mobileMenu .navbar-nav > li.current-menu-item > a,
header .mobileMenu .navbar-nav > li > a:hover{
    color: var(--blue2);
}

@media(min-width: 992px){
    header .container:before, header .container:after, header .row:before, header .row:after, header .navbar:before, header .navbar:after {
        display: none;
    }

    header .container {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
}

@media(max-width: 991px){
    header .navbar-brand img{
        width: 28rem;
        margin-top: -3rem;
    }
}

@media(max-width: 767px){
    header .navbar-brand img{
        width: 24rem;
    }
    .topHeaderWrap .container{
        width: 100%;
        font-size: 1.4rem;
    }
    .wpml-ls-legacy-list-horizontal {
        padding-right: 5px;
        padding-left: 5px;
    }
    .controls{
        padding-left: 0;
        padding-right: 15px;
    }
}

@media(max-width: 575px){
    .topHeaderWrap .controls {
        display: none!important;
    }
    .navbar-collapse.in{
        overflow-y: unset;
    }
}

/* Menu */

.desktopMenu{
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.desktopMenu:before{
    content: '';
    position: absolute;
    z-index: -1;
    background-color: var(--blue9);
    width: 100vw;
    height: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.desktopMenu a{
    color: var(--white);
}

.desktopMenu .collapse.navbar-collapse{
    width: 100%;
}

.desktopMenu .navbar-nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    row-gap: 3rem;
    padding-bottom: 3rem;
}

/* Links Submenues */

.desktopMenu .navbar-nav > li > ul a:hover{
    font-weight: 700;
}


/* Hintergrund zweite Reihe */

.desktopMenu .navbar-nav > li:nth-child(4) {
    position: relative;
}

.desktopMenu .navbar-nav > li:nth-child(4)::before {
    content: "";
    position: absolute;
    top: -2rem;
    left: calc( ( 100vw - var(--containerWidth) + 3rem ) / -2 );
    width: 100vw; 
    height: calc( 100% + 4rem ); 
    background-color: var(--blue10);
    z-index: -1; 
}

/*  Wrap Hauptmenupunkt Desktopmenu */
.desktopMenu .navbar-nav > li {
    width: 33%;
    position: relative;
    padding: 2rem 4rem 2rem 7rem;
}

/*  Icon Hauptmenupunkt Desktopmenu */
.desktopMenu .navbar-nav > li > img,
.desktopMenu .navbar-nav > li > svg{
    width: 5rem;
    position: absolute;
    top: 2rem;
    left: 0;
}

.desktopMenu .navbar-nav > li > a > svg {
    width: 5rem;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translateX(calc(-100% - 2rem));
        -ms-transform: translateX(calc(-100% - 2rem));
            transform: translateX(calc(-100% - 2rem));
}

/*  Text Hauptmenupunkt Desktopmenu  */
.desktopMenu .navbar-nav > li > a {
    font-size: 2.8rem;
    font-weight: 700;
    width: 100%;
    position: relative;
    display: block;
    color: var(--white);
    padding-left: 0;
}
.desktopMenu .navbar-nav > li > a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    height: 2px;
}
.desktopMenu .navbar-nav  .caret {
    display: none;
}

/*  1. Submenuwrap Desktopmenu  */
.desktopMenu .navbar-nav > li > ul {
    display: block;
    position: relative;
    list-style: none;
    padding-left: 0;
    font-size: 2.2rem;
    padding-top: 1.5rem;
}

/*  Text Menupunkt 1. Submenu  */
.desktopMenu .navbar-nav > li > ul > li > a {
    padding-left: 0;
}

/*  2. Submenuwrap Desktopmenu  */
.desktopMenu .navbar-nav > li > ul > li > ul {
    display: block;
    position: relative;
    list-style: none;
    padding-left: 1rem;
    font-size: 1.8rem;
}


@media(max-width: 1399px){
    .desktopMenu .navbar-nav > li {
        width: 50%;
    }

    
    .desktopMenu .navbar-nav > li:nth-child(3) {
        position: relative;
    }

    .desktopMenu .navbar-nav > li:nth-child(3)::before {
        content: "";
        position: absolute;
        top: -2rem;
        left: calc( ( 100vw - var(--containerWidth) + 3rem ) / -2 );
        width: 100vw; 
        height: calc( 100% + 4rem ); 
        background-color: var(--blue10);
        z-index: -1; 
    }

    
    .desktopMenu .navbar-nav > li:nth-child(4) {
        position: relative;
    }

    .desktopMenu .navbar-nav > li:nth-child(4)::before {
        display: none;
    }
}

@media(min-width: 992px) and (max-width: 1199px){
    .nav > li > a {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    header .navbar-brand img {
        margin-top: -3.5rem;
        width: 30rem;
    }
}

@media(min-width: 992px){
    .desktopMenuTrigger a .caret,
    .desktopMenuTrigger li .menu-icon{
        display: none!important;
    }
    .desktopMenuTrigger .dropdown-menu{
        display: none!important;
    }
    .desktopMenu {
        -webkit-transition: opacity 0.4s ease;
        -o-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        opacity: 0;
        pointer-events: none;
    }
    .desktopMenuTrigger:hover + div,
    .desktopMenu:hover {
        opacity: 1;
        pointer-events: all;
    }
    .desktopMenuTrigger .navbar-collapse,
    .desktopMenuTrigger .navbar-collapse .navbar-nav > li:last-of-type > a{
        padding-right: 0;
    }

}

@media(max-width: 991px){
    .desktopMenu{
        display: none!important;
    }
}

/* Mobile Menu */

.navbar-toggle .icon-bar{
    background-color: var(--blue9);
}

ul.navbar-nav .submenu-toggle{
    display: none;
}

@media(max-width: 991px){
    /* Icon */
    .mobileMenu .navbar-nav > li > img,
    .mobileMenu .navbar-nav > li > svg{
        width: 3.5rem;
        position: absolute;
        top: 0;
        left: 0;
    }
    .mobileMenu .navbar-nav > li > a > svg{
        width: 3.5rem;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: translateX(calc(-100% - 1rem));
            -ms-transform: translateX(calc(-100% - 1rem));
                transform: translateX(calc(-100% - 1rem));
    }
    .mobileMenu .navbar-nav > li > a > svg path,
    .mobileMenu .navbar-nav > li > svg path{
        fill: var(--blue7);
    }
    /* Hauptmenüpunkt */
    .mobileMenu .navbar-nav > li {
        position: relative;
        padding-left: 4.5rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    /* Menupunkt Text Hauptmenu */
    .mobileMenu .navbar-nav > li >  a {
        color: var(--blue7);
        font-size: 2rem;
        display: inline-block;

    }
    /* Menupunkt 1. Submenu */
    .mobileMenu .navbar-nav > li > ul > li >  a {
        color: var(--blue7);
        font-size: 1.8rem;

    }
    /* Menupunkt 1. Submenu */
    .mobileMenu .navbar-nav > li > ul > li  > ul > li > a {
        color: var(--blue7);
        font-size: 1.6rem;
        margin-left: 1rem;

    }

    /* Submenu Trigger */

    .mobileMenu span.caret{
        display: none;
    }

    .mobileMenu ul.navbar-nav > li > .submenu-toggle{
        font-size: 3rem;
        font-weight: 500;
        display: inline-block;
        margin-left: 2rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }

}
@media(max-width: 575px){
    .mobileMenu .navbar-nav > li{
        padding-left: 0;
    }
    .mobileMenu .navbar-nav > li > svg,
    .mobileMenu .navbar-nav > li > img,
    .mobileMenu .navbar-nav > li > a > svg{
        display: none;
    }
    .navbar-collapse.desktop-menu-trigger{
        padding-left: 0;
        padding-right: 0;
    }
}

.navbar-toggle{
    position: relative;
    z-index: 9;
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    -o-transition: transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
}

.navbar-toggle:not(.collapsed) {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2){
    -webkit-transform: translateY(6px) rotate(45deg);
        -ms-transform: translateY(6px) rotate(45deg);
            transform: translateY(6px) rotate(45deg);
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(4){
    -webkit-transform: translateY(-6px) rotate(-45deg);
        -ms-transform: translateY(-6px) rotate(-45deg);
            transform: translateY(-6px) rotate(-45deg);
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3){
    opacity: 0;
}

.navbar-toggle .icon-bar{
    -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
    transition: opacity .4s ease, -webkit-transform .4s ease;
    -o-transition: transform .4s ease, opacity .4s ease;
    transition: transform .4s ease, opacity .4s ease;
    transition: transform .4s ease, opacity .4s ease, -webkit-transform .4s ease;
}

/* BS Drodownmenu */
@media(max-width: 991px){
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        font-size: 14px;
        text-align: left;
        list-style: none;
        background-color: #ffffff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #cccccc;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
      }
      .navbar-nav .open .dropdown-menu {
        display: block;
        width: 100%;
      }
}

/* Desktop Menu wenn gescrolled */

@media(min-width: 992px){
    header.scrolled .desktopMenu,
    header.sticky .desktopMenu{
        display: none;
    }

    header.scrolled .desktopMenuTrigger .nav.navbar-nav > li > ul{
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 15px 0;
        margin: 2px 0 0;
        font-size: 14px;
        text-align: left;
        list-style: none;
        background-color: #ffffff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #cccccc;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        margin-top: 0;
        border-radius: 0;
    }

    header.scrolled .desktopMenuTrigger .nav.navbar-nav > li {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    header.scrolled .desktopMenuTrigger .nav.navbar-nav > li:hover .dropdown-menu{
        display: block!important
    }

    header.scrolled .desktopMenuTrigger .nav.navbar-nav > li > ul ul.dropdown-menu {
        padding-left: 1.5rem;
        list-style: none;
    }

    header.scrolled .desktopMenuTrigger .nav.navbar-nav > li > ul > li > a{
        color: var(--blue7);
        font-weight: 700;
        font-size: 1.6rem;
    }

    header.scrolled .desktopMenuTrigger .nav.navbar-nav > li > ul ul.dropdown-menu a{
        color: var(--blue7);
        font-weight: 500;
        font-size: 1.6rem;
    }

    header.scrolled a:hover{
        color: var(--blue2)!important;
    }

}

/* Sticky Header */


header.scrolled {
	top: -400px;
	-webkit-transition: top 1.5s ease;
	-o-transition: top 1.5s ease;
	transition: top 1.5s ease;
	position: fixed;
	width: 100%;
	background: #fff;
    z-index: 9;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header.scrolled.sticky {
	top: 0;
}

header.scrolled .topHeaderWrap{
    display: none;
}

header.scrolled .navbar-brand img{
    width: 20rem;
    margin-top: 0;
}

@media (min-width: 992px){
	header.scrolled .desktopMenuTrigger:hover + div,
	header.scrolled .desktopMenu:hover{
		display: none;
	}
}

/* Frieda Background */

section.friedaSection {
    position: relative;
}

section.friedaSection.gimmeTopBg:before,
section.friedaSection.gimmeBottomBg:after {
    content: '';
	position: absolute;
	height: 50%;
	width: calc( var(--containerWidth) - ( var(--containerWidth) / 6 ) );
	left: calc( ( ( 100vw - var(--containerWidth) ) / 2 ) + ( var(--containerWidth) / 12 ) );
	background-color: var(--white);
	-webkit-box-shadow: 30px 96px 96px rgba(0, 0, 0, .16);
	        box-shadow: 30px 96px 96px rgba(0, 0, 0, .16);
	z-index: 2;
}

section.friedaSection.gimmeTopBg:before{
    top: 0;
}

section.friedaSection.gimmeBottomBg:after {
	bottom: 0;
}


/* FOOTER */

footer{
    background-color: var(--blue5);
    color: var(--white);
    font-size: 2rem;
    padding-top: 5rem;
   
}

footer a{
    color: var(--white);
}

footer .container{
    position: relative;
}

footer .mainFooterContainer:after{
    content: '';
    position: absolute;
    top: 50%;
    right: 1.5rem;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 8.2rem;
    height: 12rem;
    background-image: url(../images/drei-boxen-versetzt.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
}

footer .mainFooterContainer .flexRow{
    row-gap: 3rem;
}

footer .footerLogoWrap{
    margin-bottom: 3rem;
}

footer .socialMediaFooter{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
    row-gap: 2rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

footer .socialMediaWrap{
    width: 4.6rem;
}

footer .footer2Wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: justify;
        align-content: space-between;
    height: 100%;
}

footer .contactWrap span{
    display: inline-block;
    width: 8rem; 
}

footer .footerMailLink{
    color: var(--blue2);
}

footer .bottomFooterWrap{
    background-color: var(--black);
    margin-top: 3rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

footer .bottomFooterInnerWrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
    row-gap: 2rem;
}

@media(max-width: 991px){
    footer .mainFooterContainer:after{
        width: calc( 8.2rem*.8 );
        height: calc( 12rem*.8 );
        bottom: 0;
        top: unset;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    } 
    footer .footer2Wrap{
        display: block;
    }

    footer .footerLogoWrap{
        width: 24rem;
    }

    footer .socialMediaFooter{
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
}