/* FemiPower · gemeinsame Gestaltung von Startseite und /start */
/* ---------------------------------------------------------------
   FEMIPOWER · Landingpage
   Chris am 05.09.: "Die Brand ist sehr hell, sehr weit, sehr frei.
   Pastellfarben, ein Grün, so etwas Natürliches, und ein Gelb."
   Machart von Natural High: Variablen unter :root, viel Luft,
   sanftes Auftauchen beim Scrollen. Farbwelt ist eine eigene.
   --------------------------------------------------------------- */
:root{
  --bg:#FDFCF9;
  --bg-warm:#F7F4EC;
  --fg:#2B302B;
  --fg-dim:#6E756D;
  --line:#E6E2D8;
  --gruen:#A9C4A4;
  --gruen-tief:#5E7D5C;
  --gruen-hauch:#EDF3EA;
  --gelb:#F0D98C;
  --gelb-hauch:#FBF5E2;
  --blau-hauch:#E7F0F4;
  --rand:clamp(20px, 6vw, 48px);   /* einheitlicher Seitenrand, ueberall gleich */
  --breite:760px;
  --breit:1140px;
  --serif:'Cormorant Garamond',Georgia,'Iowan Old Style',serif;
  /* ⭐ EINE ZAHL FUER ALLE TITEL. Siehe recht.css: hier steht sie noch einmal,
     weil die beiden Blaetter nie zusammen geladen werden. Aendert sich die
     eine, aendert sich die andere mit. */
  --zeile-eng:1.35;   /* kleine Begleittexte unter Titeln */
  /* ⭐ DIE SCHRIFTLEITER. Chris am 10.09.: "nicht tausend unterschiedliche
     Textgroessen, sondern das schoen haben." Auf dem Handy hatte die Seite
     fuenfzehn verschiedene Groessen, jede einzeln irgendwo hingeschrieben.
     Jetzt gibt es fuenf Rollen, und jede waechst vom Handy zum Rechner mit.
     Wer eine Groesse aendern will, aendert sie hier - und zwar ueberall. */
  --t-unter:clamp(19px,2.2vw,24px);      /* Zwischentitel, Wochen-Kopf */
  --t-betont:clamp(17px,2.1vw,21px);     /* der eine Satz, der traegt */
  --t-text:clamp(15.5px,1.4vw,18px);     /* Fliesstext in Listen und Kacheln */
  --t-klein:clamp(13px,1vw,14px);        /* Beschriftungen, Quellen */
  --t-winzig:clamp(10px,.9vw,12px);      /* Kleinstbeschriftung */
  --zeile-titel:1.12;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  /* Die Lesegroesse kommt aus der Leiter: 15,5 auf dem Handy, 18 auf dem
     Rechner. Damit lesen Absaetze, Listen und Kacheln in derselben Groesse. */
  font-family:var(--sans);font-size:var(--t-text);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,legend{font-family:var(--serif);font-weight:500;line-height:var(--zeile-titel,1.2);letter-spacing:0;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%;display:block}

section{padding:clamp(72px,11vw,150px) 0}
.mitte{width:100%;max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand)}
.weit{width:100%;max-width:calc(var(--breit) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand)}
/* Ein .mitte innerhalb von .weit bringt seinen eigenen Rand nicht mit. */
.weit .mitte{padding:0;max-width:var(--breite)}
.warm{background:var(--bg-warm)}
.gruenraum{background:var(--gruen-hauch)}

/* Auftauchen beim Scrollen */
.auf{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.auf.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.auf{opacity:1;transform:none;transition:none}}

/* ---- Hero ---- */
.hero{padding:74px 0 clamp(60px,6vw,76px);text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% 0 auto 0;height:90vh;z-index:-1;
  /* Zwei Schleier: das Gelb liegt warm ueber der Mitte, das Blau kommt
     von rechts dazu wie Licht vom Meer. */
  background:
    radial-gradient(58% 46% at 40% 28%,var(--gelb-hauch) 0%,transparent 72%),
    radial-gradient(46% 42% at 94% 36%,var(--gruen-hauch) 0%,transparent 74%);
}
.logo{width:clamp(52px,7vw,74px);height:auto;margin:0 auto clamp(18px,2.4vw,26px);display:block}
.marke{font-family:var(--serif);font-size:15px;letter-spacing:.34em;text-transform:uppercase;color:var(--gruen-tief);margin-bottom:clamp(32px,3.2vw,34px)}
/* Die Haltung steht ganz oben, leise. Sie muss nicht laut sein, sie muss da sein. */
/* Die Haltung steht als Bruecke zwischen dem Versprechen und dem Gesicht:
   sie hat gelesen, wofuer sie hier ist, und erfaehrt jetzt, wer dahintersteht. */
