/* LP1 Schlafgesundheitsberatung — Seitenschicht (seit Korrekturrunde 1, 14.10.2026)
   Nur, was es auf dieser Seite gibt. Alles Gemeinsame steht in lp.css (gemeinsam/, Symlink);
   Werte ausschliesslich aus dessen Tokens. */

/* Partner-Funnel-Zeilen und Film-Poster height:auto: seit 14.10.2026 in gemeinsam/lp.css (galten fuer LP1 und LP3 gleich). */


/* ==== Korrekturrunde 2 (14.10.2026) — Protokoll docs/KORREKTURRUNDE-2.md ============================== */

/* ---- A  #schlafsystem: Explosionsansicht aus echten Produktfotos ----------------------------------------
   Mike: „die Grafik sollte man dort aufhuebschen … ausfuehrlicher gestalten, weil auch zum Beispiel das
   Maennchen … gammelig aussieht". Vier freigestellte Lagen (tools/produktbilder.py) in einer Szene 5:6,
   fuenf Marker. Die Karte (.schichten__buehne, lp.css) fuellt auf dem Desktop wie bisher die Hoehe der Liste
   daneben; sie ist dort ein Groessen-Container, die Szene nimmt die volle Breite oder — wenn die Liste
   niedriger ist — die volle Hoehe. In der Szene ist sie selbst ein Breiten-Container: alle Lagen-Abstaende
   und Marker sitzen in cqw (1 cqw = 1 % der Szenenbreite), so stimmt das Bild auf jeder Breite.
   Freistellen statt mix-blend-mode:multiply: multiply macht Lagen gegenseitig durchsichtig — der dunkle
   Rahmen lag im Probebild sichtbar VOR der weissen Matratze (docs/belege/runde2/probe-multiply-vs-frei.jpg).
   Bewegung nur transform/opacity: --gesammelt (1 = zusammengeschoben, 0 = auseinander; nicht --auf, das ist in
   lp.css die Textfarbe der Flaeche) x --weg je Lage, dazu
   --hub (-6 px) fuer die aktive Lage. Ohne Skript: auseinander, alle Lagen voll, alle Marker sichtbar. */
.schichten__buehne{container-type:size}
.explo{position:relative;width:100%;width:min(100%,calc(100cqh * 5 / 6));aspect-ratio:5/6;container-type:inline-size;
  transition:opacity .3s var(--ease),visibility .3s}
