/* The Holy Face Method — Motion-Fassung
 *
 * Farben aus dem aktuellen Auftritt der Hauptseite („Blush & Gold“):
 * zartes Blush als Grund, Gold als Markenfarbe, fast schwarze Schrift.
 * Gold traegt Ring, Linien und Knopf. Fuer kleine Schrift gibt es ein
 * dunkleres Gold (--gold-tief, mind. 4,7:1), fuer grosse Kursive --gold-display.
 *
 * Alle Masse haengen an der kleineren Bildschirmseite (vmin), damit dieselbe
 * Buehne als Video in 1920x1080 und als Seite auf jedem Geraet stimmt.
 */
@font-face{font-family:'Fraunces';src:url(schrift/fraunces.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(schrift/fraunces-kursiv.woff2) format('woff2');font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:'Manrope';src:url(schrift/manrope.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --grund:#fdf3f4;
  --grund-weich:#feebed;
  --blush:#fddfe2;
  --rose:#f8b0b0;
  --tinte:#1c1416;
  --tinte-leise:#6e5a5d;
  --nacht:#1d1214;
  --creme:#fdf3f4;
  --gold:#d6b47a;
  --gold-hell:#ecd6ad;
  --gold-tief:#7f5f28;
  --gold-display:#9a7535;
  --rot:#a3324a;
  --linie:#f0d9dc;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-riesig:clamp(46px,10vmin,156px);
  --t-gross:clamp(30px,6vmin,88px);
  --t-mittel:clamp(21px,3.3vmin,44px);
  --t-text:clamp(16px,2vmin,24px);
  --t-klein:clamp(12px,1.45vmin,17px);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--grund);color:var(--tinte)}
body{font-family:var(--sans);font-size:var(--t-text);line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,blockquote,figure{margin:0}
ul,ol{padding:0;list-style:none}

/* ------------------------------------------------------------ Buehne -- */
#buehne{position:relative;width:100%;height:100%;overflow:hidden;background:var(--grund)}
.grund{position:absolute;inset:0;background:radial-gradient(120% 90% at 70% 20%,var(--grund-weich) 0%,var(--grund) 60%)}
.grund-dunkel{position:absolute;inset:0;opacity:0;background:radial-gradient(90% 80% at 50% 45%,#2a1a1d 0%,var(--nacht) 70%)}
.szene{position:absolute;inset:0;width:100%;height:100%;display:grid}
.kicker{font-size:var(--t-klein);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-tief)}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.04;text-wrap:balance}
.sterne-klein{color:var(--gold-tief);letter-spacing:.12em;margin-right:.3em}

/* Woerter, die aus einer Maske nach oben gleiten (beim Bauen erzeugt) */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .14em 0;margin:0 -.08em -.14em 0}
.wi{display:inline-block}

/* Zaehlwerk: jede Ziffer ein Band, das in seinem Fenster rollt (beim Bauen erzeugt) */
.zahl{display:inline-flex;vertical-align:bottom;height:1.1em;line-height:1.1;font-variant-numeric:lining-nums tabular-nums}
.zahl .rollen{display:inline-flex}
.rolle{display:block;height:1.1em;overflow:hidden}
.band{display:block}
.band i{display:block;height:1.1em;line-height:1.1;font-style:inherit;text-align:center}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Goldener Knopf (fuehrt zum Bestellvorgang) */
.knopf{justify-self:start;display:inline-flex;align-items:center;gap:1.4vmin;text-decoration:none;text-align:left;
  font-weight:800;font-size:clamp(13px,1.7vmin,20px);letter-spacing:.06em;text-transform:uppercase;color:var(--tinte);background:var(--gold);
  padding:2vmin 3.6vmin;border-radius:999px;min-height:48px;box-shadow:0 2vmin 5vmin -2.4vmin rgba(127,95,40,.55)}
.knopf:hover,.knopf:focus-visible{background:var(--tinte);color:var(--gold-hell)}
.knopf:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.knopf i{flex:none;display:block;width:3vmin;min-width:18px;height:2px;background:currentColor;position:relative}
.knopf i::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.knopf-inhalt{display:grid;gap:.5vmin}
.knopf-inhalt small{font-size:clamp(11px,1.25vmin,15px);font-weight:600;letter-spacing:.03em;text-transform:none;opacity:.78}

/* Schild auf einem Bild (vorher / nachher / jetzt) */
.marke{position:absolute;bottom:3vmin;font-size:var(--t-klein);font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.25;
  padding:.9vmin 1.8vmin;border-radius:1.6vmin;background:rgba(28,20,22,.66);color:#fff}
.marke.links{left:3vmin}
.marke.rechts{right:3vmin;background:var(--gold);color:var(--tinte)}

/* ---------------------------------------------------- Ring (Leitmotiv) -- */
.ringlage{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.ring{position:relative;width:64vmin;height:64vmin;border-radius:50%;
  border:clamp(2px,.3vmin,5px) solid var(--gold);
  box-shadow:0 0 3.2vmin rgba(214,180,122,.5),inset 0 0 3vmin rgba(214,180,122,.32)}
.ring-glanz{position:absolute;inset:-1vmin;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,250,238,0) 0 58%,rgba(255,250,238,.95) 66%,rgba(255,250,238,0) 74% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.6vmin),#000 calc(100% - 1.15vmin),#000 calc(100% - .7vmin),transparent calc(100% - .4vmin));
          mask:radial-gradient(farthest-side,transparent calc(100% - 1.6vmin),#000 calc(100% - 1.15vmin),#000 calc(100% - .7vmin),transparent calc(100% - .4vmin))}
.ring-fuellung{position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fffaf7 0%,#fef1ef 42%,#fbe2e2 72%,#f3d3b8 92%,#e6c48f 100%)}

/* ---------------------------------------------------- 1 Willkommen -- */
#s-titel{z-index:3}
.titelbild{position:absolute;inset:0;overflow:hidden}
.titelbild img{width:100%;height:100%;object-fit:cover;object-position:68% 38%;transform-origin:68% 38%}
.schleier{position:absolute;inset:0;background:linear-gradient(90deg,rgba(253,243,244,.95) 0%,rgba(253,243,244,.86) 38%,rgba(253,243,244,.5) 52%,rgba(253,243,244,0) 66%)}
.titeltext{position:relative;align-self:center;padding:0 0 0 7vw;max-width:min(56vw,900px);display:grid;gap:2.3vmin;justify-items:start}
/* Abzeichen ueber der Ueberschrift: Blitz, "+100" als Zaehlwerk, Text */
.abzeichen{display:inline-flex;align-items:center;gap:.6em;max-width:100%;padding:1vmin 2.2vmin 1vmin 1.5vmin;border-radius:3vmin;
  background:rgba(255,255,255,.7);border:1px solid var(--gold);box-shadow:0 1.4vmin 3vmin -2.2vmin rgba(127,95,40,.6);
  font-size:var(--t-klein);font-weight:700;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;color:var(--gold-tief)}
.blitz{flex:none;width:1.3em;height:1.3em;fill:var(--gold);stroke:var(--gold-tief);stroke-width:1.1;stroke-linejoin:round}
.abz-zahl{flex:none;display:inline-flex;align-items:flex-end;font-weight:800;letter-spacing:.06em;color:var(--tinte)}
.abz-text{line-height:1.3}
.titel-h1{font-size:clamp(30px,5.6vmin,96px);line-height:1.03;color:var(--tinte);letter-spacing:-.015em}
/* "ohne Eingriffe" steht als eigene, goldene Zeile */
.titel-h1 em{display:block;font-style:italic;color:var(--gold-display)}
.unterzeile{font-size:var(--t-mittel);font-family:var(--serif);font-style:italic;color:var(--tinte-leise);max-width:32ch;line-height:1.28;text-wrap:balance}
.hinweis{position:absolute;left:50%;bottom:4vmin;margin-left:-9vmin;width:18vmin;text-align:center;padding:1vmin 0 0;
  font-size:var(--t-klein);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#3a2c30;
  text-shadow:0 0 .8vmin rgba(253,243,244,.95),0 0 2vmin rgba(253,243,244,.9)}
.hinweis i{display:block;width:1px;height:6vmin;margin:1.2vmin auto 0;background:#4a3a3f}

/* -------------------------------------------------- 2 Wiedererkennen -- */
#s-schmerz{place-items:center;text-align:center;z-index:4}
.schmerz-kopf{position:absolute;top:11vmin;left:0;right:0;text-align:center;color:var(--gold)}
/* Alle Saetze liegen in derselben Rasterzelle uebereinander, mittig */
.saetze{position:relative;width:min(80vw,1160px);height:32vmin;display:grid;place-items:center}
.satz{grid-area:1/1;font-size:var(--t-gross);color:var(--creme);font-style:italic;text-align:center}
.schmerz-punkte{position:absolute;left:0;right:0;bottom:13vmin;display:flex;justify-content:center;gap:1.8vmin}
.schmerz-punkte i{display:block;width:max(7px,.9vmin);height:max(7px,.9vmin);border-radius:50%;border:1px solid rgba(214,180,122,.75)}

/* ------------------------------------------------------ 3 Die Story -- */
#s-story{z-index:4;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8vw;padding:0 9vw 0 12vw}
.story-bilder{position:relative;width:38vmin;height:67.5vmin;justify-self:center}
.story-bild{position:absolute;inset:0;border-radius:999px 999px 4vmin 4vmin;overflow:hidden;background:var(--blush)}
/* Mailins Massage als Film (720 x 1280, stumm, in Schleife); der Rahmen hat dasselbe Seitenverhaeltnis */
.st-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Vorher / Nachher im Profil: tritt an die Stelle des Films und ist breiter als
   dessen Rahmen. Aufbau wie die Bildpaare der Ergebnisse (.paar), beide Haelften
   4:5 wie die Bilddateien — so stehen Nase und Kinn links und rechts gleich hoch.
   Die Schilder sitzen oben, damit Kinn und Hals frei bleiben. In fast
   quadratischen Fenstern wird das Paar schmaler, damit es 2vw Abstand zum Text haelt. */
.paar.profil-paar{--pb-h:min(35vmin,23.375vmin + 7.5vw);--pb-b:calc(var(--pb-h) * 1.6 + .6vmin);position:absolute;left:calc(50% - var(--pb-b) / 2);top:calc(50% - var(--pb-h) / 2);
  width:var(--pb-b);height:var(--pb-h)}
.profil-paar .pb img{object-position:50% 50%}
.paar.profil-paar .marke{top:2vmin;bottom:auto}
.story-text{display:grid;gap:2.6vmin;max-width:min(46vw,740px)}
.story-text h2{font-size:var(--t-gross)}
.story-saetze{position:relative;height:clamp(150px,25vmin,330px)}
.story-satz{position:absolute;left:0;right:0;top:0;font-family:var(--serif);font-size:clamp(17px,2.4vmin,31px);line-height:1.42;color:var(--tinte-leise);max-width:42ch}
.story-satz b{font-weight:600;color:var(--tinte)}
.story-satz em{font-style:italic;font-weight:500;color:var(--gold-display)}
.signatur{display:grid;gap:.6vmin;font-size:var(--t-klein);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-tief)}
.signatur .serif{font-size:var(--t-mittel);font-style:italic;font-weight:500;letter-spacing:0;text-transform:none;color:var(--tinte)}

/* ---------------------------------------------- 4 Das kann sich veraendern -- */
#s-ergebnisse{z-index:4;--slot:72vmin;--pb-h:40vmin}
.ergebnis-kopf{position:absolute;top:6.5vmin;left:0;right:0;text-align:center;display:grid;gap:1.1vmin;justify-items:center;padding:0 6vw}
.ergebnis-kopf h2{font-size:var(--t-gross)}
.ergebnis-intro{font-size:var(--t-text);color:var(--tinte-leise)}
.spurlage{position:absolute;left:0;right:0}
.ergebnis-lage{top:27vmin}
.spur{position:absolute;top:0;left:calc(50% - var(--slot) / 2);display:flex}
#spur-ergebnisse{width:calc(var(--slot) * 9)}
.ergebnis{width:var(--slot);flex:none;display:grid;justify-items:center;align-content:start;gap:1.5vmin;padding:0 2vmin;text-align:center}
.paar{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.6vmin;width:calc(var(--pb-h) * 1.5 + .6vmin);height:var(--pb-h);
  border-radius:3vmin;overflow:hidden;background:var(--blush);box-shadow:0 3vmin 6vmin -4vmin rgba(28,20,22,.4)}
.pb{position:relative;overflow:hidden;height:100%}
.pb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.pb-profil img{object-position:74% 50%}
/* Bis das Licht darueberfaehrt, liegt ueber dem Nachher-Bild ein blasser, grauer Schleier */
.nb-schleier{position:absolute;inset:0;background:rgba(253,243,244,.3);
  -webkit-backdrop-filter:grayscale(1) contrast(.82) brightness(1.08);backdrop-filter:grayscale(1) contrast(.82) brightness(1.08)}
.paar-licht{position:absolute;top:0;bottom:0;left:50%;width:.5vmin;margin-left:-.25vmin;background:var(--gold-hell);box-shadow:0 0 2.4vmin var(--gold);opacity:0}
.paar .marke{bottom:2vmin;font-size:clamp(10px,1.25vmin,15px);padding:.7vmin 1.4vmin}
.paar .marke.links{left:2vmin}
.paar .marke.rechts{right:2vmin}
.ergebnis h3{font-family:var(--serif);font-weight:500;font-size:clamp(18px,2.8vmin,38px);line-height:1.2;max-width:30ch;text-wrap:balance;margin-top:1vmin}
.dauer{font-size:var(--t-klein);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-tief)}
.ergebnis-zaehler{position:absolute;left:0;right:0;bottom:8vmin;display:flex;justify-content:center;align-items:flex-end;gap:1vmin;color:var(--tinte)}
.rz-nr{display:block;height:1.1em;overflow:hidden;font-size:var(--t-mittel);font-style:italic;line-height:1.1}
.rz-band{display:block}
.rz-band i{display:block;height:1.1em;line-height:1.1;font-style:italic}
.rz-von{font-size:var(--t-klein);font-weight:700;letter-spacing:.12em;color:var(--tinte-leise);padding-bottom:.3em}

/* ------------------------------------------------------ 5 Vier Saeulen -- */
#s-saeulen{z-index:4;--slot:94vmin;--bild-h:44vmin}
.saeulen-kopf{position:absolute;top:6vmin;left:0;right:0;text-align:center;display:grid;gap:1.2vmin;justify-items:center;padding:0 6vw}
.saeulen-kopf h2{font-size:var(--t-gross)}
.saeulen-intro{font-size:var(--t-text);color:var(--tinte-leise);max-width:62ch}
.saeulen-intro b{color:var(--tinte);font-weight:700}
.saeulen-lage{top:50%;height:var(--bild-h);margin-top:calc(var(--bild-h) * -0.34)}
#spur-saeulen{width:calc(var(--slot) * 4);height:100%}
.karte{width:var(--slot);flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6vmin;padding:0 3vmin}
.karte-bild{position:relative;width:calc(var(--bild-h) * .78);height:var(--bild-h);border-radius:999px 999px 3vmin 3vmin;overflow:hidden;background:var(--blush)}
.karte-bild img{width:100%;height:100%;object-fit:cover}
.karte-text{display:grid;gap:1.3vmin;justify-items:start}
.karte-nr{font-size:var(--t-gross);font-style:italic;color:var(--gold-display);line-height:1}
.karte h3{font-family:var(--serif);font-weight:500;font-size:var(--t-mittel);line-height:1.1}
.karte-text p:not(.karte-nr){font-size:clamp(14px,1.95vmin,23px);line-height:1.55;color:var(--tinte-leise);max-width:34ch}

/* ------------------------------------------------------ 6 Meine Journey -- */
#s-journey{z-index:4;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto auto 1fr;
  grid-template-areas:". bild" "kopf bild" "wochen bild" "routine bild" ". bild";column-gap:7vw;row-gap:3.2vmin;padding:0 10vw 0 9vw}
.journey-kopf{grid-area:kopf;display:grid;gap:1.4vmin}
.journey-kopf h2{font-size:var(--t-gross)}
.journey-kopf h2 em{font-style:italic;color:var(--gold-display)}
.journey-intro{color:var(--tinte-leise)}
.wochen{grid-area:wochen;position:relative;height:clamp(170px,25vmin,330px)}
.woche{position:absolute;left:0;right:0;top:0;display:grid;gap:1.2vmin}
.woche-nr{display:flex;align-items:center;gap:1.4vmin;font-size:var(--t-klein);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-tief)}
.woche-nr::before{content:"";display:block;width:4vmin;height:1px;background:var(--gold)}
.woche h3{font-size:var(--t-mittel)}
.woche-text{font-size:clamp(15px,2vmin,23px);line-height:1.55;color:var(--tinte-leise);max-width:46ch}
.routine{grid-area:routine;position:relative;padding-top:1.8vmin;max-width:46ch;font-size:var(--t-klein);font-weight:700;letter-spacing:.14em;line-height:1.6;color:var(--gold-tief)}
#j-routine-linie{position:absolute;top:0;left:0;width:min(100%,34vmin);height:1px;background:var(--gold);transform-origin:0 50%}
.herz{display:inline-block;color:var(--rot);font-size:1.3em;letter-spacing:0;line-height:1}
.journey-bild{grid-area:bild;grid-row:1 / 6;display:flex;align-items:center;gap:6.5vmin}
.zeitachse{position:relative;width:2vmin;height:50vmin}
.za-spur{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--linie)}
#j-fort{position:absolute;inset:0;display:block;background:var(--gold);transform-origin:50% 0}
.za-punkt{position:absolute;left:50%;width:max(10px,1.5vmin);height:max(10px,1.5vmin);transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid var(--gold-tief);background:var(--grund)}
#j-p1{top:0}
#j-p2{top:50%}
#j-p3{top:100%}
.journey-rahmen{position:relative;width:46vmin;height:61.3vmin;border-radius:999px 999px 4vmin 4vmin;overflow:hidden;background:var(--blush)}
/* Die drei Fotos sind deckungsgleich zugeschnitten (900 x 1200, Augen bei 45 % der
   Hoehe, gleicher Augenabstand): gleiche Lage fuer alle, dann bleibt das Gesicht
   beim Ueberblenden stehen */
