/* ============================================================
   LET'S CUT! Neuss
   Farben stammen NICHT aus einer Design-Idee, sondern aus dem
   echten Laden: Leuchtschrift #D469BE, Türschild #85073D,
   Gutscheinkarte #760247 — gemessen aus Aufnahmen des Salons.
   Marke = Magenta. Grundton hell und freundlich wie der Salon,
   Filmszenen dunkel als Kontrast.
   ============================================================ */

@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;
  font-display:swap;src:url(../fonts/SpaceGrotesk.woff2) format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 700;
  font-display:swap;src:url(../fonts/Inter.woff2) format('woff2');
}

:root{
  /* ---- Marke (gemessen) ---- */
  --pink:        #C4006B;   /* Marken-Magenta, Hauptakzent */
  --pink-hell:   #FF5FB0;   /* Leuchtschrift-Pink — nur auf Dunkel */
  --pink-tief:   #7E0542;   /* Print-Beere, Flächen */
  --pink-hauch:  #FDF1F7;   /* Magenta auf 4 % — Karten, Streifen */

  /* ---- Grundton: hell wie der Salon ---- */
  --bg:          #FFFFFF;
  --bg-2:        #FAF6F9;
  --ink:         #17121B;   /* Text, und Grund der Filmszenen */
  --ink-2:       #221A28;
  --text:        #1C1622;
  --muted:       #6A6172;
  --line:        #ECE3EB;
  --line-dunkel: #34293B;

  /* Alt-Namen, damit bestehendes Markup weiterläuft */
  --brand-primary: var(--pink);
  --brand-primary-soft: var(--pink);
  --brand-secondary: var(--pink-tief);
  --brand-background: var(--bg);
  --brand-surface: var(--bg-2);
  --brand-surface-2: var(--pink-hauch);
  --brand-text: var(--text);
  --brand-muted: var(--muted);
  --brand-border: var(--line);
  --brand-glow: rgba(196,0,107,.28);
  --brand-gradient: linear-gradient(100deg,#C4006B 0%,#FF3D9E 55%,#7E0542 100%);

  --font-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 128px);
  --radius: 6px;
  --radius-lg: 14px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-cut: cubic-bezier(.7,0,.2,1);
  color-scheme: light;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
section[id],[id]:target{scroll-margin-top:96px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:clamp(15px,1.05vw,17px); line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-x:clip;
}
img,video,svg{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}
a,button,summary,label,[role="slider"]{touch-action:manipulation}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.03;
  letter-spacing:-.03em; margin:0; text-wrap:balance}
