/* Stilblatt der Glossarseiten — ERZEUGT von build_glossarseiten.py.
   Nicht von Hand bearbeiten.

   Ausgelagert statt inline: die Artefaktseiten tragen ihr CSS im Dokument und
   wiegen darum 50–70 KB je Seite. Bei zwei Sprachfassungen je Begriff waere das
   dieselbe Kilobyte-Zahl mal zwei mal Anzahl der Begriffe — hier holt der
   Browser sie einmal und hat sie fuer alle. Der Theme-Bootstrap bleibt inline
   im Dokument: laege er hier, flackerte die Seite beim Laden hell auf.

   Farbtoken aus tools/farben.py, dieselbe Quelle wie alle uebrigen Seiten. */

  /* GEN:farben START */
  /* ---------------------------------------------------------------------
     Farbtoken — ERZEUGT aus tools/farben.py, nicht von Hand aendern.
     Neu erzeugen:  python3 build_www.py farben
     Nachrechnen:   python3 tools/check_kontraste.py

     Die Graustufen sind kein Geschmack, sondern Minima nach WCAG 2.2 AA.
     Geprueft wird gegen ALLE Flaechen, auf denen ein Token vorkommt:
     --bg, --bg-alt (Sidebar, Callouts) und --surface (Suchfeld, Karten).
     Die jeweils hellste bzw. dunkelste ist der strenge Fall, nicht die
     haeufigste. Zahlen: docs/Barrierefreiheit-Kontraste.md

     --line ist ein DEKORATIVER Trenner und darf schwach bleiben. Rahmen von
     BEDIENELEMENTEN laufen ueber --line-strong und brauchen 3:1 (SC 1.4.11).
     Die beiden Token nicht vertauschen. */

  :root{
    --ink:#0a0a0a; --ink-soft:#3a3a3a; --muted:#5c5c5c; --faint:#717171;
    --line:#e4e4e4; --line-strong:#111111; --bg:#ffffff; --bg-alt:#f6f6f6;
    --surface:#ffffff; --purpurrot:#75151E; --focus:#75151E; --audio-blue:#003366;
    --on-audio:#ffffff; --marke:#59191F; --accent-fill:#75151E; --on-accent:#ffffff;
    --on-accent-soft:#e0c8cb; --error:#b5283b; --cat-method:#003366; --cat-principle:#9c7229;
    --cat-person:#5f6672; --cat-inst:#467d4d; --graph-node:#000000; --graph-label:#000000;
    --graph-dim:#cfcfcf; --graph-label-dim:#c0c0c0; --graph-edge:#d6d6d6; --graph-edge-dash:#c4c4c4;
    --graph-edge-dim:#eeeeee; --graph-edge-hot:#000000;
    /* Abgeleitet, damit sie nicht driften koennen: --cat-core ist die
       Kernfarbe des Graphen, --accent-rgb dieselbe Farbe als rgba()-Tripel
       fuer die Schleier und Glows der Artefakt-Seiten. */
    --cat-core:var(--purpurrot);
    --accent-rgb:117,21,30;
  }
  html[data-theme="dark"]{
    --ink:#e8e6e2; --ink-soft:#c4c0b9; --muted:#b1aba1; --faint:#948d81;
    --line:#2b2e33; --line-strong:#797f88; --bg:#15171b; --bg-alt:#1c1f24;
    --surface:#23272e; --purpurrot:#d57f88; --focus:#d57f88; --audio-blue:#6699cc;
    --on-audio:#15171b; --marke:#d57f88; --accent-fill:#e8e6e2; --on-accent:#15171b;
    --on-accent-soft:#5a5751; --error:#e3727f; --cat-method:#6699cc; --cat-principle:#c9a24f;
    --cat-person:#99a1ae; --cat-inst:#7fb887; --graph-node:#e6e4e0; --graph-label:#e6e4e0;
    --graph-dim:#4a4f56; --graph-label-dim:#565b62; --graph-edge:#3a3f46; --graph-edge-dash:#33373d;
    --graph-edge-dim:#2a2e34; --graph-edge-hot:#efede9;
    --accent-rgb:213,127,136;
    color-scheme:dark;
  }

  /* ---- Hochkontrast -------------------------------------------------
     Zwei Ausloeser, EIN Wertesatz: die Systemeinstellung
     (prefers-contrast: more) und der Schalter im A11y-Panel
     (html[data-contrast="high"]). Die Hex-Werte stehen nur in den
     --hc-*-Token; die beiden Regeln darunter weisen sie bloss zu.

     Wer die Systemeinstellung gesetzt hat, sie auf DIESER Seite aber nicht
     will, waehlt im Panel "Normal" — daher das :not([data-contrast="normal"]).

     Angefasst werden Text, Akzente, Flaechen UND die Graph-Palette. Text
     liegt danach ueber 7:1 (AAA), gemessen gegen die strengste Flaeche. */

  :root{
    --hc-ink:#ffff00; --hc-ink-soft:#ffe866; --hc-muted:#ffd21a; --hc-faint:#e0b400;
    --hc-line:#666666; --hc-line-strong:#ffffff; --hc-bg:#000000; --hc-bg-alt:#000000;
    --hc-surface:#000000; --hc-purpurrot:#ffffff; --hc-focus:#ffffff; --hc-audio-blue:#66d9ef;
    --hc-on-audio:#000000; --hc-marke:#ffffff; --hc-accent-fill:#ffffff; --hc-on-accent:#000000;
    --hc-on-accent-soft:#444444; --hc-error:#ff6e6e; --hc-cat-method:#66d9ef; --hc-cat-principle:#ffab40;
    --hc-cat-person:#ff9ec4; --hc-cat-inst:#a8e6a3; --hc-graph-node:#ffffff; --hc-graph-label:#ffff00;
    --hc-graph-dim:#a0a0a0; --hc-graph-label-dim:#a0a0a0; --hc-graph-edge:#a0a0a0; --hc-graph-edge-dash:#8a8a8a;
    --hc-graph-edge-dim:#5a5a5a; --hc-graph-edge-hot:#ffffff;
  }
  html[data-theme="dark"]{
    --hc-ink:#ffff00; --hc-ink-soft:#ffe866; --hc-muted:#ffd21a; --hc-faint:#e0b400;
    --hc-line:#666666; --hc-line-strong:#ffffff; --hc-bg:#000000; --hc-bg-alt:#000000;
    --hc-surface:#000000; --hc-purpurrot:#ffffff; --hc-focus:#ffffff; --hc-audio-blue:#66d9ef;
    --hc-on-audio:#000000; --hc-marke:#ffffff; --hc-accent-fill:#ffffff; --hc-on-accent:#000000;
    --hc-on-accent-soft:#444444; --hc-error:#ff6e6e; --hc-cat-method:#66d9ef; --hc-cat-principle:#ffab40;
    --hc-cat-person:#ff9ec4; --hc-cat-inst:#a8e6a3; --hc-graph-node:#ffffff; --hc-graph-label:#ffff00;
    --hc-graph-dim:#a0a0a0; --hc-graph-label-dim:#a0a0a0; --hc-graph-edge:#a0a0a0; --hc-graph-edge-dash:#8a8a8a;
    --hc-graph-edge-dim:#5a5a5a; --hc-graph-edge-hot:#ffffff;
  }
  @media (prefers-contrast: more){
    html:not([data-contrast="normal"]){
      --ink:var(--hc-ink); --ink-soft:var(--hc-ink-soft); --muted:var(--hc-muted);
      --faint:var(--hc-faint); --line:var(--hc-line); --line-strong:var(--hc-line-strong);
      --bg:var(--hc-bg); --bg-alt:var(--hc-bg-alt); --surface:var(--hc-surface);
      --purpurrot:var(--hc-purpurrot); --focus:var(--hc-focus); --audio-blue:var(--hc-audio-blue);
      --on-audio:var(--hc-on-audio); --marke:var(--hc-marke); --accent-fill:var(--hc-accent-fill);
      --on-accent:var(--hc-on-accent); --on-accent-soft:var(--hc-on-accent-soft); --error:var(--hc-error);
      --cat-method:var(--hc-cat-method); --cat-principle:var(--hc-cat-principle); --cat-person:var(--hc-cat-person);
      --cat-inst:var(--hc-cat-inst); --graph-node:var(--hc-graph-node); --graph-label:var(--hc-graph-label);
      --graph-dim:var(--hc-graph-dim); --graph-label-dim:var(--hc-graph-label-dim); --graph-edge:var(--hc-graph-edge);
      --graph-edge-dash:var(--hc-graph-edge-dash); --graph-edge-dim:var(--hc-graph-edge-dim); --graph-edge-hot:var(--hc-graph-edge-hot);
      --accent-rgb:255,255,255;
    }
    html[data-theme="dark"]:not([data-contrast="normal"]){
      --accent-rgb:255,255,255;
    }
  }
  html[data-contrast="high"]{
    --ink:var(--hc-ink); --ink-soft:var(--hc-ink-soft); --muted:var(--hc-muted);
    --faint:var(--hc-faint); --line:var(--hc-line); --line-strong:var(--hc-line-strong);
    --bg:var(--hc-bg); --bg-alt:var(--hc-bg-alt); --surface:var(--hc-surface);
    --purpurrot:var(--hc-purpurrot); --focus:var(--hc-focus); --audio-blue:var(--hc-audio-blue);
    --on-audio:var(--hc-on-audio); --marke:var(--hc-marke); --accent-fill:var(--hc-accent-fill);
    --on-accent:var(--hc-on-accent); --on-accent-soft:var(--hc-on-accent-soft); --error:var(--hc-error);
    --cat-method:var(--hc-cat-method); --cat-principle:var(--hc-cat-principle); --cat-person:var(--hc-cat-person);
    --cat-inst:var(--hc-cat-inst); --graph-node:var(--hc-graph-node); --graph-label:var(--hc-graph-label);
    --graph-dim:var(--hc-graph-dim); --graph-label-dim:var(--hc-graph-label-dim); --graph-edge:var(--hc-graph-edge);
    --graph-edge-dash:var(--hc-graph-edge-dash); --graph-edge-dim:var(--hc-graph-edge-dim); --graph-edge-hot:var(--hc-graph-edge-hot);
    --accent-rgb:255,255,255;
  }
  html[data-theme="dark"][data-contrast="high"]{
    --accent-rgb:255,255,255;
  }
  /* GEN:farben END */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink-soft);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.25rem}

