/* ═══════════════════════════════════════════════════════════════════════════
   teil-zzzzzz-lauf.css — gemeinsame Anordnung der Scroll-Abschnitte auf /augenoptik/
   (assets/js/lauf.js). Lädt nur in der Vorschau ?bv-neu=1. Die Szenen (Gleitsicht-Szene,
   gezeichnete Gläser, Brillenarten) geben nur noch ihr Aussehen dazu.

   Christopher, 24.10.2026: „hier darf aber kein Leerraum entstehen. dann muss der Text oben
   drüber stehen wenn das Fenster zu schmal wird zb iphone dann nur das Bild und der Text reicht."

   Bausteine: .lf (Abschnitt) › .lf-bahn (der hohe Lauf, darin die Rastpunkte .lf-rast) ›
   .lf-steh › .lf-buehne (Bild .lf-bild und was die Szene dazustellt) + .lf-text › .lf-stufen › .lf-stufe.
   Ohne .lf-an (kein Skript, „Bewegung reduzieren", zu niedrig) klebt nichts: Bühne, dann die Liste.
   ═══════════════════════════════════════════════════════════════════════════ */

.lf{
  position:relative;
  --lf-oben:calc(var(--kopf-unten, 86px) + var(--sprung-luft, 12px) + var(--sprung-hoehe, 58px) + 10px);
  --lf-hoehe:calc(100svh - var(--lf-oben) - 12px);
}
.lf-rast{ display:none; }
/* Ruhig (Liste) tragen die Stufen ihre Sprungziele selbst: ein Sprung legt sie unter Kopf- und Sprungleiste,
   nicht dahinter (vorher landete die Stufe bei y = 0, verdeckt). */
.lf:not(.lf-an) .lf-stufe[id]{ scroll-margin-top:var(--lf-oben); }

.lf-an .lf-bahn{ position:relative; height:calc(var(--lf-stufen, 4) * 65svh + 100svh); }
/* Rastpunkte: Lage in px aus lauf.js. „proximity": ein Wisch rollt zur nächsten Stufe und bremst
   dort; wer weiter will, scrollt einfach weiter. */
.lf-an .lf-rast{
  display:block; position:absolute; left:0; width:1px; height:1px; pointer-events:none;
  scroll-snap-align:start; scroll-margin-top:var(--lf-oben);
}
html:has(.lf-an .lf-rast):not(.lf-js-rasten){ scroll-snap-type:y proximity; }
/* Mit dem Einrasten aus lauf.js (Richtung der Bewegung) rastet der Browser nicht selbst — sonst zog er einen kleinen
   Stoß auf dieselbe Erklärung zurück, bevor lauf.js ihn zur nächsten führen konnte. */
/* Am Telefon klebt die Bühne unten: dort rastet die Unterkante des Rastpunkts am Fensterrand
   (lauf.js setzt ihn auf Bühnenhöhe + p·Weg). Ein Sprung (#anker, Übersichtskachel) legt sein Ziel dagegen an
   den OBEREN Rand — gemessen 24.10.2026 bei 390 × 664: „Einstärkenbrillen" landete eine Fensterhöhe zu tief und
   rastete auf Stufe 2. Der obere Abstand von einer Fensterhöhe legt das Ziel beim Sprung an den unteren Rand,
   dorthin, wo auch das Rasten es hinlegt. */
.lf-an[data-lf-modus="telefon"] .lf-rast{ scroll-snap-align:end; scroll-margin-top:calc(100svh - 2px); }

/* Gestapelte Stufen (breit und hoch): alle in derselben Zelle. Außerhalb eines Übergangs ist nur die aktive
   da; im Übergang rollt die vorige nach oben hinaus und die neue von unten herein — am Scrollweg (--lf-t aus
   lauf.js), keine Zeit-Blende, keine Deckkraft (Christopher: „Transformationen … nicht wieder das Light-Effekt"). */
.lf-an:is([data-lf-modus="breit"], [data-lf-modus="hoch"]) .lf-stufen{ display:grid; overflow:clip; }
.lf-an:is([data-lf-modus="breit"], [data-lf-modus="hoch"]) .lf-stufe{
  grid-area:1 / 1; margin:0; align-self:stretch;
  visibility:hidden; pointer-events:none; transform-origin:50% 50%;
}
.lf-an:is([data-lf-modus="breit"], [data-lf-modus="hoch"]) .lf-stufe[data-aktiv]{ visibility:visible; pointer-events:auto; }
.lf-an:is([data-lf-modus="breit"], [data-lf-modus="hoch"]) .lf-stufe[data-lf-geht]{
  visibility:visible;
  transform:translateY(calc(var(--lf-t, 1) * -100%)) scale(calc(1 - var(--lf-t, 1) * .06));
}
.lf-an:is([data-lf-modus="breit"], [data-lf-modus="hoch"]) .lf-stufe[data-lf-kommt]{
  visibility:visible;
  transform:translateY(calc((1 - var(--lf-t, 1)) * 100%)) scale(calc(.94 + var(--lf-t, 1) * .06));
}

