/* ═══════════════════════════════════════════════════════════════════════════
   teil-zzzzzz-glasbuehne.css — das Aussehen der Gleitsicht-Szene (vorlagen/teil-glasbuehne.php,
   assets/js/glasbuehne.js). Lädt nur in der Vorschau ?bv-neu=1. Wie Text und Bühne stehen
   (breit / hoch / telefon, Kleben, Rasten, Karten), regelt der gemeinsame Kern:
   assets/css/teil-zzzzzz-lauf.css + assets/js/lauf.js. Hier steht nur, was die Szene selbst zeigt,
   und wie die Bühne innen je Anordnung aufgeteilt ist.

   Ohne .gb-an (kein Skript, „Bewegung reduzieren", Skript startet nicht): nichts klebt und nichts
   rastet, alle Stufen stehen als Liste, die Zonen sind leicht getönt und beschriftet.
   Farben: die Token aus grund.css (--blau, --blau-hell, --gold, --gold-tief); die Fassung in den
   Tönen der Startseiten-Brille (dunkles Metall, Gold).
   ═══════════════════════════════════════════════════════════════════════════ */

.gb{ margin-block:clamp(2.2rem, 5vw, 4rem); }
.gb-kopf{ max-width:62ch; margin-bottom:clamp(1rem, 2.4vw, 1.6rem); }
.gb-kopf h3{ font-size:clamp(1.6rem, 2.8vw, 2.4rem); line-height:1.08; margin:.2rem 0 .7rem; }
.gb-kopf p{ color:var(--text-leise); margin:0; font-size:1.06rem; }

/* ── Ruhige Fassung: Raster ──────────────────────────────────────────────── */
.gb-buehne{ display:flex; flex-direction:column; gap:.7rem; }
.gb-motive{ order:1; }
.gb-bild-feld{ order:2; }
.gb-regler{ order:3; }
.gb-anzeige{ order:4; }
.gb-text{ margin-top:clamp(1.2rem, 4vw, 2rem); }
.gb.lf-an .gb-text{ margin-top:0; }
@media (min-width:960px){
  .gb:not(.lf-an) .gb-lauf{
    display:grid; align-items:start; column-gap:clamp(1.2rem, 2.4vw, 2rem);
    grid-template-columns:minmax(240px, .9fr) minmax(0, 2.25fr);
  }
  .gb:not(.lf-an) .lf-steh{ display:contents; }
  .gb:not(.lf-an) .gb-text{ grid-column:1; grid-row:1; margin-top:0; }
  .gb:not(.lf-an) .gb-buehne{ grid-column:2; grid-row:1; }
}
.gb-stufen{ list-style:none; margin:0; padding:0; }