p{margin:0; text-wrap:pretty}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:2px}
::selection{background:var(--pink); color:#fff}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--pink);
  color:#fff; padding:12px 20px; font-weight:600}
.skip:focus{left:12px; top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
section{padding-block:var(--section-y); position:relative}
.eyebrow{font-family:var(--font-display); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pink); font-weight:600; margin-bottom:16px;
  display:flex; align-items:center; gap:11px}
.eyebrow::before{content:''; width:24px; height:2px; background:var(--pink); flex:none}
.h-xl{font-size:clamp(2.4rem,7vw,5rem)}
.h-lg{font-size:clamp(1.9rem,4.2vw,3.2rem)}
.h-md{font-size:clamp(1.3rem,2.3vw,1.9rem)}
.lead{font-size:clamp(1rem,1.45vw,1.15rem); color:var(--muted); max-width:62ch}
.muted{color:var(--muted)}

/* Dunkle Abschnitte (Film + Finale) */
.dark{background:var(--ink); color:#F6F1F6}
.dark .eyebrow{color:var(--pink-hell)}
.dark .eyebrow::before{background:var(--pink-hell)}
.dark .lead,.dark .muted{color:#B4A9B8}

/* ---------- Kopfzeile ---------- */
.hdr{position:fixed; inset:0 0 auto 0; z-index:90; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:12px var(--gutter);
  transition:background .35s var(--ease-out), box-shadow .35s, border-color .35s;
  border-bottom:1px solid transparent}
.hdr.solid{background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-bottom-color:var(--line); box-shadow:0 6px 30px -22px rgba(23,18,27,.5)}
/* über dem Video steht die Kopfzeile hell */
.hdr:not(.solid){color:#fff}
.hdr:not(.solid) .btn-ghost{border-color:rgba(255,255,255,.42); color:#fff; background:rgba(255,255,255,.08)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; padding-block:8px}
.brand svg{height:30px; width:auto}
.nav{display:flex; gap:24px; align-items:center}
.nav a{font-family:var(--font-display); font-size:.87rem; font-weight:500; text-decoration:none;
  transition:color .25s; position:relative; display:flex; align-items:center; min-height:44px}
.nav a::after{content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--pink); transition:width .3s var(--ease-out)}
.nav a:hover::after,.nav a:focus-visible::after{width:100%}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  padding:14px 26px; min-height:48px; border-radius:100px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease-out), background .25s, border-color .25s, color .25s, box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--pink); color:#fff; box-shadow:0 10px 26px -12px var(--brand-glow)}
.btn-primary:hover{background:#A80059; box-shadow:0 14px 32px -12px var(--brand-glow)}
.btn-ghost{border-color:var(--line); color:var(--text); background:#fff}
.btn-ghost:hover{border-color:var(--pink); color:var(--pink)}
.dark .btn-ghost{border-color:rgba(255,255,255,.3); color:#fff; background:rgba(255,255,255,.06)}
.dark .btn-ghost:hover{border-color:var(--pink-hell); color:var(--pink-hell)}
.btn-lg{padding:17px 34px; font-size:1rem; min-height:56px}
.btn-block{width:100%}

/* Mobile-Navigation */
.burger{display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:none; border:1.5px solid currentColor; border-radius:100px; cursor:pointer; color:inherit}
.burger span{display:block; width:17px; height:2px; background:currentColor; position:relative}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:17px; height:2px;
  background:currentColor}
.burger span::before{top:-6px} .burger span::after{top:6px}
.menu{position:fixed; inset:0; z-index:95; background:var(--bg); overscroll-behavior:contain;
  display:none; flex-direction:column; padding:88px var(--gutter) 32px; overflow-y:auto}
.menu.open{display:flex}
.menu a{font-family:var(--font-display); font-size:1.5rem; font-weight:600; text-decoration:none;
  padding:15px 0; border-bottom:1px solid var(--line); display:block}
.menu .btn{margin-top:26px}
.menu-close{position:absolute; top:16px; right:var(--gutter); width:46px;height:46px;
  background:none;border:1.5px solid var(--line);border-radius:100px;cursor:pointer;font-size:1.2rem}

/* ============================================================
   HERO — echtes Salonvideo, Logo darüber
   ============================================================ */
.hero{position:relative; min-height:100svh; display:grid; align-items:end;
  padding:120px var(--gutter) clamp(40px,7vh,72px); overflow:hidden; isolation:isolate; color:#fff}
.hero-media{position:absolute; inset:0; z-index:-2; background:var(--ink)}
.hero-media video,.hero-media img{width:100%; height:100%; object-fit:cover}
/* Verlauf: unten dunkel für Lesbarkeit, oben frei fürs Bild */
.hero-media::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,18,27,.62) 0%, rgba(23,18,27,.18) 32%,
             rgba(23,18,27,.66) 72%, rgba(23,18,27,.94) 100%)}
.hero-inner{position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; width:100%}
.hero-logo{width:min(430px,74vw); margin-bottom:24px}
.claim{font-family:var(--font-display); font-weight:700; letter-spacing:-.04em;
  font-size:clamp(2.3rem,7.4vw,5.4rem); line-height:.96; text-transform:uppercase; max-width:16ch}
.claim .line{display:block; transition:opacity .5s var(--ease-out), transform .6s var(--ease-out)}
.claim .line[data-state="off"]{opacity:.32; transform:translateY(6px)}
.claim .accent{color:var(--pink-hell)}
.hero-sub{margin-top:20px; max-width:46ch; font-size:clamp(1rem,1.4vw,1.16rem); color:#E6DCE6}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero-facts{display:flex; gap:22px; flex-wrap:wrap; margin-top:34px;
  font-size:.82rem; font-family:var(--font-display); color:#D6C9D6}
.hero-facts span{display:flex; align-items:center; gap:8px}
.hero-facts b{color:#fff; font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;background:var(--pink-hell);flex:none}
.scrollhint{position:absolute; bottom:16px; right:var(--gutter); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:#C3B6C3; display:flex;
  align-items:center; gap:10px; z-index:4}
.scrollhint i{display:block; width:34px; height:2px;
  background:linear-gradient(90deg,var(--pink-hell),transparent); animation:hint 2.1s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleX(.35);opacity:.45} 50%{transform:scaleX(1);opacity:1}}
/* Ton-Schalter, falls das Hero-Video Ton bekommt */
.hero-sound{position:absolute; top:88px; right:var(--gutter); z-index:5; width:44px; height:44px;
  border-radius:100px; border:1.5px solid rgba(255,255,255,.4); background:rgba(23,18,27,.4);
  color:#fff; cursor:pointer; display:none; place-items:center}

/* ============================================================
   BEWEGUNG — ein Prinzip: DER SCHNITT
   Nichts blendet ein. Alles wird aufgeschnitten und freigelegt.
   Ausschließlich clip-path, transform und opacity — das läuft
   auf der Grafikkarte und kostet kein Layout.
   ============================================================ */

/* Grundfall: von links freigeschnitten, mit leichtem Nachziehen */
.js [data-rv]{opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.js [data-rv].in{opacity:1; transform:none}
.js [data-rv][data-rv="cut"]{clip-path:inset(0 100% 0 0); transform:none; opacity:1;
  transition:clip-path .95s var(--ease-cut)}
.js [data-rv][data-rv="cut"].in{clip-path:inset(0 0 0 0)}
html.rv-notaus [data-rv]{opacity:1!important; transform:none!important; clip-path:none!important}

/* ---- Überschriften zeilenweise aufschneiden ---- */
.js .schnitt .zeile{display:block; overflow:hidden}
.js .schnitt .zeile > span{display:block; transform:translateY(105%);
  transition:transform .85s var(--ease-cut)}
.js .schnitt.in .zeile > span{transform:none}
.js .schnitt .zeile:nth-child(2) > span{transition-delay:.09s}
.js .schnitt .zeile:nth-child(3) > span{transition-delay:.18s}
.js .schnitt .zeile:nth-child(4) > span{transition-delay:.27s}

/* ---- Bilder: Schnitt öffnet sich, Motiv fährt aus dem Zoom heraus ---- */
.js .bild-schnitt{clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--ease-cut)}
.js .bild-schnitt.in{clip-path:inset(0 0 0 0)}
.js .bild-schnitt img{transform:scale(1.14); transition:transform 1.5s var(--ease-out)}
.js .bild-schnitt.in img{transform:scale(1)}

/* ---- Sanfter Parallax beim Scrollen (JS setzt --p von -1 bis 1) ---- */
.js .parallax{will-change:transform}
.js .parallax img{transform:translate3d(0, calc(var(--p, 0) * 22px), 0) scale(1.09)}

/* ---- Hero verabschiedet sich beim Wegscrollen ---- */
.js .hero-media{will-change:transform, opacity}
.js .hero-inner{will-change:transform, opacity}

/* ---- Fortschrittsklinge ganz oben ---- */
.fortschritt{position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background:transparent; pointer-events:none}
.fortschritt i{display:block; height:100%; width:0; background:var(--pink);
  box-shadow:0 0 14px rgba(196,0,107,.6)}

/* ---- Laufband: die Leistungen ziehen durch ---- */
.laufband{background:var(--ink); color:#fff; padding-block:20px; overflow:hidden;
  border-block:1px solid var(--line-dunkel)}
.laufband-spur{display:flex; width:max-content; will-change:transform;
  animation:lauf 46s linear infinite}
.laufband:hover .laufband-spur{animation-play-state:paused}
.laufband span{font-family:var(--font-display); font-size:clamp(1rem,2vw,1.5rem);
  font-weight:600; letter-spacing:-.01em; padding-inline:26px; display:flex;
  align-items:center; gap:26px; white-space:nowrap}
.laufband span::after{content:''; width:7px; height:7px; border-radius:50%;
  background:var(--pink); flex:none}
@keyframes lauf{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}

/* ---- Magnetische Hauptschaltflächen (nur Zeigegeräte) ---- */
@media (hover:hover) and (pointer:fine){
  .js .magnet{will-change:transform}
  .js .magnet{transform:translate3d(var(--mx,0),var(--my,0),0)}
  .js .magnet:hover{transition:none}
}

/* ---- Zahlen zählen hoch ---- */
.stat b{font-variant-numeric:tabular-nums}

/* ---- Karten werden ebenfalls aufgeschnitten, nicht eingeblendet ---- */
.js .way[data-rv],.js .look[data-rv],.js .stat[data-rv]{
  opacity:1; transform:none; clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-cut), border-color .3s,
             transform .3s var(--ease-out), background .3s, box-shadow .3s}
.js .way[data-rv].in,.js .look[data-rv].in,.js .stat[data-rv].in{clip-path:inset(0 0 0 0)}

/* Über der Look-Karte fährt eine Magenta-Klinge durch */
.look-bild::after{content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--pink); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease-cut); z-index:3}
.look:hover .look-bild::after,.look:focus-within .look-bild::after{transform:scaleX(1)}

/* Abschnittswechsel hell/dunkel bekommt eine schräge Schnittkante */
.laufband{clip-path:polygon(0 0, 100% 6px, 100% 100%, 0 calc(100% - 6px))}

@media (prefers-reduced-motion: reduce){
  .js .way[data-rv],.js .look[data-rv],.js .stat[data-rv]{clip-path:none!important}
  .look-bild::after{display:none}
  .laufband{clip-path:none}
}

/* ============================================================
   FILM — vier Szenen, jede mit eigenem Video
   ============================================================ */
.transform{padding-block:0; background:var(--ink)}
.transform-track{height:400vh; position:relative}
.transform-stage{position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; align-items:end; color:#fff}
.tf-media{position:absolute; inset:0; z-index:0}
.tf-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .75s var(--ease-out)}
.tf-media video.on{opacity:1}
.tf-media::after{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(23,18,27,.55) 0%, rgba(23,18,27,.12) 30%,
             rgba(23,18,27,.72) 74%, rgba(23,18,27,.96) 100%)}
