/* ═══════════════════════════════════════════════════════════════════════════
   teil-zzzzzz-glaslauf.css — die gezeichneten Gläser als ein Scroll-Abschnitt
   (vorlagen/teil-glaslauf.php, assets/js/glaslauf.js). Nur Vorschau ?bv-neu=1.
   Anordnung (breit / hoch / telefon) aus dem gemeinsamen Kern teil-zzzzzz-lauf.css.
   Die Zeichnung selbst trägt die Klassen der Schaukästen (teil-zz-glasarten.css: gl-rand,
   gl-fassung, gl-wort, gl-leiste …) und des Vergleichs (teil-zzzzzz-systeme.css: gl-sys-segment,
   gl-sys-kante).
   Ohne .gla-an (kein Skript, „Bewegung reduzieren"): keine Bühne, jede Stufe mit ihrer eigenen
   kleinen Zeichnung als Liste.
   ═══════════════════════════════════════════════════════════════════════════ */

.gla{ --lf-seiten:1.129; margin-block:clamp(1.5rem, 4vw, 3rem); }
.gla-stufen{ list-style:none; margin:0; padding:0; }
.gla-stufe + .gla-stufe{ margin-top:2.2rem; }
.gla-kopf{ display:flex; gap:.6rem; align-items:baseline; margin:0 0 .35rem; }
.gla-nr{ font-family:"Instrument Serif", Georgia, serif; font-size:1.8rem; line-height:1; color:var(--gold-tief, #A98F5F); }
.gla-mass{ font-size:.8rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; color:var(--blau, #13376D); }
.gla-ueberschrift{ margin:.1rem 0 .25rem; }
.gla-titel{ font-size:clamp(1.25rem, 1.8vw, 1.6rem); margin:0 0 .5rem; line-height:1.15; }
.gla-satz{ margin:0; color:var(--text-leise); font-size:1.06rem; line-height:1.58; max-width:62ch; }
.gla-nachsatz{ color:var(--text-leise); font-size:1.02rem; max-width:70ch; margin:clamp(1rem, 2.4vw, 1.6rem) 0 0; }
.gla-einzeln{ margin-top:1rem; max-width:27rem; }
.gla-einzeln .gl-glas{ width:100%; }
/* Die kleinen Zeichnungen der Liste wie die große: die Unschärfe grau getönt statt schraffiert — der Text sagt
   „Grau getönt" (teil-glaslauf.php), die Schaukästen der alten Fassung (inc/glasarten.php) schraffierten. */
.gla-einzeln .gl-schraffur{ display:none; }
.gla-einzeln .gl-unscharf{ fill:#9AA8BE; opacity:.55; }

/* ── Bühne ───────────────────────────────────────────────────────────────── */
.gla:not(.gla-an) .gla-buehne{ display:none; }
.gla-an .gla-einzeln{ display:none; }
.gla-buehne{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(.6rem, 1.4vh, 1rem); }
.gla-gruppen{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.gla-gruppe{
  font-size:.9rem; font-weight:750; line-height:1.2; text-decoration:none;
  padding:.42rem 1.05rem; border-radius:999px;
  border:1.5px solid rgba(19,55,109,.2); background:var(--weiss, #fff); color:var(--blau, #13376D);
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.gla-gruppe:hover{ border-color:var(--gold, #CBB082); }
.gla-gruppe:focus-visible{ outline:2px solid var(--gold-tief, #A98F5F); outline-offset:2px; }
.gla[data-gruppe="einstaerke"] .gla-gruppe[data-gruppe="einstaerke"],
.gla[data-gruppe="gleitsicht"] .gla-gruppe[data-gruppe="gleitsicht"],
.gla[data-gruppe="bifokal"] .gla-gruppe[data-gruppe="bifokal"]{ background:var(--blau, #13376D); border-color:var(--blau, #13376D); color:var(--weiss, #fff); }
.gla-bild{ margin:0; width:100%; aspect-ratio:420 / 372; position:relative; }
/* Die Fassung: blaues, matt eingefärbtes Pulver wie aus dem 3D-Drucker (Filter in der Zeichnung). */
.gla-fassung{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.gla-f-strich{ fill:none; stroke:#27508C; stroke-linecap:round; stroke-linejoin:round; }
.gla-f-rand{ stroke-width:14; }
.gla-f-buegel{ stroke-width:11; }
.gla-f-steg{ stroke-width:11; }
.gla-f-zweites{ stroke-width:14; }
.gla-f-flaeche{ fill:#27508C; }
.gla-bild .gla-glas{ display:block; width:100%; height:100%; overflow:visible; }
/* Die Unschärfe: weiche graublaue Fläche (Verlauf aus der Zeichnung), dazu eine kaum sichtbare helle Kante —
   wie die Zonenform der Foto-Szene, ohne Schraffur. */
.gla-unscharf{ stroke:none; }
.gla-unscharf-kante{ fill:none; stroke:rgba(255,255,255,.75); stroke-width:1.2; stroke-linejoin:round; }
/* Die Entfernungsleiste wie der Regler der Foto-Szene: ein dicker heller Balken, die scharfen Bereiche als goldene
   Felder (Lage und Breite setzt glaslauf.js je Stufe), die Entfernungen dunkel und fett mittig darin. */
.gla-bahn{ fill:#E8EEF6; stroke:rgba(19,55,109,.10); stroke-width:1; }
/* Die Felder stoßen ohne Trennstrich aneinander: die Grenzen liegen genau auf den Marken 0,5 m und 6 m, ein Strich
   schnitt die Zahl (gemessen 1440 px). Wo kein Bereich scharf ist, bleibt die Leiste hell. */
.gla-feld{ fill:var(--gold, #CBB082); fill-opacity:.62; }
.gla-skala{ fill:var(--blau, #13376D); font-family:inherit; font-size:14px; font-weight:800; letter-spacing:.01em; }
.gla-kein{ transform-box:fill-box; transform-origin:center; }

/* ── Fenster, Punkte, Faden ──────────────────────────────────────────────────
   Christopher, 24.10.2026 spät: „wenn der ganze Hintergrund nur weiß ist, dann wirkt das schlecht … Balken,
   Linien, Fenster oder einfach nur ein Kreuz oder Punkte … und einen Faden, der durchläuft." Die Bühne wird ein
   Fenster in den Hausfarben (blau-zart oben rechts, gold-zart unten links auf Grund), ringsum ein feines
   Punkteraster, das mit dem Scrollweg langsam wandert (--lf-p aus lauf.js) und zur Mitte hin ausläuft — im Glas
   bleibt nichts. Der Faden, seine Spur, die Stufenpunkte und die Passkreuze: .gla-faden (glaslauf.js). */
.gla.lf-an .lf-buehne.gla-buehne{
  border-radius:var(--r-l, 30px);
  padding:clamp(.8rem, 1.8vw, 1.4rem);
  background:
    radial-gradient(90% 70% at 88% 6%, rgba(232,238,247,.95) 0%, rgba(232,238,247,0) 62%),
    radial-gradient(80% 70% at 8% 96%, rgba(247,240,226,.95) 0%, rgba(247,240,226,0) 66%),
    var(--grund, #FBF7F0);
  box-shadow:inset 0 0 0 1px rgba(19,55,109,.05);
}
.gla.lf-an[data-lf-modus="hoch"] .gla-buehne{ position:relative; }
/* Hoch, wenn Schrift und Bild schon in voller Größe stehen (sehr hohe Fenster, z. B. der Hochkant-Bildschirm): das
   Fenster füllt die übrige Höhe, das Glas steht mittig darin — statt eines weißen Randes über dem Text und unter dem
   Fenster (gemessen 1196 × 1848: rund 155 und 200 px). Erst nach dem Einpassen (data-lf-wachst), sonst mäße lauf.js
   die Bühne in voller Höhe. */
.gla.lf-an[data-lf-modus="hoch"][data-lf-wachst] .gla-buehne{ flex-grow:1; }
/* … die Knöpfe oben im Fenster, das Glas mittig im Rest (sonst schwebten die Knöpfe mitten im Fenster). */
.gla.lf-an[data-lf-modus="hoch"][data-lf-wachst] .gla-gruppen,
.gla.lf-an[data-lf-modus="hoch"][data-lf-wachst] .gla-bild{ margin-bottom:auto; }
.gla.lf-an .gla-buehne::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle, rgba(19,55,109,.16) 1.1px, transparent 1.7px);
  background-size:20px 20px;
  background-position:0 calc(var(--lf-p, 0) * -80px);
  -webkit-mask-image:radial-gradient(62% 58% at 50% 50%, transparent 48%, #000 100%);
          mask-image:radial-gradient(62% 58% at 50% 50%, transparent 48%, #000 100%);
}
.gla.lf-an .gla-buehne > :not(.gla-faden){ position:relative; z-index:1; }
.gla-faden{ display:none; }
.gla.lf-an .gla-faden{ display:block; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.gla-faden-linie{ fill:none; stroke:var(--gold, #CBB082); stroke-width:1.8; stroke-linecap:round; }
.gla-faden-spur{ fill:none; stroke:var(--gold-tief, #A98F5F); stroke-opacity:.38; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:.1 7; }
.gla-kreuze{ fill:none; stroke:var(--gold-tief, #A98F5F); stroke-opacity:.55; stroke-width:1.2; stroke-linecap:round; }
.gla-faden-punkt{ fill:var(--grund, #FBF7F0); stroke:var(--gold-tief, #A98F5F); stroke-width:1.5; transform-box:fill-box; transform-origin:center; transition:transform .35s var(--weich, ease), fill .35s ease; }
.gla-faden-punkt[data-z="durch"]{ fill:var(--gold, #CBB082); }
.gla-faden-punkt[data-z="jetzt"]{ fill:var(--gold-tief, #A98F5F); transform:scale(1.55); }
/* Ring statt Faden (data-gla-ring): die goldene Linie mit ihren Punkten entfällt, die Passkreuze bleiben. */
.gla[data-gla-ring] .gla-faden-linie,
.gla[data-gla-ring] .gla-faden-spur,
.gla[data-gla-ring] .gla-faden-punkt{ display:none; }
.gla-ring{ display:none; }
/* (0,5,0): sticht „.gla-buehne > :not(.gla-faden){position:relative}" aus — sonst stand der Ring als Fluss-Element
   mittig über den Knöpfen und schob sie nach unten, gemessen 1440 px */
.gla.lf-an .lf-buehne.gla-buehne > .gla-ring{
  display:grid; place-items:center; position:absolute; z-index:2; top:14px; right:14px;
  width:clamp(42px, 4.2vw, 56px); aspect-ratio:1;
}
.gla-ring svg{ grid-area:1 / 1; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.gla-ring-spur{ fill:rgba(255,255,255,.75); stroke:rgba(169,143,95,.25); stroke-width:3; }
.gla-ring-voll{ fill:none; stroke:var(--gold-tief, #A98F5F); stroke-width:3; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.gla-ring-zahl{ grid-area:1 / 1; font-family:"Instrument Serif", Georgia, serif; font-size:clamp(1rem, 1.4vw, 1.3rem); line-height:1; color:var(--blau, #13376D); }
/* Unter den Zonen liegt Weiß: ihre Farben sind auf Weiß abgestimmt, das Fenster ist getönt. */
.gla-grund{ fill:#fff; }
/* Telefon: die Bühne steht unten und deckt die Karten — oben gerundet, der Schatten nach oben bleibt. */
.gla.lf-an[data-lf-modus="telefon"] .lf-buehne.gla-buehne{
  border-radius:18px 18px 0 0;
  padding:.7rem .7rem max(.7rem, env(safe-area-inset-bottom));
  box-shadow:0 -16px 14px -14px rgba(19,55,109,.16), inset 0 0 0 1px rgba(19,55,109,.05);
}

/* breit: die Zeichnung so groß, wie die Höhe erlaubt — die Grenze des Kerns (--lf-bild-b) gilt mit, sonst
   wuchs das Glas in flachen Fenstern über die Fensterhöhe */
.gla.lf-an[data-lf-modus="breit"] .gla-bild{ max-width:min(100%, 56rem, var(--lf-bild-b, 56rem)); }
/* (bis 24.10.2026 spät 34rem — im Fenster der Bühne stand das Glas bei 2560 px klein in einer großen leeren Fläche) */
/* hoch: Schrift wächst mit (--lf-schrift aus lauf.js) */
.gla.lf-an[data-lf-modus="hoch"] .gla-titel{ font-size:calc(clamp(1.25rem, 1.8vw, 1.6rem) * var(--lf-schrift, 1)); }
.gla.lf-an[data-lf-modus="hoch"] .gla-satz{ font-size:calc(1.06rem * var(--lf-schrift, 1)); max-width:none; }
/* Telefon: „nur das Bild und der Text reicht" — die Gruppenknöpfe entfallen */
@media (max-width:599px){
  .gla.lf-an .gla-gruppen{ display:none; }
  .gla.lf-an .gla-titel{ font-size:1.2rem; margin-bottom:.35rem; }
  .gla.lf-an .gla-satz{ font-size:1rem; line-height:1.5; }
  .gla.lf-an .gla-nr{ font-size:1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  .gla-gruppe, .gla-faden-punkt{ transition:none; }
}