:root{
    --main: #311E98;
    --orange: #EF7C2A;
    --text: #EAF2F4;
    --alttext: #E5E3E4;
    --headline: #FDFEFF;
    --white: #FFFFFF;
    --background: #F7F7F7;
    --cyan: #EBFBFF;
    --slider: #D1D3FB;
    --slidertext: #212073;
    --subline: #FAFAFC;
    --footertext: #F2F2F2;
    --footerorange: #EF9E33;
    --hover: #CE6317;
}

body,html,*{font-family: 'Case';font-size: 18px;line-height: 1.4;font-weight: 400;font-style: normal;color: var(--main);}
html{scroll-behavior: smooth;overflow-x: hidden;}

img{max-width: 100%;height: auto;}

.headline{font-family: 'Neva';font-style: italic;font-size: 350%;font-weight: normal;display: block;color: var(--main);margin: 0;line-height: 1;margin-bottom: 30px;}
.subline{font-size:100%;font-weight:400;display:block;color:var(--main);text-transform:uppercase;}

.outer{display: flex;justify-content: center;}
.btn{position:relative;padding:10px 25px 10px 25px;background:var(--orange);transition:all .3s ease;text-transform:uppercase;line-height:1;text-align:center;border-radius: 0;width: 220px;}
.btn:hover{background: var(--hover);transition: all .3s ease;}
.btn a{color: var(--text);text-decoration: none;line-height: 1.3;font-weight: 400;font-size: 100%;}

ul{padding-left: 15px;}

strong{font-weight:500;font-size:100%;}

.container{max-width: 1100px;}

/*------------------------------------Header-------------------------------------------------*/

#page-header{position:relative;top:0;right:0;left:0;z-index:999;padding: 50px 0;background:#F8FEFF;}

/*------------------------------------Footer-------------------------------------------------*/

#page-footer{background:var(--main);padding:100px 0 30px;}
#page-footer .footer p{color: var(--white);font-weight: 400;}
#page-footer .kontakt{color: var(--white);}
#page-footer .kontaktdaten{display: flex;flex-direction: column;}
#page-footer .kontaktdaten a{color: var(--white);text-decoration: underline;text-decoration-thickness: 1px;font-size: 95%;}
#page-footer .firmenname p{margin-bottom: 30px;font-weight: 500;font-size: 115%;}
#page-footer .firmenadresse p{margin-bottom: 0;}
#page-footer .footermenu{text-align: right;}
#page-footer .footermenu .socials{margin-bottom: 20px;}
#page-footer .footermenu .socials a{font-size: 115%;font-weight: 500;}
#page-footer .footermenu .socials a::after{content: '/';color: var(--footerorange);}
#page-footer .footermenu .socials a:last-child::after{display: none;}
#page-footer .footermenu a{color: var(--footerorange);text-decoration: none;}
#page-footer .footermenu span{color: var(--footertext);font-size: 90%;}
#page-footer .footermenu .menu{display: flex;flex-direction: row;margin-top: 90px;justify-content: end;}
#page-footer .footermenu .menu a{font-size: 90%;}
#page-footer .footermenu li{padding-left: 0;list-style: none;}
#page-footer .footermenu .menu-item::after{content: '/';margin: 0 10px;color: var(--footerorange);}
#page-footer .footermenu .menu-item:last-child::after{display: none;}

/*------------------------------ACF-Flexible-Content-----------------------------------------*/

.inhaltsbloecke{margin-top:0;}

div[class^="flx_"], div[class*="flx_"]{padding: 150px 0;}

.flx_headerblock{padding: 50px 0 150px!important;}
.flx_headerblock .headline{margin-bottom: 50px;}
.flx_headerblock .bild{width: max-content;margin: 0 auto 150px;}
.flx_headerblock .bild img{width: 430px;}
.flx_headerblock .headline{text-align: center;}
.flx_headerblock .contentbox{max-width: 60%;margin: 0 auto;text-align: center;margin-bottom: 50px;}
.flx_headerblock .contentbox p{font-weight: 500;font-size: 120%;}

.flx_textblock.orange .headline{line-height: 1;}
.flx_textblock.orange .subline{margin-top: 10px;font-weight: 500;}

.flx_textblock.blau .headline{color: var(--headline);margin-bottom: 30px;}
.flx_textblock.blau p{color: var(--headline);font-weight: 500;width: 91%;}
.flx_textblock.blau .inhalt{margin-bottom: 200px;width: 69%;}