/* Briefing Markus 02.11.2026 C.2: Fotos zu den Themen 1-3, selber Kasten wie die Szene (teilen sich die Rasterzelle). Ohne Skript bleibt die Szene. */
.ew-wahrheit{grid-area:1/1}
.ew-wahrheit{position:relative;z-index:1;margin:0;width:100%;width:min(100%,calc(100cqh * 5 / 6));aspect-ratio:5/6;overflow:hidden;
  border-radius:var(--r-bild);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.ew-wahrheit.ist-aktiv{opacity:1;visibility:visible}
.ew-wahrheit img{display:block;width:100%;height:100%;object-fit:cover}
.ew-wahrheit[data-thema="1"] img{object-position:50% 15%}
.ew-wahrheit[data-thema="2"] img{object-position:50% 30%}
.ew-wahrheit[data-thema="3"] img{object-position:50% 25%}
/* Mike 02.11.2026 Punkt 12: Thema 4 + 5 echte Querformat-Fotos, unbeschnitten */
.ew-wahrheit:is([data-thema="4"],[data-thema="5"]){width:100%;aspect-ratio:auto;align-self:center}
.ew-wahrheit:is([data-thema="4"],[data-thema="5"]) img{height:auto}
/* Browser ohne Container-Einheiten (Safari < 16): Szene volle Breite (erste width), Marker weg statt auf einem Haufen */
@supports not (width:1cqw){.explo__marke{display:none}}
.explo__lage{
  position:absolute;max-width:none;height:auto;
  filter:drop-shadow(0 14px 14px rgba(37,37,37,.14));
  transform:translate3d(0,calc(var(--gesammelt,0) * var(--weg,0cqw) + var(--hub,0px)),0);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
/* Lage in der Szene (Prozent der Szene; gemessen: nichts ragt heraus, jede Lage bleibt als eigene Schicht sichtbar) */
.explo__lage[data-lage="rahmen"]  {left:2%;top:59%;width:94%}
.explo__lage[data-lage="matratze"]{left:5%;top:37%;width:90%}
.explo__lage[data-lage="auflage"] {left:5%;top:22.5%;width:90%}
.explo__lage[data-lage="kissen"]  {left:4%;top:2%;width:42%}
/* Weg vom Stapel in die Explosion (nur beim ersten Erscheinen, js/lp1.js) und Staffelung */
.explo [data-lage="matratze"]{--weg:12cqw;--verz:90ms}
.explo [data-lage="auflage"] {--weg:24cqw;--verz:180ms}
.explo [data-lage="kissen"]  {--weg:38cqw;--verz:270ms}
.explo.ist-zu [data-lage]{--gesammelt:1}
.explo.ist-faehrt .explo__lage{transition:transform .65s var(--ease) var(--verz,0ms),opacity .35s var(--ease)}
/* Hervorheben: aktive Lage voll und leicht angehoben, die anderen treten zurueck */
.js-explo .explo__lage{opacity:.5}
.js-explo .explo__lage.ist-aktiv{opacity:1}
.explo[data-aktiv="rahmen"]   [data-lage="rahmen"],
.explo[data-aktiv="matratze"] [data-lage="matratze"],
.explo[data-aktiv="auflage"]  [data-lage="auflage"],
.explo[data-aktiv="kissen"]   [data-lage="kissen"]{--hub:-6px}

/* Marker: tuerkiser Kreis mit Ziffer (Kontur = inaktiv, gefuellt = aktiv), Lage ueber transform (--mx/--my in
   Prozent der Szenenbreite), bewegt sich mit seiner Lage. Liegen ueber allen Lagen. Zeiger-Klick waehlt den Faktor
   (die Liste bleibt die Bedienung fuer Tastatur und Vorlesesoftware, darum aria-hidden). */
.explo__marke{
  position:absolute;left:0;top:0;z-index:2;--d:34px;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  transform:translate3d(calc(var(--mx) * 1cqw - var(--d) / 2),
                        calc(var(--my) * 1cqw - var(--d) / 2 + var(--gesammelt,0) * var(--weg,0cqw) + var(--hub,0px)),0);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
/* Zählung von oben nach unten (Mike 14.10.2026): 1 Kissen, 2 Auflage, 3 Schulter/Becken, 4 Matratze, 5 Rahmen */
.explo__marke[data-schicht="5"]{--mx:30;--my:88}
.explo__marke[data-schicht="4"]{--mx:76;--my:73.6}
.explo__marke[data-schicht="3"]{--mx:25;--my:58.4}
.explo__marke[data-schicht="2"]{--mx:60;--my:43}
.explo__marke[data-schicht="1"]{--mx:24;--my:14.4}
.explo__marke b{
  position:relative;isolation:isolate;display:grid;place-items:center;flex:none;
  width:var(--d);height:var(--d);border-radius:50%;
  background:var(--weiss);border:2px solid var(--tk-knopf);color:var(--tk-fest);
  font:800 14px/1 Manrope,ManropeErsatz,system-ui,sans-serif;font-variant-numeric:tabular-nums;
  box-shadow:0 8px 18px -8px rgba(37,37,37,.5);
  transition:transform .3s var(--ease);
}
/* Fuellung als eigene Ebene: blendet nur ueber opacity ein */
.explo__marke b::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:50%;
  background:var(--tk-knopf);opacity:0;transition:opacity .25s var(--ease)}
.explo__marke.ist-aktiv b{color:var(--weiss);transform:scale(1.08);
  box-shadow:0 0 0 6px rgba(var(--tk-rgb),.22),0 10px 22px -8px rgba(37,37,37,.55)}
.explo__marke.ist-aktiv b::before{opacity:1}
@media(hover:hover){.explo__marke:hover b{transform:scale(1.08)}}
.explo__pille{
  padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  border:var(--glas-rand);box-shadow:var(--glas-schatten);
  font:700 12px/16px Manrope,ManropeErsatz,system-ui,sans-serif;letter-spacing:.5px;color:var(--ink);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.explo__pille{background:rgba(255,255,255,.92)}}
/* Marker erst zeigen, wenn die Lagen auseinander sind */
.explo.ist-zu .explo__marke{opacity:0}
.explo.ist-faehrt .explo__marke{transition:transform .65s var(--ease) var(--verz,0ms),opacity .4s var(--ease) calc(var(--verz,0ms) + 380ms)}
@media(prefers-reduced-motion:reduce){
  .explo,.ew-wahrheit,.explo__lage,.explo__marke,.explo__marke b,.explo__marke b::before{transition:none!important}
}

/* ---- B  Leitsatz statt Balken + einsamem Knopf --------------------------------------------------------
   Mike: „Nicht irgendeine Matratze … das ist so ein ganz einfacher, generischer Container". Ein Block in voller
   Inhaltsbreite, r24 wie .karte--gross. Verlauf aus Marken-Tokens: --tk-fest (Weiss 5,74:1) -> --tk-akzent-grau
   (Weiss 4,59:1). Der Auftrag nannte --tk-knopf -> --tk; --tk als helles Ende haette 2,54:1 unter Weiss
   (gerechnet) — darum das hellste Tuerkis, das unter Weiss noch AA haelt. Der Zusatz steht in vollem Weiss
   (85 % Weiss fiel auf dem Verlauf auf 3,8:1). */
.schichten + .leitsatz{margin-top:var(--s-5)}
.leitsatz{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-3) var(--s-5);
  padding:48px 60px;border-radius:var(--r-gross);color:var(--weiss);
  background:linear-gradient(135deg,var(--tk-fest),var(--tk-akzent-grau));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 60px -30px rgba(var(--tk-fest-rgb),.55);
}
.leitsatz__satz{font-size:clamp(24px,2.4vw,32px);line-height:1.22;font-weight:700;letter-spacing:-.015em;-webkit-hyphens:manual;hyphens:manual;
  color:var(--weiss);text-wrap:balance;max-width:30ch}
.leitsatz__zusatz{margin-top:var(--s-2);font-size:17px;line-height:28px;font-weight:500;color:var(--weiss);max-width:60ch}
/* Weisse Pille mit tuerkisem Text (5,7:1), Pfeilkreis wie .btn */
.btn--weiss{background:var(--weiss);color:var(--tk-fest)}
.btn--weiss .btn__pfeil{border-color:rgba(var(--tk-fest-rgb),.35)}
.btn--weiss:hover{background:var(--weiss);box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
.btn--weiss:hover .btn__pfeil{background:var(--tk-tint)}
.btn--weiss:focus-visible{outline:3px solid var(--weiss);outline-offset:3px}
.leitsatz__knopf{white-space:nowrap}
@media(max-width:900px){
  .leitsatz{grid-template-columns:minmax(0,1fr);padding:28px 24px;gap:var(--s-3)}
  .leitsatz__knopf{justify-self:start;white-space:normal}
}

/* ---- A mobil: Buehne oben, Liste darunter (Raster aus lp.css); Karte waechst mit der Szene ------------- */
@media(max-width:900px){
  .schichten__buehne{container-type:normal;padding:var(--s-2)}
  .explo,.ew-wahrheit{width:min(100%,460px)}
  .explo__marke{--d:32px}
  .explo__pille{padding:4px 10px;font-size:11px;line-height:14px}
}

/* ---- D  #einwaende als Zitate --------------------------------------------------------------------------
   Mike: „das sind Zitate, die sollten auch so dargestellt werden … minimal aufhuebschen". Zitatzeichen wie in
   #unterschied (28 px, voll), Frage als blockquote, Haarlinie, Antwort mit Ueberzeile. Raster bleibt .karten--2;
   Zeichen, Frage und Antwort stehen je Reihe auf gleicher Hoehe (subgrid), die Haarlinien fluchten. */
.einwand{display:flex;flex-direction:column}
.einwand .einwand__zeichen{width:28px;height:28px;margin:0 0 var(--s-2);color:var(--tk);opacity:1}
.einwand__frage{margin:0}
.einwand .einwand__frage p{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}   /* schlaegt .karte p */
.einwand__antwort{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid rgba(37,37,37,.12)}
.einwand .einwand__label{font-size:12px;line-height:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tk-fest)}
.einwand__label + p{margin-top:var(--s-1)}
@supports (grid-template-rows:subgrid){
  .einwand{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .einwand__antwort{align-self:start}
}

/* ===================================================================== Abgestimmte Textfassung (21.10.2026)
   01: Unterzeile unter dem Claim. 03: drei Schritte mit Symbolen über dem ausführlichen Ablauf. 05: zwei Absätze im Abschluss. */
.hero__unterzeile{max-width:760px;margin:var(--s-2) auto 0;font-size:clamp(19px,1.9vw,24px);line-height:1.35;font-weight:600;color:var(--ink);text-wrap:balance}
.drei-schritte{counter-reset:none;list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.drei-schritte li{position:relative;display:grid;align-content:start;gap:var(--s-2);padding:var(--s-3);background:var(--weiss);border:var(--rand);
  border-radius:var(--r-karte)}
.drei-schritte p{margin:0;font-size:17px;line-height:1.5;color:var(--text)}
.drei-schritte strong{color:var(--ink);font-weight:800}
.drei-schritte__nr{position:absolute;top:var(--s-3);right:var(--s-3);font-size:34px;line-height:1;font-weight:800;color:rgba(var(--tk-fest-rgb),.22)}
.ablauf__detail{margin:0 0 var(--s-3);text-align:center;font-size:22px;line-height:1.3;color:var(--ink)}
.abschluss .lead + .lead{margin-top:var(--s-2)}
@media(max-width:767px){
  .drei-schritte{grid-template-columns:minmax(0,1fr);margin-bottom:var(--s-5)}
  .drei-schritte li{padding:var(--s-2) var(--s-2) var(--s-2) var(--s-2)}
}
/* Sebastian Littau 09.11.2026 (PDF „Feedback Landingpages“ S. 4/5): über jedem Schritt ein Foto, Symbol, Zahl und Text bleiben.
   Kasten = Format des echten Fotos ablauf-gespraech (1600×1143), es bleibt unbeschnitten; die beiden KI-Bilder (3:2) verlieren seitlich je rund 3 %.
   Das Symbol sitzt auf der Bildkante, die Zahl rechts daneben (im Foto läge sie neben der KI-Marke). Steht nach dem Handy-Block, damit padding:0 gilt. */
.drei-schritte--bilder li{padding:0;gap:0;overflow:hidden;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"bild bild" "ic nr" "text text"}
.drei-schritte__bild{grid-area:bild;margin:0;aspect-ratio:1600/1143;background:var(--grau)}
.drei-schritte__bild img{display:block;width:100%;height:100%;object-fit:cover}
.drei-schritte--bilder .ic-kreis{grid-area:ic;position:relative;z-index:1;margin:-25px 0 0 var(--s-3);
  background:linear-gradient(rgba(var(--tk-rgb),.12),rgba(var(--tk-rgb),.12)) var(--weiss);box-shadow:0 0 0 4px var(--weiss)}
.drei-schritte--bilder .drei-schritte__nr{grid-area:nr;position:static;align-self:end;margin:0 var(--s-3) 0 var(--s-2)}
.drei-schritte--bilder p{grid-area:text;padding:var(--s-1) var(--s-3) var(--s-3)}
@media(max-width:767px){
  .drei-schritte--bilder .ic-kreis{margin-left:var(--s-2)}
  .drei-schritte--bilder .drei-schritte__nr{margin-right:var(--s-2)}
  .drei-schritte--bilder p{padding:var(--s-1) var(--s-2) var(--s-2)}
}
@media (prefers-reduced-motion:no-preference){.hero__unterzeile{animation:heroRein .8s var(--ease) .2s backwards}}
@media (prefers-reduced-motion:reduce){.hero__unterzeile{animation:none}}

/* Abstimmung 21.10.2026 (Markus: „keine Beschnitte ohne Freigabe"): Inhaltsbilder zeigen das ganze Foto.
   Kasten = Bildverhältnis, wo ein Bild allein steht; wo Bilder verschiedener Formate denselben Kasten teilen
   (Kopfbereich-Wechsel, Ablauf-Stapel, Ort-Karten), steht das Foto vollständig auf grauem Grund.
   Ausgenommen: das dekorative Hintergrundbild im Abschluss. */
.hero__bild.wechsel{aspect-ratio:1600/1179;background:var(--grau)}
.hero__bild.wechsel img{object-fit:contain}
.hero__bild.ew-wendung__bild:not(.wechsel){aspect-ratio:3/2}   /* Einzelbild seit 29.10.2026 (Sebastian): Kasten = Foto 3:2, auch mobil */
.stapel__bild img{object-fit:contain}
.ort__bild{aspect-ratio:auto;background:none}   /* Kasten im Bildformat: Foto ganz, ohne graue Seitenstreifen */
.ort__bild img{height:auto}
.film__start img{aspect-ratio:1600/1000;max-height:none}
#qualitaet .split__bild{height:auto;min-height:0;aspect-ratio:1600/1179;align-self:center}
#qualitaet .split__bild img{height:100%}
/* Meeting 21.10.2026 (Mike: „Bild auf die volle Containerhöhe"): Porträt füllt neben der Zitatkarte die ganze Höhe. */
.zitat .bild{aspect-ratio:auto;max-height:none;height:100%;align-self:stretch}
.zitat .bild img{height:100%;object-fit:cover;object-position:50% 25%}
@media(max-width:900px){.zitat .bild{aspect-ratio:1600/1066;height:auto}}
/* Kopfbereich mit Negativbild (Mike 22.10.2026): Bild oben, darunter rotes Problem und grüne Antwort wie bisher.
   Die Zeilen laufen über alle drei Karten gleich (subgrid), damit Bilder, Problem- und Antwortblöcke auf einer Höhe stehen. */
.probleme--bild{grid-template-rows:auto auto auto}
.probleme--bild .problem{grid-row:span 3}
.problem__bild{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 50%;background:var(--grau)}
@media(max-width:900px){.probleme--bild{grid-template-rows:none}.problem__bild{aspect-ratio:16/9}}
/* Ursachen-Karten mit Bild oben (22.10.2026: medizinische Bilder in Schwebewerk-Farben, alle sechs, kein Bild doppelt zur Kopfzeile) */
#ursachen .karte--bild,#leistung .karte--bild{padding:0;overflow:hidden;display:flex;flex-direction:column}
#ursachen .karte--bild > h3,#ursachen .karte--bild > p,#leistung .karte--bild > h3,#leistung .karte--bild > p{padding-inline:clamp(20px,2.4vw,30px)}
#ursachen .karte--bild > h3,#leistung .karte--bild > h3{margin-top:20px}
#ursachen .karte--bild > p,#leistung .karte--bild > p{padding-bottom:clamp(22px,2.4vw,30px)}
.karte__bild{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;background:var(--grau)}
#leistung .karte__bild{aspect-ratio:7/5}
/* Karte mit Bild ist im Querformat höher als das Fenster: nicht kleben, sonst verdeckt die nächste Karte den Text */
@media(max-width:900px) and (min-width:560px) and (max-height:760px){#leistung .karten--stapel > .karte{position:relative;top:auto}}