/* ==========================================================================
   SCHRIFT — selbst gehostet (V4.37)
   Outfit liegt als variable Schrift auf unserem Server. Keine Verbindung zu
   Google: fonts.googleapis.com und fonts.gstatic.com sind vollstaendig raus.
   Ein Aufruf dorthin uebertraegt die IP-Adresse des Besuchers in die USA —
   ohne Einwilligung ist das in Deutschland abmahnbar (LG Muenchen I, 2022).
   ========================================================================== */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;          /* eine Datei fuer alle Schnitte */
  font-display:swap;
  src:url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   KOSMETIKINSTITUT HAUTNAH — V4 „Modern Institute"
   Ein gemeinsames Stylesheet für alle Seiten (ersetzt das eingebettete CSS).
   Farben bleiben unverändert (Sabrinas Taupe). Neu sind: Layout, Tiefe,
   Rundungen, Bewegung. Kein Zeitungsraster mehr, keine 1px-Kästen.
   ========================================================================== */

:root {
  /* Markenfarben — UNVERÄNDERT */
  --paper:#FAF6EF; --creme:#E9E3DA; --sand:#DFD7CD;
  --taupe:#C2B4A9; --taupe-dark:#6F655D; --silver:#C9C9CE;
  --accent:#6F655D; --ink:#3A322C; --ink-soft:#3E382F;

  /* Neu: Tiefe statt Striche */
  --line:rgba(58,50,44,.10);
  --line-strong:rgba(58,50,44,.20);
  --glass:rgba(250,246,239,.72);
  --sh-s:0 2px 8px rgba(58,50,44,.05), 0 8px 24px -12px rgba(58,50,44,.10);
  --sh:0 4px 16px rgba(58,50,44,.06), 0 18px 44px -20px rgba(58,50,44,.16);
  --sh-l:0 8px 28px rgba(58,50,44,.08), 0 40px 80px -32px rgba(58,50,44,.24);

  --r-s:14px; --r:22px; --r-l:32px; --r-xl:44px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --head-h:78px;
  --pad:clamp(22px,5vw,64px);
  --maxw:1320px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 24px);-webkit-text-size-adjust:100%}
body{
  font-family:'Outfit',system-ui,sans-serif; font-weight:400; font-size:16px;
  line-height:1.65; color:var(--ink); background:var(--paper);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* Warme Tiefe im Hintergrund — ersetzt die flache Zeitungsfläche */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 82% -5%, rgba(194,180,169,.34), transparent 65%),
    radial-gradient(50vw 45vh at 8% 42%, rgba(233,227,218,.55), transparent 70%),
    radial-gradient(70vw 60vh at 50% 108%, rgba(194,180,169,.24), transparent 70%);
}
/* Feines Korn: nimmt der Fläche das Digitale */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.serif{font-family:'Outfit',sans-serif;font-weight:300}

/* ---------- Typografie: Kontrast über Größe und Gewicht ---------- */
/* Ruhige Größenstaffel (Faktor ~1,3). Vorher war h1 das 5,3-fache des
   Fließtexts — die Überschriften haben den Inhalt erschlagen. Jetzt tragen
   sie die Gliederung, ohne zu dominieren. */
h1,h2,h3,h4{font-family:'Outfit',sans-serif;letter-spacing:-.025em;line-height:1.1;font-weight:300;color:var(--ink)}
h1{font-size:clamp(32px,3.2vw,46px);line-height:1.06}   /* ~2,8× Text */
h2{font-size:clamp(24px,2.1vw,31px);line-height:1.15}   /* ~1,9× Text */
h3{font-size:clamp(17px,1.35vw,20px);line-height:1.35;letter-spacing:-.01em;font-weight:500} /* ~1,2× Text */
em{font-style:normal;color:var(--taupe-dark)}
strong{font-weight:600;color:var(--ink)}
p{color:var(--ink-soft)}

/* Kleine Label — kompakter als die alten Zeitungs-Eyebrows */
.section-eyebrow,.kicker .tag,.breadcrumb,.footer-bottom,.voices-rating,.vid-note{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600
}
.section-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--taupe-dark);margin-bottom:20px}
/* ⚠️ V4.113: Haarlinie VOR UND HINTER dem Text — René wollte die Auszeichnung
   ueber die ganze Seite symmetrisch, als roter Faden. Vorher stand sie nur
   davor. Betrifft alle 72 Eyebrows auf 18 Seiten; die Regel steht bewusst an
   dieser einen Stelle, damit sie nicht wieder auseinanderlaeuft. */
.section-eyebrow::before,
.section-eyebrow::after{content:'';width:22px;height:1px;background:var(--taupe);flex:none}
.section-eyebrow .bar{display:none}

/* Anfrageformular: Honigtopf und Fehlermeldung (V4.116) ------------------
   Der Honigtopf darf NICHT display:none sein — manche Bots ueberspringen
   genau solche Felder. Er wird stattdessen aus dem sichtbaren Bereich
   geschoben und ist per aria-hidden + tabindex="-1" fuer Screenreader und
   Tastatur unerreichbar. */
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-fehler{margin:0 0 14px;padding:12px 16px;border-radius:var(--r-s);
  background:#F6E9E4;border:1px solid #D8B7AA;color:#7A3B24;
  font-size:14px;line-height:1.6}

/* ⚠️ hidden muss hidden bleiben (V4.110).
   Die Browser-Grundregel ist nur [hidden]{display:none} — eine einzige
   Klassenregel wie .yt-start{display:block} schlaegt sie. Genau das ist auf der
   Forma-Seite passiert: nach dem Klick wurde der Startknopf zwar auf hidden
   gesetzt, blieb aber stehen, und das geladene Video schob sich DARUEBER —
   René: "es darf sich nicht nach oben aufklappen". Dasselbe galt fuer den
   Kartenplatzhalter (.karte-ph{display:flex}) auf der Kontaktseite.
   Diese Regel schliesst die Luecke ein fuer alle Mal. */
[hidden]{display:none !important}

/* ---------- Rhythmus ---------- */
.wrap,.voices-inner,.ba-inner,.vid-inner,.faq-inner,.values-inner,.story-inner,
.treatments-grid,.footer-grid,.blog-wrap{max-width:var(--maxw);margin-inline:auto}
section,.trust,.t-body,.p-body,.blog-wrap{padding-inline:var(--pad)}/* Abstand zwischen den Abschnitten. Vorher 130px je Seite = 260px Lücke —
   das riss die Seite auseinander. Jetzt großzügig,aber zusammenhängend. */
.voices,.ba,.vid,.faq,.qbreak,.values,.story,.bianca,.treatments,.cta-band{
  padding-block:clamp(46px,5.2vw,76px)
}

/* ==========================================================================
   KOPFBEREICH — schwebende Glasleiste statt Zeitungs-Masthead
   ========================================================================== */
.infobar{
  display:flex;justify-content:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap;
  padding:9px var(--pad); background:var(--taupe-dark); color:var(--creme);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}
.infobar span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.infobar .dot{width:4px;height:4px;border-radius:50%;background:var(--taupe);flex:none}

.site-head{position:sticky;top:0;z-index:200;padding:12px var(--pad);transition:padding .45s var(--ease)}
.site-head.compact{padding:6px var(--pad)}
.head-inner{
  max-width:var(--maxw);margin-inline:auto;height:var(--head-h);
  display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);
  padding:0 clamp(16px,2.4vw,30px);
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-xl); box-shadow:var(--sh-s);
  transition:height .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease);
}
.site-head.compact .head-inner{height:62px;box-shadow:var(--sh)}
.brand{flex:none;display:flex;align-items:center;transition:transform .45s var(--ease)}
.brand img{height:clamp(46px,4.4vw,74px);width:auto;transition:height .45s var(--ease)}
.site-head.compact .brand img{height:clamp(44px,4.2vw,54px)}
.site-nav{flex:1;display:flex;align-items:center;gap:clamp(10px,.9vw,20px)}
/* Menuepunkte stehen direkt neben dem Logo, der Button wird nach rechts geschoben */
.site-nav ul{margin-right:auto}
.site-nav .nav-cta{flex:none}
.site-nav ul{list-style:none;display:flex;align-items:center;gap:clamp(9px,.78vw,12px)}
.site-nav a,.site-nav li{
  font-size:clamp(10.5px,.78vw,12px);letter-spacing:.045em;text-transform:uppercase;font-weight:600;
  color:var(--ink);white-space:nowrap
}
.site-nav ul li{position:relative;padding:8px 0;cursor:pointer;transition:color .3s var(--ease)}
/* Moderner Hover: Linie wächst von links */
.site-nav ul li::after{
  content:'';position:absolute;left:0;bottom:2px;height:1.5px;width:0;
  background:var(--taupe-dark);transition:width .4s var(--ease)
}
.site-nav ul li:hover{color:var(--taupe-dark)}
.site-nav ul li:hover::after{width:100%}
.site-nav ul li.is-active{color:var(--taupe-dark)}
.site-nav ul li.is-active::after{width:100%;background:var(--taupe)}

.nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav-burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:50%;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;
  transition:background .3s var(--ease)}
.nav-burger:hover{background:rgba(58,50,44,.06)}
.nav-burger span{display:block;width:22px;height:1.6px;background:var(--ink);border-radius:2px;
  transition:transform .4s var(--ease),opacity .25s var(--ease)}

/* ---------- Buttons: weich, mit Sog statt Kasten ---------- */
.btn-primary,.cs-cta,.masthead-right a{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:100px;border:1px solid var(--taupe-dark);
  background:var(--taupe-dark);color:var(--paper);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .4s var(--ease);
}
.btn-primary::before,.cs-cta::before,.masthead-right a::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease-out)
}
.btn-primary:hover,.cs-cta:hover,.masthead-right a:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.btn-primary:hover::before,.cs-cta:hover::before,.masthead-right a:hover::before{transform:translateY(0)}
/* .btn-ghost (nur unterstrichener Text) ist in V4.110 vollstaendig durch
   .btn-outline ersetzt worden — 17 Stellen. Grund: René hat auf der
   Kontaktseite gemeldet, dass der zweite Knopf nicht als Knopf erkennbar war.
   Die Klasse ist bewusst geloescht statt liegengelassen, damit sie nicht
   versehentlich wieder auftaucht. */
/* Zweiter Knopf (V4.110). Auf der Kontaktseite stand „Per WhatsApp schreiben"
   als .btn-ghost neben „Jetzt anrufen" — also nur unterstrichener Text und
   damit nicht als Knopf erkennbar (René). Gleiche Pillenform und gleiche
   Masse wie .btn-primary, aber offen statt gefuellt: sichtbar ein Knopf,
   ohne dem Hauptweg (Anrufen) die Aufmerksamkeit zu nehmen. */
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:100px;border:1px solid var(--taupe-dark);
  background:transparent;color:var(--ink);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),
              transform .45s var(--ease),box-shadow .45s var(--ease)
}
.btn-outline:hover{background:var(--taupe-dark);color:var(--paper);
  transform:translateY(-2px);box-shadow:var(--sh)}
.site-nav a.nav-cta,.nav-cta{
  padding:12px clamp(13px,1.05vw,18px) !important;
  font-size:clamp(9.5px,.7vw,10.5px) !important;letter-spacing:.1em !important;
  color:var(--paper) !important}
.site-nav a.nav-cta:hover{color:var(--paper) !important}

/* ==========================================================================
   HERO (Startseite) — vollflächiges Bild mit Parallaxe, Text darüber
   ========================================================================== */
.hero{
  position:relative;min-height:min(86vh,820px);display:grid;align-items:end;
  margin:14px var(--pad) 0;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-l);isolation:isolate;
}
.hero-image{position:absolute;inset:-8% 0;z-index:-1}
/* Zwei Verläufe: senkrecht für die Tiefe, waagerecht damit die Schrift
   auf ruhigem Grund steht und Sabrinas Gesicht frei bleibt. */
.hero-image::before{
  content:'';position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(100deg,rgba(58,50,44,.80) 0%,rgba(58,50,44,.62) 34%,rgba(58,50,44,.16) 58%,transparent 74%),
    linear-gradient(178deg,rgba(58,50,44,.34) 0%,rgba(58,50,44,.04) 38%,rgba(58,50,44,.44) 84%,rgba(58,50,44,.68) 100%)
}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:72% 22%;
  will-change:transform}
