/* =====================================================
   VORLAGE-LEXIKON-INDEXSEITE.CSS — Platzierung der Bausteine auf der Lexikon-Übersicht (/lexikon/, /en/glossary/)
   Seit landingpage v0.142.0 eigene Datei (vorher Teil von vorlage-lexikon-eintrag.css): jede Vorlage steht für sich (vorlage/CLAUDE.md).
   Das Aussehen kommt aus dem Design-System Website (bissantz-website-tokens.css, -components.css), geladen davor. Kopf und Seitenraster
   gleichen dem Lexikon-Eintrag, die Regeln stehen hier bewusst noch einmal.
   ===================================================== */

/* Kopf: Brotkrumen über dem Hero (Komponenten bc-breadcrumb in bc-hero) */
.lx-breadcrumb { position: relative; z-index: 1; max-width: var(--layout-page-width); margin: 0 auto; padding: var(--space-16) var(--layout-page-gutter) 0; line-height: var(--line-height-relaxed); }

/* Seitenraster: Inhalt so breit wie die Navigation, Seitenrand aus dem Design-System (Komponente bc-layout --compact), eine Spalte ohne Seitenspalte */
.lx-layout { max-width: var(--layout-page-width); margin: 0 auto; padding: 40px var(--layout-page-gutter) var(--space-96); }
.lx-layout--uebersicht { grid-template-columns: minmax(0, 1fr); }

/* Abschnittstitel wie im Lexikon-Eintrag: 16 px Abstand, natürliche Zeilenhöhe und Laufweite */
.lx-main .bc-section-title { margin-bottom: var(--space-16); line-height: normal; letter-spacing: normal; }

/* A–Z-Leiste und Gruppen aller Begriffe */
.lx-az { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0 0 var(--space-24); padding-bottom: var(--space-24); border-bottom: var(--border-width-thin) solid var(--color-border); }
.lx-az__buchstabe { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-8); border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-foreground); font-weight: var(--font-weight-bold); text-decoration: none; transition: background var(--duration-fast), border-color var(--duration-fast); }
.lx-az__buchstabe:hover, .lx-az__buchstabe:focus-visible { background: var(--color-surface-sunken); border-color: var(--color-foreground); }
.lx-gruppen { display: grid; gap: var(--space-24); }
.lx-gruppe { scroll-margin-top: var(--space-96); }
.lx-gruppe__buchstabe { display: flex; align-items: baseline; gap: var(--space-12); margin: 0 0 var(--space-8); font-family: var(--font-family-title); font-weight: var(--font-weight-black);
  font-size: var(--font-size-2xl); line-height: 1; color: var(--color-foreground); }
.lx-gruppe__anzahl { font-family: var(--font-family-body); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); color: var(--color-foreground-muted); }
.lx-gruppe__liste { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: var(--space-32); }
.lx-gruppe__liste li { break-inside: avoid; padding: var(--space-4) 0; }