.journey-rahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* zarter Schatten nur in der Ecke unter der Ziffer — Kinn und Kieferlinie bleiben hell */
.journey-rahmen::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(72% 30% at 0% 100%,rgba(28,20,22,.58) 0%,rgba(28,20,22,0) 100%)}
.j-ziffer{position:absolute;z-index:2;left:3vmin;bottom:2vmin;width:2.2em;height:1em;font-family:var(--serif);font-size:clamp(40px,9vmin,130px);line-height:1;font-weight:400;font-style:italic;
  color:rgba(255,255,255,.94);text-shadow:0 .3vmin 2.4vmin rgba(28,20,22,.35)}
.j-ziffer span{position:absolute;left:0;bottom:0}

/* ------------------------------------------------- 7 Vor / Jetzt -- */
#s-vergleich{z-index:4;grid-template-columns:1fr 1fr;align-items:center;padding:0 7vw;gap:6vw}
.vergleich-text{display:grid;gap:2.2vmin;justify-self:end;max-width:min(40vw,640px)}
.vergleich-text h2{font-size:var(--t-gross)}
.vergleich-text h2 em{font-style:italic;color:var(--gold-display)}
.rahmen{position:relative;justify-self:start;width:54vmin;height:72vmin;border-radius:999px 999px 4vmin 4vmin;overflow:hidden;background:var(--blush)}
.rahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rahmen .nachher{clip-path:inset(0 0 0 100%)}
.wischlicht{position:absolute;top:0;bottom:0;left:0;width:.5vmin;margin-left:-.25vmin;background:var(--gold-hell);box-shadow:0 0 2.4vmin var(--gold)}
.rahmen .marke.links{max-width:calc(50% - 5vmin)}