.tf-inner{position:relative; z-index:2; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding:0 var(--gutter) clamp(76px,11vh,120px)}
.tf-step{position:absolute; max-width:24ch; opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); pointer-events:none}
.tf-step.active{opacity:1; transform:none; position:relative; pointer-events:auto}
.tf-num{font-family:var(--font-display); font-size:.72rem; letter-spacing:.22em;
  color:var(--pink-hell); margin-bottom:14px; font-weight:600}
.tf-title{font-size:clamp(1.9rem,5vw,3.6rem); line-height:1.02; margin-bottom:14px}
.tf-text{color:#D8CDD8; max-width:44ch}
.tf-progress{position:absolute; left:var(--gutter); right:var(--gutter); bottom:44px;
  height:2px; background:rgba(255,255,255,.16); z-index:3}
.tf-progress i{display:block; height:2px; width:0; background:var(--pink-hell)}
.tf-marks{position:absolute; left:var(--gutter); right:var(--gutter); bottom:56px; z-index:3;
  display:flex; justify-content:space-between; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:#8E8291; font-family:var(--font-display)}
.tf-marks span.on{color:var(--pink-hell)}

/* ============================================================
   Wege
   ============================================================ */
.grid{display:grid; gap:14px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.way{position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:210px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--bg-2); text-decoration:none; overflow:hidden;
  transition:border-color .3s, transform .3s var(--ease-out), background .3s, box-shadow .3s}
.way:hover{border-color:var(--pink); transform:translateY(-4px); background:var(--pink-hauch);
  box-shadow:0 18px 40px -28px var(--brand-glow)}
.way-ico{width:30px; height:30px; margin-bottom:auto; color:var(--pink)}
.way-t{font-family:var(--font-display); font-size:1.14rem; font-weight:600; margin-bottom:5px}
.way-d{font-size:.88rem; color:var(--muted); line-height:1.5}
.way-go{margin-top:14px; font-family:var(--font-display); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pink); font-weight:600; display:flex; align-items:center; gap:7px}
.way-go::after{content:'→'; transition:transform .3s var(--ease-out)}
.way:hover .way-go::after{transform:translateX(5px)}

/* ============================================================
   Looks — echte Ergebnisse
   ============================================================ */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
.chip{padding:11px 18px; min-height:44px; border:1.5px solid var(--line); background:#fff;
  border-radius:100px; font-size:.84rem; font-family:var(--font-display); font-weight:500;
  cursor:pointer; color:var(--muted);
  transition:border-color .25s, color .25s, background .25s}
.chip:hover{border-color:var(--pink); color:var(--pink)}
.chip[aria-pressed="true"]{background:var(--pink); border-color:var(--pink); color:#fff; font-weight:600}

.look{border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2);
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .35s var(--ease-out), box-shadow .35s}
.look:hover{transform:translateY(-4px); box-shadow:0 22px 48px -30px rgba(23,18,27,.45)}
.look-bild{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--pink-hauch)}
.look-bild img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.look:hover .look-bild img{transform:scale(1.04)}
.look-badge{position:absolute; top:12px; left:12px; padding:6px 13px; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; font-family:var(--font-display); font-weight:600;
  background:var(--pink); color:#fff; border-radius:100px; z-index:2}
.look-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1}
.look-t{font-family:var(--font-display); font-size:1.05rem; font-weight:600}
.look-meta{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px;
  border:1px solid var(--line); border-radius:100px; color:var(--muted); background:#fff}
.look-body .btn{margin-top:auto}

/* Vorher/Nachher-Regler (falls Paare vorliegen) */
.ba{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--pink-hauch); touch-action:pan-y}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--split,50%))}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--split,50%); width:3px;
  background:#fff; box-shadow:0 0 16px rgba(0,0,0,.4); cursor:ew-resize}
