/* ============================================================
   Body Couture — Design-System
   Nude, Weiß, Anthrazit. Runde Formen, ruhige Typografie.
   Dunkel wird nur für Flächen benutzt, nicht für Knöpfe:
   Ein schwarzer Knopf wirkt hart, die Marke soll warm wirken.
   ============================================================ */

:root{
  --nude:        #E3BC9A;
  --nude-tief:   #C08F63;   /* nur für Flächen, Ränder und Linien — für Text zu hell */
  --nude-satt:   #9C6535;
  /* Für kleine Texte in Versalien. --nude-tief liegt auf hellem Grund bei
     2,5 zu 1 und ist damit unlesbar, --nude-satt reicht auf zwei von vier
     Flächen nicht. Dieser Ton schafft überall mindestens 4,9 zu 1. */
  --nude-text:   #8F5B2C;   /* nur für Text und Ränder auf hellem Grund */
  --nude-hell:   #EDCEB2;   /* Knopf beim Überfahren: eine Spur heller */
  --nude-zart:   #F6ECE2;
  --nude-hauch:  #FBF6F1;
  --dunkel:      #1E1D1C;
  --dunkel-2:    #2A2826;
  --tinte:       #222222;
  --grau:        #5C5751;   /* dunkler: dünne Schrift wirkt sonst schwach */
  --grau-hell:   #9A938C;
  --grund:       #F7F5F3;
  --weiss:       #FFFFFF;
  --linie:       rgba(30,29,28,.10);
  --linie-stark: rgba(30,29,28,.16);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", "Helvetica Neue", Arial, sans-serif;

  --rund:       24px;
  --rund-klein: 16px;
  --pille:      999px;
  --schatten:      0 14px 40px rgba(30,29,28,.06);
  --schatten-tief: 0 24px 64px rgba(30,29,28,.10);

  --breite: 1180px;
  --luft:   clamp(3.4rem, 7vw, 6.5rem);
}

*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;overflow-x:clip;max-width:100%;
  background:var(--weiss);color:var(--tinte);
  font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.16;letter-spacing:-.005em;margin:0 0 .5em;color:var(--dunkel)}
h1{font-size:clamp(2.3rem,5.4vw,4rem)}
h2{font-size:clamp(1.8rem,3.7vw,2.75rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:500;color:var(--dunkel)}
a{color:var(--dunkel)}

.huelle{width:min(var(--breite),92vw);margin-inline:auto}
.eng{width:min(720px,92vw);margin-inline:auto}
section{padding:var(--luft) 0}

.marke-label{
  display:inline-block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--nude-text);font-weight:500;margin-bottom:1rem;
}
.auf-dunkel .marke-label{color:var(--nude)}
.kopfzeile{max-width:60ch;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.kopfzeile.mitte{margin-inline:auto;text-align:center}
.kopfzeile p{color:var(--grau);font-size:1.15rem}

.zart{background:var(--nude-hauch)}
.nude{background:var(--nude-zart)}
.grund{background:var(--grund)}
.auf-dunkel{background:var(--dunkel);color:#F3EFEB}
.auf-dunkel h1,.auf-dunkel h2,.auf-dunkel h3{color:#fff}
.auf-dunkel p{color:rgba(243,239,235,.76)}

/* ---------- Knöpfe ----------
   Primär ist Nude, nicht Schwarz. Kräftigere Schrift und weniger
   Sperrung, damit die Beschriftung auf den ersten Blick lesbar ist. */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--nude);color:var(--dunkel);text-decoration:none;
  padding:1.05rem 2.2rem;font-size:.9rem;letter-spacing:.04em;
  font-weight:600;font-family:var(--sans);border:1.5px solid var(--nude);
  border-radius:var(--pille);cursor:pointer;line-height:1;
  transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.knopf:hover{
  background:var(--nude-hell);border-color:var(--nude-hell);color:var(--dunkel);
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(227,188,154,.5);
}
.knopf svg{width:18px;height:18px;flex:none}
/* Der zweite Knopf. Auf hellem Grund wird er beim Überfahren NUDE, nie schwarz
   und auch nicht goldbraun: Es ist die Markenfarbe selbst, sonst nichts.
   Die Rangfolge der beiden Knöpfe steht im Ruhezustand — gefüllt gegen Umriss —
   und muss nicht auch noch über zwei verschiedene Nude-Töne erzählt werden.
   Dunkle Schrift auf --nude steht bei 9,6 zu 1. */
.knopf.leer{background:transparent;border-color:rgba(192,143,99,.45);color:var(--dunkel)}
.knopf.leer:hover{
  background:var(--nude);border-color:var(--nude);color:var(--dunkel);
  box-shadow:0 10px 26px rgba(227,188,154,.5);
}
/* Auf dunklem Grund braucht der leere Knopf helle Schrift, sonst verschwindet er. */
/* Jeder dunkle Bereich trägt die Klasse auf-dunkel. Ohne sie verschwindet
   ein leerer Knopf, weil dunkle Schrift auf dunklem Grund steht. */
.auf-dunkel .knopf.leer,.fuss .knopf.leer{color:#fff;border-color:rgba(255,255,255,.4)}
.auf-dunkel .knopf.leer:hover,.fuss .knopf.leer:hover{background:#fff;border-color:#fff;color:var(--dunkel)}
.knopf-reihe{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}

/* Textlink mit Pfeil */
.mehr{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--nude-text);text-decoration:none;
}
.mehr svg{width:15px;height:15px;transition:transform .25s ease}
.mehr:hover svg{transform:translateX(4px)}

/* ---------- Icons ---------- */
.ikon{
  width:50px;height:50px;border-radius:50%;
  background:var(--nude-zart);color:var(--nude-text);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.ikon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.auf-dunkel .ikon{background:rgba(227,188,154,.14);color:var(--nude)}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.8rem 0}
.kopf-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.kopf-logo img{height:42px;width:auto;filter:brightness(0)}
.nav{display:flex;align-items:center;gap:1.8rem}
/* :not(.knopf), sonst überschreibt die Menü-Regel Farbe und Schriftstärke des Knopfes. */
.nav a:not(.knopf){font-size:.9rem;color:var(--tinte);text-decoration:none;font-weight:400;transition:color .2s}
.nav a:not(.knopf):hover{color:var(--nude-text)}
/* Der aktive Punkt bekommt dieselbe Farbe wie beim Überfahren. aria-current
   trägt den Zustand, damit Screenreader dasselbe sehen wie das Auge. */
.nav a:not(.knopf)[aria-current="page"]{color:var(--nude-text);font-weight:500}
.nav .knopf{padding:.75rem 1.5rem;font-size:.82rem}
.nav-schalter{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center}
.nav-schalter span{display:block;width:22px;height:1.5px;background:var(--dunkel);position:relative;transition:background .2s}
.nav-schalter span::before,.nav-schalter span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--dunkel);transition:transform .25s ease}
.nav-schalter span::before{top:-7px}
.nav-schalter span::after{top:7px}
.nav-schalter[aria-expanded="true"] span{background:transparent}
.nav-schalter[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-schalter[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Karten ---------- */
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:clamp(1.6rem,3vw,2.2rem)}
.karte.gerahmt{background:var(--nude-hauch);border-color:rgba(192,143,99,.28)}

.raster-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.1rem,2.4vw,1.7rem)}
.raster-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,1.6rem)}
.raster-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.4rem)}

