@font-face{
font-family:"Playfair Display";
src:url("fonts/playfair-display-v40-latin-500.woff2") format("woff2");
font-weight:500;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Playfair Display";
src:url("fonts/playfair-display-v40-latin-700.woff2") format("woff2");
font-weight:700;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Montserrat";
src:url("fonts/montserrat-v31-latin-300.woff2") format("woff2");
font-weight:300;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Montserrat";
src:url("fonts/montserrat-v31-latin-regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Montserrat";
src:url("fonts/montserrat-v31-latin-500.woff2") format("woff2");
font-weight:500;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Montserrat";
src:url("fonts/montserrat-v31-latin-600.woff2") format("woff2");
font-weight:600;
font-style:normal;
font-display:swap;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:"Montserrat",Arial,sans-serif;
background:#0d0d0d;
color:white;
overflow-x:hidden;
}

.site-header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
}

.navbar{
height:92px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 70px;
background:rgba(8,8,8,0.86);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(212,175,55,0.18);
}

.logo{
font-family:"Playfair Display",serif;
font-size:34px;
font-weight:700;
letter-spacing:3px;
color:#d4af37;
text-decoration:none;
}

.logo-with-image{
display:flex;
align-items:center;
gap:14px;
}

.logo-with-image img{
width:46px;
height:46px;
object-fit:contain;
display:block;
}

.logo-with-image span{
font-family:"Playfair Display",serif;
font-size:28px;
font-weight:700;
letter-spacing:1px;
color:#d4af37;
}

.menu{
display:flex;
gap:42px;
list-style:none;
}

.menu a{
color:white;
text-decoration:none;
font-size:15px;
font-weight:500;
letter-spacing:1px;
}

.menu a:hover{
color:#d4af37;
}

.nav-btn{
display:inline-block;
padding:12px 26px;
border:1px solid #d4af37;
color:#d4af37 !important;
text-decoration:none !important;
font-size:13px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
border-radius:30px;
transition:0.3s;
}

.nav-btn:hover{
background:#d4af37;
color:#111 !important;
}

.menu-toggle{
display:none;
}

/* HOME HERO VIDEO */

.hero-video{
position:relative;
height:82vh;
min-height:620px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
background:#111;
}

.hero-video__media{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
filter:contrast(1.05) brightness(0.9) saturate(1.08);
}

.hero-video::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at center, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.68) 100%),
linear-gradient(to bottom, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.88) 100%);
z-index:2;
pointer-events:none;
}

.hero-video::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:220px;
background:linear-gradient(
to bottom,
rgba(13,13,13,0) 0%,
rgba(13,13,13,0.45) 42%,
#0d0d0d 100%
);
z-index:2;
pointer-events:none;
}

.hero-video__overlay{
position:relative;
z-index:3;
max-width:980px;
padding:0 30px;
text-shadow:0 8px 35px rgba(0,0,0,0.65);
}

.eyebrow{
font-size:13px;
letter-spacing:5px;
text-transform:uppercase;
color:#d4af37;
margin-bottom:20px;
}

.hero-video__overlay h1{
font-family:"Playfair Display",serif;
font-size:clamp(54px,7vw,104px);
line-height:1;
font-weight:700;
margin-bottom:18px;
}

.subtitle{
font-size:18px;
letter-spacing:7px;
text-transform:uppercase;
color:#eee;
margin-bottom:34px;
}

.btn{
display:inline-block;
padding:15px 36px;
background:#d4af37;
color:#111;
text-decoration:none;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
font-size:13px;
border-radius:40px;
transition:0.3s;
}

.btn:hover{
background:white;
transform:translateY(-3px);
}

.btn-secondary{
background:transparent;
border:1px solid #d4af37;
color:#d4af37;
}

.btn-secondary:hover{
background:#d4af37;
color:#111;
}

/* MAIN SECTIONS */

.intro-section{
padding:105px 30px 80px;
background:#0d0d0d;
text-align:center;
}

.section-inner{
max-width:880px;
margin:0 auto;
}

.section-label{
color:#d4af37;
text-transform:uppercase;
letter-spacing:5px;
font-size:13px;
margin-bottom:18px;
}

.intro-section h2,
.contact-section h2{
font-family:"Playfair Display",serif;
font-size:clamp(36px,4.5vw,62px);
line-height:1.1;
margin-bottom:24px;
}

.intro-section p,
.contact-section p{
font-size:18px;
line-height:1.8;
color:#d6d6d6;
}

.banner-section{
max-width:1180px;
margin:0 auto 90px;
min-height:360px;
border-radius:28px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:70px 35px;
background:#151515;
border:1px solid rgba(212,175,55,0.22);
overflow:hidden;
}

.services-banner{
background:
linear-gradient(rgba(0,0,0,0.50),rgba(0,0,0,0.70)),
url("kerner_salon.jpg") center/cover no-repeat;
}

