/* ═══════════════════════════════════════════════════════════════════════════
   teil-zn — Die Übersicht der Brillenarten unter „01 Brillenarten"
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 8): die Brillenarten der Startseite sollen
   hier aufgelistet werden, in seiner Reihenfolge. Was gelistet wird und warum,
   steht in inc/uebersicht.php.

   Bewusst **nicht** dieselbe Kachel wie auf der Startseite: dort ist es eine
   Auslage mit großem Bild, hier ein Inhaltsverzeichnis. Darum eine flache,
   waagerechte Zeile — Miniatur, Name, Halbsatz, Pfeil nach unten. Wer das
   sieht, weiß sofort: das führt weiter unten auf derselben Seite hin.

   08.11.2026 — Christopher, mit Bildschirmfoto: „die Übersichtskacheln werden
   immer sehr klein in fixer Größe angezeigt. Können die ihre Größe in
   Abhängigkeit vom Platz ändern. Responsive für mobil sowieso."
   Ursache: Bild (58–70 px) und Schrift (≤ 1 rem) waren an feste Grenzen
   gebunden, die Kachel konnte breiter werden, ihr Inhalt nicht. Jetzt richtet
   sich alles nach der Breite der Spalte (Container-Abfragen; Container ist
   der umgebende .bahn-Block — ein Element kann sich nicht selbst abfragen,
   gemessen 08.11.2026: an .ba-uebersicht selbst griff keine Regel): die
   Spaltenzahl (3 · 2) nach dem Platz, Bild, Schrift, Polster und Pfeil
   anteilig zur Kachelbreite (--ba-t). Unter 600 px Spaltenbreite steht das
   Bild oben und die Kacheln stehen zu zweit nebeneinander (das Muster aus dem
   Gesamtentwurf teil-zzzzzz-seite.css), ganz schmal eine Spalte.
   Browser ohne Container-Abfragen bekommen die Regeln von vorher (@supports).
   ═══════════════════════════════════════════════════════════════════════════ */

.bahn:has(> .ba-uebersicht){ container-type:inline-size; container-name:ba-rahmen }

.ba-uebersicht{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap:clamp(.5rem, .9vw, .8rem);
  margin:clamp(1.1rem, 2vw, 1.8rem) 0 clamp(1.4rem, 2.4vw, 2.2rem);
}

.ba-kachel{
  display:flex; align-items:center; gap:clamp(.7rem, 1.1vw, .95rem);
  padding:clamp(.5rem, .8vw, .7rem);
  border-radius:var(--r-m);
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 6px 20px rgba(19,55,109,.06);
  text-decoration:none; color:inherit;
  transition:background .35s var(--weich), box-shadow .35s var(--weich),
             border-color .35s var(--weich);
}
.ba-kachel:hover,
.ba-kachel:focus-visible{
  background:#fff;
  border-color:var(--gold);
  box-shadow:0 14px 34px rgba(19,55,109,.12);
}
.ba-kachel:focus-visible{ outline:2px solid var(--blau); outline-offset:2px }

.ba-bild{
  flex:none; display:block; overflow:hidden;
  width:clamp(58px, 5vw, 70px); aspect-ratio:1;
  border-radius:calc(var(--r-m) - .35rem);
  background:var(--sand);
}
.ba-bild img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--weich) }
.ba-kachel:hover .ba-bild img{ transform:scale(1.08) }

.ba-text{ display:flex; flex-direction:column; min-width:0; gap:.12em }
.ba-text strong{
  color:var(--blau); font-weight:800; line-height:1.25;
  font-size:clamp(.92rem, 1.02vw, 1rem);
  hyphens:auto; overflow-wrap:anywhere;   /* „Arbeitsplatzbrillen" in einer schmalen Kachel */
}
.ba-text small{
  color:var(--text-leise); font-size:clamp(.78rem, .86vw, .84rem); line-height:1.4;
}