/* Leistungskarte: Icon führt, Text hat Luft, kein dominantes Foto.
   Fotos kommen auf die Detailseiten, wo sie Zusammenhang haben. */
.leistung{
  display:flex;flex-direction:column;gap:.9rem;text-decoration:none;color:inherit;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  padding:clamp(1.7rem,2.6vw,2.1rem);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.leistung:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:rgba(192,143,99,.35)}
.leistung h3{margin:0}
.leistung p{font-size:1rem;color:var(--grau);margin:0;flex:1}
.leistung .mehr{margin-top:.3rem}

/* ---------- Listen ---------- */
.liste{list-style:none;margin:0;padding:0}
.liste li{position:relative;padding-left:1.6rem;margin-bottom:.6rem;color:var(--grau)}
.liste li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--nude)}
.liste li b,.liste li strong{color:var(--dunkel);font-weight:500}
.liste li:last-child{margin-bottom:0}
/* Auf dunklem Grund war die Liste grau auf Anthrazit und das Fette sogar
   --dunkel auf --dunkel, also unsichtbar. Betraf "Wann wir nicht behandeln". */
.auf-dunkel .liste li,.fuss .liste li{color:rgba(243,239,235,.84)}
.auf-dunkel .liste li b,.auf-dunkel .liste li strong,
.fuss .liste li b,.fuss .liste li strong{color:#fff;font-weight:600}

/* ---------- Formular ---------- */
.feld{margin-bottom:1rem}
.feld label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nude-text);margin-bottom:.45rem;font-weight:600}
.feld input,.feld textarea,.feld select{
  width:100%;font-family:var(--sans);font-weight:300;font-size:1rem;color:var(--tinte);
  background:var(--weiss);border:1px solid var(--linie-stark);border-radius:var(--rund-klein);
  padding:.92rem 1.1rem;transition:border-color .2s ease,box-shadow .2s ease;
}
.feld textarea{min-height:112px;resize:vertical;line-height:1.6}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--nude);box-shadow:0 0 0 3px rgba(227,188,154,.28)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--grau-hell)}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.wahl{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.1rem}
/* Das Radio bleibt für Tastatur und Screenreader erreichbar, ist aber
   unsichtbar. Ohne Maße war es so breit wie das Formular und ragte am Handy
   14px über den Rand hinaus — unsichtbar, aber unsauber. */
.wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.wahl label{
  display:block;text-align:center;cursor:pointer;margin:0;
  border:1.5px solid var(--linie-stark);border-radius:var(--pille);
  padding:.78rem 1rem;font-size:.9rem;letter-spacing:.02em;text-transform:none;
  color:var(--grau);font-weight:400;transition:all .2s ease;
}
.wahl input:checked + label{background:var(--nude-zart);border-color:var(--nude);color:var(--dunkel);font-weight:600}
.wahl input:focus-visible + label{box-shadow:0 0 0 3px rgba(227,188,154,.35)}

.dauer-hinweis{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--nude-text);
  background:var(--nude-hauch);border-radius:var(--pille);padding:.42rem 1rem;margin-bottom:1.2rem;font-weight:500;
}
.dauer-hinweis svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.formular-fuss{font-size:.82rem;color:var(--grau);margin-top:1rem;line-height:1.6}

/* ---------- Vorher / Nachher als Regler ---------- */
.vergleich{
  position:relative;border-radius:var(--rund);overflow:hidden;
  aspect-ratio:4/3;background:var(--nude-zart);user-select:none;touch-action:pan-y;
}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vergleich .oben{clip-path:inset(0 50% 0 0)}
.vergleich-griff{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.9);
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.25);
}
.vergleich-griff::after{
  content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(255,255,255,.96);box-shadow:0 4px 16px rgba(0,0,0,.22);
}
/* Der Kreis wird geteilt: links und rechts je ein Pfeil, dazwischen eine feine Linie.
   Vorher standen beide Zeichen nebeneinander in der Mitte, das sah unsauber aus. */
.vergleich-griff::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:1px;height:22px;background:rgba(30,29,28,.18);z-index:3;
}
.vergleich-griff .pfeil{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:11px;height:11px;color:var(--dunkel);
}
.vergleich-griff .pfeil.links{left:calc(50% - 17px)}
.vergleich-griff .pfeil.rechts{left:calc(50% + 6px)}
.vergleich-regler{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;
}
.vergleich-marke{
  position:absolute;bottom:1rem;background:rgba(30,29,28,.76);color:#fff;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.34rem .85rem;border-radius:var(--pille);pointer-events:none;
}
.vergleich-marke.links{left:1rem}
.vergleich-marke.rechts{right:1rem}

/* ---------- Zeitleiste ---------- */
/* ---------- Zeitleiste mit Bild ----------
   Muster wie bei Bolten Health Relations: Der Balken wächst mit dem
   Scrollfortschritt, der Punkt färbt sich, wenn der Schritt ins Bild kommt.
   Skaliert statt in der Höhe animiert — transform läuft ohne
   Layout-Neuberechnung und bleibt auch auf schwachen Geräten flüssig. */
