/* ═══════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════ */

.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);
}
.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 }

/* ── 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 }
}

@media (max-width:620px){
  .ba-uebersicht{ grid-template-columns:1fr }
  .ba-bild{ width:52px }
}