/* STILISTA Hair and Beauty – Noir & Gold (P01), Richtung „Der Name als Monument“ */
@font-face{font-family:"Cormorant";src:url(fonts/CormorantGaramond-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/CormorantGaramond-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/CormorantGaramond-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  color-scheme:dark;
  /* Farbwelt 1: Noir & Gold (P01) – Standard */
  --bg:#111111; --surf:#1B1A18; --deep:#0A0A0A; --ink:#EDEAE3; --mute:#ABA598; --gold:#C9A24B; --gold-l:#E3C98F; --line:#2E2C29; --word:#7A6634;
  --serif:"Cormorant",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --m:clamp(16px,3.4vw,48px); --ease:cubic-bezier(.22,1,.36,1); --head:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.02;margin:0 0 .45em;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(36px,4.4vw,64px)}
h3{font-size:28px}
p{margin:0 0 1em;max-width:60ch}
.wrap{max-width:1680px;margin:0 auto;padding:0 var(--m)}
.sec{padding-block:clamp(88px,12vw,180px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--bg);padding:8px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--bg)}
.lead{font:italic 400 clamp(22px,2vw,28px)/1.3 var(--serif);color:var(--gold-l)}
.intro{font-size:19px}
.stars{color:var(--gold);letter-spacing:.12em}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:1.5px solid var(--gold);font:500 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .2s var(--ease)}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--gold);color:var(--bg)}
.btn-gold:hover{background:var(--gold-l);border-color:var(--gold-l)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--gold);color:var(--bg)}
.btn-sm{min-height:44px;padding:0 20px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.link{color:var(--gold);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .3s}
.link:hover{text-decoration-color:currentColor}
.next{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:56px;max-width:none}

/* Kopf */
.head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:40px;height:var(--head);padding:0 var(--m);background:var(--bg);transition:transform .45s var(--ease);view-transition-name:kopf}
.head.hide{transform:translateY(-100%)}
.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1}
.brand-name{font:500 26px/1 var(--serif);letter-spacing:.3em;margin-right:-.3em}
.brand-sub{font:500 9px/1 var(--sans);letter-spacing:.42em;margin:7px -.42em 0 0;color:var(--gold);text-transform:uppercase}
.nav{display:flex;gap:34px;margin-left:auto}
.nav a{position:relative;font-size:15px;text-decoration:none;color:var(--mute);transition:color .3s;padding:8px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.menu{display:none}

/* ===== Hero: der Name als Monument, Luisa steht davor ===== */
.mono{--p:0;position:relative;height:calc(100svh - var(--head));min-height:620px;max-height:1100px;overflow:hidden;display:grid;grid-template-columns:1fr minmax(300px,34vw) 1fr;align-items:end;gap:24px;padding:0 var(--m) clamp(28px,5vh,56px)}
.mono-word{position:absolute;inset:clamp(8px,3vh,40px) 0 auto;margin:0;max-width:none;display:flex;justify-content:center;font:500 21vw/.78 var(--serif);letter-spacing:-.03em;color:var(--gold);user-select:none;pointer-events:none;translate:0 calc(var(--p) * -30%)}
.mono-word span{display:inline-block;translate:calc((var(--i) - 3.5) * var(--p) * 2.4vw) 0}
.mono-word span:nth-child(1){--i:0}.mono-word span:nth-child(2){--i:1}.mono-word span:nth-child(3){--i:2}.mono-word span:nth-child(4){--i:3}
.mono-word span:nth-child(5){--i:4}.mono-word span:nth-child(6){--i:5}.mono-word span:nth-child(7){--i:6}.mono-word span:nth-child(8){--i:7}
.mono-pic{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:fit-content;height:94%;z-index:1;translate:0 calc(var(--p) * 10%)}
.mono-pic img{height:100%;width:auto}
.mono-l,.mono-r{position:relative;z-index:2}
.mono-l{grid-column:1;align-self:center;padding-top:22vh}
.mono-r{grid-column:3;justify-self:end;max-width:400px}
.mono h1{font-size:clamp(32px,2.7vw,44px);margin-bottom:.35em}
.mono h1 span{display:block}
.mono .lead{margin:0}
.mono-r p{font-size:16px}
.badge{display:inline-block;background:var(--gold);color:var(--bg);padding:8px 14px;font:500 14px/1 var(--sans);margin-bottom:22px}
.rating{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;text-decoration:none}
.rating:hover{color:var(--gold-l)}

/* Laufband als Goldfeld */
.ticker{background:var(--gold);color:var(--bg);overflow:hidden;padding:18px 0}
.ticker-track{display:flex;gap:28px;width:max-content;animation:tick 46s linear infinite;font:italic 500 30px/1 var(--serif);white-space:nowrap}
.ticker i{font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* ===== Vorher/Nachher mit Regler ===== */
.show{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,6vw,110px);align-items:center}
.show-list{display:flex;flex-direction:column;align-items:flex-start;margin:28px 0 36px}
.show-list button{background:none;border:0;padding:7px 0;cursor:pointer;font:500 clamp(22px,1.9vw,28px)/1.15 var(--serif);color:var(--mute);text-align:left;transition:color .3s,translate .4s var(--ease)}
.show-list button:hover{color:var(--ink)}
.show-list button[aria-pressed="true"]{color:var(--gold);translate:14px 0}
.show-pic{justify-self:end;width:min(100%,560px)}
.cmp{margin:0}
.cmp-stage{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--surf);touch-action:pan-y}
.cmp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-before{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--gold);pointer-events:none}
.cmp-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--gold);color:var(--bg);display:grid;place-items:center;font:600 20px/1 var(--sans);letter-spacing:.1em;transition:transform .3s var(--ease)}
.cmp-stage:hover .cmp-handle::after{transform:scale(1.12)}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.cmp-stage:has(.cmp-range:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
.cmp-tag{position:absolute;top:14px;padding:7px 12px;background:rgba(10,10,10,.72);font-size:14px;pointer-events:none}
.cmp-tag-l{left:14px}.cmp-tag-r{right:14px;color:var(--gold-l)}
.cmp figcaption{margin-top:16px;font:italic 400 24px/1.2 var(--serif);color:var(--gold-l)}
.cmp.swap .cmp-stage img{animation:swap .7s var(--ease)}
@keyframes swap{from{opacity:0;transform:scale(1.05)}}

/* ===== Leistungen ===== */
.svc-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,6vw,110px);align-items:start}
.svc-pic{position:sticky;top:calc(var(--head) + 40px);width:min(100%,400px);justify-self:center}
.svc-list{list-style:none;padding:0;margin:20px 0 0}
.svc-list a{display:block;padding:20px 0;text-decoration:none}
.svc-list b{display:block;font:500 clamp(36px,4vw,60px)/1 var(--serif);letter-spacing:-.02em;transition:color .35s,translate .5s var(--ease)}
.svc-list span{display:block;margin-top:10px;color:var(--mute);transition:color .35s}
.svc-list a:hover b{color:var(--gold);translate:16px 0}
.svc-list a:hover span{color:var(--ink)}
.svc-note{margin-top:40px;font:italic 400 clamp(24px,2.2vw,32px)/1.3 var(--serif);color:var(--gold-l)}

