/* LOCATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.location{margin:80px auto; position:relative}
.location h2,
.location .content{width:100%; max-width:var(--page); margin:auto; padding:0 15px; box-sizing:border-box; position:relative}
.location h2{margin:0 auto 20px auto}
.location .map{width:100%; height:480px; overflow:hidden; position:relative; margin:0 0 20px 0; position:relative}
.location .map:after{content:""; width:100%; height:100%; background:rgba(51, 83, 161,0.5); mix-blend-mode: multiply; position:absolute; top:0; left:0}
.location .map iframe{position:absolute; top:0; left:calc(-50% - 160px); width:200%; height:100%; filter:grayscale(1)}
.location .map .link{position:absolute; left:calc(50% - 160px); top:calc(50% - 41px); transform:translate(-50%); z-index:2; filter:brightness(0) invert(1)}
.location .map .link img{width:40px; height:auto}
.location .map .link:after{content:"Google Maps"; position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); color:#FFF; width:120px; font-size:16px; display:none; text-align:center}
.location .map .link:hover:after{display:block}
.location address{font-style:normal; width:calc(100% - 320px)}
.location address a{display:flex; align-items:center}
.location address img{width:30px; height:auto; margin:0 10px 0; filter:brightness(0)}
.location address a:hover img{filter:none}
.location .timetable{position:absolute; right:0; bottom:0; background:var(--green); border-radius:15px; padding:0 0 45px 0; width:320px; overflow:hidden}
.location .timetable img{width:100%; height:auto; margin:0 0 20px 0}
.location .timetable h3,
.location .timetable p{padding:0 25px; box-sizing:border-box; margin:0; color:#FFF}
.location .timetable p:first-child{padding:0}
.location .timetable strong{margin:15px 0 0 0; display:inline-block}
.location .timetable span{width:80px; display:inline-block}
.location .timetable button:hover{background:#FFF; color:var(--blue)}

@media (max-width: 500px) {
	.location address{width:100%}
	.location .timetable{position:relative;width:100%}
	.location .map iframe{left:-100%; width:300%}
	.location .map .link{left:50%}
	.location .map .link:after{display:block}
}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team{width:100%; max-width:var(--page); margin:80px auto}
.home .team article{margin:0}
.team h2{margin:0 0 40px 0; padding:0 15px}
.team ul{margin:0; padding:0; list-style-type: none; display:flex; flex-wrap:wrap}
.team li{width:50%}
.team figure{margin:0 0 10px 0; position:relative;}
.team figure:after{content:""; width:100%; height:140px; background:var(--blue); border-radius:15px; position:absolute; bottom:0; left:0; z-index:-1}
.team img{height:auto; width:80%; margin:0 10%}
.team p{text-align:center; font-family:ubuntu-bold}
.team li:nth-child(n+2) figure:after{background:var(--green);}
.team li:nth-child(n+4) figure:after{background:var(--blue);}
.team li:nth-child(n+6) figure:after{background:var(--green);}

@media (max-width: 500px) {
	.team li{width:100%}
	.team li:nth-child(odd) figure:after{background:var(--blue);}
	.team li:nth-child(even) figure:after{background:var(--green);}
}

/* HISTORY
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.history{background:var(--green); }
.history > div{width:100%; max-width:var(--page); margin:80px auto; padding:15px 0}
.history p{margin:30px 0; display:flex; flex-wrap:wrap; align-items:center; color:#FFF}
.history strong{text-align:right; font-size:60px; width:calc(50% - 2.5px)}
.history em{font-style:normal; border-color:#FFF; border-style:solid; border-width:0 0 0 5px; width:calc(50% + 2.5px)}
.history p:nth-child(even) strong{order:1; text-align:left}
.history p:nth-child(even) em{order:0; text-align:right; border-width:0 5px 0 0}
.history strong,
.history em{padding:15px; box-sizing:border-box; display:block}

@media (max-width: 500px) {
	.history p{display:block}
	.history strong{text-align:left; display:block; width:100%}
	.history em{border:none; width:100%}
	.history p:nth-child(even) em{text-align:left}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{margin:80px 0 100px 0}
.contact > div{width:100%; max-width:var(--page); margin:80px auto; padding:0 15px; box-sizing:border-box;}

.contact .content{display:flex; justify-content:space-around; width:100%; padding:45px 0; position:relative}
.contact p{text-align:center; margin:0}
.contact a,
.contact a:hover,
.contact a:visited{color:#FFF; display:block}
.contact a:hover img{transform: scaleX(-1); transition:0.5s}
.contact img{filter:brightness(0) invert(1); width:auto; height:80px; margin:0 0 20px 0; transition:0.5s}
.contact span{display:block}

.contact .content:after{content:""; width:100vw; height:100%; background:var(--blue); position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:-1}

@media (max-width: 700px) {
	.contact .content{display:block; padding:45px 0 25px 0}
	.contact a,
	.contact a:hover{display:flex;}
	.contact a:hover img{transform:none}
	.contact img{width:40px; height:auto; margin:0 15px 25px 0}
}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article{width:100%; max-width:var(--page); margin:0 auto 80px auto; padding:0 15px; box-sizing:border-box; position:relative}
.home article{margin:80px auto;}
.com-content-article figure{position:relative; width:100%; margin:0; height:70vh;}
.com-content-article figure img{position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:70vh; object-fit:cover}

.home .com-content-article{display:flex;}
.home .com-content-article figure{margin:0; order:1; position:relative; height:auto;}
.home .com-content-article figure img{position:absolute; top:150px; left:15px; width:40vw; max-width:var(--page); height:calc(100% - 150px); object-fit:cover; border-radius:15px; transform:none}
.home .com-content-article__body{width:66.66%; order:0}

.com-content-article__body{}

.home .article > ul{margin:0; padding:0; list-style-type: none}
.home .article .mod-articles-item-content{width:66.66%; position:relative}
.home .article .mod-articles-image{margin:0; position:absolute; left:calc(100% + 15px); top:150px; width:40vw; max-width:var(--page); height:calc(100% - 150px)}
.home .article .mod-articles-image img{width:100%; height:100%; object-fit:cover; border-radius:15px; object-position: 50% 50%;}

.article_contact{display:flex; align-items:center; font-family: ubuntu-bold;}
.article_contact span{display:inline-block; width:30px; height:30px; margin:0 10px 0 0; filter:brightness(0)}
.article_contact .phone{background-image: url("/images/icons/icon-phone-420x420.svg");}
.article_contact .mail{background-image: url("/images/icons/icon-mail-420x420.svg");}
.article_contact .form{background-image: url("/images/icons/icon-form-420x420.svg");}
.article_contact:hover span{filter:none}

@media (max-width: 1000px) {
	.home .com-content-article{display:block;}
	.home .com-content-article figure{height:auto; margin:0 0 50px 0}
	.home .article .mod-articles-image,
	.home .article .mod-articles-image img,
	.home .com-content-article figure img{position:relative; width:100%; max-width:none; height:auto; top:auto; left:auto}
	.home .com-content-article__body,
	.home .article .mod-articles-item-content{width:100%}
}

/* SITE-BTNS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.site-btns{position:fixed; z-index:2; right:0; top:50%; transform:translateY(-50%)}
.site-btns p{position:relative;}
.site-btns a{display:flex; justify-content:flex-start; align-items:center; background:var(--blue); width:auto; height:50px; border-radius:9px 0 0 9px; padding:0 12.5px; color:#FFF; transform:translateX(var(--sitebtns)); transition:0.5s}
.site-btns a:hover{color:#FFF; transform:none; transition:0.5s}
.site-btns a:visited{color:#FFF}
.site-btns a img{width:auto; height:25px; filter:brightness(0) invert(1); margin:0 13px 0 0}

@media (max-width: 500px) {
	.site-btns{top:0; right:auto; transform:none; width:100%}
	.site-btns > div{width:100%; display:flex; justify-content:center}
	.site-btns p{margin:0 10px}
	.site-btns a{width:50px; transform:none; overflow:hidden; border-radius:0 0 9px 9px; padding:0}
	.site-btns a img{width:25px; height:auto; margin:0 12.5px}
}

/* ISSUU
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.issuu{position:relative}
.issuu:after{content:""; position:absolute; z-index:-1; bottom:0; left:0; width:100%; height:75%; background:var(--green)}
.issuu > div{width:100%; max-width:var(--page); margin:80px auto; display:flex; flex-wrap:wrap; gap:30px; padding:0 15px 30px 15px; box-sizing:border-box}
.issuu .content{width:calc(50% - 15px)}
.issuu .content > div{position: relative; padding-top: max(60%,326px); height: 0; width: 100%}
.issuu .content > div iframe{border-radius:15px}
.issuu h2,.issuu p{color:#FFF}

@media (max-width: 500px) {
	.issuu > div{padding: 0}
	.issuu .content{width:100%}
	.issuu h2,.issuu p{padding:0 15px}
	.issuu .content > div iframe{border-radius:0}
}

/* PARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner{width:100%; background:var(--blue)}
.partner > div{width:100%; max-width:var(--page); margin:80px auto; display:flex; flex-wrap:wrap; padding:15px 0}
.partner > div p{width:20%; padding:15px; box-sizing:border-box; margin:0}
.partner > div p a{display:block; width:100%; padding:15px; box-sizing:border-box; border-radius:15px; transition:0.5s}
.partner > div p a:hover{background:var(--green); transition:0.5s}
.partner > div p a img{width:100%; height:auto; filter:brightness(0)invert(1)}

@media (max-width: 700px) {
	.partner > div p{width:33.333%}
}
@media (max-width: 500px) {
	.partner > div p{width:50%}
}

/* LOGO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{height:200px; width:100%; padding:10px; box-sizing:border-box; background:rgba(255,255,255,0.75); position:absolute; top:0; left:0; z-index:1}
.logo p{text-align:center; margin:0}
.logo img{height:180px; width:auto; transition:0.5s; cursor:pointer}
.logo img:hover{height:160px; transition:0.5s; margin:10px 0 0 0}

@media (max-width: 768px) {
	header{height:auto;}
	.logo img{height:auto; width:80%}
	.logo img:hover{height:auto; margin:0}
}
@media (max-width: 500px) {
	header{padding:60px 15px 0 15px; box-sizing:border-box}
	.logo img{height:auto; width:100%}
}

/* HERO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero > div{position:relative; width:100%; height:100vh; background-size:cover; background-position: center center; display:flex; flex-wrap:wrap; justify-content:space-around; align-items:flex-end; padding:0 5% 50px 5%; box-sizing:border-box}
.hero > div p{width:18.75%; margin:0}
.hero > div a{display:flex; flex-wrap:wrap; justify-content:center; background:var(--blue); width:100%; padding:15px 30px 30px 30px; border-radius:15px; box-sizing:border-box; color:#FFF; text-align:center; text-transform:uppercase; font-weight:bold; transition:0.3s}
.hero > div a img{width:60%; height:auto; filter:brightness(0) invert(1); margin:0 auto 10px auto; transition:0.5s}
.hero > div p:last-child a{background:var(--green);}
.hero > div a:hover,
.hero > div p:last-child a:hover{background:#FFF; color:var(--blue)}
.hero > div a:hover img{filter:none; transform: scaleX(-1); transition:0.5s}

@media (max-width: 1400px) {
	.hero > div{justify-content:space-between; padding:0 15px 30px 15px;}
	.hero > div p{width:calc(25% - 11.25px); font-size:16px; line-height:26px;}
}
@media (max-width: 1000px) {
	.hero > div a img{width:80%}
}
@media (max-width: 500px) {
	.hero > div{align-content: flex-end; padding:0 15px 15px 15px; justify-content:center}
	.hero > div p{width:75%; margin:0 0 10px 0}
	.hero > div a{padding:5px 15px 0px 15px}
	.hero > div a img{width:50px; }
	.hero > div span{width:calc(100% - 50px)}
	.hero > div a:hover{background:var(--blue); color:#FFF}
	.hero > div p:last-child a:hover{background:var(--green); color:#FFF}
	.hero > div a:hover img{filter:brightness(0) invert(1); transform:none}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{background:var(--blue)}
footer > div > div{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; height:150px; width:100%; max-width:var(--page); margin:auto; padding:0 15px; box-sizing:border-box}
footer .content{display:flex; flex-wrap:wrap;}
footer .content p:first-child{margin:0 25px 0 0}
footer p{margin:0}
footer a{display:flex; align-items:center; color:#FFF}
footer a:visited{color:#FFF}
footer a img{width:30px; height:auto; margin:0 10px 0 0; filter:brightness(0) invert(1);}
footer a:hover{color:#000}
footer a:hover img{filter:brightness(0)}

/* SERVCIE-ANFRAGE
–––––––––––––––––––––––––––––––––––––1––––––––––––– */
.service_anfrage{width:100%; max-width:1024px; margin:auto; padding:0 15px 30px 15px; box-sizing:border-box; border-top:solid var(--darkgrey) 5px; border-bottom:solid var(--darkgrey) 5px}
.anfrage fieldset{border:none; padding:0}
.anfrage_title{margin:40px 0 0 0; font-family:lato-heavy, sans-serif}
.anfrage_title p{font-family:lato-normal, sans-serif}
.anfrage_subtitle{margin:20px 0 0 0; font-family:lato-heavy, sans-serif}
.service_anfrage .form-check{font-family:lato-normal, sans-serif}
.anfrage_title select{width:100%; font-size:20px}
.anfrage_title select option{font-size:20px}
.anfrage_title > div > label{font-size:26px; line-height:60px;}
.anfrage_subtitle > div > label{font-size:24px; line-height:60px}
.anfrage_radio > div > div{display:flex; flex-wrap:wrap;}
.anfrage_radio .form-check-label{margin:0 15px 0 5px}
.anfrage_radio .form-check-input{width:20px; height:20px}
.anfrage_field{float:left; width:100%}
.anfrage_field input{margin: 0 15px 15px 0; width: calc(100% - 15px); height: 40px; font-size:16px; padding:0 0 0 10px; border-color:var(--darkgrey); border-width:1px; font-family:lato-normal, sans-serif}
.anfrage_field_25{width:25%}
.anfrage_field_50{width:50%}
.anfrage_field_75{width:75%}
.anfrage_textarea textarea{width:100%; font-family:lato-normal, sans-serif}
.anfrage_linespace{margin-bottom:40px}