.banner-section span{
color:#d4af37;
text-transform:uppercase;
letter-spacing:6px;
font-size:13px;
}

.banner-section h2{
font-family:"Playfair Display",serif;
font-size:clamp(38px,5vw,76px);
margin:18px 0;
}

.banner-section p{
font-size:18px;
color:#e1e1e1;
line-height:1.7;
max-width:760px;
margin:0 auto 28px;
}

.contact-section{
padding:105px 30px;
background:#111;
text-align:center;
}

.button-row{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
flex-wrap:wrap;
margin-top:34px;
}

/* SUBPAGE HERO */

.subpage-hero{
position:relative;
padding:180px 30px 90px;
background:#111;
text-align:center;
overflow:hidden;
isolation:isolate;
}

.subpage-hero h1{
font-family:"Playfair Display",serif;
font-size:clamp(50px,7vw,100px);
line-height:1;
margin-bottom:18px;
}

.subpage-hero p{
font-size:17px;
letter-spacing:6px;
text-transform:uppercase;
color:#ddd;
}

.legal-hero{
background:#111;
}

.legal-hero::before{
content:"";
position:absolute;
inset:0;
background:url("kerner_salon.jpg") center/cover no-repeat;
filter:grayscale(1) contrast(1.08) brightness(0.82);
z-index:-2;
}

.legal-hero::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at center, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.52) 58%, rgba(0,0,0,0.86) 100%),
linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.70) 100%);
z-index:-1;
}

/* KONTAKT HERO */

.kontakt-hero{
height:72vh;
min-height:620px;
background:url("kontakt_hero.jpg") center/cover no-repeat;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
isolation:isolate;
padding:0;
}

.kontakt-hero::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at center,
rgba(0,0,0,0.02) 0%,
rgba(0,0,0,0.12) 52%,
rgba(0,0,0,0.38) 100%),
linear-gradient(to right,
rgba(0,0,0,0.28) 0%,
rgba(0,0,0,0.05) 30%,
rgba(0,0,0,0.05) 70%,
rgba(0,0,0,0.28) 100%),
linear-gradient(to bottom,
rgba(0,0,0,0.30) 0%,
rgba(0,0,0,0.08) 42%,
rgba(0,0,0,0.44) 100%);
z-index:1;
pointer-events:none;
}

.kontakt-hero::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:340px;
background:linear-gradient(
to bottom,
rgba(13,13,13,0) 0%,
rgba(13,13,13,0.10) 22%,
rgba(13,13,13,0.38) 55%,
rgba(13,13,13,0.78) 82%,
#0d0d0d 100%
);
z-index:2;
pointer-events:none;
}

.kontakt-hero .hero-overlay{
position:absolute;
inset:0;
z-index:3;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:transparent;
}

.kontakt-hero .section-inner{
position:relative;
z-index:4;
max-width:1200px;
padding:0 24px;
text-shadow:0 10px 40px rgba(0,0,0,0.72);
}

.kontakt-hero h1{
font-size:clamp(42px,6vw,86px);
margin-bottom:18px;
}

.kontakt-hero p{
font-size:20px;
color:#ffffff;
font-weight:500;
letter-spacing:6px;
text-transform:uppercase;
text-shadow:
0 2px 6px rgba(0,0,0,0.95),
0 0 18px rgba(0,0,0,0.65);
-webkit-text-stroke:0.35px rgba(0,0,0,0.85);
}

@media(prefers-reduced-motion:no-preference){
.kontakt-hero{
background-size:105%;
animation:cinematicZoom 18s ease-in-out infinite alternate;
}

@keyframes cinematicZoom{
from{
background-size:105%;
background-position:center center;
}
to{
background-size:112%;
background-position:center 48%;
}
}
}

/* CONTACT INFO */

.info-section{
position:relative;
z-index:5;
padding:70px 30px 105px;
margin-top:-70px;
background:linear-gradient(
to bottom,
rgba(13,13,13,0) 0%,
#0d0d0d 90px,
#0d0d0d 100%
);
}

.contact-box{
max-width:1180px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
text-align:center;
}

.contact-box div{
min-height:230px;
background:rgba(23,23,23,0.94);
padding:42px 30px;
border-radius:24px;
border:1px solid rgba(212,175,55,0.32);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
transition:0.3s;
backdrop-filter:blur(12px);
box-shadow:0 28px 80px rgba(0,0,0,0.25);
}

.contact-box div:hover{
transform:translateY(-6px);
border-color:#d4af37;
box-shadow:0 24px 60px rgba(0,0,0,0.45);
}

.contact-box h3{
font-family:"Playfair Display",serif;
font-size:30px;
color:#d4af37;
margin-bottom:18px;
}