/* ===== Feld: Für wen + Vorteile ===== */
.field{background:var(--surf)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,120px)}
.who{list-style:none;padding:0;margin:28px 0 24px;display:flex;flex-direction:column;gap:2px;font:italic 400 clamp(30px,3vw,44px)/1.2 var(--serif);color:var(--gold-l)}
.perks{margin:28px 0 0}
.perks div{margin-bottom:30px}
.perks dt{font:500 30px/1.1 var(--serif)}
.perks dd{margin:8px 0 0;max-width:46ch}

/* ===== Salon-Bild, Vollfläche ===== */
.salon{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;background:var(--deep)}
.salon-pic{margin:0;overflow:hidden;position:relative}
.salon-pic img{position:absolute;inset:-8% 0 auto;width:100%;height:116%;object-fit:cover;object-position:center 20%;translate:0 var(--drift,0)}
.salon-txt{align-self:center;padding:clamp(56px,8vw,140px)}
.salon-txt h2{font-size:clamp(52px,6vw,104px);line-height:.95}

/* ===== Kundenstimme, über die ganze Breite ===== */
.voice h2{font-size:clamp(26px,2.4vw,36px);color:var(--mute)}
.spread{margin:48px 0 40px}
.spread p{display:flex;justify-content:space-between;max-width:none;margin:0;font:400 clamp(56px,9.4vw,150px)/1.02 var(--serif);letter-spacing:-.03em}
.spread p:nth-child(2) span:last-child{color:var(--gold)}
.spread-by{display:flex;justify-content:space-between;align-items:center;max-width:none;font-size:17px}