/* ── breit: Querformat — Text links, Bühne rechts, beide kleben ──────────── */
.lf-an[data-lf-modus="breit"] .lf-bahn{
  display:grid; align-items:start; column-gap:clamp(1.2rem, 2.4vw, 2rem);
  grid-template-columns:minmax(240px, .9fr) minmax(0, 2.25fr);
}
.lf-an[data-lf-modus="breit"] .lf-steh{ display:contents; }
.lf-an[data-lf-modus="breit"] .lf-text,
.lf-an[data-lf-modus="breit"] .lf-buehne{ grid-row:1; position:sticky; top:var(--lf-oben); height:var(--lf-hoehe); }
.lf-an[data-lf-modus="breit"] .lf-text{ grid-column:1; display:grid; align-content:center; }
.lf-an[data-lf-modus="breit"] .lf-buehne{ grid-column:2; align-content:center; }
.lf-an[data-lf-modus="breit"] .lf-bild{ max-width:var(--lf-bild-b, calc((var(--lf-hoehe) - 8rem) * var(--lf-seiten, 1.42))); }

/* ── hoch: Hochformat — eine klebende Einheit, oben der Text, darunter das Bild, das den Rest füllt ── */
.lf-an[data-lf-modus="hoch"] .lf-steh{
  position:sticky; top:var(--lf-oben); height:var(--lf-hoehe);
  display:flex; flex-direction:column; justify-content:center; row-gap:clamp(.8rem, 1.8vh, 1.4rem);
}
.lf-an[data-lf-modus="hoch"] .lf-text{ order:1; display:grid; }
/* Stufen mit kürzerem Text: Nummer oben, Text unten am Bild — keine Lücke zwischen Text und Bild. */
.lf-an[data-lf-modus="hoch"] .lf-stufe{ display:flex; flex-direction:column; justify-content:flex-end; }
.lf-an[data-lf-modus="hoch"]:not([data-lf-wachst]):not([data-lf-messen]) .lf-stufe > :first-child{ margin-bottom:auto; }
/* Wachsen (data-lf-wachsen am Abschnitt; lauf.js setzt data-lf-wachst): jede Stufe in ihrer eigenen Höhe, die
   Textzelle folgt ihr (--lf-text-h), das Bild füllt den Rest — auch in einer kurzen Stufe keine Lücke. Die neue
   Stufe rollt um die Höhe der vorigen herein (--lf-roll), so stoßen beide aneinander. Zum Messen stehen die
   Stufen kurz in ihrer natürlichen Höhe (data-lf-messen). */
.lf-an[data-lf-modus="hoch"][data-lf-messen] .lf-stufe{ align-self:start; }
.lf-an[data-lf-modus="hoch"][data-lf-wachst] .lf-stufen{ height:var(--lf-text-h, auto); grid-template-rows:minmax(0, 1fr); }
.lf-an[data-lf-modus="hoch"][data-lf-wachst] .lf-stufe{ align-self:start; justify-content:flex-start; }
.lf-an[data-lf-modus="hoch"][data-lf-wachst] .lf-stufe[data-lf-kommt]{
  transform:translateY(calc((1 - var(--lf-t, 1)) * var(--lf-roll, 100%))) scale(calc(.94 + var(--lf-t, 1) * .06));
}
.lf-an[data-lf-modus="hoch"] .lf-buehne{ order:2; }
.lf-an[data-lf-modus="hoch"] .lf-bild{
  width:var(--lf-bild-b, 100%); height:var(--lf-bild-h, auto); max-width:100%;
  aspect-ratio:auto; align-self:center;
}

/* ── telefon: unten klebt die Bühne, die Stufen rollen als Karten darüber ── */
.lf-an[data-lf-modus="telefon"] .lf-bahn{ display:flex; flex-direction:column; height:calc(var(--lf-stufen, 4) * 70svh + 100svh); }
.lf-an[data-lf-modus="telefon"] .lf-steh{ display:contents; }
.lf-an[data-lf-modus="telefon"] .lf-buehne{
  margin-top:auto; position:sticky; bottom:0; z-index:2;
  padding-top:.6rem; padding-bottom:max(.6rem, env(safe-area-inset-bottom));
  background:var(--lf-hinter, #fff);
  box-shadow:0 -16px 14px -14px rgba(19,55,109,.16);
}
.lf-an[data-lf-modus="telefon"] .lf-bild{ max-width:var(--lf-bild-b, none); }
.lf-an[data-lf-modus="telefon"] .lf-text{ position:absolute; inset:0; z-index:1; margin:0; pointer-events:none; }
.lf-an[data-lf-modus="telefon"] .lf-stufe{ position:absolute; left:0; right:0; top:var(--lf-karte, 0px); margin:0; pointer-events:auto; }
.lf-an[data-lf-modus="telefon"] .lf-stufe + .lf-stufe{ margin-top:0; }
/* Eine Karte, die ganz unter Kopf- und Sprungleiste gerollt ist, verschwindet — sonst schiene sie
   zwischen den Leisten durch. */
.lf-an[data-lf-modus="telefon"] .lf-stufe[data-durch]{ visibility:hidden; }



/* ── Blättern (folien.js, ?bv-folien=1) ────────────────────────────────────
   Christopher, 25.10.2026: „einmal scrollen wechselt und rastet smooth ein … die Animationen sollen nur scrollen wenn
   man auf der Animation ist". Der Lauf ist eine Folie von Fensterhöhe: kein langer Scrollweg, keine Rastpunkte; die
   Stufe wechselt über den Zustand (lauf.js gehe). Passt die Einheit nicht ins Fenster (data-lf-lang), wird sie höher
   und man liest sie im normalen Scrollen. */
.lf-an[data-lf-blaettern] .lf-bahn{ height:100svh; }
.lf-an[data-lf-blaettern] .lf-rast{ display:none; }
.lf-an[data-lf-blaettern][data-lf-lang] .lf-bahn{ height:auto; }
.lf-an[data-lf-blaettern][data-lf-lang] .lf-steh{ position:relative; top:auto; height:auto; }