/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:absolute; top:0; left:0; height:100px; width:100%; background:rgba(0,0,0,0.5); z-index:3}
header .logo{position:absolute; top:0; left:30px}
header .logo p{margin:0}
header .logo img{height:100px; width:auto;}
header .btns{position:absolute; top:0; left:140px}
header .btns div{position:relative; width:145px; height:100px; display:flex; justify-content:space-between; align-items:center}
header .btns p{margin:0}
header .btns a{display:block; width:30px; height:30px; color:var(--yellow)}
header .btns img{width:auto; height:30px; filter:brightness(0) invert(1)}
header .btns a span{position:absolute; left:calc(100% + 15px); top:50%; transform:translateY(-50%); width:200px; display:none}
header .btns a:hover span{display:block}
header .btns a:hover img{filter:none}

@media (max-width: 700px) {
	header .btns a:hover span{display:none}
}

/* HERO HOME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero_home{position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1}
.hero_home p{display:none}
.hero_home > div{width:100%; height:100%; background-size: cover}
.hero_home > div:after{content:""; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; top:0; left:0}

.hero_slogan{position:absolute; top:0; left:0; width:100%; height:100vh}
.hero_slogan .content{position:absolute; top:50%; left:0; width:100%}
.hero_slogan p{font-family:ubuntu-bold; font-size:80px; line-height:100px; color:#FFF; text-align:center; width:100%; margin:0; animation-duration:15s; animation-iteration-count: infinite; animation-timing-function: linear; box-sizing:border-box}
.hero_slogan p:nth-child(1){animation-name: hero_anim_1}
.hero_slogan p:nth-child(2){animation-name: hero_anim_2}

@keyframes hero_anim_1 {
	0% {padding-left:0}  
	25% {padding-left:100px}
	50% {padding-left:0; padding-right:0}
	75% {padding-right:100px}
	100% {padding-right:0}
}
@keyframes hero_anim_2 {
	0% {padding-right:0}  
	25% {padding-right:100px}
	50% {padding-right:0; padding-left:0}
	75% {padding-left:100px}
	100% {padding-left:0}
}

@media (max-width: 1000px) {
	.hero_home > div{background-position: right;}
}
@media (max-width: 700px) {
	.hero_home > div{background-position: 80% 50%;}
	.hero_slogan p{font-family:ubuntu-bold; font-size:30px; line-height:40px;} 
}

/* 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-CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_content{display:flex; justify-content:space-around; margin:40px 0}
.home_content p{width:200px; margin:0; text-align:center}
.home_content img{width:200px; height:200px; border-radius:50%; object-fit:cover; margin:0 0 10px 0}

@media (max-width: 700px) {
	.home_content p{width:100px;}
	.home_content img{width:100px; height:100px;}
}

/* HOME-CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news > div{display:flex; gap:30px; margin:0 0 60px 0}
.news > div > div{width:calc(50% - 15px); background:var(--lightgray); border-radius:15px; padding:15px;}
.news h3{margin:20px 0!important}
.news p{margin:0 0 15px 0}
.news a:hover{color:var(--red)}
.news > div > div p:last-child{margin:0}
.news .btn{padding:0; background:none; border-radius:0}
.news .btn:hover{background:none; color:var(--red)}


/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article{position:relative; width:100%; background:#FFF}
.home article{margin:100vh 0 0 0;}
.com-content-article{padding:calc(70vh + 80px) 15px 15px 15px; margin:0 auto; width:100%; max-width:var(--page); box-sizing:border-box}
.home .com-content-article {padding:80px 15px 15px 15px;}
.com-content-article figure{position:absolute; top:0; left:0; margin:0; width:100%; height:70vh;}
.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_100 img{object-position: 50% 100%;}

article .btn{display:inline-block; padding:10px 25px; background:var(--yellow); border-radius:9px;}
article .btn:hover{background:#000}

@media (max-width: 1000px) {
	.com-content-article{padding-top:calc(50vh + 40px)}
	.com-content-article figure{height:50vh;}
}
@media (max-width: 700px) {
	.home .com-content-article {padding-top:40px}
}

/* DIENSTLEISTUNGEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dienstleistungen,
.dienste_overview{width:100%; max-width:var(--page); margin:0 auto; padding:40px 15px 0 15px; box-sizing:border-box}
.dienste_overview{padding:0 0 30px 0}
.dienstleistungen > div > div{display:flex; flex-wrap:wrap; gap:30px; margin:0 0 60px 0; position:relative}
.dienstleistungen > div > div > *{width:calc(50% - 15px);}
.dienstleistungen > div *:nth-child(even) .content{order:0}
.dienstleistungen > div *:nth-child(even) figure{order:1}
.dienstleistungen figure{margin:0; height:auto}
.dienstleistungen figure img{width:100%; border-radius:15px; object-fit:cover}

.dienste_overview > div{width:100%; display:flex; flex-wrap:wrap}
.dienste_overview p{margin:15px}

@media (max-width: 1000px) {
	.dienstleistungen h2{hyphens:auto}
}
@media (max-width: 700px) {
	.dienstleistungen > div > div > *{width:100%}
	.dienstleistungen > div *:nth-child(even) .content{order:1}
	.dienstleistungen > div *:nth-child(even) figure{order:0}
	.dienstleistungen figure{height:240px}
	.dienstleistungen figure img{height:100%}
}

/* KONTAKTFORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.visforms{width:100%; max-width:var(--page); margin:0 auto; padding:0 15px; box-sizing:border-box}
.visforms fieldset{padding:0; border:none}
.visforms fieldset .row > label{width:150px; float:left;}
.visforms fieldset .row > div{margin:0 0 15px 0}
.visforms .row{clear:both}
.visforms .form-group > div{display:flex;}
.visforms .form-group > div > div{margin:0 15px 0 0}
.visforms .form-group > div > input,
.visforms .form-group > div > textarea{width:calc(100% - 30px)}
.visforms .form-group > div > div > input{margin:0 5px 0 0}
.visforms fieldset .row a{text-decoration: underline}
.visforms .captcharefresh1{width:30px; height:30px}
.visforms .btn-primary{width:auto!important}

@media (max-width: 700px) {
	.visforms fieldset .row > label{width:calc(100% - 30px);float:none}
	
}

/* REFERENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.referenzen{width:100%; max-width:var(--page); margin:0 auto; padding:20px 15px 0 15px; box-sizing:border-box}
.referenzen .content{display:flex; gap:30px; flex-wrap:wrap}
.referenzen .content p{margin:0; width:calc(33.333% - 20px); background:var(--lightgray); border-radius:15px; padding:30px 30px 20px 30px; box-sizing:border-box; text-align:center}
.referenzen .content p img{width:60%; height:auto; margin:0 20% 10px 20%}

@media (max-width: 700px) {
	.referenzen .content{gap:15px}
	.referenzen .content p{width:calc(50% - 7.5px)}
}

/* EINZUGSGEBIET
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.einzugsgebiet{width:100%; max-width:var(--page); margin:0 auto; padding:60px 15px 0 15px; box-sizing:border-box}
.einzugsgebiet .map{width:100%; height:auto; aspect-ratio: 2 / 1; position:relative; margin:40px 0 0 0}
.einzugsgebiet .map p{position:absolute; text-align:center; padding:55px 0 0 0}
.einzugsgebiet .map p:after{content:""; width:50px; height:50px; border-radius:50%; background:var(--lightgray); position:absolute; top:0; left:50%; transform:translateX(-50%)}
.einzugsgebiet #berg{left:20%; top:0%}
.einzugsgebiet #buerglen{left:13%; top:36%}
.einzugsgebiet #sulgen{left:26%; top:46%}
.einzugsgebiet #erlen{left:45%; top:36%}
.einzugsgebiet #amriswil{left:77%; top:42%}
.einzugsgebiet #kradolf{left:33%; top:70%}

@media (max-width: 700px) {
	.einzugsgebiet .map p{padding:20px 0 0 0; font-size:16px}
	.einzugsgebiet .map p:after{width:20px; height:20px}
}

/* ELEKTROLEHRE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.elektrolehre{width:100%; max-width:var(--page); margin:0 auto; padding:0 15px 100px 15px; box-sizing:border-box}
.elektrolehre > div{display:flex; flex-wrap:wrap; gap:30px}
.elektrolehre .content{width:calc(50% - 15px); display:flex; flex-wrap:wrap; gap:15px;}
.elektrolehre .content p{width:calc(50% - 7.5px); padding:20px 0; border-radius:15px; background:var(--lightgray); text-align:center; margin:0}
.elektrolehre .content iframe{width:100%; height:auto; aspect-ratio: 16 / 9; margin:0 0 15px 0; border:none; border-radius:15px}
.elektrolehre .content strong{font-size: 30px; line-height:40px; display:block}

@media (max-width: 700px) {
	.elektrolehre .content{width:100%}
	.elektrolehre .content p{font-size:16px}
	.elektrolehre .content strong{font-size: 20px; line-height:30px;}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{background:#FFF; padding:65px 0 80px 0}
.contact > div{display:flex; flex-wrap:wrap; width:100%; max-width:var(--page); margin:0 auto; background:var(--lightgray); border-radius:30px; height:300px; overflow:hidden}
.contact .txt{width:50%; height:100%;}
.contact .txt{padding:15px; box-sizing:border-box; text-align:center; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:20px}
.contact .txt h2,
.contact .txt p{margin:0}
.contact .txt a{display:flex; padding:10px; background:var(--yellow); border-radius:9px;}
.contact .txt a:hover{background:#000; color:var(--yellow)}
.contact .txt img{filter:brightness(0); width:30px; height:30px)}
.contact .txt a:hover img{filter:none}

.contact .img{width:50%; height:100%;}
.contact .img p{margin:0}
.contact .img img{width:100%; height:100%; object-fit:cover}

@media (max-width: 1000px) {
	.contact > div{border-radius:0}
	.contact .txt{width:66%}
	.contact .img{width:34%}
}
@media (max-width: 700px) {
	.contact > div{height:auto}
	.contact .txt{width:100%; height:auto}
	.contact .img{width:100%; height:240px}
	.contact .txt{order:1}
	.contact .img{order:0}
}

/* LOCATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.location{background:#FFF; position:relative}
.location > div{width:100%; height:auto;}
.location h2{width:100%; max-width:var(--page); margin:0 auto 40px auto; padding:0 15px; box-sizing:border-box}
.location .content{position:relative; height:auto; width:100%; overflow:hidden}
.location iframe{position:absolute; top:-50%; left:-75%; width:200%; height:200%}
.location .content:after{content:""; background:rgba(0,0,0,0.3); width:100%; height:100%; position:absolute; top:0; left:0}
.location .address{position:relative; z-index:2; margin:60px 0 60px 50%; background:var(--lightgray); width:calc(var(--page) / 2); border-radius:15px; overflow:hidden}
.location .address > p{width:100%; height:300px; position:relative; margin:0}
.location .address > p img{width:100%; height:100%; object-fit:cover}
.location .address > p a{display:flex; align-items:flex-end; justify-content:center; position:absolute; bottom:30px; left:30px; width:140px; text-align:center; background:#000; color:#FFF!important; height:110px; padding:0 0 15px 0; border-radius:0 0 15px 15px}
.location .address > p a:hover{background:var(--yellow); color:#000!important}
.location .address > p a img{width:140px; height:140px; position:absolute; top:-70px; left:0}
.location address{padding:30px; box-sizing:border-box; font-style:normal}
.location address p:last-child{margin:0}
.location address p a{display:flex;}
.location address p a img{width:30px; height:30px; filter:brightness(0); margin:0 10px 0 0}
.location address p a:hover img{filter:none}

@media (max-width: 1000px) {
	.location .address{width:50%; border-radius:15px 0 0 15px;}
}
@media (max-width: 700px) {
	.location iframe{position:absolute; top:-150px; left:-50%; width:200%; height:600px; display:none}
	.location .address{width:100%; border-radius:0; margin:0}
	.location .address > p a{left:15px}
	.location address{padding:15px 15px 45px 15px}
}

/* E-TEC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e_tec{background:#FFF; padding:0 0 80px 0}
.e_tec h2{padding:0 15px; box-sizing:border-box}
.e_tec > div{width:100%; max-width:var(--page); margin:0 auto}
.e_tec iframe{width:100%; height:740px; border:0}


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

@media (max-width: 1000px) {
	.footer div{padding:30px 15px 90px 15px;}
}

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


/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--yellow:rgb(252, 233, 24); --red:rgb(226, 6, 19); --gray: rgb(77,77,77); --lightgray:rgb(237,237,237); --trans:rgba(0,0,0,0); --page:1024px}

@font-face {font-family: 'ubuntu-regular'; src: url('../fonts/Ubuntu-Regular.woff') format('woff'), url('../fonts/Ubuntu-Regular.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-regular, sans-serif; color: var(--darkgrey); overflow-x:hidden}
a, a:visited{color:#000; text-decoration: none; }
a:hover{color:var(--yellow)}
strong {font-family: ubuntu-bold; font-weight:normal}
p {margin:0 0 20px 0}
img{-webkit-user-drag:none; user-drag:none}

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

h1,h2,h3{font-family: ubuntu-bold; font-weight:normal; color:var(--darkgrey); margin: 0 0 20px 0}
h1{font-size:40px; line-height:50px}
h2{font-size:40px; line-height:50px}
h3{font-size:26px; line-height:26px; margin:40px 0 20px 0}

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

.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:fixed;top:0;right:0;z-index:33;width:100%;max-width:420px;transform:translateX(0)}
nav>ul{margin:0;padding:0;line-height:24px;float:left;width:100%; max-width:420px}
nav>ul>li{list-style:none;text-align:center;float:none;padding-top:15px}
nav>ul>li>a{display:block;padding:5px 0;margin:10px 0;text-decoration:none;text-transform:uppercase;font-size:30px;color:#000}
nav>ul>li>a:visited{color:#000}
nav>ul>li>a:hover{color:#FFF}
nav a:hover,nav>ul>li>ul>li a:hover{color:#FFF}
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:10px 0;text-align:center;padding:0}
nav>ul>li>ul>li a{padding:0;width:100%;font-weight:bold;color:var(--gray)}
nav>ul li ul li ul{left:auto;top:auto}
nav>ul>li>a:after{content:none}
.nav{z-index:1;background:var(--yellow);position:fixed;top:0;right:0;padding:10px 0 0 0;height:100vh;width:100%;box-sizing:border-box;display:none}
nav>[type="checkbox"],nav>label{display:none}

@media screen and (min-width:0px){
	nav{left:auto;transform:none;width:auto}
	nav>label{display:block;width:30px;height:24px;cursor:pointer;position:absolute;top:35px;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}
	nav>label.scrolled:before,
	nav>label.scrolled:after{background:#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%)}
	body.scrolled nav>label:before,
	body.scrolled nav>label:after{background:#000}
	
	[type="checkbox"]:checked~.nav{display:block}	
	[type="checkbox"]:checked~label{height:40px;width:40px;top:26px;background:none}
	[type="checkbox"]:checked~label:before,
	[type="checkbox"]:checked~label:after{width:40px;top:15px;background:#000;transform:rotate(45deg)}	
	[type="checkbox"]:checked~label:after{transform:rotate(-45deg)}}