.claim{font-family:var(--serif);font-size:clamp(17px,2.2vw,21px);line-height:1.4;color:var(--gruen-tief);text-align:center;margin:0 auto clamp(26px,4vw,38px);max-width:100%;letter-spacing:.02em}
h1{font-size:clamp(44px,5.4vw,50px)}
.unter{font-size:clamp(18px,1.9vw,20px);color:var(--fg-dim);margin:26px auto 0;max-width:44ch}
.klein{font-size:var(--t-klein);color:var(--fg-dim);letter-spacing:.02em}

/* ---- Knopf ---- */
.knopf{
  display:inline-block;font-family:var(--sans);font-size:17px;font-weight:500;
  padding:18px 42px;border-radius:999px;text-decoration:none;
  background:var(--gruen-tief);color:#fff;border:1px solid var(--gruen-tief);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.knopf:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(94,125,92,.22)}
.knopfreihe{margin-top:clamp(34px,5vw,48px)}
.knopfreihe .klein{margin-top:16px}

/* ---- Zähler ---- */
/* Der Zaehler laeuft als eine Zeile, auch auf dem Handy. Getrennt wird mit
   einem Haarstrich, nicht mit Kaesten: die Zeit ist eine Bewegung, keine
   vier Schachteln. */
.zaehler{display:flex;justify-content:center;align-items:stretch;margin-top:clamp(40px,6vw,60px)}
.zelle{padding:0 clamp(13px,4.2vw,34px);border-left:1px solid var(--line);text-align:center}
.zelle:first-child{border-left:0}
.zelle b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(34px,7vw,52px);line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}
.zelle span{display:block;margin-top:7px;font-size:clamp(9px,2.4vw,11px);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim)}

/* ---- Bilder ---- */
.breitbild{width:100%;height:auto;border-radius:22px;display:block}
.zeichnung{display:block;margin:0 auto;height:auto;width:100%}
.zeichnung.halb{max-width:118px}
.zeichnung.offen{max-width:150px}
.zeichnung.puste{width:clamp(170px,22vw,260px);flex:none;color:var(--gruen-tief);margin:0}
.wegkopf{display:flex;align-items:flex-start;justify-content:flex-start;gap:clamp(26px,5vw,64px)}
.wegkopf .mitte{flex:0 1 auto;width:auto;margin:0}
.zeichnung.kokon{width:clamp(96px,10vw,130px);flex:none;margin:0}
.zeichnung.falter{width:clamp(170px,17vw,220px);margin:clamp(44px,6vw,68px) auto 0}
@media(max-width:600px){
  .wegkopf{flex-direction:column-reverse;align-items:flex-start;gap:clamp(18px,5vw,28px)}
  /* Chris am 10.09.: "das traegt zu sehr auf". Der Kokon ist die Begleitung
     zur Ueberschrift, nicht ihr Konkurrent. */
  .zeichnung.kokon{width:min(104px,27vw)}
}
.methodenkopf{display:flex;align-items:flex-end;justify-content:flex-start;gap:clamp(26px,5vw,64px)}
.methodenkopf .mitte{flex:0 1 auto;width:auto;margin:0}
@media(max-width:600px){
  /* Auf dem Handy steht die Pusteblume gross und links ueber den Inhalten */
  .methodenkopf{flex-direction:column-reverse;align-items:flex-start;gap:clamp(18px,5vw,28px)}
  .zeichnung.puste{width:min(240px,64vw);margin-left:-14px}
  .methodenkopf h2{white-space:nowrap;font-size:min(32px,8.4vw)}
}

/* ---- Bildplatz ---- */
.bildplatz{
  border:1px dashed var(--gruen);border-radius:20px;background:var(--gruen-hauch);
  aspect-ratio:16/10;display:grid;place-items:center;text-align:center;
  color:var(--gruen-tief);font-size:14px;letter-spacing:.06em;padding:20px;
}
.bildplatz.hoch{aspect-ratio:4/5}
/* ---- Video ---- */
.videorahmen{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--gruen-hauch)}
@media(min-width:820px){.videorahmen{max-width:820px;margin:0 auto}}
.videorahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---- Zeilen ---- */
h2{font-size:clamp(34px,5.2vw,50px);margin-bottom:.6em}
/* ⭐ EINE ZEILE HEISST: DIE GROESSE RICHTET SICH NACH DER BREITE.
   Vorher stand die Regel nur im Handy-Block und mit 6.2vw - zwischen 480 und
   560 px lief die Zeile rechts aus dem Bild. Wer nowrap sagt, muss die Schrift
   mitschrumpfen lassen, sonst schneidet der Rand das Wort ab.
   4.2vw ist an der laengsten Zeile gemessen, nicht geschaetzt. */
