/* figtree-regular - latin */
@font-face {
    font-display: swap; 
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/figtree-v5-latin-regular.woff2') format('woff2');
  }
  /* figtree-700 - latin */
  @font-face {
    font-display: swap; 
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/figtree-v5-latin-700.woff2') format('woff2'); 
  }

  :root {
    --black:        #000000;
    --weiss:        #ffffff;
    --dblau:        #274760;
    --hblau:        #E0EEFB;
    --weissblau:    #F2F8FD;
    --subheadline:  #307BC4;  
    --grau:         #888888;
    --footerblau:   #91C9FF;



    --bs-box-shadow: 0 0.25rem 0.5rem rgba(166, 207, 242, .75);
    --bs-box-shadow-sm: 0 0.06rem 0.125rem rgba(166, 206, 242, .75);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(166, 206, 242, .55);


  }
  html, body {
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--black);
    scroll-behavior: smooth;
    background-color: var(--weiss);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*:focus, .btn.focus, .btn:focus, button:focus, button.focus {
    outline: 0 none;
    border: 0;
    border-color: transparent;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
::-webkit-scrollbar {
    width: 6px
}
::-webkit-scrollbar-track {
    background: var(--weiss);
    border-radius: 0px
}
::-webkit-scrollbar-thumb {
    background: var(--dblau);
    border-radius: 0px
}
::selection {
    background: var(--dblau);
    color: var(--weiss);
}
::-moz-selection {
    background: var(--dblau);
    color: var(--weiss);
}
a {
    color: var(--dblau);
    text-decoration: none;
}
a:hover {
    color: var(--subheadline);
}
figure {
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    color: var(--dblau);
}
h1, .h1, h2, .h2 {
    font-size: 58px;
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-size: 20px;
}
@media (max-width: 767px) {
    h1, .h1, h2, .h2 {
        font-size: 32px;
    }
    h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        font-size: 18px;
    } 
}

/* Extra large devices (large desktops) */
@media (min-width: 1599.98px) {
    .container {
      max-width: 1600px;
    }
  }


main {
    background-image: url(../images/bg-main.svg);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;
}  

.top-50h {
    position: relative;
    top: 0%;
    transform: translate(0%,-50%);
}

@media (min-width: 0px) and (max-width: 470px) {
    .top-100h {
        position: relative;
        top: 120px;
        transform: translate(0%,-50%);
    }
}

@media (min-width: 471px) and (max-width: 1150px) {
    .top-100h {
        position: relative;
        top: 0%;
        transform: translate(0%,-50%);
    }
}
@media (min-width: 1151px) {
    .top-100h {
        position: relative;
        top: 0%;
        transform: translate(0%,-100%);
    }
}

.sectionpadding {
    padding-top: 100px;
    padding-bottom: 100px;
}
@media (max-width: 991.98px) {
    .sectionpadding {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}


/* ++++++++++++++++++
HEADER
++++++++++++++++++ */
header {
    border-bottom: 10px solid #2eb8df;
}

#headerradius {
    background-image: url(../images/headerradius.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 331px;
    height: 262px;
    position: fixed;
    top: 108px;
    left: 0;
    z-index: 1;
}

@media (max-width: 991.98px) {

    header {
        border-bottom: 5px solid #2eb8df;
    }

    #headerradius {
        width: 150px;
        height: 119px;
        top: 78px;
    }
}

.navbar {
    padding-top: 0;
    padding-bottom: 0;
}

.toplogo {
    height: 90px;
    width: auto;
}

.toplogo-mobile {
    height: 60px;
    width: auto;
}

header .nav-link{
    text-transform: uppercase;
    color: var(--dblau)!important
}

header .nav-link.active,
header .nav-link:hover {
    color: var(--subheadline)!important
}

  
/* ++++++++++++++++++
HERO
++++++++++++++++++ */

.hero h1 {
    color: var(--dblau);
}

.hero p {
    color: var(--dblau);
    font-size: 24px;
}

@media (max-width: 991.98px) {/*

    .hero h1 {
        font-size: 26px;
    }
    
    .hero p {
        font-size: 18px;
    }*/
}

.card-img-overlay {
    top: 50%;
    transform: translate(0%,-50%);
}

.card {
    background-color: transparent;
}

.readonhero {
    background-image: url(../images/icon-schneestern.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px 40px;
    display: inline-block;
    padding: 5px 0 5px 50px;

}

.readonhero span {
    border-bottom: 2px solid var(--dblau);
    margin-top: 7px;
    display: inline-block;
}


/* ++++++++++++++++++
INFOROW
++++++++++++++++++ */

.inforowicon {
    font-size: 24px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px 40px;
    display: inline-block;
    padding: 5px 0 5px 50px;
}

.inforowicon.tel {
    background-image: url(../images/icon-phone.png);
}
.inforowicon.mail {
    background-image: url(../images/icon-mail.png);
}
.inforowicon.pin {
    background-image: url(../images/icon-pin.png);
}


/* ++++++++++++++++++
SLIDERBOXEN
++++++++++++++++++ */

#myCarousel .f-carousel__slide {
    width: calc(100% / 1);
}

@media (min-width: 768px) {
    #myCarousel .f-carousel__slide {
        width: calc(100% / 2);
    }
}

@media (min-width: 992px) {
    #myCarousel .f-carousel__slide {
        width: calc(100% / 3);
    }    
}