.form_rex summary{margin-bottom:10px; cursor:pointer; color:var(--blue)}
.form_rex summary:hover{color:var(--darkgrey)}

.anfrage_send{background:var(--blue); border:none; padding:15px 25px; color:#FFF; border-radius:9px; margin-top:40px!important}
.anfrage_send:hover{background:var(--lightblue)}
.anfrage_datenschutz .form-check-label{margin:0 15px 0 5px}

.visforms h1{margin:30px 0 -30px 0}


/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--blue:rgb(51, 83, 161); --green: rgb(117,184,69); --page:1024px; --sitebtns:calc(100% - 50px)}

@font-face {font-family: 'ubuntu-normal'; src: url('../fonts/Ubuntu-Normal.woff') format('woff'), url('../fonts/Ubuntu-Normal.woff2') format('woff2')}
@font-face {font-family: 'ubuntu-bold'; src: url('../fonts/Ubuntu-Bold.woff') format('woff'), url('../fonts/Ubuntu-Bold.woff2') format('woff2')}

html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px; line-height: 30px; font-family: ubuntu-normal, sans-serif; color: #000; overflow-x:hidden}
a, a:visited{color:#000; text-decoration: none; }
a:hover{color:var(--blue)}
strong {font-family: ubuntu-bold; font-weight:normal}
p {margin:0 0 20px 0}
img{-webkit-user-drag:none; user-drag:none}
button{border:none; background:var(--blue); color:#FFF; border-radius:9px; padding:15px 20px; margin:30px 0 0 0}
button:hover{background:var(--green)}
.anker{position:absolute; top:-60px; left:0;}

h1,h2,h3{font-family: ubuntu-bold; font-weight:normal; }
h1{font-size:60px; line-height:70px; margin: 0; color:var(--blue); margin:40px 0; text-transform:uppercase; display:flex; align-items:center}
.home h1{margin:0 0 100px 0;}
h1 em{font-size:30px; line-height:40px; font-style:normal; position:relative; text-transform:none; padding:0 0 0 70px; box-sizing:border-box}
h1 em img{position:absolute; height:140px; width:auto; top:-40px; left:20px; transform:translateX(-50%)}
h1 span{display:inline-block; position:absolute; height:140px; width:300px; top:-40px; left:20px; transform:translateX(-50%); background-image: url("/images/global/blitz.svg");}
h2{font-size:30px; line-height:40px; margin:30px 0 20px 0}
h3{font-size:26px; line-height:26px; margin:0 0 20px 0}

@media (max-width: 1000px) {
	.home h1{margin:30px 0;}
	h1{hyphens:auto}
}
@media (max-width: 700px) {
	h1{font-size:30px; line-height:40px; display:block}
	h1 em{padding:0}
	h1 span,
	h1 em img{display:none}
	h2{font-size:26px; line-height:32px}
	h3{font-size:24px; line-height:28px}
	.hyphens a{hyphens: auto;}
}