/* ===== Anruf-Feld in Gold ===== */
.call{background:var(--gold);color:var(--bg)}
.call h2{font-size:clamp(32px,3vw,44px);margin-bottom:.3em}
.call-num{display:block;margin:clamp(24px,4vw,56px) 0;font:500 clamp(54px,12.6vw,200px)/.9 var(--serif);letter-spacing:-.04em;text-decoration:none;white-space:nowrap;transition:letter-spacing .6s var(--ease)}
.call-num:hover{letter-spacing:-.02em}
.call-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}
.call-foot p{margin:0;font-size:17px}
.call .btns{margin:0}
.call .btn-gold{background:var(--bg);border-color:var(--bg);color:var(--gold-l)}
.call .btn-gold:hover{background:#000;border-color:#000}
.call .btn-line{border-color:var(--bg);color:var(--bg)}
.call .btn-line:hover{background:var(--bg);color:var(--gold-l)}
.call :focus-visible{outline-color:var(--bg)}

/* ===== Unterseiten ===== */
.page-head{max-width:900px;margin-bottom:clamp(48px,6vw,88px)}
.page-head h1,.head-split h1,.thanks h1{font-size:clamp(56px,7.4vw,120px);line-height:.92}
.head-split{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,6vw,100px);align-items:center}
.head-split .cmp{width:min(100%,480px);margin-left:auto}
.stairs{list-style:none;padding:0;margin:0}
.stairs li{margin-bottom:64px}
.stairs li:nth-child(2){margin-left:8%}.stairs li:nth-child(3){margin-left:16%}.stairs li:nth-child(4){margin-left:24%}.stairs li:nth-child(5){margin-left:32%}
.stairs h2{font-size:clamp(38px,4.8vw,78px);margin-bottom:.2em}
.stairs li:last-child h2{color:var(--gold)}
.stairs p{max-width:40ch}
.faq-h{font-size:clamp(28px,2.8vw,42px);color:var(--mute);margin-bottom:64px}
.qa{display:grid;grid-template-columns:6fr 5fr;gap:clamp(24px,6vw,96px);margin-bottom:80px;align-items:start}
.qa:last-child{margin-bottom:0}
.qa h3{font-size:clamp(28px,2.8vw,42px);margin:0}
.qa p{margin:0;padding-top:.4em}
.next-band{text-align:center}
.next-band p{margin-inline:auto}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 28px}
.gallery .cmp figcaption{font-size:21px}
.reviews{columns:3 300px;column-gap:24px}
.rv{break-inside:avoid;margin:0 0 24px;background:var(--bg);padding:30px;transition:translate .4s var(--ease)}
.rv:hover{translate:0 -4px}
.rv blockquote{margin:14px 0 20px;font-size:16px;line-height:1.65}
.rv figcaption{font-weight:500;font-size:15px}
.rv figcaption span{color:var(--mute);font-weight:400;margin-left:6px}
.about{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--head))}
.about-pic{margin:0;position:relative;overflow:hidden;min-height:70svh}
.about-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.about-txt{align-self:center;padding:clamp(40px,4.4vw,72px)}
.about-txt h1{font-size:clamp(40px,3.6vw,54px)}
.hat{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,7vw,120px);align-items:center}
.hat .card3d{width:min(100%,420px);justify-self:center}
.hat h2{font-size:clamp(52px,6vw,100px);line-height:.95}
.hat p{font:italic 400 clamp(24px,2.2vw,32px)/1.3 var(--serif);color:var(--gold-l)}
.partners h2{font-size:clamp(26px,2.4vw,36px);color:var(--mute)}
.spread-line{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;max-width:none;margin:32px 0 0;font:500 clamp(40px,6vw,96px)/1 var(--serif);letter-spacing:-.02em}
.sec:not(.call) .call-num{color:var(--gold);margin-top:0}
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.info h2,.form h2{font-size:34px}
.info dl{margin:24px 0 0}
.info dt{font-size:14px;color:var(--gold);margin-top:24px}
.info dd{margin:6px 0 0}
.info dd a:not(.link){text-decoration:none}
.info dd a:not(.link):hover{color:var(--gold-l)}
.hours{border-collapse:collapse;width:100%;max-width:340px}
.hours th,.hours td{text-align:left;font-weight:400;padding:4px 0}
.hours td{text-align:right}
.hours .off{color:var(--mute)}
.form{background:var(--surf);padding:clamp(24px,4vw,48px);display:grid;gap:18px}
.form .sub{color:var(--mute);margin:-8px 0 6px}
.form label{display:block;font-size:15px}
.req{color:var(--gold)}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:8px;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);padding:14px 16px;border-radius:0;transition:border-color .3s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form button{margin-top:6px}
.consent{font-size:14px;color:var(--mute);margin:0}
.map{margin-top:clamp(56px,8vw,96px);min-height:420px;display:grid;place-items:center;text-align:center;background:var(--surf)}
.map iframe{width:100%;height:460px;border:0;display:block}
.map-ph{padding:48px 24px;display:grid;justify-items:center;gap:8px}
.map-ph h2{font-size:36px}
.map-ph p{color:var(--mute);margin:0 0 10px}
.map-ph .small{font-size:14px;max-width:44ch;margin-top:12px}
.thanks{text-align:center;min-height:55vh}
.thanks p{margin-inline:auto}
.thanks .next{justify-content:center}
.legal{max-width:820px;padding-bottom:96px}
.legal h1{font-size:clamp(44px,5vw,72px);margin-top:clamp(48px,7vw,96px)}
.legal h2{font-size:30px;margin-top:1.6em}
.legal p,.legal li{color:var(--mute)}