.hero-text{position:relative;z-index:3;padding:clamp(30px,5vw,74px);max-width:min(660px,58%);color:var(--paper)}
.hero-text h1{color:var(--paper);font-weight:200;text-wrap:balance;
  font-size:clamp(29px,3.3vw,48px);letter-spacing:-.03em;
  text-shadow:0 2px 30px rgba(58,50,44,.4)}
.hero-text h1 em{color:var(--sand)}
.hero-text .lead{font-size:clamp(16px,1.5vw,19px);line-height:1.75;color:rgba(250,246,239,.9);
  max-width:600px;margin:26px 0 34px}
.hero-cta-row{display:flex;gap:16px 26px;align-items:center;flex-wrap:wrap}
.hero-cta-row .btn-primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero-cta-row .btn-primary::before{background:var(--taupe)}
/* Im Hero steht der Knopf auf dem dunklen Foto: heller Rand, helle Schrift,
   beim Hover fuellt er sich hell und die Schrift wird dunkel. */
.hero-cta-row .btn-outline{color:var(--paper);border-color:rgba(250,246,239,.55);background:transparent}
.hero-cta-row .btn-outline:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
/* Glas-Badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  padding:11px 20px;border-radius:100px;
  background:rgba(250,246,239,.14);border:1px solid rgba(250,246,239,.34);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--paper);margin-bottom:28px
}
.hero-badge .stars{color:var(--sand);letter-spacing:.14em}
/* V4.110: Haarlinie statt der fuenf Sterne — dieselbe Geste wie bei
   .section-eyebrow, damit der Badge zur uebrigen Bildsprache gehoert. */
.hero-badge .bar{display:block;width:20px;height:1px;background:var(--sand);flex:none;opacity:.85}
/* NiSV-Siegel im Hero (V4.94) — steht dort, wo bis V4.93 die Kennzahlen
   standen. Trennlinie darueber wie zuvor bei den Kennzahlen, damit der Hero
   seinen Rhythmus behaelt. Heller Ring und Schatten, weil ein helles Siegel
   sonst auf dem hellen Foto untergeht — dieselbe Regel wie beim
   Meisterbetrieb-Siegel. */
.hero-siegel{margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(250,246,239,.22);
  display:flex;justify-content:center}     /* mittig in der Textspalte */
.hero-siegel img{display:block;width:clamp(112px,10.5vw,148px);height:auto;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(250,246,239,.85),
             0 14px 34px -14px rgba(58,50,44,.45)}

.hero-tag{position:absolute;right:clamp(24px,4vw,58px);bottom:clamp(24px,4vw,52px);z-index:3;text-align:right}
.hero-tag .signature-name{font-size:clamp(18px,1.6vw,23px);font-weight:300;color:var(--paper);line-height:1.1}
.hero-tag .role{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,239,.72);margin-top:7px;font-weight:500}
/* Kennzahlen als Kaesten (V4.107) — Glasoptik wie die Kachel darueber, damit
   sie auf dem Foto lesbar bleiben, ohne es zuzudecken. Beide Kaesten sind
   gleich hoch, weil die Umbrueche fest im HTML stehen: automatischer Umbruch
   haette je nach Fensterbreite mal zwei, mal drei Zeilen ergeben. */
.hero-meta{display:flex;gap:clamp(12px,1.4vw,18px);flex-wrap:wrap;
  align-items:stretch;margin-top:36px;padding-top:28px;
  border-top:1px solid rgba(250,246,239,.22)}
.hero-tag{position:absolute;right:clamp(24px,4vw,58px);bottom:clamp(24px,4vw,52px);z-index:3;text-align:right}
.hero-tag .signature-name{font-size:clamp(18px,1.6vw,23px);font-weight:300;color:var(--paper);line-height:1.1}
.hero-tag .role{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,239,.72);margin-top:7px;font-weight:500}
/* Kennzahlen als Kaesten (V4.107) — Glasoptik wie die Kachel darueber, damit
   sie auf dem Foto lesbar bleiben, ohne es zuzudecken. Beide Kaesten sind
   gleich hoch, weil die Umbrueche fest im HTML stehen: automatischer Umbruch
   haette je nach Fensterbreite mal zwei, mal drei Zeilen ergeben. */
.hero-meta{display:flex;gap:clamp(12px,1.4vw,18px);flex-wrap:wrap;
  align-items:stretch;margin-top:36px;padding-top:28px;
  border-top:1px solid rgba(250,246,239,.22)}
/* Gleiche Bauart wie die Kaestchen der Trust-Leiste darunter: weisse Karte,
   zentrierte Versalien, gleicher Radius und Schatten. Beide Kaesten teilen
   sich die Breite (flex:1), damit sie gleich gross sind. */
.hm-box{flex:1 1 0;min-width:0;
  background:var(--paper);border-radius:var(--r);padding:22px 20px;
  box-shadow:var(--sh);border:1px solid rgba(255,255,255,.7);
  display:grid;place-items:center;text-align:center}
.hm-box .text{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--ink);line-height:1.6}

.hero-tag{position:absolute;right:clamp(24px,4vw,58px);bottom:clamp(24px,4vw,52px);z-index:3;text-align:right}
.hero-tag .signature-name{font-size:clamp(18px,1.6vw,23px);font-weight:300;color:var(--paper);line-height:1.1}
.hero-tag .role{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,239,.72);margin-top:7px;font-weight:500}
/* V4.107: Der alte Kennzahlen-Block (Zahl ueber Bezeichnung) stand hier und
   hat den neuen Kasten-Block weiter oben ueberschrieben, weil er spaeter in
   der Datei kam. Entfernt. */

/* ---------- Trust: schwebende Pillen ---------- */
/* Vier Kaestchen seit V4.46. Bewusst ein Raster mit fester Spaltenzahl statt
   flex-wrap mit 260-px-Basis: bei flex haengt der Umbruch am Zusammenspiel von
   --pad und --maxw, und genau dadurch fiel das vierte Kaestchen bei 1200 px
   allein in eine 1080 px breite Zeile. Die Spaltenzahl ist jetzt eindeutig. */
.trust{
  /* Seit V4.109 FUENF Kaestchen — die beiden Aussagen aus dem Hero sind
     hierher gewandert. */
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
  max-width:var(--maxw);margin:clamp(-40px,-4vw,-30px) auto 0;position:relative;z-index:5;
  padding-block:0
}
@media (max-width:1240px){.trust{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.trust{grid-template-columns:minmax(0,1fr)}}
.trust .item{
  /* Knapperes Polster fuer fuenf Spalten: die Kaestchen sind dann nur noch
     rund 227 px breit und der laengste Text muss trotzdem zweizeilig bleiben. */
  /* Polster seit V4.110 von 22px auf 17px gekuerzt: die Icons bringen 34px
     Hoehe mit, so waechst das Kaestchen unterm Strich nur um rund 24px statt 44. */
  background:var(--paper);border-radius:var(--r);padding:17px 16px 19px;
  box-shadow:var(--sh);border:1px solid rgba(255,255,255,.7);text-align:center;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)
}
.trust .item:hover{transform:translateY(-5px);box-shadow:var(--sh-l)}
.trust .item .num{display:none}
/* Icons (V4.110). Feine Strichzeichnung in Taupe — dieselbe Sprache wie die
   Haarlinien im Rest der Seite, keine gefuellten Flaechen. Beim Hover zieht das
   Icon minimal mit an, damit die Karte als eine Einheit reagiert. */
.trust .item .ico{
  display:block;width:26px;height:26px;margin:0 auto 11px;
  color:var(--taupe-dark);opacity:.85;
  transition:opacity .5s var(--ease),transform .5s var(--ease)
}
.trust .item:hover .ico{opacity:1;transform:scale(1.06)}
.trust .item .text{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--ink);line-height:1.6}
/* ==========================================================================
   KACHELN (Behandlungen, Blog) — Bildzoom + Karte hebt sich
   ========================================================================== */
.treatments-grid,.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,2vw,28px)
}
.treatment,.blog-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border-radius:var(--r-l);border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--sh-s);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)
}
.treatment:hover,.blog-card:hover{transform:translateY(-8px);box-shadow:var(--sh-l)}
.treatment-img,.blog-card .cover{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--sand)}
.treatment-img img,.blog-card .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.treatment:hover .treatment-img img,.blog-card:hover .cover img{transform:scale(1.07)}
.treatment-img::after,.blog-card .cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(58,50,44,.34),transparent 52%);opacity:.85;
  transition:opacity .55s var(--ease)}
.treatment:hover .treatment-img::after{opacity:.55}
.treatment-img-label,.blog-card .cover .label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(250,246,239,.62);font-size:11px;letter-spacing:.2em;text-transform:uppercase;z-index:2}
.treatment-body,.blog-card .body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.treatment-body .top,.blog-card .meta{display:flex;gap:12px;align-items:baseline;margin-bottom:12px}
.treatment-body .num,.blog-card .date{display:none}
.treatment-body .tag,.blog-card .cat{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-dark);font-weight:600}
.treatment-body h3,.blog-card h3{margin-bottom:12px}
.treatment-body p,.blog-card p{font-size:14.5px;line-height:1.68;margin-bottom:22px;flex:1}
.more{
  align-self:flex-start;margin-top:auto;position:relative;padding-bottom:5px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.more::after{content:'';position:absolute;left:0;bottom:0;width:26px;height:1.5px;background:var(--taupe);
  transition:width .5s var(--ease)}
.treatment:hover .more::after,.blog-card:hover .more::after{width:100%}

/* ==========================================================================
   DETAILSEITEN
   ========================================================================== */
.breadcrumb{max-width:var(--maxw);margin:26px auto 0;padding-inline:var(--pad);color:var(--taupe-dark)}
.breadcrumb .sep{margin:0 9px;color:var(--taupe)}
.breadcrumb .here{color:var(--ink)}
.breadcrumb a{transition:color .3s var(--ease)}
.breadcrumb a:hover{color:var(--taupe)}

.t-hero{
  max-width:var(--maxw);margin:clamp(20px,3vw,40px) auto clamp(30px,4vw,56px);
  padding-inline:var(--pad);
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,5vw,74px);align-items:center
}
.t-hero .kicker{margin-bottom:20px}
.t-hero .kicker .no{display:none}
.t-hero .kicker .tag{color:var(--taupe-dark)}
.t-hero h1{font-weight:200;margin-bottom:20px;text-wrap:balance}
.t-hero .sub{font-size:clamp(17px,1.4vw,20px);font-weight:300;color:var(--taupe-dark);line-height:1.3;margin-bottom:26px}
.t-hero .lead{font-size:16.5px;line-height:1.8;max-width:520px;margin-bottom:34px}
.t-hero-cta{display:flex;gap:16px 26px;align-items:center;flex-wrap:wrap}
.t-hero-media{position:relative}
.t-hero-img{
  position:relative;aspect-ratio:6/5.5;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-l);
  background:linear-gradient(150deg,var(--taupe),var(--taupe-dark))}
/* Überstand oben/unten, damit die Parallaxe keine Kante freilegt */
.t-hero-img img{position:absolute;top:-7%;left:0;width:100%;height:114%;
  object-fit:cover;will-change:transform}
/* Querformat-Variante (V4.51). Der Standardrahmen ist 6/5.5, also fast
   quadratisch — ein 4:3-Bild wuerde darin links und rechts beschnitten. */
.t-hero-quer .t-hero-img{aspect-ratio:4/3}

/* Titelbild (V4.54) — nur Bild, keine Textspalte.
   Die Maße muessen EXAKT denen von .story-inner darunter entsprechen: gleiches
   max-width, gleiches padding-inline ueber die Section. Deshalb hier bewusst
   kein eigenes Maß erfinden, sondern dieselben Variablen benutzen.
   width:100% + height:auto statt object-fit: so bleibt das Seitenverhaeltnis
   des Bildes unveraendert, nichts wird beschnitten oder gestaucht. */
.titelbild{padding-block:0;margin-top:clamp(6px,1vw,14px)}
.titelbild-inner{max-width:var(--maxw);margin-inline:auto}
.titelbild-inner img{display:block;width:100%;height:auto;
  border-radius:var(--r-l);box-shadow:var(--sh-l)}