/* ── Bühne innen, je Anordnung ───────────────────────────────────────────── */
/* breit: Motivwahl, Bild, Regler untereinander; rechts Teil und laufende Zahl. */
.gb.lf-an[data-lf-modus="breit"] .gb-buehne{
  display:grid; gap:clamp(.8rem, 1.6vw, 1.2rem) clamp(1rem, 2vw, 1.6rem);
  grid-template-columns:minmax(0, 1fr) minmax(170px, .32fr);
  grid-template-areas:"motive anzeige" "bild anzeige" "regler anzeige";
  align-items:center;
}
.gb.lf-an[data-lf-modus="breit"] .gb-motive{ grid-area:motive; }
.gb.lf-an[data-lf-modus="breit"] .gb-bild-feld{ grid-area:bild; justify-self:center; }
.gb.lf-an[data-lf-modus="breit"] .gb-anzeige{ grid-area:anzeige; display:block; }
.gb.lf-an[data-lf-modus="breit"] .gb-regler{ grid-area:regler; }
/* hoch: unter dem Text die Bühne als Spalte; Teil und Zahl in einer Zeile. */
.gb.lf-an[data-lf-modus="hoch"] .gb-buehne{ gap:clamp(.6rem, 1.4vh, 1rem); }
.gb.lf-an[data-lf-modus="hoch"] .gb-anzeige{ display:flex; align-items:center; gap:.75rem; flex-wrap:nowrap; min-width:0; }
.gb.lf-an[data-lf-modus="hoch"] .gb-anzeige-name{ display:none; }
.gb.lf-an[data-lf-modus="hoch"] .gb-zahl{ font-size:clamp(2.2rem, 4.2vw, 3.2rem); min-height:1em; }
.gb.lf-an[data-lf-modus="hoch"] .gb-teile{ order:3; margin-left:auto; }
/* Hohe Fenster: die Schrift der Stufen wächst mit (--lf-schrift aus lauf.js). */
.gb.lf-an[data-lf-modus="hoch"] .gb-stufe h4{ font-size:calc(clamp(1.25rem, 1.8vw, 1.6rem) * var(--lf-schrift, 1)); }
.gb.lf-an[data-lf-modus="hoch"] .gb-stufe-text{ font-size:calc(1.06rem * var(--lf-schrift, 1)); }
.gb.lf-an[data-lf-modus="hoch"] .gb-mass{ font-size:calc(.8rem * var(--lf-schrift, 1)); }
.gb.lf-an[data-lf-modus="hoch"] .gb-nr{ font-size:calc(1.8rem * var(--lf-schrift, 1)); }
/* Schmal (Telefon hochkant): „nur das Bild und der Text reicht" — die Zahlzeile entfällt. */
@media (max-width:599px){
  .gb.lf-an[data-lf-modus="hoch"] .gb-anzeige{ display:none; }
  .gb.lf-an[data-lf-modus="hoch"] .gb-bild-feld{ border-radius:22px; }
  .gb.lf-an[data-lf-modus="hoch"] .gb-motiv{ font-size:.78rem; padding:.3rem .66rem; }
  .gb.lf-an[data-lf-modus="hoch"] .gb-stufe h4{ font-size:1.2rem; margin-bottom:.35rem; }
  .gb.lf-an[data-lf-modus="hoch"] .gb-stufe-text{ font-size:1rem; line-height:1.5; }
  .gb.lf-an[data-lf-modus="hoch"] .gb-nr{ font-size:1.4rem; }
  .gb-ki{ font-size:.56rem; right:.8rem; bottom:.5rem; }
}
/* telefon: „dann nur das Bild und der Text reicht" — Bild und Regler; Zahl und Teil entfallen. */
.gb.lf-an[data-lf-modus="telefon"] .gb-buehne{ gap:.45rem; }
.gb.lf-an[data-lf-modus="telefon"] .gb-anzeige{ display:none; }
.gb.lf-an[data-lf-modus="telefon"] .gb-bild-feld{ aspect-ratio:412 / 246; border-radius:22px; }
.gb.lf-an[data-lf-modus="telefon"] .gb-motiv{ font-size:.78rem; padding:.3rem .66rem; }