.ba-pfeil{
  flex:none; margin-left:auto;
  display:grid; place-items:center;
  width:1.9em; height:1.9em; border-radius:50%;
  background:var(--gold-zart); color:var(--gold-tief);
  font-size:.9rem; line-height:1;
  transition:transform .35s var(--weich), background .35s var(--weich);
}
.ba-kachel:hover .ba-pfeil{ transform:translateY(3px); background:var(--gold); color:#2A2113 }

/* ── Größe nach Platz (08.11.2026) ─────────────────────────────────────────
   1cqi = 1 % der Inhaltsbreite des .bahn-Blocks (= Breite der Übersicht).
   --ba-t ist die rechnerische Kachelbreite: (Breite − Lücken) / Spalten.
   Bild 24 %, Name 5 %, Halbsatz 3,9 %, Pfeil 3,6 % davon — mit Boden und
   Deckel, damit weder Winzlinge noch Plakate entstehen.
   Höchstens DREI Spalten, nicht vier: bei vier Spalten bliebe die Kachel auch
   auf einem breiten Schirm bei ~320 px und das Bild bei ~75 px — das war sein
   Befund („immer sehr klein"). Mit dreien wächst sie bis 474 px, das Bild bis
   114 px. Acht Kacheln in drei Spalten lassen in der letzten Reihe zwei übrig;
   die stehen mittig (Raster aus sechs Spuren, jede Kachel zwei Spuren breit),
   damit die Reihe gewollt aussieht und keine Lücke rechts bleibt.
   „Arbeitsplatzbrillen" passt ab ~290 px Kachelbreite in eine Zeile: 3 Spalten
   ab 900 px, 2 ab 600 px. */
@container ba-rahmen (min-width: 600px){
  .ba-uebersicht{ --ba-gap:clamp(.5rem, 1cqi, 1rem); gap:var(--ba-gap) }
  .ba-uebersicht{ grid-template-columns:repeat(2, minmax(0, 1fr)); --ba-t:calc((100cqi - var(--ba-gap)) / 2) }
  .ba-kachel{ gap:clamp(.7rem, var(--ba-t) * .035, 1.3rem); padding:clamp(.5rem, var(--ba-t) * .028, 1.1rem) }
  .ba-bild{ width:clamp(58px, var(--ba-t) * .24, 96px) }
  .ba-text strong{ font-size:clamp(.92rem, var(--ba-t) * .05, 1.15rem) }
  .ba-text small{ font-size:clamp(.78rem, var(--ba-t) * .039, .95rem) }
  .ba-pfeil{ font-size:clamp(.85rem, var(--ba-t) * .036, 1.05rem) }
}
@container ba-rahmen (min-width: 900px){
  .ba-uebersicht{ grid-template-columns:repeat(6, minmax(0, 1fr)); --ba-t:calc((100cqi - 2 * var(--ba-gap)) / 3) }
  .ba-kachel{ grid-column:span 2 }
  /* Rest der letzten Reihe mittig: zwei übrige → Spuren 2–3 und 4–5, eine übrige → Spuren 3–4 */
  .ba-kachel:nth-child(3n+1):nth-last-child(2){ grid-column:2 / span 2 }
  .ba-kachel:nth-child(3n+2):last-child{ grid-column:4 / span 2 }
  .ba-kachel:nth-child(3n+1):last-child{ grid-column:3 / span 2 }
  .ba-bild{ width:clamp(58px, var(--ba-t) * .24, 128px) }
  .ba-text strong{ font-size:clamp(.92rem, var(--ba-t) * .05, 1.3rem) }
  .ba-text small{ font-size:clamp(.78rem, var(--ba-t) * .039, 1.05rem) }
  .ba-pfeil{ font-size:clamp(.85rem, var(--ba-t) * .036, 1.15rem) }
}

/* Telefon und schmales Fenster: Bild oben, zu zweit nebeneinander; unter
   ~330 px eine Spalte. Die Porträts (820 × 1093) im 4:3-Ausschnitt oben
   anschneiden, nicht mittig — sonst fehlt das Haar (sein Wunsch vom 25.10.:
   „platziere den Mann bei Einstärken höher"). */
@container ba-rahmen (max-width: 599.98px){
  .ba-uebersicht{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap:.55rem }
  .ba-kachel{ flex-direction:column; align-items:stretch; gap:.5rem; padding:.5rem .55rem .7rem }
  .ba-bild{ width:100%; aspect-ratio:4 / 3 }
  .ba-bild img[width="820"]{ object-position:50% 20% }
  .ba-pfeil{ display:none }
  .ba-text strong{ font-size:.92rem; line-height:1.2 }
  .ba-text small{ font-size:.78rem; line-height:1.3 }
}

/* ── Hereinkommen, versetzt ─────────────────────────────────────────────────
   wirkung.js setzt .auf. Der Verzug kommt aus --ba-i, das die Vorlage je
   Kachel mitgibt — gedeckelt, damit die letzte nicht ewig wartet. */
.ba-kachel{ opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--weich), transform .55s var(--weich),
             background .35s var(--weich), box-shadow .35s var(--weich),
             border-color .35s var(--weich);
  transition-delay:calc(min(var(--ba-i, 1), 8) * 55ms);
}
.ba-kachel.auf{ opacity:1; transform:none }

/* ── Netze ──────────────────────────────────────────────────────────────────
   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; hier ist das dritte Netz. */
@media (scripting: none){
  .ba-kachel{ opacity:1; transform:none; transition:none }
}
@media (prefers-reduced-motion: reduce){
  .ba-kachel{ opacity:1; transform:none; transition:none }
  .ba-kachel:hover .ba-bild img{ transform:none }
  .ba-kachel:hover .ba-pfeil{ transform:none }
}

/* Browser ohne Container-Abfragen (Safari vor 16, Chrome vor 105): wie vor dem 08.11.2026. */
@supports not (container-type: inline-size){
  @media (max-width:620px){
    .ba-uebersicht{ grid-template-columns:1fr }
    .ba-bild{ width:52px }
  }
}