/* The Jawline Method — Motion-Fassung
 *
 * Eigene Farbwelt, abgeleitet von der Jawline-Seite: Blush und Rosé als Grund,
 * Koralle als Signalfarbe (Knoepfe, Linien, Haken), ein tiefes Himbeerrot fuer
 * "Schon versucht", Salbei fuer "Das Problem liegt nicht bei dir", Wein fuer
 * die Zahlen. Schriften wie die Holy-Face-Motion-Seite (Fraunces + Manrope).
 *
 * Kontraste (WCAG 2.1 AA, gemessen mit werkzeug/kontrast.mjs):
 *   Tinte auf Grund 15,7:1 · Tinte-leise auf Grund 7,3:1 · Koralle-tief auf Grund 5,5:1
 *   Weiss auf Koralle-tief (Knopf) 6,1:1 · Weiss auf Himbeere 5,6:1 · Weiss auf Salbei 6,6:1
 *   Creme auf Wein 13,0:1 · Salbei-tief (Haken) auf Salbei-hell 7,3:1
 * Die helle Koralle (--koralle) traegt nur Flaechen, Linien und grosse Zeichen, nie Text.
 *
 * Alle Masse haengen an der kleineren Bildschirmseite (vmin), damit dieselbe
 * Buehne auf jedem Geraet stimmt; Hochformat hat eigene Regeln (unten).
 */
@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:#fdf1f2;
  --grund-weich:#fee7ea;
  --blush:#f9dde2;
  --rose:#f2c3c9;
  --tinte:#27161b;
  --tinte-leise:#664850;
  --koralle:#de5b3f;
  --koralle-hell:#f6a894;
  --koralle-zart:#fbe0d8;
  --koralle-tief:#ad3c26;
  --himbeere:#bb3457;
  --himbeere-tief:#93213f;
  --salbei:#4b6350;
  --salbei-hell:#e2ebdf;
  --salbei-tief:#36503b;
  --sand:#f7eedf;
  --wein:#4b1f27;
  --creme:#fff7f3;
  --linie:#eed0d6;

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

  --t-gross:clamp(28px,5.4vmin,82px);
  --t-mittel:clamp(20px,3.1vmin,42px);
  --t-text:clamp(15px,2vmin,23px);
  --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 78% 12%,var(--grund-weich) 0%,var(--grund) 58%,#fcecee 100%)}