/* -------------------------------------------------- 8 Das erwartet dich -- */
#s-angebot{z-index:4;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:1fr auto auto auto auto 1fr;
  grid-template-areas:". liste" "schild liste" "h2 liste" "preis liste" "knopf liste" ". liste";column-gap:7vw;row-gap:2.6vmin;padding:0 9vw}
.schild{grid-area:schild;justify-self:start;font-size:var(--t-klein);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-tief);
  border:1px solid var(--gold);border-radius:999px;padding:.8vmin 1.8vmin}
#a-h2{grid-area:h2;font-size:var(--t-gross)}
.preis{grid-area:preis;display:flex;align-items:baseline;flex-wrap:wrap;gap:.4vmin 1.4vmin;margin-top:1vmin}
.preis-vor,.preis-nach{font-family:var(--serif);font-style:italic;font-size:var(--t-mittel);color:var(--tinte-leise)}
.preis b{display:inline-flex;align-items:flex-end;font-size:clamp(46px,10vmin,150px);font-weight:500;line-height:1.1;color:var(--tinte)}
#a-knopf{grid-area:knopf}
.haken-liste{grid-area:liste;grid-row:1 / 7;align-self:center;display:grid;gap:1.25vmin}
.haken-liste li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.8vmin;padding-bottom:1.25vmin;border-bottom:1px solid var(--linie);
  font-size:clamp(15px,2.05vmin,26px);line-height:1.35;color:var(--tinte-leise)}