.flx_textblock.cyan .subline{margin-top: 30px;}

.flx_textblock.mitbild .bild{position: relative;}
.flx_textblock.mitbild .bild .anmerkung{color: var(--white); position: absolute; bottom: 5px; right: 5px; font-size: 80%;}


.flx_textblock.aufzaehlung .headline{color: var(--orange);font-size: 150%;text-transform: uppercase;margin-bottom: 50px;font-family: 'Case';font-style: normal;font-weight: 500;}
.flx_textblock.aufzaehlung p{color: var(--main);font-size: 120%;}
.flx_textblock.aufzaehlung li{list-style: none;position: relative;font-size: 120%;padding-left: 5px;margin: 10px 0;}
.flx_textblock.aufzaehlung li::before{content: '-';color: var(--main);font-size: 100%;position: absolute;left: -10px;}

.flx_textblock.nurtext h2{font-size: 225%;}
.flx_textblock.nurtext .inhalt{margin-bottom: 50px;}

.flx_bildblock{padding: 0px!important;}

.flx_bildblock.einbild img{width: 100%;height: 1200px;object-fit: cover;}
.flx_bildblock.einbild .anmerkung{color: var(--white); position: absolute; bottom: 5px; right: 5px;}

.flx_bildblock.zweibilder .col-7, .flx_bildblock.zweibilder .col-5{padding: 0;}
.flx_bildblock.zweibilder img{width: 100%;height: 1200px;object-fit: cover;}

.flx_bildblock.mitfavicon .bild{position: relative;display: flex;justify-content: center;align-items: center;}
.flx_bildblock.mitfavicon .bild img{width: 100%;height: 1200px;object-fit: cover;}
.flx_bildblock.mitfavicon .favicon{position: absolute;}
.flx_bildblock.mitfavicon .favicon img{width: 400px;height: 250px;object-fit: contain;}

.flx_kachelblock.viereckig .headline{margin: 0 auto 30px 0;width: 69%;}
.flx_kachelblock.viereckig .inhalt{width: 69%;margin: 0 auto 0 0;}
.flx_kachelblock.viereckig .kacheln{margin-top: 100px;margin-bottom: 100px;}
.flx_kachelblock.viereckig .inner{min-height: 230px;background: var(--orange);padding: 30px 15px;text-align: center;display: flex;align-items: center;justify-content: center;}
.flx_kachelblock.viereckig .inner p{color: var(--white);margin: 0;}
.flx_kachelblock.viereckig .inner p strong{color: var(--white);}

.flx_kachelblock.beweggruende .row{justify-content: space-around;}
.flx_kachelblock.beweggruende .headline{color: var(--white);margin-bottom: 150px;}
.flx_kachelblock.beweggruende p{color: var(--alttext);width: 74%;}
.flx_kachelblock.beweggruende .inner{min-height: 230px;text-align: center;position: relative;display: flex;justify-content: center;}
.flx_kachelblock.beweggruende .inner::before{content: ',,';position: absolute;top: -110px;color: var(--white);font-size: 400%;font-family: 'Neva';letter-spacing: -7px;font-style: italic;}
.flx_kachelblock.beweggruende .col-md-3{margin: 0 auto;}

.flx_angebote .headline{margin-bottom: 50px;}
.flx_angebote .angebote{margin-bottom: 70px;}
.flx_angebote .inner{margin-bottom: 100px;width: 65%;}
.flx_angebote .inner .headline{font-size: 130%;color: var(--orange);text-transform: uppercase;margin-bottom: 30px;font-family: 'Case';font-style: normal;font-weight: 500;}
.flx_angebote .btn{padding: 10px 30px 10px 30px;}

