/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{width:100%; background:var(--brown)}
footer > div > div{width:100%; height:100px; max-width:var(--page); margin:auto; display:flex; flex-wrap:wrap; align-items:center; position:relative; padding:15px 15px 15px 40px; box-sizing:border-box}
footer p{margin:0 30px 0 0}
footer a{display:flex; align-content:center; color:#FFF}
footer a:visited{color:#FFF}
footer a:hover{color:#000}
footer a img{width:25px; height:auto; filter:brightness(0)invert(1); margin:0 10px 0 0}
footer a:hover img{filter:brightness(0)}
footer p:last-child{position:absolute; top:35px; right:15px; margin:0}

@media screen and (max-width:700px){
	footer > div > div{height:auto;}
	footer p:last-child{position:relative; top:auto; right:auto; margin:20px 0 0 0}
}

/* HOME NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_news{position:absolute; top:190px; right:30px; width:290px; height:auto; z-index:2}
.home_news:before{content:"NEWS"; position:absolute; top:-40px; left:50%; transform:translateX(-50%); font-size:30px; line-height:30px; color:#FFF}
.home_news ul{list-style-type: none; padding:15px 0; margin:0; border-radius:15px; background:#000}
.home_news article{background:none; margin:0!important}
.home_news h4{margin:0; font-size:20px; line-height:30px; text-align:center; font-weight:normal;}
.home_news h4 a{color:#FFF; display:block; padding:5px 0; width:100%; transition:0.5s; padding:0 10px; box-sizing:border-box}
.home_news h4 a:hover{background:var(--brown); color:#000; transition:0.5s}

@media screen and (max-width:1200px){
	.home_news{right:auto; left:50%; transform:translateX(-50%); width:auto; max-width:290px; top:auto; bottom:50px}
	.home_news:before{}
	.home_news ul{border:solid 1px #FFF}
}
@media screen and (max-width:500px){
	.home_news{width:calc(100% - 30px)}
	.home_news ul{width:100%}
}

/* KONTAKTFORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contactform{position:fixed; top:0; left:0; width:100%; background:rgba(0,0,0,0.75); z-index:9999; backdrop-filter: blur(10px); display:none; overflow-y: scroll;}
.contactform form{ height:100vh; display:flex; align-items:center; justify-content:center;}
.contactform fieldset{border:none; border-radius:15px; margin:0; padding:15px 15px 35px 15px; width:300px; box-sizing:border-box; background:var(--brown)}
.contactform fieldset > div:last-child{height:30px;}
.contactform fieldset p{margin:0}
.contactform .titel{position:relative}
.contactform .titel p{color:#FFF; margin:0 0 10px 0; font-size:24px}
.contactform .titel a{position:absolute; top:0; right:0; width:30px; height:30px; font-size:20px; line-height:20px; display:flex; justify-content:center; align-items:center; background:#000; color:#FFF; border-radius:50%; padding:0 0 3px 2px; box-sizing:border-box; transition:0.5s}
.contactform .titel a:hover{transform:rotate(90deg); padding:0 0 3px 2px; transition:0.5s}
.contactform .titel hr{display:none}
.contactform .anrede > div > label{display:none}
.contactform .anrede > div > div{display:flex; gap:10px; margin:0}
.contactform .anrede .btn{margin:0 5px 0 0}
.contactform .anrede label{color:#FFF}
.contactform .anrede input{width:auto}
.contactform input,.contactform textarea{width:100%; margin:10px 0 0 0; background:var(--brown); border:1px solid #FFF; box-sizing:border-box; color:#FFF!important; padding:5px 10px; border-radius:9px}
.contactform .datenschutz{display:flex; align-items:center}
.contactform .datenschutz .row,
.contactform .datenschutz input{width:auto}
.contactform .datenschutz label{display:none}
.contactform .datenschutz p{font-size:16px; line-height:20px; color:#FFF; margin:10px 0 0 5px}
.contactform .datenschutz p a{color:#FFF; text-decoration:underline}
.contactform .btn_send{background:#FFF; color:var(--brown)!important; border:none; transition:0.5s}
.contactform .btn_send:hover{background:#000; color:#FFF!important; transition:0.5s}
.contactform .error{color:#000;}

body.no-scroll {overflow: hidden}
.contactform.active {display:block}

/* VIDEO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.video > div{width:100%; max-width:var(--page); margin:auto; padding:0 15px; box-sizing:border-box}
.video video{width:100%; height:auto; border-radius:15px; border:1px solid #000; background:#FFF}
.video p{margin:20px 0}

@media (orientation: landscape) {
	.landscape{display:block}
	.portrait{display:none}
}

@media (orientation: portrait) {
	.landscape{display:none}
	.portrait{display:block}
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:absolute; top:0; left:0; height:130px; width:100%; background:var(--brown); z-index:3}
header .logo{width:auto; height:100%; padding:10px 20px 25px 20px; background:#FFF; display:inline-block; box-sizing:border-box; position:realtive; z-index:1}
header .logo p{margin:0}
header .logo img{height:100%; width:auto;}
header .logo:hover img{filter:brightness(0)}

@media screen and (max-width:500px){
	header{height:auto}
	header .logo{width:calc(100% - 80px); height:auto}
	header .logo img{height:auto; width:100%;}
}

/* SIDEBTNS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sidebtns{position:fixed; top:160px; left:0}
.sidebtns a{position:relative; height:50px; display:flex; align-items:center} 
.sidebtns a span:first-child{height:50px; padding:10px; box-sizing:border-box; background:var(--brown); border-radius:0 9px 9px 0; color:#FFF!important; display:inline-block; position:relative; z-index:2}
.sidebtns a span:last-child{height:50px; width:auto; overflow:hidden; padding:10px; box-sizing:border-box; background:#000; position:absolute; top:0; left:50px; transform:translateX(-100%); z-index:1; border-radius:0 9px 9px 0;}
.sidebtns a:hover{color:#FFF; background:#000; border-radius:0}
.sidebtns a:hover span:last-child{width:auto; transition:0.5s; transform:translateX(0) }
.sidebtns img{width:30px; height:auto; filter:brightness(0)invert(1)}

@media screen and (max-width:1200px){
	.sidebtns{left:auto; right:0}
	.sidebtns a span:first-child{background:#000}
	.sidebtns a span:first-child,
	.sidebtns a span:last-child{border-radius:9px 0 0 9px}
	.sidebtns a span:last-child{left:auto; right:50px; transform:translateX(100%)}
	.sidebtns a:hover span:last-child{transition:none;}
}

/* HOME HERO TITLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_herotitle{position:absolute; bottom:50%; left:calc(50% - 100px); transform:translate(-50%,100%)}
.home_herotitle p{font-size:100px; line-height:100%; color:#FFF; font-family:Blender-Pro-Bold; margin:0; text-align:center; position:relative}
.home_herotitle p a, .home_herotitle p a visited{color:#FFF}
.home_herotitle p a:hover{color:#000}
.home_herotitle p a:hover:after{border:1px solid #000}
.home_herotitle p a:hover:before{background:#000}
.home_herotitle p a:after{content:""; position:absolute; bottom:-50px; left:50%; transform:translate(-50%,100%); width:40px; height:80px; border-radius:15px; border:1px solid #FFF; box-sizing:border-box}
.home_herotitle p a:before{content:""; position:absolute; bottom:-65px; left:50%; transform:translate(-50%,100%); width:15px; height:15px; border-radius:50%; background:#FFF; animation: bullet 3s infinite linear;opacity:0;}

@keyframes bullet {
    0% {bottom:-65px; opacity:0;}
	1%{opacity:1}
    50%{bottom:-100px; opacity:1}
	75%{opacity:0}
	100%{opacity:0; bottom:-100px}
}

@media screen and (max-width:1300px){
	.home_herotitle p{font-size:60px} 
}
@media screen and (max-width:1200px){
	.home_herotitle{left:50% }
}
@media screen and (max-width:800px){
	.home_herotitle p{font-size:40px} 
}
@media screen and (max-width:700px){
	.home_herotitle{bottom:auto; top:180px; transform:translate(-50%,0%) }
}
@media screen and (max-width:500px){
}

/* HOME HOTTHEMES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_hotthemes{position:absolute; top:0; right:0; width:260px; height:100vh; background:rgba(0,0,0,0.3)}
.home_hotthemes > div{position:absolute; bottom:30px; left:-60px}
.home_hotthemes p{margin:0 0 30px 0}
.home_hotthemes a{background:var(--brown); width:290px; border-radius:15px; display:flex; align-items:center; padding:15px; box-sizing:border-box; font-size:30px; font-family:Blender-Pro-Bold; color:#FFF}
.home_hotthemes a:visited{color:#FFF;}
.home_hotthemes a:hover{background:#000; color:#FFF; transition:0.5s}
.home_hotthemes img{width:70px; height:70px; margin:0 10px 0 0; object-fit:cover;}

@media screen and (max-width:1200px){
	.home_hotthemes{display:none}
}

/* KOMPETENZEN Menü
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kom_menu{width:100%; max-width:var(--page); margin:auto; padding:0 15px; box-sizing:border-box;}
.kom_menu .content{display:flex; flex-wrap:wrap; gap:30px; width:100%; background:var(--brown); margin:60px 0 125px 0; border-radius:15px}
.kom_menu .content h3{width:calc(25% - 22.5px); color:#FFF; margin:0; padding:20px 0 20px 20px; box-sizing:border-box}
.kom_menu .content p{width:calc(25% - 22.5px); position:relative; text-align:center; margin:0}
.kom_menu .content a{position:absolute; top:-45px; left:0; background:#FFF; border:solid 1px var(--brown); border-radius:15px; width:100%; padding:15px; box-sizing:border-box; color:var(--brown); overflow:hidden}
.kom_menu .content a:visited{color:var(--brown)}
.kom_menu .content a:hover{background:#000; color:#FFF;}
.kom_menu .content a:hover img{filter:brightness(0)invert(1)}
.kom_menu .content img{width:90px; height:auto; margin:0 0 10px 0}

@media screen and (max-width:1000px){
	.kom_menu .content{gap:15px}
	.kom_menu .content h3{font-size:24px; line-height:32px}
	.kom_menu .content p{width:calc(25% - 11.25px);}
	.kom_menu .content a{font-size:16px; line-height:24px}
}
@media screen and (max-width:700px){
	.kom_menu .content{padding:15px; box-sizing:border-box; margin:30px 0}
	.kom_menu .content h3{width:100%; padding:0}
	.kom_menu .content p{width:calc(33.333% - 10px)}
	.kom_menu .content a{position:relative; top:auto; left:auto; display:block; font-size:14px; line-height:20px; padding:5px; hyphens:auto; background:none; border:solid 1px #FFF;color:#FFF}
	.kom_menu .content a:hover{background:none; color:#FFF}
	.kom_menu .content a:visited{color:#FFF}
	.kom_menu .content img{width:50px; margin:0;filter:brightness(0)invert(1)}
}
@media screen and (max-width:500px){
	.kom_menu .content h3,
	.kom_menu .content p{width:calc(50% - 7.5px)}
	.kom_menu .content h3{hyphens:auto}
}

/* Info-Flyer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.info_flyer{width:100%; max-width:var(--page); margin:120px auto; padding:15px 0; box-sizing:border-box; background:var(--brown); border-radius:15px}
.info_flyer h2{color:#FFF; padding:0 30px; box-sizing:border-box; margin:0}
.info_flyer .content{width:100%; display:flex; flex-wrap:wrap}
.info_flyer .img{width:50%; padding:0 30px; box-sizing:border-box;}
.info_flyer .img p{margin:0}
.info_flyer .img img{width:100%; height:auto; }
.info_flyer .links{display:flex; flex-wrap:wrap; width:50%; align-content: center; padding:0 15px 30px; box-sizing:border-box;}
.info_flyer .links p{width:50%; display:inline-block; margin:0 0 10px 0}
.info_flyer .links a,.info_flyer .links a:visited{color:#FFF}
.info_flyer .links a:hover{color:#000}

@media screen and (max-width:1024px){
	.info_flyer{border-radius:0; margin:40px 0}
	.info_flyer .img{width:33.333%}
	.info_flyer .links{width:66.666%}
}
@media screen and (max-width:700px){
	.info_flyer .img,
	.info_flyer .links{width:100%}
}
@media screen and (max-width:400px){
	.info_flyer .links p{width:100%} 
}

/* SCROLL DOWN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.scroll_down {position:relative; font-size:20px!important; margin:40px 0 0 0!important}
.scroll_down a{display:inline-block; width:25px; height:80px; border-radius:9px; border:solid 1px #FFF; box-sizing:border-box; color:transparent}
.scroll_down a:after{content:""; position:absolute; width:15px; height:15px; border-radius:50%; background:#FFF; left:50%; transform:translateX(-50%); animation: scrolldown 5s infinite linear;}

@keyframes scrolldown {
    0% {top: 5px}
    15%, 100% {top: 56px}
}
.scroll_down a:hover{border:solid 1px var(--yellow); color:transparent}
.scroll_down a:hover:after{background:var(--yellow);}

/* HOME Kompetenzen
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_kompetenzen div{width:100%; max-width:var(--page); margin:20px auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px}
.home_kompetenzen p{width:calc(25% - 22.5px); text-align:center; margin:0}
.home_kompetenzen a{width:100%; height:auto; display:block; border:solid 3px var(--brown); border-radius:15px; box-sizing:border-box; padding:10px; color:var(--brown)}
.home_kompetenzen a:visited{color:var(--brown)}
.home_kompetenzen img{width:auto; height:90px; transition:0.5s}
.home_kompetenzen a:hover{border:solid 3px #000; transition:0.5s; color:#000}
.home_kompetenzen a:hover img{filter:brightness(0); transition:0.5s}
.home_kompetenzen p:last-child a{background:var(--brown); color:#FFF; transition:0.5s}
.home_kompetenzen p:last-child img{filter:brightness(0)invert(1)}
.home_kompetenzen p:last-child a:hover{background:#000; border:solid 3px #000; transition:0.5s}

@media screen and (max-width:1000px){
	.home_kompetenzen p{width:calc(33.33% - 20px)}
	.home_kompetenzen p:last-child{width:100%}
	.home_kompetenzen p:last-child br{display:none}
	.home_kompetenzen p:last-child a{display:flex; align-items:center; gap:15px; justify-content:center}
}
@media screen and (max-width:600px){
	.home_kompetenzen div{gap:15px}
	.home_kompetenzen p{width:100%}
	.home_kompetenzen p br{display:none}
	.home_kompetenzen p img{display:none}
}

/* HAUSHALTSGERÄTE Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hg_content{position:relative; z-index:1}
.hg_content > div{width:100%; max-width:var(--page); margin:20px auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px; }
.hg_content > div:after{ content:""; position:absolute; top:0; left:0; width:100%; height:160px; background:var(--brown); z-index:-1}
.hg_content .content{width:calc(33.333% - 20px)}
.hg_content p, .hg_content h3{text-align:center}
.hg_content img{height:120px; width:auto; margin:20px 0; filter:brightness(0)invert(1)}

@media screen and (max-width:700px){
	.hg_content .content{width:100%}
	.hg_content > div{gap:0}
	.hg_content > div:after{display:none}
	.hg_content img{filter:none}
	.hg_content p{margin:0}
}

/* CALAMEO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.calameo{position:relative; z-index:1; margin:80px 0}
.calameo > div{width:100%; max-width:var(--page); margin:20px auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px; }
.calameo > div:after{ content:""; position:absolute; top:70px; left:0; width:100%; height:160px; background:var(--brown); z-index:-1}
.calameo .content{width:calc(50% - 15px)}
.calameo .source{text-align: center}
.calameo .source iframe{width:auto; height:320px; aspect-ratio:4/3}

@media screen and (max-width:1000px){
	.calameo > div{gap:0}
	.calameo > div:after{display:none}
	.calameo .content{width:100%}
	.calameo .source iframe{width:100%; height:auto; aspect-ratio:2/1}
}
@media screen and (max-width:700px){
	.calameo .source iframe{aspect-ratio:4/3}
}

/* REFERENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.referenzen{}
.referenzen article{margin:20px 0 0 0}
.referenzen > ul{width:100%; max-width:var(--page); margin:20px auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px;}
.referenzen > ul > li{list-style-type: none; width:calc(50% - 15px);}
.referenzen > ul > li ul{padding-inline-start: 20px!important}
.referenzen > ul > li ul > li{list-style-type: disc; }
.referenzen figure{margin:0 0 20px 0; border-radius:15px; padding:0 0 0 30px; background:var(--brown); overflow:hidden}
.referenzen img{width:100%; height:auto;}
.referenzen p{margin:0 0 10px 0}
.referenzen summary{margin:20px 0; cursor: pointer; font-family:Blender-Pro-Bold}
.referenzen summary:hover{color:var(--brown)}
.referenzen summary:before{content:"\279E"; padding:0 10px 0 0}

@media screen and (max-width:600px){
	.referenzen > ul > li{width:100%}
}
/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen{}
.kompetenzen > ul{list-style-type: none; width:100%; max-width:var(--page); margin:auto; padding:0}
.kompetenzen article{width:66.666%; border-radius:15px; padding:60px 0 60px 33.333%; z-index:1; margin:0 0 60px 0}
.kompetenzen article > div{background:#FFF; padding:25px 15px 15px 30px; box-sizing:border-box; border-radius:15px}
.kompetenzen figure{position:absolute; top:0; left:50%; transform:translateX(-100%); margin:0; z-index:-1; width:100%; height:100%}
.kompetenzen figure img{width:100%; height:100%; object-fit:cover; border-radius:15px}
.kompetenzen > ul > li:nth-child(even) article{padding:60px 33.333% 60px 0;}
.kompetenzen > ul > li:nth-child(even) article > div{padding:25px 30px 15px 15px;}
.kompetenzen > ul > li:nth-child(even) figure{left:auto; right:50%; transform:translateX(100%)}
.kompetenzen article ul{margin:20px 0; list-style-type: none;}
.kompetenzen article li{font-family:Blender-Pro-Bold; margin:0 0 10px 0; color:var(--brown); position:relative}
.kompetenzen article li:before{content:"\2713"; font-size:30px; position:absolute; top:0; left:-35px}
.kompetenzen a{width:calc(50% - 30px); margin:0 25px 0 0; display:inline-block; padding:15px 0; text-align:center; color:#FFF; background:var(--brown); border-radius:9px; transition:0.5s}
.kompetenzen a:visited{color:#FFF}
.kompetenzen a:hover{background:#000; color:#FFF; transition:0.5s}

@media screen and (max-width:2048px){
	.kompetenzen figure,
	.kompetenzen figure img{max-width:calc(50vw + 15px)}
	.kompetenzen figure img{border-radius:0 15px 15px 0}
	.kompetenzen > ul > li:nth-child(even) figure img{border-radius:15px 0 0 15px}
}
@media screen and (max-width:700px){
	.kompetenzen article{width:100%; padding:0; margin:0}
	.kompetenzen article > div{padding:15px}
	.kompetenzen h2{margin:20px 0 10px 0}
	.kompetenzen figure{position:relative; top:auto; left:auto; transform:none; z-index:1;max-width:100%; height:auto;}
	.kompetenzen figure img{max-width:100%;border-radius:15px; height:auto; aspect-ratio:2 / 1; object-fit:cover;  border-left:30px solid var(--brown); box-sizing:border-box}
	.kompetenzen > ul > li:nth-child(even) article{padding:0;}
	.kompetenzen > ul > li:nth-child(even) article > div{padding:15px;}
	.kompetenzen > ul > li:nth-child(even) figure{left:auto; right:auto; transform:none}
	.kompetenzen > ul > li:nth-child(even) figure img{border-radius:15px}

}

/* PARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner{margin:40px 0 120px 0}
.partner > div{width:100%; max-width:var(--page); margin:0 auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px}
.partner h2{width:100%; margin:0}
.partner p{margin:0; width:calc(25% - 22.5px)}
.partner a{display:block; width:100%; height:100%; border-radius:15px; border:solid 1px var(--brown); padding:20px; transition:0.5s; box-sizing:border-box}
.partner img{width:100%; height:auto; filter:brightness(0)}
.partner a:hover{background:var(--brown); transition:0.5s}
.partner a:hover img{filter:brightness(0)invert(1)}


/* KOMPETENZBEREICHE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzbereiche{width:100%; max-width:var(--page); margin:80px auto; padding:0 15px; box-sizing:border-box}
.kompetenzbereiche h2{color:#000; margin: 0 0 30px 0;}
.kompetenzbereiche ul{list-style-type: none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:30px}
.kompetenzbereiche li{width:calc(33.333% - 20px)}
.kompetenzbereiche a{display:block; background:var(--brown); padding:15px 0; border-radius:15px; color:#FFF; text-align:center; transition:0.5s}
.kompetenzbereiche a:visited{color:#FFF}
.kompetenzbereiche a:hover{background:#000; color:#FFF; transition:0.5s}

@media screen and (max-width:1024px){
	.kompetenzbereiche{margin:40px auto}
	.kompetenzbereiche ul{gap:15px;}
	.kompetenzbereiche li{width:calc(33.333% - 10px)}
}
@media screen and (max-width:500px){
	.kompetenzbereiche a{font-size:16px; line-height:24px}
}
@media screen and (max-width:400px){
	.kompetenzbereiche li{width:calc(50% - 7.5px)}
}

/* LEHRE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lehre,.lehre_2{width:100%; max-width:var(--page); margin:100px auto; padding:0 15px; box-sizing:border-box}
.lehre_2{margin:20px auto;}
.lehre > div,.lehre_2 > div{width:100%; display:flex; flex-wrap:wrap; gap:30px;}
.lehre .content{width:calc(50% - 15px); display:flex; flex-wrap:wrap; gap:15px;}
.lehre iframe{width:100%; height:auto; aspect-ratio:16 / 9; border:none; border-radius:15px}
.lehre_2 h2,.lehre h2{width:100%; margin:0}
.lehre h3{width:100%; margin:0; color:#000}
.lehre p{width:calc(50% - 7.5px); background:var(--brown); padding:10px; box-sizing:border-box; margin:0; color:#FFF; text-align:center; border-radius:9px}
.lehre .content p:nth-child(7),
.lehre .content p:nth-child(8){width:100%}
.lehre p:last-child{background:#000}
.lehre strong{display:block; font-size:26px}
.lehre a, .lehre a:visited{color:#FFF}
.lehre a:hover{color:var(--brown)}
.lehre_2 > div div{width:calc(50% - 15px); }
.lehre_2 .text{border-width: 3px 3px 0 0; border-style: solid; border-color: var(--brown); border-radius: 0 15px; padding: 15px 15px 0 0; box-sizing: border-box;}
.lehre_2 .img{background:var(--brown); border-radius:15px; height:auto; aspect-ratio:16 / 9;}
.lehre_2 .img p{margin:0}
.lehre_2 img{width:100%; height:auto; object-fit:cover; border-radius:15px}

@media screen and (max-width:700px){
	.lehre,.lehre_2{margin:40px auto;}
	.lehre .content{width:100%; margin:0 0 20px 0}
	.lehre_2 > div{gap:0}
	.lehre_2 > div div{width:100%}
	.lehre_2 .text{border-width: 0 3px 3px 0; border-radius: 0 0 15px 0; margin:0 0 30px 0}
	.lehre_2 img{border-radius: 15px 15px 0 0}
}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team {width:100%; padding:0 30px; box-sizing:border-box; margin:40px 0}
.team ul{width:100%; list-style-type: none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:30px; justify-content:center}
.team li{width:290px;}
.team article > div{width:100%; aspect-ratio:1 / 1; position:relative; overflow:hidden; z-index:2; display:flex; flex-wrap:wrap; align-content:flex-end; border-radius:15px;}
.team article > div:after{content:"i"; position:absolute; top:15px; right:15px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:#000; color:#FFF; border-radius:50%; transition:0.5s; font-size:16px; font-family: Blender-Pro-Bold;}
.team article > div:hover:after{transform:rotate(180deg); transition:0.5s}
.team p{position:relative; z-index:1; margin:0; text-align:center; width:100%; background:rgba(0,0,0,0.75); color:#FFF; height:0; overflow:hidden; transition:0.5s}
.team p:first-child,.team p:last-child{height:auto}
.team p:first-child{padding:15px 0}
.team p:last-child{position:absolute; top:0; left:0; z-index:0; background:none}
.team img{width:100%; height:100%; filter:grayscale(1)}
.team a,.team a:visited{color:#FFF}
.team a:hover{color:var(--brown)}
.team article:hover img:first-child{display:none}
.team article:hover p{height:30px; transition:0.5s}
.team article:hover p:first-child{padding:15px 0 0 0}
.team article:hover p:last-child{height:auto}

@media screen and (max-width:1000px){
	.team p{font-size:16px; line-height:24px}
	.team li{width:calc(33.333% - 20px)}
	.team article:hover p{height:24px}
}
@media screen and (max-width:800px){
	.team li{width:calc(50% - 15px)}
}
@media screen and (max-width:500px){
	.team li{width:100%}
}


/* BENEFITS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.benefits{width:100%; max-width:var(--page); margin:30px auto; padding:0 15px; box-sizing:border-box}
.benefits .intro{display:flex; gap:30px; flex-wrap:wrap}
.benefits .intro div{width:calc(50% - 15px)}
.benefits .intro .text{display:flex; flex-wrap:wrap; align-content: flex-end; border-width: 3px 3px 0 0; border-style: solid; border-color: var(--brown); border-radius: 0 15px; padding-right: 15px; box-sizing: border-box;}
.benefits .intro .img{height:240px; background:var(--brown); border-radius:15px}
.benefits .intro .img p{margin:0}
.benefits .intro .img img{width:100%; height:100%; object-fit:cover; object-position: 50% 25%; border-radius:15px}
.benefits .content{display:flex; flex-wrap:wrap; gap:30px; margin:40px 0 0 0}
.benefits .content p{width:calc(33.333% - 20px); display:flex; align-items:center; line-height:20px; margin:0 0 10px 0}
.benefits .content p strong{display:inline-block; font-size:60px; margin:0 10px 0 0; }
.benefits .content p em{font-style:normal}

@media screen and (max-width:1000px){
	.benefits .content p{width:calc(50% - 15px)}
}
@media screen and (max-width:700px){
	.benefits .intro div{width:100%}
	.benefits .intro .text{border:0}
}
@media screen and (max-width:600px){
	.benefits .content p{width:100%}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact > div{width:100%; max-width:var(--page); margin:100px auto; padding:0 15px; box-sizing:border-box; position:relative;}
.contact h2{margin:0 0 30px 0; padding:20px 0 0 0}
.contact .content{display:flex; flex-wrap:wrap; gap:30px; position:relative; height:130px; width:100%; padding:30px 33.333% 30px 0; box-sizing:border-box}
.contact .content:after{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:100%; background:var(--brown); z-index:-1}
.contact .content p{margin:0; text-align:center}
.contact .content a,.contact .content a:visited{color:#FFF;}
.contact .content img{height:40px; width:auto; filter:brightness(0) invert(1); padding:0 0 10px 0}
.contact .content a:hover{color:#000}
.contact .content a:hover img{filter:brightness(0)}
.contact .img{position:absolute; top:0; right:0; width:50%; height:340px; }
.contact .img p{margin:0}
.contact .img a{display:block; width:100%; height:100%; border-radius:15px; background-image:url("../../../images/global/contact-team-01-1200x800.jpg"); background-size: cover;}
.contact .img a:hover{background-image:url("../../../images/global/contact-team-02-1200x800.jpg")}
.contact .img a,.contact .img a:visited{color:#FFF}
.contact .img span{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); background:var(--brown); display:block; padding:10px 20px; border-radius:9px}
.contact .img a:hover span{background:#000}

@media screen and (max-width:1000px){
	.contact > div{display:flex; flex-wrap:wrap; margin:40px auto;}
	.contact h2{width:100%; order:0}
	.contact .content{padding:30px 0; justify-content:center; width:100%; order:2; background:var(--brown); border-radius:0 0 15px 15px}
	.contact .img{position:relative; top:auto; right:auto; width:100%; order:1}
	.contact .img a{border-radius:15px 15px 0 0; background-position-y: center;}
	.contact .img span{left:auto; right:15px; transform:none}
	.contact .content:after{display:none}
}
@media screen and (max-width:500px){
	.contact .content{height:auto; gap:0; display:block; padding:20px 20px 10px 20px; box-sizing:border-box}
	.contact .content p{margin:0 0 10px 0; text-align:left}
	.contact .content p br{display:none}
	.contact .content a{display:flex; align-items:center}
	.contact .content img{margin:0 10px 0 0}
	.contact .img span{background:#000}
}

/* BLOG
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.blog > div{width:100%; max-width:var(--page); margin:auto; position:relative;}
.blog h2{padding:0 15px; box-sizing:border-box; }
.blog iframe{width:100%; height:720px; border:none}

@media screen and (max-width:500px){
	.blog iframe{height:540px;}
}

/* ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.address > div{width:100%; max-width:var(--page); margin:100px auto 0 auto; }
.address .content{height:700px; position:relative;}
.address .content h2{padding:0 15px; box-sizing:border-box;}
.address iframe{position:absolute; top:0; left:33.33%; transform:translateX(-50%); width:200vw; height:100%; border:none; z-index:-1; filter:grayscale(1); background:#ddd}
.address .layer{position:absolute; top:0; right:0; background:rgba(0,0,0,0.6); width:340px; height:100%; }
.address p,.address a, .address a:visited{color:#FFF; margin:0}
.address a:hover{color:#000}
.address h2{padding:0 15px}
.address h3{color:#FFF; margin:0 0 10px 0; position:relative; font-size:26px; line-height:26px;}
.address h3:after{content:""; width:30px; height:30px; background:var(--brown); position:absolute; top:-2px; left:-40px}
.address .lehrbetrieb{margin:80px 0}
.address .lehrbetrieb a{position:relative; width:230px; height:30px; padding:0 15px 0 40px; box-sizing:border-box; background:var(--brown); display:flex; align-content:center }
.address .lehrbetrieb a:hover, .address .lehrbetrieb a:visited{background:#000; color:#FFF}
.address .lehrbetrieb img{position:absolute; top:-50px; right:0; width:130px; height:auto; transform:translateX(80px)}
address,.filiale{font-style:normal; padding:0 0 30px 40px}
.address .contact{padding:0 0 0 40px;}
.address .contact a{display:flex; align-items:center; margin:0 0 20px 0}
.address .contact img{width:25px; height:auto; filter:brightness(0)invert(1); margin:0 10px 0 0}
.address .contact a:hover{filter:brightness(0)}
.address .elite{padding:20px 0 0 40px;}
.address .elite img{width:175px; height:auto; filter:brightness(0)invert(1);}
.address .elite a:hover img{filter:brightness(0)}

@media screen and (max-width:700px){
	.address > div{overflow:hidden}
	.address .content{height:auto}
	.address iframe{height:200px;}
	.address .layer{padding: 200px 0 40px 0; position:relative; top:auto; right:auto; width:100%; height:auto; background:none}
	.address p,.address a, .address a:visited, .address h3{color:#000}
	.address a:hover{color:var(--brown)}
	.address .lehrbetrieb{margin:30px 0 50px 0}
	.address .contact img,.address .elite img{filter:brightness(0)}
	.address .elite a:hover img,.address .elite a:hover img{filter:none}
	.address .lehrbetrieb a{width:calc(100% - 25px)}
	.address .lehrbetrieb img{transform:translateX(10px); filter: drop-shadow(0 0 3px #000);}
}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article{position:relative; width:100%; background:#FFF; margin:0}
.com-content-article{padding:calc((70vh - 130px) + 80px) 15px 15px 15px; margin:0 auto; width:100%; max-width:var(--page); box-sizing:border-box}
.home .com-content-article {padding:60px 15px 15px 15px;}
.com-content-article figure{position:absolute; top:0; left:0; margin:0; width:100%; height:calc(70vh - 130px);}
.com-content-article figure:after{position:absolute; bottom:0; left:0; content:""; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); width:100%; height:35vh}
.com-content-article figure img{width:100%; height:100%; object-fit:cover}
.com-content-article .img_pos_0 img{object-position: 50% 0%;}
.com-content-article .img_pos_10 img{object-position: 50% 10%;}
.com-content-article .img_pos_20 img{object-position: 50% 20%;}
.com-content-article .img_pos_30 img{object-position: 50% 30%;}
.com-content-article .img_pos_40 img{object-position: 50% 40%;}
.com-content-article .img_pos_60 img{object-position: 50% 60%;}
.com-content-article .img_pos_70 img{object-position: 50% 70%;}
.com-content-article .img_pos_80 img{object-position: 50% 80%;}
.com-content-article .img_pos_90 img{object-position: 50% 90%;}
.com-content-article .img_pos_100 img{object-position: 50% 100%;}

.hero_home .n2-ss-slide{height:100vh}

.home h1{position:relative!important; top:auto!important; left:auto!important; color:var(--brown)!important; text-align:left!important; font-size:50px; line-height:60px}

article h1{position:absolute; top:calc((70vh - 130px) - 200px); left:0; text-align:center; z-index:2; width:100%; color:#FFF}
article ul{margin:0 0 20px 0}

@media (max-width: 1000px) {
	.com-content-article{padding-top:calc(50vh + 40px)}
	.com-content-article figure{height:50vh;}
	article h1{top:calc(50vh - 200px);}
}
@media (max-width: 700px) {
	.home .com-content-article {padding-top:40px}
	article h1{top:calc(50vh - 150px);}
}
@media (max-width: 500px) {
	article{margin:100px 0 0 0}
	.home article{margin:0}
	article h1{top:calc(50vh - 100px);}
}
@media (max-width: 400px) {
	article{margin:80px 0 0 0}
}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--brown:rgb(176, 90, 23); --page:1024px}

@font-face {font-family: 'Blender-Pro-Bold'; src: url('../fonts/Blender-Pro-Bold.woff') format('woff'), url('../fonts/Blender-Pro-Bold.woff2') format('woff2')}
@font-face {font-family: 'Blender-Pro-Medium'; src: url('../Blender-Pro-Medium.woff') format('woff'), url('../fonts/Blender-Pro-Medium.woff2') format('woff2')}

html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px; line-height: 30px; font-family: Blender-Pro-Medium, sans-serif; color: var(--darkgrey); overflow-x:hidden}
a, a:visited{color:#000; text-decoration: none; }
a:hover{color:var(--yellow)}
strong {font-family: Blender-Pro-Bold; font-weight:normal}
p {margin:0 0 20px 0}
img{-webkit-user-drag:none; user-drag:none}

.anker{position:absolute; top:-50px; display:block}

h1,h2,h3{font-family: Blender-Pro-Bold; font-weight:normal; margin: 0 0 20px 0;; color:var(--brown)}
h1{font-size:100px; line-height:120px; color:var(--brown)}
h2{font-size:50px; line-height:60px; color:var(--brown)}
h3{font-size:30px; line-height:40px; margin:0 0 10px 0}
h1 em,h2 em,h3 em{font-style:normal; color:#000}

@media (max-width: 1000px) {
	.hyphens h1{hyphens:auto}
}
@media (max-width: 700px) {
	h1{font-size:60px; line-height:80px}
	h2{font-size:30px; line-height:40px}
	h3{font-size:24px; line-height:28px}
	.hyphens article{hyphens: auto;}
}
@media (max-width: 500px) {
	h1{font-size:40px; line-height:50px}
}

.title_points{position:relative}
.title_points:after,
.title_points:before{content:""; position:absolute; top:12px; width:25px; height:25px; border-radius:50%}
.title_points:after{left:-45px; background:var(--red)}
.title_points:before{left:-80px; background:var(--yellow)}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:absolute;top:0;right:0;z-index:33;transform:translateX(0)}
nav a{color:#FFF!important}
nav a:visited{color:#FFF!important}

nav>ul{margin:0;padding:0;line-height:24px;float:left;width:100%;height:130px;display:flex; align-items:center; margin:0 20px 0 0}
nav>ul>li{list-style:none;text-align:center; position:relative}
nav>ul>li>a{display:block;padding:10px 0;margin:0 20px;text-decoration:none;text-transform:uppercase;font-size:30px}
nav>ul>li>a:hover{color:#000!important}
nav ul li ul{display:none;padding:0;position:relative;float:none;width:auto;left:0}
nav ul li:hover>ul{display:block}
nav ul li ul li{list-style:none;margin:0;text-align:center;padding:0}
nav>ul>li>ul>li a{padding:0;width:100%;}
nav>ul li ul li ul{left:auto;top:auto}
nav>ul>li>a:after{content:none}
nav>[type="checkbox"],nav>label{display:none}

nav .mod-menu__toggle-sub{display:none}

nav .mod-menu__sub{display:none; position:absolute; bottom:0; left:0; transform:translateY(100%); width:100%; text-align:center}
nav>ul>li>a:hover .mod-menu__sub{display:block}
nav>ul>li>ul>li>a{background:var(--brown); width:100%; padding:10px 0; display:block; transition:0.5s}
nav>ul>li>ul>li>a:hover{background:#000; transition:0.5s}
nav>ul>li>ul li:last-child a{border-radius:0 0 15px 15px}

@media screen and (max-width:1300px){
	
	nav{z-index:1;background:var(--brown);position:fixed;top:0;right:0;padding:10px 0 0 0;height:100vh;width:auto;box-sizing:border-box;max-width:420px;}
	nav>ul{max-width:420px; height:auto; margin:50px 0 0 0; flex-direction:column; display:none}
	nav>ul>li{padding-top:15px}
	
	nav .mod-menu__sub{display:block; position:relative; bottom:auto; left:auto; transform:none}
	nav>ul>li>ul>li>a{padding:5px 0;}
	nav>ul>li>ul li:last-child a{border-radius:0}
	
	nav>label{display:block;width:30px;height:24px;cursor:pointer;position:absolute;top:50px;right:30px;z-index:2;background:linear-gradient(0deg,rgba(255,255,255,0) 37%,rgba(255,255,255,1) 37%,rgba(255,255,255,1) 63%,rgba(255,255,255,0) 63%)}
	nav>label:hover,
	nav>label:hover:before,
	nav>label:hover:after{width:40px;transition:0.3s}
	nav>label:before,nav>label:after{content:''; display:block; height:6px; background:#FFF; position:absolute; right:0; transition:0.3s}
	nav>label:before{top:-6px;width:20px}
	nav>label:after{bottom:-6px;width:40px}
	
	body.scrolled nav > label:before,body.scrolled nav > label:after {background-color: #000}
	body.scrolled nav > label{background:linear-gradient(0deg,rgba(0,0,0,0) 37%,rgba(0,0,0,1) 37%,rgba(0,0,0,1) 63%,rgba(0,0,0,0) 63%)}

	
	[type="checkbox"]:checked~.nav{display:block}	
	[type="checkbox"]:checked~label{height:40px;width:40px;top:0;background:none; transition:0.5s}
	[type="checkbox"]:checked~label:before,
	[type="checkbox"]:checked~label:after{width:40px;top:30px;background:#FFF;transform:rotate(45deg)}	
	[type="checkbox"]:checked~label:after{transform:rotate(-45deg)}
}


@media screen and (max-width:500px){
	nav>label{right:15px}
	[type="checkbox"]:checked~ul{width:100vw}
}
@media screen and (max-width:400px){
	nav>label{top:30px}
}