/* ---------- Kopfleiste ---------- */
.topbar{
  display:flex;align-items:center;gap:1rem;
  border-bottom:1px solid var(--linie);padding:.7rem 1.25rem;
  position:sticky;top:0;background:var(--bg);z-index:10;flex-wrap:wrap;
}
.topbar .brand{font-weight:700;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.topbar .back{color:var(--ink-soft);text-decoration:none;font-size:.86rem;border-bottom:1px solid var(--linie)}
.topbar .back:hover{color:var(--accent)}
.lang-sw{margin-left:auto;display:flex;border:1px solid var(--linie)}
.lang-sw button{
  background:none;border:0;padding:.25rem .55rem;font:inherit;font-size:.78rem;
  color:var(--ink-soft);cursor:pointer;
}
.lang-sw button.on{background:var(--accent);color:var(--bg)}

/* ---------- Kopf des Artikels ---------- */
main{padding:2.5rem 0 3rem}
.eyebrow{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-schwach);margin-bottom:.5rem;
}
h1{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.18;color:var(--ink);
  margin-bottom:.35rem;
}
h1 .hanzi{color:var(--accent);font-size:.8em;margin-left:.3em}
.aussprache{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.9rem;color:var(--ink-schwach);margin-bottom:1.8rem;
}
.aussprache .py{font-style:italic}

