/* ═══════════════════════════════════════════════════════════════════════════
   teil-zzzzzz-brillenarten.css — das Aussehen des Brillenarten-Abschnitts.
   Anordnung, Kleben, Rasten und Karten kommen aus teil-zzzzzz-lauf.css (BVLauf);
   hier steht nur, was diese Szene selbst zeigt: fünf überblendete Bilder, das
   Zeichen je Art, die Zählung und der Satzbau der Stufe.

   Christopher, 24.10.2026: „dass sich beim Scrollen die Bilder ändern und der Text so
   durchgeht und vielleicht immer noch ein Icon dabei ist, dass es noch ein bisschen
   aufgelockert wird."

   Das Präfix teil-zzzzzz- ist Pflicht, nicht Geschmack: die Teilstil-Schleife in
   functions.php lädt diese Dateien nur in der Vorschau, und bv_buendel_plan() nimmt
   ausschliesslich dieses Präfix von der Pflicht aus, in einem Bündel zu stecken.

   NETZ 0 — hier steht der ENDZUSTAND, nicht der Anfangszustand. Ohne .ar-an klebt
   nichts, rastet nichts und ist nichts verborgen: die fünf Bilder stehen untereinander,
   darunter die fünf Arten mit Zeichen, Überschrift und vollem Text. Erst .ar-an stapelt.
   Die Narbe dazu steht in teil-zn-brillenarten.css: „Ohne JavaScript wird .auf nie
   gesetzt — dann stünde die ganze Übersicht auf opacity:0. Genau dieser Fehler hat in
   diesem Theme schon einmal eine Fläche verschluckt."
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stellschrauben ───────────────────────────────────────────────────────────
   Alles, was dieser Abschnitt an Maßen und Größen festlegt, steht hier an einer Stelle.
   Angelegt am 24.10.2026 für den Gesamtentwurf der Augenoptik-Seite: ein einheitliches
   Design soll diese Werte überschreiben können, ohne eine einzige Regel darunter
   anzufassen — `.ar{ --ar-titel: … }` genügt. Farben kommen weiter aus den Hausfarben
   (grund.css: --blau #13376D, --gold #CBB082, gegengelesen gegen Company/CI/ci.json
   Version 54, status „bestätigt"); hier wird keine eigene Farbe erfunden. */
.ar{
  margin-block:clamp(2rem, 5vw, 3.5rem);

  /* Seitenverhältnis der Bühne. Gemessen an den Bandbildern: 1536 × 1024. */
  --ar-seiten:3 / 2;
  /* Schriftgrade, bevor der Kern oder die feste Staffel sie vervielfacht. */
  --ar-titel:clamp(1.15rem, .6rem + 1.6vw, 1.6rem);
  --ar-text:1rem;
  --ar-nr:.82rem;
  /* Fester Faktor für ?bv-arten=3 — das Mittel der in =2 gemessenen Staffel 1,2 … 1,6. */
  --ar-schrift-fest:1.4;
  /* Wie klein ein Bild ist, solange es außerhalb des Rahmens wartet. */
  --ar-klein:.96;
  --ar-zeichen:clamp(34px, 5vw, 44px);
  --ar-rund:var(--r-mittel, 14px);
}

/* ── Die Bühne: das Feld trägt die Höhe, nicht das Bild ──────────────────────
   Flex und ein Feld mit festem Seitenverhältnis, nicht Grid: „ein Bild mit
   aspect-ratio und Prozentbreite bekam im Grid eine zu niedrige Zeile und lag über
   dem Regler — gemessen 24.10.2026, 390 px" (teil-zzzzzz-glasbuehne.css). */
