/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{width:100%; position: relative; z-index:2}
header .logo{position:absolute; top:0; left:50%; transform:translateX(-50%); min-width:320px}
header .logo p{margin:0}
header .logo a{display:flex; align-content: center; justify-content: center; background:#FFF; border-radius:0 0 15px 15px; padding:10px 20px; cursor: pointer}
header .logo a:hover{box-shadow: 0px 0px 10px 5px var(--gray); transition:0.5s}
header .logo img{width:100%; max-width:264px; height:auto;}
header .logo a span{position:absolute; bottom:0; left:50%; transform:translate(-50%,100%); background:#FFF; padding:0 15px 5px 15px; border-radius:0 0 9px 9px; color:#000; display:none; justify-content:center; align-items:flex-start}
header .logo a:hover span{background: var(--gray); color:#000; transition:0.5s}
header .contact_btns{position:absolute; top:0; right:30px; display:flex; width:170px; display:flex; flex-wrap: wrap; justify-content: space-between}
header .contact_btns p{margin:0}
header .contact_btns a{display:block; padding:10px; width:50px; height:50px; box-sizing: border-box; background: var(--orange); border-radius:0 0 9px 9px; transition:0.5s}
header .contact_btns img{width:auto; height:30px; filter:brightness(0)invert(1)}
header .contact_btns a:hover{background:var(--gray); transition:0.5s}
header .contact_btns a span{display:none; position:absolute; bottom:-10px; left:0; transform:translateY(100%); width:100%; height:40px; align-items:center; justify-content:center; background:var(--gray); color:#FFF; font-size:16px; border-radius:9px; }
header .contact_btns p:nth-child(2) a span{font-size:12px}
header .contact_btns a:hover span{display:flex}

@media only screen and (max-width:1000px){
	header .contact_btns{right:15px}
}

@media only screen and (max-width:720px){
    header .logo{top:60px}
    header .contact_btns{top:0; left:50%; right:auto; transform: translateX(-50%); width:150px}
    header .contact_btns a{width:40px; height:40px}
    header .contact_btns img{height:20px}
}

/* HERO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero_image{width:100%; height:50vh}
.hero_image p{margin:0}
.hero_image img{width:100%; height: 50vh; object-fit: cover}

.hero{width:100%; height:100vh; position:relative; overflow:hidden}
.hero .bg_image{position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-2}
.hero .bg_image p{margin:0}
.hero .bg_image img{width:100%; height:100vh; object-fit: cover}
.hero .content{position:absolute; top:calc(50% - 100px); left:50%; transform:translate(-50%);  width:100%; max-width:800px}
.hero .content > p{text-align:center; font-size: 80px; line-height: 100px; color:#FFF; font-family:"ubuntobold"; text-shadow: #000 0 0 5px; margin:0}

.hero .content > p{animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction:alternate}
.hero .content > p:nth-child(1){animation-name: move_1}
.hero .content > p:nth-child(2){animation-name: move_2}

@keyframes move_1 {
    0%   {transform:translateX(-25%)}
    100% {transform:translateX(25%)}
}
@keyframes move_2 {
    0%   {transform:translateX(25%)}
    100% {transform:translateX(-25%)}
}

@media only screen and (max-width:1000px){
	.hero .content{top:50%}
    .hero .content > p{font-size: 60px; line-height: 80px}
    
    @keyframes move_1 {
    0%   {transform:translateX(-10%)}
    100% {transform:translateX(10%)}
    }
    @keyframes move_2 {
    0%   {transform:translateX(10%)}
    100% {transform:translateX(-10%)}
    }
}

@media only screen and (max-width:700px){
	.hero .content > p{font-size: 40px; line-height: 50px}
}


.hero .content .jumper{position:absolute; left:50%; bottom:-150px; transform:translate(-50%)}
.hero .content .jumper p{margin:0}
.hero .content .jumper p a{width:40px; height:80px; border-radius:15px; background:var(--orange); display:block; transition:0.5s}
.hero .content .jumper p a:hover{background:var(--gray); transition:0.5s}
.hero .content .jumper p a span{color:#FFF; transform:rotate(90deg); position:absolute; left:9px}
.hero .content .jumper p a span{animation-name:jumper; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear;}

@keyframes jumper {
    0%   {top:0}
    90%  {opacity:1}
    100% {top:50px; opacity: 0}
}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article .page{width:100%; max-width: var(--page); margin:auto; padding:0 15px; box-sizing: border-box; position:relative; z-index:2}
.bg_white{background:#FFF; position:relative; z-index:0; overflow:hidden}
.bg_orange{position:relative; width:100%;}
.bg_orange h1{color:#FFF}
.bg_orange:after{content:""; position:absolute; z-index:-1; top:0; left:50%; transform:translateX(-50%); width:100%; height:340px; background:var(--orange)}

/* MENU
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu{width:100%; max-width: var(--page); margin:auto; padding:60px 15px 80px 15px; box-sizing: border-box; display:flex; flex-wrap:wrap}
.menu .content{width:50%}
.menu .content:nth-child(1) p{margin:0; padding:0 30px 0 0;}
.menu .content:nth-child(1) p img{width:100%; height:300px; object-fit: cover; border-radius:15px}
.menu .content:nth-child(2) p{width:50%; font-size:40px; line-height:0; font-family: "ubuntobold"; margin:0; float:left}
.menu .content:nth-child(2) p a{height:150px; width:100%; display:flex; justify-content: center; align-items: center; box-sizing: border-box; color:var(--orange); border:1px dashed var(--orange); transition: 0.5s; position:relative}
.menu .content:nth-child(2) p a:after{content:""; position:absolute; z-index:2; width:30px; height:30px; background:#FFF}
.menu .content:nth-child(2) p:nth-child(1) a{border-left:none; border-right:none; border-bottom:none}
.menu .content:nth-child(2) p:nth-child(2) a{border-right:none; border-bottom:none}
.menu .content:nth-child(2) p:nth-child(3) a{border-left:none; border-right:none;}
.menu .content:nth-child(2) p:nth-child(4) a{border-right:none;}
.menu .content:nth-child(2) p:nth-child(odd) a:after{top:-15px; right:-15px; }
.menu .content:nth-child(2) p:nth-child(even) a:after{bottom:-15px; left:-15px; }
.menu .content:nth-child(2) p a:hover{color:var(--gray); transition: 0.5s}

.menu .content p a{display:flex; width:50%;}

@media only screen and (max-width:1000px){
    .menu .content:nth-child(2) p{font-size:30px}
}
@media only screen and (max-width:700px){
    .menu{padding:20px 15px 80px 15px;}
    .menu .content{width:100%}
    .menu .content:nth-child(1) p{padding:0 0 30px 0}
    .menu .content:nth-child(1) p img{height:200px}
    .menu .content:nth-child(2) p a{height:100px}
}


/* Service
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.service{width:100%; display:flex; flex-wrap:wrap; gap:30px; margin:0 0 60px 0}
.service .content{width:calc(33.333% - 20px)}
.service .content img{width:100%; height: auto; aspect-ratio:1/1; object-fit: cover; border-radius:15px}
.service h2{margin:0 0 10px 0}

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

/* Produkte
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.produkte{width:100%; position:relative; margin:100px 0 140px 0}
.produkte h3{margin:25px 0 10px}
.produkte:after{content:""; position:absolute; top:0; left:50%; width:100%; height:240px; background: var(--gray); transform:translateX(-50%)}
.produkte > div{display:flex; flex-wrap:wrap; gap:30px}
.produkte .calameo{width:calc(66.666% - 40px); position: relative}
.produkte .content{width:calc(33.333% - 20px); padding: 0}
.produkte .content h3, .produkte .content p{color:#FFF}
.calameo iframe{position:absolute; height:380px; width:100%; top:-65px}

@media only screen and (max-width:1000px){
    .produkte{margin:60px 0}
    .produkte:after{display:none}
    .produkte > div{gap:0}
    .produkte .content h3, .produkte .content p{color:#000}
    .produkte .calameo,
    .produkte .content{width:100%}
    .produkte .calameo{background:var(--gray); padding:30px 0 10px 0}
    .calameo iframe{position: relative; top:auto;}
}
@media only screen and (max-width:700px){
    .produkte{margin:30px 0}
    .produkte .calameo{padding:20px 0 0 0}
    .calameo iframe{height: 200px}
}

/* FIRMA
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.firma .image img{width:100%; height:310px; object-fit: cover; border-radius:15px}
.toggle summary {list-style: none; cursor: pointer; display: flex; align-items: center; margin:0 0 20px 0}
.toggle summary::-webkit-details-marker {display: none;}
.toggle summary::before {content: "▶"; display: inline-block;margin-right: 0.5em; transition: transform 0.2s ease;}
.toggle[open] summary::before {transform: rotate(90deg)}

.partner{background:var(--gray); margin:60px 0 30px 0}
.partner .content{width:100%; max-width:var(--page); margin:auto; background:#FFF; display:flex; flex-wrap:wrap; gap:30px; padding:0 30px}
.partner .content p{width:calc(20% - 24px); margin:0}
.partner .content p a{width:100%; height:auto; background:var(--gray); display:block; line-height: 0; transition:0.5s}
.partner .content p img{width:100%; height:auto; filter:brightness(0) invert(1)}
.partner .content p a:hover{background:var(--orange); transition:0.5s}

.marken{width:100%; max-width:var(--page); margin:auto; background:#FFF; padding:0 15px; box-sizing:border-box}

@media only screen and (max-width:1000px){
    .partner .content{box-sizing: border-box; padding:0 15px; gap:15px;}
    .partner .content p{width:calc(20% - 12px)}
}
@media only screen and (max-width:700px){
    .partner .content p{width:calc(33% - 10px)}
}

/* KONTAKT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#kontakt{margin:80px 0 0 0}
#kontakt .content{display:flex; flex-wrap: wrap; position:relative}
#kontakt .text{width:50%}
#kontakt address{font-style:normal}
#kontakt address h2{margin:0 0 30px 0}
#kontakt address a{display:flex; align-items: center}
#kontakt address p:nth-child(3) a:first-child{float:left}
#kontakt address p:nth-child(3) a:first-child:after{content:"|"; margin:0 10px}
#kontakt address img{width:30px; height: 30px; filter:brightness(0); margin:0 10px 0 0}
#kontakt address a:hover img{filter:none}
#kontakt .map{width:50%; height:440px; position: relative}
#kontakt .map .frame{position:absolute; top:0; left:0; width:50vw; height:100%; overflow:hidden; background:var(--gray); border-radius:15px 0 0 15px}
#kontakt .map iframe{width:150%; height:150%; position: absolute; top:-25%; left:-25%}

@media only screen and (max-width:700px){
    #kontakt{margin:0}
    #kontakt .text,
    #kontakt .map,
    #kontakt .map .frame{width:100%; border-radius:15px}
}
    
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{background:var(--orange); margin:80px 0 0 0;}
footer > div{width:100%; max-width:var(--page); margin:auto; padding:45px 15px 25px 15px; box-sizing: border-box; display: flex; flex-wrap:wrap; justify-content: space-between}
footer p:first-child a:first-child{float:left; margin:0 30px 0 0}
footer p:last-child{font-size:16px}
footer a{color:#FFF; display:flex; align-items:center}
footer a:visited{color:#FFF}
footer a:hover{color:#000}
footer a img{filter:brightness(0)invert(1); margin:0 10px 0 0}
footer a:hover img{filter:brightness(0)}

@media only screen and (max-width:700px){
    footer{margin:15px 0 0 0}
    footer > div{padding:45px 15px 0 15px}
    footer a{margin:0 0 20px 0}
    footer p:first-child a:first-child{float:none; margin:0 0 20px 0}
}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--orange: #ef7d00; --font: #000; --gray: #555d66; --page:1024px;}

@font-face {font-family: 'ubuntobold'; src: url('../fonts/Ubuntu-Bold.woff2') format('woff2'), url('../fonts/Ubuntu-Bold.woff') format('woff'); font-weight: 700; font-style: normal;}
@font-face {font-family: 'ubuntoregular'; src: url('../fonts/Ubuntu-Regular.woff2') format('woff2'), url('../fonts/Ubuntu-Regular.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: 'ubuntoregular', sans-serif; color:var(--font)}


h1{font-size:80px; line-height:100px; color:var(--orange); margin:0 0 40px 0; font-family:"ubuntobold"; padding:50px 0 0 0}
h2{font-size:30px; line-height:40px; color:#000; margin:0 0 20px 0; font-family:"ubuntobold"}
h3{font-size:20px; line-height:30px; color:#000; margin:0 0 10px 0; font-family:"ubuntobold"}

a,a:visited {color: var(--font); text-decoration: none;}
a:hover{color:var(--orange)}
strong {font-weight: 700}
p {margin:0 0 20px 0}


@media only screen and (max-width:1000px){
    h1{font-size:60px; line-height:80px; margin:0 0 20px 0}
}
@media only screen and (max-width:700px){
    h1{font-size:36px; line-height:44px}
	.ahyphens a{hyphens:auto}
}

/* BANNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#banner-overlay {position: fixed; bottom:30px; right:30px; display: none; z-index: 9999}
#banner-overlay .cookiemonster{position:absolute; top:0; left:50%; transform:translate(-50%,-70%); z-index:2}
#banner-overlay .cookiemonster img{width:100%; height:auto}

#banner-box {position:relative; background: var(--orange); padding: 30px 0 20px 0; width: 260px; box-sizing: border-box; border-radius: 15px; text-align: center; overflow:hidden; border:solid 2px #FFF}
#banner-box .shine{position:absolute; top:-20px; left:0; width:20%; height:320px; background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0)); transform:rotate(15deg)}
#banner-box .shine{animation-name:shine; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction:}
@keyframes shine {
    0%  {left:-100%}
    85% {left:-100%}
    100%{left:100%}
}

#banner-box p{color:#FFF; margin:0 0 5px 0; font-size:16px; line-height:24px}
#banner-box p:nth-child(2){font-weight: bold; font-size:20px}
#banner-box a{color:#FFF; text-decoration: none; position:relative}
#banner-box a:after{content:""; width:0px; height:1px; display:block; background:#FFF; position:absolute; bottom:-5px; left:20px; transition:0.5s}
#banner-box a:hover:after{ width:calc(100% - 20px); transition:0.5s}

#banner-close {margin-top: 10px; padding: 8px 18px; border: none; background: var(--gray); color: #fff;  cursor: pointer; border-radius: 9px; font-size:16px;}
#banner-close:hover{scale:0.95; transition:0.5s}
#banner-close span{display:inline-block; transition:0.5s}
#banner-close:hover span{transform:rotate(45deg); transition:0.5s}

@media only screen and (max-width:700px){
	#banner-overlay{right:auto; left:50%; transform:translateX(-50%)}
}