* {margin:0 0 0 0; box-sizing:border-box; padding:0 0 0 0; font-family: "Roboto", sans-serif; }
body {background-color:#f3f3f3;}

:root {
    --color1:#11345a;
    --color2:#dfe7ed;
}

h1 {color:var(--color1); font-size:22px; font-weight:normal; margin-bottom:20px; border-bottom:solid 1px #fff;}
h2 {color:var(--color1); font-size:22px; margin-bottom:20px; font-weight:normal; border-bottom:solid 2px var(--color1);}
h3 {color:#000; font-size:20px; margin-bottom:10px; font-weight:normal;}
h4 {}
p {font-size:18px; line-height:28px; min-height:20px; color:#353535;}
.content-ct li {margin-left:20px; font-size:18px; margin-bottom:5px;}

main {display:flex; width:100%; flex-direction:column; margin-top:109px;}
.container {width:100%;}

/*================================ PRE-HEADER =====================================*/
#ph-wrapper {background-color:var(--color1); padding:10px 20px; border-bottom:solid 4px #e2e2e2;}
.pre-header-content {width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
.ph-contact {color:#fff; text-decoration:none; font-size:14px;}
.ph-tel {color:#fff; font-weight:bold; text-decoration:none; font-size:14px;}
/*============================== PRE-HEADER ENDE ==================================*/




/*================================ BANNER =========================================*/
.banner {width:100%; height:300px; overflow:hidden; object-fit:cover;}
.banner-folge {width:100%; height:200px; overflow:hidden; object-fit:cover;}
.banner video, .banner img {width:170%; margin-left:-50%;}
/*============================== BANNER ENDE ======================================*/



/*============================= PRE-CONTENT =======================================*/
#iv-pre-content {overflow:hidden;}
.pre-content-wrapper {display:flex; flex-direction:row; flex-wrap:wrap;}
.pre-content-left {transform: translateX(-100%); opacity:0; transition:all ease 1s; display:flex; flex-basis:100%; flex-direction:column; background-color:var(--color2); padding:40px 20px; color:#fff; align-items:flex-start; border:solid 2px #c2c2c2; border-width:1px 0;}
.action .pre-content-left {transform: translateX(0); opacity:1;}
.pre-content-left p {font-size:16px; line-height:22px; color:var(--color1);}
.pre-content-right {transform: translateX(100%); opacity:0; transition:all ease 1s; position:relative; display:flex; flex-basis:100%; flex-direction:column; background-color:var(--color1); align-items:flex-start; color:#fff; padding:40px 20px;}
.action .pre-content-right {transform: translateX(0); opacity:1;}
.pre-content-right img {width:15px;}
.pre-content-right::before {content:""; transition:all ease 1s; opacity:0; border-radius:50%; transition-delay:0.8s; border:solid 1px #fff; width:30px; height:30px; background-color:var(--color2); position:absolute; left:calc(50% - 15px); top:-15px;}
.action .pre-content-right::before {transform:rotate(90deg); opacity:1; border-radius:0; background-color:var(--color1); }
.pre-content-right i {font-style:normal; font-size:16px; margin-bottom:20px;}
.pre-content-right p {margin-bottom:8px; font-size:14px; color:#e2e2e2;}
.pre-content-right a {color:#fff; font-weight:normal; text-decoration:none; margin-left:10px; font-size:17px;}
.pre-content-contact-headline {font-size:24px; margin-bottom:5px; margin-top:10px; font-weight:400;}
/*=========================== PRE-CONTENT ENDE =====================================*/


/* Captcha */
.cmxform {display:flex; flex-direction:row; flex-wrap:wrap; width:100%; justify-content:space-between;}
.schreibfeld {width:100%; padding:10px; min-height:200px;}
.kontaktfeld {width:100%; margin-top:20px;}
.cmxform input {width:100%; padding:10px;}
.kontaktbutton {padding:10px 20px; font-size:18px; color:#fff; background-color:var(--color1); cursor:pointer;}
.required-big {flex-basis:69%; margin-top:20px;}
.required-small {flex-basis:30%; margin-top:20px;}


#captcha {padding:30px 10px 10px 10px; margin:40px 0 20px 0; background-color:#eff7ff; border:solid 1px #6eabe7; width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
#captcha legend {margin-bottom:0; margin-top:40px;}
.captcha-frage {width:200px; flex-basis:200px; display:flex; flex-direction:column;}
.captcha-loesung {flex-basis:calc(100% - 220px); display:flex; flex-direction:column;}
#captcha img {width:200px;}
#captcha-aufgabe {padding:5px 10px; background-color:#38699b; color:#fff; margin-bottom:20px;}
#captcha input {height:50px; font-size:20px; padding:10px;}

@media screen and (max-width: 650px) {
    #captcha {flex-direction:column;}
    #captcha legend {font-size:18px; background-color:#fff; padding:10px;}
}



/*================================= CONTENT =======================================*/
.content-wrapper {background-color:#fff; padding:40px; margin:40px 0; display:flex;}
.content-it, .content-ct {display:flex; flex-direction:column; align-items:flex-start; max-width:900px;}
.text-kontakt {display:flex; flex-direction:column; width:100%; align-items: flex-start;}
.content-ck {background-color:#f8fcff; color:var(--color1); border:solid 1px var(--color2); display:flex; flex-direction:column; padding:40px; transform: translateY(100%); transition:all ease 1s;}
.action .content-ck {transform: translateY(0); }
.ck-headline {font-size:20px; margin-bottom:10px;}
.content-ck p {font-size:16px;}
.content-ck-icons {display:flex; width:100%; flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:10px}
.content-ck-icons li {flex-basis:100px; font-weight:bold; font-size:13px; color:#616160; text-transform:uppercase; display:flex; flex-direction:column; text-align:center; background-color:#fff; align-items:center; padding:5px 0; border:solid 1px #c2c2c2;}
.content-ck-icons li img {width:40px; margin-bottom:10px;}
.ck-btn, .ck-tel {color:#fff; text-decoration:none; margin-top:20px; padding:7px 10px; background-color:var(--color1); text-align:center; text-transform:uppercase;}
.button {padding:15px 30px; margin-top:20px; transition:all ease .5s; background-color:var(--color1); color:#fff; text-decoration:none; position:relative; padding-left:60px;}
.button a {text-decoration:none; color:#fff; transition:all ease .5s;}
.button::before {content:""; transition:all ease .5s; background-image:url(/assets/img/arrow.svg); background-repeat:no-repeat; background-position:left 10px center; background-size:15px; height:100%; width:40px; text-align:center; color:var(--color1); position:absolute; left:0; background-color:#ff3b00; top:0; left:0;}
.button:hover::before {background-position:left 20px center; background-color:var(--color1); width:50px;}
.button:hover {background-color:#d5dce1; color:var(--color1);}
.button:hover a {color:var(--color1);}
.an-map {width:100%;}
/*============================= CONTENT ENDE =======================================*/




/*=================================== BOXEN ========================================*/
.boxen-wrapper {padding:20px;}
.cp-headline  {display:flex; flex-direction:column; align-items:center; position:relative; margin-bottom:40px;}
.cp-headline::before {content:""; height:2px; width:100%; background-color:#c2c2c2; top:13px; position:absolute;}
.cp-headline-first {font-size:25px; padding:0 20px; margin-bottom:5px; background-color:#f3f3f3; position:relative;}
.cp-headline p {margin-bottom:20px;}
.bx-list {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; width:100%; max-width:100%; opacity:0; transform:translateY(200px); transition:all ease 1s;}
.action .bx-list {transform:translateY(0); opacity:1;}
#iv-boxen {margin:60px 0;}
.bx-item {display:flex; border:solid 1px #c2c2c2; overflow:hidden; flex-basis:100%; flex-direction:column; text-decoration:none; position:relative; margin-bottom:30px; max-width:100%;}
.bx-item:hover .bx-info {transform: translateY(0%);}
.bx-headline {font-size:20px; width:100%; border-bottom:solid 1px #fff; background-color:var(--color1); color:#fff; padding:15px 40px 15px 20px;}
.bx-info {width:100%; font-size:18px; line-height:26px; transition:all ease .5s; transform: translateY(100%); border:solid 1px #e2e2e2; height:calc(100% - 50px); background-color:rgba(255,255,255,0.9); top:55px; padding:40px 20px; position:absolute; color:#000;}
.bx-img {width:100%;}
.bx-icon {
    transition:all ease 1s; opacity:0; transition-delay:0.4s;
    z-index:99; position:absolute; top:25px; right:25px; border:solid 1px #fff; background-color:var(--color2); background-repeat:no-repeat; background-position:center center;
    width:70px; height:70px; top:10px; right:10px; background-size:44px;
    transform:translateY(-100px);
}
.action .bx-icon {opacity:1; background-color:var(--color1); transform:translateY(0);}
/*================================= BOXEN ENDE ======================================*/




/*=================================== FOOTER =======================================*/
.pre-footer {background-color:var(--color1); border-bottom:solid 4px #c2c2c2; color:#fff; margin-bottom:10px;}
.pre-footer-wrapper {padding:20px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
.pre-footer-l {flex-basis:100%; margin-bottom:40px;}
.pre-footer-l p {font-size:20px; position:relative; padding-left:30px; color:#fff;}
.pre-footer-l p::before {content:""; width:16px; height:16px; background-color:rgba(255,255,255,0.5); position:absolute; left:0; top:4px;}
.pre-footer-r {flex-basis:100%; display:flex; flex-direction:column; flex-wrap:wrap; justify-content:flex-end;}
.pre-footer-r a {color:#fff; display:flex; flex-direction:row; flex-wrap:wrap; padding:2px 6px; text-decoration:none; margin-right:15px; font-size:14px; text-transform:uppercase; margin-bottom:5px;}
.pre-footer-r a img {width:17px; margin-right:5px;}

footer {background-color:#fff;}
.footer1, .footer2, .footer3 {padding:40px 20px; background-color:#fff; margin-bottom:10px;}
.footer-headline {color:var(--color1); padding-bottom:5px; font-size:22px; width:100%; border-bottom:solid 1px #c2c2c2; margin-bottom:0; text-transform:uppercase;}
.footer-subline {color:var(--color1); margin-top:5px; font-size:16px; margin-bottom:30px;}
.footer-wrapper {color:#777; margin-bottom:50px;}
.footer-wrapper li {position:relative; margin-bottom:3px; list-style-type:none; padding-left:20px;}
.footer-wrapper li::before {content:""; width:7px; height:7px; background-color:#c2c2c2; position:absolute; left:0; top:5px;}
.footer-wrapper a {color:#000; text-decoration:none;}
.footer-copy {background-color:#333; color:#e2e2e2; width:100%; padding:20px 0; text-align:center; font-size:14px; border-top: solid 4px #c2c2c2;}
/*================================ FOOTER ENDE =====================================*/


@media screen and (min-width: 500px){
    .pre-header-content {justify-content:flex-end;}
    .ph-contact {font-size:16px; padding-left:25px; background-image:url(/assets/img/kontakt.svg); background-repeat:no-repeat; background-position:left center; background-size:17px;}
    .ph-tel {font-size:16px; margin-left:20px; padding-left:23px; background-image:url(/assets/img/telefon.svg); background-repeat:no-repeat; background-position:left center; background-size:17px;}
}

@media screen and (min-width: 600px) {
    .banner video, .banner img {width:100%; margin-left:0;}
}

@media screen and (min-width: 800px) {
    .pre-content-left {flex-basis:50%; border-top:solid 2px #fff; border-bottom:none; padding:40px 60px;}
    .pre-content-right {flex-basis:50%; border-top:solid 2px #fff; padding:40px 60px;}
    .pre-content-right::before {left:-15px; top:calc(50% - 15px);}
    .banner {height:400px;}
    .banner-folge {height:300px;}
    
    .pre-footer-wrapper {align-items: flex-end;}
    .pre-footer-l {flex-basis:calc(100% - 460px); margin-bottom:0;}
    .pre-footer-r {flex-basis:457px; flex-direction:row;}
    .pre-footer-r a:last-of-type {margin-right:0;}
    .bx-item {flex-basis:48%;}
    .footer-wrapper {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
    .footer1, .footer2, .footer3 {flex-basis:calc(100% / 3 - 9px)}
    
    .bx-list {gap:2%}
}

@media screen and (min-width: 1200px) {
    main {margin-top:172px;}
    .banner {height:500px;}
    .banner-folge {height:400px;}
    h1 {font-size:30px; border-bottom:none;}
    .pre-content-left {flex-basis:65%; border-right:solid 1px #fff; border-left:solid 1px #fff;}
    .pre-content-left p {max-width:600px; line-height:26px; font-size:18px;}
    .pre-content-right {flex-basis:35%; border-right:solid 1px #fff;}
    
    .content-wrapper {padding:60px 0 60px 60px;}
    #iv-pre-content {margin-top:-40px;}
    
    .text-kontakt {flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
    .content-ct {flex-basis:60%}
    .content-ck {flex-basis:calc(35% + 20px)}
}

@media screen and (min-width: 1400px) {
    .boxen-wrapper {padding:0;}
    .bx-item {flex-basis:32%}
    .container {width:1400px; margin-left:calc(50% - 700px);}
}