.zeitleiste{position:relative;max-width:960px}
.zl-linie{position:absolute;left:27px;top:34px;width:2px;background:var(--linie-stark);height:calc(100% - 68px)}
.zl-fortschritt{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--nude-tief);
  transform:scaleY(0);transform-origin:top;transition:transform .25s linear}

.zeit-punkt{position:relative;padding-left:86px;padding-bottom:0;margin-bottom:1.6rem}
.zeit-punkt:last-child{margin-bottom:0}
.zeit-punkt::before{content:none}

.zl-nummer{
  position:absolute;left:0;top:6px;width:56px;height:56px;border-radius:50%;
  background:var(--weiss);border:2px solid var(--linie-stark);
  display:flex;align-items:center;justify-content:center;z-index:2;
  font-family:var(--serif);font-size:1.15rem;color:var(--grau);
  transition:border-color .5s,color .5s,transform .5s;
}
.zeit-punkt.sichtbar .zl-nummer{border-color:var(--nude-tief);color:var(--nude-satt)}
.zeit-punkt:hover .zl-nummer{transform:scale(1.07)}

.zl-inhalt{
  display:grid;grid-template-columns:1.4fr .6fr;gap:1.8rem;align-items:center;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  padding:1.7rem 1.8rem;
  transition:transform .4s,box-shadow .4s,border-color .4s;
}
.zeit-punkt:hover .zl-inhalt{transform:translateY(-4px);box-shadow:var(--schatten);border-color:rgba(192,143,99,.45)}
.zl-text h3{font-size:1.15rem;margin-bottom:.4rem}
.zl-text p{color:var(--grau);font-size:1rem;margin:0;max-width:60ch}
.zl-bild{border-radius:var(--rund-klein);overflow:hidden;aspect-ratio:4/3}
.zl-bild img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.zeit-punkt:hover .zl-bild img{transform:scale(1.06)}
/* Ohne Bild läuft der Text über die volle Kartenbreite. */
.zl-inhalt.ohne-bild{grid-template-columns:1fr}

.zeit-dauer{
  display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nude-text);font-weight:600;margin-bottom:.3rem;
}

@media (max-width:820px){
  .zl-linie{display:none}
  .zeit-punkt{padding-left:0;padding-top:0}
  .zl-nummer{position:static;margin-bottom:.9rem;width:46px;height:46px;font-size:1rem}
  .zl-inhalt{grid-template-columns:1fr;padding:1.4rem 1.4rem 1.5rem}
  .zl-bild{order:-1;aspect-ratio:16/10;margin-bottom:.4rem}
}


/* ---------- Stimmen ---------- */
.stimme{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:1.9rem}
.stimme p{font-family:var(--serif);font-size:1.15rem;line-height:1.66;color:var(--dunkel)}
.stimme-wer{display:block;margin-top:1rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);font-family:var(--sans)}
/* Die Sterne tragen die Bewertung, sind also Information und kein Schmuck.
   Auf hellem Grund deshalb der satte Ton, auf dunklem der helle. */
.sterne{color:var(--nude-satt);letter-spacing:.14em;font-size:1rem}
.auf-dunkel .sterne{color:var(--nude)}
/* Die Bewertungskarte im Hero ist weiss, dort bleibt der satte Ton. */
/* ---------- Bewertungskarte im Hero ----------
   Lag nur in index.html, wurde aber auch auf den Standortseiten benutzt. Dort
   sass sie ohne Hintergrund direkt auf dem dunklen Hero, und die Sterne kamen
   nur auf 3,47 zu 1. */
.hero-marke{
  position:absolute;left:1.2rem;bottom:1.2rem;right:1.2rem;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-radius:var(--rund-klein);padding:.95rem 1.2rem;
}
.hero-marke .sterne{font-size:.9rem}
.hero-marke b{font-family:var(--serif);font-size:1.15rem;color:var(--dunkel);font-weight:500;display:block;margin-top:.15rem}
.hero-marke small{font-size:.82rem;color:var(--grau);display:block;line-height:1.4}
/* Die Karte ist weiss, dort bleibt der satte Ton — auch wenn sie im dunklen
   Hero liegt. */
.hero-marke .sterne{color:var(--nude-satt)}