/* Hochformat-Variante fuer das Kontaktbild (3:4). */
.t-hero-hoch .t-hero-img{aspect-ratio:4/5}
/* Produktbild statt Raumfoto (V4.52), fuer die Microkamera auf Haut & Haarcheck.
   Ein freigestelltes Geraet auf Weiss vertraegt kein object-fit:cover — der
   Rahmen wuerde die Objektive unten abschneiden. Also contain, weisse Flaeche
   und Innenabstand. Das Bild traegt hier kein data-parallax, deshalb braucht
   es auch den Ueberstand von 114 % nicht. */
/* Nachweis Originalgeraet (V4.61). Logo links, Aussage rechts, auf schmalen
   Schirmen gestapelt und zentriert. Das Logo ist ein PNG in fester Box
   520x150 (wie in der Partnerleiste) — deshalb ueber die Hoehe steuern und
   width:auto, sonst verzerrt es. */
.original-band{padding-block:0;margin-block:clamp(4px,1.2vw,16px)}
.original-inner{max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(20px,3vw,46px);flex-wrap:wrap;
  background:var(--creme);border-radius:var(--r-l);
  padding:clamp(20px,2.6vw,30px) clamp(24px,3.2vw,42px)}
.original-inner img{height:clamp(30px,3vw,42px);width:auto;flex:none;display:block}
.original-text{flex:1 1 320px;min-width:0}
.original-lab{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--taupe-dark);margin-bottom:7px}
.original-text p{font-size:15.5px;line-height:1.7;color:var(--ink);margin:0}
@media (max-width:640px){
  .original-inner{flex-direction:column;text-align:center}
  .original-text{flex:1 1 auto}
}

/* Quadratische Variante (V4.55), fuer die Vorher-Nachher-Collage auf
   Haarkonzept. Rahmen 1:1 wie das Bild, damit gar nichts beschnitten wird —
   bei einer 2x2-Collage saehe jeder Anschnitt nach Fehler aus. Ohne den
   Parallaxen-Ueberstand, das Bild traegt hier kein data-parallax. */
.t-hero-quadrat{aspect-ratio:1/1}
.t-hero-quadrat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.t-hero-img.ist-produkt{background:#fff;aspect-ratio:4/5}
.t-hero-img.ist-produkt img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:clamp(20px,2.6vw,38px)}
/* Querformat-Variante (V4.110) fuer das EMChair-X-Motiv auf der
   Beckenboden-Seite: 1568 x 1254, also 5:4. Im Standardrahmen (6/5.5) hat
   `object-fit:cover` seitlich 23,5 %, oben 3,6 % und unten 8,7 % abgeschnitten —
   der Frau fehlten Kopf und Fuesse (gemessen, René). Rahmen und Bild haben jetzt
   dasselbe Verhaeltnis, mit `contain` bleibt nichts uebrig, was beschnitten
   werden koennte. Kein `data-parallax` am Bild: der Ueberstand von 114 % waere
   genau der Schnitt oben und unten. */
.t-hero-img.ist-produkt.ist-quer{aspect-ratio:5/4}
.t-hero-img.ist-produkt.ist-quer img{padding:clamp(8px,1.2vw,18px)}
.t-hero-img .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:rgba(250,246,239,.6)}
.t-hero-img .ph .ico,.t-hero-img .ph .txt{font-size:11px;letter-spacing:.2em;text-transform:uppercase}

.t-body,.p-body{max-width:var(--maxw);margin-inline:auto}
/* Die Lesespalte steht mittig in der Seite — sonst klebt der ganze Inhalt
   links und rechts bleibt ein totes Feld. Breite auf angenehme Zeilenlänge
   begrenzt (~80 Zeichen), damit das Auge die Zeile nicht verliert. */
.t-prose,.p-prose{max-width:730px;margin-inline:auto}
/* Bild- und Kartenbausteine dürfen über die Lesespalte hinaus atmen —
   Text bleibt gut lesbar, die Seite wirkt trotzdem großzügig. */
@media (min-width:1080px){
  .t-prose .zones,.t-prose .stats,.t-prose .facts,.t-prose .icon-grid,
  .t-prose .icon-rows,.t-prose .clean-list,.t-prose .yt{
    width:calc(100% + 180px);margin-left:-90px
  }
}
.t-block,.p-block{padding-block:clamp(26px,2.8vw,38px);border-top:1px solid var(--line)}
.t-block:first-child,.p-block:first-child{border-top:none;padding-top:0}
.t-block h2,.p-block h2{margin-bottom:22px}
.t-block p,.p-block p{font-size:16.5px;line-height:1.85;margin-bottom:18px}
.t-block p:last-child,.p-block p:last-child{margin-bottom:0}
.t-highlight{
  background:var(--creme);border-radius:var(--r);padding:26px 30px;margin-top:26px;
  border-left:3px solid var(--taupe);font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.placeholder-note{
  background:var(--creme);border-radius:var(--r-s);border-left:3px solid var(--taupe);
  padding:18px 24px;font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.lab{font-size:13px;color:var(--taupe-dark)}

/* ---------- Icon-Bausteine (aus V3.13, neu eingekleidet) ---------- */
.ico{width:30px;height:30px;color:var(--taupe-dark);flex:none}
.icon-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px;margin-top:6px}
.icon-grid li{
  background:var(--paper);border-radius:var(--r);padding:26px 16px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:13px;box-shadow:var(--sh-s);
  border:1px solid rgba(255,255,255,.7);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.icon-grid li:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.icon-grid li span{font-size:13px;font-weight:500;color:var(--ink);line-height:1.5}
.icon-rows{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:6px}
.icon-rows li{
  background:var(--paper);border-radius:var(--r);padding:22px 24px;display:flex;gap:16px;
  align-items:flex-start;box-shadow:var(--sh-s);border:1px solid rgba(255,255,255,.7);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.icon-rows li:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.icon-rows li span{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:8px}
.fact{
  background:var(--creme);border-radius:var(--r);padding:28px 28px 26px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fact:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.fact .ico{width:27px;height:27px}
.fact h3{font-size:17px;font-weight:600;letter-spacing:0;margin:0}
.fact p{font-size:14.5px;line-height:1.72;margin:0 0 10px}
.fact p:last-child{margin-bottom:0}
.clean-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 36px;margin-top:8px}
.clean-list li{position:relative;padding:13px 0 13px 22px;font-size:15.5px;line-height:1.6;
  color:var(--ink-soft);border-bottom:1px solid var(--line)}
.clean-list li::before{content:'';position:absolute;left:2px;top:21px;width:5px;height:5px;
  background:var(--taupe);transform:rotate(45deg)}
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:28px}
.zone{background:var(--creme);border-radius:var(--r-l);padding:32px 32px 28px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.zone:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.zone .ico{width:40px;height:40px;margin-bottom:16px}
.zone h3{font-size:17.5px;font-weight:600;letter-spacing:.02em;margin-bottom:16px}
.zone ul{list-style:none;columns:2;column-gap:26px}
.zone li{position:relative;padding:7px 0 7px 18px;font-size:14.5px;color:var(--ink-soft);break-inside:avoid}
.zone li::before{content:'';position:absolute;left:1px;top:15px;width:4px;height:4px;background:var(--taupe);transform:rotate(45deg)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:28px}
.stat{background:var(--creme);border-radius:var(--r-l);padding:34px 26px;text-align:center;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.stat:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.stat .num{display:block;font-size:clamp(30px,2.8vw,40px);font-weight:200;line-height:1;
  letter-spacing:-.04em;color:var(--taupe-dark);margin-bottom:14px}
.stat .txt{display:block;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.hf-lead{font-size:17.5px;line-height:1.72;color:var(--taupe-dark);margin-bottom:22px}

/* ---------- Medien ---------- */
.ba{background:var(--creme);border-radius:var(--r-xl);margin:0 var(--pad);padding-inline:clamp(22px,4vw,58px)}
.ba-head,.vid-head,.voices-head,.faq-head{text-align:center;margin-bottom:clamp(28px,3vw,40px)}
.ba-head p,.vid-head p{font-size:15.5px;line-height:1.75;max-width:620px;margin-inline:auto}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.ba-item{background:var(--paper);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-s);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ba-item:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.ba-item figcaption{padding:16px 20px 18px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink)}
.ba-item figcaption .credit{display:block;margin-top:6px;font-size:10px;letter-spacing:.08em;
  font-weight:500;color:var(--taupe-dark);text-transform:none}
.ba-note{margin-top:30px;background:var(--paper);border-radius:var(--r-s);border-left:3px solid var(--taupe);
  padding:16px 22px;font-size:12.5px;line-height:1.7;color:var(--ink-soft)}
.vid-inner{max-width:1080px}
.vid-frame,.yt-frame{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-l);background:var(--ink);line-height:0}
.vid-frame video{width:100%;display:block}
.vid-note{text-align:center;margin-top:18px;color:var(--taupe-dark)}
.yt{margin-top:8px}
.yt-start{display:block;position:relative;width:100%;padding:0;border:0;cursor:pointer;line-height:0;
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh);background:var(--ink);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.yt-start:hover{transform:translateY(-4px);box-shadow:var(--sh-l)}
.yt-start img{width:100%;opacity:.8;transition:opacity .55s var(--ease),transform 1.1s var(--ease)}
.yt-start:hover img{opacity:1;transform:scale(1.03)}
.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;
  border-radius:50%;border:1px solid rgba(250,246,239,.6);background:rgba(250,246,239,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .45s var(--ease),transform .45s var(--ease)}
.yt-play::after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:18px solid var(--paper);border-top:11px solid transparent;border-bottom:11px solid transparent}
.yt-start:hover .yt-play{background:rgba(250,246,239,.28);transform:translate(-50%,-50%) scale(1.07)}
.yt-label{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--paper)}
.yt-hint{font-size:11.5px;line-height:1.6;color:var(--taupe-dark);margin-top:12px}
.yt-frame{position:relative;aspect-ratio:16/9}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Kundenstimmen ---------- */
.voices{background:transparent}
/* V4.113: Das Kaestchen klebte direkt an der Ueberschrift — gemessen 0 px
   dazwischen (René). Bewusst knapp gehalten, es soll nur atmen. */
.voices-rating{display:inline-flex;align-items:center;gap:12px;padding:12px 22px;border-radius:100px;
  margin-top:clamp(10px,1.1vw,16px);
  background:var(--paper);box-shadow:var(--sh-s);color:var(--ink)}
.voices-rating .stars{color:var(--taupe);letter-spacing:.14em}
.voices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;margin-top:clamp(30px,4vw,48px)}
.voice{background:var(--paper);border-radius:var(--r-l);padding:32px 30px 26px;display:flex;flex-direction:column;
  box-shadow:var(--sh-s);border:1px solid rgba(255,255,255,.7);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.voice:hover{transform:translateY(-6px);box-shadow:var(--sh-l)}
.voice .stars{color:var(--taupe);letter-spacing:.16em;font-size:13px;margin-bottom:16px}
.voice blockquote{font-size:15px;line-height:1.78;color:var(--ink-soft);flex:1;margin-bottom:22px}
.voice .who{padding-top:16px;border-top:1px solid var(--line);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--ink)}
.voice .who .src{display:block;margin-top:6px;font-size:10px;letter-spacing:.1em;font-weight:500;color:var(--taupe-dark)}

/* ---------- CTA-Band: dunkle Insel mit Rundung ---------- */
.cta-band,.checkstart{
  position:relative;margin:0 var(--pad);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,var(--taupe-dark),var(--ink));color:var(--paper);
  text-align:center;padding:clamp(42px,5vw,72px) clamp(24px,5vw,64px);box-shadow:var(--sh-l)}
.cta-band .section-eyebrow{color:var(--sand);justify-content:center}
.cta-band .section-eyebrow::before,
.cta-band .section-eyebrow::after{background:var(--sand)}
.cta-band h2{color:var(--paper);font-weight:200;max-width:760px;margin:0 auto 22px}
.cta-band h2 em{color:var(--sand)}
.cta-band p{color:rgba(250,246,239,.86);max-width:580px;margin:0 auto 34px;font-size:16px;line-height:1.8}
.cta-band .cs-cta{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-band .cs-cta::before{background:var(--sand)}

/* ---------- Zitat ---------- */
.qbreak{text-align:center}
.qbreak blockquote{font-size:clamp(20px,2.2vw,32px);font-weight:200;line-height:1.32;letter-spacing:-.03em;
  color:var(--ink);max-width:1000px;margin:0 auto 28px;text-wrap:balance}
.qbreak cite{font-style:normal;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--taupe-dark)}

