/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:absolute; z-index:2; width:100%}
header > .logo{position:absolute; top:15px; left:15px; padding:15px; box-sizing:border-box; background:#FFF; border-radius:15px}
header > .logo p{margin:0; line-height: 0}
header > .logo img{width:calc(420px * 0.75); height:auto}
header > .contact_btns{position:absolute; top:15px; right:15px; display:flex; gap:15px}
header > .contact_btns a{display:block; width:40px; height:40px; padding:7px; box-sizing: border-box; background: #FFF; border-radius: 50%;}
header > .contact_btns img{width:100%; height:auto; filter:brightness(0)}
header > .contact_btns a:hover{background: #000;}
header > .contact_btns a:hover img{filter:brightness(1)}

@media only screen and (max-width:560px){
    header > .logo{position:relative; width:calc(100% - 30px); left:auto; top:auto; margin:15px;}
    header > .logo img{width:100%}
    header > .contact_btns{position:relative; right:auto; top:auto; margin:15px; justify-content: flex-end}
}

/* INTRO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro{}
.intro p{position:absolute; top:60%; left:0; font-size:60px; line-height:70px; width:100%; text-align: center; font-weight: 700; text-shadow:3px 3px 9px #FFF, -3px -3px 9px #FFF}
.intro img{position:absolute; bottom:-100px; left:50%; transform: rotate(-30deg) translate(-50%); width:100px; height:auto; filter:brightness(0) drop-shadow(3px 3px 9px #FFF)}
.intro a:hover img{transform: rotate(0) translate(-50%); bottom:-140px; filter:brightness(1) drop-shadow(3px 3px 9px #FFF)}

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

/* SLIDES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slides{width:100%; height:100vh; position:relative}
.slides > .img_1{background: url("../images/slide_01-1920x1280.jpg") center center; animation-name: slide_1;}
.slides > .img_2{background: url("../images/slide_02-1920x1280.jpg") center center; animation-name: slide_2;}
.slides > .img_3{background: url("../images/slide_03-1920x1280.jpg") center center; animation-name: slide_3;}
.slides > .img_4{background: url("../images/slide_04-1920x1280.jpg") center center; animation-name: slide_4;}

@media only screen and (max-width:700px){
    .slides > .img_1{background: url("../images/slide_01-1920x1280.jpg") 25% center}
    .slides > .img_2{background: url("../images/slide_02-1920x1280.jpg") 60% center}
    .slides > .img_3{background: url("../images/slide_03-1920x1280.jpg") 40% center}
    .slides > .img_4{background: url("../images/slide_04-1920x1280.jpg") 25% center}
}


.slides > .slide{position:absolute; top:0; left:0; width:100%; height:100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}
.slides > .anim{animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; animation-timing-function:ease-out}

@keyframes slide_1 { 0%{opacity:1} 25%{opacity:1} 26%{opacity:0} 89%{opacity:0} 95%{opacity:1} 100%{opacity:1} }
@keyframes slide_2 { 0%{opacity:0} 20%{opacity:0} 25%{opacity:1} 50%{opacity:1} 51%{opacity:0} 100%{opacity:0} }
@keyframes slide_3 { 0%{opacity:0} 45%{opacity:0} 50%{opacity:1} 75%{opacity:1} 76%{opacity:0} 100%{opacity:0} }
@keyframes slide_4 { 0%{opacity:0} 70%{opacity:0} 75%{opacity:1} 95%{opacity:1} 100%{opacity:0} }


/* SITE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header_image{width:100%; height:50vh; background: url("../images/header-image-1920x1280.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}

.site > .bg_image{position:relative; width:50%; height:100vh; background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);}
.site > .bg_image:after{position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; content:""; background: url("../images/content-1920x1280.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}

.site .zitat{position:absolute; z-index:2; bottom:0; left:0; width:90%; text-align: center; padding:30px; box-sizing: border-box; color:#FFF; margin:0; font-weight: 700; }

.site > article{width:calc(50% + 35px); padding:40px 30px 30px 50px; box-sizing: border-box; position:absolute; left:calc(50% - 35px); top:50%; transform:translateY(-50%); background:#FFF; border-radius:15px}
article{padding:60px 15px 15px 15px; width:100%; max-width:1024px; margin:auto; box-sizing:border-box; }

.site > .btn_offer{position:absolute; bottom:30px; left:75%; transform:translateX(-50%); margin:0}
.site > .btn_offer img{position: absolute; right:-60px; top:-15px; transform:rotate(-15deg); filter:brightness(0); width:50px; height:50px}
.site > .btn_offer a:hover img{top:0px; transform:rotate(5deg); filter:brightness(1)}

@media only screen and (max-width:800px){
    .site > article{padding:25px 15px 15px 35px;}
}
@media only screen and (max-width:700px){
    article{padding:200px 15px 15px 15px;}
    .site > .bg_image{width:100%; height:400px;}
    .site > article{position:relative; left:auto; top:auto; transform:none; padding:15px; width:100%}
    .site > .btn_offer{display:none}
    .site .zitat{padding:15px}
}

/* OFFER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.offer{display:flex; flex-wrap:wrap}
.offer > .content{width:50%; height:50%; display:flex; align-items: center; justify-content: center}
.offer > .content:nth-child(2),.offer > .content:nth-child(3){background:#000}
.offer > .content > iframe{border:none;width:100%;height:100%}
.offer > .content > .btn_contact a{position:relative}
.offer > .content > .btn_contact img{filter:brightness(0); position:absolute; right:-60px; top:-25px; width:50px; height:auto; transform:rotate(-15deg)}
.offer > .content > .btn_contact a:hover img{filter:brightness(1); transform:rotate(5deg); top:-10px}

@media only screen and (max-width:700px){
    .offer > .content{width:100%; height: auto; display:block; padding:15px; box-sizing: border-box}
    .offer > .content > iframe{height:320px}
    .offer > .content:nth-child(2),.offer > .content:nth-child(3){background:none}
    .offer > .content:nth-child(4){display:none}
}

/* LOCATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.location{height:calc(100vh - 100px)!important; margin:0!important}
.location > .map{width:100%; height:100%; overflow:hidden; position:relative}
.location > .map iframe{width:150%; height:calc(100% + 200px); border:none; left:0; top:-100px; position: absolute}
.location > address{position:absolute; top:0; left:0; width:50%; height:100%; background:rgba(255,255,255,0.75); font-style:normal; padding:0 30px 15px 0; box-sizing: border-box; display:flex; align-content: flex-end; flex-wrap: wrap}
.location > address h2,.location > address p{width:100%; text-align: right}
.location > .logo{width:50%; padding:30px; box-sizing:border-box; position: absolute; z-index:2; top:0; left:25%; transform:translateX(-50%); display:flex; flex-wrap:wrap; justify-content: space-around}
.location > .logo p{text-align:center; width:50%}
.location > .logo p:nth-child(1){width:100%}
.location > .logo p:nth-child(1) img{width:100%; height:auto;}
.location > .logo p:nth-child(2) img{width:70%; height:auto;}
.location > .logo p:nth-child(3) img{width:50%; height:auto;}

@media only screen and (min-width:1300px){
    .location > .logo{width:33%; left:16.5%;}
    .location > address{width:33%;}
}

@media only screen and (max-width:1000px){
    .location > .logo{width:50%; max-width:auto}
    .location > .logo p:nth-child(2) img{width:90%}
    .location > .logo p:nth-child(3) img{width:70%}
}

@media only screen and (max-width:700px){
    .location{height:auto!important}
    .location > .map{height:300px}
    .location > .map iframe{width:100%; height:100%; transform: none; top:auto; left:auto}
    .location > address{position:relative; width:100%; height:auto }
    .location > address h2,.location > address p{text-align: left; padding:0 15px; box-sizing: border-box}
    .location > .logo{position:relative; top:auto; left:auto; width:100%; padding:30px 15px; transform:none}
}
    
    
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{height:100px; width:100%; display:flex; flex-wrap:wrap; align-items: center; justify-content: space-between; background: #000; padding:0 30px; box-sizing:border-box}
footer p{margin:0}
footer p a:nth-child(2){margin:0 0 0 30px}
footer p:nth-child(2){font-size:14px}
footer a,footer a:visited{color:#FFF}
footer a:hover{color:var(--bucca)}

@media only screen and (max-width:700px){
    footer{height:auto;  padding:15px;}
    footer p{width:100%;}
    footer p a:nth-child(2){margin:0 0 0 15px}
}

@media only screen and (max-width:320px){
    footer p a:nth-child(2){margin:0}
}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--bucca: #ffdc00;}

.page{width:100%; height: 100vh; position: relative; margin:0 0 30px 0}

@media only screen and (max-width:700px){
    .page{height:auto}
}

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

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



h1{font-size: 40px; line-height:50px; padding:0; margin:0 0 20px 0; font-weight: 300}
h2{font-size: 30px;line-height: 40px; margin:10px 0}
h1,h2{font-weight: 700; -webkit-hyphens:none; -moz-hyphens:none; hyphens:none}

@media only screen and (max-width:700px){
h1,h2,.hyphens_active{-webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto}
}

/* TRANSISTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.transition{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:hover{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:after{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:after:hover{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}

/* COOKIE-BANNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cookie-banner{position:fixed; width: 100%;bottom:0; right:0; padding:15px 10px 10px 10px; background:rgba(0,0,0,0.8);border:1px solid #333;color:#fff;text-align: center;z-index:100002;}
.cookie-banner button{background:#ddd;color:#000;margin:10px 0 0 0;border-radius:5px;padding:0 10px; font-size:16px}
.cookie-banner a{color:#FFF; text-decoration: underline}
.cookie-banner a:hover{text-decoration:none;}
.cookie-vorhanden{display:none;}