/* ---------- Einblenden, nur mit JavaScript ---------- */
.js .zeigt{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .zeigt.da{opacity:1;transform:none}

/* ---------- Fuß ---------- */
.fuss{background:var(--dunkel);color:rgba(243,239,235,.6);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.fuss h4{color:var(--nude);font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem}
.fuss a{color:rgba(243,239,235,.6);text-decoration:none;transition:color .2s}
.fuss a:hover{color:var(--nude)}
.fuss img{height:46px;width:auto}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem}
.fuss-unten{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(227,188,154,.5);display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;align-items:center}


/* ---------- Untermenü „Behandlungen" ---------- */
/* Am Desktop klappt es unter dem Menüpunkt auf, am Handy schiebt es sich in
   die Liste ein. Gesteuert wird beides über aria-expanded am Knopf, damit
   Tastatur und Screenreader denselben Zustand sehen wie die Maus. */
.nav-gruppe{position:relative}
.nav-auf{
  display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:.9rem;color:var(--tinte);font-weight:400;
  transition:color .2s;
}
.nav-auf:hover,.nav-auf[aria-expanded="true"]{color:var(--nude-text)}
.nav-auf svg{width:11px;height:11px;transition:transform .25s ease;flex:none}
.nav-auf[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav-menu{
  position:absolute;top:calc(100% + .9rem);left:-1.1rem;z-index:60;
  min-width:16rem;padding:.5rem;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund-klein);
  box-shadow:var(--schatten);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.nav-gruppe[data-offen="true"] .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{
  display:block;padding:.62rem .8rem;border-radius:calc(var(--rund-klein) - 4px);
  font-size:.9rem;color:var(--tinte);text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.nav-menu a:hover{background:var(--nude-hauch);color:var(--nude-text)}
.nav-menu a[aria-current="page"]{background:var(--nude-hauch);color:var(--nude-text);font-weight:500}
.nav-menu a[aria-current="page"] small{color:var(--nude-satt)}
/* Steht man auf einer Behandlungsseite, ist auch die Beschriftung „Behandlungen"
   eingefärbt — sonst wirkt der Menüpunkt wie nicht besucht. */
.nav-gruppe:has(a[aria-current="page"]) .nav-auf{color:var(--nude-text);font-weight:500}
.nav-menu a small{display:block;font-size:.74rem;color:var(--grau);margin-top:.1rem}
.nav-menu a:hover small{color:var(--nude-satt)}
/* Die Hautanalyse ist der kostenlose Einstieg und wird abgesetzt. */
.nav-menu .abgesetzt{margin-top:.35rem;padding-top:.65rem;border-top:1px solid var(--linie)}

@media (max-width:920px){
  .nav-gruppe{width:100%}
  .nav-auf{
    width:100%;justify-content:space-between;
    padding:.95rem 0;border-bottom:1px solid var(--linie);font-size:1rem;
  }
  .nav-menu{
    position:static;min-width:0;padding:0;margin:0;
    border:0;border-radius:0;box-shadow:none;background:none;
    transform:none;transition:none;
    display:none;
  }
  .nav-gruppe[data-offen="true"] .nav-menu{display:block;opacity:1;visibility:visible}
  .nav-menu a{padding:.8rem 0 .8rem 1rem;border-bottom:1px solid var(--linie);border-radius:0}
  .nav-menu a:hover{background:none}
  .nav-menu .abgesetzt{margin-top:0;padding-top:.8rem;border-top:0}
}

/* ---------- Mobil ---------- */
@media (max-width:920px){
  .raster-3,.raster-4{grid-template-columns:repeat(2,1fr)}
  /* Drei Karten in zwei Spalten lassen die zweite Zeile halb leer — bei genau
     drei Elementen deshalb direkt einspaltig. Vier gehen in zwei Spalten auf. */
  .raster-3:has(> :nth-child(3):last-child){grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr 1fr;gap:2rem}
  .nav{
    position:fixed;inset:66px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--weiss);border-bottom:1px solid var(--linie);padding:.5rem 6vw 1.6rem;
    transform:translateY(-130%);transition:transform .3s ease;box-shadow:var(--schatten);
  }
  .nav[data-offen="true"]{transform:none}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--linie);font-size:1rem}
  .nav .knopf{margin-top:1rem;width:100%;padding:1rem;font-size:.82rem}
  .nav-schalter{display:flex}
}
@media (max-width:620px){
  .raster-2,.raster-3,.raster-4{grid-template-columns:1fr}
  .feld-paar{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr}
  .knopf{width:100%}
  .zeitleiste{padding-left:2.9rem}
  .zeitleiste::before{left:1.1rem}
  .zeit-punkt::before,.zeit-punkt .nr{left:-2.9rem;width:2.2rem;height:2.2rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .zeigt{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Mitlaufende Aktionsleiste (nur Handy) ----------
   Auf langen Seiten verliert man den Weg zum Termin aus den Augen.
   Zwei Wege, weil sie verschieden funktionieren: Das Formular kennt
   die Standortfrage schon, beim Anruf muss man sich vorher entscheiden. */
.aktionsleiste{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  gap:.6rem;padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--linie);
}
.aktionsleiste .knopf{flex:1;padding:.95rem .8rem;font-size:.9rem;width:auto}
@media (max-width:920px){
  .aktionsleiste{display:flex}
  body{padding-bottom:5.2rem}   /* damit der Fuß nicht unter der Leiste verschwindet */
}

/* ---------- Anruf-Fenster ---------- */
.fenster{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(30,29,28,.55);backdrop-filter:blur(4px);
}
.fenster[data-offen="true"]{display:flex}
.fenster-inhalt{
  background:var(--weiss);border-radius:var(--rund);padding:clamp(1.6rem,4vw,2.2rem);
  width:min(420px,100%);box-shadow:var(--schatten-tief);position:relative;
}
.fenster-inhalt h3{margin-bottom:.3rem}
.fenster-inhalt > p{color:var(--grau);font-size:1rem;margin-bottom:1.4rem}
.fenster-zu{
  position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--linie);background:var(--weiss);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--grau);font-size:1.15rem;line-height:1;
}
.fenster-zu:hover{background:var(--nude-zart);color:var(--dunkel)}
.nummer{
  display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit;
  border:1px solid var(--linie);border-radius:var(--rund-klein);
  padding:.95rem 1.1rem;margin-bottom:.7rem;transition:border-color .2s ease,background .2s ease;
}
.nummer:last-child{margin-bottom:0}
.nummer:hover{border-color:var(--nude);background:var(--nude-hauch)}
.nummer b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--dunkel);font-weight:500;line-height:1.2}
.nummer span{display:block;font-size:.9rem;color:var(--grau)}

/* ---------- Google-Zeichen statt Stern ----------
   Fünf Sterne plus ein Stern-Icon davor liest sich wie sechs Sterne.
   Das G ordnet die Bewertung außerdem sofort der Quelle zu. */
.google-g{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:var(--weiss);border:1px solid var(--linie-stark);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:.72rem;line-height:1;
  color:#4285F4;margin-top:.2rem;
}