/* Erst ab 640 px passt sie ueberhaupt in eine Zeile. Darunter waere sie
   16 px klein und stuende neben lauter 27-px-Titeln wie ein Fremdkoerper -
   dort bricht sie um wie jede andere Ueberschrift auch. */
@media(min-width:640px){h2.einzeilig{white-space:nowrap;font-size:clamp(24px,4.2vw,34px)}}
/* Nur auf dem grossen Schirm etwas zurueckgenommen, auf dem Handy gilt die
   Regel weiter unten. */
@media(min-width:561px){h2.kleiner{font-size:clamp(30px,4.4vw,42px)}}
/* Auf dem Handy tragen die Ueberschriften weniger Groesse und dafuer mehr
   Zeile. Sonst brechen drei Woerter ueber drei Zeilen. */
@media(max-width:560px){
  h1{font-size:36px;line-height:1.1}
  h2{font-size:27px;line-height:1.18}
  /* Die Zeile darf auf dem Handy etwas ueber den Textrand hinaus, damit sie
     in zwei statt drei Zeilen laeuft. */
  .unter{font-size:17px;margin:20px -10px 0;max-width:none}
  /* Auf 375 und breiter stehen die beiden Saetze in genau zwei Zeilen. Auf
     einem 320er (iPhone SE) rutscht der zweite in eine dritte - deshalb dort
     etwas kleiner und etwas weiter, statt drei Zeilen in Kauf zu nehmen. */
  /* Auf dem Handy bleibt der Hero, wie er war: dort ist der Abstand nach
     oben nicht Luft, sondern der Platz unter der Browserleiste. */
  .hero{padding-top:90px}
  .marke{font-size:13px;letter-spacing:.3em;margin-bottom:40px}
  .claim{font-size:var(--t-klein)}
  /* Die gesetzten Umbrueche sind fuer den grossen Schirm gedacht. Auf dem
     Handy laesst man den Text lieber selbst brechen, sonst stehen drei
     Woerter auf drei Zeilen. */
  /* ⭐ Gesetzte Umbrueche sind fuer den grossen Schirm gedacht - auf dem
     Handy zerreissen sie den Satz. Galt bisher nur fuer Ueberschriften,
     jetzt fuer jeden Fliesstext. Wer einen Umbruch NUR auf dem Handy will,
     nimmt br.nurhandy. */
  h2 br, p br:not(.nurhandy), li br:not(.nurhandy), b br:not(.nurhandy){display:none}
  h2.behalten br{display:inline}
  /* Umbrueche, die es nur auf dem Handy gibt */
  h2 br.nurhandy, p br.nurhandy, b br.nurhandy, .knopf br.nurhandy{display:inline}
  /* ⭐ 13.09., Chris: "achtung bitte immer 1 zeile". Der Knopf traegt jetzt
     einen ganzen Satz statt zweier Woerter. Auf dem Handy bricht der sonst
     um, und ein zweizeiliger Knopf sieht aus wie ein Absatz mit Hintergrund.
     Kleinere Schrift und weniger Luft an den Seiten, damit er eine Zeile
     bleibt - und white-space:nowrap als Riegel, falls die Zeile spaeter noch
     einmal waechst. */
  .knopf{font-size:15px;padding:16px 26px;white-space:nowrap}
  /* Der Kernsatz darf die volle Spaltenbreite nutzen und wird dafuer ruhiger. */
  p.kernsatz{max-width:none;line-height:1.5}
}
.kernsatz{max-width:40ch;margin-left:auto;margin-right:auto}
.nurhandy{display:none}
.vor{font-size:var(--t-klein);letter-spacing:.22em;text-transform:uppercase;color:var(--gruen-tief);margin-bottom:20px}
.gross{font-size:var(--t-betont);line-height:1.55}

/* ---- Erkennst du dich ---- */
.spiegel{list-style:none;padding:0;margin:0}
.spiegel li{padding:15px 0 15px 30px;border-bottom:1px solid var(--line);position:relative;font-size:var(--t-text);line-height:1.55}
.spiegel li:last-child{border-bottom:0}
.spiegel li::before{content:"";position:absolute;left:4px;top:27px;width:9px;height:9px;border-radius:50%;background:var(--gelb)}
/* Der Spiegel oben liest sich nebenbei, die Fragen unten fordern eine Antwort. */
.spiegel.fragen li{font-size:var(--t-betont);line-height:1.5;padding:19px 0 19px 32px}
.spiegel.gruen li::before{background:var(--gruen)}
.spiegel.fragen li::before{top:31px;background:var(--gruen)}