.sliderbox-home h4{
    font-size: 35px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.sliderbox-home p {
    margin-bottom: 25px;
}

.sliderbox-home a {
    background-image: url(../images/icon-schneestern-dark.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px 40px;
    display: inline-block;
    padding: 10px 0 10px 50px;
    margin-bottom: 35px;
}
.sliderbox-home {
    background-position: 105% -15%;
    background-repeat: no-repeat;
    background-size: 130px 130px;
}
.sliderbox-home.planung {
    background-image: url(../images/bg-box-planung.png);
}
.sliderbox-home.beratung {
    background-image: url(../images/bg-box-beratung.png);
}
.sliderbox-home.montage {
    background-image: url(../images/bg-box-montage.png);
}
.sliderbox-home.sonderbau {
    background-image: url(../images/bg-box-sonderbau.png);
}
.sliderbox-home.service {
    background-image: url(../images/bg-box-service.png);
}
.sliderbox-home.wartung {
    background-image: url(../images/bg-box-wartung.png);
}
.sliderbox-home.rueckbau {
    background-image: url(../images/bg-box-rueckbau.png);
}
.sliderbox-home.koordination {
    background-image: url(../images/bg-box-koordination.png);
}
.sliderbox-home.vermietung {
    background-image: url(../images/bg-box-vermietung.png);
}

/* ++++++++++++++++++
ÜBER UNS
++++++++++++++++++ */

.ueberuns h2 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.subheadline {
    color: var(--subheadline);
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 0px;
}

.mitpfeil {
    background-image: url(../images/arrow-right-sm.svg);
    background-repeat: no-repeat;
    background-position: left 8px;
    background-size: 30px auto;
    padding-left: 45px;
    color: var(--grau);
}
.fs-large {
    font-size: 28px;
    color: var(--grau);
}

.ueberuns a{
    color: var(--subheadline);
}


.dropshadow {
    filter: drop-shadow(0 0.25rem 0.5rem rgba(166, 207, 242, .75));
    
}

/* ++++++++++++++++++
PARTNER SLIDER
++++++++++++++++++ */


#myCarousel2 .f-carousel__slide {
    width: calc(100% / 1.5);
    background-color: var(--hblau);
    text-align: center;
  }

  #myCarousel2 .f-carousel__slide:nth-child(even) {
    background-color: var(--weissblau);
  }

  @media (min-width: 768px) {
    #myCarousel2 .f-carousel__slide {
      width: calc(100% / 5);
    }
  }

  .partnerslider img {
    height: 80px;
    width: auto;
  }

/* ++++++++++++++++++
AKTUELLE PROJEKJTE
++++++++++++++++++ */

@media (max-width: 470px) {
    .sectionpadding.aktuelleprojekte {
        padding-top: 0px;
        padding-bottom: 50px;
    }
    .sectionpadding.aktuelleprojekte .h2{
        margin-bottom: -20px;
    }    
}

.aktuelleprojekte h4 {
    font-size: 24px;
}

.aktuelleprojekte a.readon {
    background-image: url(../images/icon-schneestern-dark.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px 40px;
    display: inline-block;
    padding: 10px 0 10px 50px;
}


/* ++++++++++++++++++
FOOTER
++++++++++++++++++ */

footer {
    background-color: var(--dblau);
    color: var(--weiss);
}

footer h5 {
    color: var(--footerblau);
    font-size: 24px;
    border-bottom: 1px solid var(--footerblau);
}

footer ul {
    margin: 8px 0 0 0;
    padding: 0;
}

footer .nav-item {
    height: 30px;
    line-height: 30px;
    display: block;
    background-image: url("../images/icon-schneestern-dark-sm.png");
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 35px;
    margin-bottom: 8px;
}

footer .nav-link {

}

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

footer a:hover {
    color: var(--footerblau)!important;
}

/* ++++++++++++++++++
SLIDER
++++++++++++++++++ */

.is-horizontal .f-carousel__nav .f-button.is-prev, 
.is-horizontal .f-carousel__nav .f-button.is-next, 
.is-horizontal .fancybox__nav .f-button.is-prev, 
.is-horizontal .fancybox__nav .f-button.is-next {
    top: 100%;
    transform: translateY(50%);
}
.is-horizontal .f-carousel__nav .f-button.is-next,
.is-horizontal .fancybox__nav .f-button.is-next {
    right: calc(50% - 60px);
}

.is-horizontal .f-carousel__nav .f-button.is-prev, 
.is-horizontal .fancybox__nav .f-button.is-prev {
    left: calc(50% - 60px);
}

.is-horizontal .f-carousel__nav .f-button {
    width: 50px;
    height: 30px;
    background-color: transparent;
    background-image: url(../images/arrow-right-sm.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 48px auto;
    border: none;
}

.is-horizontal .f-carousel__nav .f-button.is-prev {
    background-image: url(../images/arrow-left-sm.svg);
}

.is-horizontal .f-carousel__nav .f-button svg {
    display: none;
}

.fancybox__backdrop {
    background-image: url(../images/bg-main.svg);
    background-size: 100% auto;
    background-color: var(--hblau);
}


.downloads a {
    background-image: url(../images/icon-schneestern-dark.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px 40px;
    display: inline-block;
    padding: 10px 0 10px 50px;
    margin-bottom: 0px;
}

.pkeinmargin p:last-child {
    margin-bottom: 0;
}