/* ---------- Vergleichsreihe ---------- */
.vergleiche{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.vergleich-karte figcaption{
  margin-top:.85rem;font-size:.9rem;color:var(--grau);text-align:center;
}
.vergleich-karte figcaption b{display:block;color:var(--dunkel);font-weight:500;font-size:1rem}
.auf-dunkel .vergleich-karte figcaption{color:rgba(243,239,235,.72)}
.auf-dunkel .vergleich-karte figcaption b{color:#fff}
@media (max-width:920px){ .vergleiche{grid-template-columns:1fr;gap:2rem} }


/* ---------- Standortwahl als Pflichtfeld ----------
   Bewusst ohne Vorauswahl: Eine falsch stehen gelassene Vorauswahl
   schickt Anfragen ins falsche Studio, und niemand merkt es. */
.wahl-feld{border:0;padding:0;margin:0 0 1rem}
.wahl-feld legend{
  padding:0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nude-text);font-weight:600;margin-bottom:.45rem;
}
.wahl-feld[data-fehlt="true"] .wahl label{border-color:#D68A80;background:#FDF4F3}
.wahl-feld[data-fehlt="true"] legend{color:#B4483C}


/* ---------- Schiene (Karussell) ----------
   Scrollende Schiene mit Einrasten, nicht Ein- und Ausblenden:
   So kann man wischen und sieht am Rand, dass es weitergeht. */
.schiene-halter{position:relative}
.schiene{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;padding:.4rem;margin:-.4rem;
}
.schiene::-webkit-scrollbar{display:none}
.schiene > *{scroll-snap-align:start}
@media (min-width:921px){ .schiene{grid-auto-columns:calc((100% - 2.5rem)/3)} }
@media (max-width:920px){ .schiene{grid-auto-columns:86%} }

.schiene-pfeil{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:var(--weiss);border:1px solid var(--linie-stark);color:var(--dunkel);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--schatten);transition:opacity .2s ease,background .2s ease;
}
.schiene-pfeil svg{width:20px;height:20px}
.schiene-pfeil.links{left:-22px}
.schiene-pfeil.rechts{right:-22px}
.schiene-pfeil:hover{background:var(--nude-zart)}
.schiene-pfeil[disabled]{opacity:.3;cursor:default;pointer-events:none}
@media (max-width:1280px){
  .schiene-pfeil.links{left:4px}
  .schiene-pfeil.rechts{right:4px}
}
@media (max-width:620px){ .schiene-pfeil{display:none} }

.stimme blockquote{margin:.7rem 0 0;font-family:var(--serif);font-size:1rem;line-height:1.66;color:var(--dunkel)}
.stimme figcaption{margin-top:1rem}


/* ---------- Instagram-Raster ---------- */
.ig-raster{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem}
.ig-kachel{
  display:block;aspect-ratio:1;border-radius:var(--rund-klein);overflow:hidden;
  background:var(--nude-zart);position:relative;text-decoration:none;
  transition:transform .3s ease,box-shadow .3s ease;
}
.ig-kachel:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.ig-kachel img{width:100%;height:100%;object-fit:cover}
@media (max-width:920px){ .ig-raster{grid-template-columns:repeat(3,1fr)} }
@media (max-width:480px){ .ig-raster{grid-template-columns:repeat(2,1fr)} }

/* ---------- Platzhalter ----------
   Sichtbar als Lücke markiert, damit fehlendes Material nicht untergeht.
   Diese Flächen dürfen so nicht live gehen. */
.platzhalter .vergleich.leer,.ig-kachel.platzhalter{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--nude-hauch),var(--nude-hauch) 10px,var(--nude-zart) 10px,var(--nude-zart) 20px);
  border:1px dashed rgba(192,143,99,.5);
}
.platzhalter .vergleich.leer span,.ig-kachel.platzhalter span{
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nude-text);font-weight:600;text-align:center;padding:.5rem;
}
.vergleich-karte.platzhalter figcaption{opacity:.6}


/* ---------- Hinweisband über dem Fuß ----------
   Feine Nude-Linien statt harter Kanten, wie im bisherigen Auftritt. */
.hinweisband{
  background:var(--dunkel-2);color:rgba(243,239,235,.68);
  border-top:1px solid rgba(227,188,154,.55);
  border-bottom:1px solid rgba(227,188,154,.55);
  padding:1.7rem 0;text-align:center;
}
.hinweisband p{font-size:.9rem;line-height:1.7;margin:0}
.fuss{border-top:0}


/* ---------- Umriss-Knopf in Nude ----------
   Für Nebenwege wie die Google-Bewertungen: freundlicher als der schwarze Umriss. */
.knopf.nude-umriss{
  background:transparent;border-color:var(--nude-satt);color:var(--nude-satt);
}
.knopf.nude-umriss:hover{
  background:var(--nude);border-color:var(--nude);color:var(--dunkel);
  box-shadow:0 10px 26px rgba(227,188,154,.5);
}

/* ---------- Formular ----------
   Beschriftungen dunkel, damit sie als Text lesbar sind.
   Die Umrandungen tragen das Nude, das wirkt leichter als graue Kästen. */
.feld label,.wahl-feld legend{color:var(--dunkel)!important}
.feld input,.feld textarea,.feld select{border-color:rgba(192,143,99,.55)}
.wahl label{border-color:rgba(192,143,99,.55)}
.wahl input:checked + label{background:var(--nude-zart);border-color:var(--nude-satt);color:var(--dunkel)}


/* ============================================================
   BEHANDLUNGSSEITEN
   Lag zuerst nur in der Laserseite. Sobald die zweite Seite
   dieselben Bausteine braucht, gehört es hierher — sonst laufen
   die Seiten mit der Zeit auseinander.
   ============================================================ */
.b-hero{position:relative;background:var(--dunkel);color:#F3EFEB;overflow:hidden;padding:clamp(3rem,6vw,4.6rem) 0}
.b-hero::before{content:"";position:absolute;right:30%;top:-32%;width:44%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(227,188,154,.17),transparent 70%)}
.b-hero-innen{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* Ohne Bild bleibt die rechte Haelfte sonst leer und die Seite wirkt unfertig. */
.b-hero-innen.allein{grid-template-columns:1fr}
.b-hero-innen.allein h1{max-width:20ch}
.b-hero-innen.allein .lauf{max-width:60ch}
.b-hero h1{color:#fff;max-width:15ch;margin-bottom:.4em}
.b-hero h1 em{font-style:normal;color:var(--nude)}
.b-hero .lauf{font-size:clamp(1rem,1.5vw,1.12rem);color:rgba(243,239,235,.8);max-width:46ch;margin-bottom:2rem}
.krume{font-size:.82rem;color:rgba(243,239,235,.5);margin-bottom:1.4rem}
.krume a{color:rgba(243,239,235,.72);text-decoration:none}
.krume a:hover{color:var(--nude)}
.b-bild{position:relative;border-radius:var(--rund);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--schatten-tief)}
.b-bild img{width:100%;height:100%;object-fit:cover}

/* Inhaltsverzeichnis: bei langen Seiten spart es Scrollen */
.inhalt-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid rgba(227,188,154,.24)}
.inhalt-nav a{
  font-size:.82rem;color:rgba(243,239,235,.76);text-decoration:none;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--pille);padding:.42rem 1rem;
  transition:all .2s ease;
}
.inhalt-nav a:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}