/* ---- Phasen ---- */
.phasen{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:50px}
.phase{padding:34px 28px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.phase .nr{font-family:var(--serif);font-size:var(--t-klein);color:var(--gruen-tief);letter-spacing:.2em}
.phase h3{font-size:var(--t-unter);margin:12px 0 10px;letter-spacing:.04em}
.phase p{font-size:var(--t-text);color:var(--fg-dim);margin:0}
.phase.leuchtet{background:linear-gradient(165deg,var(--gruen-hauch),#fff 72%);border-color:var(--gruen)}

/* ---- Wochen als Kacheln: 2 auf dem Handy, 3 auf dem Rechner ---- */
.wochen{display:grid;gap:12px;grid-template-columns:1fr;margin-top:clamp(36px,5vw,50px)}
@media(min-width:600px){.wochen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.wochen{grid-template-columns:repeat(3,1fr);gap:16px}}
.woche{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 20px 28px;transition:border-color .3s ease,transform .3s ease;
}
@media(min-width:900px){.woche{padding:28px 26px 26px}}
.woche:hover{border-color:var(--gruen);transform:translateY(-2px)}
.woche.leuchtet{background:linear-gradient(165deg,var(--gruen-hauch),#fff 72%);border-color:var(--gruen)}
.woche.leuchtet .zeichen{background:#fff}
.woche{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.woche .kopf{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:14px}
.woche .w{font-family:var(--serif);font-size:var(--t-unter);color:var(--gruen-tief);letter-spacing:.06em;display:block;line-height:1.3}
.woche .w i{display:block;font-style:normal;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--gruen);margin-top:4px;font-size:var(--t-winzig)}
.woche .zeichen{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:var(--gruen-hauch);color:var(--gruen-tief);transition:background .3s ease;
}
.woche:hover .zeichen{background:var(--gelb-hauch)}
.woche .zeichen svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.woche b{font-family:var(--serif);font-weight:500;font-size:var(--t-betont);line-height:1.3;display:block;margin-bottom:0}
.woche span{color:var(--fg-dim);font-size:15px;line-height:1.5;display:block}
/* Auf dem Rechner tragen die Kacheltitel mehr Groesse. Steht bewusst nach der
   Grundregel, sonst gewinnt deren clamp. */
@media(min-width:900px){.woche b{line-height:1.3;margin-bottom:0}}
@media(max-width:560px){
  /* Eine Kachel pro Zeile: der Platz gehoert dem Inhalt, nicht dem Rand.
     Zeichen, Woche und Titel tragen, das Polster wird knapper. */
  .wochen{gap:11px}
  .woche{padding:20px 18px 22px;border-radius:16px}
  .woche .kopf{gap:9px;margin-bottom:9px}
  .woche .zeichen{width:52px;height:52px;flex:0 0 52px}
  .woche .zeichen svg{width:26px;height:26px}
  .woche .w{letter-spacing:.04em}
  .woche .w i{margin-top:3px}
  .woche b{line-height:1.35;margin-bottom:0}
}

/* ---- Was dich traegt: Karten ---- */
.traegt{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:clamp(40px,6vw,58px)}
.karte{
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px 28px 30px;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.karte:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(94,125,92,.12);border-color:var(--gruen)}
.karte .ikon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gruen-hauch);color:var(--gruen-tief);margin-bottom:20px}
.karte .ikon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.karte b{display:block;font-family:var(--serif);font-weight:500;font-size:var(--t-unter);line-height:1.2;margin-bottom:9px}
.karte span{color:var(--fg-dim);font-size:var(--t-text);line-height:1.55}
.karte.leuchtet{background:linear-gradient(160deg,var(--gelb-hauch),#fff 70%);border-color:var(--gelb)}
.karte.leuchtet .ikon{background:#fff}
/* Bleibt in der letzten Reihe eine Karte allein, nimmt sie die ganze Breite.
   Sonst steht sie verloren links. */
@media(min-width:940px){
  .traegt > .karte:last-child:nth-child(3n+1){grid-column:1 / -1;display:flex;gap:26px;align-items:center}
  .traegt > .karte:last-child:nth-child(3n+1) .ikon{margin-bottom:0;flex:0 0 44px}
}

/* ---- Chris ---- */
/* Rundes Bild, schmaler als der Text: das Foto traegt den Beweis, der Text
   die Geschichte. Auf dem Handy steht es mittig darueber. */
.chris{display:grid;gap:clamp(30px,5vw,64px);align-items:center;justify-items:center}
@media(min-width:820px){.chris{grid-template-columns:minmax(240px,380px) 1fr;justify-items:start}}
.portrait{
  width:min(72vw,380px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  box-shadow:0 18px 50px rgba(94,125,92,.16);
}

/* ---- Woman · Man · Ma ----
   Beim Durchscrollen fallen erst WO, dann N weg. Das Wort traegt die
   Aussage selbst, deshalb steht darunter nur ein Satz. */
.wortlauf{height:300vh;padding:0;position:relative}
.wortbuehne{position:sticky;top:0;height:100vh;display:grid;place-content:center;text-align:center}
.wortwort{font-family:var(--serif);font-weight:500;font-size:clamp(58px,15vw,180px);line-height:1;letter-spacing:.06em;margin:0;white-space:nowrap;color:var(--fg)}
.wortwort span{display:inline-block;overflow:hidden;vertical-align:top;transition:opacity .7s ease,max-width .9s cubic-bezier(.4,0,.2,1);max-width:4em;opacity:1}
/* ⚠️ Stufe 3 muss hier mitstehen. Sonst treffen die Regeln beim Uebergang
   nicht mehr zu, WO und N wachsen wieder heran - und das Wort formt sich
   sichtbar zu "WOMAN" zurueck, waehrend es ausblendet. Man sieht es erst in
   Bewegung, und dann sofort. */
.wortlauf[data-stufe="1"] .t1,
.wortlauf[data-stufe="2"] .t1,
.wortlauf[data-stufe="3"] .t1,
.wortlauf[data-stufe="2"] .t3,
.wortlauf[data-stufe="3"] .t3{max-width:0;opacity:0}
.wortsatz{margin:clamp(26px,4vw,40px) 0 0;font-size:clamp(16px,2vw,19px);color:var(--fg-dim);opacity:0;transition:opacity .8s ease .2s}
/* Der Satz gehoert zu MA und geht mit ihm. Bei Stufe 3 steht nur noch das
   Zeichen da - allein. */
.wortlauf[data-stufe="2"] .wortsatz{opacity:1}

/* ---- Die vierte Stufe: was bleibt, wenn das Wort geht ----
   MA loest sich auf, und das Zeichen steht da. Beide liegen uebereinander im
   selben Raster, damit nichts springt: das Wort geht, das Zeichen kommt, die
   Zeile darunter bleibt an ihrem Platz.

   ⚠️ Das Zeichen ist genau so hoch wie das Wort. Waere es kleiner, ruckte
   "Alles beginnt bei ihr." beim Wechsel nach oben - und der ruhigste Moment
   der Seite haette einen Sprung. */
.wortmitte{display:grid;place-items:center}
.wortmitte > *{grid-area:1/1}
.wortzeichen{display:flex;flex-direction:column;align-items:center;
  gap:clamp(22px,3vw,36px);color:var(--gruen-tief);
  opacity:0;transform:scale(.88);
  transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,.61,.36,1)}
/* Dieselbe Bilddatei wie im Hero, nur groesser. */
.wortzeichen img{width:clamp(64px,9vw,104px);height:auto;display:block}

/* ⭐ DIESELBEN VERHAELTNISSE WIE IM HERO, nur groesser.
   Dort ist das Zeichen 74 px, die Wortmarke 15 px, der Abstand 26 px - also
   5 : 1 und 2,8 : 1. Hier: 104 px, 21 px, 36 px. Wer beides untereinander
   sieht, soll dasselbe Zeichen erkennen und nicht zwei Varianten. */
.wortzeichen span{font-family:var(--serif);font-size:clamp(14px,1.8vw,21px);
  letter-spacing:.34em;text-transform:uppercase;line-height:1;
  padding-left:.34em}
.wortlauf[data-stufe="3"] .wortwort{opacity:0;transition:opacity .6s ease}
/* ⚠️ Nicht ganz deckend. Das Zeichen steht allein auf einem grossen leeren
   Feld - bei voller Deckung wirkt der Haarstrich dort haerter als im Hero,
   wo Text daneben steht. Bei .82 legt es sich weich hinein, ohne zu
   verschwinden. */
.wortlauf[data-stufe="3"] .wortzeichen{opacity:.82;transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .wortwort span,.wortzeichen{transition:none}
}

/* ---- Zitat ---- */
blockquote{margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
blockquote p{font-family:var(--serif);font-size:var(--t-betont);line-height:1.5;margin-bottom:14px}
blockquote cite{font-style:normal;font-size:var(--t-klein);letter-spacing:.16em;text-transform:uppercase;color:var(--gruen-tief)}

/* ---- Deine Vorteile ---- */
.vorteile{display:grid;gap:6px 52px;grid-template-columns:1fr;margin-top:clamp(40px,5vw,58px);list-style:none;padding:0}
@media(min-width:820px){.vorteile{grid-template-columns:1fr 1fr}}
.vorteile li{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--line)}
.vorteile li:last-child{border-bottom:0}
@media(min-width:820px){.vorteile li:nth-last-child(2){border-bottom:0}}
.haken{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--gruen-hauch);color:var(--gruen-tief);display:grid;place-items:center;margin-top:3px}
.haken svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vorteile b{display:block;font-family:var(--serif);font-weight:500;font-size:var(--t-betont);line-height:var(--zeile-titel,1.2);margin-bottom:6px}
.vorteile span{color:var(--fg-dim);font-size:var(--t-text);line-height:1.55}

/* ---- Die Methoden ---- */
.methoden{list-style:none;padding:0;margin:clamp(38px,5vw,52px) 0 0;display:grid;gap:0 48px;grid-template-columns:1fr}
@media(min-width:820px){.methoden{grid-template-columns:1fr 1fr}}
.methoden li{padding:16px 0 16px 22px;border-bottom:1px solid var(--line);position:relative}
.methoden li::before{content:"";position:absolute;left:0;top:26px;width:7px;height:7px;border-radius:50%;background:var(--gruen)}
.methoden li:last-child{border-bottom:0}
@media(min-width:820px){.methoden li:nth-last-child(2){border-bottom:0}}
.methoden b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.6vw,25px);line-height:1.25;margin-bottom:5px}
.methoden span{color:var(--fg-dim);font-size:15px;line-height:1.55}

/* ---- Was es ist ---- */
.prinzip{text-align:left;max-width:52ch;margin:26px auto 0}
.prinzip p:last-child{margin-bottom:0}

/* ---- Stimmen ---- */
.stimmen{position:relative;text-align:center;max-width:960px;margin:0 auto}
@media(max-width:600px){.stimme blockquote{font-size:clamp(18px,4.6vw,22px);line-height:1.5}}
.stimmenbuehne{position:relative;display:grid}
.stimme{grid-area:1/1;margin:0;opacity:0;transform:translateY(14px);
  transition:opacity 1.4s cubic-bezier(.22,.61,.36,1),transform 1.4s cubic-bezier(.22,.61,.36,1);
  pointer-events:none}
.stimme.da{opacity:1;transform:none;pointer-events:auto}
/* Chris am 10.09.: die Rezensionen linksbuendig. Ein zentrierter Absatz
   ueber vier Zeilen zwingt das Auge bei jeder Zeile zum Suchen. */
.stimme blockquote{margin:0 auto;text-align:left;font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,2.9vw,34px);line-height:1.44;color:var(--fg);max-width:min(900px,100%)}
.stimme blockquote::before{content:"";display:block;width:26px;height:1px;background:var(--gruen);margin:0 auto 26px}
.stimme figcaption{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.stimme figcaption b{font-family:var(--serif);font-weight:500;font-size:19px;line-height:var(--zeile-titel,1.2);color:var(--gruen-tief)}
.stimme figcaption span{font-size:var(--t-klein);color:var(--fg-dim);letter-spacing:.04em}
.steuerung{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,26px);
  margin-top:clamp(30px,4vw,42px)}
.punkte{display:flex;justify-content:center;gap:10px}
.pfeil{width:42px;height:42px;flex:none;padding:0;border:1px solid var(--line);border-radius:50%;
  background:#fff;color:var(--gruen-tief);cursor:pointer;display:grid;place-items:center;
  transition:border-color .35s ease,background .35s ease,transform .35s ease,opacity .35s ease}
.pfeil svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.pfeil:hover{border-color:var(--gruen);background:var(--gruen-hauch);transform:translateY(-1px)}
.pfeil:active{transform:translateY(0) scale(.94)}
.punkte .punkt{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--gruen);
  opacity:.32;cursor:pointer;transition:opacity .5s ease,transform .5s ease}
.punkte .punkt.an{opacity:1;transform:scale(1.5)}
@media (prefers-reduced-motion:reduce){.stimme{transition:opacity .3s linear}}

/* ---- Warteliste, wenn die zehn Plaetze weg sind ---- */
.versteckt{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.warteform{display:grid;gap:12px;max-width:400px;margin:clamp(30px,4vw,42px) auto 0}
.warteform input{font:inherit;font-size:16px;color:var(--fg);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:15px 24px;text-align:center;transition:border-color .3s ease,box-shadow .3s ease}
.warteform input:focus{outline:0;border-color:var(--gruen);box-shadow:0 0 0 3px var(--gruen-hauch)}
.warteform .knopf{border:0;cursor:pointer;width:100%;margin-top:4px}
.warteform .knopf[disabled]{opacity:.5;cursor:default}
.wartehinweis{margin-top:6px;font-size:13px}
.wartefertig{max-width:400px;margin:clamp(30px,4vw,42px) auto 0;border:1px solid var(--gruen);
  background:var(--gruen-hauch);border-radius:22px;padding:clamp(26px,4vw,38px)}
.wartefertig p:last-child{margin-bottom:0}
body.ausverkauft [data-nur-frei]{display:none!important}

/* ---- Garantie ---- */
.garantie{text-align:center;border:1px solid var(--gelb);border-radius:26px;padding:clamp(32px,4.4vw,46px);background:linear-gradient(140deg,var(--gelb-hauch) 0%,#fff 58%)}
.garantie .siegel{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.4vw,40px);
  color:var(--gruen-tief);line-height:1;letter-spacing:.02em;white-space:nowrap}
.garantie h2{font-size:clamp(26px,3.6vw,34px);line-height:1.15;margin:14px 0 .5em}
.garantie p{max-width:38ch;margin-left:auto;margin-right:auto}

/* ---- Preis ---- */
.preisfeld{text-align:center}
.alt{font-size:22px;color:var(--fg-dim);text-decoration:line-through;text-decoration-thickness:1px}
.neu{font-family:var(--serif);font-weight:500;font-size:clamp(58px,10vw,96px);line-height:1;margin:8px 0 14px}
.plaetze{display:inline-block;margin-top:8px;padding:9px 20px;border-radius:999px;background:var(--gelb-hauch);border:1px solid var(--gelb);font-size:15px;line-height:1.5}
.umbruch{display:none}
.nurpc{display:inline}
@media(max-width:560px){.umbruch{display:inline}.trenner{display:none}.nurpc{display:none}}

/* ---- Fragen ---- */
details{border-bottom:1px solid var(--line);padding:22px 0}
details summary{cursor:pointer;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:20px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--gruen-tief);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:16px;color:var(--fg-dim)}

/* ---- Der direkte Draht ---- */
.draht{text-align:center}
.draht > p:first-child{font-size:17px;color:var(--fg-dim);margin-bottom:18px}
.wa{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:17px;color:var(--gruen-tief);border:1px solid var(--gruen);
  padding:13px 26px;border-radius:999px;background:#fff;
  transition:background .3s ease,transform .3s ease;
}
.wa:hover{background:var(--gruen-hauch);transform:translateY(-2px)}
.wa svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.draht .klein{margin-top:14px}

/* ---- Fuß ---- */
.logo-fuss{width:clamp(52px,6.5vw,68px);height:auto;margin:0 auto 18px;display:block;opacity:.8}
footer{padding:60px 0 70px;border-top:1px solid var(--line);text-align:center;color:var(--fg-dim);font-size:var(--t-klein)}
footer a{margin:0 10px;color:var(--fg-dim)}

/* ---- Aufklappen: die ersten Zeilen tragen, der Rest folgt auf Wunsch ---- */
.mehrbox{position:relative;overflow:hidden;transition:max-height .9s cubic-bezier(.22,.61,.36,1)}
.mehrbox::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--schleier,86px);pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--schleierfarbe,var(--bg-warm)) 88%);
  opacity:1;transition:opacity .6s ease}
