/* Fonts */
@font-face {
    font-family: 'landsbergregular';
    src: url('../fonts/landsberg-regular-webfont.woff2') format('woff2'),
         url('../fonts/landsberg-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}


@font-face {
    font-family: 'landsbergbold';
    src: url('../fonts/landsberg-bold-webfont.woff2') format('woff2'),
         url('../fonts/landsberg-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

/* Farbpalette */
:root {
  --dgrau:       #707070;
  --grau:        #b2b2b2;
  --hgrau:       #B3B2B2;
  --hhgrau:      #e6e6e6;
  --gruen:       #5F8066;
  --dgruen:      #4B6B52;
  --orange:      #F5AA36;
  --horange:     #FCCB71;
  --snow:        #FCFCFD;
  --weiss:       #ffffff;
  --black:       #000000;
}

      

html, body {
    margin: 0;
    padding: 0;
    font-family: 'landsbergregular', sans-serif;
    font-size: 18px;
    line-height: 22px;
    font-weight: regular;
    color: var(--dgrau);
    scroll-behavior: smooth;
    background-color: var(--snow);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*:focus, .btn.focus, .btn:focus, button:focus {
    outline: 0 none;
    border: 0;
    border-color: transparent;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
}
::-webkit-scrollbar {
    width: 6px
}
::-webkit-scrollbar-track {
    background: var(--weiss);
    border-radius: 0px
}
::-webkit-scrollbar-thumb {
    background: var(--dgruen);
    border-radius: 3px
}
::selection {
    background: var(--dgruen);
    color: var(--schnee);
}
::-moz-selection {
    background: var(--dgruen);
    color: var(--schnee);
}

a {
    color: var(--grau);
    text-decoration: none;
}
a:hover {
    color: var(--black);
}
figure {
    margin: 0;
    padding: 0;
}
.btn, .strong, strong {
    font-weight: bold;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
    font-family: 'landsbergregular', sans-serif;
    text-transform: uppercase;
}

.rasterbox h1, .rasterbox .h1, .rasterbox h2, .rasterbox .h2, .rasterbox h3, .rasterbox .h3, .rasterbox h4, .rasterbox .h4, .rasterbox h5, .rasterbox .h5, .rasterbox h6, .rasterbox .h6 {
    text-transform: none;
}


h1, .h1, h2, .h2, h3, .h3 {
    font-size: 36px;
    line-height: 40px;
}
 h4, .h4, h5, .h5, h6, .h6{
    font-size: 28px;
    line-height: 32px;
}

@media screen and (max-width: 992px) {
    h1, .h1, h2, .h2, h3, .h3 {
        font-size: 28px;
        line-height: 32px;
    }
     h4, .h4, h5, .h5, h6, .h6{
        font-size: 20px;
        line-height: 24px;
    }
}



/***********
Hintergrundfarben
************/

.bg_weiss,
.bg-white {
    background-color: var(--weiss);
    color: var(--dgrau);
}
.bg_weiss a,
.bg-white a{
    color: var(--dgrau);
}
.bg_weiss a:hover,
.bg-white a:hover{
    color: var(--black);
    transition: color 0.3s ease;
}


.bg_gruen {
    background-color: var(--gruen);
    color: var(--weiss);
}
.bg_gruen a{
    color: var(--weiss);
}
.bg_gruen a:hover{
    color: var(--snow);
    transition: color 0.3s ease;    
}


.bg_orange {
    background-color: var(--orange);
    color: var(--weiss);
}
.bg_orange a{
    color: var(--weiss);
}
.bg_orange a:hover{
    color: var(--snow);
    transition: color 0.3s ease;    
}

.bg_weiss_logo {
    background-color: var(--weiss);
    background-image: url(../images/bg-logo.svg);
    background-size: auto 140%;
    background-position: 140% center;
    background-repeat: no-repeat;
}
.bg_weiss_borderbottom {
    background-color: var(--weiss);
    border-bottom: 1px solid var(--hhgrau);
}
.bg_weiss_borderbottom a{
    color: var(--dgrau);
}
.bg_weiss_borderbottom a:hover{
    color: var(--black);
    transition: color 0.3s ease;
}


/*********
Abstände
**********/
.space-xl-y {
    padding-top: 70px;
    padding-bottom: 70px;
}

.space-xl-t {
    padding-top: 70px;
}

.space-xl-b {
    padding-bottom: 70px;
}

.space-sm-y {
    padding-top: 35px;
    padding-bottom: 35px;
}

.space-sm-t {
    padding-top: 35px;
}

.space-sm-b {
    padding-bottom: 35px;
}

.space-0 {
    padding: 0 !important;
}

@media (min-width: 768px) {
    .space-xl-y {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .space-xl-t {
        padding-top: 100px;
    }

    .space-xl-b {
        padding-bottom: 100px;
    }

    .space-sm-y {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .space-sm-t {
        padding-top: 50px;
    }

    .space-sm-b {
        padding-bottom: 50px;
    }

}

/*********
Buttons
**********/

.green_large_full {
    background-color: var(--gruen);
    border-color: var(--gruen);
    color: var(--weiss)!important;
    padding: 6px 35px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.green_large_full:hover {
    background-color: var(--dgruen);
    border-color: var(--dgruen);
    color: var(--weiss)!important;
    padding: 6px 35px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.green_large_outline {
    background-color: transparent;
    border: 2px solid var(--gruen);
    color: var(--gruen)!important;
    padding: 4px 33px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.green_large_outline:hover {
    background-color: var(--gruen);
    border-color: var(--gruen);
    color: var(--weiss)!important;
    padding: 4px 33px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.green_small_full {
    background-color: var(--gruen);
    border-color: var(--gruen);
    color: var(--weiss)!important;
    padding: 4px 25px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.green_small_full:hover {
    background-color: var(--dgruen);
    border-color: var(--dgruen);
    color: var(--weiss)!important;
    padding: 4px 25px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.green_small_outline {
    background-color: transparent;
    border: 2px solid var(--gruen);
    color: var(--gruen)!important;
    padding: 2px 23px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.green_small_outline:hover {
    background-color: var(--gruen);
    border-color: var(--gruen);
    color: var(--weiss)!important;
    padding: 2px 23px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.orange_large_full {
    background-color: var(--orange);
    border-color: var(--orange);
    color: var(--weiss)!important;
    padding: 6px 35px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.orange_large_full:hover {
    background-color: var(--horange);
    border-color: var(--horange);
    color: var(--weiss)!important;
    padding: 6px 35px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.orange_large_outline {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: var(--orange)!important;
    padding: 4px 33px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.orange_large_outline:hover {
    background-color: var(--orange);
    border-color: var(--orange);
    color: var(--weiss)!important;
    padding: 4px 33px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.orange_small_full {
    background-color: var(--orange);
    border-color: var(--orange);
    color: var(--weiss)!important;
    padding: 4px 25px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.orange_small_full:hover {
    background-color: var(--horange);
    border-color: var(--horange);
    color: var(--weiss)!important;
    padding: 4px 25px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.orange_small_outline {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: var(--orange)!important;
    padding: 2px 23px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.orange_small_outline:hover {
    background-color: var(--orange);
    border-color: var(--orange);
    color: var(--weiss)!important;
    padding: 2px 23px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.white_large_full {
    background-color: var(--weiss);
    border-color: var(--weiss);
    color: var(--dgruen)!important;
    padding: 6px 35px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.white_large_full:hover {
    background-color: var(--grau);
    border-color: var(--grau);
    color: var(--dgruen)!important;
    padding: 6px 35px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.white_large_outline {
    background-color: transparent;
    border: 2px solid var(--weiss);
    color: var(--weiss)!important;
    padding: 4px 33px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.white_large_outline:hover {
    background-color: var(--weiss);
    border-color: var(--weiss);
    color: var(--dgruen)!important;
    padding: 4px 33px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.white_small_full {
    background-color: var(--weiss);
    border-color: var(--weiss);
    color: var(--dgruen)!important;
    padding: 4px 25px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.white_small_full:hover {
    background-color: var(--grau);
    border-color: var(--grau);
    color: var(--dgruen)!important;
    padding: 4px 25px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}
.white_small_outline  {
    background-color: transparent;
    border: 2px solid var(--weiss);
    color: var(--weiss)!important;
    padding: 2px 23px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
}
.white_small_outline:hover {
    background-color: var(--weiss);
    border-color: var(--weiss);
    color: var(--dgruen)!important;
    padding: 2px 23px;
    border-radius: 12px;
    text-align: center;
    font-weight: normal;
    transition: background-color 0.3s ease;
}


.header-img {
    object-fit: cover;
    width: 100%;
    object-position: center;
    aspect-ratio: 16 / 9;  /* Standard Desktop */
}

@media (max-width: 768px) {
    .header-img {
        object-position: center;
        aspect-ratio: 9 / 16;  /* Mobile Format */
    }
    .banner_text .top-50 {
        top: 70%!important;
    }
}





.subheadline,
.countersubline {
    color: var(--hgrau);
}

.systemimage img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.pngshadow img {
  -webkit-filter: drop-shadow(0 1rem 3rem #0000002d);
  filter: drop-shadow(0 1rem 3rem #0000002d);    
}


#logoslider.f-carousel {
  --f-carousel-slide-width: 100%;
}

@media (min-width: 768px) {
  #logoslider.f-carousel {
    --f-carousel-gap: 8px;
    --f-carousel-slide-width: calc((100% - 16px) / 3);
  }
}

@media (min-width: 1200px) {
  #logoslider.f-carousel {
    --f-carousel-gap: 50px;
    --f-carousel-slide-width: calc((100% - 250px) / 6);
  }
}


#testimonialslider .f-carousel__dots {
    position: absolute;
    margin-top: -40px;
    left: 0;
    right: 0;
    justify-content: center;

}

@media (min-width: 768px) {
    #testimonialslider .f-carousel__dots {
        position: absolute;
        margin-top: -100px;
        left: calc(50% + 3rem);
        right: 0;
        justify-content: left;

    }
}

.f-carousel.has-dots {
    margin-bottom: 0;
}

.banner_text .card-img-overlay,
.textshadow {
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}

p.button_p {
    margin-bottom: 10px;
    margin-top: 10px;
}

.counter {
    font-size: 56px;
    line-height: 60px;
    font-weight: bold;
    color: var(--dgruen);
}

/*
.bg_gruen .bg-quote,
.bg_white .bg-quote,
.bg_weiss .bg-quote,
.bg_orange .bg-quote {
    background-repeat: no-repeat;
    background-position: calc(50% + 100px) 100px;
    background-size: 80px auto;

}

.bg_gruen .bg-quote{
    background-image: url(../images/quote.svg);
}

.bg_white .bg-quote,
.bg_weiss .bg-quote,
.bg_orange .bg-quote {
    background-image: url(../images/quote-green.svg);
}
*/
 .quote-icon {
    width: 80px;
    height: auto;
 }

.accordion-button {
    padding-left: 0;
}
.accordion-button:not(.collapsed) {
    background-color: transparent!important;
    box-shadow: none !important;
}

footer .bg_logo {
    background-image: url(../images/bg-logo-footer.svg);
    background-size: auto 150%;
    background-position: bottom left;
    background-repeat: no-repeat;
}

footer h4 {
    color: var(--orange);
    font-size: 24px;
    text-transform: none;

}

footer li {
    margin-bottom: 6px;
}



.bg_dgruen {
    background-color: var(--dgruen);
    color: var(--snow);
    font-size: 16px;
}

video {
    margin-bottom: -5px;
}

.blogarrowicon {
    width: 60px;
    height: auto;
    position: absolute;
    top: -30px;
    left: calc(100% - 45px);
    transform: translateX(-50%);
}

.mb--25 {
    margin-bottom: -0.25rem;
}

@media screen  and (max-width: 996px) {
    .navbar-collapse .nav-item {
        text-align: left;
        border-bottom: 1px dotted var(--grau);
        padding-left: 10px;
    }
    .navbar-collapse .nav-item:last-child {
        border-bottom: 0px dotted var(--grau);
    }

    .header-logo {
        max-width: 140px;
        height: auto;
    }
    
}
.navbar-toggler {
            border-color: #ffffff !important;
        }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")!important;
}