:root{--ink:#16231e;--green:#1f3b32;--sage:#7f9488;--cream:#f5eee3;--paper:#fffdf9;--gold:#d7a86e;--line:rgba(22,35,30,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font:400 1rem/1.7 "DM Sans",sans-serif}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.skip{position:fixed;top:-5rem;left:1rem;background:#fff;padding:.7rem 1rem;z-index:99}.skip:focus{top:1rem}.site-header{height:96px;display:flex;align-items:center;gap:2.5rem;padding:0 clamp(1.25rem,5vw,5rem);border-bottom:1px solid var(--line);position:absolute;z-index:20;width:100%;color:#fff}.brand{display:flex;align-items:center;gap:.8rem;font:600 .86rem/1.05 "DM Sans";letter-spacing:.08em;text-transform:uppercase;margin-right:auto}.brand-mark{font-size:1.65rem;color:var(--gold)}nav{display:flex;gap:2rem}nav a,.header-call{font-size:.88rem;font-weight:600}.header-call{border-bottom:1px solid currentColor;padding:.3rem 0}.menu-button{display:none}.hero{min-height:760px;background:var(--green);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);position:relative;overflow:hidden;padding:150px clamp(1.25rem,8vw,8rem) 70px;gap:7vw;align-items:center}.hero:before{content:"";position:absolute;width:480px;height:480px;border:1px solid rgba(255,255,255,.12);border-radius:50%;left:-150px;bottom:-210px}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-weight:600;font-size:.75rem;margin:0 0 1.5rem;color:#5c776a}.eyebrow.light{color:#c5d1cb}.hero .eyebrow{color:#c6d2cc}h1,h2{font-family:"Playfair Display",serif;font-weight:600;line-height:1.02;margin:0}h1{font-size:clamp(3.8rem,8vw,7.7rem);letter-spacing:-.055em}h1 em{color:var(--gold);font-weight:500}.intro{max-width:37rem;font-size:1.15rem;color:#dbe3df;margin:2rem 0}.hero-actions{display:flex;gap:1.75rem;align-items:center}.button{display:inline-flex;padding:.9rem 1.25rem;background:var(--gold);color:var(--ink);font-weight:600;border-radius:2px}.text-link{font-weight:600;border-bottom:1px solid;padding-bottom:.2rem}.hero-image{position:relative;align-self:end}.hero-image img{width:min(100%,540px);height:610px;object-fit:cover;object-position:center top;filter:saturate(.82) contrast(1.04)}.image-note{position:absolute;background:var(--cream);color:var(--ink);padding:1.2rem 1.4rem;right:-2rem;bottom:2rem;font-family:"Playfair Display",serif;font-size:1.05rem}.vertical-note{position:absolute;right:1.25rem;top:50%;writing-mode:vertical-rl;font-size:.65rem;letter-spacing:.25em;color:#9cb0a6}.statement{padding:clamp(5rem,10vw,10rem) clamp(1.25rem,15vw,14rem);text-align:center}.statement h2{font-size:clamp(2.8rem,5vw,5.5rem);max-width:1000px;margin:auto}.statement>p:last-child{max-width:700px;margin:2rem auto 0;color:#52615b;font-size:1.1rem}.hours{display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:white;padding:clamp(4rem,8vw,8rem);gap:8vw}.hours h2{font-size:clamp(3rem,6vw,6rem)}.hours-list>div{display:flex;justify-content:space-between;gap:2rem;padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,.2)}.hours-list span{color:#c6d2cc}.hours-list strong{white-space:nowrap}.ocean{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center;padding:clamp(5rem,9vw,9rem) clamp(1.25rem,8vw,8rem);background:var(--cream)}.ocean-art img{border-radius:50%;box-shadow:0 30px 80px rgba(22,35,30,.14)}.ocean h2{font-size:clamp(3rem,5vw,5.5rem)}.ocean h3{font:500 1.7rem "Playfair Display",serif;margin:1.8rem 0 .5rem}.ocean p{font-size:1.08rem;max-width:600px}.ocean .text-link{display:inline-block;margin-top:1.2rem}.contact{display:grid;grid-template-columns:1.2fr .8fr;padding:clamp(5rem,9vw,9rem) clamp(1.25rem,8vw,8rem);background:#142a23;color:#fff;gap:8vw}.contact h2{font-size:clamp(3rem,6vw,6rem);max-width:750px}.contact-details{font-size:1.05rem}.contact-details address{font-style:normal;margin-bottom:1.5rem}.contact-details a:not(.button){border-bottom:1px solid rgba(255,255,255,.45)}.button.pale{background:var(--cream);margin-top:1rem}footer{display:flex;justify-content:space-between;gap:2rem;padding:2rem clamp(1.25rem,5vw,5rem);font-size:.83rem;background:#0e1c18;color:#b7c3bd}footer div{display:flex;gap:1.5rem}.reveal{opacity:0;transform:translateY(20px);transition:.8s ease}.reveal.visible{opacity:1;transform:none}.legal{max-width:850px;margin:auto;padding:140px 1.5rem 5rem}.legal h1{font-size:clamp(3rem,7vw,5rem);margin-bottom:3rem}.legal h2{font-size:2rem;margin-top:3rem}.legal h3{font-size:1.2rem;margin-top:2rem}.legal a{text-decoration:underline}.legal-header{position:static;background:var(--green)}
.brand{font-size:0;line-height:0}.brand img{width:198px;height:52px;object-fit:contain;object-position:left center}.brand-mark{display:none}
.salon-view{display:grid;grid-template-columns:1.15fr .85fr;min-height:720px;background:#10261f;color:#fff;overflow:hidden}.salon-photo{position:relative;overflow:hidden;min-height:720px}.salon-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,#10261f 100%)}.salon-photo img{position:absolute;width:125%;height:125%;left:-13%;top:-13%;object-fit:cover;transform:rotate(-9deg) scale(1.08);filter:saturate(.8) contrast(1.05)}.salon-caption{align-self:center;padding:clamp(3rem,7vw,7rem)}.salon-caption h2{font-size:clamp(3rem,5vw,5.5rem)}.salon-caption>p:last-child{color:#c8d4ce;max-width:34rem;margin-top:2rem;font-size:1.08rem}
.ocean{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#082d3a 0%,#07526a 52%,#08758a 100%);color:#fff;padding-top:clamp(7rem,11vw,11rem);padding-bottom:clamp(10rem,14vw,14rem)}.ocean>*{position:relative;z-index:2}.ocean h2{color:#fff;text-shadow:0 3px 28px rgba(0,16,25,.28)}.ocean h3{color:#8ee3e0}.ocean p{color:#d7f0f2}.ocean .text-link{color:#fff}.ocean-image-wrap{position:relative;max-width:540px;margin:auto;animation:ocean-float 6s ease-in-out infinite}.ocean-art img{position:relative;z-index:2;border:1px solid rgba(255,255,255,.35);box-shadow:0 40px 100px rgba(0,20,31,.38);filter:saturate(.88)}.orbit{position:absolute;z-index:1;inset:-7%;border:1px solid rgba(143,227,224,.42);border-radius:50%;animation:orbit-pulse 5s ease-in-out infinite}.orbit-two{inset:-14%;opacity:.4;animation-delay:-2s}.water-light{z-index:0;position:absolute;inset:-40%;background:repeating-radial-gradient(ellipse at 50% -10%,transparent 0 38px,rgba(143,227,224,.12) 40px 43px,transparent 46px 82px);animation:caustics 14s linear infinite;mix-blend-mode:screen}.bubbles{z-index:1;position:absolute;inset:0;pointer-events:none}.bubbles i{position:absolute;bottom:-80px;width:18px;height:18px;border:1px solid rgba(255,255,255,.45);border-radius:50%;box-shadow:inset 3px 3px 6px rgba(255,255,255,.18);animation:bubble-rise 11s linear infinite}.bubbles i:nth-child(1){left:8%;width:10px;height:10px;animation-delay:-2s}.bubbles i:nth-child(2){left:24%;width:26px;height:26px;animation-delay:-7s;animation-duration:14s}.bubbles i:nth-child(3){left:43%;animation-delay:-4s}.bubbles i:nth-child(4){left:67%;width:12px;height:12px;animation-delay:-9s;animation-duration:13s}.bubbles i:nth-child(5){left:82%;width:30px;height:30px;animation-delay:-5s;animation-duration:16s}.bubbles i:nth-child(6){left:94%;width:8px;height:8px;animation-delay:-1s}.waves{z-index:1;position:absolute;left:-10%;right:-10%;bottom:-45px;height:150px}.waves span{position:absolute;left:0;width:120%;height:130px;border-radius:50% 50% 0 0/45% 45% 0 0;background:rgba(245,238,227,.16);animation:wave-shift 9s ease-in-out infinite}.waves span:nth-child(2){bottom:-22px;background:rgba(245,238,227,.28);animation-delay:-3s;animation-duration:12s}.waves span:nth-child(3){bottom:-55px;background:var(--cream);animation-delay:-6s;animation-duration:15s}
@keyframes ocean-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-18px) rotate(1deg)}}@keyframes orbit-pulse{0%,100%{transform:scale(.98);opacity:.25}50%{transform:scale(1.04);opacity:.65}}@keyframes caustics{to{transform:translate3d(4%,3%,0) rotate(3deg)}}@keyframes bubble-rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.7}80%{opacity:.45}100%{transform:translateY(-950px) translateX(45px);opacity:0}}@keyframes wave-shift{0%,100%{transform:translateX(-3%) rotate(-1deg)}50%{transform:translateX(3%) rotate(1deg)}}
@media(max-width:850px){.site-header{height:76px;position:absolute}.header-call{display:none}.menu-button{display:block;background:none;color:#fff;border:1px solid rgba(255,255,255,.45);padding:.55rem .8rem}nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--green);padding:1.5rem;flex-direction:column;border-top:1px solid rgba(255,255,255,.2)}nav.open{display:flex}.hero{grid-template-columns:1fr;padding-top:125px}.hero-image img{height:470px;width:100%}.image-note{right:.5rem}.vertical-note{display:none}.hours,.ocean,.contact{grid-template-columns:1fr}.ocean-art{max-width:500px}.hours-list>div{align-items:flex-start;flex-direction:column;gap:.3rem}.contact{gap:3rem}.salon-view{grid-template-columns:1fr}.salon-photo{min-height:520px}.salon-photo:after{background:linear-gradient(0deg,#10261f 0%,transparent 32%)}.salon-caption{padding-top:2rem}.ocean{gap:4rem}.brand img{width:170px;height:auto}}
@media(max-width:520px){h1{font-size:clamp(2.75rem,13vw,3.5rem);letter-spacing:-.045em}.site-header{justify-content:space-between;gap:1rem}.brand{margin-right:0}.brand img{width:138px}.hero{padding-left:1.25rem;padding-right:1.25rem}.hero-actions{gap:1rem;flex-wrap:wrap}.menu-button{font-size:.8rem}.statement h2,.salon-caption h2,.hours h2,.ocean h2,.contact h2{font-size:2.35rem;overflow-wrap:anywhere}.salon-caption{padding-left:1.25rem;padding-right:1.25rem}.ocean-image-wrap{max-width:86vw}.ocean-copy{min-width:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.ocean-image-wrap,.orbit,.water-light,.bubbles i,.waves span{animation:none}}

/* Ruhigere, rechteckige Bildinszenierung im Engagement-Bereich */
.ocean{background:linear-gradient(145deg,#073342 0%,#075369 58%,#087287 100%)}
.ocean-image-wrap{max-width:520px;padding:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.34);box-shadow:0 28px 70px rgba(0,22,32,.34);animation:ocean-float-soft 8s ease-in-out infinite}
.ocean-art img{width:100%;height:auto;object-fit:contain;border:0;border-radius:0;box-shadow:none;filter:saturate(.9) contrast(1.02)}
.water-light{inset:-18%;opacity:.78;overflow:hidden;background:
  repeating-radial-gradient(ellipse at 18% 35%,transparent 0 48px,rgba(206,250,248,.10) 50px 52px,transparent 54px 94px),
  repeating-radial-gradient(ellipse at 74% 62%,transparent 0 64px,rgba(220,255,253,.08) 66px 68px,transparent 70px 124px);
  background-size:420px 250px,560px 320px;filter:blur(.25px);animation:caustic-drift 18s ease-in-out infinite alternate}
.water-light:before,.water-light:after{content:"";position:absolute;inset:-15%;background:repeating-radial-gradient(ellipse at center,transparent 0 72px,rgba(220,255,253,.07) 74px 76px,transparent 78px 142px);background-size:520px 310px;transform:rotate(11deg);animation:caustic-cross 22s linear infinite}
.water-light:after{opacity:.65;transform:rotate(-17deg) scale(1.15);animation-direction:reverse;animation-duration:27s}
.waves{opacity:.72;height:105px;bottom:-42px}.waves span{height:90px;animation-duration:14s}
@keyframes ocean-float-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes caustic-drift{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.05)}}
@keyframes caustic-cross{0%{background-position:0 0}50%{background-position:170px -80px}100%{background-position:340px -160px}}
@media(prefers-reduced-motion:reduce){.ocean-image-wrap,.water-light{animation:none}}