/* ---------- FAQ: weiche Akkordeons ---------- */
.faq-inner{max-width:960px}
.faq details{background:var(--paper);border-radius:var(--r);margin-bottom:12px;box-shadow:var(--sh-s);
  border:1px solid rgba(255,255,255,.7);overflow:hidden;transition:box-shadow .45s var(--ease)}
.faq details[open]{box-shadow:var(--sh)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;font-size:16px;font-weight:500;color:var(--ink);transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--taupe-dark)}
.faq summary .ind{position:relative;width:16px;height:16px;flex:none}
.faq summary .ind::before,.faq summary .ind::after{
  content:'';position:absolute;top:50%;left:0;width:16px;height:1.5px;background:var(--taupe-dark);
  transition:transform .45s var(--ease)}
.faq summary .ind::after{transform:rotate(90deg)}
.faq details[open] summary .ind::after{transform:rotate(0)}
.faq .answer{padding:0 28px 26px}
.faq .answer p,.faq .answer li{font-size:15.5px;line-height:1.8;color:var(--ink-soft)}
.faq .answer ul{margin-left:20px}
.faq .answer li{margin-bottom:7px}
/* Schlusszeile unter einem FAQ (V4.46). Auf der Beckenbodenseite stand dieser
   Satz als Akkordeon mit leerer Antwort — er ist keine Frage, sondern ein Fazit. */
.faq-schluss{margin:clamp(22px,2.4vw,32px) auto 0;max-width:760px;text-align:center;
  font-size:17px;line-height:1.7;color:var(--taupe-dark)}

/* ---------- Story / Profil ---------- */
.story-inner,.bianca-inner,.p-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);align-items:center}
.story-img,.p-portrait,.bianca-img{position:relative;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-l);background:linear-gradient(150deg,var(--sand),var(--taupe))}
.story-img img,.p-portrait img,.bianca-img img{width:100%;height:100%;object-fit:cover}
.story-img-tag{position:absolute;left:22px;bottom:22px;background:var(--glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:12px 20px;border-radius:100px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.story-content h2,.bianca-content h2{margin-bottom:24px}
.story-content p,.bianca-content p{font-size:16.5px;line-height:1.85;margin-bottom:20px}
.p-portrait .ph,.bianca-img .ph{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;color:rgba(250,246,239,.66)}
.p-portrait .mono,.bianca-img .ph-icon{font-size:34px;font-weight:200}
.p-portrait .txt,.bianca-img .ph-text{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.credentials{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 26px;
  margin:28px 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.credentials li{list-style:none;display:flex;align-items:center;gap:11px;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.credentials li::before{content:'';width:5px;height:5px;background:var(--taupe);transform:rotate(45deg);flex:none}

/* ---------- Blog ---------- */
.blog-wrap{padding-block:clamp(26px,3vw,40px) clamp(46px,5.2vw,76px)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{
  margin:clamp(40px,5vw,64px) var(--pad) var(--pad);
  border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(160deg,var(--taupe-dark),var(--ink));color:var(--paper);
  padding:clamp(48px,6vw,84px) clamp(24px,5vw,64px) clamp(24px,3vw,36px)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,4vw,62px);
  padding-bottom:clamp(34px,4vw,54px);border-bottom:1px solid rgba(250,246,239,.16)}
/* Logo dominanter und in seiner Spalte mittig (René, 28.07.2026) */
.footer-brand{text-align:center}
.footer-logo{height:clamp(74px,7vw,104px);margin:0 auto 24px;display:block}
.footer-brand p{margin-inline:auto;max-width:26em}
.footer-brand p{font-size:13.5px;line-height:1.95;color:rgba(250,246,239,.82)}
footer h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--sand);margin-bottom:20px}
footer ul{list-style:none}
/* Nur echte Links reagieren auf die Maus. Geschäftszeiten und Hinweise sind
   reine Information — ein Zeigefinger dort weckt eine Erwartung, die ins Leere läuft. */
footer ul li{display:block;font-size:13px;margin-bottom:11px;color:rgba(250,246,239,.82)}
/* Der Link darf inline-block sein (fuer die Hover-Verschiebung), das <li> NICHT —
   sonst stehen Impressum/AGB/Datenschutz nebeneinander statt untereinander. */
footer ul li a{display:inline-block;cursor:pointer;
  transition:color .3s var(--ease),transform .3s var(--ease)}
footer ul li a:hover{color:var(--paper);transform:translateX(3px)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:26px;color:rgba(250,246,239,.5)}

/* ==========================================================================
   BEWEGUNG — Einblenden beim Scrollen (dezent, kein Zirkus)
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.08s}[data-reveal].d2{transition-delay:.16s}
[data-reveal].d3{transition-delay:.24s}[data-reveal].d4{transition-delay:.32s}

/* ==========================================================================
   RESPONSIV
   ========================================================================== */
@media (max-width:1320px){
  :root{--head-h:66px}
  .t-hero,.story-inner,.bianca-inner,.p-hero{grid-template-columns:1fr;gap:32px}
  .t-hero-media,.p-portrait{order:-1;max-width:460px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .zone ul{columns:1}
  /* Mobile Navigation: Vollflächiges Glas-Panel */
  .nav-burger{display:flex}
  .site-nav{
    position:fixed;inset:var(--head-h) 12px auto;z-index:190;
    flex-direction:column;align-items:stretch;gap:0;
    margin:14px 0 0;padding:0 22px;border-radius:var(--r-l);
    /* Deutlich deckender als die Kopfleiste: das Panel liegt über Bildern
       und muss ohne Anstrengung lesbar sein. */
    background:rgba(250,246,239,.985);-webkit-backdrop-filter:saturate(180%) blur(24px);
    backdrop-filter:saturate(180%) blur(24px);box-shadow:var(--sh-l);
    border:1px solid rgba(255,255,255,.6);
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .55s var(--ease),opacity .4s var(--ease),padding .45s var(--ease)}
  .nav-toggle:checked ~ .site-nav{max-height:calc(100vh - var(--head-h) - 40px);overflow-y:auto;
    opacity:1;pointer-events:auto;padding:12px 22px 24px}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .site-nav ul li{padding:16px 2px;border-bottom:1px solid var(--line);font-size:13px}
  .site-nav ul li::after{display:none}
  .site-nav .nav-cta{width:100%;margin-top:20px}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
  .infobar span:nth-child(2){display:none}
}
/* ==========================================================================
   MOBILE ANSICHT (ueberarbeitet V4.86)
   Gemessen bei 375 px, danach gezielt geaendert. Die Befunde standen alle im
   Weg, wenn die Seite hochwertig wirken soll:
     - Die Infozeile lief ueber ZWEI Zeilen und ihr erster Eintrag
       ("Erstes 5-Sterne-Fachinstitut") stand woertlich noch einmal als Kachel
       im Hero direkt darunter. Doppelt gesagt wirkt nie edel.
     - Die Kachel selbst brauchte DREI Zeilen (267x67 px) — ein Textklumpen.
     - Das Hero-Bild war nur 270 px hoch bei 62vw: ein breiter Streifen, in dem
       Sabrina klein und angeschnitten wirkte.
     - Die Kontaktleiste lag mit voller Deckkraft ueber dem Flie&szlig;text.
   ========================================================================== */
@media (max-width:680px){
  body{font-size:15.5px}

  /* Infozeile: nur noch die Oeffnungszeiten, EINE Zeile. Die Auszeichnung
     steht als Kachel im Hero, die Rufnummer in der Kontaktleiste, die
     Anschrift in der Fusszeile — hier waere alles davon Wiederholung. */
  .infobar{font-size:9.5px;letter-spacing:.09em;padding-block:9px}
  .infobar span:nth-child(1),
  .infobar span:nth-child(2),
  .infobar span:nth-child(3){display:none}

  /* Hero als eine Karte: Bild oben, dunkler Textblock darunter, gemeinsame
     Rundung. Das Bild deutlich hoeher (4:3 statt flacher Streifen), damit
     Sabrina gross und ruhig steht statt angeschnitten. */
  .hero{min-height:auto;margin-inline:12px;border-radius:var(--r-l)}
  .hero-image{position:relative;inset:auto;order:-1;
    height:min(96vw,420px);min-height:320px}
  .hero-image img{position:absolute;top:0;height:100%;transform:none !important;
    object-position:center 22%}      /* Gesicht ins obere Drittel holen */
  .hero-text{padding:26px 22px 30px;background:var(--ink);max-width:none}

  /* Kachel: engere Sperrung und weniger Polster -> zwei statt drei Zeilen. */
  .hero-badge{margin-bottom:22px;padding:8px 15px;font-size:9px;letter-spacing:.07em;
    line-height:1.5}
  .hero-badge .stars{letter-spacing:.05em}

  .hero-text h1{text-shadow:none;font-size:clamp(26px,7.2vw,32px);line-height:1.14;
    letter-spacing:-.01em}
  .hero-text .lead{font-size:14.5px;line-height:1.75;margin:18px 0 26px}

  /* Die Kennzahlen stehen seit V4.94 als Kaestchen in der Trust-Leiste. */
  .hero-meta{display:none}
  .hero-siegel{margin-top:26px;padding-top:22px}
  .hero-siegel img{width:clamp(96px,27vw,116px)}
  .hero-cta-row{gap:12px}
  /* Beide volle Breite. Polster und Sperrung leicht reduziert, damit
     „Zusammenarbeit anfragen" bei 375 px in EINE Zeile passt — sonst war der
     eine Knopf 70 px hoch und der andere 52 px, was als Paar schief aussah. */
  .hero-cta-row .btn-primary,.hero-cta-row .btn-outline{
    width:100%;text-align:center;padding-inline:16px;letter-spacing:.11em}
  .hero-tag{position:static;text-align:left;padding:0 22px 24px;background:var(--ink)}

  .trust{margin-top:16px}
  .footer-grid{grid-template-columns:1fr}
  .clean-list,.zones,.stats{grid-template-columns:1fr}
  .icon-grid{grid-template-columns:repeat(2,1fr)}
}

/* Rücksicht auf Nutzer, die Bewegung reduzieren wollen */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Kostenlos-Auszeichnung (Haut & Haarcheck) ----------
   „kostenlos." ist Sabrinas stärkstes Einstiegsargument — es soll sofort
   ins Auge fallen, ohne nach Rabattschild auszusehen. */
.free-badge{display:inline-flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  background:var(--creme);border-radius:100px;padding:14px 28px;margin-bottom:26px}
.free-word{font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.free-note{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--taupe-dark)}
/* Platzhalter für noch fehlendes Bildmaterial */
.ph-media{display:grid;place-items:center;aspect-ratio:16/9;border-radius:var(--r-l);
  background:linear-gradient(150deg,var(--sand),var(--taupe));color:rgba(250,246,239,.8);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}

/* ==========================================================================
   ANFRAGEFORMULAR (V4.19)
   ========================================================================== */
.form-notice{background:var(--creme);border-left:3px solid var(--taupe);border-radius:var(--r-s);
  padding:18px 24px;font-size:14px;line-height:1.7;color:var(--ink-soft);margin-bottom:34px}
.form-notice a{color:var(--taupe-dark);font-weight:600;border-bottom:1px solid var(--taupe)}
.anfrage{display:flex;flex-direction:column;gap:20px}
.f-row{display:grid;gap:20px}
.f-row.f-2{grid-template-columns:1fr 1fr}
.f-field{display:flex;flex-direction:column;gap:9px}
.f-label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--taupe-dark)}
.f-label em{font-style:normal;color:var(--taupe)}
.f-opt{text-transform:none;letter-spacing:.02em;font-weight:500;opacity:.75}
.anfrage input,.anfrage textarea,.anfrage select{
  font-family:inherit;font-size:15.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-s);
  padding:15px 18px;width:100%;resize:vertical;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.anfrage input::placeholder,.anfrage textarea::placeholder{color:var(--taupe)}
.anfrage input:focus,.anfrage textarea:focus,.anfrage select:focus{
  outline:none;border-color:var(--taupe-dark);box-shadow:0 0 0 4px rgba(194,180,169,.28)}
.anfrage input:disabled,.anfrage textarea:disabled,.anfrage select:disabled{
  background:rgba(233,227,218,.5);color:var(--taupe-dark);cursor:not-allowed}
/* Rueckmeldung zur Rufnummer (V4.51). Steht unter "Bevorzugte Kontaktmoeglichkeit",
   weil dort die Folge sichtbar wird. Gesperrte <option> grau, damit im
   aufgeklappten Menue erkennbar ist, warum WhatsApp nicht geht. */
.f-tel-hinweis{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:var(--taupe-dark)}
.f-tel-hinweis.ist-festnetz{color:var(--ink-soft)}
.f-tel-hinweis.ist-festnetz::before,
.f-tel-hinweis.ist-mobil::before{content:'';display:inline-block;width:7px;height:7px;
  border-radius:50%;margin-right:8px;vertical-align:1px}
.f-tel-hinweis.ist-festnetz::before{background:var(--taupe)}
.f-tel-hinweis.ist-mobil::before{background:#25D366}
.anfrage select option:disabled{color:var(--taupe)}

/* Pflicht-Einwilligung (V4.46). Die allgemeine Regel `.anfrage input` setzt
   width:100% und 15px Polster — auf einer Checkbox waere das ein Riesenkasten,
   darum hier eigene Masse. Kasten in Creme, damit die Zeile als eigener Schritt
   vor dem Absenden gelesen wird und nicht als weiteres Eingabefeld. */
.f-consent{display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  background:var(--creme);border-radius:var(--r-s);padding:18px 20px}
.f-consent input[type=checkbox]{
  width:19px;height:19px;flex:none;margin:3px 0 0;padding:0;border-radius:5px;
  accent-color:var(--taupe-dark);cursor:pointer}
.f-consent input[type=checkbox]:disabled{cursor:not-allowed}
.f-consent:has(input:disabled){cursor:not-allowed;opacity:.72}
.f-consent span{font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.f-consent em{font-style:normal;color:var(--taupe)}
.f-consent a{color:var(--taupe-dark);text-decoration:underline;text-underline-offset:3px}
.f-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:8px}
.f-actions .btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.f-hint{font-size:12.5px;line-height:1.6;color:var(--taupe-dark);max-width:420px}
.f-hint em{font-style:normal;color:var(--taupe)}
.f-danke{background:var(--creme);border-radius:var(--r-l);padding:38px 34px;text-align:center}
.f-danke h2{margin-bottom:14px}
@media (max-width:680px){ .f-row.f-2{grid-template-columns:1fr} }

/* ==========================================================================
   PROFILSEITE (V4.20) — Bianka Wittulski
   Problem vorher: ein leeres Portrait-Feld von 620x775px hat die Seite
   beherrscht, der Text stand als schmaler Streifen daneben und die Vita erst
   weit unterhalb. Solange kein Foto vorliegt, darf der Platzhalter nicht die
   Hauptrolle spielen — er wird klein, ruhig und sichtbar als Platzhalter.
   ========================================================================== */
.p-hero{
  /* Nicht der Spaltenabstand war das Problem, sondern die Textspalte selbst:
     903 px breit fuer Inhalt, der nur ~480 px braucht — dazwischen 534 px
     sichtbare Leere. Jetzt ist die Textspalte auf Inhaltsbreite begrenzt,
     das Bild groesser, und das Paar steht mittig. */
  grid-template-columns:minmax(0,580px) clamp(320px,34vw,480px);
  justify-content:center;
  align-items:center;
  padding-block:clamp(14px,2.4vw,30px) clamp(26px,3.6vw,48px);
  gap:clamp(28px,3.6vw,60px);
}
.p-hero-text{order:0}
.p-hero h1{font-weight:200;text-wrap:balance;margin-bottom:0}
.p-role{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--taupe-dark);font-weight:600;margin:14px 0 20px}
.p-hero .lead{max-width:none;margin:0}

/* Eckdaten — ausschließlich Formulierungen aus Biankas eigenem Text */
.p-creds{list-style:none;margin:clamp(24px,3vw,34px) 0 0;padding:0;border-top:1px solid var(--line)}
.p-creds li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 18px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.5;color:var(--taupe-dark)}
.p-creds li strong{
  flex:none;min-width:10.5em;font-size:14.5px;font-weight:500;color:var(--ink);letter-spacing:.01em}

/* Portrait-Platzhalter: klein, hochkant, ohne Drama */
.p-portrait{
  order:1;width:100%;aspect-ratio:4/5;
  background:linear-gradient(160deg,var(--creme) 0%,var(--sand) 100%);
  box-shadow:var(--sh)}
.p-portrait .ph{gap:14px;color:var(--taupe-dark)}
.p-portrait .mono{font-size:38px;font-weight:200;letter-spacing:.14em;opacity:.8}
.p-portrait .txt{font-size:10px;letter-spacing:.26em;opacity:.75}

/* Vita: erster Absatz trägt den Einstieg, Schlusszeile wird zur Signatur */
.p-block:first-child p:first-child{font-size:18px;line-height:1.78;color:var(--ink)}
.p-sign{text-align:center}
.p-sign p{font-size:clamp(18px,1.6vw,21px);font-weight:300;line-height:1.5;color:var(--taupe-dark)}
.p-sign .who{
  margin-top:16px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--taupe-dark)}