/* ===== Fuß: Spalten oben, Name groß unten ===== */
.foot{background:var(--deep);padding-top:80px;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.foot h2{font:500 16px/1.3 var(--sans);letter-spacing:0;margin-bottom:12px}
.foot p{font-size:15px;color:var(--mute);line-height:1.75}
.foot a{text-decoration:none}
.foot a:hover{color:var(--gold-l)}
.foot-mid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:40px}
.foot-mid p{margin:0}
.g-pill{display:inline-flex;align-items:center;gap:10px;background:var(--surf);border-radius:999px;padding:12px 20px;font-size:15px}
.foot .foot-word{margin:40px 0 0;max-width:none;text-align:center;font:500 21vw/.78 var(--serif);letter-spacing:-.03em;color:var(--word);user-select:none;white-space:nowrap}
.foot-last{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;padding-bottom:28px;font-size:14px;color:var(--mute)}


/* 3D-Karte: Foto leicht gedreht, Goldebene dahinter, folgt der Maus */
.card3d{margin:0;perspective:1400px}
.card3d-in{position:relative;transform:rotateY(-8deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;box-shadow:-22px 30px 55px rgba(0,0,0,.55),-8px 12px 22px rgba(0,0,0,.35);will-change:transform}
.card3d-in::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateZ(-60px) scale(.94) translate(28px,26px);filter:blur(1px);opacity:.9}
.card3d-in img{position:relative;display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:0% center;transform:translateZ(1px);backface-visibility:hidden}
.card3d-in::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 42%);pointer-events:none;transform:translateZ(2px)}
.card3d:hover .card3d-in{box-shadow:-10px 34px 70px rgba(0,0,0,.6),0 14px 26px rgba(201,162,75,.22)}


/* Schwebende Knöpfe */
.fab{position:fixed;right:18px;z-index:45;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .25s var(--ease)}
.fab:hover{transform:scale(1.07)}
.fab svg{width:26px;height:26px}
.fab-wa{bottom:18px;background:#25D366;color:#fff}
.fab-tel{bottom:86px;background:var(--gold);color:var(--bg);display:none}

/* Cookie-Hinweis */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin-inline:auto;background:var(--surf);padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.6);transform:translateY(130%);transition:transform .45s var(--ease);font-size:15px}
.cookie-banner.show{transform:none}
.cookie-banner p{margin:0 0 14px;color:var(--mute);max-width:none}
.cookie-banner .cookie-actions{margin:0}
.cookie-actions{display:flex;gap:10px;justify-content:flex-end}
.cookie-actions button{font:500 14px/1 var(--sans);padding:14px 18px;cursor:pointer;border:1.5px solid var(--gold)}
.btn-decline{background:transparent;color:var(--ink)}
.btn-accept{background:var(--gold);color:var(--bg)}