.mehrbox.offen::after{opacity:0}
.mehr{position:relative;z-index:2;display:block;margin:-10px auto 34px;font:inherit;font-size:16px;
  color:var(--gruen-tief);background:none;border:0;cursor:pointer;padding:4px 20px 6px;letter-spacing:.02em;
  border-bottom:1px solid transparent;transition:border-color .3s ease,transform .3s ease}
.mehr:hover{border-bottom-color:var(--gruen);transform:translateY(1px)}
.mehr span{display:inline-block;margin-left:6px;transition:transform .4s ease}

/* ---- Das Bild zum Schluss ----
   Ein Band ueber die volle Breite, hoechstens 560 px hoch. Chris am 09.09.:
   "dass das dann schoen gecovert reinpasst, aber nicht die quetscht" und
   spaeter: "gerne ueber dem footer das bild sektion mehr als 300px".

   ⚠️ WAAGERECHT WIRD HIER NIE BESCHNITTEN. Das Bild ist 3:2, das Band viel
   breiter als hoch - beim Fuellen laeuft es also oben und unten ueber, nicht
   links und rechts. Ein object-position auf der X-Achse taete gar nichts.
   Was zaehlt, ist die Y-Achse.

   Und die entscheidet, ob sie im Bild ist: bei 50 % sieht man ihren Ruecken
   ohne Kopf, bei 28 % ist der Kopf oben angeschnitten. Bei 20 % steht sie
   ganz drin, mit dem Licht im Haar und dem Horizont dahinter. */