/* Regionen und Preise */
.regionen{width:100%;border-collapse:collapse;font-size:1rem}
.regionen th{
  text-align:left;font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nude-satt);
  padding:0 2.4rem .9rem 0;border-bottom:1px solid var(--linie-stark);
}
.regionen th:last-child,.regionen td:last-child{text-align:right}
/* Ohne Abstand klebte der Fließtext an der Dauer- oder Preisspalte. */
.regionen td{padding:.95rem 2.4rem .95rem 0;border-bottom:1px solid var(--linie);color:var(--grau)}
.regionen th{padding-right:2.4rem}
.regionen td:last-child,.regionen th:last-child{padding-right:0;padding-left:2.4rem}
.regionen td:first-child{white-space:nowrap}
.regionen td:first-child{color:var(--dunkel);font-weight:500}
/* Die letzte Spalte trägt bei Preis- und Dauertabellen einen kurzen Wert.
   Das pauschale nowrap hat aber auch die Fließtext-Tabellen erwischt: Auf der
   Hautanalyse-Seite wurde die Tabelle 1119px breit und am Handy abgeschnitten.
   Deshalb greift es nur noch mit der Klasse "werte". */
.regionen td:last-child{font-family:var(--serif);font-size:1.15rem;color:var(--dunkel)}
.regionen.werte td:last-child{white-space:nowrap}
/* Auch der Spaltenkopf muss mitziehen: sonst steht die Überschrift rechts
   und der Text darunter links. */
.regionen:not(.werte) td:last-child,
.regionen:not(.werte) th:last-child{text-align:left}
.regionen:not(.werte) td:last-child{font-family:var(--sans);font-size:1rem;color:var(--grau)}
.regionen:not(.werte) td:last-child,
.regionen:not(.werte) th:last-child{padding-left:0;padding-right:2.4rem}
.regionen:not(.werte) th:last-child{text-align:left}
.regionen tr:last-child td{border-bottom:0}

/* Zwei Spalten mit Merkpunkten */
.merken{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem)}
.merk-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:clamp(1.6rem,3vw,2.1rem)}
.merk-karte .ikon{margin-bottom:1rem}
.merk-karte h3{font-size:1.15rem}

/* Fragen und Antworten */
.frage-block{border-top:1px solid var(--linie)}
.frage-block:last-of-type{border-bottom:1px solid var(--linie)}
.frage-block summary{
  cursor:pointer;list-style:none;padding:1.35rem 2.6rem 1.35rem 0;position:relative;
  font-family:var(--serif);font-size:1.15rem;color:var(--dunkel);font-weight:500;
}
.frage-block summary::-webkit-details-marker{display:none}
.frage-block summary::after{
  content:"";position:absolute;right:.5rem;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--nude-satt);border-bottom:1.6px solid var(--nude-satt);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.frage-block[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.frage-block .antwort{padding:0 2.6rem 1.5rem 0;color:var(--grau)}
.frage-block .antwort p:last-child{margin-bottom:0}

.termin-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.ort-wahl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.6rem)}

@media (max-width:920px){
  .b-hero-innen,.merken,.termin-raster,.ort-wahl{grid-template-columns:1fr}
  .b-bild{aspect-ratio:16/11;order:-1}
}

/* Tabellen am Handy: Zwei Spalten nebeneinander werden auf 390px unlesbar
   schmal. Jede Zeile wird deshalb zu einem eigenen Block. */
@media (max-width:620px){
  .regionen,.regionen tbody,.regionen tr,.regionen td{display:block;width:100%}
  .regionen thead{display:none}
  .regionen tr{padding:1.1rem 0;border-bottom:1px solid var(--linie)}
  .regionen tr:last-child{border-bottom:0}
  .regionen td{border:0;padding:.1rem 0}
  .regionen td:first-child{font-family:var(--serif);font-size:1.15rem;color:var(--dunkel);font-weight:500;margin-bottom:.25rem}
  .regionen td:last-child,.regionen.werte td:last-child{text-align:left;white-space:normal;font-family:var(--sans);font-size:1rem;color:var(--grau)}
  .regionen.werte td:last-child{margin-top:.4rem;font-family:var(--serif);font-size:1.15rem;color:var(--dunkel)}
}

/* ---------- Platzhalter für Fotos, die noch fehlen ----------
   Lieber eine erkennbare Lücke als ein Bild, das etwas anderes zeigt als die
   Seite behauptet. Dieselbe Schraffur wie bei den Vorher-Nachher-Kacheln,
   damit es als Absicht lesbar ist und nicht als Fehler. */
.b-bild.folgt,.person-bild.folgt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  background:repeating-linear-gradient(45deg,var(--nude-hauch),var(--nude-hauch) 10px,var(--nude-zart) 10px,var(--nude-zart) 20px);
  border:1px dashed rgba(192,143,99,.5);box-shadow:none;
}
.b-bild.folgt b,.person-bild.folgt b{
  font-family:var(--serif);font-size:1.5rem;letter-spacing:.16em;color:var(--nude-satt);font-weight:500;
}
.b-bild.folgt span,.person-bild.folgt span{
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  /* Auf der Nude-Schraffur kommt --grau nur auf 2,35 zu 1. Nachgemessen am
     29.08.2026, deshalb der dunkelste Ton. */
  color:var(--dunkel);
}

/* ---------- Erklärblock mit Gerätefoto ----------
   Der Text allein ließ die halbe Zeile leer. Die Herstellerfotos der Geräte
   sind Freisteller auf Weiß, deshalb "contain" auf einer Nude-Fläche statt
   formatfüllend — sonst schneidet der Zuschnitt das Gerät an. */