/* ===== Bewegung ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s var(--ease) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
/* Auftritt der Startseite: Buchstaben steigen einzeln, Luisa öffnet sich von unten */
.mono-word span{animation:letter 1.3s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 100ms)}
@keyframes letter{from{opacity:0;transform:translateY(42%)}}
.mono-pic{animation:shutter 1.4s var(--ease) .35s both}
.mono-pic img{animation:settle 1.8s var(--ease) .35s both}
@keyframes shutter{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes settle{from{transform:scale(1.12)}}
.mono-l,.mono-r{animation:rise .8s var(--ease) .3s both}
.mono-r{animation-delay:.42s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
/* Abschnitte: Teile treten gestaffelt auf, Bilder öffnen sich wie ein Verschluss */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
.js .shutter{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease)}
.js .shutter.in{clip-path:inset(0 0 -60px 0)}
.js .shutter img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.js .shutter.in img{transform:none}

/* Tablet */
@media (max-width:1080px){
  .nav,.head-cta{display:none}
  .menu{display:block;margin-left:auto}
  .menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-content:center;gap:7px}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary span{display:block;width:26px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
  .menu[open] summary span:first-child{transform:translateY(4.5px) rotate(45deg)}
  .menu[open] summary span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
  .menu nav{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - 100%);overflow:auto;background:var(--bg);padding:24px var(--m);display:flex;flex-direction:column;gap:4px;animation:rise .35s var(--ease) both}
  .menu nav a:not(.btn){font:500 38px/1.5 var(--serif);text-decoration:none;padding:6px 0}
  .menu nav a[aria-current]{color:var(--gold)}
  .menu nav .btn{margin-top:28px}
  .menu .m-tel{text-align:center;color:var(--gold);margin-top:14px;text-decoration:none}
  .mono{grid-template-columns:1fr 1fr;align-content:end}
  .mono-pic{height:82%;left:auto;right:0}
  .mono-l{grid-column:1;grid-row:1}
  .mono-r{grid-column:1;grid-row:2;justify-self:start}
  .show,.svc-grid,.field-grid,.head-split,.hat{grid-template-columns:1fr}
  .show-pic{justify-self:start}
  .svc-pic{position:relative;top:0;max-width:520px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .salon,.about{grid-template-columns:1fr}
  .salon-pic{min-height:80svh}
  .contact{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* Handy: eigene Komposition */
@media (max-width:700px){
  :root{--head:68px}
  .card3d{perspective:none}
  .card3d-in{transform:none}
  .card3d-in::before{opacity:0}
  body{font-size:16px}
  .brand-name{font-size:22px}
  .mono{display:block;height:auto;min-height:0;max-height:none;padding:0 var(--m) 48px}
  .mono-word{position:relative;inset:auto;font-size:21.5vw;margin-top:12px}
  .mono-pic{position:relative;height:auto;width:min(80vw,400px);margin:-14vw auto 0}
  .mono-pic img{width:100%;height:auto}
  .mono-l{margin-top:28px}
  .mono-r{margin-top:18px;max-width:none}
  .mono h1{font-size:30px}
  .mono-l{padding-top:0}
  .btns .btn{flex:1 1 100%}
  .ticker-track{font-size:24px}
  .show-list{flex-direction:row;flex-wrap:wrap;gap:8px;margin:24px 0 28px}
  .show-list button{font-size:18px;background:var(--surf);padding:10px 14px}
  .show-list button[aria-pressed="true"]{translate:0 0;background:var(--gold);color:var(--bg)}
  .show-pic{width:100%}
  .svc-list b{font-size:38px}
  .salon-pic{min-height:68svh}
  .salon-txt{padding:56px var(--m)}
  .spread p{font-size:15vw}
  .spread-by{flex-direction:column;align-items:flex-start;gap:8px}
  .call-num{font-size:13.2vw}
  .call-foot{flex-direction:column;align-items:stretch}
  .stairs li{margin-left:0!important;padding-left:calc(var(--s,0) * 5vw);margin-bottom:44px}
  .stairs li:nth-child(2){--s:1}.stairs li:nth-child(3){--s:2}.stairs li:nth-child(4){--s:3}.stairs li:nth-child(5){--s:4}
  .qa{grid-template-columns:1fr;gap:12px;margin-bottom:56px}
  .gallery{grid-template-columns:1fr;gap:48px}
  .about-txt{padding:40px var(--m) 24px}
  .about-txt h1{font-size:32px}
  .about-pic{min-height:46svh}
  .contact-head .contact-pic{display:none}
  .spread-line{flex-direction:column;font-size:13vw}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .fab-tel{display:grid}
  .cookie-banner{bottom:12px;left:12px;right:12px}
  .next .btn{flex:1 1 100%}
}

/* ===================== Varianten – festgelegt: A Schleier & Licht ===================== */
/* Gemeinsam: Vorher/Nachher-Auswahl als Bildkacheln */
.show-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 32px;width:100%;flex-direction:initial}
.show-list button{position:relative;display:block;padding:0;border:0;background:var(--surf);overflow:hidden;cursor:pointer;text-align:left;translate:none!important;outline-offset:3px}
.show-list button img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:brightness(.55) saturate(.8);transition:filter .4s,transform .7s var(--ease)}
.show-list button span{position:absolute;left:10px;right:10px;bottom:9px;font:500 16px/1.1 var(--serif);color:var(--ink);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.show-list button:hover img{filter:brightness(.85);transform:scale(1.06)}
.show-list button[aria-pressed="true"]{outline:2px solid var(--gold);background:var(--surf);color:inherit}
.show-list button[aria-pressed="true"] img{filter:none}
.show-list button[aria-pressed="true"] span{color:var(--gold-l)}

/* Gemeinsam: Leistungen als Kacheln */
.svc-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.svc-side{position:sticky;top:calc(var(--head) + 40px)}
.svc-side .svc-pic{position:static;width:min(100%,340px);margin-top:36px}
.svc-tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.svc-tiles li{display:flex}
.svc-tiles a:not(.btn){flex:1;display:flex;flex-direction:column;gap:10px;min-height:250px;padding:32px;background:var(--surf);text-decoration:none;transition:background .4s,color .4s,translate .5s var(--ease)}
.svc-tiles svg{width:50px;height:50px;margin-bottom:auto;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s,transform .6s var(--ease)}
.svc-tiles b{font:500 clamp(28px,2.4vw,38px)/1.05 var(--serif);letter-spacing:-.01em}
.svc-tiles span{color:var(--mute);transition:color .4s}
.svc-tiles a:not(.btn):hover{background:var(--gold);color:var(--bg);translate:0 -6px}
.svc-tiles a:hover svg{stroke:var(--bg);transform:rotate(-8deg) scale(1.08)}
.svc-tiles a:hover span{color:var(--bg)}
.svc-quote{flex-direction:column;justify-content:space-between;gap:24px;padding:32px;box-shadow:inset 0 0 0 1.5px var(--gold)}
.svc-quote p{margin:0;font:italic 400 clamp(26px,2.2vw,34px)/1.25 var(--serif);color:var(--gold-l)}
.svc-quote .btn{align-self:flex-start}

/* --- Variante A: Schleier & Licht – Luisa verschleiert im Hintergrund, Überschrift groß vorne --- */
:root[data-variante="a"] .mono{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;align-content:center;gap:0 40px;background:radial-gradient(45% 60% at 78% 45%,color-mix(in srgb,var(--gold) 13%,transparent),transparent 70%)}
:root[data-variante="a"] .mono-pic{left:auto;right:3%;margin:0;height:100%;opacity:.5;filter:saturate(.8) brightness(.85)}
:root[data-variante="a"] .mono-word{inset:auto 0 2% 0;font-size:16vw;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--gold) 50%,transparent)}
:root[data-variante="a"] .mono-l{grid-column:1;grid-row:1;align-self:end;padding-top:0}
:root[data-variante="a"] .mono h1{font-size:clamp(46px,5.4vw,92px);line-height:.95}
:root[data-variante="a"] .mono-r{grid-column:1;grid-row:2;justify-self:start;max-width:540px;margin-top:22px}
:root[data-variante="a"] :is(.show,.svc,.field,.voice){background-image:radial-gradient(45% 55% at 92% 8%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 70%),radial-gradient(40% 50% at 4% 96%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 70%)}