.contact-box p{
font-size:16px;
line-height:1.7;
color:#e5e5e5;
}

.contact-box a{
color:white;
text-decoration:none;
}

.map-wrapper{
max-width:1180px;
height:430px;
margin:60px auto 0;
border-radius:24px;
overflow:hidden;
border:1px solid rgba(212,175,55,0.25);
}

.map-wrapper iframe,
.map-consent iframe{
width:100%;
height:100%;
min-height:430px;
border:0;
display:block;
}

.map-consent{
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(rgba(0,0,0,0.72),rgba(0,0,0,0.86)),
#171717;
}

.map-consent-box{
max-width:620px;
padding:34px 28px;
text-align:center;
}

.map-consent-box h3{
font-family:"Playfair Display",serif;
font-size:34px;
color:#d4af37;
margin-bottom:16px;
}

.map-consent-box p{
font-size:16px;
line-height:1.7;
color:#dddddd;
margin-bottom:26px;
}

.map-load-btn{
border:0;
cursor:pointer;
font-family:"Montserrat",Arial,sans-serif;
}

/* ÜBER UNS PAGE */

.ueber-hero{
position:relative;
height:82vh;
min-height:680px;
background:url("ueber_uns.jpg") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
isolation:isolate;
}

.ueber-hero::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at center,
rgba(0,0,0,0.10) 0%,
rgba(0,0,0,0.36) 52%,
rgba(0,0,0,0.76) 100%),
linear-gradient(to bottom,
rgba(0,0,0,0.56) 0%,
rgba(0,0,0,0.20) 42%,
rgba(13,13,13,0.92) 100%);
z-index:1;
pointer-events:none;
}

.ueber-hero::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:360px;
background:linear-gradient(
to bottom,
rgba(13,13,13,0) 0%,
rgba(13,13,13,0.18) 28%,
rgba(13,13,13,0.58) 68%,
#0d0d0d 100%
);
z-index:2;
pointer-events:none;
}

.ueber-hero__content{
position:relative;
z-index:3;
max-width:1100px;
padding:0 28px;
text-shadow:0 12px 45px rgba(0,0,0,0.78);
}

.ueber-hero h1{
font-family:"Playfair Display",serif;
font-size:clamp(46px,7vw,96px);
line-height:1.02;
margin-bottom:22px;
color:white;
}

.ueber-story{
position:relative;
z-index:5;
margin-top:-130px;
padding:0 30px 115px;
background:linear-gradient(
to bottom,
rgba(13,13,13,0) 0%,
#0d0d0d 170px,
#0d0d0d 100%
);
}

.ueber-story__card{
max-width:980px;
margin:0 auto;
padding:64px;
border-radius:30px;
background:rgba(18,18,18,0.92);
border:1px solid rgba(212,175,55,0.30);
box-shadow:0 40px 100px rgba(0,0,0,0.48);
backdrop-filter:blur(16px);
}

.ueber-story__card h2{
font-family:"Playfair Display",serif;
font-size:clamp(34px,4vw,56px);
line-height:1.1;
color:#d4af37;
margin:34px 0 20px;
}

.ueber-story__card h2:first-of-type{
margin-top:0;
}

.ueber-story__card p{
font-size:18px;
line-height:1.85;
color:#dddddd;
margin-bottom:20px;
}

/* LEGAL PAGES */

.legal-section{
padding:90px 30px 120px;
background:#0d0d0d;
}

.legal-content{
max-width:980px;
margin:0 auto;
background:#151515;
border:1px solid rgba(212,175,55,0.26);
border-radius:28px;
padding:60px;
box-shadow:0 30px 80px rgba(0,0,0,0.35);
}

.legal-content h2{
font-family:"Playfair Display",serif;
font-size:30px;
line-height:1.25;
color:#d4af37;
margin:42px 0 16px;
}

.legal-content h2:first-child{
margin-top:0;
}

.legal-content p{
font-size:16px;
line-height:1.85;
color:#dddddd;
margin-bottom:20px;
max-width:850px;
}

.legal-content a{
color:#d4af37;
text-decoration:none;
word-break:break-word;
}

.legal-content a:hover{
color:white;
}

.legal-note{
margin-top:40px;
padding:22px 24px;
border-left:4px solid #d4af37;
background:rgba(212,175,55,0.09);
border-radius:12px;
color:#f2f2f2 !important;
}

/* FOOTER */

.footer{
padding:34px 20px;
text-align:center;
background:#050505;
color:#aaa;
font-size:13px;
border-top:1px solid rgba(255,255,255,0.08);
}

.footer-links{
margin-top:14px;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
font-size:13px;
}

.footer-links a{
color:#d4af37;
text-decoration:none;
}

.footer-links a:hover{
color:white;
}

/* MOBILE */