.haken-liste b{font-family:var(--serif);font-weight:500;color:var(--tinte)}
.haken{width:max(22px,3.3vmin);height:max(22px,3.3vmin);overflow:visible}
.haken circle{fill:none;stroke:var(--gold);stroke-width:1.3}
.haken path{fill:none;stroke:var(--gold-tief);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------- 9 Deine Vorteile -- */
#s-vorteile{z-index:4;place-items:center;padding:0 8vw}
.vorteile-kopf{position:absolute;top:13vmin;left:0;right:0;text-align:center}
.vorteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.4vw;width:min(86vw,1320px)}
.vorteil{display:grid;align-content:start;gap:1.7vmin;padding:3.6vmin 3.4vmin 4vmin;border-radius:3vmin;background:rgba(255,255,255,.6);border:1px solid var(--linie);
  box-shadow:0 3vmin 6vmin -5vmin rgba(127,95,40,.35)}
.symbol{width:max(48px,9vmin);height:max(48px,9vmin);overflow:visible}
.symbol circle,.symbol path{fill:none;stroke:var(--gold-tief);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.symbol .s-kreis{stroke:var(--gold);stroke-width:1}
.vorteil h3{font-size:var(--t-mittel);margin-top:.6vmin}
.vorteil p{font-size:clamp(14px,1.95vmin,22px);line-height:1.55;color:var(--tinte-leise)}

/* -------------------------------------------------------- 10 In Zahlen -- */
#s-zahlen{z-index:4;place-items:center}
.zahlen-kopf{position:absolute;top:13vmin;left:0;right:0;text-align:center;color:var(--gold)}
.messer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5vw;width:min(86vw,1300px)}
.messung{display:grid;justify-items:center;gap:2.4vmin;text-align:center}
.bogenlage{position:relative;width:30vmin;height:16.5vmin}
.bogen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.b-spur{fill:none;stroke:rgba(214,180,122,.2);stroke-width:7;stroke-linecap:round}
.b-wert{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round}
.mess-zahl{position:absolute;left:0;right:0;bottom:-.4vmin;display:grid;justify-items:center;gap:.2vmin;color:var(--creme)}
.mess-zahl .serif{display:inline-flex;align-items:flex-end;font-size:clamp(34px,7vmin,104px);line-height:1.1}
.prozent{font-size:.5em;line-height:1;padding-bottom:.32em;margin-left:.08em;color:var(--gold-hell)}
.mess-zahl small{font-size:var(--t-klein);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#cdb9bc}
.mess-text{font-size:var(--t-mittel);color:var(--creme);max-width:17ch;line-height:1.18}

/* -------------------------------------------------------- 11 Erfahrungen -- */
#s-stimmen{z-index:4;place-items:center;text-align:center}
.stimmen-kopf{position:absolute;top:8vmin;left:0;right:0;display:grid;gap:1vmin;justify-items:center;padding:0 6vw}
.stimmen-titel{font-size:var(--t-mittel)}
.stimmen-wertung{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4vmin 1.4vmin;font-size:var(--t-klein);font-weight:600;color:var(--tinte-leise)}
.sterne{font-size:var(--t-mittel);letter-spacing:.2em;color:var(--gold-tief)}
.sterne span{display:inline-block}
.zitate{position:relative;width:min(72vw,1000px);height:38vmin;margin-top:10vmin}
.zitat{position:absolute;inset:0;display:grid;align-content:center;gap:2.4vmin;justify-items:center}
.zitat p{font-family:var(--serif);font-style:italic;font-size:clamp(21px,3.8vmin,54px);line-height:1.26;text-wrap:balance}
.zitat.lang p{font-size:clamp(17px,2.9vmin,40px);line-height:1.32}
/* Quer: so schmal, dass das Zitat ganz im goldenen Ring liegt (szenen.js
   richtet den Ring nach dem Text, hat aber oben und unten nur so viel Platz) */
@media (orientation:landscape){
  .zitat p{max-width:50vmin}
  .zitat.lang p{max-width:56vmin}
}
/* Name und "Verifizierte Teilnehmerin" untereinander, wie auf der Hauptseite */
.zitat cite{display:grid;justify-items:center;gap:.5vmin;font-style:normal;font-size:var(--t-klein);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-leise)}
.z-name{color:var(--tinte)}
.z-rolle{font-size:.86em}