.erklaerung{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center}
.erklaerung p{color:var(--grau);max-width:60ch}
.erklaerung h2{margin:.8rem 0 1.1rem}
.erklaerung p:last-child{margin-bottom:0}
.geraet-bild{
  border-radius:var(--rund);background:var(--weiss);
  border:1px solid var(--linie);padding:clamp(1.4rem,3vw,2.2rem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.geraet-bild img{width:100%;height:auto;max-height:420px;object-fit:contain}
.geraet-bild figcaption{margin-top:1rem;font-size:.82rem;color:var(--grau);text-align:center}
/* Echte Aufnahme statt Freisteller: formatfüllend, ohne weißen Rahmen. */
.studio-bild{margin:0}
.studio-bild img{width:100%;height:auto;border-radius:var(--rund);display:block;box-shadow:var(--schatten)}
.studio-bild figcaption{margin-top:.9rem;font-size:.9rem;color:var(--grau);max-width:46ch}
@media (max-width:920px){ .erklaerung{grid-template-columns:1fr} .geraet-bild,.studio-bild{order:-1} }


/* ---------- Bausteine der Behandlungsseiten ---------- */

/* Zeitleiste: Platzhalter, wo noch kein Foto vorliegt. */
.zl-bild.ohne-bild-platz{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--nude-hauch),var(--nude-hauch) 10px,var(--nude-zart) 10px,var(--nude-zart) 20px);
  border:1px dashed rgba(192,143,99,.45);
}
.platz-marke{font-family:var(--serif);font-size:1.15rem;letter-spacing:.16em;color:var(--nude-text)}

/* Karte neben einem Erklärtext, wenn kein Bild dazugehört. */
.hinweis-karte{
  background:var(--nude-hauch);border:1px solid rgba(192,143,99,.28);
  border-radius:var(--rund);padding:clamp(1.6rem,3vw,2.1rem);
}
.hinweis-karte h3{font-size:1.15rem;margin:.9rem 0 .5rem}
.hinweis-karte p{color:var(--grau);margin:0}

/* Damen und Herren als zwei Wege in die Zonenlisten. */
.zonen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.6vw,1.8rem)}
.zonen-karte{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  padding:clamp(1.7rem,3vw,2.2rem);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.zonen-karte:hover{border-color:rgba(192,143,99,.45);transform:translateY(-4px);box-shadow:var(--schatten)}
.zonen-karte h3{font-size:1.4rem;margin:1rem 0 .5rem}
.zonen-karte p{color:var(--grau);margin:0 0 1.4rem}
.zonen-karte .mehr{margin-top:auto}

/* Paketpreis: der Vergleich alt gegen neu muss auf einen Blick lesbar sein. */
/* Der Block stand zuerst auf Anthrazit. Der Fließtext darin kam auf 2,35 zu 1
   und war praktisch nicht zu lesen. Jetzt Nude mit dunkler Schrift. */
.paket{
  display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between;
  background:var(--nude-hell);border:1px solid var(--nude);border-radius:var(--rund);
  padding:clamp(1.7rem,3.4vw,2.3rem);margin-top:2rem;
}
.paket h3{color:var(--dunkel);font-size:1.4rem;margin:.7rem 0 .5rem}
.paket p{color:var(--grau);margin:0;max-width:52ch}
/* Auf dem Nude-Grund des Pakets reicht --nude-text nicht, dort kommt es nur
   auf 3,8 zu 1. Der Grauton schafft 4,79. */
.paket .marke-label{color:var(--grau)}
.paket-preis{text-align:right;line-height:1.15}
.paket-preis .alt{display:block;font-size:1rem;color:var(--grau);text-decoration:line-through}
/* Playfair setzt sonst Mediaevalziffern: die 0 sitzt auf x-Hoehe und liest
   sich als kleines o — bei "0 €" die Kernaussage der Analyse-Seite. */
.paket-preis b{display:block;font-family:var(--serif);font-size:2.4rem;color:var(--dunkel);font-weight:500;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.paket-preis small{display:block;font-size:.82rem;color:var(--grau)}

/* Fragen: Überschrift links, Fragen rechts — statt mittig wie bisher. */
.fragen-raster{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.fragen-raster .kopfzeile{margin-bottom:0;position:sticky;top:110px}

@media (max-width:920px){
  .zonen,.fragen-raster{grid-template-columns:1fr}
  .fragen-raster .kopfzeile{position:static;margin-bottom:1.6rem}
  .paket{flex-direction:column;align-items:flex-start}
  .paket-preis{text-align:left}
}
@media (max-width:620px){
  .regionen td,.regionen th{padding-right:0}
  .regionen td:last-child,.regionen th:last-child{padding-left:0}
  .regionen td:first-child{white-space:normal}
}

/* Zonenlisten auf /damen/ und /herren/ */
.zonen-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
.zonen-gruppe{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:clamp(1.5rem,2.8vw,2rem)}
.zonen-gruppe h3{font-size:1.15rem;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--linie)}
.zonen-liste{list-style:none;margin:0;padding:0}
.zonen-liste li{position:relative;padding-left:1.4rem;margin-bottom:.62rem;color:var(--grau);font-size:1rem}
.zonen-liste li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--nude)}
.zonen-liste li:last-child{margin-bottom:0}
@media (max-width:820px){ .zonen-raster{grid-template-columns:1fr} }

/* ---------- Verweisliste auf weitere Behandlungen ----------
   Lag in acht Seiten je einmal im eigenen Stilblock. Auf der neunten, von Hand
   gebauten Seite fehlte sie — und ein SVG ohne Maßangabe füllt dann den ganzen
   Container. Ergebnis war ein schwarzes Dreieck über die halbe Seite. */
.leistung-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2vw,1.3rem)}
.leistung-zeile{
  display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund-klein);
  padding:1rem 1.2rem;transition:border-color .25s ease,transform .25s ease;
}
.leistung-zeile:hover{border-color:rgba(192,143,99,.45);transform:translateX(3px)}
.leistung-zeile .ikon{width:40px;height:40px}
.leistung-zeile .ikon svg{width:19px;height:19px}
.leistung-zeile b{font-weight:500;font-size:1rem}
.leistung-zeile svg.pfeil{width:16px;height:16px;margin-left:auto;color:var(--nude-satt);stroke:currentColor;fill:none;stroke-width:1.8}
@media (max-width:920px){ .leistung-liste{grid-template-columns:repeat(2,1fr)} }
/* Drei Kacheln in zwei Spalten lassen die zweite Zeile halb leer. Bei genau
   drei Elementen deshalb direkt von drei auf eine Spalte, ohne Zwischenschritt.
   Betrifft alle Behandlungsseiten; wien und graz haben sechs und bleiben. */