@media(max-width:900px){
  
.navbar{
height:auto;
padding:18px 22px;
flex-wrap:wrap;
}

.logo{
font-size:28px;
}

.logo-with-image img{
width:42px;
height:42px;
}

.logo-with-image span{
font-size:22px;
white-space:nowrap;
}

.menu-toggle{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
width:34px;
height:34px;
background:none;
border:0;
cursor:pointer;
position:relative;
z-index:1001;
}

.menu-toggle span{
width:28px;
height:2px;
background:white;
display:block;
transition:0.3s ease;
transform-origin:center;
}

.menu-toggle.active span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
opacity:0;
}

.menu-toggle.active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}

.menu{
display:none;
width:100%;
flex-direction:column;
align-items:center;
gap:18px;
padding:25px 0 12px;
}

.menu.active{
display:flex;
}

.nav-btn{
display:none;
}

.hero-video{
height:88vh;
min-height:690px;
}

.subtitle{
letter-spacing:4px;
}

.banner-section{
border-radius:0;
margin-bottom:70px;
}

.subpage-hero{
padding:150px 24px 75px;
}

.legal-hero::before{
background-position:center;
}

.kontakt-hero{
height:58vh;
min-height:470px;
background-size:cover;
background-position:center top;
}

.kontakt-hero::before{
background:
radial-gradient(circle at center,
rgba(0,0,0,0.02) 0%,
rgba(0,0,0,0.10) 52%,
rgba(0,0,0,0.34) 100%),
linear-gradient(to right,
rgba(0,0,0,0.20) 0%,
rgba(0,0,0,0.04) 30%,
rgba(0,0,0,0.04) 70%,
rgba(0,0,0,0.20) 100%),
linear-gradient(to bottom,
rgba(0,0,0,0.24) 0%,
rgba(0,0,0,0.06) 42%,
rgba(0,0,0,0.38) 100%);
}

.kontakt-hero::after{
height:240px;
background:linear-gradient(
to bottom,
rgba(13,13,13,0) 0%,
rgba(13,13,13,0.08) 28%,
rgba(13,13,13,0.28) 58%,
rgba(13,13,13,0.68) 84%,
#0d0d0d 100%
);
}

.kontakt-hero h1{
font-size:clamp(36px,10vw,56px);
line-height:1.04;
}

.kontakt-hero p{
font-size:16px;
letter-spacing:3px;
text-shadow:
0 2px 8px rgba(0,0,0,1),
0 0 16px rgba(0,0,0,0.75);
-webkit-text-stroke:0.45px rgba(0,0,0,0.92);
}

.kontakt-hero .section-inner{
padding:0 18px;
}

.info-section{
padding:35px 22px 80px;
margin-top:-90px;
background:linear-gradient(
to bottom,
rgba(13,13,13,0) 0%,
#0d0d0d 72px,
#0d0d0d 100%
);
}

.contact-box{
grid-template-columns:1fr;
}

.contact-box div{
min-height:220px;
padding:38px 24px;
border-radius:28px;
}

.map-wrapper{
height:420px;
}

.map-wrapper iframe,
.map-consent iframe{
min-height:420px;
}

.button-row{
flex-direction:column;
gap:18px;
}

.button-row .btn{
width:100%;
max-width:320px;
text-align:center;
}

.ueber-hero{
height:68vh;
min-height:560px;
background-position:center top;
}

.ueber-hero::after{
height:260px;
}

.ueber-story{
margin-top:-95px;
padding:0 22px 90px;
background:linear-gradient(
to bottom,
rgba(13,13,13,0) 0%,
#0d0d0d 125px,
#0d0d0d 100%
);
}

.ueber-story__card{
padding:42px 28px;
border-radius:26px;
}

.ueber-story__card p{
font-size:16px;
line-height:1.75;
}

.legal-section{
padding:60px 18px 90px;
}

.legal-content{
padding:34px 24px;
border-radius:20px;
}

.legal-content h2{
font-size:25px;
}

.legal-content p{
font-size:15px;
line-height:1.75;
}

}

@media(max-width:480px){

.logo-with-image{
gap:10px;
}

.logo-with-image img{
width:38px;
height:38px;
}

.logo-with-image span{
font-size:19px;
letter-spacing:0.5px;
}

.kontakt-hero{
height:54vh;
min-height:440px;
background-position:center top;
}

.kontakt-hero::after{
height:220px;
}

.kontakt-hero .section-inner{
padding:0 16px;
}

.info-section{
padding:28px 18px 75px;
margin-top:-78px;
}

.ueber-hero{
height:62vh;
min-height:520px;
}

.ueber-hero h1{
font-size:clamp(38px,11vw,52px);
}

.ueber-story{
margin-top:-82px;
padding:0 18px 80px;
}

.ueber-story__card{
padding:36px 24px;
}

}