/* Glossar — nur der Fliesstext der Begriffsseite.
   Die Uebersicht kommt mit Inline-Styles aus; hier braucht es eine Datei,
   weil das lang-Feld der Begriffe fertiges HTML liefert (p, b, em) und
   Inline-Styles dort nicht hinkaemen. */

/* Groesse und Zeilenabstand gehoeren hierher und nicht als Inline-Style
   an den Container: sonst schlaegt die Inline-Angabe jede Medienregel, und
   die mobile Verkleinerung darunter waere toter Code. */
.glossar-text          { font-size: 16px; line-height: 1.75; }
.glossar-text p        { margin: 0 0 14px; }
.glossar-text p:last-child { margin-bottom: 0; }
.glossar-text b        { color: var(--tinte); font-weight: 600; }
.glossar-text em       { font-style: italic; color: var(--matt); }
.glossar-text ul       { margin: 0 0 14px; padding-left: 20px; }
.glossar-text li       { margin-bottom: 6px; }

@media (max-width: 640px) {
  .glossar-text { font-size: 15.5px; }
}

/* ---------------------------------------------------- A-Z-Register
   Die Leiste klebt unter der Topbar. Wie hoch die Topbar ist, haengt an
   der Sprache und am Geraet — 85px am Desktop, 61px am Handy. Statt beide
   Werte hier zu raten, misst js/glossar.js sie und setzt --gl-kopf. Die
   Vorgabe unten ist der Wert fuer den Desktop und gilt, solange kein
   Skript laeuft: dann klebt die Leiste am Handy ein paar Pixel zu tief,
   was niemand sieht, weil darunter ohnehin Inhalt folgt. */
.gl-register {
  position: sticky; top: var(--gl-kopf, 85px); z-index: 40;
  background: color-mix(in srgb, var(--hg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  margin-top: 20px;
}
/* Eine Zeile, notfalls seitlich scrollbar. Zwei- oder dreizeilig gesetzt
   frisst das Register am Handy ein Achtel des Bildschirms — und das
   dauerhaft, weil es klebt. */
.gl-register-innen {
  max-width: 1000px; margin: 0 auto;
  padding: 7px 24px;
  display: flex; flex-wrap: nowrap; gap: 2px;
  /* Bildlauf und Leiste kommen aus .querscroll in styles.css. Bis zum
     30.08. stand hier scrollbar-width:none - das Register sah aus, als
     ende es beim letzten sichtbaren Buchstaben. */
}

.gl-buchstabe {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 30px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  border-radius: 7px; text-decoration: none;
  color: var(--wein);
}
.gl-buchstabe:hover  { background: var(--zart); }
.gl-buchstabe:focus-visible { outline: 2px solid var(--wein); outline-offset: 1px; }
.gl-buchstabe-leer   { color: var(--matt2); opacity: .45; }
.gl-buchstabe-leer:hover { background: none; }

/* ---------------------------------------------------- Liste
   scroll-margin haelt die Ueberschrift beim Sprung unter Topbar UND
   Register — sonst landet der Buchstabe genau hinter der Leiste, die man
   gerade angetippt hat. 45px ist die Hoehe des Registers. */
.gl-abschnitt { scroll-margin-top: calc(var(--gl-kopf, 85px) + 52px); }
.gl-h2 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-weight: 600; font-size: 24px; letter-spacing: -.01em;
  margin: 30px 0 14px; padding-bottom: 7px;
  border-bottom: 1px solid #D8BF92;
}
.gl-hoch {
  font-family: var(--font-ui, 'Montserrat', sans-serif);
  font-size: 12px; font-weight: 500; color: var(--matt2);
  text-decoration: none; white-space: nowrap;
}
.gl-hoch:hover { color: var(--wein); }

.gl-karte {
  display: block; height: 100%; box-sizing: border-box;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 12px; padding: 13px 17px 15px;
  text-decoration: none; color: var(--tinte);
}
.gl-gruppe {
  display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--matt2);
}
.gl-begriff { display: block; font-size: 15.5px; line-height: 1.3; margin-bottom: 5px; }
.gl-kurz    { display: block; font-size: 13.5px; line-height: 1.55; color: var(--matt); }

@media (max-width: 640px) {
  .gl-register-innen { padding: 6px 14px; }
  .gl-buchstabe      { min-width: 30px; height: 28px; font-size: 12.5px; }
  .gl-h2             { font-size: 21px; margin: 24px 0 12px; }
}