@media (max-width:920px){
  .leistung-liste:has(> :nth-child(3):last-child){grid-template-columns:1fr}
}
@media (max-width:620px){ .leistung-liste{grid-template-columns:1fr} }


/* ---------- Gegenüberstellung zweier Verfahren ---------- */
.gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.6vw,1.8rem);align-items:start}
.gg-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:clamp(1.7rem,3vw,2.2rem)}
/* Die Variante, die wir empfehlen, bekommt den Nude-Rahmen. */
.gg-karte.gg-gut{border-color:var(--nude);border-width:2px;background:var(--nude-hauch)}
.gg-marke{
  display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--grau);background:var(--grund);
  padding:.32rem .85rem;border-radius:var(--pille);margin-bottom:.9rem;
}
.gg-karte.gg-gut .gg-marke{color:#fff;background:var(--nude-text)}
.gg-karte h3{font-size:1.4rem;margin-bottom:1.1rem}

/* Fazit unter der Gegenüberstellung */
.fazit{
  display:flex;gap:1.4rem;align-items:flex-start;margin-top:clamp(1.6rem,3vw,2.2rem);
  background:var(--dunkel);border-radius:var(--rund);padding:clamp(1.7rem,3.4vw,2.2rem);
}
.fazit .ikon{flex:none;background:rgba(227,188,154,.16);color:var(--nude)}
.fazit h3{color:#fff;font-size:1.15rem;margin-bottom:.5rem}
.fazit p{color:rgba(243,239,235,.84);margin:0;max-width:76ch}
/* Ohne eigene Regel erbt ein Link im Fazit die dunkle Grundfarbe und steht
   unsichtbar auf dunklem Grund — gemessen 1:1 auf der Seite zur klassischen
   Kosmetik. Gilt für jeden dunklen Baustein, nicht nur für diesen einen. */
.fazit a:not(.knopf),
.auf-dunkel p:not(.krume) a:not(.knopf),
.auf-dunkel li a:not(.knopf){
  color:var(--nude);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .2s;
}
.fazit a:not(.knopf):hover,
.auf-dunkel p:not(.krume) a:not(.knopf):hover,
.auf-dunkel li a:not(.knopf):hover{color:#fff}

@media (max-width:920px){ .gegenueber{grid-template-columns:1fr} .fazit{flex-direction:column;gap:1rem} }

/* ---------- Die drei Haarphasen ----------
   Der Text stand vorher als langer Block neben dem Bild. Als drei Karten mit
   eigenem Symbol ist derselbe Inhalt auf einen Blick erfassbar. */
.phasen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,1.6rem);margin-top:clamp(2rem,4vw,3rem)}
.phase{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  padding:clamp(1.6rem,3vw,2.1rem);text-align:center;
  transition:border-color .3s,transform .3s;
}
.phase:hover{border-color:rgba(192,143,99,.45);transform:translateY(-3px)}
/* Die erste Phase ist die, auf die es ankommt — sie bekommt den Nude-Rahmen. */
.phase:first-child{border-color:var(--nude);border-width:2px;background:var(--nude-hauch)}
.phase-bild{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;margin:0 auto 1.1rem;border-radius:50%;
  background:var(--nude-zart);color:var(--nude-text);
}
.phase:first-child .phase-bild{background:var(--nude);color:var(--dunkel)}
.phase-bild svg{width:34px;height:34px}
.phase-nr{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nude-text);font-weight:600;margin-bottom:.3rem;
}
.phase h3{font-size:1.15rem;margin-bottom:.5rem}
.phase p{color:var(--grau);margin:0;font-size:1rem}
.phase p strong{color:var(--dunkel);font-weight:600}
.phasen-fazit{
  color:var(--grau);max-width:68ch;margin:clamp(1.8rem,3.4vw,2.4rem) auto 0;text-align:center;
}

/* Breites Bild über einem Abschnitt */
.banner-bild{margin:0 0 clamp(2rem,4vw,3rem)}
.banner-bild img{width:100%;height:auto;display:block;border-radius:var(--rund);box-shadow:var(--schatten)}
.banner-bild figcaption{margin-top:1rem;font-size:.9rem;color:var(--grau);max-width:76ch}

@media (max-width:820px){ .phasen{grid-template-columns:1fr} .phase{text-align:left;display:grid;grid-template-columns:auto 1fr;gap:0 1.1rem;align-items:center}
  .phase-bild{margin:0;width:56px;height:56px;grid-row:1/3} .phase-bild svg{width:26px;height:26px}
  .phase-nr,.phase h3{grid-column:2} .phase p{grid-column:2;margin-top:.3rem} }

/* Informationskarte im Raster der Varianten — hebt sich ab, ohne wie eine
   weitere Variante auszusehen. */
.info-karte{background:var(--nude-hauch);border-color:rgba(192,143,99,.3);display:flex;flex-direction:column}
.info-karte .ikon{background:var(--nude);color:var(--dunkel)}

/* Ein einzelner Vergleichsregler mit Text daneben — für Seiten, auf denen nur
   ein Bildpaar vorliegt. Eine Kachel allein in einem Dreierraster sieht mager
   aus, hier trägt der Text die andere Hälfte. */
.ein-vergleich{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.ergebnis-text h3{font-size:1.4rem;margin-bottom:1.1rem}
@media (max-width:920px){ .ein-vergleich{grid-template-columns:1fr} }

/* Honigtopf im Anfrageformular. Bewusst NICHT display:none — Roboter
   überspringen versteckte Felder, diese Technik bleibt für sie sichtbar.
   Kein Verschieben nach links außerhalb des Bildes: Das erzeugt am Handy
   seitliches Scrollen, hier wird stattdessen auf 1×1 Pixel zusammengeschnitten. */
.honigtopf{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}

/* Bestätigung nach dem Absenden. Sie steht an der Stelle des Formulars, damit
   niemand nach oben scrollen muss, um zu sehen, dass es geklappt hat. */
.anfrage-dank{background:var(--nude-zart);border:1px solid var(--nude-tief);border-radius:var(--rund-klein);padding:1.8rem 1.6rem;text-align:center}
.anfrage-dank h3{font-family:var(--serif);font-size:1.5rem;margin-bottom:.6rem;color:var(--dunkel)}
.anfrage-dank p{color:var(--grau);margin:0}