/* ── Motivwahl ───────────────────────────────────────────────────────────── */
.gb-motive{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.gb-motive[hidden]{ display:none; }
.gb-motiv{
  font:inherit; font-size:.9rem; font-weight:750; line-height:1.2;
  padding:.45rem 1rem; border-radius:999px; cursor:pointer;
  border:1.5px solid rgba(19,55,109,.2); background:var(--weiss, #fff); color:var(--blau, #13376D);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gb-motiv:hover{ border-color:var(--blau, #13376D); }
.gb-motiv[aria-pressed="true"]{ background:var(--blau, #13376D); border-color:var(--blau, #13376D); color:var(--weiss, #fff); }
.gb-motiv:focus-visible{ outline:2px solid var(--gold-tief, #A98F5F); outline-offset:2px; }

/* ── Bild und Glas ───────────────────────────────────────────────────────── */
.gb-bild-feld{
  position:relative; margin:0; align-self:center; width:100%;
  aspect-ratio:412 / 290;
  border-radius:var(--r-l, 30px); overflow:hidden;
  box-shadow:0 18px 50px rgba(19,55,109,.14);
  background:var(--creme, #F6F0E6);
}
.gb-svg{ position:relative; display:block; width:100%; height:100%; }
/* Der Übergang zu Teil 2: die Bühne fährt an die Flanken heran (Glaskoordinaten). */
.gb-an .gb-szene{ transform-origin:200px 214px; transform:scale(calc(1 + var(--gb-tiefe, 0) * .18)); }
.gb-schleier{ fill:rgba(251,247,240,.42); }
/* Tiefenschärfe: eine Leinwand unter dem Glas zeigt das Bild samt Unschärfe nach Blickweite (glasbuehne.js);
   solange sie steht, ruht das Bild im SVG. Nur in der bewegten Fassung — ruhig steht das Bild scharf da. */
.gb-leinwand{ position:absolute; left:0; top:0; width:100%; height:100%; visibility:hidden; }
.gb-an.gb-tiefe-an .gb-leinwand{ visibility:visible; }
.gb-an.gb-tiefe-an .gb-bild{ visibility:hidden; }

/* Zonentönung (Bänder unter der Weichzeichnung — sichtbar nur im Kanal). */
.gb-ton-ferne{ opacity:.16; }
.gb-ton-zwischen{ opacity:.22; }
.gb-ton-nah{ opacity:.26; }

/* Die Flanken: Tönung, Schraffur, Kontur — alle per <use> auf denselben Pfad. Die Kontur leise und
   hellgrau (Christopher: „leicht grau … exakt auf der Form von dem Blur"). */
.gb-flanke-ton{ fill:var(--gold, #CBB082); opacity:0; }
.gb-schraffur{ opacity:.42; }
.gb-strich{ stroke:#fff; stroke-width:1.1; }
.gb-kontur, .gb-kontur-grund{ fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2.6 3.2; }
.gb-kontur{ stroke:#C6CBD2; stroke-width:.95; }
.gb-kontur-grund{ stroke:rgba(6,17,33,.12); stroke-width:1.9; }
.gb-blick{ display:none; }
.gb-blick-ring{ fill:rgba(255,255,255,.18); stroke:#fff; stroke-width:2.4; }
.gb-blick-kern{ fill:#fff; }

/* Die Fassung von vorn — dunkles Metall mit Glanz, goldene Innenkante; Backe, Scharnier, Oberbalken, Steg und
   Pad-Arm in Gold. Was eine Füllung trägt (Bügel, Backe, Walze), bringt sie als Attribut mit. */
.gb-fassung path:not([fill]), .gb-fassung ellipse{ fill:none; }
.gb-fassung path, .gb-fassung ellipse, .gb-fassung rect{ stroke-linecap:round; stroke-linejoin:round; }
.gb-f-schatten{ stroke:rgba(6,17,33,.3); stroke-width:9.5; transform:translateY(1.8px); }
.gb-f-rand{ stroke-width:6.6; }
.gb-f-innen{ stroke:var(--gold, #CBB082); stroke-width:1.1; opacity:.95; transform-origin:196px 162px; transform:scale(.976); }
.gb-f-licht{ stroke:rgba(255,255,255,.5); stroke-width:1.2; transform:translateY(-2.3px); }
.gb-f-glanz{ stroke:rgba(255,255,255,.85); stroke-width:1.5; stroke-dasharray:0 10 15 100; transform:translateY(-2.1px); }
.gb-f-buegel{ stroke:rgba(6,17,33,.45); stroke-width:.6; }
.gb-f-buegel-licht{ stroke:rgba(255,255,255,.38); stroke-width:.8; }
.gb-f-backe{ stroke:rgba(80,62,30,.55); stroke-width:.7; }
.gb-f-backe-licht{ stroke:rgba(255,250,236,.8); stroke-width:.9; }
.gb-f-scharnier{ stroke:rgba(80,62,30,.6); stroke-width:.7; }
.gb-f-glieder{ stroke:rgba(80,62,30,.7); stroke-width:.8; }
.gb-f-rohr-s{ stroke:rgba(6,17,33,.24); }
.gb-f-rohr-k{ stroke:var(--gold-tief, #A98F5F); }
.gb-f-rohr-m{ stroke:var(--gold, #CBB082); }
.gb-f-rohr-g{ stroke:rgba(255,250,236,.85); }
.gb-fassung .gb-f-pad{ fill:rgba(255,255,255,.1); stroke:rgba(255,255,255,.5); stroke-width:.8; }

/* Beschriftung im Glas: je Motiv eine Gruppe, die gewählte ist sichtbar. */
.gb-worte{ display:none; }
.gb-worte.gb-worte-an{ display:inline; }
.gb-schild{
  font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.01em;
  fill:#fff; paint-order:stroke; stroke:rgba(6,17,33,.58); stroke-width:3px; stroke-linejoin:round;
}
.gb-weite{ font-size:12.5px; font-weight:700; }
@media (max-width:600px){
  .gb-schild{ font-size:19px; stroke-width:3.6px; }
  .gb-weite{ font-size:15.5px; }
}
.gb-ki{
  position:absolute; right:1.1rem; bottom:.65rem; margin:0;
  font-size:.66rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 3px rgba(6,17,33,.6); opacity:.9;
}

/* ── Stufen ──────────────────────────────────────────────────────────────── */
.gb-stufe + .gb-stufe{ margin-top:1.5rem; }
.gb-stufe-kopf{ display:flex; gap:.6rem; align-items:baseline; margin:0 0 .4rem; }
.gb-nr{ font-family:"Instrument Serif", Georgia, serif; font-size:1.8rem; line-height:1; color:var(--gold-tief, #A98F5F); }
.gb-mass{ font-size:.8rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; color:var(--blau, #13376D); }
.gb-stufe h4{ font-size:clamp(1.25rem, 1.8vw, 1.6rem); margin:0 0 .5rem; line-height:1.15; }
.gb-stufe-text{ margin:0; color:var(--text-leise); font-size:1.06rem; line-height:1.58; }
.gb.lf-an[data-lf-modus="telefon"] .gb-stufe h4{ font-size:1.2rem; margin-bottom:.35rem; }
.gb.lf-an[data-lf-modus="telefon"] .gb-stufe-text{ font-size:1rem; line-height:1.5; }
.gb.lf-an[data-lf-modus="telefon"] .gb-nr{ font-size:1.4rem; }

/* ── Anzeige: Teil, laufende Zahl, Zone ──────────────────────────────────── */
.gb-anzeige{ display:none; }
.gb-anzeige p{ margin:0; }
.gb-teile{ display:flex; flex-wrap:wrap; gap:.35rem; }
.gb-teil{
  font-size:.72rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; line-height:1.2;
  padding:.32rem .7rem; border-radius:999px; color:var(--text-leise); background:rgba(19,55,109,.06);
  transition:background-color .35s ease, color .35s ease;
}
.gb-teil-nr{ color:var(--gold-tief, #A98F5F); }
.gb[data-teil="a"] .gb-teil[data-teil="a"], .gb[data-teil="b"] .gb-teil[data-teil="b"]{ background:var(--blau, #13376D); color:var(--weiss, #fff); }
.gb[data-teil="a"] .gb-teil[data-teil="a"] .gb-teil-nr, .gb[data-teil="b"] .gb-teil[data-teil="b"] .gb-teil-nr{ color:var(--gold, #CBB082); }
.gb.lf-an[data-lf-modus="hoch"] .gb-teil{ display:none; }
.gb.lf-an[data-lf-modus="hoch"][data-teil="a"] .gb-teil[data-teil="a"],
.gb.lf-an[data-lf-modus="hoch"][data-teil="b"] .gb-teil[data-teil="b"]{ display:inline-block; }
.gb-anzeige-name{ font-size:.8rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; color:var(--text-leise); }
.gb-anzeige .gb-anzeige-name{ margin-top:1.1rem; }
.gb-zahl{
  font-size:clamp(2.8rem, 5.4vw, 5rem); font-weight:850; line-height:1; letter-spacing:-.03em;
  color:var(--blau, #13376D); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.gb-zahl-einheit{ font-size:.42em; font-weight:800; letter-spacing:0; margin-left:.12em; }
/* Zonenname in Blau (Gold auf Weiß erreichte nur ≈3,1:1); die Zone zeigt ein Farbpunkt davor. */
.gb-zone-name{ font-size:1.15rem; font-weight:800; color:var(--blau, #13376D); white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.gb-anzeige .gb-zone-name{ margin-top:.4rem; }
.gb.lf-an[data-lf-modus="hoch"] .gb-anzeige .gb-zone-name{ margin-top:0; }
.gb-zone-name::before{
  content:""; display:inline-block; width:.62em; height:.62em; border-radius:50%; margin-right:.4em;
  background:var(--blau-hell, #2E63A8); vertical-align:.04em;
}
.gb[data-zone="zwischen"] .gb-zone-name::before{ background:linear-gradient(180deg, var(--blau-hell, #2E63A8), var(--gold, #CBB082)); }
.gb[data-zone="nah"] .gb-zone-name::before{ background:var(--gold-tief, #A98F5F); }
.gb[data-zone="rand"] .gb-zone-name::before, .gb[data-zone="klasse"] .gb-zone-name::before{ background:var(--gold, #CBB082); }

/* ── Regler ──────────────────────────────────────────────────────────────────
   Christopher, 24.10.2026: „Leiste dicker und die Entfernung schön lesbar drinnenstehend." Die
   Leiste ist ein dicker, heller Verlauf (Gold für die Nähe, Blau für die Ferne — im Glas gibt es keine
   Kante), die Entfernungen stehen in ihr, dunkel auf hell. Die Marke ist ein Ring: was unter ihr
   steht, bleibt lesbar. */
.gb-regler{ padding-inline:.2rem; }
.gb-regler-teil{ position:relative; }
.gb-regler-bahn{
  position:relative; height:38px; border-radius:999px;
  background:linear-gradient(90deg, #EFE2C6 0%, #F3EAD6 12%, #DCE6F3 71%, #CFDDEF 100%);
  box-shadow:inset 0 0 0 1px rgba(19,55,109,.08);
}
.gb-regler-stufe{ display:none; }
.gb-regler-stufe .gb-regler-bahn{ background:linear-gradient(90deg, #EEF2F8, #CFDDEF); }
.gb-feld{ display:none; }   /* Die Felder bleiben im Markup (Lage je Zone); gezeigt wird der durchgehende Verlauf. */
.gb-marke{ display:none; }
/* Jede Beschriftung steht mittig auf ihrem Wert; der Rand (--gb-rand) hält die äußeren innerhalb der
   Leiste. Dieselbe Rechnung setzt die Marke. */
.gb-regler-teil{ --gb-rand:1.9rem; --gb-marke-b:60px; }
.gb-regler-stufe{ --gb-rand:4.3rem; --gb-marke-b:118px; }
.gb-regler-skala{
  position:absolute; inset:0 var(--gb-rand); margin:0; pointer-events:none; z-index:2;
  font-size:.86rem; font-weight:800; color:var(--blau, #13376D); letter-spacing:.01em;
}
/* Jede Beschriftung ist ein Knopf (glasbuehne.js: ein Klick fährt weich dorthin). Ohne Skript gesperrt und
   aussehend wie bisher — reine Schrift auf der Leiste. */
.gb-ziel{
  position:absolute; top:50%; transform:translate(-50%, -50%); white-space:nowrap;
  -webkit-appearance:none; appearance:none; margin:0; padding:.35rem .4rem; border:0; border-radius:999px;
  background:none; font:inherit; letter-spacing:inherit; color:inherit; -webkit-text-fill-color:currentColor;
  opacity:1; line-height:1.1; cursor:default;
}
.gb-an .gb-ziel:not(:disabled){ pointer-events:auto; cursor:pointer; transition:background-color .2s ease; }
.gb-an .gb-ziel:not(:disabled):hover{ background:rgba(19,55,109,.1); }
.gb-ziel:focus-visible{ outline:2px solid var(--gold-tief, #A98F5F); outline-offset:1px; }
/* Schmal: kleinere Skala. Seit die Nähe ein Punkt ist (0,4 m, 26.10.2026), passen alle fünf Marken. */
@media (max-width:600px){
  .gb-regler-skala{ font-size:.78rem; }
  .gb-regler-teil{ --gb-rand:1.7rem; --gb-marke-b:52px; }
  .gb-regler-stufe{ --gb-rand:3.6rem; --gb-marke-b:98px; }
  .gb-regler-bahn{ height:34px; }
}

/* ── Fuß ─────────────────────────────────────────────────────────────────── */
.gb-fuss{ margin-top:clamp(1.4rem, 3vw, 2.2rem); max-width:70ch; }
.gb-fuss p{ color:var(--text-leise); font-size:1.04rem; }
.gb-fuss .knopf{ margin:.4rem 0 1rem; }
.gb-hinweis{ font-size:.86rem; }

/* ═══ Die bewegte Fassung (.gb-an) ═══════════════════════════════════════ */
/* Zonen folgen der Blickweite; die Flanken treten mit Teil 2 hervor. */
.gb-an .gb-ton-ferne{ opacity:calc(var(--gb-z-ferne, 0) * .3); }
.gb-an .gb-ton-zwischen{ opacity:calc(var(--gb-z-zwischen, 0) * .42); }
.gb-an .gb-ton-nah{ opacity:calc(var(--gb-z-nah, 0) * .46); }
.gb-an .gb-flanke-ton{ opacity:calc(var(--gb-z-rand, 0) * .2); }
.gb-an .gb-schraffur{ opacity:calc(var(--gb-z-rand, 0) * .6); }
.gb-an .gb-schild{ opacity:.5; transition:opacity .35s ease; }
.gb-an .gb-s-rand{ opacity:0; }
.gb-an[data-zone="ferne"] .gb-s-ferne,
.gb-an[data-zone="zwischen"] .gb-s-zwischen,
.gb-an[data-zone="nah"] .gb-s-nah,
.gb-an[data-teil="b"] .gb-s-rand,
.gb-an[data-zone="klasse"] .gb-s-zwischen,
.gb-an[data-zone="klasse"] .gb-s-nah{ opacity:1; }

/* Der Blickpunkt wandert den Kanal hinab (Glaskoordinaten). */
.gb-an .gb-blick{
  display:inline;
  transform:translate(calc(var(--gb-gx, 196) * 1px), calc(var(--gb-gy, 104) * 1px));
}

/* Regler: in Teil 1 die Entfernung, in Teil 2 die Ausbaustufe — an derselben Stelle. */
.gb-an .gb-regler{ display:grid; }
.gb-an .gb-regler-teil{ grid-area:1 / 1; transition:opacity .4s ease, visibility 0s linear 0s; }
.gb-an .gb-regler-stufe{ display:block; opacity:0; }
.gb-an[data-teil="b"] .gb-regler-weite{ opacity:0; }
.gb-an[data-teil="b"] .gb-regler-stufe{ opacity:1; }
/* Der verborgene Teil nimmt keinen Klick und keinen Fokus an (erst nach dem Ausblenden). */
.gb-an .gb-regler-stufe,
.gb-an[data-teil="b"] .gb-regler-weite{ visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s; }
.gb-an[data-teil="b"] .gb-regler-stufe{ visibility:visible; transition:opacity .4s ease, visibility 0s linear 0s; }
/* Die Marke: ein Feld um den Wert (heller Blauschleier, blauer Rand) — die Schrift darunter bleibt lesbar,
   kein Strich läuft durch einen Buchstaben. */
.gb-an .gb-marke{
  display:block; position:absolute; top:50%; z-index:1;
  left:calc(var(--gb-rand) + var(--gb-x, 1) * (100% - 2 * var(--gb-rand)));
  width:0; height:0;
}
.gb-an .gb-marke-stufe{ left:calc(var(--gb-rand) + var(--gb-k, 0) * (100% - 2 * var(--gb-rand))); }
.gb-marke-knopf{
  position:absolute; top:-15px; left:calc(var(--gb-marke-b) / -2);
  width:var(--gb-marke-b); height:30px; border-radius:999px;
  background:rgba(19,55,109,.12); border:2px solid var(--blau, #13376D);
  box-shadow:0 3px 10px rgba(19,55,109,.22);
}
@media (max-width:600px){
  .gb-marke-knopf{ top:-13px; height:26px; }
}

@media (prefers-reduced-motion:reduce){
  .gb-teil, .gb-regler-teil{ transition:none; }
}