/* ============================================================
   glossar.css – Übersicht und Begriffsseiten des KI-Glossars.

   Nimmt die Tokens der Blog-Übersicht auf (Geist, brdg-Farben, 10px/14px
   Radien, 960er-Raster), damit beide Bereiche wie eine Seite wirken.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');

:root {
  --gl-radius: 10px;
  --gl-radius-sm: 8px;
  --gl-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

body {
  background: var(--brdg-bg);
  color: var(--brdg-text);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* article.css gibt dem Body auf schmalen Fenstern 12px Rand, gedacht fuer
     Artikelseiten. Die Blog-Uebersicht hebt das auf, das Glossar auch, sonst
     steht seine Karte 12px weiter innen als die Artikelkarte im Blog. */
  padding: 0;
}

.gl,
.gt,
.gl h1, .gl h2, .gl h3,
.gt h1, .gt h2, .gt h3,
.site-nav {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.gl { max-width: var(--header-max); margin: 0 auto; padding: 0 0 64px; color: var(--brdg-text); }

/* article.css färbt und umrandet alle Überschriften global. Für die
   Glossarseiten wird das hier zurückgesetzt, Abstände setzen die Regeln
   darunter selbst. */
.gl :where(h1, h2, h3),
.gt :where(h1, h2, h3) {
  color: var(--brdg-text);
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0;
}

/* ---------- Kopfbereich ---------- */
.gl-hero { text-align: left; padding: 24px 24px 40px; }
.gl-hero__kicker {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brdg-muted);
  margin: 0 0 14px;
}
.gl-hero__title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 900px;
  margin: 0 0 20px;
  color: var(--brdg-text);
}
.gl-hero__title--bold { font-weight: 700; }
.gl-hero__title--muted { font-weight: 400; color: var(--brdg-muted); font-size: 90%; }
.gl-hero__sub { font-size: 1.3rem; color: var(--brdg-muted); margin: 0; line-height: 1.5; max-width: 620px; }
.gl-hero__meta {
  margin: 18px 0 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--brdg-muted);
}
.gl-hero__meta span {
  border: 1px solid var(--brdg-line);
  background: var(--brdg-card);
  border-radius: 999px;
  padding: 5px 13px;
}

/* ---------- Suchzeile und Filter-Chips ---------- */
/* Aussehen von Suchfeld, Chips und Ansichtsumschalter steht in ui.css,
   damit Blog und Glossar nicht auseinanderlaufen. */
