body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.ie7 img{-ms-interpolation-mode:bicubic}.ie8 img{width:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
/* lato-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: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
/* lato-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: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
/* lato-900 - 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: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: url('/fonts/lato-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
/* roboto-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: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
/* roboto-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: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/roboto-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
/* roboto-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: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
/* roboto-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: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
/* roboto-900 - 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: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('/fonts/roboto-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
:root {
    --main-color: #4f9b61; 
    --second-color: #4483ae;
    --grey: #8c8988;
    --dark-grey: #484848;
    --gradient1: #5c82ab;
    --gradient2: #6fa07e;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    color: var(--dark-grey);
    
}
.home-mobile {
    display: none;
}
#container, .container {
    max-width: 1600px;
    margin: 0 auto;
}
a {
    color: var(--main-color);
    text-decoration: none;
}
a:hover {
        text-decoration: underline;
    }
.content-text > div{
    margin:  25px; 
}
.gradient {
    background: rgb(92,130,171);
    background: linear-gradient(90deg, rgba(92,130,171,1) 0%, rgba(111,160,126,1) 100%);
}
.bg-dots {
    background: 
    linear-gradient(90deg, rgba(92,130,171,1) 0%, rgba(111,160,126,1) 100%);
    background-repeat: no-repeat;
    background-position: bottom;
       
}
h1, h2, h3, h4, h5 {
    font-family: 'Lato', sans-serif;
}
h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 30px;
    color: var(--second-color);
}
h1.content-headline {
        margin-top: 35px;
        margin-bottom: 15px;
    }
h2.content-headline {
    font-weight: bold;
    color: var(--main-color);
    font-size: 30px;
    text-align: center;
    margin: 35px auto;
}
header {
    margin: 0 auto;
    max-width: 1600px;
    min-height: 53px;
}
header a:hover {
        text-decoration: none;
    }
.white-font {
    color: white;
}
.text-center {
    text-align: center;
}
.logo-nav {
    color: var(--main-color);
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 35px;
    margin-top: 0px;
}
.logo-nav span {
        display: inline-block;
        color: var(--grey);
    }
#toggle-nav {
    position: absolute;
    top: 11px;
    left: 250px;
    font-size: 20px;
    font-weight: bold;
}
#toggle-nav img {
        height: 30px;
        width: auto;
    }
.toggle-container {
    display: flex;
    align-items: center;
}
.menuactive .open {
        display: inline;
    }
.menuactive .closed {
        display: none;
    }
.menuinactive .open {
        display: none;
    }
.menuinactive .closed {
        display: inline;
    }
#top-nav {
    display: none;
}
nav ul {
        list-style-type: none;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0;
    }
nav li {
        display: inline-block;
        margin-right: 50px;
        margin-bottom: 8px;
    }
nav li:last-of-type {
            margin-right: 0;
        }
nav a {
        color: var(--dark-grey);
        text-decoration: none;
        font-size: 18px;
    }
nav a:hover {
            color: var(--main-color);
            text-decoration: none;
        }
header {
    position: absolute;
    z-index: 1000;
    top: 25px;
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
}
.logo-nav:last-of-type {
    display: none;
}
@media screen and (min-width: 971px){
    .sticky {
        position: fixed;
        top: 0;
    }
        .sticky .logo-nav {
            display: none;
        }
        .sticky .logo-nav:last-of-type {
            display: block;
        }
}
figure img {
    border-radius: 11px;
}
.bright-font {
    color: white;
}
.bright-font h1 {
        color: white;
    }
.text-right {
    text-align: right;
}
.mod_article > * {
    margin: 0 auto;
    max-width: 1000px;
}
.flex {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.flex-wrap {
    flex-wrap: wrap;
}
.white-bubble {
    position: relative;
    background-color: white;
    flex-shrink: 0;
    border-radius: 11px;
    padding: 10px;
    box-sizing: border-box;
    color: var(--dark-grey);
    max-width: 480px;
    display: inline-block;
    margin-bottom: 50px;
}
.white-bubble div, .white-bubble figure {
        margin: 20px;
    }
.white-bubble ul {
        padding-left: 16px;
    }
.white-bubble h4 {
        color: var(--second-color);
        font-weight: bold;
        font-size: 20px;
        text-transform: uppercase;
        margin: 0;
    }
.white-bubble::after {
        content: " ";
        display: block;
        position: absolute;
        bottom: -35px;
        left: 30px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 40px 43px 0 43px;
        border-color: #ffffff transparent transparent transparent;
        border-radius: 11px;
    }
.start-header {
    display: flex;
    justify-content: flex-end;
    flex-direction: column; 
    height: 52vw;
    max-height: 1060px;
    background-image: url('/files/bilder/layout/kopfbild-1600.jpg');
    background-repeat: no-repeat; 
    background-size: 100%;
}
.start-header-title {
        font-size: 7.5vw;
    }
@media screen and (min-width: 1600px) {
.start-header-title {
            font-size: 120px;
    }
        }
.start-header-title {
        font-weight: bold;
        color: var(--main-color);
        margin-right: 50px;
        margin-left: auto;
}
.start-header .content-text {
        margin-right: 20px;
        margin-left: auto;
    }
footer {
    background-color: var(--second-color);
    margin: 0px;
    margin-top: 30px;
    padding: 30px;
    color: white;
}
footer a, footer h2.content-headline {
        color: white;
    }
footer h2.content-headline {
        margin-top: 0;
        border-bottom: 1px solid white;
        padding-bottom: 30px;
    }
footer .inside {
        margin: 0 auto;
        max-width: 1000px;
    }
footer .flex {
        gap: 0px;
        justify-content: center;
    }
footer .flex > div {
            flex-basis: 100%;
        }
footer figure {
        text-align: center;
    }
.mt {
    margin-top: 15px;
}
.mt-2 {
    margin-top: 45px;
}
.mb {
    margin-bottom: 80px;
}
@media screen and (max-width: 1200px) {
  #toggle-nav {
    left: 15px;
    top: 15px;
    margin-bottom: 30px;
  }

  .logo-nav {
    margin-top: 15px;
  }
    #top-nav li {
      display: block;
      padding-left: 15px;
    }
}
@media screen and (max-width: 1400px) {
  .start-header-title {
    font-size: 5vw;
  }
}
@media screen and (max-width: 1280px) {
  .logo-nav a {
    font-size: 20px;
  }
}
@media screen and (max-width: 970px) {
  .start-header-title,
  .start-header .content-text {
    display: none;
  }

  .white-bubble {
    width: 460px;
    flex-basis: 89%;
  }

  header {
    position: fixed;
    z-index: 999;
    top: 0;
  }

  .sticky {
    top: 0;
  }

  .logo-nav {
    margin-top: 0;
  }

  h1,
  h2,
  h2.content-headline {
    font-size: 20px;
  }

  .headroom--pinned {
    display: block;
  }

  .headroom--unpinned {
    display: none;
  }

  .headroom {
    will-change: transform;
    transition: transform 800ms linear;
    -moz-transition: transform 800ms linear;
  }

  .headroom--pinned {
    transform: translateY(0%);
    -moz-transform: translateY(0%);
  }

  .headroom--unpinned {
    transform: translateY(-100%);
    -moz-transform: translateY(-100%);
  }
  
  figure {
    padding-left: 16px;
    padding-right: 16px;
  }

  #main {
    margin-top: 60px;
  }

}
@media screen and (max-width: 560px) {
  body {
    font-size: 16px;
  }

  #header {
    border-bottom: 1px solid var(--main-color);
  }

  .logo-nav,
  .logo-nav:last-of-type {
    display: none !important;
  }

  .home-mobile {
    display: inline;
    float: right;
  }
    .home-mobile img {
      width: auto;
      height: 40px;
    }
    .home-mobile a {
      display: block;
      padding-top: 8px;
      padding-right: 16px;
    }

  #top-nav {
    padding-top: 55px;
  }
}