/* ---------- Textkoerper ---------- */
.definition{
  border-left:2px solid var(--accent);padding:.1rem 0 .1rem 1rem;
  margin-bottom:2rem;color:var(--ink);
}
.vertiefung h2{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:1.28rem;color:var(--ink);margin:2rem 0 .6rem;
}
.vertiefung p{margin-bottom:1rem}
.vertiefung ul{margin:0 0 1rem 1.1rem}
.vertiefung li{margin-bottom:.35rem}
.vertiefung blockquote{
  border-left:2px solid var(--linie);padding-left:1rem;margin:1.2rem 0;
  color:var(--ink-schwach);font-style:italic;
}
a{color:var(--accent)}
a:hover{color:var(--ink)}
b{color:var(--ink)}

/* Aussprache-Knopf, wie im Glossar der Startseite. */
button.playclip{
  background:none;border:1px solid var(--linie);color:var(--accent);
  cursor:pointer;padding:.1rem .3rem;line-height:0;vertical-align:middle;margin-left:.2em;
}
button.playclip svg{width:.72em;height:.72em;fill:currentColor}
button.playclip:hover{border-color:var(--accent)}

/* ---------- Fuss ---------- */
.weiter{border-top:1px solid var(--linie);margin-top:2.5rem;padding-top:1.2rem;font-size:.9rem}
.weiter a{margin-right:1rem;display:inline-block}
footer{
  border-top:1px solid var(--linie);padding:1.4rem 0 2.4rem;margin-top:2rem;
  font-size:.8rem;color:var(--ink-schwach);
}

/* Hubseite /glossar/ — Liste der ausgebauten Begriffe. */
.intro{margin:0 0 2rem;max-width:44rem}
.intro p{margin:.6rem 0;line-height:1.6}
.hub{list-style:none;display:grid;gap:0;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.hub li{border-top:1px solid var(--linie)}
.hub a{display:block;padding:.9rem 1rem .9rem 0;text-decoration:none;color:inherit}
.hub a:hover .hub-name,.hub a:focus-visible .hub-name{text-decoration:underline}
.hub-name{font-weight:600;color:var(--ink)}
.hub-name .hanzi{font-weight:400;color:var(--ink-schwach);margin-left:.35rem}
.hub-kat{display:block;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-schwach);margin-bottom:.15rem}
.hub-def{display:block;font-size:.85rem;line-height:1.45;
  color:var(--ink-schwach);margin-top:.2rem}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}