@media (max-width:1080px){
  .svc-grid{grid-template-columns:1fr}
  .svc-side{position:static}
}
@media (max-width:700px){
  .show-list{grid-template-columns:repeat(4,1fr);gap:8px}
  .show-list button span{display:none}
  .svc-tiles{grid-template-columns:1fr}
  .svc-tiles a:not(.btn){min-height:0}
  .svc-side .svc-pic{width:min(100%,300px)}
  /* A: Luisa als Schleier hinter dem Text, Überschrift sofort sichtbar */
  :root[data-variante="a"] .mono{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - var(--head));padding-top:40px}
  :root[data-variante="a"] .mono-pic{position:absolute;inset:0 0 auto auto;width:100%;height:80%;margin:0;opacity:.4}
  :root[data-variante="a"] .mono-pic img{width:100%;height:100%;object-fit:cover;object-position:center top}
  :root[data-variante="a"] .mono-word{position:absolute;inset:14px 0 auto;font-size:21vw;margin:0}
  :root[data-variante="a"] .mono h1{font-size:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-r]{opacity:1!important;transform:none!important}
  .js .shutter{clip-path:none!important}
  .js .shutter img{transform:none!important}
  .mono-word,.mono-word span,.mono-pic,.salon-pic img{translate:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Bildband: vier Ergebnisse nebeneinander, ungleich breit */
.band{display:flex;height:68svh;min-height:420px}
.band a{flex:var(--g,2);position:relative;overflow:hidden;transition:flex-grow .5s var(--ease)}
.band a:nth-child(1){--g:5}.band a:nth-child(2){--g:2}.band a:nth-child(3){--g:3}.band a:nth-child(4){--g:2}
.band a:hover{flex-grow:6}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band-cap{margin-top:16px}
.contact-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.contact-pic{margin:0;height:min(520px,52vh)}
.contact-pic img{height:100%;width:auto}
@media (max-width:700px){.band{flex-wrap:wrap;height:84svh}.band a:nth-child(1),.band a:nth-child(4){flex:0 0 64%}.band a:nth-child(2),.band a:nth-child(3){flex:0 0 36%}.band a{height:50%}}

.sec:not(.call) .call-num{margin-bottom:clamp(40px,6vw,72px)}

/* ===================== Neuer Schwerpunkt (10.11.2026) ===================== */
/* Logo als Wortmarke */
.brand img{height:46px;width:auto;display:block}
.foot-logo{margin-top:48px}
.foot-logo img{width:100%;height:auto;opacity:.22}
/* Hero: goldene Haarsträhnen im Hintergrund (nach „Background Paths“, 21st.dev) */
.strands{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.strands path{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.35;stroke-dasharray:1400;stroke-dashoffset:1400;animation:strand 3.2s var(--ease) forwards,sway 9s ease-in-out 3.2s infinite alternate}
.strands path:nth-child(2){animation-delay:.25s,3.4s;opacity:.25}
.strands path:nth-child(3){animation-delay:.5s,3.6s;opacity:.3}
.strands path:nth-child(4){animation-delay:.75s,3.8s;opacity:.18}
.strands path:nth-child(5){animation-delay:1s,4s;opacity:.22}
@keyframes strand{to{stroke-dashoffset:0}}
@keyframes sway{to{transform:translateX(-26px)}}
/* Zwei Leistungen */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(24px,3vw,48px)}
.duo-head{grid-column:1/-1;max-width:760px;margin-bottom:24px}
.duo-card{display:flex;flex-direction:column;text-decoration:none;background:var(--surf);padding:0 0 32px}
.duo-card figure{margin:0 0 28px;overflow:hidden}
.duo-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;transition:transform 1.2s var(--ease)}
.duo-card:hover img{transform:scale(1.04)}
.duo-card h3{font-size:clamp(34px,3.4vw,52px);padding:0 32px;margin-bottom:.25em}
.duo-card p{padding:0 32px;color:var(--mute)}
.duo-card .more{padding:0 32px;margin-top:auto;color:var(--gold);font-size:15px}
.duo-card:hover h3{color:var(--gold-l)}
.duo-note{grid-column:1/-1;font:italic 400 clamp(22px,2vw,28px)/1.3 var(--serif);color:var(--gold-l);margin-top:12px}
/* Auswahl-Kacheln: neun Ergebnisse */
.show-list{grid-template-columns:repeat(5,1fr)}
/* Haarverdichtungs-Seite */
.small-h{font-size:clamp(26px,2.4vw,34px);margin-top:28px}
.time{margin-top:24px;background:var(--surf);padding:32px;max-width:720px}
.time h3{font-size:30px}
.time p{margin:0}
.stairs h3{font-size:clamp(34px,4.2vw,64px);margin-bottom:.2em}
.faq-intro{font-size:19px;max-width:70ch;margin-bottom:64px}
.soft{color:var(--mute);font-size:15px}
.call-num span{display:inline-block;transition:transform .5s var(--ease)}
.call-num:hover span{transform:translateX(18px)}
@media (max-width:1080px){.duo{grid-template-columns:1fr}}
@media (max-width:700px){
  .brand img{height:38px}
  .show-list{grid-template-columns:repeat(5,1fr);gap:6px}
  .duo-card h3,.duo-card p,.duo-card .more{padding-inline:22px}
  .strands{opacity:.6}
}
@media (prefers-reduced-motion:reduce){.strands path{stroke-dashoffset:0!important;animation:none!important}}
.show-list button span{display:none}
.h1-split span{display:block}
.duo{padding-bottom:clamp(40px,6vw,80px)}
.head-split h1.h1-split{font-size:clamp(46px,5.2vw,84px)}
@media (max-width:700px){.head-split h1.h1-split{font-size:clamp(34px,10vw,44px)}}
/* Handy: Kundenstimme als normaler, fließender Satz statt über die Breite verteilt */
@media (max-width:700px){
  .spread{font:400 clamp(34px,10.5vw,46px)/1.12 var(--serif);letter-spacing:-.02em}
  .spread p{display:inline;font:inherit}
  .spread p+p::before,.spread span+span::before{content:" "}
  .spread span:empty{display:none}
}