.bildband{width:100%;height:clamp(260px,38vw,560px);overflow:hidden;line-height:0}
.bildband img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}

/* ---- Das Bild in "Kurz gesagt" ----
   Chris am 09.09.: "gehoert ja zur sektion quasi Kurz gesagt". Es steht
   deshalb IM Abschnitt, ueber der Zeile, und nicht zwischen den Abschnitten.
   Den Abstand nach oben bringt das Polster der Sektion selbst mit.
   Auf PC 400 px breit, auf schmalen Schirmen waechst es mit. */
.bildmitte{max-width:400px;margin:0 auto clamp(26px,3.4vw,40px)}
.bildmitte img{width:100%;height:auto;display:block;border-radius:20px}


/* Sehr schmale Telefone (iPhone SE, 320 px).
   ⚠️ MUSS NACH der 560er-Regel stehen: beide sind gleich stark, also gewinnt
   die spaetere. Weiter oben eingefuegt haette sie gar nichts getan. */
@media(max-width:360px){
  /* Nachgemessen statt geschaetzt: bei 15 px braucht die zweite Zeile 309 px
     und hat 308 - ein Pixel, und sie bricht um. Bei 14 px sind es 292, also
     16 px Luft. Das traegt auch, wenn ein Telefon anders rendert. */
  .unter{font-size:14px;margin-left:-14px;margin-right:-14px}
}