/* ------------------------------------------------------------ 12 Fragen -- */
#s-fragen{z-index:4;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:6vw;padding:0 9vw}
.fragen-links{display:grid;gap:3.4vmin}
.fragen-kopf{display:grid;gap:1.4vmin}
.fragen-kopf h2{font-size:var(--t-gross)}
.fragen li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2vmin;padding:1.5vmin 0;
  border-bottom:1px solid var(--linie);font-size:clamp(14px,1.9vmin,22px);font-weight:600;line-height:1.35}
.f-nr{font-style:italic;font-weight:500;font-size:1.15em;color:var(--gold-tief)}
.f-plus{position:relative;display:block;width:max(12px,1.8vmin);height:max(12px,1.8vmin)}
.f-plus::before,.f-plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--tinte)}
.f-plus::after{transform:rotate(90deg)}
.f-linie{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform-origin:0 50%}
.antworten{position:relative;height:clamp(240px,42vmin,500px)}
.antwort{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;align-content:center;gap:2.2vmin}
.antwort h3{font-size:var(--t-mittel)}
.antwort p{font-family:var(--serif);font-size:clamp(17px,2.5vmin,32px);line-height:1.45;color:var(--tinte-leise)}

/* ------------------------------------------------------- 13 Jetzt starten -- */
#s-finale{z-index:4;grid-template-rows:minmax(0,1fr) auto;padding:10vmin 8vw 9vmin;row-gap:3vmin}
.finale-haupt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7vw;align-self:center}
.finale-bild{width:44vmin;height:44vmin;border-radius:4vmin;overflow:hidden;justify-self:end;background:var(--blush);box-shadow:0 3vmin 7vmin -4vmin rgba(28,20,22,.45)}
.finale-bild img{width:100%;height:100%;object-fit:cover}
.finale-text{display:grid;gap:2.6vmin;max-width:min(46vw,760px);justify-items:start}
.finale-text h2{font-size:clamp(40px,8.4vmin,130px);line-height:1}
.finale-text h2 em{font-style:italic;color:var(--rot)}
.fuss{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"linie linie linie" "logo sozial copy";align-items:center;column-gap:4vmin;row-gap:2.4vmin}
.fuss-linie{grid-area:linie;display:block;height:1px;background:var(--gold);transform-origin:50% 50%}
.fuss-logo{grid-area:logo;width:13vmin;height:13vmin;min-width:64px;min-height:64px}
/* Netzwerke als kleine, ruhige Liniensymbole in einer Reihe; Flaeche zum Antippen mindestens 44 px */
.sozial{grid-area:sozial;display:flex;gap:.4vmin}
.sozial a{display:grid;place-items:center;width:max(44px,4.4vmin);height:max(44px,4.4vmin);border-radius:50%;border:1px solid transparent;color:var(--gold-tief)}
.sozial svg{display:block;width:clamp(22px,2.3vmin,26px);height:clamp(22px,2.3vmin,26px);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sozial .voll{fill:currentColor;stroke:none}
.sozial a:hover,.sozial a:focus-visible{color:var(--tinte);border-color:var(--gold);background:rgba(255,255,255,.6)}
.sozial a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.copyright{grid-area:copy;justify-self:end;font-size:var(--t-klein);color:var(--tinte-leise)}

/* ----------------------------------------------- Hochformat (Handy) -- */
@media (orientation:portrait){
  .titelbild img{object-position:66% 30%}
  .schleier{background:linear-gradient(0deg,rgba(253,243,244,.97) 0%,rgba(253,243,244,.92) 50%,rgba(253,243,244,.6) 64%,rgba(253,243,244,0) 78%)}
  .titeltext{align-self:end;padding:0 6vw 12vh;max-width:none;gap:1.8vh}
  .abzeichen{gap:.55em;padding:7px 13px 7px 10px;border-radius:20px;font-size:10.5px;letter-spacing:.07em}
  .titel-h1{font-size:clamp(28px,8.4vw,52px)}
  .unterzeile{font-size:clamp(18px,5vw,26px)}
  #t-knopf{max-width:100%;font-size:clamp(12px,3.3vw,15px);letter-spacing:.05em;padding:1.7vh 5vw}
  .hinweis{display:none}

  .satz{font-size:clamp(28px,7.6vmin,56px)}
  .saetze{height:50vh;width:86vw}
  .schmerz-kopf{top:13vh}
  .schmerz-punkte{bottom:15vh}

  /* --st-frei: was dem Film nach der Hoehe bleibt, wenn Kopfleiste (62 px),
     Links unten (53 px), Etikett, zweizeilige Ueberschrift, Absatzfeld (27vh),
     Signatur und Abstaende abgezogen sind. Auf kurzen Handys (unter etwa
     690 px Hoehe, auch im Browser einer App mit festen Leisten) werden Film
     und Profil-Paar so viel kleiner — sonst schoebe sich das Paar mit seinen
     Schildern unter die Kopfleiste und die Signatur in die Links. */
  #s-story{--st-frei:max(96px,calc(64.6vh - min(17.5vw,70px) - 174px));
    grid-template-columns:1fr;align-content:center;justify-items:center;text-align:center;gap:3vh;padding:10vh 7vw 8vh}
  .story-bilder{width:min(30vw,calc(var(--st-frei) * .5625));height:min(53.3vw,var(--st-frei))}
  .paar.profil-paar{--pb-h:min(52vw,calc(var(--st-frei) * .975))}
  .paar.profil-paar .marke{top:2.4vw;bottom:auto}
  .story-text{justify-items:center;max-width:none;gap:1.8vh}
  .story-text h2{font-size:clamp(28px,8.4vw,44px)}
  .story-saetze{height:27vh;width:100%}
  .story-satz{max-width:none;font-size:clamp(15px,4.3vw,21px)}
  .signatur .serif{font-size:clamp(17px,4.8vw,24px)}

  /* Bildpaar auch nach der Hoehe begrenzen: auf dem Tablet (768 x 1024) liefe die
     zweizeilige Unterschrift sonst in den Zaehler "01 / 09".
     --kopf-h: so hoch ist der Kopf ab 13vh (Sterne, zweizeilige Ueberschrift,
     zweizeiliger Einleitungssatz, 10 px Luft) — in px, nicht in vh. Auf kurzen
     Handys (unter etwa 720 px Hoehe) reichen 32vh dafuer nicht: Das Paar beginnt
     dann erst unter dem Satz und wird, wo noetig, so viel niedriger, dass
     Unterschrift und Zaehler darunter ihren Platz behalten. */
  #s-ergebnisse{--slot:92vw;--kopf-h:calc(min(17.5vw,70px) + 75px);--pb-h:min(57vw,34vh,max(110px,calc(71vh - var(--kopf-h) - 116px)))}
  .ergebnis-kopf{top:11vh;gap:1vh}
  .ergebnis-kopf h2{font-size:clamp(28px,8.4vw,44px)}
  .ergebnis-intro{font-size:15px;max-width:30ch}
  .ergebnis-lage{top:max(32vh,calc(13vh + var(--kopf-h)))}
  .ergebnis h3{font-size:clamp(17px,4.9vw,24px)}
  .paar .marke{font-size:10px;bottom:2.4vw}
  .ergebnis-zaehler{bottom:16vh}

  /* Hochkant stehen Kopf (mit Einleitungssatz) und Karten untereinander im
     Fluss und gemeinsam mittig — so schiebt ein zweizeiliger Titel die Karten
     nach unten, statt sie zu ueberdecken. Das Bild richtet sich auch nach der
     Hoehe, damit Kopf, Bild und laengster Kartentext auch auf kurzen
     Bildschirmen zwischen Kopfleiste und Kapitelanzeige passen. */
  #s-saeulen{--slot:84vw;--bild-h:min(58vw,27vh);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;row-gap:2.6vh;padding:8vh 0}
  .saeulen-kopf{position:relative;top:auto;gap:1vh}
  .saeulen-kopf h2{font-size:clamp(28px,8.4vw,44px)}
  .saeulen-intro{font-size:clamp(13.5px,3.6vw,17px);line-height:1.5;max-width:36ch}
  .saeulen-lage{position:relative;top:auto;height:auto;margin-top:0}
  #spur-saeulen{position:relative;height:auto;align-items:flex-start}
  .karte{grid-template-columns:1fr;align-content:start;justify-items:center;text-align:center;gap:2.4vh;padding:0 3vw}
  .karte-text{justify-items:center;gap:1vh}
  .karte-nr{font-size:clamp(26px,7vw,36px)}
  .karte h3{font-size:clamp(21px,6vw,30px)}
  .karte-text p:not(.karte-nr){font-size:15px}

  #s-journey{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"kopf" "bild" "wochen" "routine";
    align-content:center;justify-items:center;text-align:center;row-gap:2.2vh;padding:9vh 7vw 7vh}
  .journey-kopf{justify-items:center;gap:.8vh}
  .journey-kopf h2{font-size:clamp(26px,7.8vw,40px)}
  .journey-intro{font-size:15px}
  .journey-bild{grid-row:auto;gap:7vw}
  .zeitachse{height:42vw}
  .journey-rahmen{width:36vw;height:48vw}
  .j-ziffer{font-size:34px;left:2.6vw;bottom:1vw}
  .wochen{width:100%;height:clamp(150px,23vh,230px)}
  .woche{justify-items:center}
  .woche h3{font-size:clamp(20px,5.6vw,28px)}
  .woche-text{font-size:14.5px;line-height:1.5}
  .routine{font-size:11px;letter-spacing:.1em;max-width:none}
  #j-routine-linie{left:50%;width:30vw;margin-left:-15vw;transform-origin:50% 50%}

  #s-vergleich{grid-template-columns:1fr;align-content:center;padding:12vh 7vw 8vh;gap:3vh}
  .vergleich-text{order:2;text-align:center;justify-items:center;justify-self:center;max-width:none}
  .vergleich-text h2{font-size:clamp(28px,8.4vw,44px)}
  .rahmen{justify-self:center;width:66vw;height:88vw}
  .rahmen .marke{font-size:10px}

  #s-angebot{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"schild" "h2" "liste" "preis" "knopf";align-content:center;
    justify-items:center;text-align:center;row-gap:2vh;padding:10vh 7vw 8vh}
  .schild{justify-self:center}
  #a-h2{font-size:clamp(28px,8.4vw,44px)}
  .haken-liste{grid-row:auto;gap:.9vh;width:100%;text-align:left}
  .haken-liste li{font-size:14px;gap:12px;padding-bottom:.9vh}
  .haken{width:20px;height:20px}
  .preis{justify-content:center;margin-top:0}
  .preis b{font-size:clamp(44px,13vw,64px)}
  .preis-vor,.preis-nach{font-size:20px}
  #a-knopf{justify-self:center}

  .vorteile-kopf{top:12vh}
  .vorteile{grid-template-columns:1fr;gap:2vh;width:86vw}
  .vorteil{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"sym h" "sym p";column-gap:4vw;row-gap:.6vh;padding:2.4vh 5vw;border-radius:5vw}
  .symbol{grid-area:sym;width:13vw;height:13vw;min-width:0;min-height:0;align-self:start}
  .vorteil h3{grid-area:h;font-size:clamp(19px,5.4vw,26px);margin-top:0}
  .vorteil p{grid-area:p;font-size:14px}

  .zahlen-kopf{top:12vh}
  .messer{grid-template-columns:1fr;gap:4vh;margin-top:4vh}
  .bogenlage{width:38vw;height:20.9vw}
  .mess-zahl .serif{font-size:clamp(30px,9vw,46px)}
  .mess-zahl small{font-size:10px}
  .mess-text{font-size:clamp(17px,4.8vw,24px);max-width:22ch}

  .stimmen-kopf{top:10vh}
  .zitate{width:86vw;height:50vh;margin-top:12vh}
  .zitat p{max-width:74vw;font-size:clamp(18px,5vw,27px)}
  .zitat.lang p{max-width:76vw;font-size:clamp(14.5px,3.9vw,21px)}

  #s-fragen{grid-template-columns:1fr;align-content:center;gap:3vh;padding:10vh 7vw 8vh}
  .fragen-links{gap:2.4vh}
  .fragen-kopf h2{font-size:clamp(28px,8.4vw,44px)}
  .fragen li{font-size:13.5px;padding:1vh 0;gap:3vw}
  .antworten{height:33vh}
  .antwort{align-content:start;gap:1.2vh}
  .antwort h3{font-size:clamp(18px,5vw,24px)}
  .antwort p{font-size:15px;line-height:1.5}

  /* Oben mindestens Kopfleiste + Abstand; Bild und Markenzeichen auch nach
     der Hoehe begrenzt, sonst schiebt sich auf 3:4-Bildschirmen (600 x 800,
     768 x 1024) der Knopf in die Fusslinie */
  #s-finale{padding:max(10vh,74px) 7vw 9vh;row-gap:2.4vh}
  .finale-haupt{grid-template-columns:1fr;justify-items:center;text-align:center;gap:3vh}
  .finale-bild{width:min(52vw,27vh);height:min(52vw,27vh);justify-self:center}
  .finale-text{justify-items:center;gap:2vh;max-width:none}
  .finale-text .knopf{justify-self:center}
  .finale-text h2{font-size:clamp(32px,9.6vw,52px)}
  .knopf{padding:2vh 6vw}
  .fuss{grid-template-columns:1fr;grid-template-areas:"linie" "logo" "sozial" "copy";justify-items:center;row-gap:1.6vh}
  .fuss-linie{justify-self:stretch}
  .fuss-logo{width:min(20vw,11vh);height:min(20vw,11vh)}
  .sozial{justify-content:center;gap:2vw}
  .copyright{justify-self:center;font-size:12px}
}
/* Kurze Handys (z. B. 360 x 640, 375 x 667): bei den Saeulen das eigene Etikett
   "Die Methode" weglassen und das Bild etwas kleiner, damit Einleitungssatz und
   laengster Kartentext zwischen Kopfleiste und Kapitelanzeige passen; im
   Finale das Bild etwas kleiner, damit der Knopf Abstand zur Fusslinie haelt;
   lange Zitate etwas kleiner, damit sie ganz im Ring liegen */
