/* ===========================================================================
   css/glossar.css  ·  Nachschlagseite /modell/glossar (Punkt 16)
   ---------------------------------------------------------------------------
   Nur was die Glossar Seite zusaetzlich braucht. Kopf, Reiterzeile, Buehne,
   Titel, .def und Fuss kommen unveraendert aus css/schaufenster.css, die
   Formelflaeche ist derselbe Ton wie in css/faq.css. Keine zweite Schrift,
   kein zweites Glas, keine Farbe, die es nicht schon gibt.

   Der wichtigste Teil ist scroll-margin-top: der Kopf steht fest, ein Sprung
   auf einen Anker wuerde die Ueberschrift sonst darunter schieben. Die echte
   Kopfhoehe misst js/schaufenster.js und schreibt sie nach --kopf.
   =========================================================================== */

/* Brotkrume. Eine Zeile ueber dem Titel, dieselbe Aufgabe wie die
   BreadcrumbList im JSON-LD. */
.gl-krume{font-size:13px;line-height:1.6;color:rgba(10,10,10,.5);margin-bottom:18px}
.gl-krume a{text-decoration:underline;text-underline-offset:2px}
.gl-krume a:hover{color:var(--ink)}
.gl-krume span[aria-current]{color:var(--ink)}

/* Register. Alle 20 Begriffe als Sprungmarken, damit niemand scrollen muss,
   um zu sehen, was die Seite kennt. Jeder Chip traegt .glas.sek, die Flaeche
   steht damit genau einmal, in css/glas.css. Hier bleiben nur die Groessen
   der Seite: Schriftgrad, Zeilenhoehe, Polster. Ecke, Rand, Kante, Wurf,
   Hover, Druck und Fokusring kommen vom Glas, ebenso die Schriftfarbe
   (--glas-ink). Auch die alte transition ist weg, sie kannte box-shadow
   nicht und haette den Wurf des Glases beim Hover verschluckt.
   Der Abstand ist von 8 auf 10 px gewachsen: die Glaspille wirft einen
   Schatten von 24 px Weichzeichnung, bei 8 px griff jede Pille in den Wurf
   ihrer Nachbarin und die Zeile wirkte schmutzig.
   Die beiden Linien oben und unten gehoeren der Zeile, nicht dem Chip.
   Sie trennen das Register von Titel und erster Gruppe und bleiben. */
.gl-reg{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;
  padding:20px 0 24px;border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.gl-reg a{font-size:13.5px;line-height:1.2;padding:0 13px;min-height:var(--glas-wahl)}

/* Gruppen. Fuenf Ordner, damit zwanzig Eintraege eine Ordnung haben.
   Die Gruppenmarke ist bewusst kleiner als der Seitentitel. Die Folge der
   fuenf Gruppen ist die Folge der sieben Seiten, vom Modellportfolio bis
   zum Risiko (Befund 4.05), und jede Gruppe nennt ihre Seite in .gl-gs. */
.gl-gruppe{margin-top:52px}
.gl-g{font-family:var(--font-head);font-weight:800;
  font-size:clamp(20px,2vw,25px);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 4px;scroll-margin-top:calc(var(--kopf) + 20px)}

/* Die Seitenzeile unter der Gruppenmarke. Sie sagt, wo die Zahlen der
   Gruppe stehen, und macht damit die Reihenfolge der Gruppen lesbar. Kein
   Schlusspunkt, weil sie ein Etikett ist und kein Satz. */
.gl-gs{font-size:13.5px;line-height:1.6;color:rgba(10,10,10,.5);margin:0 0 4px}
.gl-gs a{color:rgba(10,10,10,.72);text-decoration:underline;text-underline-offset:2px}
.gl-gs a:hover{color:var(--ink)}

/* Ein Eintrag. Begriff, Definition, Rechenweg, Ort der Zahl. */
.gl-e{padding:26px 0;border-top:1px solid var(--linie)}
.gl-e:last-child{border-bottom:1px solid var(--linie)}
.gl-n{font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 10px;
  scroll-margin-top:calc(var(--kopf) + 24px)}
/* Alter Anker (28.09.2026): zwei Eintraege sind einer geworden, die alte Marke
   bleibt als leeres Element im Begriff (kein Rasterteil) und landet wie .gl-n. */
.gl-alt{scroll-margin-top:calc(var(--kopf) + 24px)}
.gl-d{font-size:15px;line-height:1.7;color:rgba(10,10,10,.68);max-width:72ch;margin:0}
.gl-f{font-size:15px;line-height:1.7;color:var(--ink);font-weight:600;max-width:72ch;
  background:rgba(10,10,10,.045);border-radius:10px;padding:11px 14px;margin:12px 0 0}
.gl-w{font-size:14px;line-height:1.7;color:rgba(10,10,10,.56);max-width:72ch;margin:12px 0 0}
.gl-w a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Ein Exponent darf die Zeile nicht auseinanderziehen, sonst haengt das
   nachfolgende Zeichen der Formel schief. */
.gl-f sup,.gl-f sub{line-height:0}

/* Ab 1100 px steht der Begriff neben seiner Erklaerung statt darueber. Das
   Zeilenmass bleibt bei 72 Zeichen, die freie rechte Haelfte verschwindet,
   und die Seite liest sich wie ein Lexikon. Schmaler bleibt es gestapelt. */
@media (min-width:1100px){
  .gl-e{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:44px;
    align-items:start}
  .gl-n{grid-column:1;grid-row:1;margin:0;font-size:19px}
  .gl-d,.gl-f,.gl-w{grid-column:2}
  .gl-d{margin-top:0}
}

/* Der Hinweis am Fuss steht auf allen Seiten gleich, hier mit Abstand nach
   dem letzten Eintrag. */
.buehne>.fuss-hin{margin-top:26px}

/* Befund 4.07: am Telefon traegt die Reiterzeile der sieben Seiten eine
   eigene Zeile fuer den Knopf Einfuehrung, hier fehlt sie. Der Kopf war
   deshalb 98 px hoch statt 126 px und sprang beim Sprung aus einer Frage.
   Statt einen Knopf zu erfinden, den es hier nicht gibt, haelt ein leeres
   Flex Kind dieselbe Zeile frei. Die Hoehe ist nicht geraten, sondern die
   Rechnung des Knopfes aus css/schaufenster.css: Zeilenbox 1,15 em bei
   12 px, dazu 5 px Innenabstand oben und unten und 1 px Kante, darunter
   2 px Aussenabstand. Aendert dort die Knopfgroesse, wandert diese Zeile
   mit, weil dieselben Zahlen dieselbe Formel speisen. */
@media (max-width:700px){
  .reiterzeile::before{content:"";order:-1;flex:1 1 100%;
    font-size:12px;height:calc(1.15em + 10px + 2px);margin:0 0 2px}
}

@media (max-width:700px){
  .gl-gs{font-size:13px}
  .gl-reg{padding:16px 0 20px;gap:8px}
  .gl-reg a{font-size:13px;padding:0 11px}
  .gl-gruppe{margin-top:40px}
  .gl-e{padding:22px 0}
  .gl-d,.gl-f{font-size:14.5px}
  .gl-f{padding:10px 12px}
}

/* Legende unter Formeln im Glossar: normale Staerke, nicht fett aus der Formelbox (28.09.2026) */
.gl-f .formel-legende{font-weight:400}