/* zwei weiche Lichtflecken (Koralle, Rose); bewegen sich am Desktop leicht mit der Maus */
.dekor{position:absolute;inset:-6vmin;pointer-events:none}
.dekor i{position:absolute;border-radius:50%;filter:blur(7vmin);opacity:.55}
.dekor .d1{width:52vmin;height:52vmin;right:-8vmin;top:-12vmin;background:radial-gradient(circle,#ffd3c7 0%,rgba(255,211,199,0) 70%)}
.dekor .d2{width:60vmin;height:60vmin;left:-14vmin;bottom:-18vmin;background:radial-gradient(circle,#f8cdd6 0%,rgba(248,205,214,0) 70%)}
.flaeche{position:absolute;inset:0;clip-path:inset(100% 0% 0% 0%)}
.flaeche-himbeere{background:radial-gradient(110% 90% at 50% 20%,#c73d61 0%,var(--himbeere) 55%,#a92c4d 100%)}
.flaeche-salbei{background:radial-gradient(110% 90% at 50% 40%,#566f5a 0%,var(--salbei) 60%,#425946 100%);display:grid;place-items:center;z-index:5}
.flaeche-wein{background:radial-gradient(100% 85% at 50% 40%,#5c2831 0%,var(--wein) 70%)}
.szene{position:absolute;inset:0;width:100%;height:100%;display:grid;z-index:4}
.kicker{font-size:var(--t-klein);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--koralle-tief)}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.06;text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 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}
.rolle .band{display:block}
.rolle .band i{display:block;height:1.1em;line-height:1.1;font-style:inherit;text-align:center}

/* Konturschwung unter einem Wort: zeichnet sich (pathLength="1") */
.mit-schwung{position:relative;display:inline-block}
.schwung{position:absolute;left:-.04em;right:-.04em;bottom:-.16em;width:calc(100% + .08em);height:.3em;overflow:visible;pointer-events:none}
.schwung path{fill:none;stroke:var(--koralle);stroke-width:3;stroke-linecap:round}

/* Knopf (fuehrt zum Bestellvorgang) */
.knopf{justify-self:start;display:inline-flex;align-items:center;gap:1.6vmin;text-decoration:none;text-align:left;
  font-weight:800;font-size:clamp(13px,1.7vmin,20px);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--koralle-tief);
  padding:2vmin 3.4vmin;border-radius:999px;min-height:48px;box-shadow:0 2vmin 5vmin -2.6vmin rgba(173,60,38,.75)}
.knopf:hover,.knopf:focus-visible{background:var(--tinte);color:#fff}
.knopf:focus-visible{outline:3px solid var(--koralle);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:.92}

/* Schild auf einem Bild (vorher / nachher) */
.marke{position:absolute;top:2vmin;font-size:clamp(10px,1.25vmin,15px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.25;
  padding:.7vmin 1.4vmin;border-radius:999px;background:rgba(39,22,27,.68);color:#fff}
.marke.links{left:2vmin}
.marke.rechts{right:2vmin;background:var(--koralle-tief);color:#fff}

/* Bildpaar vorher | nachher: beide Haelften 3:4, Licht faehrt ueber das Nachher-Bild */
.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(75,31,39,.45)}
.pb{position:relative;overflow:hidden;height:100%}
.pb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nb-schleier{position:absolute;inset:0;background:rgba(253,241,242,.32);
  -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:#ffe6dc;box-shadow:0 0 2.4vmin var(--koralle);opacity:0}

/* Karten der Listen (Kommt dir das bekannt vor, Schon versucht, Stell dir vor) */
.kopf-h2{font-size:var(--t-gross);text-align:center}
.kopf-h2.hell{color:#fff}
.karten{display:grid;gap:1.8vmin;width:min(86vw,1220px)}
.karte-z{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2.2vmin;padding:2.4vmin 3vmin;border-radius:2.4vmin;
  background:#fff;box-shadow:0 2.4vmin 5vmin -3.6vmin rgba(75,31,39,.38);font-size:clamp(15px,2.1vmin,25px);font-weight:600;line-height:1.4;color:var(--tinte)}
.zeichen{flex:none;width:max(28px,4.4vmin);height:max(28px,4.4vmin);border-radius:50%;background:var(--koralle-zart);overflow:visible}
.zeichen path{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zeichen .k1,.zeichen .k2{stroke:var(--koralle-tief)}
.zeichen .h{stroke:var(--salbei-tief)}
.emoji{font-size:1.45em;line-height:1;font-weight:400;font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}

/* ---------------------------------------------------- 1 Willkommen -- */
#s-titel{z-index:6;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:5.5vw;padding:0 6vw 0 6vw}
.titel-bild{position:relative;justify-self:end}
.titel-paar{--pb-h:min(56vmin,calc(100vh - 220px))}
.titeltext{display:grid;gap:2.4vmin;justify-items:start;max-width:min(40vw,720px)}
.abzeichen{display:inline-flex;align-items:center;gap:.6em;padding:1vmin 2.2vmin 1vmin 1.5vmin;border-radius:999px;
  background:#fde4e2;border:1px solid var(--koralle-hell);
  font-size:var(--t-klein);font-weight:800;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;color:var(--koralle-tief)}
.blitz{flex:none;width:1.3em;height:1.3em;fill:#f7b733;stroke:#b06a12;stroke-width:1.1;stroke-linejoin:round}
.abz-zahl{flex:none;display:inline-flex;align-items:flex-end;letter-spacing:.04em;color:var(--tinte)}
.titel-h1{font-size:clamp(32px,6.2vmin,98px);line-height:1.02;color:var(--tinte)}
.titel-h1 em{display:block;font-style:italic;color:var(--koralle-tief)}
.unterzeile{font-size:var(--t-mittel);font-family:var(--serif);font-style:italic;color:var(--tinte-leise);max-width:30ch;line-height:1.3;text-wrap:balance}
.hinweis{position:absolute;left:50%;bottom:3.4vmin;margin-left:-9vmin;width:18vmin;text-align:center;
  font-size:var(--t-klein);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-leise)}
.hinweis i{display:block;width:1px;height:5vmin;margin:1.2vmin auto 0;background:var(--koralle)}

/* -------------------------------------------- 2 Kommt dir das bekannt vor -- */
#s-schmerz,#s-versucht,#s-vorstellen{align-content:center;justify-items:center;row-gap:4vmin;padding:11vmin 8vw 9vmin}
.karten-schmerz,.karten-versucht{grid-template-columns:1fr 1fr}

/* ------------------------------------------------ 3 Schon versucht -- */
.karten-versucht .karte-z{grid-template-columns:auto minmax(0,1fr)}
.problem{width:min(86vw,1220px);padding:2.8vmin 3vmin;border-radius:2.4vmin;background:var(--salbei);color:#fff;text-align:center;
  font-size:var(--t-mittel);box-shadow:0 2.4vmin 5vmin -3.6vmin rgba(26,40,28,.6)}
.salbei-gross{color:#fff;font-size:clamp(38px,9vmin,138px);text-align:center;padding:0 8vw;max-width:16ch;line-height:1.02}

/* --------------------------------------------------- 4 Nicht alleine -- */
#s-alleine{place-items:center;padding:12vmin 9vw 10vmin}
.alleine{position:relative;display:grid;justify-items:center;gap:3.2vmin;text-align:center;max-width:min(84vw,1200px)}
.alleine h2{font-size:clamp(30px,6.4vmin,98px)}
.alleine h2 em{font-style:italic;color:var(--koralle-tief)}
.alleine-intro{font-size:clamp(16px,2.35vmin,29px);line-height:1.55;color:var(--tinte-leise);max-width:56ch;text-wrap:pretty}
.alleine-intro b{color:var(--tinte);font-weight:700}
.alleine-weg{font-family:var(--serif);font-style:italic;font-size:var(--t-mittel);color:var(--koralle-tief)}
.alleine-linie{display:block;width:1.5px;height:10vmin;background:linear-gradient(var(--koralle),rgba(222,91,63,0));transform-origin:50% 0}

/* --------------------------------------------------------- 5 Mein Weg -- */
#s-weg{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:7vw;padding:0 9vw 0 8vw}
.weg-text{display:grid;gap:2.2vmin;align-content:center;max-width:min(44vw,700px)}
.leiste{position:relative;display:flex;width:min(100%,520px);margin-bottom:1vmin}
.leiste-spur{position:absolute;left:10%;right:10%;top:calc(max(10px,1.4vmin) / 2);height:1.5px;margin-top:-.75px;background:var(--linie)}
.leiste-spur i{position:absolute;inset:0;display:block;background:var(--koralle);transform-origin:0 50%}
.lp{position:relative;flex:1 1 0;display:grid;justify-items:center;gap:.9vmin}
.lp b{display:block;width:max(10px,1.4vmin);height:max(10px,1.4vmin);border-radius:50%;border:1.5px solid var(--koralle-tief);background:var(--grund)}
.lp span{font-size:var(--t-klein);font-weight:800;letter-spacing:.08em;color:var(--tinte-leise)}
.weg-jahr{display:flex;align-items:flex-end;font-size:clamp(64px,13vmin,200px);line-height:1;letter-spacing:-.03em;color:var(--tinte);font-variant-numeric:lining-nums}
.jahr-rolle{display:block;height:1em;overflow:hidden;color:var(--koralle-tief);font-style:italic}
.jahr-band{display:block}
.jahr-band i{display:block;height:1em;line-height:1;font-style:italic}
.stationen{position:relative;height:clamp(170px,25vmin,320px)}
.station{position:absolute;left:0;right:0;top:0;display:grid;gap:1.4vmin}
.station h3{font-size:var(--t-mittel)}
.station p{font-size:clamp(15px,2vmin,23px);line-height:1.55;color:var(--tinte-leise);max-width:46ch}
.weg-bilder{position:relative;width:44vmin;height:58.7vmin;justify-self:center}
.weg-rahmen{position:absolute;inset:0;border-radius:999px 999px 3.4vmin 3.4vmin;overflow:hidden;background:var(--blush);box-shadow:0 3vmin 7vmin -4vmin rgba(75,31,39,.5)}
.weg-rahmen img,.weg-film{position:absolute;inset:0;width:100%;height:100%}
.weg-rahmen img{object-fit:cover}
.weg-film video,.weg-film .st-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.weg-karte{position:absolute;left:-11vmin;bottom:-3vmin;width:19vmin;height:23.75vmin;border-radius:2.4vmin;overflow:hidden;background:var(--blush);
  border:.6vmin solid #fff;box-shadow:0 2.4vmin 5vmin -2.6vmin rgba(75,31,39,.55)}
.weg-karte img{width:100%;height:100%;object-fit:cover}
.weg-brille{left:auto;right:-8vmin;bottom:auto;top:9vmin;width:15vmin;height:18.75vmin}
.weg-paar{--pb-h:24vmin;position:absolute;left:-16vmin;bottom:-4vmin;width:calc(var(--pb-h) * 1.6 + .6vmin);border:.6vmin solid #fff;border-radius:2.4vmin}
.weg-paar .marke{font-size:clamp(9px,1.1vmin,13px);padding:.5vmin 1.1vmin;top:1.2vmin}
.weg-paar .marke.links{left:1.2vmin}
.weg-paar .marke.rechts{right:1.2vmin}

/* --------------------------------------------------- 6 Stell dir vor -- */
.karten-vorstellen{width:min(80vw,1040px);gap:1.5vmin}
.karten-vorstellen .karte-z{background:var(--sand);padding:2vmin 2.8vmin}

/* ----------------------------------------------------- Erfahrungen -- */
.szene-stimme{place-items:center;padding:12vmin 9vw 10vmin}
.stimme{position:relative;display:grid;justify-items:center;gap:3vmin;width:min(80vw,1040px);padding:7vmin 7vmin 6vmin;text-align:center;
  border-radius:3vmin;background:var(--creme);border:1.5px solid var(--tinte);box-shadow:0 3vmin 7vmin -5vmin rgba(75,31,39,.4)}
.stimme-zeichen{position:absolute;left:5vmin;top:-7.4vmin;font-size:clamp(90px,17vmin,240px);line-height:1;font-style:italic;color:var(--koralle)}
.stimme blockquote{margin:0}
.stimme blockquote p{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3.5vmin,46px);line-height:1.3;text-wrap:balance}
.stimme.lang blockquote p{font-size:clamp(17px,2.8vmin,36px);line-height:1.36}
.stimme figcaption{display:grid;justify-items:center;gap:.6vmin;font-size:var(--t-klein);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.z-name{color:var(--tinte)}
.z-rolle{color:var(--tinte-leise);font-size:.88em;letter-spacing:.1em}
.sterne{font-size:var(--t-mittel);letter-spacing:.2em;color:var(--koralle-tief);line-height:1}
.sterne span{display:inline-block}

/* ------------------------------------------------------ 8 Ergebnisse -- */
#s-ergebnisse{--slot:74vmin;--pb-h:44vmin}
.ergebnis-kopf{position:absolute;top:10vmin;left:0;right:0;text-align:center;padding:0 8vw}
.ergebnis-kopf h2{font-size:var(--t-gross)}
.spurlage{position:absolute;left:0;right:0}
.ergebnis-lage{top:22vmin}
.spur{position:absolute;top:0;left:calc(50% - var(--slot) / 2);display:flex}
#spur-ergebnisse{width:calc(var(--slot) * 4)}
.ergebnis{width:var(--slot);flex:none;display:grid;justify-items:center;align-content:start;gap:1.4vmin;padding:0 2vmin;text-align:center}
.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:1.2vmin}
.dauer{font-size:var(--t-klein);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--koralle-tief)}
.ergebnis-zaehler{position:absolute;left:0;right:0;bottom:7vmin;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:800;letter-spacing:.12em;color:var(--tinte-leise);padding-bottom:.3em}

/* ---------------------------------------------------- 10 Deine 4 Wochen -- */
#s-wochen{align-content:center;justify-items:center;row-gap:6vmin;padding:11vmin 8vw 9vmin}
.wochen-kopf{display:grid;justify-items:center;gap:1.8vmin;text-align:center}
.wochen-kopf h2{font-size:var(--t-gross)}
.wochen-intro{max-width:58ch;color:var(--tinte-leise);text-wrap:balance}
.wochen-lage{--gap:2.4vw;--oben:7vmin;position:relative;width:min(86vw,1280px)}
.wochen-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);padding-top:var(--oben)}
/* Spur von der Mitte der ersten bis zur Mitte der vierten Spalte */
.wochen-spur{position:absolute;top:calc(var(--oben) / 2 - 1px);left:calc((100% - 3 * var(--gap)) / 8);right:calc((100% - 3 * var(--gap)) / 8);height:2px;background:var(--linie)}
.wochen-spur i{position:absolute;inset:0;display:block;background:var(--koralle);transform-origin:0 50%}
.wo{position:relative;display:grid;align-content:start;gap:1.1vmin;padding:3vmin 2.6vmin;border-radius:2.4vmin;background:rgba(255,255,255,.62);border:1px solid var(--linie)}
.wo-punkt{position:absolute;left:50%;top:calc(var(--oben) / -2);width:max(14px,2vmin);height:max(14px,2vmin);transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--koralle-tief);background:var(--grund)}
.wo-nr{font-size:var(--t-klein);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--koralle-tief)}
.wo h3{font-size:var(--t-mittel)}
.wo-text{font-size:clamp(14px,1.85vmin,21px);line-height:1.5;color:var(--tinte-leise)}

/* ------------------------------------------------ 11 Das erwartet dich -- */
#s-angebot{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;column-gap:5vw;padding:9vmin 8vw 7vmin}
.angebot-bild{justify-self:center;width:min(100%,64vmin)}
.angebot-bild img{width:100%;height:auto;filter:drop-shadow(0 3vmin 4vmin rgba(75,31,39,.22))}
.angebot-text{display:grid;gap:1.7vmin;justify-items:start;max-width:760px}
#an-h2{font-size:clamp(26px,4.8vmin,68px)}
.angebot-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:1vmin 2vmin}
.schild{display:inline-block;font-size:var(--t-klein);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--koralle-tief);
  border:1px solid var(--koralle-tief);border-radius:999px;padding:.7vmin 1.7vmin}
.angebot-label{font-weight:800;font-size:clamp(14px,1.85vmin,21px)}
.haken-liste{display:grid;gap:.9vmin;width:100%}
.haken-liste li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.6vmin;padding-bottom:.9vmin;border-bottom:1px solid var(--linie);
  font-size:clamp(14px,1.8vmin,21px);line-height:1.4;color:var(--tinte-leise)}
.haken-liste b{color:var(--tinte);font-weight:800}
.haken{width:max(22px,3vmin);height:max(22px,3vmin);overflow:visible}
.haken circle{fill:var(--koralle-zart);stroke:var(--koralle);stroke-width:1.3}
.haken path{fill:none;stroke:var(--koralle-tief);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kasse{display:flex;flex-wrap:wrap;align-items:center;gap:1.4vmin 3.4vmin;margin-top:.6vmin}
.preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2vmin 1.4vmin}
.preis-vor{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(42px,8vmin,120px);font-weight:500;line-height:1.1;color:var(--tinte)}

/* ---------------------------------------------------- 12 Deine Vorteile -- */
#s-vorteile{place-items:center;padding:0 8vw}
.vorteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3vw;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,.66);border:1px solid var(--linie);
  box-shadow:0 3vmin 6vmin -5vmin rgba(173,60,38,.35)}
.symbol{width:max(48px,9vmin);height:max(48px,9vmin);overflow:visible}
.symbol circle,.symbol path{fill:none;stroke:var(--koralle-tief);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.symbol .s-kreis{stroke:var(--koralle);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)}

/* -------------------------------------------------------- 13 In Zahlen -- */
#s-zahlen{place-items:center}
.messer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5vw;width:min(86vw,1300px);padding:6vmin 4vw;border:1px solid rgba(246,168,148,.4);border-radius:2.4vmin}
.messung{display:grid;justify-items:center;gap:2.4vmin;text-align:center}
.bogenlage{position:relative;width:28vmin;height:15.4vmin}
.bogen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.b-spur{fill:none;stroke:rgba(246,168,148,.18);stroke-width:7;stroke-linecap:round}
.b-wert{fill:none;stroke:var(--koralle-hell);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,6.6vmin,100px);line-height:1.1}
.einheit{font-size:.62em;line-height:1;padding-bottom:.22em;margin-left:.1em;color:var(--koralle-hell)}
.mess-zahl small{font-size:var(--t-klein);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#e7c9cc}
.mess-text{font-size:var(--t-mittel);color:var(--creme);max-width:17ch;line-height:1.18}

/* ------------------------------------------------------------ 15 Fragen -- */
#s-fragen{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-links 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:700;line-height:1.35}
.f-nr{font-style:italic;font-weight:500;font-size:1.15em;color:var(--koralle-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(--koralle);transform-origin:0 50%}
.antworten{position:relative;height:clamp(220px,40vmin,480px)}
.antwort{position:absolute;inset: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(18px,2.7vmin,34px);line-height:1.45;color:var(--tinte-leise)}

/* ------------------------------------------------------- 16 Jetzt starten -- */
#s-finale{grid-template-rows:minmax(0,1fr) auto;padding:11vmin 8vw 8vmin;row-gap:3vmin}
.finale-haupt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6vw;align-self:center}
.finale-bild{position:relative;width:min(48vw,82vmin);aspect-ratio:16/9;border-radius:3vmin;overflow:hidden;justify-self:end;background:var(--blush);box-shadow:0 3vmin 7vmin -4vmin rgba(75,31,39,.5)}
.finale-bild img{width:100%;height:100%;object-fit:cover}
.finale-glanz{position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,236,228,.55) 50%,rgba(255,255,255,0) 100%);opacity:0}
.finale-text{display:grid;gap:3vmin;justify-items:start;max-width:min(36vw,640px)}
.finale-text h2{font-size:clamp(38px,7.6vmin,118px);line-height:1}
.finale-text h2 em{font-style:italic;color:var(--koralle-tief)}
.fuss{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"linie linie linie" "sozial logo copy";align-items:center;column-gap:4vmin;row-gap:2.2vmin}
.fuss-linie{grid-area:linie;display:block;height:1px;background:var(--koralle-hell);transform-origin:50% 50%}
.fuss-logo{grid-area:logo;width:11vmin;height:11vmin;min-width:60px;min-height:60px}
.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(--koralle-tief)}
.sozial svg{display:block;width:clamp(21px,2.2vmin,25px);height:clamp(21px,2.2vmin,25px);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(--koralle);background:rgba(255,255,255,.6)}
.sozial a:focus-visible{outline:2px solid var(--koralle);outline-offset:3px}
.copyright{grid-area:copy;justify-self:end;font-size:var(--t-klein);color:var(--tinte-leise)}

/* ----------------------------------------------- Hochformat (Handy) -- */
@media (orientation:portrait){
  #s-titel{grid-template-columns:1fr;align-content:center;justify-items:center;text-align:center;row-gap:3vh;padding:max(9vh,72px) 6vw 9vh}
  .titel-bild{justify-self:center}
  .titel-paar{--pb-h:min(58vw,30vh)}
  .titeltext{justify-items:center;max-width:none;gap:1.8vh}
  .abzeichen{padding:6px 13px 6px 10px;font-size:11px}
  .titel-h1{font-size:clamp(28px,8.6vw,52px)}
  .unterzeile{font-size:clamp(16px,4.5vw,24px);max-width:28ch}
  #t-knopf{font-size:clamp(12px,3.3vw,15px);letter-spacing:.04em;padding:1.7vh 5vw;justify-self:center}
  .hinweis{display:none}

  #s-schmerz,#s-versucht,#s-vorstellen{row-gap:2.4vh;padding:max(9vh,70px) 6vw max(8vh,56px)}
  .kopf-h2{font-size:clamp(26px,7.4vw,42px)}
  .karten{width:88vw;gap:1.2vh}
  .karten-schmerz,.karten-versucht{grid-template-columns:1fr}
  .karte-z{font-size:clamp(14px,3.9vw,18px);padding:1.5vh 4vw;gap:3.2vw;border-radius:16px}
  .zeichen{width:30px;height:30px}
  .problem{width:88vw;font-size:clamp(20px,5.6vw,28px);padding:2vh 4vw;border-radius:16px}
  .salbei-gross{font-size:clamp(36px,11vw,64px);padding:0 7vw}

  #s-alleine{padding:max(10vh,74px) 7vw 9vh}
  .alleine{gap:2.6vh}
  .alleine h2{font-size:clamp(28px,8.2vw,48px)}
  .alleine-intro{font-size:clamp(15px,4.2vw,20px)}
  .alleine-weg{font-size:clamp(19px,5.4vw,26px)}
  .alleine-linie{height:7vh}

  #s-weg{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;justify-items:center;row-gap:3.4vh;padding:max(9vh,68px) 7vw max(8vh,58px)}
  .weg-text{order:2;max-width:none;width:100%;gap:1.2vh;justify-items:center;text-align:center}
  .weg-bilder{order:1;width:min(46vw,26vh);height:min(61.3vw,34.7vh);margin:0 0 2.2vh 10vw}
  .leiste{width:100%;order:-1}
  .weg-jahr{font-size:clamp(44px,12vw,72px);justify-content:center}
  .stationen{width:100%;height:clamp(150px,22vh,230px)}
  .station{justify-items:center}
  .station h3{font-size:clamp(20px,5.6vw,28px)}
  .station p{font-size:clamp(14px,3.8vw,18px);line-height:1.5}
  .weg-karte{left:-17vw;bottom:-1.5vh;width:min(20vw,12vh);height:min(25vw,15vh);border-width:3px;border-radius:12px}
  .weg-brille{left:auto;right:-14vw;top:4vh;bottom:auto;width:min(16vw,10vh);height:min(20vw,12.5vh)}
  .weg-paar{--pb-h:min(26vw,15vh);left:-24vw;bottom:-2vh;border-width:3px;border-radius:12px}

  .karten-vorstellen{width:88vw;gap:1vh}
  .karten-vorstellen .karte-z{padding:1.3vh 4vw}

  .szene-stimme{padding:max(12vh,90px) 6vw 9vh}
  .stimme{width:88vw;padding:6vh 6vw 4.4vh;gap:2.4vh;border-radius:18px}
  .stimme-zeichen{left:5vw;top:-5.4vh;font-size:clamp(80px,24vw,130px)}
  .stimme blockquote p{font-size:clamp(18px,5.3vw,26px)}
  .stimme.lang blockquote p{font-size:clamp(15px,4.2vw,20px)}

  #s-ergebnisse{--slot:92vw;--pb-h:min(56vw,36vh)}
  .ergebnis-kopf{top:max(11vh,80px)}
  .ergebnis-kopf h2{font-size:clamp(24px,7vw,40px)}
  .ergebnis-lage{top:max(25vh,calc(80px + 18vw))}
  .ergebnis h3{font-size:clamp(17px,4.9vw,24px)}
  .paar .marke{font-size:10px}
  .ergebnis-zaehler{bottom:16vh}

  #s-wochen{row-gap:3vh;padding:max(10vh,74px) 7vw max(8vh,58px)}
  .wochen-kopf{gap:1.2vh}
  .wochen-kopf h2{font-size:clamp(28px,8vw,44px)}
  .wochen-intro{font-size:clamp(14px,3.8vw,18px)}
  .wochen-lage{--oben:0px;width:86vw}
  /* Hochkant: untereinander, Spur senkrecht links (Lage und Laenge misst szenen.js an den Punkten) */
  .wochen-liste{grid-template-columns:1fr;gap:1vh;padding-top:0}
  .wochen-spur{left:17px;right:auto;width:2px;top:20px;bottom:auto;height:calc(100% - 60px)}
  .wochen-spur i{transform-origin:50% 0}
  .wo{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"nr h" "t t";align-items:baseline;column-gap:10px;row-gap:.3vh;padding:1.4vh 4vw 1.5vh 44px;border-radius:14px}
  .wo-nr{grid-area:nr}
  .wo h3{grid-area:h;font-size:clamp(18px,5vw,24px)}
  .wo-text{grid-area:t;font-size:clamp(13.5px,3.6vw,17px);line-height:1.45}
  .wo-punkt{left:18px;top:calc(1.4vh + 12px)}

  #s-angebot{grid-template-columns:1fr;align-content:center;justify-items:center;row-gap:1.6vh;padding:max(9vh,68px) 6vw max(8vh,56px)}
  .angebot-bild{width:min(42vw,17vh)}
  .angebot-text{justify-items:center;text-align:center;gap:1.2vh}
  #an-h2{font-size:clamp(24px,7vw,40px)}
  .angebot-zeile{justify-content:center}
  .haken-liste{gap:.6vh;text-align:left}
  .haken-liste li{font-size:clamp(13px,3.5vw,16px);gap:10px;padding-bottom:.6vh;line-height:1.35}
  .haken{width:20px;height:20px}
  .kasse{flex-direction:column;gap:1vh;margin-top:.4vh}
  .preis{justify-content:center}
  .preis b{font-size:clamp(40px,12vw,60px)}
  .preis-vor{font-size:clamp(17px,4.8vw,22px)}
  #an-knopf{justify-self:center;padding:1.5vh 6vw}

  .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}

  .messer{grid-template-columns:1fr;gap:3.4vh;width:84vw;padding:4vh 6vw}
  .bogenlage{width:min(38vw,22vh);height:min(20.9vw,12.1vh)}
  .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}

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

  #s-finale{padding:max(10vh,74px) 7vw max(9vh,60px);row-gap:2.4vh}
  .finale-haupt{grid-template-columns:1fr;justify-items:center;text-align:center;gap:3vh}
  .finale-bild{width:min(86vw,46vh);justify-self:center}
  .finale-text{justify-items:center;gap:2.2vh;max-width:none}
  .finale-text .knopf{justify-self:center}
  .finale-text h2{font-size:clamp(32px,9.6vw,54px)}
  .knopf{padding:1.8vh 6vw}
  .fuss{grid-template-columns:1fr;grid-template-areas:"linie" "logo" "sozial" "copy";justify-items:center;row-gap:1.4vh}
  .fuss-linie{justify-self:stretch}
  .fuss-logo{width:min(18vw,9vh);height:min(18vw,9vh)}
  .sozial{justify-content:center;gap:2vw}
  .copyright{justify-self:center;font-size:12px}
}
/* Kurze Handys (z. B. 360 x 640, 375 x 667) */
@media (orientation:portrait) and (max-height:700px){
  .karte-z{font-size:13.5px;padding:1.2vh 3.6vw;line-height:1.35}
  .zeichen{width:26px;height:26px}
  .karten-vorstellen .karte-z{padding:1vh 3.6vw}
  .angebot-bild{display:none}
  .haken-liste li{font-size:12.5px;line-height:1.32}
  #an-h2{font-size:clamp(22px,6.4vw,30px)}
  .preis b{font-size:40px}
  .wochen-intro{font-size:13px;line-height:1.45}
  .wo-text{font-size:12.5px;line-height:1.4}
  .wo h3{font-size:17px}
  .wo{padding:1.1vh 3.6vw 1.2vh 40px}
  .wo-punkt{left:16px;top:calc(1.1vh + 11px)}
  .stimme.lang blockquote p{font-size:14.5px;line-height:1.32}
  .finale-bild{width:min(86vw,38vh)}
  .weg-jahr{font-size:44px}
  .station p{font-size:13.5px}
}