.gl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.gl-count { margin: 0 0 20px; font-size: .85rem; color: var(--brdg-muted); }
.gl-controls { flex-wrap: wrap; gap: 12px 20px; }
.gl-controls__sort { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gl-controls__sort label,
.gl-controls__gruppe label { font-size: .9rem; color: var(--brdg-muted); }
/* Der Knopf traegt dieselbe Form wie der Ansichtsumschalter, nur kleiner:
   er gehoert zur Sortierung, nicht zur Ansicht. */
#glossarRichtung { width: 34px; height: 34px; }
#glossarRichtung svg { width: 17px; height: 17px; }
#glossarRichtung[data-richtung="ab"] svg { transform: scaleY(-1); }

/* ---------- Navi und Inhalt ----------

   Die Inhaltskarte steht immer genau dort, wo im Blog die Artikelkarte steht:
   960px breit, mittig, 24px Aussenabstand. Die Themenfelder haengen links
   daneben, sobald der Rand dafuer reicht. Reicht er nicht, legen sie sich als
   Leiste ueber die Karte. Die Karte wandert dafuer nie. */
/* Kein seitliches Padding: die Karte soll genau so breit sein wie die
   Artikelkarte im Blog, die ebenfalls direkt im 960er-Raster sitzt. */
.gl-layout { position: relative; }

/* Die Themenfelder stehen links neben der Karte, sobald der Rand dafuer
   reicht. Reicht er nicht, treten sie als Auswahlfeld in die Filterzeile:
   26 ausgeschriebene Namen ueber der Karte kosten zu viel Hoehe. */
.gl-nav { display: none; }

/* Die Ergebnisse liegen in der Karte, tragen also keinen eigenen Rahmen. */
.gl-results { min-width: 0; }

.gl-controls__gruppe { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gl-select {
  /* font-family: inherit, sonst nimmt der Browser bei <select> seine eigene
     Schrift und das Feld laeuft auf Arial statt Geist. */
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  color: var(--brdg-text);
  background-color: transparent;
  border: 1px solid var(--brdg-line);
  border-radius: 999px;
  padding: 7px 34px 7px 14px;
  /* Feste Breite: sonst zieht sich das Feld auf die laengste Option und
     drueckt die Filterzeile auseinander. */
  width: 260px;
  max-width: 100%;
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
  transition: border-color .15s;
}
.gl-select:hover { border-color: var(--brdg-muted); }
/* Steht das Feld nicht auf "Alle", ist es ein gesetzter Filter und darf das
   auch zeigen - wie ein aktiver Chip daneben. */
.gl-select.is-active { border-color: var(--brdg-text); font-weight: 600; }

/* Ab hier ist links vom 960er-Raster Platz fuer eine eigene Spalte:
   960/2 + 200 Navi + 20 Abstand + 16 Puffer = 716 je Seite. */
@media (min-width: 1432px) {
  .gl-controls__gruppe { display: none; }

  .gl-nav {
    display: block;
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    /* Nimmt so viel vom Rand, wie da ist: ab 1432px bleiben 200px, auf
       breiten Schirmen waechst die Liste bis 300px mit. */
    width: clamp(200px, calc((100vw - var(--header-max)) / 2 - 36px), 300px);
    margin: 0 20px 0 0;
  }
  /* Der Rahmen sitzt innen, damit er mitscrollen kann: position: sticky
     wirkt nicht am absolut gesetzten Element selbst. */
  .gl-nav__inner {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 10px;
    background: var(--brdg-card);
    border: 1px solid var(--brdg-line);
    border-radius: var(--gl-radius);
    box-shadow: var(--gl-shadow);
  }
  /* Der Kopf der Spalte spiegelt den Kopf des Inhalts: erst die Wahl, dann
     das Ergebnis. Die Linie trennt beides, wie im Inhalt die Linie unter der
     Filterzeile. */
  .gl-nav__head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 4px 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--brdg-line);
  }
  .gl-nav__head .tag-chip { padding: 6px 12px; font-size: .775rem; }
  /* Steht in einer Zeile mit den Chips, genau wie "Filter:" im Inhalt. Nur
     wenn die Spalte auf ihre 200px schrumpft, weicht die Zeile nach unten. */
  .gl-nav__head { align-items: center; gap: 6px 10px; }
  .gl-nav__label {
    flex: none;
    font-size: .9rem;
    color: var(--brdg-muted);
  }

  .gl-nav h2 {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brdg-muted);
    padding: 10px 12px;
    margin: 0;
  }
  /* Buchstaben stehen wie Themenfelder untereinander: eine Form fuer beide
     Gruppierungen, damit der Wechsel nichts umstellt. Die Spalte scrollt
     dafuer, das regelt .gl-nav__inner. */
  .gl-nav ul { list-style: none; margin: 0; padding: 0; }
  .gl-nav li { min-width: 0; }
  .gl-nav a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    padding: 8px 12px;
    border-radius: var(--gl-radius-sm);
    text-decoration: none;
    font-size: .825rem;
    line-height: 1.35;
    color: var(--brdg-muted);
  }
  .gl-nav a:hover { background: rgba(0, 0, 0, .04); color: var(--brdg-text); }
  .gl-nav a.is-active { background: var(--brdg-text); color: var(--brdg-card); }
  .gl-nav a.is-active em { color: rgba(249, 249, 249, .6); }
  .gl-nav a.is-empty { opacity: .35; pointer-events: none; }
  .gl-nav a > span { min-width: 0; }
  .gl-nav em {
    font-style: normal;
    font-size: .75rem;
    color: var(--brdg-muted);
    /* Ohne nowrap bricht die Zahl zwischen ihren Ziffern um. */
    white-space: nowrap;
    flex: none;
  }
}

/* ---------- Themenfeld und Eintrag ---------- */
.gl-group + .gl-group { margin-top: 44px; }
.gl-group { scroll-margin-top: 24px; }
.gl-group__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--brdg-line);
  /* Der Zaehler bricht nicht zwischen seinen Ziffern, also muss er bei engem
     Raum ganz in die naechste Zeile rutschen duerfen. */
  flex-wrap: wrap;
}
.gl-group__head h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; margin: 0; min-width: 0; }
.gl-group__head span { font-size: .8rem; color: var(--brdg-muted); margin-left: auto; white-space: nowrap; }

/* Einträge sind Zeilen, keine eigenen Karten: sonst Karte in Karte. */
.gl-entry { padding: 22px 0; border-bottom: 1px solid var(--brdg-line); scroll-margin-top: 24px; }
.gl-entry:last-child { border-bottom: 0; padding-bottom: 4px; }
.gl-entry.is-target { background: rgba(15, 103, 207, .05); border-radius: var(--gl-radius-sm); padding-left: 14px; padding-right: 14px; }
.gl-entry__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.gl-entry__term { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
/* Eigene Zeile: sonst schiebt eine lange Synonymliste den Marker um. */
.gl-entry__variants { margin: 0 0 8px; font-size: .8rem; color: var(--brdg-muted); }
.gl-entry__variants:empty { display: none; }
.gl-entry__short { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--brdg-text); }
.gl-entry__foot { margin-top: 10px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: .8rem; }
.gl-entry__more {
  margin-left: auto;
  font-weight: 600;
  color: var(--brdg-text);
  text-decoration: none;
  white-space: nowrap;
}
.gl-entry__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.gl-entry__more--soft { font-weight: 400; color: var(--brdg-muted); }

/* ---------- Kachel-Ansicht ---------- */
/* In der Liste sind Eintraege Zeilen mit Unterlinie, als Kachel bekommen sie
   einen eigenen Rahmen. Die Karte darum bleibt in beiden Faellen dieselbe. */