/* ---- Die Einwilligung ----
   Unten, schmal, ruhig. Kein Kasten ueber der halben Seite: die Seite
   dahinter soll sichtbar bleiben, sonst fuehlt sich der erste Moment an wie
   eine Schranke.

   ⚠️ Beide Knoepfe sind gleich gross und gleich erreichbar. Der eine gefuellt,
   der andere umrandet - das ist Gewicht, keine Huerde. Ein "Ablehnen" als
   graue Kleinschrift waere keine freie Entscheidung, und genau die verlangt
   die Verordnung. */
/* ⭐ Auf PC unten rechts in der Ecke, nicht mittig. Mittig steht er wie ein
   Riegel vor der Seite; in der Ecke steht er daneben und laesst den Blick
   auf dem Hero. Auf dem Handy gibt es keine Ecke, dort bleibt er unten
   ueber die Breite. */
.einwilligung{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.6vw,24px);z-index:80;
  width:min(400px,calc(100vw - 24px));
  transform:translateY(16px);opacity:0;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:22px;
  padding:clamp(18px,2.6vw,22px) clamp(20px,3vw,26px);
  box-shadow:0 24px 70px rgba(43,48,43,.16);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.einwilligung.da{opacity:1;transform:none}
.einwilligung p{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--fg-dim)}
.einwilligung a{color:var(--gruen-tief);text-underline-offset:3px}
.einwilligung-knoepfe{display:flex;gap:9px}
.einwilligung button{
  flex:1;font:inherit;font-size:14.5px;cursor:pointer;
  padding:12px 18px;border-radius:999px;white-space:nowrap;
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;
}
.einwilligung [data-ja]{background:var(--gruen-tief);color:#fff;border:1px solid var(--gruen-tief)}
.einwilligung [data-ja]:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(94,125,92,.26)}
.einwilligung [data-nein]{background:transparent;color:var(--fg-dim);border:1px solid var(--line)}
.einwilligung [data-nein]:hover{border-color:var(--gruen);color:var(--gruen-tief)}
@media(max-width:560px){
  .einwilligung{left:10px;right:10px;bottom:10px;width:auto;border-radius:20px}
  .einwilligung p{font-size:13px;margin-bottom:14px}
  .einwilligung button{font-size:14px;padding:12px 10px}
}