/* Handy, Startseite: Logo oben blendet erst ein, wenn der goldene Schriftzug weggescrollt ist */
@media (max-width:700px){
  .logo-wait .head .brand{opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .logo-wait.logo-on .head .brand{opacity:1;transform:none;pointer-events:auto}
}

/* ===================== Handy: ruhiger Startbereich – Variante 2 „Großes Foto“ (festgelegt 10.11.2026) ===================== */
.m-intro{display:none}
@media (max-width:700px){
  /* gemeinsam: im Startbereich nur Titel, Untertitel und WhatsApp – der Rest steht direkt darunter */
  :root[data-handy] .mono-r > p:first-child,:root[data-handy] .mono .btn-line,:root[data-handy] .mono .rating{display:none}
  :root[data-handy] .mono .btns{margin-top:0;justify-content:flex-start}
  :root[data-handy] .mono .btn-gold{flex:0 1 auto;border-radius:999px;min-height:52px;padding:0 26px}
  :root[data-handy] .m-intro{display:block;padding:44px 22px 8px}
  :root[data-handy] .m-intro p{font-size:17px;line-height:1.65;margin-bottom:24px}
  :root[data-handy] .m-intro .btn{width:100%}
  :root[data-handy] .m-intro .rating{margin-top:20px;font-size:14px}
  :root[data-handy] .mono h1{line-height:1.03;letter-spacing:-.02em}
  :root[data-handy] .mono .lead{font-size:22px;margin-top:14px}
  :root[data-handy] .mono-r{margin-top:28px}


  /* 2 – Großes Foto: Luisa klar und groß, STILISTA zart darüber, Titel unten im Bild */
  :root[data-handy="2"] .mono{align-items:stretch;justify-content:space-between;min-height:calc(100svh - var(--head) - 40px);padding:16px 22px 34px}
  :root[data-handy="2"] .mono-word{position:relative;inset:auto;font-size:21vw;margin:0;z-index:2}
  :root[data-handy="2"] .mono-pic{inset:0;width:100%;height:100%;opacity:.95;filter:none;-webkit-mask-image:linear-gradient(transparent 0,#000 18%,#000 45%,rgba(0,0,0,.25) 82%);mask-image:linear-gradient(transparent 0,#000 18%,#000 45%,rgba(0,0,0,.25) 82%)}
  :root[data-handy="2"] .mono-pic img{object-position:center 18%}
  :root[data-handy="2"] .strands{display:none}
  :root[data-handy="2"] .mono-l{margin-top:auto}
  :root[data-handy="2"] .mono h1{font-size:34px;text-shadow:0 2px 24px rgba(0,0,0,.6)}


}

.menu nav .m-alt{margin-top:12px}
body:has(.menu[open]) .fab{display:none}

/* ===================== Apple-Stil „Ruhig & weich (iOS)“ für die ganze Seite (festgelegt 10.11.2026) ===================== */
/* gemeinsam: Milchglas-Kopf, runde Knöpfe, Druck-Feedback, weiche Ecken */
:root[data-apple] .head{background:rgba(17,17,17,.6);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
:root[data-apple] .btn{border-radius:999px;transition:transform .1s ease-out,background .3s,color .3s,border-color .3s}
:root[data-apple] .btn:active{transform:scale(.97)}
:root[data-apple] .cmp-stage,:root[data-apple] .duo-card,:root[data-apple] .form,:root[data-apple] .map,:root[data-apple] .rv,:root[data-apple] .time,:root[data-apple] .card3d-in img,:root[data-apple] .show-list button{border-radius:22px;overflow:hidden}
:root[data-apple] .cmp-tag{border-radius:999px}
:root[data-apple] .duo-card figure{border-radius:22px 22px 0 0;overflow:hidden}



/* 3 – Ruhig & weich (iOS-Gruppen): jeder Abschnitt als abgerundete Gruppe, viel Luft, kleinere Titel */
:root[data-apple="3"]{--bg:#0b0b0b;--surf:#1c1c1e}
:root[data-apple="3"] main>section:not(.mono):not(.salon):not(.m-intro){background:var(--surf);border-radius:30px;margin:0 var(--m) 18px;max-width:none}
:root[data-apple="3"] main>section.wrap{width:auto;padding-inline:clamp(22px,4vw,64px)}
:root[data-apple="3"] main>section .wrap{padding-inline:clamp(22px,4vw,64px)}
:root[data-apple="3"] .sec{padding-block:clamp(56px,7vw,110px)}
:root[data-apple="3"] main h2{font-size:clamp(32px,3.4vw,50px)}
:root[data-apple="3"] .salon{margin:0 var(--m) 18px;border-radius:30px;overflow:hidden}
:root[data-apple="3"] .ticker{margin:18px var(--m);border-radius:999px}
:root[data-apple="3"] .duo-card,:root[data-apple="3"] .rv,:root[data-apple="3"] .time,:root[data-apple="3"] .form{background:#2a2a2c}
:root[data-apple="3"] .call{background:var(--gold)!important}
:root[data-apple="3"] .foot{background:var(--bg)}
@media (max-width:700px){
  :root[data-apple="3"] main>section:not(.mono):not(.salon):not(.m-intro){margin:0 10px 12px;border-radius:24px}
  :root[data-apple] .salon,:root[data-apple] .call{border-radius:24px}
}
@media (prefers-reduced-transparency:reduce){:root[data-apple] .head{background:#111;-webkit-backdrop-filter:none;backdrop-filter:none}}

.form-err{margin:0;padding:14px 16px;border-radius:14px;background:rgba(255,120,100,.12);color:#ffc2b8;font-size:15px}
.form-err a{color:#fff}