.gl-results[data-layout="grid"] .gl-group__entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.gl-results[data-layout="grid"] .gl-entry {
  padding: 18px;
  border: 1px solid var(--brdg-line);
  border-radius: var(--gl-radius);
  background: var(--brdg-card);
  /* Jede Kachel traegt dieselben vier Zeilen an derselben Stelle: Titel,
     Markierung, Synonyme, Kurzfassung. Der Verweis sitzt immer unten. */
  display: flex;
  flex-direction: column;
}
.gl-results[data-layout="grid"] .gl-entry:last-child { padding-bottom: 18px; }
/* Titel und Synonyme je eine Zeile, notfalls gekuerzt. Zweizeilige Titel sind
   selten und wuerden die ganze Kachel verschieben; vollstaendig stehen sie in
   der Liste und auf der Begriffsseite. */
.gl-results[data-layout="grid"] .gl-entry { min-width: 0; }
.gl-results[data-layout="grid"] .gl-entry__head { margin-bottom: 4px; min-width: 0; }
.gl-results[data-layout="grid"] .gl-entry__term {
  font-size: 1rem;
  flex-basis: 100%;
  /* min-width: 0, sonst schrumpft das Flex-Element nicht unter die Breite
     seines nicht umbrechenden Textes und ragt aus der Kachel. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-results[data-layout="grid"] .gl-entry__variants {
  min-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-results[data-layout="grid"] .gl-entry__variants:empty { display: block; }
.gl-results[data-layout="grid"] .gl-entry__short { font-size: .9rem; }
.gl-results[data-layout="grid"] .gl-entry__foot { margin-top: auto; padding-top: 14px; font-size: .75rem; }

.gl-empty, .gl-loading { padding: 60px 20px; text-align: center; color: var(--brdg-muted); }
.gl-empty strong { display: block; color: var(--brdg-text); font-size: 1.1rem; margin-bottom: 6px; font-weight: 600; }

mark { background: #ffe9a8; color: inherit; padding: 0 3px; border-radius: 3px; }

/* ---------- Begriffsseite ---------- */
.gt {
  max-width: var(--header-max);
  margin: 0 auto 64px;
  padding: 0 24px;
}
.gt__card {
  background: var(--brdg-card);
  border: 1px solid var(--brdg-line);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 64px);
}
/* Der Marker sitzt absolut, damit er die Zeile der Kategorie nicht
   auseinanderzieht. Das Padding rechts haelt ihm den Platz frei, sonst
   liefe ein langer Themenfeldname darunter. */
.gt__head { position: relative; }
.gt-marker {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 10px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--brdg-muted);
  border: 1px solid var(--brdg-line);
  border-radius: 999px;
}
.gt__category { padding-right: 110px; font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--brdg-muted); margin: 0 0 14px; }
.gt__term-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gt__term {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0;
}
.gt-de { margin: 10px 0 0; font-size: 1.15rem; color: var(--brdg-muted); }
.gt-variants { margin: 8px 0 0; font-size: .875rem; color: var(--brdg-muted); }
.gt-short {
  margin: 20px 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--brdg-text);
}
.gt__body {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--brdg-line);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.gt__body h2 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; margin: 36px 0 12px; }
.gt__body h3 { font-size: 1.15rem; font-weight: 600; margin: 26px 0 10px; }
.gt__body p { margin: 0 0 18px; }
.gt__body a { color: var(--brdg-text); text-decoration: underline; text-underline-offset: 2px; }
.gt__body ul, .gt__body ol { margin: 0 0 18px 22px; }
.gt__body li { margin-bottom: 7px; }
.gt__body figure { margin: 28px 0; }
.gt__body figure img { width: 100%; height: auto; border-radius: var(--gl-radius-sm); display: block; }
.gt__body figcaption { margin-top: 10px; font-size: .875rem; color: var(--brdg-muted); }
.gt-stub { color: var(--brdg-muted); font-size: 1rem; margin: 0; }

.gt-rel, .gt-sources { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--brdg-line); }
.gt-rel h2, .gt-sources h2 {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brdg-muted);
  margin: 0 0 16px;
}
.gt-rel__list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gt-rel__item {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--brdg-line);
  border-radius: var(--gl-radius-sm);
  padding: 14px 16px;
  transition: border-color .15s;
}
.gt-rel__item:hover { border-color: var(--brdg-text); }
.gt-rel__term { display: block; font-weight: 600; font-size: .95rem; }
.gt-rel__def { display: block; margin-top: 4px; font-size: .825rem; color: var(--brdg-muted); line-height: 1.45; }
.gt-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gt-sources a { color: var(--brdg-muted); font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; }
.gt-sources a:hover { color: var(--brdg-text); }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 560px) {
  .gt { padding-left: 16px; padding-right: 16px; }
  .gl-results[data-layout="grid"] .gl-group__entries { grid-template-columns: 1fr; }
}

/* Der Weg zurueck steht dort, wo man hinschaut: in der Zeile der Suche. */
.gl-back { flex: none; }