.ba-handle::after{content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:#fff; color:var(--pink);
  display:grid; place-items:center; font-size:.95rem; box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ba-tag{position:absolute; top:12px; padding:5px 11px; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; font-family:var(--font-display); font-weight:600;
  background:rgba(255,255,255,.94); color:var(--text); border-radius:100px; z-index:2}
.ba-tag.l{left:12px} .ba-tag.r{right:12px; background:var(--pink); color:#fff}

/* ============================================================
   Bildbänder — Salon-Impressionen
   ============================================================ */
.band{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.band figure{margin:0; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10;
  background:var(--pink-hauch)}
.band img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.band figure:hover img{transform:scale(1.05)}
.band figure:first-child{grid-column:span 2; grid-row:span 2; aspect-ratio:auto}

/* ============================================================
   Team
   ============================================================ */
.team-foto{border-radius:var(--radius-lg); overflow:hidden; margin-bottom:26px}
.tcard{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; transition:border-color .3s, transform .3s var(--ease-out)}
.tcard:hover{border-color:var(--pink); transform:translateY(-4px)}
.tface{aspect-ratio:3/4; display:grid; place-items:center; position:relative; background:var(--pink-hauch)}
.tface img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tinitial{font-family:var(--font-display); font-size:3.4rem; font-weight:700; color:var(--pink)}
.tbody{padding:18px}
.tname{font-family:var(--font-display); font-size:1.12rem; font-weight:600}
.trole{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pink); margin-top:4px}
.tquote{font-size:.9rem; color:var(--muted); margin-top:11px; line-height:1.55}

/* Hinweisbox für offene Freigaben */
.pending{border:1.5px dashed var(--pink); border-radius:var(--radius-lg); padding:22px 24px;
  background:var(--pink-hauch); display:flex; gap:15px; align-items:flex-start}
.pending svg{flex:none; width:22px; height:22px; color:var(--pink); margin-top:2px}
.pending h3{font-family:var(--font-display); font-size:1rem; margin-bottom:6px}
.pending p{font-size:.89rem; color:var(--muted)}

/* ============================================================
   Leistungen
   ============================================================ */
.svc{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start;
  padding:20px 0; border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc-t{font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:4px}
.svc-d{font-size:.9rem; color:var(--muted); max-width:56ch}
.svc-time{font-family:var(--font-display); font-size:.8rem; font-weight:600; color:var(--pink);
  white-space:nowrap; padding-top:3px}

/* ============================================================
   Stylingberater
   ============================================================ */
.quiz{border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff;
  padding:clamp(24px,4vw,44px); position:relative; overflow:hidden;
  box-shadow:0 24px 60px -46px rgba(23,18,27,.55)}
.quiz::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--brand-gradient)}
.q-bar{height:3px; background:var(--line); margin-bottom:26px; border-radius:3px; overflow:hidden}
.q-bar i{display:block; height:100%; width:0; background:var(--pink); transition:width .5s var(--ease-out)}
.q-step{display:none} .q-step.on{display:block; animation:fade .45s var(--ease-out)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q-count{font-family:var(--font-display); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:11px}
.q-title{font-size:clamp(1.35rem,2.8vw,2rem); margin-bottom:20px}
.q-opts{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.q-opt{text-align:left; padding:17px 19px; min-height:64px; border:1.5px solid var(--line);
  background:#fff; border-radius:var(--radius); cursor:pointer;
  font-family:var(--font-display); font-size:.95rem; font-weight:500;
  transition:border-color .25s, background .25s, transform .25s var(--ease-out)}
.q-opt:hover{border-color:var(--pink); transform:translateY(-2px)}
.q-opt[aria-pressed="true"]{border-color:var(--pink); background:var(--pink-hauch)}
.q-opt small{display:block; font-family:var(--font-body); font-size:.8rem;
  color:var(--muted); margin-top:4px; font-weight:400}
.q-nav{display:flex; gap:11px; margin-top:24px; flex-wrap:wrap}
.q-result{display:none} .q-result.on{display:block; animation:fade .5s var(--ease-out)}
.q-rec{border:1.5px solid var(--pink); border-radius:var(--radius); background:var(--pink-hauch);
  padding:22px; margin-bottom:18px}
.q-rec h3{font-family:var(--font-display); font-size:1.25rem; margin-bottom:8px; color:var(--pink)}
.q-sum{display:grid; gap:7px; margin:18px 0; font-size:.9rem}
.q-sum div{display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--line)}
.q-sum span:first-child{color:var(--muted)}

/* ============================================================
   Salon / Zahlen / Stimmen
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,68px); align-items:center}
.figure{border-radius:var(--radius-lg); overflow:hidden; background:var(--pink-hauch);
  aspect-ratio:4/3; position:relative}
.figure img{width:100%; height:100%; object-fit:cover}
.figure-note{position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:26px; font-size:.8rem; color:var(--muted)}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.stat{background:var(--pink-hauch); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 18px; text-align:center}
.stat b{display:block; font-family:var(--font-display); font-size:clamp(1.7rem,3.6vw,2.5rem);
  font-weight:700; color:var(--pink); line-height:1}
.stat span{display:block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-top:7px}

.rev{border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px;
  background:#fff; display:flex; flex-direction:column; gap:12px}
.stars{color:var(--pink); letter-spacing:.14em; font-size:.92rem}
.rev p{font-size:.94rem; line-height:1.6}
.rev footer{font-size:.8rem; color:var(--muted); margin-top:auto;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Zitatband aus dem Salonvideo */
.zitat{background:var(--pink); color:#fff; text-align:center}
.zitat p{font-family:var(--font-display); font-size:clamp(1.35rem,3.4vw,2.4rem);
  font-weight:600; line-height:1.2; max-width:20ch; margin-inline:auto; letter-spacing:-.02em}
.zitat small{display:block; margin-top:16px; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.82}

/* ============================================================
   Anfahrt
   ============================================================ */
.mapbox{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  position:relative; aspect-ratio:16/10; background:var(--bg-2)}
.map-consent{position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:26px; gap:13px; align-content:center; background:var(--pink-hauch)}
.map-consent h3{font-family:var(--font-display); font-size:1.05rem}
.map-consent p{font-size:.85rem; color:var(--muted); max-width:44ch; margin-inline:auto}
.mapbox iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.hours{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.hours div{display:flex; justify-content:space-between; gap:16px; padding:13px 18px;
  font-size:.92rem; font-variant-numeric:tabular-nums; border-bottom:1px solid var(--line)}
.hours div:last-child{border-bottom:0}
.hours div.today{background:var(--pink-hauch)}
.hours div.today b{color:var(--pink)}
.hours dt{color:var(--muted)}
.contact-list{display:grid; gap:9px; margin-top:20px}
.contact-list a,.contact-list button{display:flex; align-items:center; gap:13px; padding:15px 18px;
  min-height:56px; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none;
  background:#fff; cursor:pointer; text-align:left; width:100%;
  transition:border-color .3s, background .3s}
.contact-list a:hover,.contact-list button:hover{border-color:var(--pink); background:var(--pink-hauch)}
.contact-list svg{width:19px; height:19px; color:var(--pink); flex:none}
.contact-list b{font-family:var(--font-display); font-size:.95rem; display:block}
.contact-list small{color:var(--muted); font-size:.8rem}

/* ============================================================
   FAQ
   ============================================================ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:19px 0; cursor:pointer; font-family:var(--font-display); font-size:1.02rem;
  font-weight:500; display:flex; justify-content:space-between; gap:20px; align-items:center;
  list-style:none; min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--pink); font-size:1.4rem; flex:none;
  transition:transform .3s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px; color:var(--muted); font-size:.94rem; max-width:72ch}

/* ============================================================
   Finale + Fußzeile
   ============================================================ */
.finale{text-align:center; position:relative; overflow:hidden}
.finale .h-xl{margin-bottom:18px}
.finale .hero-cta{justify-content:center}

.ftr{background:var(--ink); color:#CFC4CF; padding-block:52px 96px}
.ftr-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px}
.ftr h4{font-family:var(--font-display); font-size:.73rem; letter-spacing:.16em;
  text-transform:uppercase; color:#877B88; margin-bottom:12px}
.ftr a{text-decoration:none; color:#CFC4CF; font-size:.9rem; display:flex; align-items:center;
  min-height:44px; transition:color .25s}
.ftr a:hover{color:var(--pink-hell)}
.ftr-legal{margin-top:38px; padding-top:22px; border-top:1px solid var(--line-dunkel);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:#877B88}

.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:88; display:none;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); gap:10px; box-shadow:0 -8px 30px -22px rgba(23,18,27,.6)}
.sticky-cta .btn{flex:1}
.sticky-cta .btn-ghost{flex:0 0 56px; padding:0}

/* ============================================================
   Terminstrecke
   ============================================================ */
.steps{display:flex; gap:5px; margin-bottom:28px; flex-wrap:wrap}
.step-pill{flex:1; min-width:88px; padding:10px 6px; text-align:center; font-size:.69rem;
  letter-spacing:.08em; text-transform:uppercase; font-family:var(--font-display); font-weight:600;
  border-top:3px solid var(--line); color:var(--muted);
  transition:border-top-color .3s, color .3s}
.step-pill.on{border-top-color:var(--pink); color:var(--pink)}
.step-pill.done{border-top-color:var(--pink); color:var(--text)}
.field{display:block; margin-bottom:17px}
.field > span{display:block; font-family:var(--font-display); font-size:.83rem;
  font-weight:600; margin-bottom:7px}
.field .hint{font-family:var(--font-body); font-size:.78rem; color:var(--muted);
  font-weight:400; display:block; margin-top:4px}
.inp{width:100%; padding:14px 16px; min-height:52px; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--radius); transition:border-color .25s}
.inp:focus{border-color:var(--pink); outline:none}
.inp[aria-invalid="true"]{border-color:#D93A5B}
textarea.inp{min-height:110px; resize:vertical; line-height:1.6}
.err{color:#C42846; font-size:.83rem; margin-top:6px; display:none; font-weight:500}
.err.on{display:block}
.check{display:flex; gap:12px; align-items:flex-start; font-size:.88rem;
  color:var(--muted); line-height:1.5; cursor:pointer; padding:7px 0}
.check input{width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--pink)}
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.slot{padding:13px 8px; min-height:48px; border:1.5px solid var(--line); background:#fff;
  border-radius:var(--radius); font-family:var(--font-display); font-size:.92rem; font-weight:500;
  cursor:pointer; transition:border-color .25s, background .25s, color .25s}
.slot:hover{border-color:var(--pink)}
.slot[aria-pressed="true"]{background:var(--pink); color:#fff; border-color:var(--pink)}
.notice{border:1px solid var(--line); border-left:4px solid var(--pink);
  border-radius:var(--radius); padding:17px 19px; background:var(--pink-hauch);
  font-size:.89rem; color:var(--muted); line-height:1.6}
.notice b{color:var(--text)}
.done-mark{width:62px; height:62px; border-radius:50%; background:var(--pink); color:#fff;
  display:grid; place-items:center; margin:0 auto 20px; font-size:1.7rem}

/* ============================================================
   Responsiv
   ============================================================ */
@media (max-width:1024px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .band{grid-template-columns:repeat(2,1fr)}
  .band figure:first-child{grid-column:span 2; grid-row:auto; aspect-ratio:16/10}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .hdr .btn-primary{display:none}
  .g-3,.g-2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .sticky-cta{display:flex}
  body{padding-bottom:72px}
  .ftr{padding-bottom:104px}
  .hero{padding-bottom:96px}
  .hero-facts{gap:12px; font-size:.75rem}
  .scrollhint{display:none}
  .transform-track{height:340vh}
  .tf-step{max-width:none}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .q-opts{grid-template-columns:1fr}
  .band{grid-template-columns:1fr}
}

/* ============================================================
   Bewegung reduzieren
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  [data-rv]{opacity:1!important; transform:none!important; clip-path:none!important}
  /* Alle Schnitt-Effekte auflösen — Inhalte stehen sofort und ruhig da */
  .schnitt .zeile > span{transform:none!important}
  .bild-schnitt{clip-path:none!important}
  .bild-schnitt img,.parallax img{transform:none!important}
  .laufband-spur{animation:none!important; flex-wrap:wrap; width:auto}
  .laufband span{padding-block:4px}
  .magnet{transform:none!important}
  .fortschritt{display:none}
  .claim .line[data-state="off"]{opacity:1; transform:none}
  .transform-track{height:auto}
  .transform-stage{position:static; height:auto; display:block}
  .tf-inner{padding-block:0}
  .tf-step{position:static; opacity:1; transform:none; max-width:none; margin-bottom:0;
    padding:34px 0; pointer-events:auto}
  .tf-media{position:relative; height:52vh}
  .tf-media video{position:absolute; opacity:1}
  .tf-media video:not(.on){display:none}
  .tf-progress,.tf-marks{display:none}
}

@media (forced-colors: active){
  .btn,.chip,.slot,.way,.tcard{border:1px solid currentColor}
  .stat b,.tinitial{color:CanvasText}
}

@media print{
  .hdr,.sticky-cta,.scrollhint,.menu,.hero-media,.tf-media{display:none!important}
  body{background:#fff; color:#000}
}