/* 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(--line);padding:.7rem 1.25rem;
  position:sticky;top:0;background:var(--bg);z-index:10;flex-wrap:wrap;
}
/* Wortmarke wie auf den Artefaktseiten: Burgund, sehr fett, weit gesperrt.
   Sie ist dort die Signatur des Auftritts — die Begriffsseiten hatten
   stattdessen schlichte Tinte und standen damit neben dem Rest. */
.topbar .brand{font-weight:800;letter-spacing:.16em;font-size:.875rem;
  color:var(--purpurrot);text-decoration:none;display:flex;align-items:center}
/* Die atmende Hun-Yuan-Li-Marke vor dem Schriftzug, wie auf der Startseite
   (dort .brand-logo/.brand-mark/@keyframes hyli-pulse). Als CSS-Maske statt
   <img>, damit die Farbe dem Theme folgt (Token --marke aus tools/farben.py).
   Der Pfad ist absolut: das Stilblatt liegt unter /glossar/, die Seiten unter
   /glossar/ und /en/glossar/ — relativ liefe die Maske ins Leere. */
.topbar .brand-logo{display:flex;align-items:center;margin-right:.45em;
  animation:hyli-pulse 10s ease-in-out infinite;will-change:transform,opacity}
.topbar .brand-mark{height:2.0em;width:2.0em;display:block;
  background:var(--marke);
  -webkit-mask:url(/hyli.svg) center/contain no-repeat;
  mask:url(/hyli.svg) center/contain no-repeat}
/* Atemrhythmus nach Zhan Zhuang: einatmen kuerzer als ausatmen, kurzer Halt
   am Umkehrpunkt — Werte identisch mit der Startseite. */
@keyframes hyli-pulse{
  0%   {transform:scale(1);   opacity:.82}
  34%  {transform:scale(1.30);opacity:1}
  44%  {transform:scale(1.29);opacity:1}
  100% {transform:scale(1);   opacity:.82}
}
@media (prefers-reduced-motion: reduce){.topbar .brand-logo{animation:none}}
@media (forced-colors: active){.topbar .brand-mark{forced-color-adjust:none;background:CanvasText}}
.topbar .back{color:var(--ink-soft);text-decoration:none;font-size:.86rem;border-bottom:1px solid var(--line)}
.topbar .back:hover{color:var(--purpurrot)}
.lang-sw{margin-left:auto;display:flex;border:1px solid var(--line)}
.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(--purpurrot);color:var(--bg)}

/* ---------- Kopf des Artikels ---------- */
main{padding:2.5rem 0 3rem}
.eyebrow{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);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(--purpurrot);
  margin-bottom:.35rem;
}
h1 .hanzi{color:var(--purpurrot);font-size:.8em;margin-left:.3em}
/* Chinesische Zeichen tragen durchweg die Auszeichnungsfarbe — in der
   Ueberschrift, im Fliesstext und in der Liste der Hubseite. Gesetzt wird das
   Traeger-Element beim Erzeugen (hanzi_auszeichnen), damit es auch dort greift,
   wo die Zeichen mitten im Satz stehen. Das lang-Attribut am selben Element
   ist der eigentliche Gewinn: Ohne es liest ein deutscher Screenreader die
   Zeichen mit deutscher Stimme (SC 3.1.2). */
.zh{color:var(--purpurrot)}
.aussprache{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.9rem;color:var(--muted);margin-bottom:1.8rem;
}
.aussprache .py{font-style:italic}

/* ---------- Textkoerper ---------- */
.definition{
  border-left:2px solid var(--purpurrot);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(--purpurrot);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(--line);padding-left:1rem;margin:1.2rem 0;
  color:var(--muted);font-style:italic;
}
a{color:var(--purpurrot)}
a:hover{color:var(--ink)}
/* Fettschrift traegt die Auszeichnungsfarbe. Sie sitzt im Fliesstext dicht an
   den Verweisen, die dieselbe Farbe haben — unterschieden werden beide durch
   die Unterstreichung des Verweises, nicht durch den Farbton. */
b,strong{color:var(--purpurrot);font-weight:600}
.definition b,.definition strong{font-weight:700}

/* Aussprache-Knopf in der Form des Startseiten-Knopfes (.say): runde
   Schaltflaeche, Lautsprecher-Glyph im Audio-Blau. Der Rahmen laeuft ueber
   --line-strong, weil Bedienelemente 3:1 brauchen (SC 1.4.11) — --line ist
   der dekorative Trenner und reicht dafuer nicht.
   Blau, nicht Burgund: Audio ist auf der ganzen Seite blau ausgezeichnet,
   Burgund ist die Auszeichnungsfarbe des Textes. */
button.playclip{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.3em;height:1.3em;margin-left:.35em;padding:0;
  border:1px solid var(--line-strong);border-radius:50%;
  background:var(--surface);cursor:pointer;line-height:1;
  vertical-align:-.12em;flex:0 0 auto;
}
button.playclip svg{width:.62em;height:.62em;fill:var(--audio-blue);pointer-events:none}
button.playclip:hover,button.playclip:focus-visible{
  background:var(--audio-blue);border-color:var(--audio-blue);
}
button.playclip:hover svg,button.playclip:focus-visible svg{fill:var(--on-audio)}
button.playclip.playing{background:var(--audio-blue);border-color:var(--audio-blue)}
button.playclip.playing svg{fill:var(--on-audio)}

/* ---------- Fuss ---------- */
.weiter{border-top:1px solid var(--line);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(--line);padding:1.4rem 0 2.4rem;margin-top:2rem;
  font-size:.8rem;color:var(--muted);
}

/* 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(--line)}
.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(--purpurrot);margin-left:.35rem}
.hub-kat{display:block;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.hub-def{display:block;font-size:.85rem;line-height:1.45;
  color:var(--muted);margin-top:.2rem}

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