/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:fixed; z-index:9; top:0; left:0; width:100%; height:100px; background:var(--blue)}

.maskottchen{position:absolute; left:50%; top:20px; z-index:9; transform:translateX(-420px)}
.maskottchen img{width:400px; height:auto;}
.maskottchen p{margin:0}

@media only screen and (min-width:1920px){
	.maskottchen{left:auto; right:30px; top:auto; bottom:50px; transform:none}
}

@media only screen and (max-width:1000px){
	.maskottchen{left:50px; transform:none}
	.maskottchen img{width:300px}
}
@media only screen and (max-width:700px){
	.maskottchen{left:50%; transform:translateX(-50%); top:120px}
}
@media only screen and (max-width:400px){
	.maskottchen img{width:200px}
}

/* LOGO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.logo{height:100px; display:flex; align-items:center; margin:0 0 0 30px}
.logo p{margin:0}
.logo a{font-size:40px; color:#FFF}
.logo a:visited{color:#FFF}
.logo a:hover{color:var(--yellow)}

@media only screen and (min-width:1920px){
	.logo{position:absolute; left:calc(50% - (994px / 2)); top:0}
}
@media only screen and (max-width:1000px){
	.logo a{font-size:30px;}
}
@media only screen and (max-width:700px){
	.logo{height:70px; margin:0; width:100%}
	.logo p{text-align:center; width:100%}
}
	
/* NAV
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:absolute; right:30px; top:50%; transform:translateY(-50%)}
nav ul{display:flex; margin:0; padding:0; list-style-type: none;}
nav li{margin:0 15px; list-style-type: none; padding:0}
nav a{color:#FFF; position:relative}
nav a:visited{color:#FFF}
nav a:hover{color:var(--yellow)}
nav a:after{content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:0%; height:2px; background:var(--yellow); transition:0.3s}
nav a:hover:after{width:100%; transition:0.3s}

@media only screen and (min-width:1920px){
	nav{right:calc(50% - (994px / 2))}
}
@media only screen and (max-width:1000px){
	nav li{font-size:16px; margin:0 5px}
}
@media only screen and (max-width:700px){
	nav{top:auto; bottom:10px; right:auto; left:50%; transform:translateX(-50%)}
}
@media only screen and (max-width:400px){
	nav li:last-child{display:none}
}

/* SIDE_NAV
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.side_nav{position:fixed; z-index:9; top:50%; left:0; transform:translateY(-50%)}
.side_nav ul{margin:0; padding:0; list-style-type: none;}
.side_nav li{margin:0 0 15px 0; list-style-type: none; padding:0}
.side_nav a{width:60px; height:60px; overflow:hidden; border-radius:0 9px 9px 0; display:flex}
.side_nav img{width:30px; height:30px; margin:15px; filter:brightness(0)invert(1)}
.side_nav span{display:flex; align-items:center; justify-content:flex-start; background:var(--blue); height:60px}
.side_nav .icon{width:60px}
.side_nav .text{width:0; overflow:hidden}
.side_nav a:hover{width:300px; transition:0.3s}
.side_nav a:hover img{filter:none}
.side_nav a:hover span{background:var(--yellow); transition:0.3s}
.side_nav a:hover .text{width:auto; border-radius:0 9px 9px 0; color:var(--blue); padding:0 15px 0 0; box-sizing:border-box; }

@media only screen and (max-width:1200px){
	.side_nav{left:auto; right:0; top:130px; transform:none}
	.side_nav a{width:40px; height:40px; border-radius:9px 0 0 9px}
	.side_nav a:hover{width:40px}
	.side_nav img{width:20px; height:20px; margin:10px}
	.side_nav span{height:40px}
	.side_nav .icon{width:40px}
}
@media only screen and (max-width:1000px){
	.side_nav{top:130px; transform:none}
}

/* HERO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero{width:100%; height:calc(100vh - 100px); margin:100px 0 0 0; background-image: url("../images/content/background-1920x1280.jpg"); background-size:cover; background-position: center center; display:flex; flex-wrap:wrap; align-content:flex-end; padding:0 0 50px 0; box-sizing:border-box}

.h_impressum{height:calc(50vh - 100px); background-image: url("../images/content/background-1920x1280.jpg")}

.hero .slogan{margin:0; width:100%; text-align:center; font-size:100px; line-height:120px; font-family:"futura_bold"; color:#FFF; text-shadow:0 0 5px #777}
.hero .slogan span{display:block; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear;}
.hero .slogan span:first-child{animation-name:"line_1";}
.hero .slogan span:last-child{animation-name:"line_2";}

@keyframes line_1{
	0% {margin:0 100px 0 0}
	50% {margin:0 0 0 100px}
	100%{margin:0 100px 0 0}
}
@keyframes line_2{
	0% {margin:0 0 0 100px}
	50% {margin:0 100px 0 0}
	100%{margin:0 0 0 100px}
}

@media only screen and (max-width:1200px){
	.hero .slogan{font-size:80px; line-height:100px}
}
@media only screen and (max-width:1000px){
	.hero .slogan{font-size:60px; line-height:70px}
}
@media only screen and (max-width:700px){
	.hero .slogan{font-size:30px; line-height:40px}
}

.hero .btn{margin:100px 0 0 0; width:100%; text-align:center;}
.hero .btn .element{display:inline-block; height:80px; width:40px; border-radius:9px; border:solid 1px #FFF; box-sizing:border-box; position:relative}
.hero .btn .element:after{content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%); border-radius:50%; background:#FFF; width:20px; height:20px; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-name:"bullet"}
.hero .btn .element:hover{border:solid 1px var(--yellow)}
.hero .btn .element:hover:after{background:var(--yellow); animation-play-state: paused;}

@keyframes bullet{
	0% {margin:0 0 0 0}
	10%{margin:40px 0 0 0}
	10.001%{margin:0 0 0 0}
	100%{margin:0 0 0 0}
}

@media only screen and (max-width:700px){
	.hero{padding:0 0 100px 0}
	.hero .btn{margin:60px 0 0 0}
}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article{width:100%; max-width:var(--page); margin:100px auto; padding:0 15px; box-sizing:border-box; position:relative}
.anker{position:absolute; top:-140px}
.impressum h2{font-family:'futura_book'}
.impressum a{hyphens:auto;}

@media only screen and (max-width:1000px){
	article{margin:50px auto;}
}

/* SERVICE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.service{display:flex; flex-wrap:wrap; gap:30px; margin:0 0 80px 0}
.service p{width:calc(33.333% - 20px); position:relative}
.service span{display:block; width:100%}
.service .image{margin:30px; background:var(--yellow); padding:30px; box-sizing:border-box; width:calc(100% - 60px); position:relative; z-index:2}
.service .image img{width:100%; height:100%;}
.service .text{background:var(--blue); color:#FFF; width:100%; padding:45px 15px 25px 15px; box-sizing:border-box; border-radius:15px; position:absolute; bottom:60px; transform:translateY(100%); text-align:center}

@media only screen and (max-width:1000px){
	.service{gap:15px}
	.service p{width:calc(33.333% - 10px)}
	.service .text{font-size:16px; line-height:24px}
}
@media only screen and (max-width:700px){
	.service p{width:100%}
	.service .image{width:calc(50% - 60px); padding:15px; margin:30px auto}
	.service br{display:none}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{width:100%; position:relative; margin:100px 0}
.contact:after{content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:100px; background:var(--yellow); z-index:-1 }
.contact .content{width:100%; max-width:var(--page); margin:0 auto; display:flex; flex-wrap:wrap}
.contact .content > div{width:50%; height:420px}
.contact .content .text{display:flex; flex-wrap:wrap; align-content:center; justify-content:center}
.contact .content .text p{height:160px}
.contact .content .text p:first-child{font-size:40px; line-height:50px; color:var(--blue)}
.contact .content .text h2{height:100px;}
.contact .content .text>*{margin:0; display:flex; align-content:center; flex-wrap:wrap; text-align:center; gap:30px}
.contact .content .text a{display:inline-block}
.contact .content .text a img{width:50px; height:auto;}
.contact .content .image{background-image: url("../images/content/team.jpg"); background-size:cover; background-position: center center; border-radius:15px}

@media only screen and (max-width:1024px){
	.contact .content .image{border-radius:15px 0 0 15px}
}
@media only screen and (max-width:1000px){
	.contact .content .text h2{font-size:30px}
	.contact .content .text br{display:none}
	.contact .content .text>*{justify-content:center}
	.contact .content .text a img{width:30px; margin:0 5px 0 0}
	.contact .content .text a{display:flex; align-content:center}
}
@media only screen and (max-width:700px){
	.contact:after{display:none}
	.contact .content > div{width:100%}
	.contact .content > div:first-child{order:1}
	.contact .content > div:last-child{order:0; height:320px}
	.contact .content .text h2{background:var(--yellow); width:100%}
	.contact .content .image{border-radius:0}
}


/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen{width:100%; max-width:var(--page); margin:100px auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px; position:relative}
.kompetenzen h2{width:100%; margin:0}
.kompetenzen .text{width:calc(33.333% - 20px); background:var(--yellow); border-radius:15px}
.kompetenzen .text h3{background:var(--blue); margin:0; border-radius:15px 15px 0 0; padding:25px; color:#FFF; height:70px}
.kompetenzen .text ul{margin:0; padding:15px 15px 15px 40px}
.kompetenzen .text li{}

@media only screen and (max-width:1000px){
	.kompetenzen{gap:15px}
	.kompetenzen .text{width:calc(33.333% - 10px)}
	.kompetenzen .text h3{font-size:24px; line-height:30px; height:60px; padding:20px}
}
@media only screen and (max-width:700px){
	.kompetenzen{gap:30px}
	.kompetenzen .text{width:100%}
	.kompetenzen .text h3{height:auto}
}


/* HAUSHALTSGERÄT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.haushalt{width:100%; max-width:var(--page); margin:100px auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px; position:relative}
.haushalt h2{width:100%; margin:0}
.haushalt h3{font-size:30px; line-height:40px; color:var(--blue); margin:20px 0 10px 0}
.haushalt .content{width:calc(50% - 15px); position:relative}
.haushalt .content .calameo:after{content:""; position:absolute; top:100px; left:50%; transform:translateX(-50%); z-index:-1; width:100vw; height:100px; background:var(--yellow)}
.haushalt .calameo > div{text-align:center}

@media only screen and (max-width:700px){
	.haushalt .content{width:100%}
}

/* REFERENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.referenzen{width:100%; max-width:var(--page); margin:100px auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px; position:relative}
.referenzen h2{width:100%}
.referenzen .text{width:calc(50% - 15px)}
.referenzen .text h3{font-size:20px; line-height:30px; margin:0; font-family:"futura_bold"}
.referenzen .image{width:calc(50% - 15px); display:flex; flex-wrap:wrap; justify-content:space-between; align-content:flex-start; gap:20px;}
.referenzen .image p{margin:0; width:calc(50% - 15px)}
.referenzen .image img{width:100%; height:auto}

@media only screen and (max-width:1000px){
	.referenzen .text{width:calc(75% - 15px); order:1}
	.referenzen .image{width:calc(25% - 15px); order:0; gap:10px}
	.referenzen .image p{width:100%}
}
@media only screen and (max-width:700px){
	.referenzen .text{width:100%; order:0}
	.referenzen .image{width:100%; order:1; gap:15px}
	.referenzen .image p{width:calc(50% - 7.5px); line-height:0}
}

/* e-tec
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e-tec{width:100%; max-width:var(--page); margin:100px auto; position:relative}
.e-tec:after{content:""; position:absolute; top:240px; left:50%; transform:translateX(-50%); z-index:-1; width:100vw; height:100px; background:var(--yellow)}
.e-tec h2{padding:0 15px; box-sizing:border-box}
.e-tec iframe{width:100%; height:720px; border:none}

@media only screen and (max-width:500px){
	.e-tec h2 span{display:block}
}

/* LOCATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.location{width:100%; margin:100px 0 0 0; position:relative}
.location h2{width:100%; max-width:var(--page); margin:0 auto 20px auto; padding:0 15px; box-sizing:border-box}
.location .map{width:100%; height:600px; position:relative; overflow:hidden; background:var(--blue)}
.location .map iframe{position:absolute; top:-50%; left:-75%; width:200%; height:200%; border:none; filter:grayscale(1)}
.location .map:after{content:""; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:var(--blue); opacity:0.5; mix-blend-mode: multiply;}
.location .map .content > a{display:inline-block; position:absolute; top:calc(50% - 45px); left:25%; transform:translate(-50%); z-index:3; width:50px}
.location .map .content > a:after{content:""; position:absolute; top:9px; left:15px; width:20px; height:20px; background:#FFF; z-index:-1; border-radius:50%}
.location .map .content > a:before{content:"Google Maps"; position:absolute; bottom:-20px; left:50%; transform:translate(-50%); color:var(--yellow); width:140px; font-size:16px; line-height:20px; text-align:center; display:none}
.location .map .content > a img{width:100%; height:auto}
.location .map .content > a:hover img{filter:brightness(0) invert(1);}
.location .map .content > a:hover:after{background:var(--yellow)}
.location .map .content > a:hover:before{display:block}

.location .map address{position:absolute; z-index:4; right:calc(50% - (994px / 2)); top:170px; width:calc(994px / 3); height:370px; background:var(--yellow); font-style:normal; border-radius:15px; padding:110px 25px 25px 25px; box-sizing:border-box}
.location .map address h3{font-size:30px; line-height:40px; color:var(--blue); margin:0 0 10px 0}
.location .map address .lehrbetrieb{position:absolute; top:-110px; left:50%; transform:translate(-50%)}
.location .map address .lehrbetrieb img{width:200px; height:200px; border-radius:50%; padding:10px; background:#FFF}
.location .map address a{display:flex; align-content:center}
.location .map address a img{width:30px; height:30px; margin:0 10px 0 0}
.location .map address a:hover{color:#FFF}
.location .map address a:hover img{filter:brightness(0) invert(1)}

.location .zusatz{position:absolute; top:20px; left:0; z-index:3; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; animation-name:zusatz}

@keyframes zusatz{
	0% {left:100%}
	20%{left:-420px}
	20.001%{left:-420px}
	100%{left:-420px}
}

@media only screen and (max-width:1000px){
	.location .map address{right:15px}
}
@media only screen and (max-width:700px){
	.location .map{height:auto}
	.location .map .content{position:relative; height:420px; width:100%}
	.location .map iframe{left:-50%}
	.location .map .content > a{left:50%}
	.location .map address{right:auto; top:auto; width:100%; position:relative; border-radius:0;}
	.location .zusatz{animation-duration: 5s;}
}
@media only screen and (max-width:400px){
	.location .map address{padding:110px 15px 25px 15px}
}

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

@media only screen and (max-width:700px){
	footer .content p:last-child{position:relative; top:auto; right:auto; font-size:16px; margin:30px 0 0 0}
}



/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--blue: #36499b;--yellow: #ffc600;--font: #000;--page:1024px;}

@font-face {font-family: 'futura_bold'; src: url('../fonts/futura_bold.woff2') format('woff2'), url('../fonts/futura_bold.woff') format('woff'); font-weight: 700; font-style: normal;}
@font-face {font-family: 'futura_book'; src: url('../fonts/futura_book.woff2') format('woff2'), url('../fonts/futura_book.woff') format('woff'); font-weight: 300; font-style: normal;}

html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px;line-height: 30px; font-weight: 300; font-family: 'futura_book', sans-serif; color:var(--font); overflow-x:hidden}

h1,h2{color:var(--blue); font-size:40px; line-height:50px; margin:0 0 20px 0; font-family:'futura_bold'}
h3{font-size:30px; line-height:40px; margin:0 0 20px 0; font-family:'futura_bold'}
h1 span,h2 span{font-family:'futura_book'}
p {margin:0 0 20px 0}

a,a:visited {color: var(--blue); text-decoration: none;}
a:hover{color:var(--yellow)}
strong {font-weight: 700}

@media only screen and (max-width:700px){
	h1,h2{font-size:30px; line-height:40px}
	h3{font-size:24px; line-height:32px}
}