/* HEADER LOGO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header .logo{position:absolute; left:0; top:10%; width:33%; background:#FFF; padding:30px; box-sizing:border-box}
header .logo p{margin:0}
header .logo img{width:100%; height:auto;}

/* HEADER BTNS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header .btns{position:fixed; right:30px; top:0; z-index:3}
header .btns > div{width:180px; display:flex; justify-content:space-between}
header .btns a{display:block; width:50px; height:50px; background:var(--yellow); border-radius:0 0 9px 9px; padding:10px; box-sizing:border-box; text-align:center}
header .btns img{width:auto; height:100%; filter:brightness(0)}
header .btns strong{font-family: ubuntu-regular; position:absolute; top:60px; right:0; text-align:center; display:none; width:180px}
header .btns a:hover{background:var(--gray); color:#000}
header .btns a:hover img{filter:none}
header .btns a:hover strong{display:block}

/* HERO-TEASER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero_teaser{height:100vh; width:33%; background:var(--gray); padding:0 30px 60px 30px; box-sizing:border-box; display:flex; align-items:flex-end}
.hero_teaser p{color:#FFF;}
.hero_teaser strong{font-size:30px; line-height:40px; margin:0 0 30px 0; display:block; font-family: ubuntu-regular}

/* HERO-IMAGE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero_image > div{height:100vh; width:67%; position:absolute; top:0; right:0; background-size:cover;}
.hero_image p{display:none}

/* HERO-SMALL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero_small header .logo{}
.hero_small .hero_teaser,
.hero_small .hero_image > div{height:50vh;}
.hero_small .hero_teaser p{display:none}
.hero_small article h2{font-size:30px; line-height:40px; margin:40px 0 20px 0}

/* SCROLL DOWN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.scroll_down p{position:absolute; bottom:70px; left:66.66%; transform:translate(-50%)}
.scroll_down a{display:block; width:25px; height:80px; border-radius:9px; background:var(--yellow); color:transparent}
.scroll_down a:after{content:""; position:absolute; width:15px; height:15px; border-radius:50%; background:#000; left:50%; transform:translateX(-50%); animation: scrolldown 5s infinite linear;}

@keyframes scrolldown {
    0% {top: 5px}
    15% {top: 60px}
    100% {top: 60px}
}
.scroll_down a:hover{background:var(--gray); color:var(--gray)}
#content{position:absolute; top:-60px}
#location{position:absolute; top:-60px}
.scroll_down a:hover:after{background:var(--yellow)}

/* HERO RESPONSIVE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1000px) {
	header .logo,
	.hero_teaser,
	.hero_image > div{width:50%;}
	.scroll_down p{left:75%}
	.hero_image > div{background-position: 60% 50%}
}
@media (max-width: 700px) {
	header .logo{position:relative; top:auto; width:100%; margin:40px 0 0 0}
	header .btns{right:50%; transform:translateX(50%)}
	.hero_teaser{height:auto; width:100%; align-items:flex-start; padding:0 30px 15px 30px;}
	.hero_teaser strong{margin:30px 0;}
	.hero_image > div{position:relative; width:100%; height:300px}
	header .btns a:hover strong,
	.scroll_down{display:none}
    .hero_small .hero_teaser{display:none}
}

/* IN-ARTICLE Erstberatung
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.erstberatung > div{width:100%; display:flex; flex-wrap:wrap; justify-content:center}
.erstberatung h3{width:100%}
.erstberatung p{width:220px; display:flex}
.erstberatung a{width:100%; height:100%; justify-content:center; text-align:center; font-family: ubuntu-bold}
.erstberatung strong{display:inline-block; width:80px; height:80px; padding:25px; box-sizing:border-box; background:var(--yellow); border-radius:50%; margin-left:calc((100% - 80px) / 2); margin-right:calc((100% - 80px) / 2); margin-bottom:10px; margin-top:40px}
.erstberatung img{width:auto; height:100%; filter:brightness(0)}
.erstberatung a:hover strong{background:var(--gray)}
.erstberatung a:hover img{filter:none}

/* DIENSTLEISTUNGEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dienstleistungen > div > div{width:100%; max-width:var(--page); margin:auto; display:flex; flex-wrap:wrap; padding:60px 15px; box-sizing: border-box; gap:30px}
.dienstleistungen > div{background-size:cover;}
.dienstleistungen h2{width:100%;}
.dienstleistungen p{width:calc(33% - 20px)}
.dienstleistungen a{width:100%; min-height:150px; background:rgba(252, 233, 24, 1); padding:15px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; margin:0; text-align:center; border-radius:15px; mix-blend-mode: multiply; font-family: ubuntu-bold}
.dienstleistungen a:hover{background:var(--gray); color:var(--yellow); mix-blend-mode:normal}

@media (max-width: 700px) {
	.dienstleistungen p{width:100%; margin:0}
	.dienstleistungen a{min-height:auto;}
}

/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen{width:100%; max-width:var(--page); margin:auto; padding:0 15px; box-sizing:border-box;}
.kompetenzen > div > div{margin:60px 0; position:relative}
.kompetenzen h2{position:relative}
.kompetenzen h2:after{content:""; background:var(--yellow); border-radius:50%; width:80px; height:80px; position:absolute; top:-15px; left:-25px; mix-blend-mode: multiply;}

@media (max-width: 700px) {
	.kompetenzen h2:after{top:-25px; left:-35px}
}

/* ANCHOR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.anchor{position:absolute; top:-40px; left:0}
.anchor em{display:none}

/* ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.address{position:relative}
.address .map{width:100%; overflow:hidden; position:relative}
.address .map > h2{position:absolute; top:60px; left:50%; transform:translateX(-497px); z-index:2; color:#FFF}	
.address .map > p{position:absolute; top:50%; left:25%; transform:translate(-50%, -40px); z-index:2; color:#FFF; margin:0}
.address .map > p a{width:80px; height:80px; border-radius:50%; background:var(--yellow); display:flex; justify-content:center; align-items:center}
.address .map > p a img{width:30px; height:30px; filter:brightness(0)}
.address .map > p a:hover{background:var(--gray)}
.address .map > p a:hover img{filter:none}
.address iframe{width:300%; position:absolute; top:0; left:-125%; filter:grayscale(); height:100%}
.address .map:after{position:absolute; top:0; left:0; content:""; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.address .content_all{position:relative; z-index:2; width:100%; max-width:calc(var(--page) / 2); margin:60px 0 60px 50%;}
.address .content_all > p{margin:0}
.address .content_all > p > img{width:80%; margin:0 10%; height:auto}
.address .content{padding:30px; box-sizing:border-box; background:var(--lightgray); border-radius:15px;}
.address ul{margin:0 0 30px 0; box-sizing:border-box}
.address .content > p > img{position:absolute; top:0; left:50%; width:80%; height:auto;}
address{font-style:normal}
address a{display:flex; align-items:center;}
address img{width:auto; height:30px; margin:0 10px 0 0; filter:brightness(0)}
address a:hover{color:var(--yellow)}
address a:hover img{filter:none}

@media (max-width: 1024px) {
	.address .map > h2{left:15px; transform:none; margin:0 0 20px 15px}
	.address .content_all{max-width:50%}
	.address .content{border-radius:15px 0 0 15px}
}
@media (max-width: 700px) {
	.address .map > h2{position:relative; top:auto; left:auto; color:#000}
	.address .map > p{display:none}
	.address iframe{width:100%; position:relative; top:auto; left:auto; height:300px}
	.address .map:after{display:none}
	.address .content_all{max-width:none; margin:30px 0 0 0}
	.address .content{border-radius: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; align-items:center;}
.footer img{width:30px; height:auto; filter:brightness(0); margin:0 10px 0 0}
.footer p a:hover{color:var(--yellow)}
.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);  --gray: rgb(77,77,77); --lightgray:rgb(204,204,204); --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}

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

h2{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}

article{width:100%; max-width:var(--page); margin:60px auto; padding:0 15px; box-sizing:border-box; overflow:hidden; position:relative}

@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;}
}