/** Shopify CDN: Minification failed
Line 267:32 Unexpected "*"
Line 288:92 Unterminated string token
Line 294:34 Unexpected "640er-Block"
Line 296:90 Unterminated string token
Line 297:81 Unterminated string token
Line 298:92 Unterminated string token
**/
:root{
/* Marke & Text */
--brand:#4b3334; --brand-hover:#180001; --muted:#817071; --coffee-400:#726766;
--gold:#c9b389; --gold-light:#ebd8b2; --star:#c9b389;
/* Flächen */
--cream:#fdfbf7; --cream-2:#faf7f0; --cream-3:#f9f3e9; --cream-4:#e9e0d1; --paper:#fffefd;
/* Akzente */
--orange:#BE6330; --orange-dark:#AB5426; --orange-darker:#8f4520;
--orange-light:#C0774A; --orange-tint:#f8efe6;
--blue:#2C4B8E;
/* Status */
--success:#21a050; --success-tint:#e7f5ec; --success-border:#b8e2c6;
/* SALE — Glow Routine: warmes Gold */
--sale:#eeceb4; --sale-tint:#f9e9cd;
/* POP — Eyecatcher fuer Badges/Preis/aktive Karte, aus dem echten Kollagen-Plus-Etikett
gesampelt (Pantone-nahes Pink der "Kollagenplus"-Wortmarke, marke-sortiment-gruppe-3000x2000.jpg).
Bewusst NICHT in Bildern/Bühne verwendet — nur als UI-Signal, die Bildwelt bleibt Gold/Beige. */
--pop:#f2848e; --pop-tint:#f9c9cc; --pop-dark:#ae5f66;
/* Fonts */
--font-head:'Jost',system-ui,sans-serif;
--font-body:'Jost',system-ui,sans-serif;
--font-serif:'Playfair Display',Georgia,serif;
/* Geometrie */
--r:6px; --r-form:10px;
--maxw:680px; --wide:1140px; --btn-h:52px;
/* Abstands-Skala */
--sp-2:8px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
--sp-12:48px; --sp-16:64px; --sp-24:96px;
}
/* ===== Basis-Reset & Typo ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{
font-family:var(--font-body); color:var(--brand); background:var(--cream);
font-size:18px; line-height:1.62; -webkit-font-smoothing:antialiased;
overflow-wrap:break-word; hyphens:auto;
}
h1,h2,h3{font-family:var(--font-head); font-weight:600; line-height:1.18; color:var(--brand); hyphens:none; -webkit-hyphens:none}
h1{font-size:clamp(2.5rem,4.8vw,4rem); line-height:1.1; letter-spacing:-.012em}
h2{font-size:clamp(1.9rem,3.2vw,2.9rem); margin-bottom:20px}
h3{font-size:clamp(1.3rem,1.8vw,1.65rem); margin-bottom:11px}
p{margin:0 0 1.15rem}
strong{font-weight:700; color:var(--brand)}
a{color:var(--orange-dark)}
img{max-width:100%}
.wrap{max-width:var(--wide); margin:0 auto; padding:0 28px}
.col{max-width:var(--maxw); margin:0 auto; padding:0 28px}
section{padding:var(--sp-24) 0}
.bg-cream{background:var(--cream)}
.bg-cream2{background:var(--cream-2)}
.bg-cream3{background:var(--cream-3)}
.center{text-align:center}
.muted{color:var(--muted)}
.lead{font-size:1.24rem; line-height:1.55; color:var(--coffee-400)}
.kicker{display:inline-block; background:var(--orange-tint); border:1px solid var(--orange-light);
color:var(--orange-dark); font-family:var(--font-body); font-weight:700; text-transform:uppercase;
letter-spacing:.08em; font-size:.8rem; padding:8px 20px; border-radius:100px; margin-bottom:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
background:var(--orange-dark); color:#fff; font-family:var(--font-body); font-weight:600;
text-transform:uppercase; letter-spacing:.1em; font-size:.95rem; text-decoration:none;
height:var(--btn-h); padding:0 38px; border-radius:var(--r); border:none; cursor:pointer;
transition:background .15s ease, transform .15s ease; box-shadow:0 6px 18px rgba(171,84,38,.32)}
.btn:hover{background:var(--orange-darker); transform:translateY(-1px)}
.btn-lg{height:60px; font-size:1.05rem; padding:0 46px}
/* ===== Countdown-Bar (Glow-Routine-Farblogik: --brand-Text auf --sale) ===== */
.countdown-bar{position:sticky; top:0; z-index:60; background:var(--sale); color:var(--brand); font-family:var(--font-body)}
.cd-inner{max-width:var(--wide); margin:0 auto; padding:10px 22px; display:flex; align-items:center;
justify-content:center; gap:13px; flex-wrap:wrap; font-size:.92rem; font-weight:700; letter-spacing:.02em}
.cd-text{font-weight:500; color:var(--brand); opacity:.85}
.cd-code{background:var(--brand); color:#fff; font-weight:700; border-radius:6px; padding:2px 10px; letter-spacing:.06em}
.cd-clock{font-family:var(--font-body); font-weight:700; font-size:1.05rem; color:var(--brand);
background:rgba(75,51,52,.08); border:1px solid rgba(75,51,52,.22); border-radius:6px;
padding:2px 11px; font-variant-numeric:tabular-nums; letter-spacing:.06em; min-width:108px; text-align:center}
/* ===== Hero ===== */
.hero{background:radial-gradient(125% 85% at 50% -10%, var(--sale-tint), var(--cream) 62%); text-align:center}
.hero h1{margin-bottom:18px}
.hero .lead{max-width:640px; margin:0 auto var(--sp-6)}
/* Luft zwischen Text-CTA und Sale-Banner. Der Banner haengt als eigenes .wrap direkt in
section.hero, hat also keinen Abstand zur Textspalte geerbt — der Button „Finde deine
Routine" klebte ohne diese Regel auf der Banner-Oberkante. --sp-12 (48 px) ist nicht neu
erfunden, sondern der Wert, mit dem die Buehne an derselben Stelle schon einmal unter der
Textspalte hing (siehe .hero-stage `margin:var(--sp-12) auto 0`). Die zwei CTAs brauchen
diese Trennung besonders: ohne sie liest sich der Banner-Button als zweite Zeile des
Text-Buttons statt als eigenes Angebot. */
.hero>.wrap{margin-top:var(--sp-12)}
/* ----- Hero-Buehne: abgenommener Loop + echter Packshot -----
Aufbau nach bildplan §2b („Weg A"): das Video ist die GENERIERTE, produktfreie Buehne,
das Produkt liegt als STATISCHE Ebene darueber. Das Produkt wird nie mitgeneriert (V-09) —
ein mitgeneriertes Etikett wird in jedem Bild neu gezeichnet und wandert sichtbar.
Warum 960px und nicht die volle Spaltenbreite (1140px):
Der Loop ist 1920px breit. V-10 verlangt Pixelbreite >= 2x Anzeigebreite, also max 960px.
Bei 1084px waeren es nur 1,77x. Die Buehne ist deshalb bewusst schmaler als der Textblock. */
/* width:calc(100% - 56px) statt width:100%: die Buehne haengt direkt in section.hero,
nicht in .wrap, hat also kein Seitenpolster geerbt. Ohne das klebt sie zwischen
~700px und 1000px Viewport an beiden Bildschirmkanten. 28px = .wrap-Polster. */
.hero-stage{position:relative; width:calc(100% - 56px); max-width:960px; margin:var(--sp-12) auto 0;
aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:var(--cream-2);
box-shadow:0 18px 48px -24px rgba(60,42,20,.35)}
.hero-stage .hero-stage-plate{position:absolute; inset:0;
width:100%; height:100%; object-fit:cover; display:block}
/* Die Buehne haengt seit dem Tausch am 21.8. nicht mehr unter der Hero-Textspalte, sondern
allein in einer eigenen Section in der Seitenmitte. Dort ist das geerbte
`margin:var(--sp-12) auto 0` falsch: es sind 48 px oben UND 0 unten, also ein Bild, das
sichtbar nach unten aus seiner Section haengt. Eigene Modifier-Klasse statt Aendern der
Grundregel — `.hero-stage` traegt die komplette V-10-Geometrie (max-width 960 = 2,00x,
mobil 540 = 2,00x), und die darf beim Verschieben nicht angefasst werden. */
.stage-mitte{margin:0 auto}
/* ENTFERNT 21.8. — `.hero-stage-sku` (die freigestellte Packshot-Ebene) samt ihrer
Standlinien-Rechnung. Die gesamte Regel bezog sich auf EIN bestimmtes Bild: alle Prozente
waren an hero-kaffee-desktop.jpg gemessen (Hinterkante y=57,0 %, Vorderkante y=89,5 %,
Standlinie bottom:26 %). Mit dem Wechsel auf hero-routine-desktop.jpg sind diese Messwerte
nicht "ungefaehr noch richtig", sondern gegenstandslos — es ist eine andere Buehne. Sie
stehen zu lassen waere die gefaehrlichere Variante gewesen: eine plausibel aussehende
Zahl fuer ein Bild, das es auf dieser Seite nicht mehr gibt. Der Grund, warum die Ebene
ueberhaupt weg ist, steht am Hero-Markup. */
/* ===== Sale-Banner (portiert aus buehnen-auswahl.html) =====
Klassen bewusst auf `.sb-` praefigiert, im Quelldokument hiessen sie .hero/.badge/.cta/
.txt/.foto und haetten hier alle kollidiert. Farbflaeche ist --gold: KEIN neuer Farbwert,
#c9b389 ist der bestehende Token. Der Wert steht im Stylesheet, nie in einem Bild. */
.sb{position:relative; display:grid; grid-template-columns:52% 48%; background:var(--gold);
border-radius:var(--r); overflow:hidden; aspect-ratio:21/9; isolation:isolate}
/* `text-align:left` ist NICHT dekorativ, sondern die Reparatur eines Umzugsschadens:
`section.hero` setzt `text-align:center` fuer seine eigene Textspalte. Solange der Banner
unten in `section.bg-cream` hing, erbte er die Standardausrichtung links. Seit dem Tausch
am 21.8. haengt er IM Hero und erbte damit zentriert — Kicker, Headline und Preiszeile
waren in der Farbflaeche mittig statt am linken Rand, also nicht mehr das abgenommene
Layout. Die Ausrichtung wird deshalb hier explizit gesetzt und nicht mehr geerbt: dann
ueberlebt sie auch den naechsten Umzug. (`justify-content` daneben ist die FLEX-Achse und
regelt die Vertikale — es hat die Horizontale nie kontrolliert, deshalb ist der Fehler
ueberhaupt entstanden.) */
.sb-txt{position:relative; z-index:3; padding:5% 4% 5% 6%; display:flex;
flex-direction:column; justify-content:center; text-align:left}
/* KONTRAST GEMESSEN auf #c9b389, nicht geschaetzt: --orange #BE6330 = 2,05:1 (durchgefallen),
--orange-darker = 3,39:1 (fuer Kleintext ebenfalls durchgefallen), --brand = 5,65:1
(bestanden). Der Kicker ist ~10,6 px und zaehlt damit NICHT als Grosstext, er braucht die
4,5:1 — also --brand. Die Akzentfarbe wandert ins Headline-„dir", das mit 40 px/700 als
Grosstext gilt und dort mit 3,39:1 durchgeht. */
.sb-kick{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--brand); margin-bottom:.6em}
.sb-h{font-family:var(--font-serif); font-weight:700; line-height:1.06;
font-size:clamp(1.1rem,2.9vw,2.5rem); margin:0 0 .5em; color:var(--brand)}
.sb-h em{font-style:italic; color:var(--orange-darker)}
.sb-pr{font-size:clamp(.7rem,1.15vw,.95rem); margin:0 0 1.1em; color:var(--brand)}
.sb-pr s{color:var(--brand); opacity:.62}
.sb-pr b{color:var(--brand); font-size:1.25em}
.sb-cta{align-self:flex-start; background:var(--brand); color:var(--cream);
text-decoration:none; font-size:clamp(.62rem,1vw,.82rem); letter-spacing:.06em;
text-transform:uppercase; padding:.85em 1.6em; border-radius:2px}
.sb-cta:hover{background:var(--coffee-400)}
.sb-foto{position:relative; overflow:hidden}
/* Das ist KIND von , nicht von .sb-foto — ein Direkt-Kind-Selektor greift
hier nicht und das Bild bliebe ohne Hoehe unsichtbar. Im Quelldokument war das ein Fehler. */
.sb-foto>picture{display:block; width:100%; height:100%}
.sb-foto img.sb-plate{width:100%; height:100%; object-fit:cover; display:block}
/* Feste px-Insets statt Prozent: bei 21:9 sind 6 % Hoehe nur ~21 px, der Stempel klebte damit
an der Oberkante und rotate(-9deg) schob ihn zusammen mit overflow:hidden sichtbar ueber den
rechten Rand. 18 px > 6,2 px Rotationsueberhang bei 112 px Durchmesser.
Alle Kindgroessen haengen an --bs und stehen in em, sonst wachsen sie beim Breakpoint-
Wechsel nicht mit dem Stempel mit. */
.sb-badge{position:absolute; z-index:4; top:18px; right:18px; --bs:112px;
width:var(--bs); aspect-ratio:1; border-radius:50%; padding:0 .5em;
/* Glanz: Lichtpunkt oben links, Abschattung unten rechts — macht aus der flachen
Kreisflaeche einen aufgeklebten Sticker, ohne ein Bild zu brauchen (G-3). */
background:radial-gradient(100% 100% at 30% 20%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),
radial-gradient(130% 130% at 72% 96%,rgba(0,0,0,.30),rgba(0,0,0,0) 62%),
var(--brand);
color:var(--cream); display:grid; place-content:center; text-align:center;
font-size:calc(var(--bs)/9); transform:rotate(-9deg);
box-shadow:0 10px 26px rgba(45,28,28,.34),0 2px 5px rgba(45,28,28,.20)}
.sb-badge .u{font-size:.66em; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
display:block; color:var(--gold); margin-bottom:.28em; line-height:1}
/* Flexbox mit baseline statt vertical-align: der Hub in em rechnet sonst gegen die EIGENE
Schriftgroesse des und skaliert nicht mit der Zahl. Ausserdem kann ein Uebersetzer-
Overlay (Chrome-Translate huellt Textknoten in ) im Inline-Fluss zwischen „34" und
das greifen — genau das ist hier zu erwarten, der Sale-Owner liest die Seite
uebersetzt. nowrap haelt Zahl und Zeichen zusammen. */
.sb-badge .n{font-family:var(--font-serif); font-weight:600; font-size:3.4em; line-height:1.05;
color:var(--cream); letter-spacing:-.01em;
display:flex; align-items:baseline; justify-content:center; flex-wrap:nowrap}
/* Eigenes , kein nackter Textknoten: als anonymes Flex-Item synthetisiert der Browser die
Grundlinie, und die lag messbar 3,5 px zu hoch. */
.sb-badge .n b{font-weight:inherit; font-size:inherit}
/* Das Prozentzeichen wird um .3em NACH UNTEN gesetzt — Korrektur zweier gemessener Effekte:
1) GLYPHE: die Ziffern 3 und 4 haben in Playfair 6,4 px Unterlaenge bei 42 px Grad, das %
nur 1,2 px. Auf gemeinsamer Grundlinie endet das Zeichen 5,2 px ueber den Ziffern.
2) DREHUNG: rotate(-9deg) hebt alles rechts der Mitte an, tan(9°) x ~30 px = ~4,7 px.
Zusammen ~10 px Hub — der Grund, warum das Zeichen vorher „losgeloest oben rechts" stand. */
.sb-badge .n i{font-style:normal; font-size:.52em; font-weight:600; letter-spacing:0;
margin-left:.06em; position:relative; top:.3em}
.sb-badge .d{font-size:.72em; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
display:block; color:var(--gold); margin-top:.62em; line-height:1}
/* MOBIL — am 21.8. NACHGETRAGEN, war beim Portieren vergessen worden.
Der Befund kam nicht aus dem Ansehen, sondern aus dem Messen: .sb war auf 390 px
350 x 150 px gross. 21:9 blieb also in Kraft, und in 150 px Hoehe muessten Kicker,
zweizeilige Headline, Preiszeile, CTA UND das Foto nebeneinander Platz finden — der
Banner war zusammengequetscht, ohne dass irgendetwas ueberlief.
Genau deshalb hat es kein Automat gemeldet: D-31/mobile-audit prueft waagerechten
Ueberlauf, und den gab es nicht (350 <= 390). Ein zu flacher Kasten ist kein Overflow.
Nebenwirkung, die ich hier festhalte: der Kommentar an .sb-badge unten behauptete
bereits, auf Mobil kippe der Banner auf „Text oben / Foto unten" — das war die
Beschreibung des QUELLDOKUMENTS, nicht dieser Seite. Die Regel fehlte, die Begruendung
stand schon da. Eine Begruendung ohne die Regel, auf die sie sich beruft, ist die
gefaehrlichste Sorte Kommentar: sie laesst den Fehler geprueft aussehen.
4:5 mit Zeilen 42%/58% wie im Quelldokument: das Foto braucht mehr als die Haelfte,
sonst schneidet object-fit:cover die Konsole an den Raendern ab. CTA auf volle Breite,
Stempel von 112 auf 96 px — bei 350 px Kastenbreite sind 112 px fast ein Drittel. */
@media(max-width:720px){
.sb{grid-template-columns:1fr; aspect-ratio:4/5; grid-template-rows:42% 58%}
.sb-badge{--bs:96px; top:14px; right:14px}
.sb-cta{align-self:stretch; text-align:center}
}
/* ==================================================================================
MODULE M-01, M-02, M-05 — portiert aus visuals-auswahl.html am 21.8.
WARUM MEHR ALS NUR DER BALANCE-KNOTEN: verlangt war ausdruecklich nur
„die Balance-Section", der Rest war „in der Reihenfolge, die du fuer richtig haeltst".
Die anderen sind mitgekommen, weil jeder von ihnen eine Frage beantwortet, die
diese Seite bisher offen liess:
M-01 Wirkstoff-Leiter -> „welches Kollagen ist ueberhaupt meins?" (vor dem Wegweiser)
M-02 Balance-Knoten -> „warum ist Balance in fast jedem Bundle?" (vor der Bundle-Liste)
M-05 Sale-Fenster -> „bis wann?" (nach „So funktioniert")
Reihenfolge ist also nicht Geschmack, sondern die Reihenfolge der Kauffragen:
erst orientieren, dann vergleichen. M-05 sitzt direkt hinter der
Sale-Erklaerung, weil die Deadline dort inhaltlich hingehoert und nicht ans Seitenende.
ENTFERNT AM 21.8. AUF ANSAGE (dritte Runde) — NICHT, WEIL SIE FALSCH WAREN:
M-03 Bundle-Matrix („Elf Bundles, vier Produkte, ein Blick", stand nach #bundles)
M-04 Spar-Treppe („Der Rabatt ist im Preis. Der Code kommt obendrauf.")
Beide waren Zelle fuer Zelle nachgerechnet und abgenommen. Die Streichung ist eine
Laengen-/Redundanzentscheidung des Auftraggebers, kein Mangel an den Modulen — das
steht hier, damit niemand sie in vier Wochen „als Fehler" wieder einbaut. Markup und
Begruendungskommentare liegen unveraendert in visuals-auswahl.html (M-03, M-04),
inklusive des ⛔-Vermerks, warum der Block „Preis pro Anwendung" nie mitkam
(Packungsgroessen je Bundle fehlen, Quelle Shopify).
MITENTFERNT, damit keine Leiche zurueckbleibt (P-04: eine Aenderung ist eine Klasse,
nicht nur die sichtbare Stelle):
- die CSS-Bloecke .mx*/.dot* (M-03) und .stair/.st-*/.ppa-* (M-04)
- der komplette `@media(max-width:640px)`-Block DIESER Modulgruppe: er enthielt
ausschliesslich Matrix-, Treppen- und ppa-Regeln, nach dem Streichen blieb kein
einziger Selektor uebrig. Die Module haben damit nur noch EINEN eigenen
Bruchpunkt (900), nicht mehr zwei.
- die .mx-/.st-Selektoren aus der `hyphens:none`-Sammelregel weiter unten.
BEWUSST GEBLIEBEN: `.note` — M-02 benutzt den Kasten weiter.
VOR DEM LOESCHEN GEPRUEFT, nicht angenommen: `.dot` klingt nach einem Allerweltsnamen,
deshalb alle 48 Vorkommen im Markup ausgezaehlt — jedes lag innerhalb von M-03, keines
ausserhalb (`.lg-dot` in M-02 ist ein anderer Name und faellt bei einem Wortgrenzen-Grep
faelschlich mit auf; genau hin sehen). Erst danach durfte die Regel mitgehen.
KOLLISIONSPRUEFUNG VOR DEM EINFUEGEN (P-04 als Vorbeugung, nicht als Reparatur):
alle 60 Modul-Klassennamen gegen das Stylesheet dieser Seite geprueft, nicht nur die
Regeln am Zeilenanfang — ein zusammengesetzter Selektor wie `.tcard .who` faellt bei
einem `^\.who`-Grep sonst durch. Vier Treffer, alle unschaedlich:
.who -> nur `.tcard .who` (auf .tcard begrenzt, hier gilt `.rung .who`)
.n -> nur `.sc-item .n` / `.sb-badge .n` (beide begrenzt, hier gilt `.hub-list .n`)
.win -> nur `.fork .opt.win` (braucht .fork-Vorfahr UND .opt am Element)
.badge-> die Sammelregel `hyphens:none` in Zeile ~772
Der .badge-Treffer ist der einzige, der wirklich durchgreift — und er ist erwuenscht:
„Hoechste Stufe" soll nicht getrennt werden. Deshalb KEINE Umbenennung, anders als beim
Sale-Banner oben, wo .hero/.badge/.cta/.txt/.foto echte Kollisionen waren.
NICHT MITPORTIERT, mit Absicht:
.mod-head/.mod-id/.slot Dokument-Chrome des Auswahl-Dokuments („M-03", „Ziel-Slot:")
.kicker diese Seite hat ihren eigenen Chip, der wird benutzt
section{padding:...} aus dem 640er-Block — das haette die globale Section-Hoehe
DIESER Seite fuer ALLE Sections mitveraendert, nicht nur fuer die fuenf neuen.
Die Notiz-Kaesten sind gefiltert statt pauschal uebernommen: „Warum das verkauft" und
„FLAG:PREIS" sind interne Begruendung und gehoeren nicht vor den Kunden; die
Ehrlichkeitsnotiz (M-02), die Rechenerklaerung und „pro Anwendung statt pro Tag" (M-04)
sind Kundenargumente und bleiben.
BREITE: das Quelldokument rechnet mit --maxw 1080px minus 2x20px = 1040px Inhalt,
diese Seite mit .wrap = --wide 1140px minus 2x28px = 1084px. 4,2 % mehr, alle Raster
sind fraktional (fr) — kein Wert musste nachgerechnet werden. Geprueft, nicht gehofft.
================================================================================== */
/* ============================ M-01 WIRKSTOFF-LEITER ============================
Produkt-Stufe (Format + Konzentration), KEINE Wirkungskurve — die Balken steigen in
der Konzentration, nicht in „Wirkung" (V-04: Wirkungsstufen muessten belegt sein). */
.ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4);
align-items:end}
.rung{background:var(--paper); border:1px solid var(--cream-4); border-radius:14px;
padding:var(--sp-6); position:relative; overflow:hidden}
.rung--1{padding-top:calc(var(--sp-6) + 34px)}
.rung--2{padding-top:calc(var(--sp-6) + 17px)}
.rung--3{border-color:var(--sale); box-shadow:0 8px 30px -18px rgba(75,51,52,.5)}
.rung-bar{position:absolute; left:0; top:0; right:0; height:5px; background:var(--cream-4)}
.rung--1 .rung-bar{background:linear-gradient(90deg,var(--gold) 33%,var(--cream-4) 33%)}
.rung--2 .rung-bar{background:linear-gradient(90deg,var(--gold) 66%,var(--cream-4) 66%)}
.rung--3 .rung-bar{background:var(--orange)}
.rung-step{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); font-weight:700}
.rung h3{font-size:1.16rem; margin:8px 0 4px}
.rung .form{font-size:.82rem; color:var(--orange); font-weight:600; letter-spacing:.02em}
.rung .who{font-size:.93rem; color:var(--coffee-400); margin-top:12px}
.rung .freq{margin-top:14px; padding-top:12px; border-top:1px dashed var(--cream-4);
font-size:.82rem; color:var(--muted)}
.rung .freq b{color:var(--brand); font-family:var(--font-head); font-size:1.05rem}
.rung--3 .badge{position:absolute; top:14px; right:14px; background:var(--sale-tint);
color:var(--brand); font-size:.68rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; padding:4px 9px; border-radius:20px}
/* ============================ M-02 BALANCE-KNOTEN ============================
Aussage rein aus unserer eigenen Bundle-Tabelle: Balance steckt in 8 der 11 Bundles.
ACHTUNG: es sind ELF Bundles, inklusive des Hero-Bundles (SJP). Die erste Fassung des
Quelldokuments rechnete mit zehn, weil sie das Hero-Bundle uebersah — daraus wurden drei
falsche Aussagen (7/10 statt 8/11, „Balance-Trio hat den hoechsten Rabatt", „bis zu 35 %").
Zahlen hier NUR aus dem Bundle-Grid dieser Seite ableiten, nie aus einer alten Fassung. */
.hub{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--sp-12); align-items:center}
.hub-viz{max-width:420px; margin:0 auto; width:100%}
/* WARUM RING-SEGMENTE UND KEINE BESCHRIFTETEN SATELLITEN-KREISE:
Eine erste Fassung setzte 10 Kreise mit Bundle-Namen auf einen Ring. Das kann nicht
aufgehen: bei 31 % Durchmesser brauchen 10 Kreise 310 % Umfang, der Ring bietet bei
r=34,5 % aber nur 2*pi*34,5 = 217 %. Zwei Satelliten landeten auf top:88 % und ragten
mit ihrer eigenen Hoehe bis 119 % — also ~80 px UNTEN aus dem Kasten heraus.
Wichtig fuer die Abnahme hier: mobile-audit.mjs meldete das trotzdem als sauber, weil
D-23 nur WAAGERECHTEN Ueberlauf prueft. Senkrechtes Herausragen absolut positionierter
Kinder faellt da durch — Regel-Kandidat D-32. Segmente loesen das strukturell: die
Namen stehen in der Legende, im Ring ist nichts mehr zu verteilen. */
.hub-dial{position:relative; aspect-ratio:1; max-width:300px; margin:0 auto; width:100%}
.hub-dial svg{display:block; width:100%; height:auto}
.seg--on{stroke:var(--orange)}
.seg--off{stroke:var(--cream-4)}
.hub-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:52%; aspect-ratio:1; border-radius:50%; background:var(--brand); color:var(--cream);
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; z-index:2; box-shadow:0 10px 40px -12px rgba(75,51,52,.55)}
.hub-core span{font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--gold); font-weight:700}
.hub-core b{font-family:var(--font-head); font-size:1.28rem; line-height:1.1; margin-top:2px}
.hub-core i{font-style:normal; font-size:.68rem; color:#e6d9d4; margin-top:4px}
/* Spaltenweiser Fluss (nicht zeilenweise): so landen die drei blassen Eintraege als
zusammenhaengender Block am Ende der rechten Spalte. Bei Zeilenfluss verteilten sie sich
auf beide Spalten und der „8 gegen 3"-Kontrast war nicht mehr auf einen Blick lesbar. */
.hub-legend{list-style:none; padding:0; margin:var(--sp-6) 0 0;
display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(6,auto);
grid-auto-flow:column; gap:7px 14px; font-size:.8rem}
.hub-legend li{display:flex; align-items:center; gap:7px; color:var(--coffee-400);
line-height:1.3}
.lg-dot{width:9px; height:9px; border-radius:50%; background:var(--orange); flex:none}
.lg-dot--off{background:transparent; border:1.5px solid var(--cream-4)}
.hub-legend li.is-off{color:var(--muted)}
.hub-legend small{color:var(--orange); font-weight:700; font-size:.72rem; margin-left:2px}
.hub-stat{font-family:var(--font-head); font-size:clamp(2.6rem,7vw,4rem); line-height:1;
color:var(--brand)}
.hub-stat sup{font-size:.42em; color:var(--orange); vertical-align:super; margin-left:2px}
.hub-list{list-style:none; padding:0; margin:var(--sp-6) 0 0}
.hub-list li{display:flex; gap:10px; align-items:flex-start; padding:8px 0;
border-bottom:1px solid var(--cream-4); font-size:.94rem; color:var(--coffee-400)}
.hub-list li:last-child{border-bottom:none}
.hub-list .n{font-family:var(--font-head); font-weight:700; color:var(--gold);
font-size:1rem; flex:none; width:20px}
/* ============================ M-05 SALE-FENSTER ============================ */
.win{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:var(--sp-8)}
.day{background:var(--paper); border:1px solid var(--cream-4); border-radius:12px;
padding:var(--sp-4) 12px; text-align:center; position:relative}
.day--ext{border-color:var(--orange); border-style:dashed; background:var(--cream-2)}
.day-dow{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
color:var(--muted); font-weight:700}
.day-num{font-family:var(--font-head); font-size:1.9rem; line-height:1.1; margin:4px 0 2px}
.day-mon{font-size:.74rem; color:var(--muted)}
.day-note{font-size:.72rem; color:var(--orange); font-weight:600; margin-top:8px;
min-height:2.4em; display:block}
.day--ext .day-num{color:var(--orange)}
.win-bar{height:6px; border-radius:3px; margin-top:var(--sp-4);
background:linear-gradient(90deg,var(--sale) 0 80%,var(--orange) 80% 100%)}
.win-foot{display:flex; justify-content:space-between; font-size:.78rem;
color:var(--muted); margin-top:8px}
/* ---------- Notiz-Kasten der Module ---------- */
.note{background:var(--cream-3); border-left:3px solid var(--gold);
border-radius:0 var(--r) var(--r) 0;
padding:var(--sp-4) var(--sp-6); margin-top:var(--sp-8); font-size:.9rem;
color:var(--coffee-400)}
.note b{color:var(--brand)}
.note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em;
background:var(--paper); padding:1px 5px; border-radius:3px}
/* ---------- Modul-Mobil (D-23) ----------
Bewusst hier und nicht im grossen Mobil-Block am Seitenende: die Module haben zwei
eigene Bruchpunkte (900 und 640), die mit den Bruchpunkten dieser Seite nicht
uebereinstimmen. Zusammenlegen haette bedeutet, entweder die Module an fremde
Bruchpunkte anzupassen oder die Bruchpunkte der Seite zu verschieben — beides
veraendert Dinge, die heute nachweislich funktionieren. */
@media(max-width:900px){
.hub{grid-template-columns:1fr; gap:var(--sp-8)}
.ladder{grid-template-columns:1fr; align-items:stretch}
.rung--1,.rung--2{padding-top:var(--sp-6)}
.win{grid-template-columns:repeat(2,1fr)}
.win .day:last-child{grid-column:1/-1}
}
/* ===== Lifestyle-Wegweiser (Quiz-Einstieg) ===== */
.tiles{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
/* Vollflaechige Fotobande oben in der Kachel. `.tile` hat `padding:22px 18px` und
`overflow:hidden`, deshalb zieht die Bande per negativem Margin bis an die Kachelkante —
`width:calc(100% + 36px)` loest gegen die Content-Box der Kachel auf, 18+18 = 36.
`max-width:none` gehoert dazu: die globale Regel `img{max-width:100%}` hat die 200 px
wieder auf 164 px gestaucht, wodurch der Vollrand nur links griff und rechts 37 px Rand
stehen blieb — der Beschnitt sah dadurch schief aus, nicht randlos.
Seitenverhaeltnis fest, damit alle fuenf Kacheln dieselbe Bandhoehe haben und die
Titelzeilen auf einer Linie sitzen; bei gemischten Verhaeltnissen wandert die Grundlinie
pro Kachel.
`height:auto` ist Pflicht und nicht Kosmetik: die tragen `height="840"`, und dieses
Attribut wirkt als Praesentations-Hinweis, der eine *benutzte* Hoehe setzt, solange CSS
keine eigene Hoehe deklariert. Sind Breite und Hoehe beide aufgeloest, wird `aspect-ratio`
stillschweigend ignoriert — die Bande stand dadurch 840 px hoch bei 164 px Breite, also als
senkrechter Streifen mit extremem Mittelbeschnitt (Kachel 988 px). Erst `height:auto`
entzieht dem Attribut die Wirkung und laesst das Verhaeltnis die Hoehe aus der Breite
rechnen.
3:2 statt der Quell-4:3: `object-fit:cover` nimmt damit oben und unten je ~1/8 der
Bildhoehe weg. Das ist gewollt — die Motive haben Kopf- und Fussluft, und die flachere
Bande haelt die Kachel kompakt, statt das Foto die Titelzeile nach unten zu druecken.
Aufloesung: 1120 px Ableitung gegen max. 556 px Anzeige (1-Spalten-Kachel knapp unter
560 px Viewport) = 2,01x, auf dem Desktop 5,5x. Rechnung in
assets/marken-fotos/HERKUNFT.md. */
.tile-band{display:block; width:calc(100% + 36px); max-width:none; margin:-22px -18px 14px;
height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--cream-2)}
.tile{position:relative; display:flex; flex-direction:column; background:var(--paper);
border:1px solid var(--cream-4); border-radius:14px; overflow:hidden; text-decoration:none;
padding:22px 18px; text-align:center; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
a.tile:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(75,51,52,.14); border-color:var(--orange-light)}
.tile-title{font-family:var(--font-head); font-weight:600; font-size:1.05rem; color:var(--brand); margin-bottom:6px}
.tile-sub{font-size:.85rem; color:var(--muted)}
/* ===== Bundle-Grid ===== */
.bundles{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.bundle{background:var(--paper); border:2px solid var(--cream-4); border-radius:var(--r);
padding:26px 22px; text-align:center; position:relative; display:flex; flex-direction:column}
.bundle.feat{border-color:var(--pop); box-shadow:0 14px 40px rgba(242,132,142,.22)}
.bundle .tagtop{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--pop-dark);
color:#fff; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
padding:5px 14px; border-radius:100px; white-space:nowrap}
.bundle h3{margin-bottom:6px; font-size:1.15rem}
.bundle .inhalt{font-size:.85rem; color:var(--coffee-400); margin-bottom:14px; min-height:40px}
/* FLAG:PROCESS — Sale-Owner-Feedback 20.8.: Produktbilder auf 1:1. Vorher gab eine
feste Pixelhoehe (height:120px) dem Bild ein beliebiges Seitenverhaeltnis, das je nach
Kartenbreite mitwanderte. Alle Shop-Packshots sind quadratisch (2000x2000 /
3000x3000), `aspect-ratio:1/1` + `contain` zeigt sie also vollstaendig und ohne
Beschnitt — inklusive des eingebrannten Rabattstickers in der Ecke. */
.bundle img{aspect-ratio:1/1; width:100%; height:auto; object-fit:contain;
margin:0 auto 14px; background:var(--cream-2); border-radius:8px; display:block}
.price-row{display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.price-old{color:var(--muted); text-decoration:line-through; font-size:.95rem; font-weight:500}
.price-sale{font-family:var(--font-head); font-weight:700; font-size:1.7rem; color:var(--brand); line-height:1}
.price-save{font-size:.72rem; font-weight:700; background:var(--pop-tint); color:var(--brand); padding:3px 10px; border-radius:100px; display:inline-block; margin-bottom:14px}
.bundle .btn{margin-top:auto}
/* FLAG:PROCESS — Sale-Owner-Feedback 20.8.: das meistgekaufte Bundle steht OBEN und allein,
die drei Alternativen darunter. `grid-column:1/-1` hebt die Hero-Karte aus dem 3er-Raster
in eine eigene Reihe. Der Bildriegel MUSS dabei begrenzt werden: seit `.bundle img` auf
`aspect-ratio:1/1` laeuft, wuerde eine volle .wide-Breite ein ~1090 px hohes Bild ergeben. */
.bundles--spotlight .bundle.feat{grid-column:1/-1}
.bundles--spotlight .bundle.feat img{max-width:340px}
/* FLAG:PROCESS — Sale-Owner-Feedback 20.8.: die Lifestyle-Kacheln zeigten alle auf das
generische #bundles, obwohl jede ein konkretes Bundle benennt. Jetzt tiefverlinkt.
scroll-margin-top haelt die Zielkarte unter der sticky Countdown-Bar frei;
:target markiert sie kurz, sonst weiss man nach dem Sprung nicht, welche gemeint war. */
.bundle[id]{scroll-margin-top:120px}
.bundle[id]:target{border-color:var(--pop-dark); box-shadow:0 14px 40px rgba(242,132,142,.30)}
/* ===== Code-Erklärung ===== */
.code-explain{background:var(--sale-tint); border-radius:14px; padding:32px; text-align:center; max-width:760px; margin:0 auto}
/* ===== Verlängerungs-Sektion (Platzhalter, inaktiv bis 6.9.) ===== */
.extension-block{border:2px dashed var(--orange-light); border-radius:14px; padding:32px; text-align:center; opacity:.55; position:relative}
.extension-block[data-active="false"]::before{
content:"Aktiv ab 06.09.2026"; position:absolute; top:14px; right:14px; background:var(--brand); color:#fff;
font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:100px}
/* ===== FAQ ===== */
.faq{max-width:720px; margin:0 auto}
.faq details{background:var(--paper); border:1px solid var(--cream-4); border-radius:var(--r); margin-bottom:12px; overflow:hidden}
.faq summary{padding:18px 22px; font-weight:600; cursor:pointer; list-style:none;
display:flex; justify-content:space-between; align-items:center; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--orange-dark); font-size:1.5rem; font-weight:400; flex:none}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 22px 20px; color:var(--coffee-400)}
/* ===== Header (Kanon) ===== */
.topbar{position:sticky; top:0; z-index:50; background:rgba(253,251,247,.94);
backdrop-filter:blur(8px); border-bottom:1px solid var(--cream-4)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:56px}
.logo{font-family:var(--font-serif); font-weight:700; font-size:1.45rem; color:var(--brand); letter-spacing:-.01em}
.logo sup{font-size:.42em; font-weight:600}
/* --- Topnav-Basis (Kanon) --- */
.topnav{display:flex; align-items:center; gap:26px}
.topnav>a, .topnav .nav-link{font-family:var(--font-body); font-size:.95rem; font-weight:600;
color:var(--brand); text-decoration:none; letter-spacing:.02em; text-transform:none}
.topnav>a:hover, .topnav .nav-link:hover{color:var(--orange-dark)}
.topnav .cart{position:relative; display:inline-flex; align-items:center; font-size:1.35rem; line-height:1}
.topnav .cart .cart-count{position:absolute; top:-7px; right:-11px; background:var(--sale); color:var(--brand);
font-size:.62rem; font-weight:700; min-width:17px; height:17px; border-radius:100px;
display:flex; align-items:center; justify-content:center; padding:0 4px}
/* --- Footer (Kanon) --- */
footer{background:var(--brand); color:var(--cream); padding:var(--sp-16) 0 var(--sp-8)}
.nl-block{max-width:var(--maxw); margin:0 auto var(--sp-12); text-align:center; padding:var(--sp-6) 28px 0}
.nl-block h2{color:var(--paper); margin-bottom:var(--sp-4)}
.nl-block p{color:var(--gold-light); margin-bottom:var(--sp-6)}
.nl-form{display:flex; gap:var(--sp-2); max-width:460px; margin:0 auto}
.nl-form input{flex:1; height:var(--btn-h); border-radius:var(--r-form); border:1px solid var(--gold);
background:var(--paper); color:var(--brand); font-family:var(--font-body); font-size:.95rem; padding:0 18px}
.nl-form .btn{box-shadow:none}
.nl-demo{font-size:.8rem; color:var(--gold-light); opacity:.75; margin:var(--sp-4) 0 0}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-8); margin-bottom:var(--sp-12)}
.foot-cols b{font-family:var(--font-head); font-weight:700; display:block; margin-bottom:var(--sp-4); color:var(--paper)}
.foot-cols a{display:block; color:var(--gold-light); text-decoration:none; font-size:.9rem; padding:4px 0; opacity:.9}
.foot-cols a:hover{opacity:1; text-decoration:underline}
.foot-bottom{border-top:1px solid rgba(235,216,178,.25); padding-top:var(--sp-6); display:flex;
align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; font-size:.85rem; color:var(--gold-light)}
.foot-legal span{display:block}
.foot-sale{font-size:.8rem; opacity:.85; margin-top:4px}
.foot-social{display:flex; gap:var(--sp-4)}
.foot-social a{color:var(--gold-light); text-decoration:none; font-size:.9rem}
/* ===== Sticky Mobile CTA ===== */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--paper);
border-top:1px solid var(--cream-4); padding:11px 16px calc(11px + env(safe-area-inset-bottom));
display:none; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 -4px 18px rgba(0,0,0,.07)}
.sticky-cta .p b{font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--brand)}
.sticky-cta .p span{font-size:.75rem; color:var(--muted); display:block}
.sticky-cta .btn{height:46px; padding:0 22px; font-size:.85rem; box-shadow:none}
/* ===== SIDE-CART (Warenkorb-Schublade) — Kanon, identisch auf allen Seiten =====
FLAG:DEVIATION (Sale-Owner, 2026-08-17): das Warenkorb-Icon sprang bisher hart auf
cart.html. Der Kunde verliert dabei die Seite, auf der er gerade liest — bei einer
Longform-Salespage ist das der teuerste Moment fuer einen Absprung. Der Warenkorb
oeffnet sich jetzt als Schublade ueber der Seite; cart.html bleibt als vollwertige
Warenkorb-/Kassenseite bestehen und ist aus der Schublade heraus einen Klick entfernt.
FLAG:PROCESS — die Preise kommen 1:1 aus derselben CATALOG-Tabelle wie cart.html
(Quelle: docs/site-map.md). Sie werden hier NICHT neu berechnet. Der
Verlaengerungs-Zusatz (15 € Balance am 7.9.) wird bewusst NICHT in der Schublade
gerechnet, sondern nur angekuendigt — die verbindliche Rechnung bleibt cart.html. */
.sc-overlay{position:fixed; inset:0; z-index:90; background:rgba(75,51,52,.42);
opacity:0; pointer-events:none; transition:opacity .25s ease}
.sc-overlay.is-open{opacity:1; pointer-events:auto}
.sc{position:fixed; top:0; right:0; bottom:0; z-index:95; width:min(400px,100vw);
background:var(--paper); display:flex; flex-direction:column;
transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
box-shadow:-14px 0 40px rgba(75,51,52,.18)}
.sc.is-open{transform:translateX(0)}
.sc-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:18px 20px; border-bottom:1px solid var(--cream-4); flex:0 0 auto}
.sc-head h2{font-family:var(--font-head); font-size:1.15rem; color:var(--brand); margin:0}
.sc-close{background:none; border:0; font-size:1.5rem; line-height:1; color:var(--muted);
cursor:pointer; padding:2px 6px; border-radius:6px}
.sc-close:hover{color:var(--brand); background:var(--cream-3)}
.sc-body{flex:1 1 auto; overflow-y:auto; padding:16px 20px}
.sc-empty{text-align:center; color:var(--muted); font-size:.92rem; padding:32px 8px}
.sc-empty b{display:block; color:var(--brand); font-size:1rem; margin-bottom:6px}
.sc-item{display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:start;
padding:14px 0; border-bottom:1px solid var(--cream-4)}
.sc-item:last-child{border-bottom:0}
.sc-item img{width:64px; height:64px; object-fit:contain; background:var(--cream-2); border-radius:8px}
.sc-item .n{font-family:var(--font-body); font-size:.86rem; font-weight:600;
color:var(--brand); line-height:1.3; margin-bottom:4px}
.sc-item .p{font-size:.8rem; color:var(--muted); margin-bottom:8px}
.sc-item .p s{margin-right:6px}
.sc-item .p b{color:var(--brand)}
.sc-qty{display:inline-flex; align-items:center; gap:0; border:1px solid var(--cream-4); border-radius:6px}
.sc-qty button{background:none; border:0; width:26px; height:26px; font-size:1rem; line-height:1;
color:var(--brand); cursor:pointer}
.sc-qty button:hover{background:var(--cream-3)}
.sc-qty span{min-width:24px; text-align:center; font-size:.85rem; font-weight:600; color:var(--brand)}
.sc-rm{display:block; margin-top:8px; background:none; border:0; padding:0; font-size:.74rem;
color:var(--muted); text-decoration:underline; cursor:pointer}
.sc-rm:hover{color:var(--orange-dark)}
.sc-line{font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--brand); white-space:nowrap}
.sc-foot{flex:0 0 auto; border-top:1px solid var(--cream-4); padding:16px 20px 20px; background:var(--cream-2)}
.sc-row{display:flex; justify-content:space-between; align-items:baseline; font-size:.88rem;
color:var(--coffee-400); margin-bottom:6px}
.sc-row.total{font-family:var(--font-head); font-size:1.15rem; font-weight:700; color:var(--brand);
margin:10px 0 4px; padding-top:10px; border-top:1px solid var(--cream-4)}
.sc-row .save{color:var(--orange-dark); font-weight:600}
.sc-note{font-size:.74rem; color:var(--muted); line-height:1.45; margin:8px 0 0}
.sc-mov{font-size:.78rem; line-height:1.45; margin:10px 0 0; padding:8px 10px; border-radius:7px;
background:var(--paper); border:1px solid var(--cream-4); color:var(--coffee-400)}
.sc-mov.ok{color:var(--brand)}
.sc-cta{display:block; width:100%; text-align:center; margin-top:12px; text-decoration:none}
.sc-cta[aria-disabled="true"]{opacity:.45; pointer-events:none}
.sc-back{display:block; width:100%; margin-top:8px; background:none; border:0; font-family:var(--font-body);
font-size:.82rem; color:var(--muted); text-decoration:underline; cursor:pointer}
.sc-back:hover{color:var(--brand)}
/* FLAG:PROCESS — Mobile-Fix 2026-08-17, zweite Schutzschicht (D-23).
overflow-x:clip auf verhindert horizontales Scrollen grundsaetzlich.
Grund: sobald die Seite horizontal scrollt, verschiebt sich JEDES position:fixed
Element (Warenkorb-Schublade, Sticky-CTA, Hub-Chip) aus dem Bild. clip statt
hidden, weil hidden position:sticky im Header kaputtmacht.
.sc zusaetzlich hart auf Viewport-Breite begrenzt. */
html{overflow-x:clip}
.sc{max-width:100vw}
/* ================================================================
FLAG:PROCESS — Longform-Merge 2026-08-17 (Sale-Owner, Punkt 1).
glow-routine.html ist ab jetzt DIE eine Longform-Landingpage.
Uebernommen: alle Sektionen aus lp1.html und homepage.html.
lp2.html wurde BEWUSST NICHT gemergt: Cold-Traffic-Ads-Seite mit
eigener, kleinerer Typo-Skala (32 kollidierende Basis-Selektoren:
h1/h2/h3/p/section/.lead/.btn-lg) und ohne eine einzige eigene
Sektion — ihr Problem-Block und ihr Fork sind gekuerzte Dubletten
aus lp1.
Konflikte (3, jeweils gewinnt die Zielseite):
.hero .lead max-width 640 statt 680 (lp1)
.hero Radial-Gradient statt homepage-Flat
.extension-block opacity .55 statt homepage .7
================================================================ */
/* ---- Basis-Regeln uebernommen aus lp1.html ---- */
.bg-dark{background:linear-gradient(160deg,#5e3720,#371f0f); color:var(--cream)}
.bg-dark h2,.bg-dark h3{color:var(--paper)}
.bg-dark strong{color:var(--gold-light)}
.bg-dark .kicker{background:rgba(255,255,255,.07); border-color:rgba(235,216,178,.45); color:var(--gold-light)}
.bg-dark .muted{color:var(--gold-light); opacity:.8}
.bg-dark .lead{color:var(--gold-light)}
/* Sale-Badge & Preise */
.sale-badge{display:inline-flex; align-items:center; gap:6px; background:var(--pop); color:var(--brand);
font-family:var(--font-body); font-weight:700; font-size:.85rem; letter-spacing:.06em;
text-transform:uppercase; padding:6px 14px; border-radius:100px; white-space:nowrap}
.sale-badge--soft{background:var(--pop-tint); color:var(--brand)}
/* Testimonials */
.tcard{background:var(--paper); border:1px solid var(--cream-4); border-radius:var(--r); padding:26px; position:relative}
.tcard .stars{color:var(--gold); letter-spacing:2px; margin-bottom:12px}
.tcard .who{margin-top:14px; font-weight:600}
.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start}
/* Dark-Problem: "Routinen, die scheitern" */
.foes{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:var(--sp-8) 0}
.foe{background:rgba(255,255,255,.06); border:1px solid rgba(235,216,178,.28); border-radius:14px; padding:26px; text-align:center}
.foe .ico{font-size:2rem; line-height:1; margin-bottom:14px}
.foe h3{font-size:1.15rem; margin-bottom:8px}
.foe p{font-size:.95rem; color:var(--gold-light); margin:0}
/* Zickzack Bundle-Story-Blöcke */
.zz{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); align-items:center; margin-bottom:var(--sp-16)}
.zz:last-child{margin-bottom:0}
.zz .zz-media{position:relative}
.zz .product-soft{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:18px; background:var(--cream-3)}
/* FLAG:PROCESS — Sale-Owner-Feedback 20.8.: diese vier Packshots waren auf 4:3
beschnitten, der eingebrannte Rabattsticker fiel dabei ab. Ursache war nicht
dieser Block, sondern die generische `.zz-media img`-Regel weiter unten
(aspect-ratio:4/3 + object-fit:cover), die bis in .product-soft durchgriff.
Hier explizit zurueckgeholt: quadratische Quelle, quadratischer Rahmen,
`contain` statt `cover` — kein Beschnitt. */
.zz .product-soft img{max-height:78%; width:auto; aspect-ratio:1/1; object-fit:contain}
.zz--rev .zz-media{order:2}
/* Guarantee */
.guarantee-box{max-width:640px;margin:0 auto;text-align:center}
.guarantee-box .ico{font-size:2.4rem;margin-bottom:14px}
/* Großer Countdown */
.cd-big{display:flex; justify-content:center; gap:14px; margin:var(--sp-8) 0; flex-wrap:wrap}
.cd-big .unit{background:var(--paper); border:1px solid var(--cream-4); border-radius:var(--r);
min-width:86px; padding:14px 10px; text-align:center; box-shadow:0 6px 18px rgba(75,51,52,.08)}
.cd-big .unit b{display:block; font-family:var(--font-head); font-weight:700; font-size:2.2rem; line-height:1;
color:var(--brand); font-variant-numeric:tabular-nums}
.cd-big .unit span{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
/* Weggabelung / Recap */
.fork{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:var(--sp-8) 0}
.fork .opt{background:var(--paper); border:2px solid var(--cream-4); border-radius:var(--r); padding:30px 26px}
.fork .opt.win{border-color:var(--orange); box-shadow:0 14px 40px rgba(190,99,48,.18)}
.fork .opt h3{margin-bottom:14px}
.fork .opt ul{list-style:none; margin:0}
.fork .opt li{padding:6px 0 6px 26px; position:relative; font-size:.98rem}
.fork .opt.lose li::before{content:"✕"; position:absolute; left:0; color:var(--muted); font-weight:700}
.fork .opt.win li::before{content:"✓"; position:absolute; left:0; color:var(--success); font-weight:700}
.recap{background:var(--orange-tint); border:2px solid var(--orange); border-radius:var(--r); padding:30px 26px; box-shadow:0 14px 40px rgba(190,99,48,.14)}
.recap ul{list-style:none; margin:var(--sp-4) 0 0}
.recap li{padding:8px 0 8px 30px; position:relative; font-size:1.02rem}
.recap li::before{content:"✓"; position:absolute; left:0; top:8px; color:var(--success); font-weight:700}
.topnav>a{font-family:var(--font-body); font-size:.95rem; font-weight:600;
color:var(--brand); text-decoration:none; letter-spacing:.02em}
.topnav>a:hover{color:var(--orange-dark)}
/* ---- Basis-Regeln uebernommen aus homepage.html ---- */
em{font-style:italic}
.bg-routine-hero{background:radial-gradient(125% 85% at 50% -10%, var(--sale-tint), var(--cream) 62%)}
.btn-ghost{background:transparent; color:var(--paper); border:1px solid rgba(253,251,247,.5); box-shadow:none}
.btn-ghost:hover{background:rgba(253,251,247,.08)}
.cta-sub{font-size:.86rem; color:var(--muted); margin-top:12px; letter-spacing:.02em}
.hero-badge{margin-top:var(--sp-8)}
/* Sekundaerer Detail-Link unter dem Kauf-Button.
FLAG:DEVIATION (Sale-Owner, 2026-08-16): die Teaser-Karten hatten "Ansehen" als EINZIGE
Aktion - Preis sichtbar, aber kein Kaufweg. Primaer ist jetzt "In den Warenkorb"; das
Ansehen bleibt als sekundaerer Link erhalten, damit bundles.html# erreichbar bleibt. */
.bundle .detail-link{display:inline-block; margin-top:10px; font-family:var(--font-body);
font-size:.82rem; font-weight:600; color:var(--coffee-400); text-decoration:underline;
text-underline-offset:3px}
.bundle .detail-link:hover{color:var(--orange-dark)}
/* ===== Zickzag Content/Image ===== */
.zz-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center}
.zz-row.rev .zz-media{order:2}
/* `height:auto` ist hier NICHT kosmetisch, sondern das, was `aspect-ratio` ueberhaupt wirken
laesst. Dieselbe Falle steht oben bei .tile-band ausfuehrlich: sind Breite UND Hoehe aufgeloest,
ignoriert der Browser `aspect-ratio` stillschweigend — und aufgeloest ist die Hoehe schon durch
das `height`-ATTRIBUT am , das als Praesentations-Hinweis zaehlt, solange CSS keine Hoehe
setzt. Aufgefallen 21.8. beim Einbau der Echtfotos: die neuen tragen width/height gegen
CLS, und damit stand der Slot ploetzlich 840 px hoch (Attributwert) statt 474 px (4:3 aus 632 px
Breite) — object-fit:cover hat das nicht verzerrt, sondern die Szene hochkant beschnitten, was
als „falscher Ausschnitt" und nicht als Layoutfehler aussieht. Wer hier width/height am Bild
ergaenzt, braucht diese Zeile. */
.zz-media img{width:100%; height:auto; border-radius:16px; object-fit:cover; aspect-ratio:4/3; display:block}
/* Echtfoto-Slots (L-04/L-05): dediziertes Mobil-Crop statt skaliertem Desktop-Ausschnitt (V-10).
.zz-row wird erst unter 820px einspaltig, deshalb eigener Breakpoint statt des 640px-Werts
von .alltag-bild. */
.zz-media picture{display:block}
.zz-media picture img{aspect-ratio:4/3}
@media(max-width:820px){.zz-media picture img{aspect-ratio:3/4}}
/* Echtfoto ohne Mobil-Derivat: Deckel statt zweiter Datei.
Die beiden Marken-Fotos in .zz-media (Granola-Flatlay, Sortiment) haben KEIN eigenes
Mobil-Crop mehr — die /-Konstruktion ist mit den Bühnen weggefallen.
Unter 820 px wird .zz-row einspaltig, das Bild bekommt dann die volle Spaltenbreite:
bei 820 px Viewport sind das 749 px Anzeige gegen 1120 px Datei = 1,50x und damit ein
klarer V-10-Bruch (gemessen, nicht geschaetzt). Vorher hat der 3:4-Mobilschnitt das
abgefangen.
Statt eine zweite Datei je Slot zu pflegen, wird die Anzeige gedeckelt: 560 px sind
exakt die Haelfte der 1120-px-Ableitung, also durchgehend 2,00x. Das ist dasselbe
Mittel, das .alltag-bild unter 640 px schon benutzt (max-width:450px) — und es hat den
Nebeneffekt, dass das Bild im Einspalter zentriert statt randlos steht, was neben der
linksbuendigen Textspalte ruhiger wirkt.
Warum eine eigene Klasse und nicht `.zz-media img`: in derselben Regel haengen die
Bundle-Packshots in .product-soft. Die haben andere Quellbreiten (1000 px) und ein
eigenes Wrapper-Layout — ein gemeinsamer Deckel wuerde sie mit verschieben, ohne dass
das hier geprueft waere. Wer weitere Echtfotos in .zz-media haengt: Klasse mitgeben und
den Deckel gegen die eigene Ableitungsbreite nachrechnen (Deckel = Breite / 2). */
@media(max-width:820px){.zz-media img.zz-foto{max-width:560px; margin-left:auto; margin-right:auto}}
.zz-stat{font-family:var(--font-head); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem); color:var(--orange-dark); line-height:1; margin-bottom:6px}
.review-wall{columns:3 250px; column-gap:22px}
.review-wall .tcard{break-inside:avoid; margin-bottom:22px}
/* ===== Logos-Reihe (Presse/Handel) ===== */
.logos-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--sp-8)}
/* Echte Logo-DATEIEN, gezogen aus dem LIVE-Theme glow25.de/de-de (Sektion lp_logo_list).
Damit ist der alte Form-Platzhalter "Wortmarken als Text" geschlossen: die Dateien sind
die, die die Marke selbst ausliefert — nicht generiert und nicht nachgezeichnet.
Bynder hat KEINE Presse-Logos, dort liegen nur die eigenen Glow25-Marken (40 Treffer,
alle Glow25_Logo_*). Higgsfield o.ae. faellt aus: eine fremde Wortmarke generieren ist
Markenrecht, nicht Bildproduktion.
Anzeige auf 58 px begrenzt, weil der Shopify-Master nur 120x120 ist — width=1200 liefert
unveraendert 120 px zurueck. 120/58 = 2,07x DPR, damit ist V-10 erfuellt, OHNE die
Wortmarke durch einen generativen Upscaler zu schicken: der verformt Letterformen, und
bei einer fremden Marke ist das nicht nur haesslich.
Graustufe + .6 Deckkraft ersetzt das fruehere opacity:.6 der ganzen Reihe und haelt die
Leiste in der Cream-Palette (Women's Health ist im Original magenta). Hover zeigt das
Original — die Marke wird also nicht dauerhaft veraendert dargestellt. */
.logo-link{display:block; line-height:0}
/* mix-blend-mode:multiply, weil die Shopify-Dateien einen WEISSEN Hintergrund haben und
keinen transparenten. Ohne das Blending sass jedes Logo als weisser Kachelblock auf der
Cream-Flaeche — im Screenshot sofort sichtbar, und kein Nachtraegliches Freistellen
noetig: multiply laesst Weiss verschwinden und behaelt die dunkle Wortmarke.
AUSNAHME Gala, im Desktop-Screenshot als grauer Kasten aufgefallen: Gala ist die einzige
der sechs Marken, die ihre Wortmarke WEISS AUS EINER FARBFLAECHE ausspart. Gemessen im
Original presse-gala.png: Rand 255,254,253 / Platte 232,105,94 (rot) / Schrift weiss,
Platte bei x 10..109, y 35..85. multiply kann daran nichts retten — es entfernt Weiss,
und Weiss ist hier die Schrift, nicht der Hintergrund. Danach macht grayscale(1) aus der
roten Platte ein mittleres Grau: ein grauer Block mit weisser Schrift.
Loesung: presse-gala-dunkel.png, mechanisch aus dem Original umgerechnet (scripts-Notiz
in assets/presse/HERKUNFT.md). Umgerechnet wird nur die FARBE, ueber die Sattigung als
Mischfaktor: gesaettigt (Platte) -> Weiss, ungesaettigt (Schrift) -> Schwarz wie
presse-gq.png, Kanten blenden. Die Buchstabenformen bleiben Pixel fuer Pixel unangetastet
— das ist bei einer fremden Wortmarke der entscheidende Punkt, ein Nachzeichnen waere
Markenrecht. 4802 Pixel betroffen, alles innerhalb der gemessenen Platte. */
.logo-link img{height:58px; width:auto; display:block; mix-blend-mode:multiply;
filter:grayscale(1); opacity:.6; transition:opacity .2s ease, filter .2s ease}
.logo-link:hover img{filter:grayscale(0); opacity:1}
/* Mobil: 6 x 46 px + 5 x 24 px Gap = 396 px passen nicht in die 335 px Innenbreite,
die Reihe brach 4+2 um und liess ein sichtbares Loch. 40 px Hoehe und 10 px Gap
ergeben 240 + 50 = 290 px — eine geschlossene Reihe. */
@media(max-width:640px){.logos-row{gap:10px}.logo-link img{height:40px}}
/* ===== USP-Grid ===== */
.usp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6)}
.usp{text-align:center; padding:var(--sp-4)}
.usp .ic{font-size:2rem; margin-bottom:10px}
.usp h3{font-size:1.05rem; margin-bottom:6px}
.usp p{font-size:.9rem; color:var(--coffee-400); margin-bottom:0}
.nav-item--mega{display:flex; align-items:center; height:56px}
.nav-caret{font-size:.7em; margin-left:4px; color:var(--muted)}
.mega{position:absolute; left:0; right:0; top:calc(100% - 1px); z-index:55; background:var(--paper);
border-bottom:1px solid var(--cream-4); box-shadow:0 26px 50px rgba(75,51,52,.16);
opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s}
.nav-item--mega:hover .mega, .nav-item--mega:focus-within .mega{
opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s}
.mega-inner{max-width:var(--wide); margin:0 auto; padding:var(--sp-6) 28px;
display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4)}
.mega-card{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
gap:4px; background:var(--cream-2); border:1px solid var(--cream-4); border-radius:var(--r);
padding:var(--sp-4); text-decoration:none;
transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease}
.mega-card:hover{transform:translateY(-2px); border-color:var(--orange-light); box-shadow:0 10px 26px rgba(75,51,52,.12)}
.mega-card img{width:128px; height:128px; object-fit:contain; margin-bottom:6px}
.mega-name{font-family:var(--font-head); font-weight:600; font-size:.98rem; line-height:1.25; color:var(--brand)}
.mega-price{font-size:.92rem}
.mega-price s{color:var(--muted); font-weight:500; margin-right:6px}
.mega-price b{color:var(--brand); font-weight:700}
.mega-all{grid-column:1/-1; justify-self:center; font-family:var(--font-body); font-weight:700;
font-size:.95rem; letter-spacing:.02em; color:var(--orange-dark); text-decoration:none; padding:6px 4px}
.mega-all:hover{color:var(--orange-darker); text-decoration:underline}
/* ===== Hub-Chip (fix unten links) ===== */
.hub-chip{position:fixed; left:16px; bottom:16px; z-index:70; display:inline-flex; align-items:center; gap:8px;
background:var(--paper); border:1px solid var(--cream-4); border-radius:100px; padding:9px 18px;
font-family:var(--font-body); font-weight:700; font-size:.86rem; color:var(--brand); text-decoration:none;
box-shadow:0 6px 18px rgba(75,51,52,.16)}
.hub-chip:hover{border-color:var(--orange-light); color:var(--orange-dark)}
/* ===== NEU 2026-08-17: "So funktioniert der Sale" + "Warum Routine" =====
Beide Sektionen sind im Merge neu entstanden und hatten im ersten Lauf
KEINE einzige CSS-Regel — sie liefen als unformatierter Fliesstext.
Styling bewusst aus den vorhandenen Tokens gebaut (--paper/--cream-4/--orange),
damit keine neue Designsprache entsteht. */
.sale-how{background:var(--cream-3)}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
margin-top:var(--sp-12); align-items:stretch}
.how-card{background:var(--paper); border:2px solid var(--cream-4); border-radius:var(--r);
padding:30px 26px; display:flex; flex-direction:column}
.how-num{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
border-radius:100px; background:var(--orange); color:#fff; font-family:var(--font-head);
font-weight:700; font-size:1.05rem; margin-bottom:14px}
.how-card h3{margin-bottom:8px; font-size:1.15rem}
.how-card p{margin:0; font-size:.95rem; color:var(--coffee-400)}
.how-note{margin:var(--sp-12) auto 0; max-width:900px; background:var(--paper);
border:1px solid var(--cream-4); border-left:4px solid var(--gold);
border-radius:var(--r); padding:30px 32px}
.how-note h3{margin-bottom:14px; font-size:1.15rem}
.how-list{list-style:none; display:grid; gap:12px}
.how-list li{position:relative; padding-left:26px; font-size:.95rem; color:var(--coffee-400)}
.how-list li::before{content:"\203A"; position:absolute; left:9px; top:-2px;
color:var(--orange); font-weight:700}
.sci-block{background:var(--cream-3)}
.sci-media{max-width:900px; margin:var(--sp-8) auto 0}
.sci-media img{width:100%; border-radius:var(--r); display:block; aspect-ratio:1800/1195; object-fit:cover}
.sci-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:var(--sp-12)}
.sci-item{background:var(--paper); border:2px solid var(--cream-4); border-radius:var(--r);
padding:28px 24px}
.sci-item h3{margin-bottom:8px; font-size:1.15rem}
.sci-item p{margin:0; font-size:.95rem; color:var(--coffee-400)}
/* ===== NEU 2026-08-17: Verlaengerungstag-Angebot (7.9.) =====
FLAG:PROCESS — .extension-block trug opacity:.55 fest in der Basis-Regel. Das war
fuer die alte "abgedunkelte Vorschau" gedacht; seit die Sektion bis zum 7.9. komplett
display:none ist, wuerde das Angebot am einzigen Tag, an dem es sichtbar ist, zu 55 %
durchscheinend rendern. Deshalb hier ueberschrieben: sichtbar = voll deckend.
Das ::before-Badge "Aktiv ab 06.09.2026" ist aus demselben Grund tote Regel und wird
neutralisiert — es kann einen Kunden nie erreichen, aber es traegt ein falsches Datum. */
.extension-block{opacity:1; border:none; padding:0; text-align:left}
.extension-block[data-active="false"]::before{content:none}
/* Fristen-Copy, die am 7. September nicht mehr stimmt, liegt zweimal im Markup:
data-tag="basis" fuer den 3.–6. September, data-tag="ext" fuer den Verlaengerungstag.
Es wird ausschliesslich display:none gesetzt, nie ein display-Wert zugewiesen - so
behaelt die jeweils sichtbare Variante genau das Layout ihrer eigenen Klasse
(li, summary, h2, span reagieren sonst unterschiedlich auf display:revert).
Die Klasse haengt am -Element und wird im gesetzt, also vor dem ersten
Rendern - sonst blitzen am 7. September beide Varianten kurz gleichzeitig auf. */
html:not(.ist-verlaengerungstag) [data-tag="ext"]{display:none}
html.ist-verlaengerungstag [data-tag="basis"]{display:none}
.ext-day{background:linear-gradient(180deg,var(--cream-3) 0%,var(--paper) 100%)}
.kicker-hot{background:var(--orange); color:#fff; border-color:var(--orange)}
.cd-clock-xl{display:inline-block; margin-top:var(--sp-8); font-family:var(--font-head);
font-size:2.4rem; font-weight:700; letter-spacing:.04em; color:var(--orange-dark)}
.ext-clocklabel{margin-top:4px; font-size:.85rem; color:var(--muted); letter-spacing:.04em}
.ext-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:34px; align-items:center;
margin-top:var(--sp-12); background:var(--paper); border:2px solid var(--orange);
border-radius:var(--r); padding:34px; box-shadow:0 18px 44px rgba(0,0,0,.07)}
/* Buehnen-Komposit (L-06): zwei echte Packshots auf der generierten Steinkante
buehne-verlaengerung.png. Positionen sind aus dem Master vermessen (nicht geschaetzt):
Standlinie = vordere Oberkante der Platten bei 86,5% der Buehnenhoehe = bottom:13,5%.
Luecke zwischen den Platten: 52,7%-67,0% der Breite, Mitte 59,5% (siehe HERKUNFT.md).
Das "+" ist ein HTML-Element in der Luecke, nie mitgeneriert (G-3). */
.ext-media{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:2688/1520;
background:var(--cream-3)}
.ext-media img.ext-stage{position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block}
.ext-sku{position:absolute; bottom:13.5%; width:auto; pointer-events:none;
filter:drop-shadow(9px 10px 14px rgba(70,50,25,.30))}
.ext-sku--sjp{left:26%; height:72%; transform:translate(-50%,16.3%); transform-origin:bottom center}
.ext-sku--balance{left:83.5%; height:52.4%; transform:translate(-50%,6.6%); transform-origin:bottom center}
.ext-plus{position:absolute; left:59.5%; bottom:24%; transform:translateX(-50%);
font-family:var(--font-head); font-size:1.8rem; font-weight:700; color:var(--orange);
text-shadow:0 1px 3px rgba(255,250,240,.8)}
.ext-offer h3{font-size:1.45rem; line-height:1.25; margin-bottom:10px}
.ext-h3-add{color:var(--orange-dark)}
.ext-offer .inhalt{font-size:.95rem; color:var(--coffee-400); margin-bottom:var(--sp-8)}
.ext-calc{list-style:none; border-top:1px solid var(--cream-4); margin-bottom:14px}
.ext-calc li{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
padding:11px 0; border-bottom:1px solid var(--cream-4); font-size:.95rem}
.ext-calc li span{color:var(--coffee-400)}
.ext-calc li b{white-space:nowrap; font-variant-numeric:tabular-nums}
.ext-calc .is-minus{color:var(--success,#3f7d4e)}
.ext-calc .is-total{border-bottom:none; font-size:1.15rem; padding-top:14px}
.ext-calc .is-total b{font-family:var(--font-head); font-size:1.6rem; color:var(--orange-dark)}
.ext-save{font-size:.95rem; margin-bottom:var(--sp-8)}
.ext-save s{color:var(--muted)}
.ext-fine{margin-top:14px; font-size:.8rem; line-height:1.6; color:var(--muted)}
/* ===== NEU 2026-08-17: Testimonial als Verkaufseinheit (Referenz-Set, Griff 3) =====
Die Zitat-Karte endet nicht mehr mit dem Zitat, sondern mit dem Bundle, um das es geht,
und einem Kaufweg. Der Trennstrich markiert die Naht zwischen Beweis und Angebot. */
/* BEFUND Screenshot 1280px: .tgrid stand auf align-items:start. Solange die Karten nur Zitate
waren, war der ausgefranste Unterrand egal. Jetzt endet jede Karte mit einem Kaufweg — und
drei Buttons auf drei verschiedenen Höhen lesen sich wie drei verschiedene Angebote.
Als KLASSE auf stretch gestellt (beide Review-Sektionen), damit margin-top:auto in .tbuy
ueberhaupt greifen kann und alle CTAs auf einer Linie sitzen. */
.tgrid{align-items:stretch}
.tcard-shop{display:flex; flex-direction:column}
.tcard-shop .who{margin-bottom:16px}
.tbuy{margin-top:auto; padding-top:14px; border-top:1px dashed var(--cream-4);
display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.tbuy-lbl{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.tbuy-name{font-family:var(--font-head); font-size:1rem; line-height:1.25; color:var(--brand)}
.btn-sm{padding:9px 16px; font-size:.8rem; margin-top:4px}
/* ===== NEU 2026-08-17: Garantie — Verzichts-Dreiklang + ehrlicher Geltungsbereich ===== */
.guar-list{list-style:none; margin:0 auto; padding:22px 0 0; max-width:620px; text-align:left}
.guar-list li{position:relative; padding:12px 0 12px 34px; border-bottom:1px solid var(--cream-4);
font-size:1rem; line-height:1.6}
.guar-list li:last-child{border-bottom:none}
.guar-list li::before{content:"✕"; position:absolute; left:6px; top:13px;
color:var(--orange-dark); font-size:.9rem; font-weight:700}
/* ===== QA-Schalter unsichtbar fuer Kunden (C-23) =====
BEFUND 2026-08-17: die Klasse .qa-only wurde zwar vergeben, hatte aber NIE eine CSS-Regel.
Der Kommentar "Kunden sehen diesen Schalter nie" war damit schlicht falsch: der Schalter
inklusive Beschriftung "Verlaengerungstag simulieren" stand fuer jede Besucherin im
gerenderten Text und hat das 7.9.-Special vorab verraten.
Ab jetzt: nur mit ?qa=1 in der URL sichtbar. */
.qa-only{display:none!important}
html.qa-mode .qa-only{display:block!important}
/* FLAG:PROCESS — der body traegt automatische Silbentrennung, h1/h2/h3 nehmen sich davon aus, Buttons bisher
nicht. Auf 390px wurde daraus "SJP-BUNDLE + BALAN-CE FUER 15 EUR SICHERN" — ein Trennstrich
mitten im Produktnamen. Als KLASSE fuer alle Buttons/Badges der Seite abgeschaltet, nicht
nur fuer den einen CTA: ein Handlungslabel darf nie getrennt werden. */
.btn,.btn-lg,.btn-sm,.kicker,.badge,.price-save,.tbuy-name,.tbuy-lbl,.pname,
.faq summary{hyphens:none; -webkit-hyphens:none}
/* .faq summary gehoert in dieselbe Klasse: eine ist ein Bedienelement, kein
Fliesstext. Auf 390px stand dort "kombinie-ren" und "gemop-pelt". Gilt fuer alle 14
FAQ-Eintraege, nicht nur fuer die zwei neu ergaenzten. */
/* BEFUND Screenshot 1280px: im Fliesstext wurde "Balance-Trio" zu "Bal-ance-Trio" getrennt —
die Trennung ist zusaetzlich falsch (deutsch waere "Ba-lance"). Ursache: die automatische
Silbentrennung des body greift auch auf Eigennamen. Als KLASSE geloest statt pro Stelle: .pname umschliesst
Produktnamen im Fliesstext und nimmt sie generell von der Silbentrennung aus. */
.pname{white-space:nowrap}
/* BEFUND Screenshot 1280px (21.8., M-02): in der Ring-Legende und der Vier-Punkte-Liste stand
"Balan-ce" bzw. "Ba-lance". Dieselbe Ursache wie eine Zeile darueber — nur greift .pname hier
nicht, weil die fuenf neu uebernommenen Module ihre Produktnamen NICHT in
fassen, sondern als nackten Text in Zellen und Listenpunkten fuehren. Zwei Wege waren moeglich:
rund vierzig Namen einzeln umspannen, oder die Zellen selbst als Klasse ausnehmen. Der zweite
Weg ist der robustere, weil eine spaeter ergaenzte Zeile automatisch mitgeschuetzt ist,
waehrend ein vergessenes genau den Fehler zurueckbringt, den .pname schon geloest hatte.
Erfasst sind alle namenstragenden Zellen der fuenf Module — nicht nur die zwei im Screenshot
sichtbaren Stellen (P-04).
Die Selektorliste ist gegen das Markup geprueft, nicht aus dem Gedaechtnis geschrieben: ein
erster Entwurf enthielt .rung-freq, .mx-head und .win-lbl — drei Klassen, die es auf dieser
Seite gar nicht gibt. Eine Regel fuer einen nicht existierenden Selektor ist stiller Ausfall:
sie sieht im Stylesheet nach Absicherung aus und schuetzt nichts. */
.hub-list,.hub-legend,.hub-core,.hub-stat,.rung h3,.rung-step,
.mx-cell--name,.mx-row--head .mx-cell,.mx-legend,.mx-mobile-label,
.st-name,.st-top,.st-pct,.st-key,.day-note,.win-foot{hyphens:none; -webkit-hyphens:none}
/* ===== NEU 2026-08-17: "Was ein Bundle im Alltag aendert" (Longform-Vertiefung) ===== */
.alltag{background:var(--paper)}
.alltag-list{display:grid; gap:18px; margin-top:var(--sp-12); max-width:940px; margin-left:auto; margin-right:auto}
.alltag-row{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;
background:var(--cream-3); border:1px solid var(--cream-4); border-radius:var(--r); padding:28px 30px}
.alltag-num{font-family:var(--font-head); font-size:1.6rem; font-weight:700; line-height:1;
color:var(--orange); opacity:.55}
.alltag-row h3{margin-bottom:8px; font-size:1.2rem}
.alltag-row p{margin:0 0 10px; font-size:.97rem; color:var(--coffee-400)}
.alltag-fix{margin:0!important; padding-top:10px; border-top:1px dashed var(--cream-4);
color:var(--brand)!important}
/* Alltag-Bild: bewusst STATISCH, kein Loop.
Zwei Renderversuche (19.8., je 45 Credits) sind an der Abnahme aus §7 gescheitert:
alltag-loop-desktop.mp4 CLOSURE 1,61 · MOTION 3,37 · 2,09x ⛔
alltag-loop-desktop-v2.mp4 CLOSURE 5,54 · MOTION 3,80 · 0,69x ⛔
Ursache ist die Komposition, nicht der Prompt: MOTION ist ein Bild-MITTELWERT, also
gewinnt grossflaechige Lichtwanderung gegen oertliche Bewegung. Der Hero besteht mit
4,76x, WEIL er fast leer ist — eine grosse Wand, ueber die Licht ziehen kann. Diese
Szene ist dicht (Haende, Tasse, Arbeitsplatte, Fenster); ihre einzigen Bewegungen
(Dampf, Fluessigkeit) sind klein und kontrastarm. Die Kachel-Diagnose in loop-qa.mjs
hat die Gegenthese "wird nur falsch gemessen" widerlegt: Kachel/Mittelwert ist bei
allen Dateien ~4,2. Vor einem dritten Versuch braucht es eine offenere Platte. */
.alltag-bild{margin:var(--sp-12) auto 0; max-width:940px; border-radius:var(--r);
overflow:hidden; line-height:0; box-shadow:0 16px 40px -22px rgba(60,42,20,.32)}
.alltag-bild img{width:100%; height:auto; display:block}
/* ================================================================
BUEHNEN-KOMPOSIT — echter Packshot auf echter Buehne
================================================================
STAND 21.8.: DIESER BLOCK IST AKTUELL UNBENUTZT. Kein Element traegt mehr
class="buehne" — die drei Komposit-Slots (2x buehne--alltag, 1x buehne--vertrauen)
sind durch echte Markenfotos aus assets/marken-fotos/web/ ersetzt worden, weil das
Overlay als aufgeklebt zu erkennen war (Begruendung jeweils am Bild im Markup).
Der Block bleibt trotzdem stehen, und zwar nicht aus Bequemlichkeit: die Kommentare
unten sind das Protokoll von zwei gescheiterten Loop-Renderings, der Rand-Messung an
den 700er-Packshots und drei verworfenen Sachet-Geometrien. Wer die Regeln neu gegen
einander abwaegen muss (V-09 verbietet gezeichnete Etiketten, G-3 verbietet Text im
Bild, der Sale-Owner will ein Produkt in jedem Bild), soll das hier nachlesen statt
es nachzuleiden. Wird der Komposit-Weg nicht mehr gebraucht, kann der Block als
Ganzes weg — dann aber bitte die Messwerte vorher nach
assets/buehnen/web/HERKUNFT.md retten.
Auftrag Sale-Owner 20.8.: "We 100% need a product in each image, preferrably
collagen original or plus. Adding a product on the left should be possible!"
Umgesetzt NICHT durch Neu-Generieren der Buehne, sondern als Komposit: die
fotografische Buehne bleibt unangetastet, darueber liegt der ECHTE, stickerfreie
Packshot. Das ist die einzige Variante, die drei Regeln gleichzeitig haelt:
V-09 — nie einen Packshot generieren (das Modell erfindet Etiketten),
G-6 — keine KI-Person (die Haende in L-04 bleiben die echte Aufnahme),
G-3 — kein Text/Preis im Bild.
Kosten: 0 Credits. Muster ist dasselbe wie bei .ext-sku (L-06), nur mit
Standlinie pro Buehne statt Podest.
Die Prozentwerte sind GEMESSEN (Chrome getBoundingClientRect je Buehne), nicht
geschaetzt. "bottom" ist die Standlinie = Unterkante Packshot auf der Platte:
L-04 Desktop Original left 16% · height 42% · bottom 26%
L-04 Mobil Original left 19% · height 32% · bottom 20%
L-05 Desktop Plus left 16% · height 44% · bottom 51%
L-05 Mobil Plus left 30% · height 44% · bottom 12%
Zwei Korrekturen nach der Sichtpruefung. Beide Stellen hatten die Rechnung bestanden
(kein Ueberlauf, alles im Rahmen) und das Bild nicht — deshalb stehen sie hier:
L-05 Desktop: vorher height 50% / bottom 49%. Oberkante bei 1 %, also formal drin, im
Bild lag die Beutel-Oberkante aber buendig an der Rahmenkante und sah abgeschnitten aus.
44/51 gibt 5 % Kopfluft und haelt die rechte Kante ~22 px vor der hinteren Tasse.
L-05 Mobil: vorher left 17% / height 30% / bottom 41%, also derselbe Platz wie auf dem
Desktop. Im Hochformat geht das nicht auf. Per Raster-Overlay auf der echten Buehne
(335x447) vermessen: die Wand-Kanten-Fuge liegt links bei ~60 % Hoehe, die hintere Tasse
steht mit Fuss auf 66 % und belegt x 18–33 %. Ein Beutel, der links DAHINTER Platz haette,
muesste schmaler sein als 18 % der Buehnenbreite — bei diesem Packshot unmoeglich. Folge
des alten Werts: der Fuss stand auf der WAND (Standlinie 59 %, Fuge 60 %) und die rechte
Kante schnitt in die hintere Tasse. Ein Overlay malt immer oben; es kann nur dort stehen,
wo nichts davor ist.
Deshalb auf Mobil in den VORDERGRUND links: Fuss bei 88 %, damit ist der Beutel das
vorderste Objekt und verdeckt Blatt und hintere Tasse voellig zu Recht. Die beiden
vorderen Tassen und der Loeffel bleiben frei. Bewusst in Kauf genommene Rest-Ungenauigkeit:
fuer diese Naehe waere der Beutel streng perspektivisch noch etwas groesser (Verhaeltnis
Beutel/Tasse 2,3 statt ~3,1) — groesser gerechnet verdeckt er die halbe Buehne, siehe
Variante F1 der Stellprobe vom 20.8.
Desktop und Mobil sind ZWEI EIGENE Aufnahmen (kein Crop derselben Datei) —
andere Kamera, andere Platte, andere Standlinie. Deshalb zwei Wertepaare, und
deshalb muessen die Umschaltpunkte exakt dem der Buehne folgen:
.alltag-bild schaltet bei 640px, .zz-media bei 820px. Wer das auf einen
gemeinsamen Breakpoint zieht, laesst den Packshot zwischen 640 und 820px in
der Luft stehen.
Warum eigene *-randlos-Derivate und nicht die vorhandenen 700er: sku-original.png
und sku-plus.png tragen 14% / 15,5% / 7,2% transparenten Rand (per Canvas
gemessen, siehe assets/packshots/HERKUNFT.md). Mit diesem Rand ist `bottom`
nicht die Standlinie, sondern Luft darunter — der Packshot schwebt sichtbar
ueber der Platte. Die randlosen Derivate sind auf die Alpha-Bounding-Box
beschnitten, damit `bottom` == Standlinie gilt.
Schatten zweistufig: enger Kontaktschatten, damit das Ding aufliegt, plus
weiter Streuschatten. Lichtrichtung in beiden Buehnen von links/hinten, der
Schlagschatten geht also nach rechts/unten — gleiche Richtung wie .ext-sku.
Ausnahme zur Sortierregel unten: die @media-Zeilen dieses Blocks stehen hier
und nicht im RESPONSIVE-Teil, weil Basis- und Breakpoint-Werte derselben
Standlinie nur zusammen lesbar sind. Sie stehen direkt hinter ihrer
Basisregel, gewinnen also bei gleicher Spezifitaet. */
.buehne{position:relative; overflow:hidden; border-radius:16px}
.alltag-bild .buehne{border-radius:0} /* Radius sitzt schon auf .alltag-bild */
.buehne>img.buehne-sku{position:absolute; width:auto; max-width:none; aspect-ratio:auto;
border-radius:0; box-shadow:none; pointer-events:none; z-index:1; display:block;
transform:translateX(-50%); transform-origin:bottom center;
filter:drop-shadow(4px 5px 5px rgba(72,52,28,.42))
drop-shadow(16px 20px 26px rgba(72,52,28,.26))}
.buehne--alltag>img.buehne-sku{left:16%; bottom:26%; height:42%}
@media(max-width:820px){.zz-media .buehne--alltag>img.buehne-sku{left:19%; bottom:20%; height:32%}}
@media(max-width:640px){.alltag-bild .buehne--alltag>img.buehne-sku{left:19%; bottom:20%; height:32%}}
/* L-05: EIN aufrecht stehendes Kollagen-Intensiv-Sachet auf der freien
Travertinflaeche rechts neben den Tassen. Auftrag 21.8.: "the one collagen
intensive ... standing perfectly upright with its front label facing the camera
exactly as printed in the references, packaging copied 1:1, never redrawn ...
no extra products, nothing lying flat."
Deshalb Montage und kein Re-Render (V-09): die Verpackung darf nicht neu
gezeichnet werden, also kommt sie als echter Shop-Freisteller in die Buehne.
Die Platte selbst erfuellt die Szenenbeschreibung schon (Travertin, warme beige
Wand, Licht von links, leere Wandflaeche oben rechts als Negativraum).
ZWEI VORZUSTAENDE WURDEN VERWORFEN — damit es niemand erneut probiert:
1) Flach liegend per rotateX. Der Freisteller ist eine Frontalaufnahme und hat
keine Information ueber die Oberseite. Bei transform-origin 50% 100% klappt
das Bild nach vorne ueber die Standkante, die Oberkante landet naeher an der
Kamera, das Etikett steht dadurch kopf ("glow25" auf dem Kopf). rotateX(-76deg)
bzw. rotateZ+180 als Gegenmittel: Etikett bleibt gedreht oder das Sachet
wandert aus der Buehne. rotateZ ~ +90deg: weisser Papierstreifen ohne Tiefe.
Ein liegendes Sachet braucht ein Aufsicht-Foto, keinen CSS-Trick.
2) Zwei stehende Sachets. Verworfen, weil der Auftrag genau EIN Produkt
verlangt ("no extra products").
Gemessene Buehnengeometrie (5%-Raster + Canvas-Sonden, 21.8., nicht geschaetzt):
Buehne rendert 526x395 px Desktop, 350x467 px Mobil.
Freie Travertinflaeche rechts der Tassen: Desktop ab ca. left 70%,
Standlinie ca. bottom 22%; Mobil ab ca. left 74%, Standlinie ca. bottom 18%.
Hoehe 31% / 28% der Buehne = ca. 1,6x Tassenhoehe. Das entspricht dem echten
Groessenverhaeltnis 13 cm Stick zu ca. 7 cm Tasse. Wer die Hoehe aendert,
zerstoert genau dieses Verhaeltnis.
LICHTRICHTUNG: von LINKS oben, Schatten laufen nach RECHTS unten. Der alte
Kommentar an dieser Stelle behauptete das Gegenteil ("Licht von rechts oben")
und die Schatten hatten negative X-Offsets. Am Fuss der vorderen Tasse
nachgemessen: falsch. Das Briefing sagt ebenfalls "daylight from the left".
ZWEI SCHATTEN, nicht einer. Ein drop-shadow kann die Silhouette nur parallel
versetzen — das liest sich als Wandschatten, nicht als Tischschatten. Deshalb:
· .bs-wurf = Bodenschatten. Gespiegelte, gestauchte und gescherte Silhouette:
scaleY(-.28) klappt sie um die Standkante nach vorn, skewX(-68deg) legt sie
nach rechts. NICHT rotateX nach rotateZ verwenden — rotateX staucht dann die
LAENGE statt der Tiefe, und der Schatten kollabiert zum Klecks am Fuss.
· .bs-kontakt = dunkler Kern direkt an der Standkante. Muss deutlich breiter
als das Sachet sein (left -30% / right -55%), sonst verschwindet er hinter
dem Objekt und das Sachet schwebt.
· .bs-ware traegt nur noch einen 1px-Saum, damit die Kante nicht ausgestanzt
wirkt. brightness/saturate/sepia zieht den neutralen Studio-Weissabgleich
ins warme Nachmittagslicht der Platte; ohne das sitzt das Sachet als kalter
heller Fleck auf dem Travertin.
blur() rechnet nur in px, nicht in %. Die Blur-Werte muessen daher pro
Breakpoint neu gesetzt werden — dafuer --bs-wblur / --bs-kblur. Wer sie
vergisst, bekommt mobil einen viel zu weichen Schatten. */
.buehne-steht{position:absolute; aspect-ratio:488/1864; pointer-events:none; z-index:1;
--bs-wblur:5px; --bs-kblur:3.5px}
.buehne-steht>img{position:absolute; inset:0; width:100%; height:100%; display:block;
max-width:none; border-radius:0; box-shadow:none}
.buehne-steht>span{position:absolute; display:block}
.buehne-steht>img.bs-wurf{transform-origin:50% 100%; transform:scaleY(-.28) skewX(-68deg);
filter:brightness(0) blur(var(--bs-wblur)); opacity:.28}
.buehne-steht>span.bs-kontakt{left:-30%; right:-55%; bottom:-5%; height:13%;
background:radial-gradient(50% 50% at 52% 50%, rgba(52,36,17,.7) 0%, rgba(52,36,17,0) 70%);
filter:blur(var(--bs-kblur))}
.buehne-steht>img.bs-ware{filter:drop-shadow(1px 1px 1px rgba(70,50,28,.34))
brightness(.97) saturate(1.06) sepia(.06)}
.buehne--vertrauen>.buehne-steht{left:73%; bottom:22%; height:31%}
@media(max-width:820px){
/* Mobil eigene Werte: andere Aufnahme, andere Standlinie. Hier NICHT weiter links —
sonst steht das Sachet vor der Loeffelschale bzw. auf dem Blatt (Stellprobe 21.8.). */
.buehne--vertrauen>.buehne-steht{left:77%; bottom:18%; height:28%;
--bs-wblur:3.5px; --bs-kblur:2.5px}
}
/* ================================================================
RESPONSIVE — ab hier ausschliesslich @media. Bewusst ans Ende sortiert:
Basis-Regeln aus den zusammengefuehrten Seiten duerfen die Breakpoints
der Zielseite niemals ueberholen (Cascade-Reihenfolge, siehe oben).
================================================================ */
/* FLAG:PROCESS — hier stand `.cd-text{display:none}`. Das war richtig, solange die Leiste
eine laufende Uhr trug und der Text nur Beiwerk war. Seit Feedback-Punkt 1+2 IST der Text
die Botschaft (Motto + Code + Enddatum) — ihn auf Mobil auszublenden liess dort nur noch
"✨ ROUTINE10" stehen, ohne Datum. Statt Ausblenden jetzt umbrechen: zwei Zeilen sind
billiger als eine fehlende Deadline. Gemessen bei 375px: 2 Zeilen, 44px -> 62px Leistenhoehe. */
@media(max-width:540px){
.cd-inner{gap:6px 8px; padding:7px 14px; font-size:.8rem; line-height:1.35}
.cd-text{opacity:.9}
.cd-code{padding:1px 7px}
}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
@media(max-width:900px){.bundles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bundles{grid-template-columns:1fr}}
/* FLAG:DEVIATION (Sale-Owner, 2026-08-14) — Megamenü-/Nav-Sec-CSS entfernt: One-Pager-Header
(siehe Kommentar beim HEADER-Markup oben) hat nur noch Logo + Warenkorb, kein Mega-Menü mehr. */
@media(max-width:540px){.topnav{gap:14px} .topnav>a,.topnav .nav-link{font-size:.85rem}}
@media(max-width:540px){.nl-form{flex-direction:column}}
@media(max-width:700px){.foot-cols{grid-template-columns:1fr}}
@media(max-width:640px){.sticky-cta.is-visible{display:flex} body{padding-bottom:84px}}
@media(max-width:640px){ section{padding:var(--sp-16) 0} .wrap,.col{padding:0 20px} }
@media(max-width:440px){.sc{width:100vw} .sc-item{grid-template-columns:52px 1fr auto}
.sc-item img{width:52px; height:52px}}
@media(max-width:900px){
.how-grid,.sci-grid{grid-template-columns:repeat(2,1fr)}
.ext-grid{grid-template-columns:1fr; gap:24px; padding:26px}
}
@media(max-width:560px){
.how-grid,.sci-grid{grid-template-columns:1fr}
.how-note{padding:24px 20px}
.how-card{padding:24px 20px}
.ext-grid{padding:20px; gap:20px}
.cd-clock-xl{font-size:1.9rem}
.ext-offer h3{font-size:1.2rem}
.ext-calc li{font-size:.9rem; gap:10px}
.ext-calc .is-total b{font-size:1.35rem}
.alltag-row{grid-template-columns:1fr; gap:8px; padding:22px 20px}
.alltag-num{font-size:1.25rem}
/* Der harte Umbruch der Headline ist fuer Desktop gesetzt; auf 390px erzeugt er
eine Zeile mit einem einzelnen Wort. Umbruch dort dem Textfluss ueberlassen. */
.alltag h2 br{display:none}
}
@media(max-width:560px){
.tbuy{align-items:stretch}
.tbuy .btn-sm{width:100%; text-align:center}
.guar-list li{padding-left:30px; font-size:.94rem}
}
/* ---- Responsive uebernommen aus lp1.html ---- */
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}
@media(max-width:760px){.foes{grid-template-columns:1fr}}
@media(max-width:820px){
.zz{grid-template-columns:1fr; gap:var(--sp-6); margin-bottom:var(--sp-12)}
.zz--rev .zz-media{order:0}
.zz .zz-media{max-width:420px; margin:0 auto}}
@media(max-width:540px){.cd-big{gap:8px} .cd-big .unit{min-width:64px; padding:10px 6px} .cd-big .unit b{font-size:1.6rem}}
@media(max-width:760px){.fork{grid-template-columns:1fr}}
@media(max-width:860px){.topnav .nav-sec{display:none}}
@media(max-width:540px){ .topnav>a{font-size:.85rem}}
@media(max-width:560px){
.sale-badge{white-space:normal; text-align:center; max-width:100%;
padding:6px 12px; font-size:.78rem; letter-spacing:.04em}}
/* ---- Responsive uebernommen aus homepage.html ---- */
@media(max-width:820px){.zz-row,.zz-row.rev{grid-template-columns:1fr} .zz-row.rev .zz-media{order:0}}
@media(max-width:820px){.usp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){ .mega{display:none} .nav-caret{display:none} .nav-item--mega{height:auto}}
@media(max-width:860px){.topnav .nav-sec{display:none}}
@media(max-width:640px){.hub-chip{bottom:calc(84px + env(safe-area-inset-bottom))}}
/* ---- Hero-Buehne mobil ----
Der Mobil-Loop ist 1080x1920 (9:16). Voll ausgespielt wuerde er bei 390px Viewport
693px hoch — ein Klotz, der den Wegweiser unter die Falz drueckt. Die Buehne laeuft
deshalb als 4:5-Fenster mit object-fit:cover; die Platte ist eine ruhige Ablage und
verkraftet den Beschnitt.
max-width:540px ist kein Geschmack, sondern V-10: die Quelle ist 1080 px breit, also
sind 540 px Anzeige genau 2,00x. Ohne die Grenze waere die Buehne am oberen Rand des
Breakpoints 640-40 = 600 px breit und damit nur 1,80x — auf einem 390-px-Telefon faellt
das nicht auf, auf einem 640-px-Fenster schon. Die Grenze greift nur zwischen 580 und
640 px Viewport; darunter rechnet 100%-40px von sich aus scharf (390 px -> 2,77x).
Die Standlinie der Ablage liegt im Mobil-Video hoeher als im Desktop-Video,
deshalb eine eigene bottom-Angabe statt einer geteilten. */
@media(max-width:640px){
.hero-stage{aspect-ratio:4/5; width:calc(100% - 40px); max-width:540px;
border-radius:14px; margin-top:var(--sp-8)}
/* ENTFERNT 21.8. — der mobile Sonderwert der Packshot-Ebene (`height:56%; bottom:28%;
left:34%`) samt Rechnung. Er war auf hero-kaffee-mobile.jpg (1744x2336) gemessen und
hing an der Position von Tasse und Kapseln in genau diesem Crop. Das Bild ist ersetzt,
die Ebene ist weg — siehe Hero-Markup. Der eigentliche Merksatz aus dieser Rechnung
bleibt trotzdem gueltig und ist deshalb hier festgehalten: Packshot-Prozente sind
buehnenspezifisch. Der Mobil-Crop stand naeher an der Szene und brauchte 56 % statt
der 62 % auf Desktop — wer solche Werte von einer Buehne auf die naechste kopiert,
bekommt ein falsches Groessenverhaeltnis, und das entlarvt eine Montage genauso
sicher wie ein falscher Schatten. */
/* Dieselbe Rechnung wie bei .hero-stage, nur mit anderen Zahlen: der Mobil-Crop ist
900 px breit, also sind 450 px Anzeige genau 2,00x. Ohne die Grenze waere das Bild
bei 640 px Viewport 640-56 = 584 px breit und damit 1,54x. Betroffenes Band etwa
450-640 px; auf einem 390-px-Telefon sind es 334 px Anzeige = 2,69x. */
.alltag-bild{max-width:450px}
}
/* ===== v-neu ===== */
/* =====================================================================
Neue Bausteine fuer D/E/F. Alle Farben und Abstaende kommen aus den
Tokens der Seite - keine zweite Palette, keine zweite Schrift.
===================================================================== */
/* --- Floating Countdown-Header ------------------------------------- */
.cdtop{position:sticky;top:0;z-index:70;background:rgba(250,247,240,.86);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--cream-4);box-shadow:0 6px 22px rgba(75,51,52,.07)}
/* Beschriftung auf eigener Zeile: sonst wird sie mit der Uhr als Paar
zentriert, und die Kaesten sitzen sichtbar rechts der Mitte. */
.cdtop-in{max-width:var(--wide);margin:0 auto;padding:9px 18px;display:flex;
flex-direction:column;align-items:center;gap:7px}
.cdtop-lbl{text-align:center}
.cdtop-lbl{font-family:var(--font-body);font-weight:700;font-size:.76rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--coffee-400)}
.cdtop-uhr{display:flex;gap:8px}
/* Einheit RECHTS neben der Zahl statt darunter - macht die Leiste flacher
und schmaler (Rafael 25.8.). */
.cdtop-uhr .u{background:var(--paper);border:1.5px solid var(--brand);border-radius:11px;
padding:5px 9px;display:flex;align-items:baseline;gap:4px}
.cdtop-uhr .u b{font-family:var(--font-head);font-weight:700;font-size:1.28rem;
line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.cdtop-uhr .u span{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
color:var(--muted)}
.cdtop-code{font-family:var(--font-body);font-size:.78rem;color:var(--coffee-400);
border:1px dashed var(--orange-light);border-radius:100px;padding:5px 12px}
.cdtop-code b{color:var(--orange-dark);letter-spacing:.06em}
/* Beim Scrollen schrumpfen, damit auf dem Handy Platz bleibt. */
.cdtop-klein .cdtop-lbl{display:none}
.cdtop-klein .cdtop-in{padding:6px 18px}
.cdtop-klein .cdtop-uhr .u{padding:3px 7px}
.cdtop-klein .cdtop-uhr .u b{font-size:1.02rem}
@media (max-width:560px){
.cdtop-in{gap:7px 10px;padding:8px 12px}
.cdtop-lbl{flex:1 1 100%;text-align:center;font-size:.66rem}
.cdtop-uhr{gap:6px}
.cdtop-uhr .u{padding:4px 7px;gap:3px}
.cdtop-uhr .u b{font-size:1.1rem}
.cdtop-code{font-size:.7rem;padding:4px 10px}
}
/* --- Hero: mobil eine Spalte, ab 1000 px Text links / Bild rechts ---
Auf dem Handy soll es genau so aussehen wie vorher. Die Elemente sind
jetzt direkte Kinder der Section und haben damit den Innenabstand des
alten .col-Wrappers verloren - der wird hier zurueckgegeben, und die
Abstaende sind wieder die alten (Rafael 25.8.). */
.v-hero--split{display:grid;justify-items:center;text-align:center;
padding-left:20px;padding-right:20px}
.v-hero--split > *{max-width:640px;width:100%}
.v-hero--split .kicker{margin-bottom:14px}
.v-hero--split h1{margin:0 0 14px}
.v-hero--split h1 em,h2 em{font-style:italic;color:var(--orange-dark)}
.v-hero--split .lead{max-width:560px;margin:0 auto 20px}
.v-hero--split .btn-lg{margin-top:4px}
.v-hero--split .v-trust{margin-top:12px}
.v-buehne{position:relative;width:calc(100% - 20px);max-width:520px;margin:0 auto 22px;
border-radius:14px;overflow:hidden;aspect-ratio:4/3}
/* Die Breite ist gedeckelt, damit das 1600 px breite Foto nicht
hochskaliert und unscharf wird. */
@media (min-width:1000px){
/* Das Bild liegt absolut in der rechten Haelfte, es steht NICHT mehr im
Zeilenfluss des Grids. Vorher spannte es ueber alle Zeilen, war mit 589 px
hoeher als der Textblock, und der Ueberschuss verteilte sich auf die
Textzeilen: erst als Riesen-Pille um den Kicker, dann als Loch zwischen
Kicker und Headline. Jetzt bestimmt der Text die Hoehe, das Foto fuellt
die Flaeche und wird nur zugeschnitten (D-34). */
.v-hero--split{position:relative;grid-template-columns:minmax(0,1fr);
justify-items:start;text-align:left;align-content:center;
/* Vollflaechig wie der Hero auf glow25.de: keine 1440-px-Deckelung mehr,
die Section laeuft ueber die ganze Fensterbreite und waechst mit. Der
Innenabstand links skaliert mit (6vw, gedeckelt), damit der Text auf
breiten Schirmen nicht an der Kante klebt. Das Bild liegt absolut in
der rechten Haelfte und fuellt deshalb automatisch bis zum Rand. */
min-height:clamp(560px,72vh,900px);
max-width:none;margin:0;
padding:clamp(48px,6vw,88px) 0 clamp(48px,6vw,88px) clamp(24px,6vw,140px)}
/* Die Textspalte darf nie unter das Bild laufen. Das lief vorher ueber ein
padding-right von calc(50% + 40px) - und Prozent-Polster rechnen gegen
den ELTERN-Container, nicht gegen die Section. Sobald das Fenster breiter
als die 1440-px-Deckelung war, wurde das Polster groesser als die Section
selbst und die Textspalte fiel auf wenige Pixel zusammen (Rafael 26.8.:
"du hast den header auf desktop zerschossen"). Jetzt begrenzt eine
max-width die Kinder, und die rechnet gegen die Section. */
.v-hero--split > *{max-width:min(560px, calc(50% - 72px));align-self:start}
/* Die Kicker-Pille erbte vom Handy-Layout width:100% und lief deshalb
ueber die ganze Textspalte. Auf Desktop schliesst sie hinter dem Wort ab. */
/* Rafael 26.8. mit dem Ziehgriff gesetzt: die Headline traegt oben 12 px
und unten 18 px. Der Kicker gibt seinen Rand deshalb ab, sonst kaemen
18 + 12 = 30 px heraus. */
.v-hero--split .kicker{margin-top:0;margin-bottom:12px;width:auto;justify-self:start}
.v-hero--split h1{margin:0 0 18px}
.v-hero--split .lead{margin-left:0}
.v-hero--split .v-trust{margin-left:0;margin-bottom:0}
.v-hero--split .v-preisrow,.v-hero--split .v-bullets{justify-content:flex-start}
.v-hero--split .sb-badge{top:28px;right:28px}
.v-hero--split .v-buehne{position:absolute;top:0;bottom:0;left:50%;right:0;
width:auto;max-width:none;height:100%;margin:0;border-radius:0;aspect-ratio:auto}
}
/* Der Floater erscheint jetzt auch auf Desktop. Die Grundregel zeigte ihn
nur unter 640 px; ab dort laeuft er als mittige Leiste am unteren Rand. */
.sticky-cta.is-visible{display:flex}
@media (min-width:641px){
.sticky-cta{justify-content:center;gap:28px;padding:14px 24px;
box-shadow:0 -6px 24px rgba(75,51,52,.12)}
.sticky-cta .p{text-align:right}
body:has(.sticky-cta.is-visible){padding-bottom:84px}
}
/* Die Luft ueber "Bestseller Spar-Pakete" kam nicht vom Kopf-Block, sondern
vom Section-Polster (96 px). Rafael wollte 30 px weniger, also 66 px. Der
Rand am Kopf-Block allein hat deshalb kaum etwas bewegt. */
#bestseller{padding-top:56px}
/* Wegweiser-Kacheln: die Bundles stehen untereinander, jedes mit Pfeil und
als Sprunglink auf die passende Karte (Rafael 26.8.). */
.tile-ziele{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;text-align:left}
.tile-ziele li{margin:0}
.tile-ziele a,.tile-ziele li > span:only-child{display:flex;gap:7px;align-items:baseline;
font-size:.95rem;line-height:1.4;color:var(--orange-dark);text-decoration:none;
font-weight:600;hyphens:none;-webkit-hyphens:none}
.tile-ziele a:hover{text-decoration:underline}
.tile-ziele span[aria-hidden]{flex:0 0 auto;color:var(--orange-light)}
/* Sprungziel nicht unter den festen Kopf schieben */
article[id^="k-bdl_"]{scroll-margin-top:96px}
/* Weisse Section-Flaeche fuer den Wechsel-Rhythmus (Rafael 26.8.). Karten
auf dieser Flaeche behalten ihre Kontur, damit sie nicht verschwinden. */
.bg-weiss{background:var(--paper)}
.bg-weiss .d1,.bg-weiss .d2,.bg-weiss .d3,.bg-weiss .pk{border-color:var(--cream-4)}
.bg-weiss .sk-karte{box-shadow:0 3px 0 var(--brand)}
/* --- Desktop-Blatt: ein linksbuendiges, schmales Textblatt -----------
Rafaels Vorgabe an der SJP-Section: alle Elemente, Headline eingeschlossen,
haben links und rechts genau dieselbe Kante. Breite und Position nach dem
Vorbild der Ampullen-Salespage (salespage-v3): Wrap 1140 px zentriert, das
Textmass darin schmal und linksbuendig. Vorher lief das Blatt auf 880 px
und wirkte breitgezogen. */
@media (min-width:1000px){
#routine > .wrap, #wachstum > .wrap, #vertrauen > .wrap{
max-width:690px;margin:0 auto;padding-left:22px;padding-right:22px;text-align:left}
#routine > .wrap > *, #wachstum > .wrap > *, #vertrauen > .wrap > *{
width:100%;max-width:none;margin-left:0;margin-right:0}
#routine .mitte, #wachstum .mitte, #vertrauen .mitte{text-align:left}
/* Die Vertrauens-Section haengt ihren Inhalt in eine Zwischenschicht .tf -
das Blattmass muss deshalb dort greifen, nicht am Wrap-Kind. */
#vertrauen > .wrap > .tf{width:100%;max-width:none;margin-left:0;margin-right:0}
#vertrauen .tf-txt{text-align:left}
/* Gleiche Breite fuer ALLE Elemente der Vertrauens-Section, Foto
eingeschlossen (Rafael 26.8.). Das Bild lief vorher schmaler als der
Text. Hochformat wird als Querbahn zugeschnitten, nie gestaucht. */
#vertrauen .tf > *{width:100%;max-width:none;margin-left:0;margin-right:0}
#vertrauen .tf-bild{margin:22px 0}
/* Die Grundregel deckelt das Foto auf 420 px und zentriert es - auf
Desktop laeuft es jetzt ueber die ganze Blattbreite. */
#vertrauen .tf-bild img{width:100%;max-width:none;margin:0;height:auto;
aspect-ratio:4/3;object-fit:cover!important;object-position:center 28%;
border-radius:16px}
/* Bundle-Headline: gleicher Abstand oben und unten (Abstandsregel). */
#bundles .kicker{margin-bottom:0}
#bundles .pk-h2{margin:30px 0 0}
#bundles .sk-schritte{margin-top:30px}
#routine .lead, #wachstum .lead, #vertrauen .lead,
#routine .mitte-eng, #wachstum .mitte-eng, #vertrauen .mitte-eng{
max-width:none;margin-left:0;margin-right:0}
#routine .btn, #wachstum .btn, #vertrauen .btn{width:auto;display:inline-flex}
/* Text in der Routine-Section durchgehend linksbuendig, nur der Knopf
bleibt mittig (Rafael 26.8.). Die Abschluss-Absaetze laufen jetzt in
derselben Groesse wie der Lead oben, vorher waren sie kleiner. */
/* Rafael 26.8., zweiter Anlauf: der Fliesstext laeuft wieder auf dem Mass
der anderen Sections (1,24 rem = .lead), damit die Seite einheitlich
ist. Lead und Abschluss-Absaetze bleiben untereinander gleich gross. */
#routine .rs-schluss{text-align:left;max-width:none;margin-left:0;margin-right:0;
font-size:1.24rem;line-height:1.55}
#routine > .wrap > .mitte:last-child{text-align:center}
/* Die Lifestyle-Kacheln tragen auf Desktop eine etwas kleinere Headline. */
/* Auf dem Handy bleiben die 1,33 rem aus 5-final.py (Rafael wollte sie
dort groesser). Auf Desktop 15 % kleiner - dort wirken sie sonst
wuchtig. Das !important ist noetig, weil die Grundregel eines traegt. */
#wegweiser .tile-title{font-size:1.13rem!important;line-height:1.32}
#wegweiser .tile-sub{font-size:.95rem}
/* Die Mood-Fotos sind Hochformat. Ueber die volle Blattbreite waeren sie
ueber 900 px hoch - deshalb als Querbahn zugeschnitten, nie gestaucht
(D-34: nur croppen). */
#routine .rs-mood, #wachstum .rs-mood{margin:0 0 28px}
/* Rafael 26.8.: kein Zuschnitt mehr. Der 16/9-Streifen zeigte von einem
Hochformat-Foto nur ein Band um das Gesicht, das wirkte zu nah dran.
Jetzt laeuft das Foto in seinen eigenen Proportionen. */
/* Echte Proportionen der beiden Fotos, damit nichts zugeschnitten wird und
der Platz trotzdem reserviert ist: mood-frau-intensiv ist 1200x1500 (4:5),
das Fruehstuecksfoto 1400x787 (16:9). Mit aspect-ratio == Original ist
cover deckungsgleich, es wird also nichts weggeschnitten. */
/* Das Fruehstuecks-Foto ist 1400x787, also 16:9. Mit aspect-ratio == Original
wird nichts zugeschnitten, und der Platz ist reserviert. */
#routine .rs-mood img{width:100%;height:auto;aspect-ratio:16/9;
object-fit:cover!important;border-radius:16px}
#routine .rs-zitat{margin-left:0}
}
/* --- Presse-Logos groesser (Rafael, 25.8.) -------------------------
Vorher 58 px / 40 px mobil. Bei mehr Groesse trug die Deckkraft von .6
nicht mehr, die Marken sahen ausgewaschen aus - deshalb .74. */
.logo-link img{height:76px!important;opacity:.74}
.logos-row{gap:22px}
@media (max-width:720px){
.logo-link img{height:54px!important}
.logos-row{gap:16px}
}
/* Presse-Leiste: auf Desktop alle fuenf Logos in EINE Reihe. Im Markup
stehen sie in zwei Reihen (3+2), weil ein reiner Umbruch auf dem Handy
4+1 ergeben haette. display:contents loest die beiden Reihen-Container
auf, damit die fuenf Links direkte Flex-Kinder des Wraps werden. */
@media (min-width:1000px){
/* Die Logo-Kaesten sind 10 px hoeher als die Logos darin, der Leerraum
sitzt unten. Bei gleichem Polster oben und unten wirkt der Block deshalb
nach oben gerutscht - Rafael sieht ihn 10 px zu hoch. Deshalb oben 10 px
mehr, unten 10 px weniger: die Flaeche bleibt gleich hoch, der Inhalt
sitzt optisch mittig. */
section.presse-flach{padding-top:56px!important;padding-bottom:36px!important}
.presse-flach > .wrap{display:flex;flex-wrap:wrap;justify-content:center;
align-items:center;column-gap:26px;row-gap:15px}
/* Rafael 26.8.: genau 15 px zwischen "Bekannt aus" und den Logos. Der
Abstand entstand vorher aus row-gap 26 plus 6 px Rand am Label. */
.presse-flach .presse-kopf{flex:1 1 100%;margin-bottom:0}
.presse-flach .logos-row{display:contents}
}
.v-buehne img{width:100%;height:100%;object-fit:cover;display:block}
.v-preisrow{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.v-preisrow b{font-family:var(--font-head);font-weight:700;font-size:2.6rem;line-height:1;
color:var(--brand);font-variant-numeric:tabular-nums}
.v-preisrow s{font-size:1.05rem;color:var(--muted)}
.v-chip{background:var(--pop-dark,#ae5f66);color:#fff;font-weight:700;font-size:.82rem;
letter-spacing:.04em;border-radius:100px;padding:5px 11px;white-space:nowrap}
.v-preis-note{font-size:.95rem;color:var(--coffee-400);margin:0 0 var(--sp-6);hyphens:none;-webkit-hyphens:none}
.v-preis-note b{color:var(--brand)}
.v-trust{font-size:.8rem;line-height:1.5;color:var(--muted);margin:14px auto 0;max-width:430px;
hyphens:none;-webkit-hyphens:none}
.v-trust span{opacity:.5;margin:0 2px}
.v-bullets{list-style:none;margin:var(--sp-8) auto 0;padding:0;max-width:440px;text-align:left;display:grid;gap:11px}
.v-bullets li{display:flex;gap:11px;align-items:flex-start;font-size:.98rem;line-height:1.5;
color:var(--coffee-400);hyphens:none;-webkit-hyphens:none}
.v-bullets li::before{content:'✓';flex:0 0 22px;width:22px;height:22px;border-radius:50%;
background:var(--orange-tint);color:var(--orange-dark);font-weight:700;font-size:.78rem;
display:flex;align-items:center;justify-content:center;margin-top:2px}
.v-bullets li b{color:var(--brand)}
/* --- Hilfsklassen -------------------------------------------------- */
.mitte{text-align:center}
.mitte-eng{max-width:560px;margin-left:auto;margin-right:auto}
/* Abstandsregel: unter dem Einleitungssatz genauso viel Luft wie ueber der
Headline - die h2 traegt 30 px oben und unten, also 30 px auch hier. */
.mitte .lead{margin-bottom:30px}
/* Headline-Abstand: 30 px oben und unten, symmetrisch. */
section h2{margin:30px 0}
.mitte .kicker+h2{margin-top:18px}
/* --- D: Kurve ------------------------------------------------------ */
.kurve{margin:0 auto var(--sp-8);max-width:660px;padding:0}
.kurve svg{width:100%;height:auto;display:block;overflow:visible}
.kv-gitter line{stroke:var(--cream-4);stroke-width:1}
.kv-linie{fill:none;stroke-linecap:round}
.kv-routine{stroke:var(--orange-dark);stroke-width:4}
.kv-einzeln{stroke:var(--muted);stroke-width:2.5;opacity:.7}
.kv-flaeche{opacity:0;transition:opacity 1.1s ease .5s}
.kv-marke circle{fill:var(--orange-dark)}
.kv-marke text{font-family:var(--font-body);font-size:15px;font-weight:700;fill:var(--brand);
text-anchor:middle}
.kv-achse text{font-family:var(--font-body);font-size:13px;fill:var(--muted)}
.kv-marke,.kv-achse{opacity:0;transition:opacity .6s ease .9s}
.kv-legende{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:14px 0 6px;
font-size:.82rem;color:var(--coffee-400)}
.kv-legende span{display:inline-flex;align-items:center;gap:7px}
.kv-legende span::before{content:'';width:22px;height:0;border-top:4px solid var(--orange-dark);border-radius:4px}
.kv-legende .kv-l2::before{border-top:2.5px solid var(--muted);opacity:.7}
.kurve figcaption{text-align:center;font-size:.74rem;color:var(--muted)}
/* Zeichnen: erst wenn die Figur im Bild ist. */
.kurve .kv-linie{stroke-dasharray:1400;stroke-dashoffset:1400}
.kurve.kv-an .kv-routine{animation:kvZeichnen 1.5s ease-out forwards}
.kurve.kv-an .kv-einzeln{animation:kvZeichnen 1.9s ease-out .25s forwards}
.kurve.kv-an .kv-flaeche{opacity:1}
.kurve.kv-an .kv-marke,.kurve.kv-an .kv-achse{opacity:1}
@keyframes kvZeichnen{to{stroke-dashoffset:0}}
.lz-drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
max-width:760px;margin:0 auto var(--sp-8)}
.lz-k{background:var(--paper);border:1.5px solid var(--cream-4);border-radius:14px;padding:16px 18px}
.lz-k b{display:block;font-family:var(--font-head);font-size:1.24rem;color:var(--brand);margin-bottom:6px}
.lz-k p{margin:0;font-size:.92rem;line-height:1.55;color:var(--coffee-400)}
.lz-k--stark{border-color:var(--orange-dark);box-shadow:0 3px 0 var(--orange-dark)}
.lz-k--stark em{font-style:italic;color:var(--orange-dark)}
.lz-unsicher{max-width:620px;margin:0 auto;background:var(--orange-tint);
border:1.5px solid var(--orange-light);border-radius:16px;padding:22px 24px}
.lz-unsicher h3{margin:0 0 8px;font-size:1.16rem;color:var(--brand)}
.lz-unsicher p{margin:0 0 12px;font-size:.96rem;line-height:1.6;color:var(--coffee-400)}
.lz-unsicher ul{margin:0 0 14px;padding-left:0;list-style:none;display:grid;gap:10px}
.lz-unsicher li{font-size:.95rem;line-height:1.55;color:var(--coffee-400);padding-left:18px;position:relative}
.lz-unsicher li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;
border-radius:50%;background:var(--orange-dark)}
.lz-unsicher li b{color:var(--brand)}
.lz-loesung{font-weight:600;color:var(--brand)!important}
/* --- D: Timeline als waagerechte Schiene --------------------------- */
.tls{position:relative;margin:0 0 var(--sp-6)}
.tls-schiene{height:5px;border-radius:100px;background:var(--cream-4);margin:0 4px 18px;overflow:hidden}
.tls-schiene i{display:block;height:100%;width:12%;border-radius:100px;
background:linear-gradient(90deg,var(--orange-light),var(--orange-darker));transition:width .25s}
.tls-reihe{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;
scrollbar-width:thin}
.tls-item{flex:0 0 232px;scroll-snap-align:start;background:var(--paper);
border:1.5px solid var(--cream-4);border-radius:14px;padding:16px;position:relative;
transition:border-color .3s,box-shadow .3s,transform .3s}
.tls-item.an{border-color:var(--brand);box-shadow:0 2px 0 var(--brand)}
.tls-punkt{position:absolute;top:-13px;left:16px;width:20px;height:20px;border-radius:50%;
background:var(--cream-4);border:3px solid var(--cream);transition:background .3s}
.tls-item.an .tls-punkt{background:var(--orange-dark)}
.tls-item b{display:block;font-family:var(--font-head);font-size:1.08rem;color:var(--brand);margin:4px 0 6px}
.tls-item p{margin:0;font-size:.88rem;line-height:1.55;color:var(--coffee-400)}
.tls-ab{text-align:center;font-weight:700;font-size:.95rem;color:var(--brand);margin:0}
/* --- E: Ritual-Aufmacher ------------------------------------------- */
.rit{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;
background:var(--cream-3);padding:0}
.rit-bild{position:relative;align-self:stretch;min-height:340px}
.rit-bild img{width:100%;height:100%;object-fit:cover;display:block}
.rit-marke{position:absolute;bottom:18px;left:18px;background:var(--brand);color:var(--cream);
border-radius:12px;padding:9px 14px;font-family:var(--font-body)}
.rit-marke b{display:block;font-family:var(--font-head);font-size:1.2rem;line-height:1}
.rit-marke span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.rit-txt{padding:var(--sp-8) 6% }
.rit-txt h2{margin:18px 0 20px}
.rit-txt p{font-size:1.02rem;line-height:1.65;color:var(--coffee-400);margin:0 0 12px;max-width:44ch}
.rit-txt p b{color:var(--brand)}
.rit-zitat{border-left:3px solid var(--orange-light);padding:2px 0 2px 16px;margin-top:20px}
.rit-zitat p{font-style:italic;margin:0 0 6px}
.rit-zitat span{font-size:.85rem;font-weight:700;color:var(--brand)}
@media (max-width:820px){
.rit{grid-template-columns:1fr}
/* align-self:stretch MUSS hier weg. Sonst bestimmt die Zeilenhoehe die
Hoehe des Bildkastens, die Zeile richtet sich nach dem Inhalt, und der
Inhalt ist ein img mit height:100% - der Kasten fiel auf ~90 px zusammen
und das Foto war unsichtbar. Mit align-self:auto greift aspect-ratio. */
.rit-bild{align-self:auto;min-height:0;aspect-ratio:4/3;order:-1}
.rit-txt{padding:var(--sp-8) 22px}
}
/* --- E: senkrechte Timeline (die abgenommene Fassung) --------------- */
.gr-tl{position:relative;padding-left:44px;max-width:620px;margin:0 auto}
.gr-tl-linie,.gr-tl-fuell{position:absolute;left:14px;top:8px;width:5px;border-radius:100px}
.gr-tl-linie{bottom:8px;background:var(--cream-4)}
.gr-tl-fuell{height:0;background:linear-gradient(var(--orange-light),var(--orange-darker));
transition:height .18s ease-out}
.gr-tl-item{position:relative;margin:0 0 16px}
.gr-tl-punkt{position:absolute;left:-44px;top:14px;width:28px;height:28px;border-radius:50%;
background:var(--brand);border:3px solid var(--cream-2);box-shadow:0 0 0 2px var(--cream-4);
transition:background .3s,box-shadow .3s}
.gr-tl-punkt::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;
justify-content:center;color:#fff;font-weight:700;font-size:14px;opacity:0;transition:opacity .3s}
.gr-tl-item.gr-an .gr-tl-punkt{background:var(--orange-dark);box-shadow:0 0 0 2px var(--orange-light)}
.gr-tl-item.gr-an .gr-tl-punkt::after{opacity:1}
.gr-tl-karte{background:var(--paper);border:1.5px solid var(--brand);border-radius:14px;
padding:14px 16px;box-shadow:0 2px 0 var(--brand)}
.gr-tl-karte b{display:block;font-family:var(--font-head);font-size:1.06rem;margin:0 0 6px;color:var(--brand)}
.gr-tl-karte p{margin:0;font-size:.93rem;line-height:1.55;color:var(--coffee-400)}
.gr-tl-ab{margin:22px auto 0;max-width:520px;font-size:.95rem;font-weight:700;text-align:center;color:var(--brand)}
.gr-tl-sub{max-width:520px;margin:0 auto var(--sp-6)}
@media (max-width:520px){
.gr-tl{padding-left:38px}
.gr-tl-linie,.gr-tl-fuell{left:11px}
.gr-tl-punkt{left:-38px;width:24px;height:24px}
}
/* --- E: Unsicherheits-Zweispalter ---------------------------------- */
.uns-zwei{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}
.uns-txt h2{margin:16px 0 18px}
.uns-txt p{font-size:1rem;line-height:1.65;color:var(--coffee-400);margin:0 0 12px}
.uns-txt p b{color:var(--brand)}
.uns-loesung{font-weight:600;color:var(--brand)!important}
.uns-bild img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block;aspect-ratio:4/3}
@media (max-width:820px){.uns-zwei{grid-template-columns:1fr}.uns-bild{order:-1}}
/* --- F: Monats-Tafeln --------------------------------------------- */
.mon-drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:0 0 var(--sp-6)}
.mon{background:rgba(255,255,255,.06);border:1px solid rgba(235,216,178,.28);border-radius:16px;
padding:20px 22px}
.mon-nr{font-family:var(--font-head);font-weight:700;font-size:3.4rem;line-height:1;
color:var(--gold-light);font-variant-numeric:tabular-nums}
.mon-lbl{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold);margin-left:8px}
.mon h3{margin:16px 0 8px;font-size:1.1rem;color:var(--paper)}
.mon p{margin:0;font-size:.93rem;line-height:1.6;color:var(--gold-light);opacity:.92}
.mon p b{color:#fff}
.mon-bar{height:6px;border-radius:100px;background:rgba(255,255,255,.14);margin-top:16px;overflow:hidden}
.mon-bar i{display:block;height:100%;width:0;border-radius:100px;
background:linear-gradient(90deg,var(--gold),var(--orange-light))}
.mon-drei.an .mon-bar i{width:var(--w);transition:width 1.4s cubic-bezier(.22,.8,.24,1) .3s}
.mon--stark{background:rgba(190,99,48,.16);border-color:var(--orange-light)}
.mon-fuss{text-align:center;font-size:.95rem;color:var(--gold-light);margin:0;opacity:.85}
/* --- F: Fragen + Schiene ----------------------------------------- */
.frg-drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 var(--sp-8)}
.frg{background:var(--paper);border:1.5px solid var(--brand);border-radius:16px;padding:20px 22px;
box-shadow:0 3px 0 var(--brand)}
.frg-q{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:50%;background:var(--brand);color:var(--cream);font-family:var(--font-head);
font-weight:700;font-size:1.15rem}
.frg h3{margin:14px 0 8px;font-size:1.06rem;color:var(--brand)}
.frg p{margin:0 0 10px;font-size:.93rem;line-height:1.6;color:var(--coffee-400)}
.frg-a{margin:0!important;font-weight:600;color:var(--orange-dark)!important;
border-top:1px dashed var(--cream-4);padding-top:10px}
.frg-rail{position:relative;display:flex;justify-content:space-between;gap:6px;
max-width:680px;margin:0 auto var(--sp-6);padding-top:22px}
.frg-rail i{position:absolute;top:8px;left:0;right:0;height:4px;border-radius:100px;
background:linear-gradient(90deg,var(--orange-light),var(--cream-4))}
.frg-rail span{position:relative;font-size:.72rem;font-weight:700;color:var(--coffee-400);
text-align:center;flex:1}
.frg-rail span::before{content:'';position:absolute;top:-18px;left:50%;transform:translateX(-50%);
width:11px;height:11px;border-radius:50%;background:var(--orange-dark);border:2px solid var(--cream-2)}
.frg-fuss{text-align:center;font-size:.98rem;color:var(--coffee-400)}
.frg-fuss a{font-weight:700;color:var(--orange-dark)}
/* --- Stufen: Karten (D) ------------------------------------------- */
.st-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.st-karte{background:var(--paper);border:1.5px solid var(--cream-4);border-radius:18px;
overflow:hidden;display:flex;flex-direction:column}
.st-bild{background:#ded4c4}
.st-bild img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.st-txt{padding:18px 20px 22px}
.st-nr{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.st-meter{height:5px;border-radius:100px;background:var(--cream-4);margin:8px 0 12px;overflow:hidden}
.st-meter i{display:block;height:100%;border-radius:100px;
background:linear-gradient(90deg,var(--orange-light),var(--orange-darker))}
.st-karte h3{margin:0 0 8px;font-size:1.16rem;color:var(--brand)}
.st-satz{margin:0 0 12px;font-size:.95rem;line-height:1.6;color:var(--coffee-400)}
.st-meta{margin:0 0 10px;font-size:.82rem;color:var(--muted)}
.st-meta span{opacity:.5}
.st-wem{margin:0;font-size:.88rem;font-weight:700;color:var(--orange-dark)}
/* --- Stufen: Zickzack (E) ----------------------------------------- */
.st-zz-liste{display:grid;gap:var(--sp-8)}
.st-zz{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:center}
.st-zz--rechts .st-zz-bild{order:2}
.st-zz-bild img{width:100%;display:block;border-radius:18px;aspect-ratio:4/3;object-fit:cover}
.st-zz-txt h3{margin:10px 0 12px;font-size:1.4rem;color:var(--brand)}
.st-zz-txt p{margin:0 0 10px;font-size:1rem;line-height:1.65;color:var(--coffee-400)}
@media (max-width:760px){
.st-zz{grid-template-columns:1fr}
.st-zz--rechts .st-zz-bild{order:0}
}
/* --- Stufen: Reiter (F) ------------------------------------------- */
.st-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 var(--sp-6)}
.st-tab{border:1.5px solid var(--cream-4);background:var(--paper);border-radius:14px;
padding:10px 16px;font-family:var(--font-body);font-weight:700;font-size:.86rem;
color:var(--coffee-400);cursor:pointer;display:flex;flex-direction:column;gap:2px;line-height:1.25}
.st-tab span{font-weight:500;font-size:.76rem;color:var(--muted)}
.st-tab.an{border-color:var(--brand);color:var(--brand);box-shadow:0 3px 0 var(--brand)}
.st-tab.an span{color:var(--orange-dark)}
.st-tafeln{position:relative}
.st-tafel{display:none;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:center}
.st-tafel.an{display:grid;animation:stRein .38s ease-out}
@keyframes stRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.st-tafel-bild img{width:100%;display:block;border-radius:18px;aspect-ratio:4/3;object-fit:cover}
.st-tafel-txt h3{margin:0 0 12px;font-size:1.5rem;color:var(--brand)}
.st-fakten{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.st-fakten li{display:flex;gap:12px;font-size:.93rem;border-top:1px solid var(--cream-4);padding-top:9px}
.st-fakten b{flex:0 0 84px;color:var(--brand)}
.st-fakten span{color:var(--coffee-400)}
@media (max-width:760px){.st-tafel.an{grid-template-columns:1fr}}
/* --- Sanftes Einblenden pro Section ------------------------------- */
.rv{opacity:0;transform:translateY(16px)}
.rv.rv-an{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.24,1)}
@media (prefers-reduced-motion: reduce){
.rv,.rv.rv-an{opacity:1;transform:none;transition:none}
.kurve .kv-linie{stroke-dashoffset:0}
.kurve .kv-flaeche,.kurve .kv-marke,.kurve .kv-achse{opacity:1}
.mon-drei .mon-bar i{width:var(--w)}
.st-tafel.an{animation:none}
}
/* ===== v-glowtag ===== */
/* ---------- gemeinsame Glow-Tag-Sprache ------------------------------
Naehrstoff-Chips sind das tragende Element: der Nutzen haengt an den
Zusatzstoffen, nicht am Kollagen. Deshalb sind sie ueberall gleich
gesetzt und immer mit dem Sternchen zur Fussnote verbunden. */
/* Silbentrennung aus. Der Browser hat "Glow25-Kollagen" zu "Glo-w25-
Kollagen" gebrochen - Markennamen duerfen nie getrennt werden. */
body,.wrap,.col,h1,h2,h3,p,li,dd,dt,span,b,em,i{hyphens:none;-webkit-hyphens:none}
.gt-naehr{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:10px 0 0}
.gt-n{font-family:var(--font-body);font-weight:700;font-size:.68rem;letter-spacing:.05em;
text-transform:uppercase;background:var(--orange-tint);color:var(--orange-dark);
border:1px solid var(--orange-light);border-radius:100px;padding:3px 9px;white-space:nowrap}
/* In den Produktkarten muessen drei Chips in EINE Reihe (Rafael 25.8.):
kleiner Schriftgrad, engere Sperrung, weniger Polster, kein Umbruch. */
.pk .gt-naehr{flex-wrap:nowrap}
.pk .gt-n{font-size:.55rem;letter-spacing:.02em;padding:2px 6px}
.gt-n-stern{color:var(--orange-dark);font-weight:700}
.claim-fuss{max-width:660px;margin:var(--sp-8) auto 0;border-top:1px solid var(--cream-4);padding-top:12px}
.claim-fuss p{margin:0 0 6px;font-size:.7rem;line-height:1.55;color:var(--muted)}
.claim-fuss b{color:var(--coffee-400)}
.gt-ohne{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:50%;border:1.5px dashed var(--cream-4);color:var(--muted);font-size:.66rem;
font-weight:700;text-transform:uppercase}
/* ---------- Ergebniskarte (G1 + G2) --------------------------------- */
.gt-erg{max-width:560px;margin:var(--sp-8) auto 0;background:var(--paper);
border:2px solid var(--brand);border-radius:18px;padding:20px 22px;box-shadow:0 3px 0 var(--brand)}
.gt-erg-leer{font-size:.95rem;color:var(--muted);text-align:center}
.gt-erg-kick{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--orange-dark);margin-bottom:10px}
.gt-erg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.gt-chip{background:var(--brand);color:var(--cream);font-size:.76rem;font-weight:700;
border-radius:100px;padding:5px 11px}
.gt-erg-bundle{border-top:1px dashed var(--cream-4);padding-top:14px}
.gt-erg-lbl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted)}
.gt-erg-bundle>b{display:block;font-family:var(--font-head);font-size:1.28rem;color:var(--brand);margin:4px 0 3px}
.gt-erg-inh{display:block;font-size:.86rem;color:var(--coffee-400);margin-bottom:10px}
.gt-erg-preis{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.gt-erg-preis b{font-family:var(--font-head);font-weight:700;font-size:1.9rem;line-height:1;color:var(--brand)}
.gt-erg-preis s{font-size:.92rem;color:var(--muted)}
.gt-erg-bundle .btn{width:100%}
.gt-erg--puls{animation:gtPuls .5s ease-out}
@keyframes gtPuls{0%{transform:scale(.985);box-shadow:0 3px 0 var(--orange-dark)}100%{transform:none}}
/* ---------- G1: Tagesbogen ----------------------------------------- */
.gt-bogen{display:grid;gap:14px;max-width:720px;margin:0 auto}
.gt-schritt{position:relative;background:var(--paper);border:1.5px solid var(--cream-4);
border-radius:16px;padding:16px 18px;transition:border-color .3s}
.gt-schritt.fertig{border-color:var(--orange-light)}
.gt-schritt::before{content:attr(data-nr);position:absolute;left:-11px;top:16px;width:26px;height:26px;
border-radius:50%;background:var(--brand);color:var(--cream);font:700 .82rem/26px var(--font-body);
text-align:center}
.gt-zeit{display:flex;align-items:baseline;gap:9px;margin:0 0 2px}
.gt-zeit b{font-family:var(--font-head);font-size:1.16rem;color:var(--brand);font-variant-numeric:tabular-nums}
.gt-zeit span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gt-frage{margin:0 0 12px;font-size:.95rem;color:var(--coffee-400)}
.gt-optionen{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.gt-optionen--zwei{grid-template-columns:repeat(2,1fr)}
.gt-opt{border:1.5px solid var(--cream-4);background:var(--cream-2);border-radius:13px;
padding:9px 10px 11px;cursor:pointer;text-align:left;font-family:var(--font-body);
display:flex;flex-direction:column;gap:3px;transition:border-color .2s,box-shadow .2s,background .2s}
.gt-opt img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;display:block;margin-bottom:5px}
.gt-opt b{font-size:.92rem;color:var(--brand)}
.gt-opt span{font-size:.74rem;color:var(--muted);line-height:1.35}
.gt-opt.an{border-color:var(--brand);background:var(--paper);box-shadow:0 3px 0 var(--brand)}
.gt-opt--flach{padding:12px}
.gt-opt--ohne{background:transparent}
@media (max-width:560px){
.gt-optionen,.gt-optionen--drei{grid-template-columns:1fr 1fr}
.gt-schritt::before{left:auto;right:14px;top:14px}
}
/* ---------- G2: Rollen -------------------------------------------- */
.gt-rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
align-items:start}
.gt-rolle{background:var(--paper);border:1.5px solid var(--cream-4);border-radius:18px;padding:16px}
.gt-rolle-kopf span{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--orange-dark)}
.gt-rolle-kopf b{display:block;font-family:var(--font-head);font-size:1.24rem;color:var(--brand);margin:3px 0 5px}
.gt-rolle-kopf p{margin:0 0 14px;font-size:.86rem;line-height:1.5;color:var(--muted)}
.gt-rk-liste{display:grid;gap:9px}
.gt-rk{border:1.5px solid var(--cream-4);background:var(--cream-2);border-radius:13px;padding:11px 12px;
cursor:pointer;text-align:left;font-family:var(--font-body);display:block;width:100%;
transition:border-color .2s,box-shadow .2s,background .2s}
.gt-rk-bild img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;display:block;margin-bottom:8px}
.gt-rk b{display:block;font-size:.98rem;color:var(--brand)}
.gt-rk-form,.gt-rk-port{display:block;font-size:.76rem;color:var(--muted);line-height:1.4}
.gt-rk-sub{display:block;font-size:.8rem;color:var(--coffee-400);margin-top:7px}
.gt-rk.an{border-color:var(--brand);background:var(--paper);box-shadow:0 3px 0 var(--brand)}
.gt-rk--flach,.gt-rk--ohne{background:transparent}
/* ---------- G3: Glow-Tag-Karten ----------------------------------- */
.gt-tage{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.gt-tag{background:var(--paper);border:1.5px solid var(--brand);border-radius:18px;padding:18px 20px 20px;
box-shadow:0 3px 0 var(--brand);display:flex;flex-direction:column}
.gt-tag header h3{margin:0 0 5px;font-size:1.22rem;color:var(--brand)}
.gt-tag header p{margin:0 0 14px;font-size:.88rem;line-height:1.5;color:var(--muted)}
.gt-plan{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gt-plan li{display:grid;grid-template-columns:88px 1fr;gap:10px;font-size:.88rem;line-height:1.5;
border-top:1px solid var(--cream-4);padding-top:9px}
.gt-plan b{font-family:var(--font-body);font-weight:700;color:var(--orange-dark);
font-variant-numeric:tabular-nums}
.gt-plan span{color:var(--coffee-400)}
.gt-tag-fuss{margin-top:auto;padding-top:14px;border-top:1px dashed var(--cream-4)}
.gt-tag-lbl{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gt-tag-fuss>b{display:block;font-family:var(--font-head);font-size:1.1rem;color:var(--brand);margin:3px 0 2px}
.gt-tag-inh{display:block;font-size:.8rem;color:var(--muted);margin-bottom:9px}
.gt-tag-fuss .btn{width:100%}
.gt-tag--a{border-color:#4b3334}.gt-tag--b{border-color:#BE6330}.gt-tag--c{border-color:#2C4B8E}
.gt-tag--d{border-color:#c9b389}.gt-tag--e{border-color:#ae5f66}.gt-tag--f{border-color:#2f7a4e}
.gt-tag--a{box-shadow:0 3px 0 #4b3334}.gt-tag--b{box-shadow:0 3px 0 #BE6330}
.gt-tag--c{box-shadow:0 3px 0 #2C4B8E}.gt-tag--d{box-shadow:0 3px 0 #c9b389}
.gt-tag--e{box-shadow:0 3px 0 #ae5f66}.gt-tag--f{box-shadow:0 3px 0 #2f7a4e}
/* ---------- Produkte kompakt -------------------------------------- */
.pk-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.pk{background:var(--paper);border:1.5px solid var(--cream-4);border-radius:16px;overflow:hidden;
display:flex;flex-direction:column;padding-bottom:12px}
/* Headline dieser Section groesser als die Standard-h2 (Rafael 25.8.). */
.pk-h2{font-size:clamp(2.1rem,6.2vw,3rem);line-height:1.1}
/* Rafael will die Headline auf Desktop in ZWEI Zeilen, Umbruch vor "dein".
Ein geschuetztes Leerzeichen hatte das Gegenteil bewirkt: es klebte
"Klick dein" zusammen und alles passte in eine Zeile. */
@media (min-width:1000px){ .pk-h2 .zl{display:block} }
.pk-h2 em{font-style:italic;color:var(--orange-dark)}
.pk-bild{background:#ded3c1;position:relative;overflow:hidden}
/* Wisch-Galerie fuer die Sorten. Reines Scroll-Snap, kein Skript noetig. */
.pk-dias{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pk-dias::-webkit-scrollbar{display:none}
.pk-dia{flex:0 0 100%;scroll-snap-align:center}
.pk-dia img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.pk-punkte{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px}
.pk-punkte i{width:6px;height:6px;border-radius:50%;background:rgba(75,51,52,.3)}
.pk-punkte i:first-child{background:var(--brand)}
/* Pfeil der Sorten-Galerie. Er nickt leicht nach rechts, damit man sieht,
dass hier mehr als ein Bild liegt (Rafael 26.8.: "sonst geht das unter"). */
.pk-pfeil{position:absolute;top:50%;right:8px;transform:translateY(-50%);
width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.92);color:var(--brand);
font:700 22px/1 var(--font-body),sans-serif;padding:0 0 3px 2px;
box-shadow:0 2px 8px rgba(75,51,52,.22);display:flex;align-items:center;
justify-content:center;z-index:3;animation:pkNick 1.9s ease-in-out infinite}
.pk-pfeil:hover{background:#fff}
@keyframes pkNick{0%,100%{transform:translateY(-50%) translateX(0)}
50%{transform:translateY(-50%) translateX(4px)}}
@media (prefers-reduced-motion:reduce){ .pk-pfeil{animation:none} }
.pk-punkte i.an{background:var(--brand)}
/* Stufen-Label auf dem Packshot. Nur die drei Kollagene tragen eines,
Balance nicht - es steht nicht in derselben Leiter. */
.pk-stufe{position:absolute;top:9px;left:9px;background:var(--orange-darker);color:#fff;
font-family:var(--font-body);font-weight:700;font-size:.62rem;letter-spacing:.1em;
text-transform:uppercase;border-radius:100px;padding:4px 9px}
/* Progression innerhalb EINER Farbfamilie: hell orange, orange, dunkel
orange. Die Intensiv-Kur steht damit visuell oben (Rafael 26.8.), das
Braun ist raus - es fiel aus der Reihe. Die helle Stufe traegt dunkle
Schrift, weil weiss darauf unter 4,5:1 Kontrast gefallen waere. */
.pk-stufe--1{background:#e8b98f;color:#6b3113}
.pk-stufe--2{background:var(--orange);color:#fff}
.pk-stufe--3{background:var(--orange-darker);color:#fff}
/* Balance steht nicht auf der Kollagen-Leiter und traegt deshalb das Rose
der eigenen Verpackung statt eine Stufe der Orange-Rampe. */
.pk-stufe--bal{background:var(--pop-dark);color:#fff}
.pk-bild img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.pk h3{margin:11px 13px 5px;font-size:17px;line-height:1.28;color:var(--brand)}
.pk-rolle{margin:0 13px 8px;font-size:.83rem;line-height:1.5;color:var(--coffee-400)}
.pk-meta{margin:0 13px;font-size:.72rem;line-height:1.45;color:var(--muted)}
.pk-meta span{opacity:.5}
/* Balance hebt sich mit einer leichten eigenen Flaeche ab - es steht nicht
in der Kollagen-Leiter. */
.pk--bal{background:#fbf2f1;border-color:#eedad6}
.pk--bal .pk-bild{background:#e6d5d1}
.pk-kein{margin:0 13px 0;font-size:.68rem;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:#ae5f66}
/* Fachliche Zusatzzeile, z. B. die Molmasse beim Tripeptid. */
.pk-zusatz{margin:0 13px 8px;font-size:.76rem;line-height:1.45;font-weight:600;
color:var(--orange-dark)}
.pk .gt-naehr{margin:9px 13px 0;gap:3px}
/* ---------- Etappen (gekuerzte Routine) --------------------------- */
.et{position:relative;list-style:none;margin:0 auto;padding:0 0 0 42px;max-width:600px}
.et-linie{position:absolute;left:13px;top:10px;bottom:10px;width:4px;border-radius:100px;
background:var(--cream-4);overflow:hidden}
.et-linie i{display:block;width:100%;height:0;border-radius:100px;
background:linear-gradient(var(--orange-light),var(--orange-darker));transition:height .2s ease-out}
.et-i{position:relative;margin:0 0 18px;opacity:.55;transition:opacity .35s}
.et-i.an{opacity:1}
.et-p{position:absolute;left:-42px;top:5px;width:26px;height:26px;border-radius:50%;
background:var(--cream-4);border:3px solid var(--cream);transition:background .35s}
.et-i.an .et-p{background:var(--orange-dark)}
.et-i b{display:block;font-family:var(--font-head);font-size:1.14rem;color:var(--brand);margin-bottom:4px}
.et-i p{margin:0;font-size:.94rem;line-height:1.6;color:var(--coffee-400)}
.et-ab{text-align:center;font-weight:700;font-size:.95rem;color:var(--brand);margin:6px 0 0}
/* ===== v-wachs ===== */
/* ---------- 1: Treppe (dunkel) ------------------------------------- */
.wt{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
align-items:end;max-width:660px;margin:0 auto var(--sp-6);padding-bottom:14px}
.wt-boden{position:absolute;left:0;right:0;bottom:14px;height:2px;background:rgba(235,216,178,.3)}
.wt-s{text-align:center;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.wt-emo{font-size:2rem;line-height:1;filter:saturate(1.1)}
.wt-balken{height:190px;position:relative}
.wt-balken i{position:absolute;left:0;right:0;bottom:0;border-radius:12px 12px 0 0;
background:linear-gradient(180deg,var(--gold),var(--orange-dark))}
/* Die Hoehe kommt inline vom Balken selbst - unabhaengig von jeder Kaskade. */
.wt-s b{font-family:var(--font-head);font-size:1.06rem;color:var(--paper)}
.wt-s p{margin:0;font-size:.82rem;line-height:1.5;color:var(--gold-light);opacity:.9}
.wt-ab{text-align:center;font-weight:700;font-size:.95rem;margin:0}
.bg-dark .wt-ab{color:var(--gold-light)}
@media (max-width:520px){
.wt{gap:8px}.wt-balken{height:140px}.wt-emo{font-size:1.6rem}
.wt-s p{font-size:.74rem}
}
/* ---------- 2: Kurve mit Emoji-Blasen (hell) ---------------------- */
.wk{margin:0 auto var(--sp-6);max-width:640px}
.wk-flaeche{position:relative}
.wk svg{width:100%;height:auto;display:block;overflow:visible}
.wk-gitter line{stroke:var(--cream-4);stroke-width:1}
.wk-fill{fill:var(--orange-tint);opacity:0;transition:opacity .9s ease .45s}
.wk-linie{fill:none;stroke:var(--orange-dark);stroke-width:4;stroke-linecap:round;
stroke-dasharray:900;stroke-dashoffset:900}
.wk-p{fill:var(--orange-dark);opacity:0;transition:opacity .4s ease}
.wt-an .wk-linie{animation:wkZeichnen 1.4s ease-out forwards}
.wt-an .wk-fill{opacity:1}
.wt-an .wk-p{opacity:1}
.wt-an .wk-p:nth-of-type(2){transition-delay:.5s}
.wt-an .wk-p:nth-of-type(3){transition-delay:.9s}
@keyframes wkZeichnen{to{stroke-dashoffset:0}}
.wk-blase{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-124%);
background:var(--paper);border:1.5px solid var(--brand);border-radius:100px;
padding:5px 11px 5px 8px;display:flex;align-items:center;gap:7px;white-space:nowrap;
box-shadow:0 2px 0 var(--brand);opacity:0}
.wt-an .wk-blase{opacity:1;transition:opacity .5s ease .7s}
.wk-blase span{font-size:1.15rem;line-height:1}
.wk-blase b{font-family:var(--font-body);font-size:.78rem;color:var(--brand)}
.wk figcaption{text-align:center;font-size:.72rem;color:var(--muted);margin-top:10px}
.wk-liste{list-style:none;margin:0 auto var(--sp-6);padding:0;max-width:600px;display:grid;gap:12px}
.wk-liste li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:2px;
align-items:start;background:var(--paper);border:1.5px solid var(--cream-4);border-radius:14px;
padding:13px 15px}
.wk-liste .wk-emo{grid-row:1 / span 2;align-self:center}
.wk-liste b,.wk-liste p{grid-column:2;min-width:0}
.wk-emo{font-size:1.7rem;line-height:1}
.wk-liste b{display:block;font-family:var(--font-head);font-size:1.04rem;color:var(--brand);margin-bottom:3px}
.wk-liste p{margin:0;font-size:.9rem;line-height:1.55;color:var(--coffee-400)}
@media (max-width:520px){ .wk-blase{padding:4px 8px;gap:5px} .wk-blase b{font-size:.7rem} }
/* ---------- 3: Treppenkarten ------------------------------------- */
.wp{position:relative;max-width:560px;margin:0 auto var(--sp-6);display:grid;gap:12px}
.wp-pfeil{position:absolute;left:26px;top:14px;bottom:14px;width:3px;border-radius:100px;
background:linear-gradient(180deg,var(--cream-4),var(--orange-dark))}
.wp-k{position:relative;display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
background:var(--paper);border:1.5px solid var(--brand);border-radius:16px;padding:15px 16px;
box-shadow:0 2px 0 var(--brand);
margin-left:calc(var(--i) * 14px);opacity:0;transform:translateY(14px)}
.wt-an .wp-k{opacity:1;transform:none;
transition:opacity .55s ease calc(var(--i) * .13s), transform .55s cubic-bezier(.22,.8,.24,1) calc(var(--i) * .13s)}
.wp-emo{font-size:2rem;line-height:1;text-align:center}
.wp-txt b{display:block;font-family:var(--font-head);font-size:1.1rem;color:var(--brand);margin-bottom:3px}
.wp-txt p{margin:0;font-size:.9rem;line-height:1.55;color:var(--coffee-400)}
.wp-stufe{font-family:var(--font-body);font-weight:700;font-size:.72rem;color:var(--muted);
align-self:start}
@media (max-width:520px){ .wp-k{margin-left:0;grid-template-columns:44px 1fr} .wp-stufe{display:none} .wp-pfeil{display:none} }
/* ---------- Glow-Fehler, Design 1: Ziffern ----------------------- */
.fz-liste{list-style:none;margin:0 auto;padding:0;max-width:620px;display:grid;gap:16px}
.fz{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;
border-top:1px solid var(--cream-4);padding-top:16px}
.fz:first-child{border-top:0;padding-top:0}
.fz-nr{font-family:var(--font-head);font-weight:700;font-size:2.6rem;line-height:.9;
color:transparent;-webkit-text-stroke:1.5px var(--orange-light);text-stroke:1.5px var(--orange-light)}
.fz h3{margin:0 0 6px;font-size:1.1rem;color:var(--brand)}
.fz p{margin:0 0 8px;font-size:.94rem;line-height:1.6;color:var(--coffee-400)}
.fz-fix{margin:0!important;font-weight:600;color:var(--orange-dark)!important;
border-left:3px solid var(--orange-light);padding-left:11px}
/* ---------- Glow-Fehler, Design 2: Fehler → Fix ------------------ */
.fp-liste{list-style:none;margin:0 auto;padding:0;max-width:720px;display:grid;gap:14px}
.fp{display:grid;grid-template-columns:34px 1fr 26px 1fr;gap:12px;align-items:center;
background:rgba(255,255,255,.05);border:1px solid rgba(235,216,178,.24);border-radius:16px;
padding:16px 18px}
.fp-nr{width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--brand);
font:700 .9rem/30px var(--font-body);text-align:center}
.fp-links h3{margin:0 0 5px;font-size:1rem;color:var(--paper)}
.fp-links p{margin:0;font-size:.86rem;line-height:1.55;color:var(--gold-light);opacity:.88}
.fp-pfeil{font-size:1.3rem;color:var(--orange-light);text-align:center}
.fp-rechts{background:rgba(190,99,48,.2);border:1px solid var(--orange-light);border-radius:12px;
padding:11px 13px}
.fp-rechts b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.fp-rechts p{margin:0;font-size:.88rem;line-height:1.5;color:var(--paper)}
@media (max-width:760px){
.fp{grid-template-columns:34px 1fr;gap:10px}
.fp-pfeil{grid-column:1;justify-self:center;transform:rotate(90deg)}
.fp-rechts{grid-column:2}
}
/* ---------- Glow-Fehler, Design 3: warmes Band ------------------- */
.fehl-warm{background:linear-gradient(180deg,var(--orange-tint),var(--sale-tint))}
.fb-liste{list-style:none;margin:0 auto;padding:0;max-width:620px;display:grid;gap:14px}
.fb{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;
background:var(--paper);border-radius:16px;padding:16px 18px;
box-shadow:0 6px 18px rgba(75,51,52,.07)}
.fb-x{width:34px;height:34px;border-radius:50%;background:#fbeceb;color:#ae5f66;
font:700 1rem/34px var(--font-body);text-align:center}
.fb h3{margin:0 0 6px;font-size:1.08rem;color:var(--brand)}
.fb p{margin:0 0 10px;font-size:.94rem;line-height:1.6;color:var(--coffee-400)}
.fb-fix{margin:0!important;display:flex;gap:9px;align-items:flex-start;font-weight:600;
color:var(--brand)!important;border-top:1px dashed var(--cream-4);padding-top:10px}
.fb-fix span{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#e7f5ec;
color:#21a050;font:700 .74rem/22px var(--font-body);text-align:center}
/* ===== v-stimmen ===== */
.st2-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.st2{background:var(--paper);border:1.5px solid var(--cream-4);border-radius:18px;
padding:20px 22px 22px;display:flex;flex-direction:column}
.st2-sterne{color:var(--star,#c9b389);letter-spacing:.14em;font-size:.98rem;margin-bottom:10px}
/* Die grosse Headline ist die Regel, nicht die Ausnahme: der Einwand steht
oben, das Zitat belegt ihn darunter. */
.st2 h3{margin:0 0 12px;font-family:var(--font-head);font-weight:700;font-size:1.24rem;
line-height:1.25;color:var(--brand)}
.st2 p{margin:0 0 12px;font-size:.96rem;line-height:1.65;color:var(--coffee-400)}
.st2 p b{color:var(--brand);font-weight:700}
.st2-wer{margin:0 0 14px!important;font-size:.88rem;font-weight:700;color:var(--brand)}
.st2-wer span{font-weight:500;color:var(--muted)}
.st2-bundle{margin-top:auto;border-top:1px dashed var(--cream-4);padding-top:13px}
.st2-bundle>span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted)}
.st2-bundle>b{display:block;font-family:var(--font-head);font-size:1.04rem;color:var(--brand);
margin:3px 0 10px}
.st2-bundle .btn{width:100%}
@media (max-width:520px){ .st2 h3{font-size:1.14rem} }
/* ===== v-trust ===== */
.tf{max-width:620px;margin:0 auto}
.tf-txt{text-align:center}
.tf-txt h2{margin:16px 0 22px}
.tf-bild{margin:0 0 20px}
.tf-bild img{width:100%;max-width:420px;height:auto;margin:0 auto;display:block;
border-radius:18px;aspect-ratio:4/3;object-fit:cover}
.tf-satz{margin:0;font-size:1.02rem;line-height:1.65;color:var(--coffee-400)}
.tf-satz b{color:var(--brand)}
/* ===== v-fein ===== */
/* Presse-Leiste flacher, Logos groesser, zwei Reihen (3 + 2). */
.presse-flach{padding-top:var(--sp-6)!important;padding-bottom:var(--sp-6)!important}
.presse-kopf{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px}
.presse-flach .logos-row{gap:26px;margin:0}
.presse-flach .logos-row--zwei{margin-top:16px}
.presse-flach .logo-link img{height:86px!important;opacity:.78}
@media (max-width:720px){
.presse-flach .logos-row{gap:16px}
.presse-flach .logo-link img{height:62px!important}
.presse-flach .logos-row--zwei{margin-top:10px}
}
/* Rabatt-Stempel im Stil der gelben Kreise auf den Paket-Bildern.
WICHTIG: keine Einzelkorrekturen mehr an den drei Zeilen. Ich hatte
"BIS ZU" per padding-left, "RABATT" per padding-right und die Zahl per
translateX nachgeschoben - drei verschiedene Achsen, dadurch wirkte der
Stempel verzogen. Jetzt zentriert die Flex-Spalte alle drei gleich, und
die Sperrung hinter dem letzten Buchstaben wird unten per
padding-left exakt zurueckgeholt. */
.sb-badge{
background:#f7f16b!important;
display:flex!important;flex-direction:column;align-items:center;justify-content:center;
gap:.14em;padding:0!important;
/* Dieselbe Typo-Achse wie die 19 Produktstempel: dort ist die Schrift
14,48 % der Stempelbreite. --bs/6.9 trifft genau das, damit Hero- und
Kartenstempel dasselbe Verhaeltnis Schrift zu Kreis haben. Vorher
--bs/9, also 31 % zu klein - daher die 6,47-px-Versalien. */
font-size:calc(var(--bs,112px)/6.9)!important;
/* Die -9deg stammen aus der Zeit, als der Stempel einen Glanz-Gradienten
trug und aufgeklebt wirken sollte. Der Gradient ist weiter oben
ueberschrieben; die flache Flaeche liest sich gedreht nur noch schief,
und keiner der 19 Kartenstempel ist gedreht. Also aufrecht. */
transform:none!important;
box-shadow:0 6px 16px rgba(75,51,52,.18)!important}
/* Die Sperrung haengt hinter dem letzten Buchstaben und zieht die Zeile
optisch nach links. padding-left in genau der Groesse der Sperrung hebt
das exakt auf - eine Achse fuer beide Zeilen, statt der frueheren
Einzelnudges auf drei verschiedenen Achsen. */
.sb-badge .u,.sb-badge .d{color:var(--brand)!important;margin:0!important;line-height:1.1;
font-size:.72em!important;letter-spacing:.12em;text-align:center;font-weight:700;
padding:0 0 0 .12em!important}
/* Der gleichmaessige gap oben war geometrisch korrekt und optisch falsch: die
Playfair-Ziffern sitzen tief in ihrer Zeilenbox. Gemessen bei --bs:112px lag
zwischen der Schrift von "BIS ZU" und der von "34" 14,20 px Luft, zwischen
"34" und "RABATT" nur 1,86 px - Faktor 7,6, obwohl beide Boxenabstaende
2,26 px betrugen. Ursache: ueber den Ziffern stehen 9,73 px leere Box, unten
ragt die Schrift 1,72 px aus der Box heraus. Korrigiert wird das an EINER
Achse und nur an der Zahl: -,245em oben, +,245em unten (= 6,16 px) macht
beide Abstaende zu 8,03 px. Die Summe ist null, deshalb bleiben "BIS ZU" und
"RABATT" exakt stehen und der Stempel behaelt seine Hoehenlage. In em, damit
der Handy-Stempel (--bs:96px) mitskaliert. */
.sb-badge .n{color:var(--brand)!important;margin:-.245em 0 .245em!important;padding:0!important;
line-height:1;font-size:1.55em!important;font-weight:600!important;
transform:none!important;justify-content:center;
font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-badge .n i{font-size:.52em;top:.2em}
/* Optische Mitte statt geometrischer: der Block "34 %" stand mittig, die
grossen Ziffern dadurch 9 px links davon, weil das kleine Prozentzeichen
rechts Breite belegt. Der Versatz ist in em gesetzt, damit er mitskaliert.
Dazu die uebliche Kompensation der Sperrung: letter-spacing haengt auch
hinter dem letzten Buchstaben und zieht Versalzeilen nach links. */
/* Headline: Rafaels Werte aus dem Inline-Editor (46,5 px, kein Abstand nach
oben, 18 px nach unten). Akzent auf "Glow-Ritual" statt auf "dir".
FLAG: 46,5 px ist ein fester Wert. Auf dem Handy sitzt er richtig, auf
breiten Schirmen bleibt die Headline damit klein - wenn sie mitwachsen
soll, waere clamp(2.4rem, 6vw, 3.4rem) die Stelle. */
.v-hero h1{font-size:46.5px;line-height:1.08;margin:0 0 18px}
.h-akz{color:var(--orange)}
/* Presse-Logos ohne Links. WICHTIG: mit dem ist auch
die Basis-Regel weggefallen, die mix-blend-mode:multiply und den
Graustufen-Filter trug - dadurch standen die weissen Kaesten der PNGs
sichtbar auf der Creme-Flaeche. Hier komplett neu gesetzt, damit der
Hintergrund wieder verschwindet. Groesse zurueck auf 86 px. */
.presse-flach .logo-bild{display:block;line-height:0}
.presse-flach .logo-bild img,.presse-flach .logo-link img{
height:86px!important;width:auto;display:block;
mix-blend-mode:multiply;filter:grayscale(1);opacity:.72}
@media (max-width:720px){
.presse-flach .logo-bild img,.presse-flach .logo-link img{height:62px!important}
}
.sk-karte--kompakt{margin-bottom:var(--sp-8)}
/* Gekuerzte Sale-Erklaerung: drei Zeilen statt drei Karten plus Kleingedrucktes. */
/* Eigenes warmes Band, damit der Block nicht auf der Creme-Flaeche
herumschwimmt, und die drei Schritte in EINER Karte statt frei stehend. */
.sk-band{background:linear-gradient(180deg,var(--sale-tint),var(--orange-tint))}
.sk-karte{list-style:none;margin:0 auto;padding:6px 22px 8px;max-width:600px;display:grid;gap:0;
background:var(--paper);border:1.5px solid var(--brand);border-radius:18px;
box-shadow:0 3px 0 var(--brand)}
.sk-karte li{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start;
border-top:1px solid var(--cream-4);padding:16px 0}
.sk-karte li:first-child{border-top:0}
.sk-karte span{width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--cream);
font-family:var(--font-head);font-weight:700;font-size:1.06rem;line-height:34px;text-align:center}
.sk-karte b{display:block;font-size:1rem;color:var(--brand);margin-bottom:3px}
.sk-karte p{margin:0;font-size:.92rem;line-height:1.55;color:var(--coffee-400)}
.sk-karte p b{display:inline;margin:0}
/* Die Lifestyle-Bundles standen ohne Rahmen frei auf der Flaeche, waehrend
die Bestseller weiter oben in Karten sitzen. Gleiche Kachel, damit die
Seite eine Handschrift hat (Rafael 25.8.). */
.zz{background:var(--paper);border:2px solid var(--cream-4);border-radius:var(--r);
padding:20px;align-items:center}
.zz .zz-media{margin:0}
.zz .product-soft{border-radius:10px;background:var(--cream-2)}
@media (min-width:761px){ .zz{padding:24px} }
.tile-band{object-position:50% 85%!important}
/* Wegweiser-Statements 10 % groesser (Rafael 25.8.): 1,05 -> 1,16 rem. */
/* Rafael 25.8.: 15 % groesser, war zu klein zum Lesen. */
.tile-title{font-size:1.33rem!important;line-height:1.3}
.tile-sub{font-size:1.04rem}
/* Banderole ueber dem Hero-Bundle: groesser und als rechteckiger Block im
Marken-Braun statt als kleine rosa Pille (Rafael 25.8.). */
.bundle .tagtop{background:var(--brand)!important;color:#fff!important;
border-radius:4px!important;font-size:.82rem!important;letter-spacing:.12em!important;
padding:9px 18px!important;top:-19px!important;line-height:1.35!important;
max-width:calc(100% - 24px);text-align:center;box-shadow:0 6px 18px rgba(75,51,52,.22)}
/* Logo als SVG. Die Datei ist 2000x867, also sehr breit - hier auf eine
feste Hoehe gebracht, damit sie in die 56-px-Topbar passt. */
.logo-svg{display:flex;align-items:center;line-height:0}
.logo-svg img{height:26px;width:auto;display:block}
@media (max-width:560px){ .logo-svg img{height:22px} }
/* Claim-Fussnote unter dem Hero. */
.claim-fuss{max-width:660px;margin:var(--sp-8) auto 0;border-top:1px solid var(--cream-4);padding-top:12px}
.claim-fuss p{margin:0 0 6px;font-size:.7rem;line-height:1.55;color:var(--muted)}
.claim-fuss b{color:var(--coffee-400)}
/* ===== v-dreiklang ===== */
/* Gemeinsam: Zeile mit Produkt links, Text rechts - auch auf dem Handy. */
.dk-liste,.dr-liste,.ds-liste{display:grid;gap:12px;max-width:640px;margin:0 auto}
.dk-zeile,.dr-zeile,.ds-zeile{display:grid;grid-template-columns:118px 1fr;gap:14px;
align-items:center;background:var(--paper);border:1.5px solid var(--cream-4);
border-radius:16px;padding:12px;overflow:hidden}
.dk-bild img,.dr-bild img,.ds-bild img,.bal-bild img{width:100%;height:auto;aspect-ratio:1;
object-fit:cover;border-radius:11px;display:block}
.dk-txt h3,.dr-txt h3,.ds-txt h3,.bal-txt h3{margin:3px 0 6px;font-size:1.06rem;line-height:1.25;
color:var(--brand)}
.dk-txt p,.dr-txt p,.ds-txt p,.bal-txt p{margin:0 0 8px;font-size:.9rem;line-height:1.55;
color:var(--coffee-400)}
.dk-meta{margin:0 0 8px!important;font-size:.74rem;color:var(--muted)}
.dk-meta span{opacity:.5}
.dk-rang,.dr-rang,.ds-rang,.bal-rang{font-size:.66rem;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--orange-dark)}
@media (max-width:430px){
.dk-zeile,.dr-zeile,.ds-zeile{grid-template-columns:96px 1fr;gap:11px}
}
/* A: Konzentrations-Balken aus drei Segmenten. */
.dk-meter{display:flex;align-items:center;gap:4px;margin:0 0 9px}
.dk-meter i{width:20px;height:7px;border-radius:3px;background:var(--cream-4)}
.dk-meter i.an{background:var(--orange-dark)}
.dk-meter b{margin-left:6px;font-family:var(--font-body);font-size:.64rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dk-zeile:first-child{border-color:var(--brand);box-shadow:0 2px 0 var(--brand)}
/* B: Rangliste mit Ziffer am Bild und Fortschrittsbalken. */
.dr-bild{position:relative}
.dr-stufe{position:absolute;top:-4px;left:-4px;width:26px;height:26px;border-radius:50%;
background:var(--brand);color:var(--cream);font:700 .8rem/26px var(--font-body);text-align:center}
.dr-bar{height:6px;border-radius:100px;background:var(--cream-4);margin:0 0 9px;overflow:hidden}
.dr-bar i{display:block;height:100%;border-radius:100px;
background:linear-gradient(90deg,var(--orange-light),var(--orange-darker))}
.dr-int{border-color:var(--brand);box-shadow:0 2px 0 var(--brand)}
/* C: Abstufung ueber die Flaeche - oben satt, unten hell. */
.ds-zeile{background:color-mix(in srgb, var(--orange-tint) calc(var(--t) * 26%), var(--paper))}
.ds-zeile[style*="--t:3"]{border-color:var(--brand);box-shadow:0 2px 0 var(--brand)}
/* Balance: bewusst andere Farbwelt, damit der Dreiklang und Balance nicht
als eine Reihe von vier gelesen werden. */
.bal-trenner{display:flex;align-items:center;gap:12px;max-width:640px;margin:22px auto 12px;
color:var(--muted)}
.bal-trenner::before,.bal-trenner::after{content:'';flex:1;height:1px;background:var(--cream-4)}
.bal-trenner span{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
white-space:nowrap}
.bal-karte{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center;
max-width:640px;margin:0 auto;padding:12px;border-radius:16px;
background:#eef4ef;border:1.5px solid #b9d3c1;box-shadow:0 2px 0 #b9d3c1}
.bal-karte .bal-rang{color:#2f7a4e}
.bal-karte .gt-n{background:#e2eee7;border-color:#b9d3c1;color:#2f7a4e}
@media (max-width:430px){ .bal-karte{grid-template-columns:96px 1fr;gap:11px} }
/* ===== v-garantie ===== */
.gar-band{background:var(--cream-2)}
.gar-box{max-width:620px;margin:0 auto;background:#eef6f0;border:1.5px solid #bcdcc6;
border-radius:20px;padding:26px 24px 24px;text-align:center}
.gar-badge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
width:74px;height:74px;border-radius:50%;background:#2f7a4e;color:#fff;margin-bottom:14px}
.gar-badge b{font-family:var(--font-head);font-weight:700;font-size:1.5rem;line-height:1}
.gar-badge{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.gar-box h2{margin:0 0 14px;font-size:clamp(1.5rem,4.6vw,2.1rem);line-height:1.2}
.gar-box p{margin:0 0 10px;font-size:1rem;line-height:1.65;color:var(--coffee-400)}
.gar-box p b{color:var(--brand)}
.gar-drei{margin:14px 0 0!important;padding-top:12px;border-top:1px solid #bcdcc6}
/* ===== v-routine ===== */
.rs-band{background:var(--cream-3)}
.rs-band h2 em{font-style:italic;color:var(--orange-dark)}
.rs-zitat{margin:0 auto var(--sp-8);max-width:560px;border-left:4px solid var(--orange-dark);
padding:4px 0 4px 18px;font-family:var(--font-head);font-style:italic;font-weight:600;
font-size:clamp(1.16rem,3.6vw,1.5rem);line-height:1.35;color:var(--brand)}
/* Hochformat statt Querschnitt: aus dem hochformatigen Original einen 4:3-
Streifen zu schneiden hatte sie oben und unten abgeschnitten. */
.rs-mood{margin:0 auto var(--sp-6);max-width:440px}
.rs-mood img{width:100%;height:auto;display:block;border-radius:18px;aspect-ratio:4/5;
object-fit:cover}
.rs-grafik{margin:0 auto var(--sp-6);max-width:600px;background:var(--paper);
border:1.5px solid var(--cream-4);border-radius:16px;padding:18px 20px}
.rs-grafik figcaption{margin:0 0 14px;font-size:.68rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted)}
.rs-grafik figcaption b{color:var(--orange-dark)}
.rs-zeile{display:grid;grid-template-columns:88px 1fr 66px;gap:10px;align-items:center;margin:0 0 10px}
.rs-zeile>span{font-size:.82rem;font-weight:600;color:var(--brand)}
.rs-bar{height:14px;border-radius:100px;background:var(--cream-2);overflow:hidden}
.rs-bar i{display:block;height:100%;border-radius:100px}
.rs-gut{background:linear-gradient(90deg,#8cc79b,#3f8f5b)}
.rs-mittel{background:linear-gradient(90deg,#efc474,#d9922c)}
.rs-schlecht{background:linear-gradient(90deg,#d99187,#b5473a)}
.rs-zeile>b{text-align:right;font-size:.9rem}
.rs-gut-t{color:#3f8f5b}.rs-mittel-t{color:#c8851f}.rs-schlecht-t{color:#b5473a}
.rs-schluss{max-width:560px;margin:0 auto 18px;text-align:center;font-size:1.02rem;
line-height:1.6;color:var(--coffee-400)}
.rs-schluss--cta{margin-bottom:var(--sp-6)}
.rs-schluss b{color:var(--brand)}
@media (max-width:430px){ .rs-zeile{grid-template-columns:74px 1fr 58px;gap:8px} }
/* ===== v-vorteile ===== */
.vt-kachel{max-width:600px;margin:0 auto;background:var(--paper);border:1.5px solid var(--brand);
border-radius:20px;padding:30px 28px 26px;box-shadow:0 3px 0 var(--brand);text-align:center}
.vt-kachel h2{margin:0 0 20px;font-size:clamp(1.4rem,4.4vw,1.9rem);line-height:1.25}
.vt-liste{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px;text-align:left}
.vt-liste li{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;line-height:1.6;
color:var(--coffee-400)}
.vt-liste li>span{flex:1}
.vt-liste li::before{content:'✓';flex:0 0 22px;width:22px;height:22px;border-radius:50%;
background:#e7f5ec;color:#21a050;font-weight:700;font-size:.78rem;display:flex;
align-items:center;justify-content:center;margin-top:2px}
.vt-liste b{color:var(--brand)}
.vt-kachel .btn{width:100%}
/* ===== v-bundles ===== */
/* Gemeinsam: Bild links, Daten rechts, Preis und Knopf unten. */
.bl-reihe,.bb-reihe{display:grid;gap:14px;max-width:660px;margin:0 auto}
.bt-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.bl,.bb{display:grid;grid-template-columns:132px 1fr;gap:16px;background:var(--paper);
border:1.5px solid var(--cream-4);border-radius:18px;padding:14px}
.bt{background:var(--paper);border:1.5px solid var(--cream-4);border-radius:18px;padding:16px;
display:flex;flex-direction:column}
.bl--hero,.bb--hero,.bt--hero{border-color:var(--brand);box-shadow:0 3px 0 var(--brand)}
.bl-bild img,.bb-bild img,.bt-bild img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;
display:block;background:var(--cream-2);border-radius:12px}
.bl h3,.bb h3,.bt h3{margin:2px 0 10px;font-size:1.08rem;line-height:1.25;color:var(--brand)}
.bl-preis{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:10px 0 4px}
.bl-preis b{font-family:var(--font-head);font-weight:700;font-size:1.62rem;line-height:1;color:var(--brand)}
.bl-preis s{font-size:.86rem;color:var(--muted)}
.bl-code{margin:0 0 10px;font-size:.74rem;color:var(--muted)}
.bl-code b{color:var(--orange-dark)}
.bl .btn,.bb .btn,.bt .btn{width:100%}
.bt .bl-preis{margin-top:auto}
/* A: Inhaltsliste, jede Zeile Produkt / Groesse / Reichweite. */
.bl-inhalt{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px}
.bl-inhalt li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;
font-size:.82rem;border-bottom:1px dotted var(--cream-4);padding-bottom:5px}
.bl-inhalt b{font-weight:600;color:var(--brand);line-height:1.3}
.bl-inhalt span{color:var(--muted);white-space:nowrap}
.bl-inhalt i{font-style:normal;font-weight:700;color:var(--orange-dark);white-space:nowrap}
.bl-reich{margin:0 0 8px;font-size:.8rem;font-weight:700;color:var(--brand)}
.bl-reich span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted)}
/* B: Reichweite als Balken. */
.bb-inhalt{margin:0 0 10px;font-size:.82rem;line-height:1.5;color:var(--coffee-400)}
.bb-inhalt span{color:var(--muted)}
.bb-balken{display:grid;gap:6px;margin:0 0 10px}
.bb-zeile{display:grid;grid-template-columns:56px 1fr 42px;gap:8px;align-items:center;font-size:.72rem}
.bb-zeile>span{color:var(--muted);font-weight:700}
.bb-bar{height:8px;border-radius:100px;background:var(--cream-4);overflow:hidden}
.bb-bar i{display:block;height:100%;border-radius:100px;
background:linear-gradient(90deg,var(--orange-light),var(--orange-darker))}
.bb-zeile>b{text-align:right;color:var(--brand)}
.bb-skala{font-size:.6rem;color:var(--muted);letter-spacing:.04em}
/* C: Datenblatt. */
.bt-daten{margin:0 0 10px;display:grid;grid-template-columns:78px 1fr;gap:6px 10px;font-size:.8rem}
.bt-daten dt{font-weight:700;color:var(--muted);font-size:.68rem;letter-spacing:.06em;
text-transform:uppercase;padding-top:2px}
.bt-daten dd{margin:0;color:var(--coffee-400);line-height:1.45}
.bt-daten dd em{font-style:normal;color:var(--muted)}
.bt-naehr{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.bt-naehr .gt-n{font-size:.55rem;letter-spacing:.02em;padding:2px 6px}
@media (max-width:430px){
.bl,.bb{grid-template-columns:104px 1fr;gap:12px;padding:12px}
.bl-inhalt li{grid-template-columns:1fr auto;font-size:.78rem}
.bl-inhalt i{grid-column:2}
}
/* ===== v-d ===== */
/* Drei Gruppen mit eigener Zwischen-Headline. */
.bg-gruppe{margin:0 0 var(--sp-8)}
.bg-gruppe:last-child{margin-bottom:0}
/* Rafael 26.8. mit dem Ziehgriff: 48 px ueber der Headline, 5 px darunter
bis zur Unterzeile. Die 48 kommen als padding-top, damit der Strich
oben bleibt, wo er ist. */
/* Rafael 26.8.: Strich oben raus, Headline mittig und etwas groesser. */
/* Rafael 26.8.: oben 30 px weniger (40 -> 10), unten 10 px mehr (30 -> 40). */
.bg-kopf{margin:10px 0 40px;padding:12px 0 0;text-align:center}
/* Gruppen-Ueberschriften rund 15 % groesser (Rafael 25.8.), gilt fuer alle
drei Gruppen. */
.bg-kopf h3{margin:0 0 15px;font-family:var(--font-head);font-weight:700;
font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--brand)}
.bg-kopf p{margin:0;font-size:1.02rem;color:var(--muted)}
/* Gemeinsam: groessere Schrift, klare Abstaende, ein Rhythmus statt vieler. */
/* --- Bestseller-Reihe: eine breite Karte oben, drei darunter ---------
Auf dem Handy sind die beiden Huellen display:contents, dort ist die
breite Karte genau die alte Karte. Ab 1000 px zwei Spalten: Bild links,
alles andere rechts. Die Huellen sind je EIN Grid-Element, damit die
Bildhoehe die Textzeilen nicht auseinanderzieht - dieselbe Falle wie
beim Hero. */
.d2-breitreihe{margin:0 0 16px}
.d2b-bild,.d2b-txt{display:contents}
@media (min-width:1000px){
/* article davor, damit die Regel die Sammel-Regel .d1,.d2,.d3{display:flex}
schlaegt - die stand sonst spaeter und hat das Grid ausgehebelt. */
/* Kein Polster oben: die Banderole sitzt bündig auf der Kartenkante und
nimmt deren Rundung mit. Vorher stand ein weißer Streifen darüber, und
die Ecken passten nicht zusammen (Rafael 26.8.). */
article.d2--breit{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
column-gap:30px;row-gap:0;align-items:start;padding:0 22px 22px;overflow:hidden}
article.d2--breit .d2-band{grid-column:1 / -1;margin:0 -22px 22px;
border-radius:19px 19px 0 0;padding:13px 16px}
article.d2--breit .d2b-bild{display:block;grid-column:1;align-self:start}
article.d2--breit .d2b-txt{display:flex;flex-direction:column;gap:14px;grid-column:2}
.d2--breit h3{font-size:1.9rem;line-height:1.15}
.d2--breit .d2-inhalt li{font-size:1.02rem}
.d2--breit .aw{margin-left:0;margin-right:0}
}
/* Spar-Zeile direkt ueber dem Warenkorb-Knopf, in Rose wie im Review-Build.
Sie steht in JEDER Karte, weil sie an _knopf haengt. */
.kauf{display:grid;gap:10px;width:100%}
.spar-band{margin:0;background:var(--pop-tint);color:var(--brand);
border-radius:100px;padding:8px 14px;text-align:center;
font-family:var(--font-body);font-weight:700;font-size:.82rem;line-height:1.35;
hyphens:none;-webkit-hyphens:none}
/* Das flache Gesamt-Raster laeuft mit festen drei Spalten, damit unten eine
ruhige Ordnung entsteht (Rafael 26.8.). */
@media (min-width:1000px){ .d2-reihe--drei{grid-template-columns:repeat(3,minmax(0,1fr))} }
.d1-reihe,.d2-reihe,.d3-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.d1,.d2,.d3{background:var(--paper);border:1.5px solid var(--cream-4);border-radius:20px;
padding:18px;display:flex;flex-direction:column;gap:14px}
/* Aufklappbare Anwendung unter dem Warenkorb-Knopf. Zu ist sie eine Zeile,
offen drei - die Karte bleibt schlank, die Frage ist trotzdem beantwortet. */
.aw{margin:12px 13px 2px;border-top:1px solid var(--cream-4);padding-top:9px}
.aw summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
font-family:var(--font-body);font-weight:700;font-size:.82rem;color:var(--orange-dark);
hyphens:none;-webkit-hyphens:none}
.aw summary::-webkit-details-marker{display:none}
.aw-klick{font-weight:600;font-size:.74rem;color:var(--muted);letter-spacing:0}
.aw summary::after{content:"+";margin-left:auto;font-size:1.05rem;line-height:1;
color:var(--orange-dark);font-weight:700}
.aw[open] summary::after{content:"3"}
.aw-in{padding-top:7px}
.aw-in p{margin:0 0 5px;font-size:.84rem;line-height:1.55;color:var(--coffee-400)}
.aw-in b{color:var(--brand)}
.aw-zeit{display:inline-block;color:var(--orange-dark)!important}
.aw-fuss{font-size:.76rem!important;color:var(--muted)!important;margin:0!important}
.d1--hero,.d2--hero,.d3--hero{border-color:var(--brand);box-shadow:0 3px 0 var(--brand);
position:relative;overflow:hidden;padding-top:0}
/* Kopfleiste der Hero-Karte: volle Breite, oben bündig, Radius der Karte. */
.d2-band{display:block;margin:0 -18px 16px;padding:11px 16px;background:var(--brand);
color:#fff;font-family:var(--font-body);font-weight:700;font-size:.76rem;letter-spacing:.11em;
text-transform:uppercase;text-align:center;line-height:1.3;
border-radius:18px 18px 0 0}
.d-bild{position:relative}
.d-bild img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;
background:var(--cream-2);border-radius:14px}
/* Gelber Rabatt-Kreis wie auf den eingebrannten Paket-Bildern. */
.d-bild{container-type:inline-size}
/* Geometrie DECKUNGSGLEICH mit dem eingebrannten Kreis, nicht frei gewaehlt.
13 der 19 Karten tragen im JPEG einen gebrannten gelben Kreis; gemessen an den
tatsaechlich eingebetteten data-URIs sind alle 13 pixelgleich: Mitte
78,33 % / 21,33 %, Durchmesser 32,00 % der Bildbreite (Spanne 0,00 ueber alle).
Der CSS-Kreis lag vorher bei Mitte 79,5 % / 20,5 % und nur 29 % Durchmesser,
stand also 2,67 pp links und 2,33 pp unten NEBEN dem gebrannten. Sichtbar war
das als zweiter, dunklerer Gelbkreis unten links - dunkler, weil der
box-shadow dieses Kreises (6 px nach unten) genau auf die herausragende
Sichel fiel. Jetzt: Mitte exakt 78,33 % / 21,33 %, Durchmesser 34 % - das
sind 1,0 pp Luft rundherum gegen JPEG-Artefakte am Rand des gebrannten
Kreises. Wer hier etwas verschiebt, muss neu messen:
/tmp/messe-karten-sticker.py liest die Werte aus der Seite selbst. */
.d-spar{position:absolute;top:4.33%;right:4.67%;z-index:2;width:34%;aspect-ratio:1;border-radius:50%;
background:#f7f16b;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:.14em;box-shadow:0 6px 16px rgba(75,51,52,.18);
text-align:center;line-height:1;font-size:14px;
letter-spacing:normal;text-transform:none;hyphens:none;-webkit-hyphens:none}
/* 14,48 % der Kreisbreite - dasselbe Verhaeltnis Schrift zu Kreis wie im
Hero-Stempel. Mit dem Kreis von 29 auf 34 % waechst die Schrift mit
(4,2 -> 4,92), sonst saesse dieselbe Schrift in einem groesseren Kreis. */
@supports (container-type:inline-size){ .d-spar{font-size:4.92cqw} }
/* Abstand Wert -> RABATT: derselbe optische Fehler wie im Hero-Stempel. Die
Playfair-Ziffern sitzen tief in ihrer Zeilenbox und ragen unten aus ihr
heraus, dadurch klebte "RABATT" am Betrag, obwohl der gap gleichmaessig war.
+,245em ist genau die Korrektur, die im Hero-Stempel gemessen wurde; beide
nutzen dieselbe Schrift im selben relativen Grad, deshalb passt derselbe
Wert. Kein negatives margin-top wie im Hero: hier steht keine Zeile darueber,
die Flex-Zentrierung haelt das Paar weiter in der Kreismitte. */
.d-spar b{font-family:var(--font-serif);font-weight:600;font-size:1.55em;line-height:1;
margin:0 0 .245em;
letter-spacing:0;color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap}
.d-spar i{font-family:var(--font-body);font-style:normal;font-weight:700;font-size:.72em;
letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.d1 h3,.d2 h3,.d3 h3{margin:0;font-size:27px;line-height:1.18;color:var(--brand)}
/* Zwischen-Labels groesser und dunkler, damit sie sich abheben. */
.d-lbl{display:block;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:#2a1d1e;margin-bottom:8px}
.d1 .bl-preis,.d2 .bl-preis,.d3 .bl-preis{margin:auto 0 6px;padding-top:22px;
border-top:1px solid var(--cream-4)}
/* Mehr Luft zwischen Preis und Knopf (Rafael 25.8.). */
.d-preis{padding-bottom:10px}
.d1 .btn,.d2 .btn,.d3 .btn{margin-top:6px!important}
.d1 .btn,.d2 .btn,.d3 .btn{width:100%;margin:0}
/* Naehrstoff-Zeilen: Name fett, Nutzen dahinter. */
.d-naehr{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.d-naehr li{font-size:.9rem;line-height:1.45;color:var(--coffee-400)}
.d-naehr li b{color:var(--orange-dark);font-weight:700}
.d-naehr li b::after{content:' — '}
/* D1: Bloecke mit Label darueber, klare Trennlinien. */
.d1-block{border-top:1px solid var(--cream-4);padding-top:12px}
.d1-block p{margin:0;font-size:.94rem;line-height:1.5;color:var(--coffee-400)}
.d1-block p em{font-style:normal;color:var(--muted)}
/* D2: Listen statt Fliesstext. */
.d2-inhalt{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.d2-inhalt li{font-size:.96rem;line-height:1.45;color:var(--brand);
border-bottom:1px dotted var(--cream-4);padding:0 0 5px 15px;position:relative}
.d2-inhalt li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;
border-radius:50%;background:var(--orange-dark)}
.d2-inhalt li em{font-style:normal;color:var(--muted)}
.d2-reich{margin:0;font-size:.96rem;font-weight:600;color:var(--brand)}
/* Benefit links im Kasten, die Naehrstoffe rechts daneben. */
/* Benefit im orangen Chip, Naehrstoffe daneben in grau. */
.bn-liste{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.bn-liste li{display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:7px;align-items:center}
.bn-chip{font-family:var(--font-body);font-weight:700;font-size:.66rem;letter-spacing:.05em;
text-transform:uppercase;background:var(--orange-tint);color:var(--orange-dark);
border:1px solid var(--orange-light);border-radius:100px;padding:4px 10px;white-space:nowrap;
hyphens:none;-webkit-hyphens:none}
/* Kleines Sternchen am Ende jedes Benefits. Es verweist auf den Block mit
den zugelassenen Formulierungen ganz unten (Rafael 26.8.). */
.bn-st{font-style:normal;font-size:.8em;line-height:1;margin-left:1px;vertical-align:super}
/* Kurzform des Vitamin-C-Chips. Sie erscheint nur auf schmalen Schirmen und
nur in Reihen mit drei Chips - also bei Kollagen Plus und Intensiv, wo die
drei Chips sonst umbrechen (Rafael 26.8.). */
.vc-kurz{display:none}
@media (max-width:560px){
.pk .gt-naehr:has(.gt-n:nth-child(3)) .vc-lang{display:none}
.pk .gt-naehr:has(.gt-n:nth-child(3)) .vc-kurz{display:inline}
}
/* Die Benefit-Pille darf nie ueber die ganze Breite laufen, auch nicht in der
einspaltigen Handy-Variante. */
.bn-chip{justify-self:start;width:max-content;max-width:100%}
.bn-src{font-size:.84rem;line-height:1.4;color:var(--muted);hyphens:none;-webkit-hyphens:none}
.bn-chip{white-space:normal}
@media (max-width:330px){ .bn-liste li{grid-template-columns:1fr;gap:4px} }
.bn-quelle i{font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.03em;
text-transform:uppercase;background:var(--orange-tint);color:var(--orange-dark);
border:1px solid var(--orange-light);border-radius:100px;padding:2px 6px;white-space:nowrap}
/* Rafael 26.8.: die Naehrstoffe sollen auch auf dem Handy RECHTS neben dem
Benefit stehen. Diese Regel hat sie bis 400 px untereinander geworfen -
sie war der Grund, warum mein 330-px-Umbau nichts gebracht hat. */
@media (max-width:400px){ .bn-quelle{justify-content:flex-start} }
/* D3: Chip plus Nutzen in einer Zeile. */
.d3-meta{margin:0;font-size:.9rem;line-height:1.5;color:var(--coffee-400)}
.d3-meta em{font-style:normal;color:var(--muted)}
.d3-reich{margin:0;font-size:.9rem;font-weight:700;color:var(--orange-dark)}
.d3-naehr{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.d3-naehr li{display:flex;align-items:center;gap:9px;font-size:.88rem}
.d3-naehr .gt-n{flex:0 0 auto}
.d3-wofuer{color:var(--coffee-400);line-height:1.4}
/* ===== v-schluss ===== */
/* Schluss-Headline: Rafaels Akzentfarbe (#be6330 = --orange) statt des
kursiven Dunkel-Orange, das auf der dunklen Flaeche untergeht. Kein
Abstand nach oben, so hat er es gezogen. */
.sl-h2{margin-top:0}
.sl-akz{color:var(--orange);font-style:normal}
/* ===== v-lsz ===== */
/* Zickzack-Karten. Auf dem Handy Bild oben, Text darunter. Ab 900 px zwei
Spalten, und jede zweite Karte dreht die Bildseite - so entsteht der
Zickzack, statt dass alle Bilder links kleben. */
/* Rafael 26.8.: die farbige Kachel liegt HINTER dem Bild, nicht darauf.
Vorher lag das Foto im mix-blend-mode multiply auf der Flaeche - dadurch
nahm der Packshot den Ton an und das Bild war zugedeckt. Jetzt ist die
Kachel ein Rahmen, das Foto sitzt mit eigener Flaeche darueber. */
/* Auf dem Handy klebte der naechste Bildkasten am Warenkorb-Knopf der
Karte darueber (Rafael 26.8.). */
.lsz{display:grid;gap:22px;margin:0 0 88px}
.lsz:last-child{margin-bottom:0}
.lsz-bild{background:var(--ton);border-radius:24px;padding:16px;display:flex;
align-items:center;justify-content:center}
.lsz-bild .d-bild{margin:0;width:100%;background:var(--paper);border-radius:16px;
overflow:hidden;position:relative;z-index:1}
.lsz-bild img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}
.lsz-txt{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.lsz-kicker{margin:0}
.lsz h3{margin:0;font-family:var(--font-head);font-weight:700;
font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15;color:var(--brand);
hyphens:none;-webkit-hyphens:none}
.lsz-satz{margin:0;font-size:1.02rem;line-height:1.6;color:var(--coffee-400)}
.lsz-teile{list-style:none;margin:0;padding:0;display:grid;gap:9px;width:100%}
.lsz-teile li{display:flex;align-items:baseline;gap:9px;font-size:.96rem;
line-height:1.45;color:var(--brand)}
.lsz-teile i{flex:0 0 auto;width:11px;height:11px;border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(75,51,52,.18);transform:translateY(1px)}
.lsz-teile em{font-style:normal;color:var(--muted)}
.lsz .kauf{width:auto;justify-items:start}
.lsz .btn{width:auto}
@media (min-width:900px){
.lsz{grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:48px;align-items:center;
margin-bottom:100px}
.lsz-txt{gap:20px}
.lsz-bild{grid-column:1;grid-row:1}
.lsz-txt{grid-column:2;grid-row:1}
.lsz--gedreht .lsz-bild{grid-column:2}
.lsz--gedreht .lsz-txt{grid-column:1}
}
/* ===== v-claims ===== */
/* Ein Claim-Block fuer die ganze Seite, ganz unten vor dem Footer. In der
Copy stehen nur Sternchen. */
.claim-unten{background:var(--cream-2);border-top:1px solid var(--cream-4);padding:22px 0 26px}
.claim-unten p{margin:0 auto 8px;max-width:760px;font-size:.7rem;line-height:1.6;color:var(--muted)}
.claim-unten b{color:var(--coffee-400);font-weight:600}
.claim-kopf{margin-bottom:14px!important}
/* Benefit links, zugelassene Formulierung rechts. Der linke Begriff traegt
denselben Chip-Look wie oben auf der Seite, damit die Zuordnung ohne
Nachdenken funktioniert (Rafael 26.8.). */
.claim-paare{margin:0 auto 12px;max-width:760px;padding:0}
.claim-paare > div{display:grid;grid-template-columns:190px 1fr;gap:8px 18px;
align-items:start;padding:8px 0;border-top:1px solid var(--cream-4)}
.claim-paare dt{font-family:var(--font-body);font-weight:700;font-size:.62rem;
letter-spacing:.05em;text-transform:uppercase;color:var(--orange-dark);
hyphens:none;-webkit-hyphens:none}
.claim-paare dd{margin:0;font-size:.7rem;line-height:1.6;color:var(--muted)}
@media (max-width:560px){
.claim-paare > div{grid-template-columns:1fr;gap:3px}
}
/* Ka-Ching Bundles: der App-Widget rendert sein eigenes Bundle-Builder-UI
(Titel, Bar, Mengen-Selector, Produkt-Kacheln) neben dem "In den
Warenkorb"-Button. Wir wollen nur den Button, nicht das Widget-Design.
Ausblenden statt entfernen, damit die versteckten Form-Felder (Variante,
Menge, Bundle-Properties), die das Widget selbst befuellt, unveraendert
bleiben. */
.kaching-bundles{display:none!important}
/* theme.bundle.css setzt ueber den :--body-element-Selektor global
font-size:var(--font-body-md) auf em, i, b, del, ins, sub, sup, mark, small.
Vor der Cart-Integration gab es diese Regel nicht, also erbten diese Tags
einfach die Groesse ihrer Eltern (z.B. em in einer h2). Jetzt gewinnt die
Theme-Regel und macht sie zu Fliesstext-Groesse, egal wo sie stehen.
Schriftfamilie/-farbe vom Theme sind gewollt, nur die Groesse nicht.
Ein einfaches "em, i, b{font-size:inherit}" reicht NICHT: die Theme-Regel
steht in :is(.text-semibold, ...), und :is() erbt die Spezifitaet seines
spezifischsten Arguments - hier eine Klasse (0,1,0), nicht das Element
(0,0,1). Ladereihenfolge entscheidet nur bei Gleichstand, das hier ist
keiner.
!important waere zu grob: diese Seite hat >20 eigene Regeln wie
".sb-pr b{font-size:1.25em}" oder ".hub-core i{font-size:.68rem}", die
bewusst eine eigene Groesse setzen - !important wuerde die auch ueberschreiben.
Deshalb Spezifitaet gezielt auf (0,1,0) anheben ueber :is() mit einer nie
zutreffenden Klasse als Fuellglied - trifft exakt den Theme-Wert, gewinnt
per Ladereihenfolge (diese Datei laedt nach theme.bundle.css), bleibt aber
unter den (0,1,1)-Regeln oben, die weiterhin gewinnen sollen. */
:is(.grs-spec-bump, em, i, b, del, ins, sub, sup, mark, small){font-size:inherit}