.flx_kundenstimmen .headline{color: #FDFDFD;margin-bottom: 100px;}
.flx_kundenstimmen span.person{color: var(--white);font-size: 80%;}
.flx_kundenstimmen .border{width: max-content;border: solid 1px var(--white);border-radius: 50px;padding: 5px 110px 10px 30px;margin: 0 0 20px 20px;}
.flx_kundenstimmen p{color: var(--slidertext);}
.flx_kundenstimmen .outer{width: 100%;background: var(--slider);border-radius: 20px;padding: 50px;position: relative;}
.flx_kundenstimmen .owl-stage-outer{overflow: hidden;}
.flx_kundenstimmen .owl-nav{display: flex;justify-content: space-between;width: 100%;margin-top: 20px;position: absolute;bottom: 33%;}
.flx_kundenstimmen .owl-nav .owl-prev{content: '';background: url('media/icons/pfeil_links_grau.svg')!important;background-repeat: no-repeat!important;width: 50px;height: 40px;object-fit: contain;}
.flx_kundenstimmen .owl-nav .owl-next{content: '';background: url('media/icons/pfeil_rechts_weiss.svg')!important;background-repeat: no-repeat!important;width: 50px;height: 40px;object-fit: contain;}

.flx_kontaktblock .container{display: flex;justify-content: center;flex-direction: column;}
.flx_kontaktblock .headline{font-size: 300%;width: 100%;text-align: center;font-style: normal;margin-bottom: 0;}
.flx_kontaktblock a.email{font-size: 300%;color: var(--main);text-align: center;font-family: 'Neva';}

@media (min-width: 992px){
    .flx_textblock.mitbild .text{padding-left: 30px;}
}

/*-------------------------------------------------------------------------------------------*/
@media (max-width:1480px){

    .container{padding: 0 30px;}

    .headline{font-size: 300%;}

    .flx_textblock.nurtext h2{font-size: 200%;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1199px){

    body, html, *{font-size: 18px;}

    .headline{font-size: 270%;}

    div[class^="flx_"], div[class*="flx_"]{padding: 100px 0;}

    .flx_headerblock .contentbox{max-width: 60%;}

    .flx_textblock.blau .inhalt{width: 100%;margin-bottom: 100px;}

    .flx_kachelblock.viereckig .inner{min-height: 230px;padding: 20px;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:991px) {

    .headline{font-size: 220%;}

    .flx_headerblock .bild{margin: 0 auto 100px;}
    .flx_headerblock .bild img{width: 400px;}
    .flx_headerblock .contentbox{width: 80%;}

    .flx_bildblock.einbild img, .flx_bildblock.zweibilder img, .flx_bildblock.mitfavicon .bild img{height: 80vh;}

    .flx_kachelblock.viereckig .headline, .flx_kachelblock.viereckig .inhalt{width: 100%;}

    .flx_kachelblock.viereckig .kacheln{margin-top: 50px;margin-bottom: 50px;}
    .flx_kachelblock.viereckig .kacheln .col-md-4{margin-bottom: 25px;}

    .flx_kontaktblock a.email{font-size: 200%;}
    .flx_kontaktblock .headline{font-size: 220%;}

    .flx_textblock.nurtext h2{font-size: 175%;}

    .flx_textblock.mitbild .bild{max-width: 400px; display: block; margin: 0 auto;}
    .flx_textblock.mitbild .text{padding-top: 50px;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px) {

    body, html, *{font-size: 17px;}

    .headline{font-size: 200%;}

    .flx_headerblock .bild{margin: 0 auto 80px;}
    .flx_headerblock .bild img{width: 300px;}
    .flx_headerblock .contentbox{width: 100%;max-width: 100%;}

    .flx_kachelblock.beweggruende .inner{min-height: 170px;}

    .flx_angebote .inner{width: 100%;}

    .flx_kundenstimmen .owl-nav{position: relative;bottom: 0;}

    .flx_textblock.nurtext h2{font-size: 150%;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:600px) {

    body, html, *{font-size: 16px;}

    div[class^="flx_"], div[class*="flx_"]{padding: 50px 0;}

    .flx_headerblock{padding: 50px 0 50px!important;}
    .flx_headerblock .bild img{width: 250px;}

    .flx_bildblock.einbild img, .flx_bildblock.zweibilder img, .flx_bildblock.mitfavicon .bild img{height: 60vh;}

    .flx_kachelblock.viereckig .inner{min-height: unset;padding: 30px;justify-content: center;}

    .flx_kachelblock.beweggruende .inner{min-height: 150px;}

    .flx_textblock.aufzaehlung p{font-size: 100%;}

    .flx_angebote .inner{margin-bottom: 50px;}

    .flx_kundenstimmen .headline{margin-bottom: 30px;}
    .flx_kundenstimmen .outer{padding: 25px;}

    .flx_bildblock.mitfavicon .favicon img{width: 300px;}

    .flx_kontaktblock a.email{font-size: 150%;}

    #page-footer{padding: 50px 0 30px;}
    #page-footer .kontakt{margin-bottom: 30px;}
    #page-footer .footermenu .menu{margin-top: 30px;}

}
/*-------------------------------------------------------------------------------------------*/