.ar-bild-feld{
  margin:0;
  display:flex; flex-direction:column; row-gap:.4rem;
}
.ar-bild{
  display:block; width:100%; height:auto; max-width:100%;
  border-radius:var(--ar-rund);
  background:var(--blau-zart, #E8EEF7);
}
.ar-bild + .ar-bild{ margin-top:.5rem; }   /* ruhige Fassung: untereinander, nichts überlappt */

.ar-ki{
  margin:0; min-height:1em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:.78rem; color:var(--text-leise, #6B7686);
}

/* ── Die Stufe ───────────────────────────────────────────────────────────────── */
.ar-stufen{ list-style:none; margin:0; padding:0; }
.ar-stufe{ color:var(--blau, #13376D); }
.ar-stufe + .ar-stufe{ margin-top:clamp(1.6rem, 4vw, 2.6rem); }

.ar-nr{
  margin:0 0 .2rem; font-variant-numeric:tabular-nums;
  font-size:.82rem; font-weight:700; letter-spacing:.14em;
  color:var(--gold-tief, #A98F5F);
}
.ar-zeichen{
  display:block; width:var(--ar-zeichen); height:auto;
  margin-bottom:.5rem; color:var(--blau, #13376D);
}
.ar-titel{ margin:0 0 .5rem; }
.ar-stufe-text > :first-child{ margin-top:0; }
.ar-stufe-text > :last-child{ margin-bottom:0; }

/* ═══ ab hier nur mit .ar-an — also nur, wenn die Weiche im Abschnitt sie gesetzt hat
   (Bewegung erlaubt, IntersectionObserver vorhanden, svh verstanden) und brillenarten.js
   den Aufbau bestätigt hat. Sonst gilt alles darüber. ═══════════════════════════ */

/* Die fünf Bilder in ein Feld mit festem 3:2 — gemessen an den Bandbildern: 1536 × 1024.
   Das Feld SCHNEIDET AB: die Bilder rollen hinein und hinaus, und was draußen ist, soll
   weg sein. `clip` und nicht `hidden` — hidden macht aus dem Feld einen Scrollbehälter,
   und genau daran ist in diesem Theme am 04.10.2026 schon eine Scroll-Zeitachse
   gescheitert (vier Stellen mussten entfernt werden). */
.ar-an .ar-bild-feld{
  display:block; position:relative; overflow:clip;
  border-radius:var(--ar-rund);
}
.ar-an .ar-bild-feld::before{ content:""; display:block; aspect-ratio:var(--ar-seiten); }
.ar-an .ar-bild{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; margin:0; border-radius:0;
  /* KEINE Deckkraft und KEINE Zeit-Transition. Der Wechsel ist eine Verwandlung am
     Scrollweg: brillenarten.js schreibt je Bild `transform` aus dem Fortschritt des
     Kerns. Christopher, 24.10.2026: „es sollen Transformationen sein, der Hintergrund
     soll stehen bleiben und es sollen die Bildgrößen und die Schriften transformieren."
     Vorher stand hier eine .45-s-Blende — also der „Light-Effekt", den er abgelehnt hat.
     Der Anfangszustand parkt die Bilder 2–5 unter dem Rahmen, damit vor dem ersten
     Zeichnen nicht fünf Bilder übereinander stehen. */
  transform:translateY(100%) scale(var(--ar-klein));
  transition:none;
  will-change:transform;
}
/* Nach dem gemeldeten Index, nicht nach der Stellung im DOM: fehlt einer Art das Bild, fällt
   ihr <img> in der Vorlage weg, und `nth-of-type(1)` träfe das falsche. */
.ar-an .ar-bild[data-ar-i="0"]{ transform:none; }

/* ── Die mitwachsende Fassung (?bv-arten=2, `data-lf-wachsen` am Abschnitt) ────────────────
   Der Kern staffelt dann Texthöhe und Bildgröße je Stufe und schreibt dazu `--lf-schrift`
   am Abschnitt und je Stufe — gelesen werden muss es hier. Ohne diese Regeln schrieb der
   Kern den Wert, und die Schrift blieb gleich: „transformiert" wurde nichts (Web Agent,
   24.10.2026). Christopher dazu: „Text ist zu klein, der muss massiver werden und die Bilder
   wieder kleiner … es sollen die Bildgrößen und die Schriften transformieren."
   Nur im Modus „hoch" — in „breit" trägt die Textspalte eine feste Breite, und in „telefon"
   bestimmt die längste Karte den Scrollweg. */
.ar-an[data-lf-wachsen][data-lf-modus="hoch"] .ar-titel{
  font-size:calc(var(--ar-titel) * var(--lf-schrift, 1));
  line-height:1.15;
}
.ar-an[data-lf-wachsen][data-lf-modus="hoch"] .ar-stufe-text{
  font-size:calc(var(--ar-text) * var(--lf-schrift, 1));
}
.ar-an[data-lf-wachsen][data-lf-modus="hoch"] .ar-nr{
  font-size:calc(var(--ar-nr) * var(--lf-schrift, 1));
}

/* ?bv-arten=3 — eine Schrift für alle Stufen, nur größer.
   Gemessen in =2 bei 900 × 1200: der Kern staffelt nach dem Platz, den der Text lässt, und die
   Überschrift springt zwischen Nachbarn von 28,8 auf 38,4 px (Faktor 1,2 bis 1,6). Hier steht
   stattdessen der feste Faktor 1,4 — das Mittel der gemessenen Staffel —, damit die Schrift
   „massiver" ist, ohne von Art zu Art zu springen. Die Bilder bleiben wie in =2 kleiner, weil
   `data-lf-wachsen` gesetzt bleibt; nur die Schriftstaffelung ist überschrieben. */
.ar-an[data-ar-schrift="gleich"][data-lf-modus="hoch"] .ar-titel{
  font-size:calc(var(--ar-titel) * var(--ar-schrift-fest));
}
.ar-an[data-ar-schrift="gleich"][data-lf-modus="hoch"] .ar-stufe-text{
  font-size:calc(var(--ar-text) * var(--ar-schrift-fest));
}
.ar-an[data-ar-schrift="gleich"][data-lf-modus="hoch"] .ar-nr{
  font-size:calc(var(--ar-nr) * var(--ar-schrift-fest));
}

.ar-an .ar-ki{
  position:absolute; left:.6rem; right:.6rem; bottom:.45rem;
  margin:0; padding:.1rem .45rem; width:max-content; max-width:calc(100% - 1.2rem);
  border-radius:var(--r-rund, 999px);
  background:rgba(255,255,255,.78); color:var(--text-leise, #6B7686);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

.ar-an .ar-stufe + .ar-stufe{ margin-top:0; }

/* In „breit" und „hoch" liegen alle Stufen in derselben Zelle (Kern). Die Zählung und das
   Zeichen stehen dann dichter zusammen, damit die aktive Stufe als eine Einheit liest. */
.ar-an:is([data-lf-modus="breit"], [data-lf-modus="hoch"]) .ar-nr{ margin-bottom:.1rem; }

/* Telefon: die Stufe ist eine Karte über der klebenden Bühne. Sie braucht einen eigenen
   Grund, sonst läuft der Text über das Bild darunter. */
.ar-an[data-lf-modus="telefon"] .ar-stufe{
  padding:clamp(.8rem, 3.4vw, 1.1rem);
  border-radius:var(--ar-rund);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 8px 28px rgba(19,55,109,.10);
}
.ar-an[data-lf-modus="telefon"] .ar-zeichen{
  width:30px; margin-bottom:.35rem;
}

/* Die Abschaltung macht das Skript, nicht die Medienabfrage — hier nur der Zusatz, wie im Kern. */
@media (prefers-reduced-motion:reduce){
  .ar-stufe, .ar-bild{ transition:none; }
}