@media (orientation:portrait) and (max-height:700px){
  .saeulen-kopf .kicker{display:none}
  #s-saeulen{--bild-h:min(58vw,25vh)}
  .finale-bild{width:min(52vw,25vh);height:min(52vw,25vh)}
  .zitat.lang p{font-size:14px;line-height:1.28}
}
/* Sehr schmale Handys (320 px): Die Signatur der Story bricht dort in vier
   Zeilen um — so viel weniger bleibt dem Film */
@media (orientation:portrait) and (max-width:340px){
  #s-story{--st-frei:max(96px,calc(64.6vh - min(17.5vw,70px) - 208px))}
}
/* Kleine 3:4-Fenster (z. B. 600 x 800): alles in vw waere zu hoch, Signatur der
   Story und Ueberschrift beim Vergleich liefen in die Links unten. Film und
   Profil-Paar der Story und der Vergleichsrahmen richten sich dort nach der Hoehe. */
@media (orientation:portrait) and (min-aspect-ratio:2/3) and (max-height:900px){
  .story-bilder{width:min(30vw,19vh,calc(var(--st-frei) * .5625));height:min(53.3vw,33.8vh,var(--st-frei))}
  .paar.profil-paar{--pb-h:min(52vw,33vh,calc(var(--st-frei) * .975))}
  .rahmen{width:min(66vw,42vh);height:min(88vw,56vh)}
}