/* ---- Die Rechtszeile im Fuss ----
   ⭐ 13.09., Chris: "Impressum · Datenschutz opac 20%" und "kleiner".
   Sie muss da sein und auffindbar bleiben, aber sie ist nicht das, wofuer
   jemand hier ist. Deshalb klein und zurueckgenommen, und beim Ueberfahren
   kommt sie voll zurueck, damit man sie sicher trifft. */
/* Die Wortmarke im Fuss fuehrt auf /start, sieht aber aus wie vorher:
   kein Unterstrich, keine Linkfarbe. Sie soll klickbar sein, ohne sich als
   Link aufzudraengen. */
footer .heim{text-decoration:none;color:inherit;margin:0}
footer .heim:hover{text-decoration:underline}
.rechtszeile{font-size:var(--t-winzig,11px);opacity:.4;transition:opacity .3s ease}
.rechtszeile:hover,.rechtszeile:focus-within{opacity:1}


/* ---- Voll ----
   ⭐ 17.09.2026: steht dort, wo vorher Knopf und Zaehler standen. Ruhig,
   kein Kasten, keine Farbflaeche - eine Zeile, die sagt was ist. */
.voll{font-family:var(--serif);font-size:var(--t-betont,20px);color:var(--gruen-tief);margin:clamp(30px,5vw,44px) 0 0;letter-spacing:.01em}
.vollzusatz{font-size:var(--t-klein,14px);color:var(--fg-dim);line-height:var(--zeile-eng,1.35);margin:10px auto 0;max-width:40ch}