@media (max-width:900px){
  /* Name zuerst, Platzhalter danach — ein leeres Feld gehört nicht über die Überschrift */
  .p-hero{grid-template-columns:1fr;gap:30px}
  .p-portrait{order:1;max-width:290px}
  .p-creds li strong{min-width:100%}
}

/* ---------- Aktionszeile (Haarkonzept: WhatsApp + Telefon) ---------- */
.wa-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}

/* ==========================================================================
   MEISTERBETRIEB-SIEGEL (V4.41) — fertiges Siegel von Sabrina
   Die selbst gezeichneten Fassungen (V4.18/4.29/4.39) sind ersetzt. Das
   gelieferte Siegel ist bereits in Silber/Taupe gehalten und passt damit in
   die Farbwelt. Rund freigestellt, mit weichem Schatten, gleicher
   Schattensatz, damit sich beide Siegel sauber vom Foto abheben.
   ========================================================================== */
.mb-seal{
  position:absolute; z-index:4;
  top:clamp(20px,3.4vh,50px); right:clamp(20px,3.2vw,52px);
  width:clamp(132px,13.5vw,190px); aspect-ratio:1; border-radius:50%;
  box-shadow:
    0 0 0 5px rgba(250,246,239,.20),
    0 14px 34px -12px rgba(58,50,44,.5),
    0 34px 70px -34px rgba(58,50,44,.6);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mb-seal:hover{transform:scale(1.03)}
.mb-seal img{display:block;width:100%;height:auto;border-radius:50%}

/* ⚠️ Mobil GEHOERT DAS SIEGEL NACH LINKS. Auf dem Handy wird das Hero-Foto
   quer beschnitten, dabei rutscht Sabrina an den rechten Bildrand — das Siegel
   lag dann bei 80 % Breite und 26 % Hoehe, also direkt auf ihrem Gesicht
   (gemessen bei 375 px). Links liegt die Steinwand, dort stoert es nicht.
   Wer den Bildausschnitt aendert: vorher nachmessen, wo der Kopf liegt. */
@media (max-width:680px){
  /* left MUSS die Innenabstaende der Hero-Section einrechnen: sie traegt
     padding-inline:var(--pad) (mobil 22 px), das Bild beginnt also erst dort.
     Mit left:14px ragte das Siegel 8 px ueber die gerundete Bildkante hinaus. */
  .mb-seal{width:clamp(84px,24vw,104px);top:14px;right:auto;
    left:calc(var(--pad) + 12px)}
}


/* ---------- Haarkonzept: Logo der Marke Haarbalance ---------- */
.hk-logo{display:block;width:auto;height:clamp(64px,6.4vw,92px);
  margin:0 auto clamp(18px,2vw,26px)}

/* ==========================================================================
   PRESSE + GROSSANSICHT (V4.28) — Aktuelles
   Reine CSS-Loesung ueber eine versteckte Checkbox, wie beim mobilen Menue.
   Die Grossansicht ist scrollbar, damit eine Zeitungsseite wirklich lesbar ist.
   ========================================================================== */
.press{margin:clamp(22px,2.6vw,32px) 0 0}
.press-thumb{
  display:block;position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);cursor:zoom-in;background:var(--paper);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.press-thumb:hover{transform:translateY(-4px);box-shadow:var(--sh-l)}
.press-thumb img{display:block;width:100%;height:auto}
.press-zoom{
  position:absolute;right:14px;bottom:14px;
  padding:9px 16px;border-radius:100px;
  background:rgba(58,50,44,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(250,246,239,.34);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--paper)}
.press figcaption{
  margin-top:12px;font-size:12px;line-height:1.6;color:var(--taupe-dark);text-align:center}

.lb-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lb{position:fixed;inset:0;z-index:400;display:none}
.lb-toggle:checked ~ .lb{display:block}
.lb-bg{position:absolute;inset:0;background:rgba(58,50,44,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:zoom-out}
.lb-inner{
  position:relative;height:100%;display:flex;flex-direction:column;
  padding:clamp(12px,2.4vw,30px);gap:12px}
.lb-scroll{
  flex:1;overflow:auto;border-radius:var(--r-s);background:var(--paper);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.lb-scroll img{display:block;width:100%;max-width:1500px;height:auto;margin-inline:auto}
.lb-close{
  position:absolute;top:calc(clamp(12px,2.4vw,30px) - 4px);right:calc(clamp(12px,2.4vw,30px) - 4px);
  z-index:2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(250,246,239,.14);border:1px solid rgba(250,246,239,.4);
  color:var(--paper);font-size:22px;line-height:1;cursor:pointer;
  transition:background .3s var(--ease)}
.lb-close:hover{background:rgba(250,246,239,.28)}
.lb-bar{
  display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.lb-bar a,.lb-bar label{color:rgba(250,246,239,.85);cursor:pointer;
  border-bottom:1px solid rgba(250,246,239,.4);padding-bottom:3px;transition:color .3s var(--ease)}
.lb-bar a:hover,.lb-bar label:hover{color:var(--paper)}

/* Auf schmalen Schirmen zeigt die Grossansicht das Bild in Originalbreite,
   damit man den Artikel durch Scrollen wirklich lesen kann. */
@media (max-width:760px){
  .lb-scroll img{width:auto;max-width:none;min-width:920px}
}


/* ==========================================================================
   VIDEO-KUNDENSTIMMEN (V4.33)
   Drei Karten im Hochformat (4/5 wie die uebrigen Portraetflaechen der Seite).
   Solange kein Video vorliegt, traegt die Flaeche einen ruhigen Verlauf mit
   Abspielzeichen — erkennbar als Platzhalter, ohne billig zu wirken.
   ========================================================================== */
.vtest{padding-block:clamp(46px,5.2vw,76px)}
.vtest-inner{max-width:var(--maxw);margin-inline:auto}
.vtest-head{text-align:center;margin-bottom:clamp(28px,3vw,40px)}
.vtest-grid{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(16px,2vw,30px)}
/* Feste, ruhige Kartenbreite statt "so breit wie Platz da ist": bei zwei
   Videos nahm jedes 643 px und wurde 1143 px hoch — das erschlug die Seite.
   Hochformat-Videos vom Handy wirken in Telefongroesse am natuerlichsten. */
.vt{margin:0;width:clamp(210px,19vw,290px)}
.vt-ph{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;
  display:grid;place-items:center;gap:16px;align-content:center;
  background:linear-gradient(155deg,var(--sand) 0%,var(--taupe) 62%,var(--taupe-dark) 100%);
  box-shadow:var(--sh);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.vt:hover .vt-ph{transform:translateY(-5px);box-shadow:var(--sh-l)}
/* Abspielzeichen: Kreis mit Dreieck, rein aus CSS */
.vt-play{
  width:60px;height:60px;border-radius:50%;
  background:rgba(250,246,239,.18);border:1px solid rgba(250,246,239,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;position:relative}
.vt-play::after{
  content:'';width:0;height:0;margin-left:4px;
  border-left:15px solid var(--paper);
  border-top:9.5px solid transparent;border-bottom:9.5px solid transparent}
.vt-note{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:rgba(250,246,239,.85)}
.vt figcaption{
  margin-top:14px;text-align:center;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:var(--taupe-dark)}

/* ==========================================================================
   PARTNER-BAND (V4.34) — endlos von rechts nach links
   Die Logo-Reihe steht zweimal hintereinander im Band. Die Animation schiebt
   genau um -50%, danach springt sie zurueck — weil an dieser Stelle exakt
   dasselbe Bild steht, sieht man den Sprung nicht. Ohne Bibliothek.
   ========================================================================== */
.partners{padding-block:clamp(34px,3.6vw,52px)}
.partners-head{text-align:center;margin-bottom:clamp(20px,2.4vw,30px)}
.marquee{
  position:relative;overflow:hidden;
  /* weiche Kanten, damit die Logos nicht hart abgeschnitten hereinlaufen */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.marquee-track{
  display:flex;align-items:center;width:max-content;
  gap:clamp(30px,4vw,66px);
  animation:marqueeRun 52s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.pl{flex:none;width:clamp(104px,10.5vw,164px);display:grid;place-items:center}
.pl img{
  display:block;width:100%;height:auto;
  opacity:.62;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pl:hover img{opacity:1;transform:translateY(-2px)}
@keyframes marqueeRun{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@media (prefers-reduced-motion:reduce){
  /* Kein Umbruch in mehrere Zeilen — die Logos bleiben auf einer Hoehe,
     das Band steht nur still und laesst sich seitlich schieben. */
  .marquee{overflow-x:auto;scrollbar-width:none}
  .marquee::-webkit-scrollbar{display:none}
  .marquee-track{animation:none;justify-content:center;width:auto}
  .marquee-track .pl[aria-hidden="true"]{display:none}
}

/* ---------- Soziale Netzwerke in der Fusszeile (V4.34) ---------- */
.social{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.social a{
  display:inline-flex;align-items:center;gap:9px;
  color:rgba(250,246,239,.72);cursor:pointer;
  transition:color .35s var(--ease),transform .35s var(--ease)}
.social a:hover{color:var(--paper);transform:translateY(-2px)}
.social svg{
  width:19px;height:19px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.social svg .dot,.social svg path:not(.fill){fill:currentColor;stroke:none}
.social svg .fill{fill:currentColor;stroke:none}
.social span{font-size:11.5px;letter-spacing:.1em}
@media (max-width:680px){ .social{justify-content:center;width:100%} }

/* ==========================================================================
   KONTAKTLEISTE (V4.36) — rechts, laeuft auf jeder Seite mit
   Drei Knoepfe in Signalfarben (Renés Entscheidung): WhatsApp gruen,
   Telefon blau, Nachricht warmes Orangerot. WhatsApp oeffnet ein kleines
   Fenster, Telefon und Brief wirken sofort. Alles ohne Bibliothek.
   ========================================================================== */
.crail{
  position:fixed;right:clamp(14px,1.6vw,24px);
  bottom:clamp(16px,3vh,28px);            /* unten rechts, uebereinander */
  z-index:300;display:flex;flex-direction:column;gap:12px}
.crail-btn{
  width:clamp(46px,3.6vw,54px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;position:relative;
  /* <button> bringt von Haus aus Rahmen und Grauton mit — beides weg,
     sonst liegt ein dunkler Saum um den Knopf. */
  border:0;padding:0;margin:0;appearance:none;-webkit-appearance:none;font:inherit;
  color:#fff;box-shadow:0 6px 18px -6px rgba(58,50,44,.35),0 16px 36px -18px rgba(58,50,44,.4);
  /* Im Ruhezustand zurueckgenommen: halbtransparent und entsaettigt, damit die
     Knoepfe die Seite nicht dominieren. Beim Zeigen und beim Scrollen treten
     sie in die volle Farbe. */
  opacity:.55;filter:saturate(.55);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),
             opacity .45s var(--ease),filter .45s var(--ease)}
.crail-btn:focus{outline:none}
.crail-btn:focus-visible{outline:2px solid var(--taupe-dark);outline-offset:3px;
  opacity:1;filter:none}
.crail-btn:hover,.crail-btn:focus-visible{
  opacity:1;filter:saturate(1.06);transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 24px -6px rgba(58,50,44,.5),0 22px 46px -18px rgba(58,50,44,.55)}
/* Waehrend gescrollt wird, wird die Leiste kurz kraeftiger — sie meldet sich,
   ohne sich dauerhaft in den Vordergrund zu draengen. */
.crail.aktiv .crail-btn{opacity:.92;filter:saturate(.95)}
/* Bei geoeffnetem Fenster bleibt der WhatsApp-Knopf voll da. */
.crail-btn.wa[aria-expanded="true"]{opacity:1;filter:none}
.crail-btn svg{width:52%;height:52%;fill:currentColor;stroke:none;display:block}
/* Der Briefumschlag ist gezeichnet, nicht gefuellt — sonst ist es ein Quadrat. */
.crail-btn.mail svg{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.crail-btn.wa  {background:#25D366}
.crail-btn.tel {background:#2F7CC4}
.crail-btn.mail{background:#D2603A}
/* Beschriftung erscheint links daneben */
.crail-btn::after{
  content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(6px);white-space:nowrap;
  background:var(--ink);color:var(--paper);border-radius:100px;padding:7px 14px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.crail-btn:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---------- kleines WhatsApp-Fenster ---------- */
.wa-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.wa-panel{
  position:fixed;z-index:301;
  right:clamp(14px,1.6vw,24px);
  bottom:calc(clamp(16px,3vh,28px) + 3*clamp(46px,3.6vw,54px) + 34px);
  width:min(310px,calc(100vw - 40px));
  background:var(--ink);color:var(--paper);border-radius:var(--r);
  padding:18px 20px 20px;box-shadow:0 24px 60px -18px rgba(58,50,44,.6);
  /* Bewusst display statt opacity/visibility: eindeutig, ohne Uebergangs-Zustaende. */
  display:none}
.wa-panel.open{display:block;animation:waIn .3s var(--ease) both}
@keyframes waIn{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to  {opacity:1;transform:none}}
.wa-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.wa-mark{width:22px;height:22px;color:#25D366;flex:none}
.wa-mark svg{width:100%;height:100%;fill:currentColor;display:block}
.wa-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.wa-close{margin-left:auto;cursor:pointer;font-size:20px;line-height:1;
  color:rgba(250,246,239,.6);transition:color .3s var(--ease)}
.wa-close:hover{color:var(--paper)}
.wa-bubble{
  background:rgba(250,246,239,.1);border-radius:14px 14px 14px 4px;
  padding:13px 15px;font-size:13.5px;line-height:1.6;color:rgba(250,246,239,.92);
  margin-bottom:16px}
.wa-start{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#25D366;color:#fff;border-radius:100px;padding:12px 18px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:filter .3s var(--ease),transform .3s var(--ease)}
.wa-start:hover{filter:brightness(1.06);transform:translateY(-2px)}
.wa-start svg{width:15px;height:15px;fill:currentColor;display:block}

@media (max-width:900px){
  /* Kleiner und ruhiger: die Leiste lag mit voller Deckkraft ueber dem
     Flie&szlig;text und zog alle Aufmerksamkeit auf sich. Sie soll erreichbar
     sein, nicht dominieren. */
  .crail{gap:9px;right:12px;bottom:14px}
  .crail-btn{width:42px}
  .crail-btn svg{width:19px;height:19px}
  .crail-btn::after{display:none}   /* Beschriftung nur am Rechner */
}
@media (prefers-reduced-motion:reduce){
  .crail-btn,.wa-panel,.wa-start{transition:none}
  /* Ohne Bewegung waere das Auf- und Abblenden nicht wahrnehmbar — dann
     stehen die Knoepfe dauerhaft gut sichtbar da. */
  .crail-btn{opacity:.9;filter:none}
}

/* ==========================================================================
   KONTAKTBLOCK + KARTE (V4.36) — Zahlungsoptionen
   ========================================================================== */
.kontakt-liste{list-style:none;margin:0 0 clamp(24px,3vw,34px);padding:0;
  border-top:1px solid var(--line)}
.kontakt-liste li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 20px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.7;color:var(--ink-soft)}
.kontakt-liste li span{flex:none;min-width:9.5em;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--taupe-dark)}
.kontakt-liste a{color:var(--ink);border-bottom:1px solid var(--taupe);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.kontakt-liste a:hover{color:var(--taupe-dark);border-color:var(--taupe-dark)}

/* Karte: laedt erst nach Klick (Google setzt sonst Cookies ohne Einwilligung) */
.karte{margin:0}
.karte-ph{
  width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-l);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(150deg,var(--creme),var(--sand));
  box-shadow:var(--sh-s);font:inherit;color:var(--taupe-dark);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.karte-ph:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.karte-pin{width:34px;height:34px;color:var(--taupe-dark)}
.karte-pin svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.karte-txt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.karte-hint{font-size:12px;line-height:1.5;max-width:30em;text-align:center;opacity:.8}
.karte iframe{display:block;width:100%;aspect-ratio:16/9;border:0;
  border-radius:var(--r-l);box-shadow:var(--sh-s)}
.karte figcaption{margin-top:12px;text-align:center;font-size:12.5px;color:var(--taupe-dark)}
.karte figcaption a{color:var(--ink);border-bottom:1px solid var(--taupe)}

.agb-hinweis{
  background:var(--creme);border-radius:var(--r-s);border-left:3px solid var(--taupe);
  padding:18px 24px}
.agb-hinweis p{font-size:15px;line-height:1.75;color:var(--ink);margin:0}


/* ==========================================================================
   ERGEBNISSE + VIDEOS (V4.44)
   Vorher-Nachher-Aufnahmen und Videos aus dem Institut. Videos laden erst
   auf Klick (preload="none"), nie Autoplay — sonst zieht die Seite auf dem
   Handy Datenvolumen, bevor jemand ueberhaupt schauen will.
   ========================================================================== */
.ergebnisse,.vidgal{padding-block:clamp(40px,4.6vw,68px)}
.erg-inner{max-width:var(--maxw);margin-inline:auto}
.erg-head{text-align:center;margin-bottom:clamp(24px,2.8vw,36px)}
.erg-head p{font-size:14px;line-height:1.7;color:var(--taupe-dark);
  max-width:52em;margin:14px auto 0}
.erg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,300px));
  justify-content:center;gap:clamp(14px,1.8vw,22px);align-items:start}
/* ⚠️ V4.67 — Vorher-Nachher-Karten. Zwei Fehler auf einmal behoben:
   1. `repeat(auto-fit,minmax(260px,1fr))` gab EINEM Bild die volle Breite:
      auf Hydralift und Onetec war die Karte 1312 px breit, auf Forma mit vier
      Bildern nur 311 px. Gleiche Bauart, voellig verschiedene Groessen.
      Jetzt `minmax(220px,300px)`: die Karte ist NIE breiter als 300 px, egal
      wie viele auf der Seite sind. Die Reihe wird zentriert.
   2. `height:auto` liess jede Karte anders hoch werden — die Quellbilder haben
      Seitenverhaeltnisse von 0,56 bis 3,30. Jetzt feste 1:1-Karte.
      `object-fit:contain` statt cover, WEIL bei Vorher-Nachher-Bildern jeder
      Beschnitt den Vergleich zerstoert. Schmale Hochformate bekommen dadurch
      seitlich Creme-Raender — das ist gewollt und sieht ruhiger aus als
      unterschiedlich hohe Karten. */
.erg{margin:0;border-radius:var(--r);overflow:hidden;background:var(--creme);
  aspect-ratio:1/1;position:relative;
  box-shadow:var(--sh-s);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.erg:hover{transform:translateY(-4px);box-shadow:var(--sh)}
/* absolut positioniert, NICHT ueber `display:grid; place-items:center` —
   dabei bleibt die Zeilenhoehe automatisch, `height:100%` laeuft ins Leere und
   Hochformate ragten 533 px hoch aus der 300-px-Karte heraus (und wurden von
   overflow:hidden beschnitten, genau was hier nicht passieren darf). */
.erg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* Videogalerie (V4.46) — jetzt wie die Kundenstimmen auf der Startseite:
   feste, gedeckelte Kartenbreite statt 1fr-Spalten.
   Vorher stand hier repeat(auto-fit,minmax(240px,1fr)). Das teilt die volle
   Breite unter den vorhandenen Karten auf — gemessen bei 1440px Fenster:
   644x1145 px bei zwei Videos (Skin Needling), 1312x2332 px bei einem
   (Forma, Hydrafacial, Chemische Peelings). Ein 9:16-Video wurde dadurch zur
   Riesensaeule. Flex + clamp deckelt die Karte und zentriert die Reihe. */
/* align-items:center seit V4.110: Auf der Beckenboden-Seite stehen ein
   Hochkant- und ein Querformatvideo nebeneinander (483 gegen 306 px hoch).
   Oben ausgerichtet haengt die Beschriftung des flachen Films mitten in der
   Luft; zentriert liegt das Paar ruhig. Wo alle Videos hochkant sind, aendert
   die Regel nichts. */
.vidgal-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(16px,2vw,30px)}

/* ---------- Kontaktseite (V4.72) ----------
   Aufbau nach Renés Vorgabe: Kontaktdaten links neben dem Bild, darunter
   Oeffnungszeiten links und Anfahrt rechts, dann die Karte ueber die volle
   Breite. Alle drei Baender liegen in derselben Spalte (--maxw), damit die
   Kanten uebereinanderliegen und kein Bruch entsteht. */
.kontakt-kopf{
  max-width:var(--maxw);margin:clamp(20px,3vw,40px) auto clamp(30px,4vw,52px);
  padding-inline:var(--pad);
  /* Textspalte GEDECKELT statt 1fr. Mit 1fr war sie 707 px breit, der Text
     braucht aber nur 561 px — dazwischen klafften 211 px Luft zum Bild.
     Derselbe Fehler wie beim Erklaervideo. Feste Spuren + justify-content
     zentrieren das Paar, statt es auseinanderzuziehen. */
  /* ⚠️ V4.112: Seit das Foto raus ist (es zeigte Sabrina UND Bianka), steht der
     Block einspaltig. Eine leere zweite Spur haette exakt das Loch gerissen,
     das oben beschrieben ist. `has()` schaltet automatisch um — kommt ein Foto
     von Sabrina allein dazu, greift wieder die zweispaltige Fassung, ohne dass
     jemand hier etwas anfassen muss. */
  display:grid;grid-template-columns:minmax(0,720px);
  /* Einspaltig LINKSBUENDIG, nicht zentriert: zentriert stand die Spalte bei
     x=400, waehrend .kontakt-paar und die Karte darunter bei x=124 beginnen —
     die Kanten haetten nicht mehr uebereinandergelegen. */
  justify-content:start;
  gap:clamp(28px,4.5vw,68px);align-items:center}
/* Mit Bild wieder zweispaltig und zentriert wie bis V4.111. Greift automatisch,
   sobald ein Foto von Sabrina allein eingesetzt wird. */
.kontakt-kopf:has(.kontakt-kopf-bild){
  grid-template-columns:minmax(0,580px) clamp(320px,36vw,480px);
  justify-content:center}
.kontakt-kopf h1{font-weight:200;margin-bottom:26px;text-wrap:balance}
.kontakt-kopf .kicker{margin-bottom:18px}
.kontakt-kopf .kicker .tag{color:var(--taupe-dark)}
.kontakt-hinweis{font-size:15.5px;line-height:1.75;color:var(--ink-soft);
  margin:22px 0 26px;max-width:52ch}
/* Das Bild behaelt sein Seitenverhaeltnis (height:auto statt fester Rahmen),
   damit nichts beschnitten wird — es sind zwei Personen drauf. */
.kontakt-kopf-bild img{display:block;width:100%;height:auto;
  border-radius:var(--r-l);box-shadow:var(--sh-l)}

.kontakt-paar{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  padding-block:clamp(30px,3.6vw,50px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4.5vw,68px);align-items:start;
  border-top:1px solid var(--line)}
.kp-spalte h2{margin-bottom:22px}
.kp-spalte p{font-size:16px;line-height:1.8;color:var(--ink-soft);margin-top:20px}

.kontakt-karte{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  padding-block:clamp(30px,3.6vw,50px);border-top:1px solid var(--line)}
.kk-kopf{margin-bottom:clamp(20px,2.4vw,30px)}
.kk-kopf h2{margin-top:12px}
/* ueber die volle Breite statt in der Lesespalte, wie von Rene gewuenscht */
.karte-breit .karte-ph,.karte-breit iframe{aspect-ratio:21/9}
.karte-breit figcaption{margin-top:14px;font-size:13px;color:var(--taupe-dark)}

@media (max-width:860px){
  .kontakt-kopf{grid-template-columns:1fr;gap:30px}
  .kontakt-kopf-bild{max-width:360px;margin-inline:auto}
  .kontakt-paar{grid-template-columns:1fr;gap:34px}
  .karte-breit .karte-ph,.karte-breit iframe{aspect-ratio:4/3}
}

/* Bild im Textfluss (V4.70). Liegt in der Lesespalte, also genauso breit wie
   der Text darum herum — kein Bruch. height:auto, kein object-fit: das
   Seitenverhaeltnis bleibt unangetastet. */
.t-bild{margin:clamp(24px,3vw,36px) 0 0}
.t-bild img{display:block;width:100%;height:auto;
  border-radius:var(--r-l);box-shadow:var(--sh)}
.t-bild figcaption{margin-top:11px;font-size:12.5px;line-height:1.55;
  color:var(--taupe-dark)}

/* Vorher-Nachher + Video derselben Kundin nebeneinander (V4.69).
   Gleiche Masse wie .erklaer-inner, damit der Block sich nicht vom Rest der
   Seite loest: Lesespalte 730 px, breites Bild links, Hochkant-Video rechts.
   Das Bild behaelt sein Seitenverhaeltnis (height:auto, kein object-fit) —
   bei Vorher-Nachher darf nichts weggeschnitten werden. */
/* V4.110: Die Videospalte war auf ein 9:16-Hochkantvideo zugeschnitten
   (190–250 px). Das Chemical-Peel-Video ist mit 720x848 aber deutlich breiter —
   in seinem echten Format wurde es dadurch nur 294 px hoch und wirkte klein
   (René). Die Spalte ist jetzt breiter, damit das Video wieder Gewicht bekommt.
   Nur diese Seite nutzt .vidgal-paar, andere Seiten sind nicht betroffen. */
.vidgal-paar{max-width:730px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,32vw,340px);
  gap:clamp(22px,2.6vw,38px);align-items:center}
.vp-bild{margin:0}
.vp-bild img{display:block;width:100%;height:auto;
  border-radius:var(--r-l);box-shadow:var(--sh)}
.vp-bild figcaption,.vidgal-paar .vid-k figcaption{
  margin-top:12px;text-align:center;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:var(--taupe-dark)}
.vidgal-paar .vid-k{width:auto}
@media (max-width:640px){
  .vidgal-paar{grid-template-columns:1fr;gap:26px}
  .vidgal-paar .vid-k{max-width:260px;margin-inline:auto}
}
.vid-k{margin:0;width:clamp(210px,19vw,290px)}
/* Querformat-Karte (V4.110). Die Standardbreite ist auf Hochkantvideos
   zugeschnitten — ein 16:9-Film waere darin nur rund 160 px hoch und damit
   unlesbar. Breite so gewaehlt, dass die Hoehe ungefaehr der eines
   Hochkantvideos daneben entspricht. */
.vid-k.ist-quer{width:clamp(300px,44vw,560px)}
/* ⚠️ V4.110 — KEIN erzwungenes Seitenverhaeltnis mehr.
   Vorher stand hier `aspect-ratio:9/16;object-fit:cover`. Das presst JEDES
   Video ins Hochformat und schneidet alles ab, was nicht 9:16 ist. Gemessen:
   das Chemical-Peel-Feedback ist 720x848 (0,85) — davon blieben seitlich rund
   ein Drittel auf der Strecke. René: "Die Videos sind alle in einem
   unterschiedlichen Format, das musst du Video fuer Video individuell
   betrachten."
   Jetzt steht das echte Format als `style="aspect-ratio:B/H"` plus width/height
   am jeweiligen <video>. Die Attribute sind Pflicht: mit `preload="none"` kennt
   der Browser die Masse sonst nicht und die Box faellt vor dem Laden auf 0 px
   zusammen. Die Breite bleibt einheitlich, die Hoehe folgt dem Video. */
.vid-k video{display:block;width:100%;height:auto;object-fit:contain;
  border-radius:var(--r-l);background:var(--taupe-dark);box-shadow:var(--sh)}
/* Ein Foto darf in derselben Reihe stehen wie ein Video (V4.110, Bianka-Seite).
   height:auto statt fester Hoehe — das Bild behaelt sein Seitenverhaeltnis,
   genau wie die Videos daneben. */
.vid-k img{display:block;width:100%;height:auto;
  border-radius:var(--r-l);box-shadow:var(--sh)}
.vid-k figcaption{margin-top:12px;text-align:center;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:var(--taupe-dark)}
/* Auf der Startseite tragen die Karten schon eine Beschriftung */
/* ⚠️ V4.113 — Ausnahme von der Regel "jedes Video in seinem echten Format".
   Die beiden Kundenstimmen stehen als PAAR nebeneinander, und dort faellt
   Ungleichheit sofort auf: 464x848 (0,547) neben 592x848 (0,698) ergab bei
   gleicher Breite 530 px gegen 415 px Hoehe — René: "das linke Video ist
   hoeher als das rechte".
   Gemeinsames Format 5/8 = 0,625, also genau zwischen beiden. Mit cover
   bleiben 87,5 % bzw. 89,4 % des Bildes stehen; beschnitten wird nur
   Wandflaeche, beide Personen sind vollstaendig im Bild (nachgeprueft am
   Standbild). Letterbox waere hier schlechter: die Videos sind hell, die
   Balken waeren dunkel und deutlich sichtbar.
   Gilt NUR fuer .vt (nur Startseite). .vid-k auf den Unterseiten bleibt
   beim echten Format jedes einzelnen Videos. */
.vt video{display:block;width:100%;height:auto;aspect-ratio:5/8;object-fit:cover;
  border-radius:var(--r-l);background:var(--taupe-dark);box-shadow:var(--sh)}

/* ---------- Erklaervideo (V4.45) — Text links, Hochkant-Video rechts ----------
   Ein 9:16-Video allein ueber die volle Breite waere eine schmale Saeule mit
   viel Leerraum. Neben dem Text gestellt fuellt es die Zeile und erklaert
   sich zugleich selbst. */
.erklaer{padding-block:clamp(40px,4.6vw,68px)}
/* ⚠️ V4.63 — Abstand zwischen Text und Video. Vorher klaffte hier eine Luecke
   von 464 px (gemessen bei 1440 px Fenster). ZWEI Ursachen zugleich:
   1. `max-width:var(--maxw)` = 1320 px. Der Block war damit doppelt so breit
      wie die Lesespalte darueber (.t-prose = 730 px) — der Text rutschte ganz
      nach links, das Video ganz nach rechts.
   2. `.erklaer-text{max-width:34em}` = 544 px. Der Text konnte seine 934 px
      breite Spur gar nicht fuellen und klebte am linken Rand.
   `justify-content:center` half nichts: `1fr` frisst den gesamten freien Platz,
   es gibt nichts mehr zu zentrieren.
   Jetzt liegt der Block in DERSELBEN Spalte wie der Text darueber (730 px) und
   der Text fuellt seine Spur — dadurch entsteht der durchgehende Lesefluss. */
.erklaer-inner{
  max-width:730px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,20vw,250px);
  gap:clamp(22px,2.6vw,38px);align-items:center}
.erklaer-text{max-width:none}
.erklaer-text h2{margin-bottom:18px}
.erklaer-text p{font-size:16px;line-height:1.8;color:var(--ink-soft)}
.erklaer-vid{margin:0}
.erklaer-vid video{
  /* V4.110: echtes Format statt erzwungener 9:16 — siehe Anmerkung bei .vid-k */
  display:block;width:100%;height:auto;object-fit:contain;
  border-radius:var(--r-l);background:var(--taupe-dark);box-shadow:var(--sh-l)}
@media (max-width:820px){
  .erklaer-inner{grid-template-columns:1fr}
  .erklaer-vid{max-width:300px;margin-inline:auto}
}

/* ==========================================================================
   EINWILLIGUNG FUER EXTERNE MEDIEN (V4.79)
   Banner unten, damit er den Seiteneinstieg nicht zustellt. Kein Abdunkeln
   der Seite, kein Zwang — die Seite bleibt ohne Entscheidung voll lesbar,
   nur die drei externen Einbettungen sind gesperrt.
   WICHTIG: Beide Knoepfe sind gleich gross und gleich auffaellig. Eine
   versteckte oder kleiner gesetzte Ablehnung waere keine wirksame
   Einwilligung — die muss genauso leicht sein wie die Zustimmung.
   ========================================================================== */
/* ⚠️ Der Ruhezustand ist SICHTBAR, das Hereinfahren ist nur Verzierung.
   Vorher war es umgekehrt (.cb versteckt, .cb.offen sichtbar) — laeuft die
   Animation nicht, blieb der Banner unsichtbar unten stehen. Genau das ist
   passiert. Ein Einwilligungsbanner, der nicht erscheint, waere schlimmer als
   keiner: die Seite haette gesperrte Bereiche ohne Weg zur Freigabe.
   Jetzt kann die Animation ausfallen, ohne dass etwas kaputtgeht. */
.cb{position:fixed;left:0;right:0;bottom:0;z-index:400;
  padding:clamp(12px,1.6vw,20px)}
/* BEWUSST OHNE Animation und ohne transform. Zwei Anlaeufe sind hier
   gescheitert: erst .cb versteckt + .cb.offen sichtbar (Uebergang lief nicht
   -> Banner blieb unten), dann eine Animation mit fill-mode:both (eingefroren
   auf dem Startbild -> ebenfalls unsichtbar). Ein Einwilligungsbanner muss
   auch dann erscheinen, wenn keine einzige Animation laeuft — sonst haette
   die Seite gesperrte Bereiche ohne Weg zur Freigabe. Er ist einfach da. */
.cb-inner{max-width:1120px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(18px,2.6vw,38px);align-items:center;
  background:var(--paper);border:1px solid var(--line-strong);
  border-radius:var(--r-l);box-shadow:0 18px 50px rgba(58,50,44,.22);
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.8vw,34px)}
.cb-text h2{font-size:clamp(17px,1.5vw,20px);font-weight:400;margin-bottom:10px}
.cb-text p{font-size:13.5px;line-height:1.7;color:var(--ink-soft);margin:0}
.cb-links{margin-top:12px!important;display:flex;gap:10px;align-items:center;
  font-size:12.5px;color:var(--taupe-dark)}
.cb-links a{color:var(--taupe-dark);text-decoration:underline;text-underline-offset:3px}
/* Auswahlzeilen (V4.114) — eine je Kategorie. Beide Kaestchen starten LEER;
   ein vorangekreuztes Feld waere keine Einwilligung (EuGH „Planet49"). */
.cb-wahl{display:flex;gap:11px;align-items:flex-start;margin-top:14px;cursor:pointer}
.cb-wahl input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--taupe-dark);cursor:pointer}
.cb-wahl span{font-size:13px;line-height:1.6;color:var(--ink-soft)}
.cb-wahl strong{color:var(--ink)}
.cb-hinweis{margin-top:14px!important}

/* Drei Wege statt zwei. Der mittlere ist die gespeicherte Auswahl. */
.cb-btns{display:flex;gap:12px;flex-wrap:wrap;flex-direction:column}
/* gleiche Groesse fuer beide — nur die Flaeche unterscheidet sie */
/* Beide Knoepfe exakt gleich breit — nicht nur "aehnlich". Vorher waren es
   210 gegen 254 px, weil "Externe Medien erlauben" laenger ist als "Nur
   notwendige". Eine kleinere Ablehnung ist ein Dark Pattern und macht die
   Einwilligung angreifbar. */
.cb-btn{font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;cursor:pointer;white-space:nowrap;
  padding:15px 20px;width:250px;border-radius:var(--r-s);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.cb-btn-nein{background:transparent;border:1px solid var(--taupe-dark);color:var(--taupe-dark)}
.cb-btn-nein:hover{background:var(--creme)}
.cb-btn-ja{background:var(--taupe-dark);border:1px solid var(--taupe-dark);color:var(--paper)}
.cb-btn-ja:hover{transform:translateY(-2px);box-shadow:var(--sh)}
/* „Auswahl speichern" steht optisch zwischen den beiden — es ist der Weg fuer
   alle, die differenzieren wollen, und darf weder die Ablehnung noch die
   Zustimmung uebertoenen. */
.cb-btn-wahl{background:var(--creme);border:1px solid var(--line-strong);color:var(--ink)}
.cb-btn-wahl:hover{background:var(--sand)}
.cb-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(194,180,169,.45)}
@media (max-width:820px){
  .cb-inner{grid-template-columns:1fr;gap:16px}
  .cb-btns{flex-direction:column}
  .cb-btn{width:100%}
}
/* Auf dem Handy nahm der Banner den halben Bildschirm ein (gemessen bei
   375 px: ueber 900 px hoch). Kuerzere Zeilen, engere Abstaende, und wenn es
   trotzdem zu viel wird, scrollt der Textteil in sich statt die Seite
   zuzustellen. */
@media (max-width:560px){
  .cb{padding:10px}
  .cb-inner{padding:18px 18px 20px;border-radius:var(--r);gap:14px;
    max-height:78vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .cb-text h2{font-size:16px;margin-bottom:8px}
  .cb-text p{font-size:12.5px;line-height:1.6}
  .cb-hinweis{font-size:12px!important;margin-top:8px!important}
  .cb-links{margin-top:10px!important;font-size:12px}
  .cb-btn{padding:14px 16px;font-size:11.5px}
}

/* Gesperrter Bereich anstelle von Karte oder Video */
.cb-block{background:var(--creme);border-radius:var(--r-l);
  padding:clamp(26px,3.4vw,42px) clamp(22px,3vw,38px);text-align:center}
.cb-block-lab{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--taupe-dark);margin-bottom:12px}
.cb-block p{font-size:14.5px;line-height:1.7;color:var(--ink-soft);
  max-width:46em;margin:0 auto 20px}
.cb-block .cb-btn{width:auto;padding-inline:28px}
.cb-block-fuss{font-size:12px!important;color:var(--taupe)!important;margin:16px auto 0!important}

/* Knopf in der Fusszeile, um die Entscheidung zu aendern */
.cb-fuss{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:inherit;text-align:left}
.cb-hinweis{margin-top:10px!important;font-size:12.5px!important;line-height:1.65!important;
  color:var(--taupe-dark)!important}

/* ==========================================================================
   NiSV-SIEGEL IM STORY-BLOCK (V4.105)
   Steht zentriert ueber Sabrinas Text — dort, wo die Person beschrieben wird,
   deren Fachkunde es belegt. Der fruehere eigene Abschnitt unter der
   Trust-Leiste ist entfallen.
   ========================================================================== */
.story-siegel{display:block;width:clamp(150px,14vw,200px);height:auto;
  margin:0 auto clamp(24px,2.6vw,34px);border-radius:50%}
@media (max-width:680px){
  .story-siegel{width:clamp(130px,36vw,164px);margin-bottom:24px}
}

/* ==========================================================================
   BLOG (V4.117) — Beitragsseite und Verwaltung
   ========================================================================== */
/* Das Datum war auf den Karten ausgeblendet, solange es Platzhalter waren.
   Bei echten Beitraegen gehoert es sichtbar dazu. */
.blog-card .date{display:inline;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--taupe-dark)}

/* Titelbild eines Beitrags: volle Lesebreite, height:auto — das
   Seitenverhaeltnis bleibt, nichts wird beschnitten. Sabrina laedt Bilder in
   jedem denkbaren Format hoch. */
.beitrag-bild{padding-block:0;margin-bottom:clamp(10px,1.4vw,18px)}
.beitrag-bild figure{max-width:730px;margin-inline:auto;padding-inline:var(--pad)}
.beitrag-bild img{display:block;width:100%;height:auto;
  border-radius:var(--r-l);box-shadow:var(--sh-l)}
.beitrag-bild figcaption{margin-top:12px;text-align:center;font-size:12.5px;
  color:var(--taupe-dark)}
.beitrag-text p{font-size:16.5px;line-height:1.85;margin-bottom:20px}
.beitrag-signatur{font-size:15px;letter-spacing:.06em;color:var(--taupe-dark)}

/* Rueckmeldung nach dem Speichern — Gegenstueck zu .f-fehler. */
.f-ok{margin:0 0 14px;padding:12px 16px;border-radius:var(--r-s);
  background:#E9EFE6;border:1px solid #B9CBB0;color:#3D5233;
  font-size:14px;line-height:1.6}

/* --- Verwaltung ---------------------------------------------------------- */
.verw-kopf{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;flex-wrap:wrap;margin-bottom:22px}
.verw-leiste{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 10px}
.verw-vorschau{display:block;max-width:260px;height:auto;border-radius:var(--r);
  box-shadow:var(--sh-s);margin-top:8px}
.verw-liste{list-style:none;margin:26px 0 0;padding:0}
.verw-liste li{display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;
  padding:18px 0;border-top:1px solid var(--line)}
.verw-liste li:last-child{border-bottom:1px solid var(--line)}
.vl-text strong{display:block;font-size:16.5px;font-weight:500;margin-bottom:4px}
.vl-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--taupe-dark)}
.vl-entwurf{color:#9A6B2F}
.vl-knoepfe{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.vl-knoepfe a,.vl-loeschen{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--taupe-dark);border-bottom:1px solid var(--taupe);
  padding-bottom:2px;background:none;border-left:0;border-right:0;border-top:0;
  cursor:pointer;font-family:inherit}
.vl-knoepfe a:hover,.vl-loeschen:hover{color:var(--ink);border-color:var(--ink)}
.vl-loeschen{color:#8C4A31;border-color:#C9A092}
.vl-loeschen:hover{color:#6E3722;border-color:#8C4A31}
.vl-knoepfe form{display:inline}
@media (max-width:560px){
  .verw-liste li{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ==========================================================================
   PREISLISTE (V4.120)
   Bewusst KEINE neuen Bausteine: dieselbe Machart wie die Oeffnungszeiten auf
   der Kontaktseite (.kontakt-liste) — Bezeichnung links, Wert rechts, feine
   Haarlinie dazwischen. Zwei Ebenen: Behandlung als Hauptzeile, Pakete und
   Aufpreise leiser eingerueckt darunter.
   ========================================================================== */
.preis-vorspann{font-size:16.5px;line-height:1.85;color:var(--ink-soft);margin:0}

/* Die Ueberschrift verlinkt auf die Behandlungsseite. Das ist nicht nur
   bequem — die Behandlungsseiten waren bisher nur von EINER Seite aus
   verlinkt und damit intern schwach angebunden. */
.preis-titel{color:inherit;border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),color .35s var(--ease)}
.preis-titel:hover{color:var(--taupe-dark);border-color:var(--taupe)}

.preis-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.preis-liste li{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:8px 28px;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;line-height:1.6;color:var(--ink)}
.preis-liste .pl-name{flex:1 1 auto;min-width:0}
/* tabular-nums: die Ziffern stehen exakt untereinander, sonst zappelt die
   Preisspalte von Zeile zu Zeile. */
.preis-liste .pl-preis{flex:none;white-space:nowrap;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink)}

/* Pakete und Aufpreise: leiser, eingerueckt, mit der feinen Haarlinie davor —
   dieselbe Geste wie bei den Abschnitts-Auszeichnungen. */
.preis-liste .pl-paket{color:var(--ink-soft);font-size:14.5px}
.preis-liste .pl-paket .pl-name{display:flex;align-items:center;gap:11px}
.preis-liste .pl-paket .pl-name::before{
  content:'';flex:none;width:16px;height:1px;background:var(--taupe)}
.preis-liste .pl-paket .pl-preis{font-weight:400;color:var(--ink-soft)}

.preis-fuss{font-size:14px;line-height:1.75;color:var(--taupe-dark);margin:0}

@media (max-width:520px){
  .preis-liste li{gap:2px 16px}
  .preis-liste .pl-paket .pl-name::before{width:10px}
}