/* ============================================================
   Eric Naville – Stilblatt
   Formsprache: oben Licht, unten Erdreich.
   Farben laufen über Variablen, damit alle drei Erscheinungsbilder
   dieselbe Zeichnung tragen.

   Drei Erscheinungsbilder, eines davon der Grundzustand:

     (ohne Attribut)        Terminal - dunkles Aubergine, Schrift in
     data-theme="terminal"  reinem Weiss. Das Hauptbild der Seite.
     data-theme="hell"      Papier und Tinte.
     data-theme="dunkel"    Nacht, warmes Braun.

   Der Schalter oben rechts geht der Reihe nach durch die drei. Die
   Systemvorgabe (prefers-color-scheme) entscheidet nichts mehr: das
   Terminal-Bild gilt, bis der Leser etwas anderes wählt. Das ist auch
   der Grund, warum die dunkle Palette nicht mehr doppelt im Blatt
   steht - sie braucht keinen Medienblock mehr.
   ============================================================ */

:root,
:root[data-theme="terminal"]{
  color-scheme:dark;
  /* Ubuntu-Terminal, ins Rötliche gezogen: der Grund stand auf Farbton
     319° und las sich violett; die ganze Aubergine-Familie - Grund,
     Fläche, Linie, Himmel, Kreisfüllungen und die beiden gedämpften Töne
     - ist darum um 21° auf rund 338° gedreht, bei gleicher Helligkeit
     und Sättigung. Das ist Wein statt Magenta. `--erde` lag mit 341°
     schon dort und blieb unangetastet.

     Die Akzente: Ubuntus Orange als Seitenakzent (--akzent-krone) - eine
     Spur aufgehellt (#e95420 -> #f26a35), damit auch die kleinen
     Schriftgrade die Kontrastschwelle nehmen - und das Violett für die
     Wurzeln. Die Krone-Kreise selbst tragen das Terminal-Grün als Laub,
     der Boden Rotbraun (s. --akzent-laub / --akzent-boden).

     `--referenz` trägt Urheberzeile, Quellenliste und Methodik. Es stand
     auf einem blassen Rosa und ist jetzt reines Weiss. */
  --papier:#300a17;
  --flaeche:#3d1422;
  --tinte:#ffffff;
  --gedaempft:#c3a6b1;
  --linie:#5e273d;
  --horizont:#a8808e;
  --himmel:#30102b;
  --erde:#3a1420;
  --holz:#b98a72;
  --wurzelholz:#9c7060;
  --akzent-krone:#f26a35;
  --akzent-krone-hell:#ff8f5e;
  --zitat:#f0b27a;
  --referenz:#ffffff;
  --akzent-wurzel:#c191bd;
  --akzent-wurzel-hell:#d6aed2;
  --akzent-laub:#9ddc6e;
  --kreis-krone-f:#2a151f;
  --kreis-wurzel-f:#361424;
  --akzent-boden:#c17a55;
  --kreis-boden-f:#3a1019;
  /* Eine klare Grotesk im Zuschnitt des Ubuntu-Terminals. Nichts wird
     nachgeladen: liegt Ubuntu auf dem Rechner, kommt Ubuntu; sonst die
     nächstbeste Systemschrift. */
  --schrift:Ubuntu,"Ubuntu Sans","Noto Sans","DejaVu Sans",Cantarell,
            system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Papier und Tinte - nur über den Schalter erreichbar. */
:root[data-theme="hell"]{
  color-scheme:light;
  --papier:#f6f1e6;
  --flaeche:#fcf9f1;
  --tinte:#2b241c;
  --gedaempft:#685c4b;
  --linie:#b5a07d;
  --horizont:#7a6a52;
  --himmel:#e9f0f3;
  --erde:#ecdfc6;
  --holz:#5d4a35;
  --wurzelholz:#4a3c2f;
  --akzent-krone:#856418;
  --akzent-krone-hell:#c49d3f;
  --zitat:#886318;
  --referenz:#514738;
  --akzent-wurzel:#5f5190;
  --akzent-wurzel-hell:#7e6fb4;
  /* Die zwölf Kreise: die Krone trägt Laubgrün, der Boden Rotbraun; das
     Gold von --akzent-krone bleibt der Akzent der Bedienelemente. */
  --akzent-laub:#4e6a42;
  /* Im hellen Bild die Gattungskreise durchsichtig – Himmel und Erde
     scheinen durch; Idealismus/Realismus auf dem Horizont zeigen so oben
     Himmel, unten Erde. Die beiden dunklen Bilder und der Druck behalten
     ihre eigenen Füllungen. */
  --kreis-krone-f:transparent;
  --kreis-wurzel-f:transparent;
  --akzent-boden:#945438;
  --kreis-boden-f:transparent;
}

/* Nacht, warmes Braun - das frühere dunkle Bild. */
:root[data-theme="dunkel"]{
  color-scheme:dark;
  --papier:#141110;
  --flaeche:#1c1815;
  --tinte:#eae2d2;
  --gedaempft:#a49781;
  --linie:#544a38;
  --horizont:#94836a;
  --himmel:#18242e;
  --erde:#281f12;
  --holz:#93785a;
  --wurzelholz:#77634e;
  --akzent-krone:#d4aa4e;
  --akzent-krone-hell:#e7bf63;
  --zitat:#e2bb62;
  --referenz:#c6b9a1;
  --akzent-wurzel:#8d7cc4;
  --akzent-wurzel-hell:#a695d8;
  --akzent-laub:#8aa878;
  --kreis-krone-f:#1a1e16;
  --kreis-wurzel-f:#251e14;
  --akzent-boden:#c4876b;
  --kreis-boden-f:#261b15;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* Reduzierte Bewegung: keine Rollfahrten, Übergänge praktisch sofort
   (js/baum.js ehrt dieselbe Einstellung bei der Zoomfahrt). */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--schrift);
  font-size:1.0625rem;
  line-height:1.65;
}

a{ color:inherit; }
a:focus-visible{ outline:2px solid var(--akzent-krone); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--akzent-krone); color:var(--papier); }

/* ---------- Kopf und Fuß ---------- */

.kopf{ position:relative; text-align:center; padding:2.8rem 1rem .4rem; }

/* Schalter fürs Erscheinungsbild, oben rechts. Das Sinnbild zeigt den
   gegenwärtigen Zustand: die Eingabezeile beim Terminal, die Sonne bei
   Hell, den Mond bei der Nacht. Ein Druck geht zum nächsten der drei. */
.thema-schalter{
  position:absolute;
  top:1rem; right:1rem;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem;
  padding:0;
  color:var(--gedaempft);
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:999px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.thema-schalter:hover{ color:var(--tinte); border-color:var(--akzent-krone); }
.thema-schalter:focus-visible{ outline:2px solid var(--akzent-krone); outline-offset:2px; }
/* Alle drei Sinnbilder liegen im Knopf; sichtbar ist genau das des
   gegenwärtigen Bildes. Ohne Attribut gilt das Terminal. */
.thema-schalter svg{ display:none; width:1.25rem; height:1.25rem; }
:root:not([data-theme]) .thema-schalter .terminal,
:root[data-theme="terminal"] .thema-schalter .terminal,
:root[data-theme="hell"] .thema-schalter .sonne,
:root[data-theme="dunkel"] .thema-schalter .mond{ display:block; }
.wortmarke{
  margin:0;
  font-size:1.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
}
.wortmarke a{ text-decoration:none; }
.untertitel{
  margin:.45rem 0 0;
  color:var(--gedaempft);
  font-style:italic;
  font-size:1.02rem;
}

.fuss{
  text-align:center;
  color:var(--gedaempft);
  font-size:.85rem;
  border-top:1px solid var(--linie);
  margin-top:2.5rem;
  padding:1.8rem 1rem 2.4rem;
}
.fuss p{ max-width:640px; margin:0 auto; }

/* ---------- Hauptfläche ---------- */

main{ max-width:1060px; margin:0 auto; padding:0 1.25rem 2rem; }

.einfuehrung{
  max-width:640px;
  margin:2.1rem auto 1rem;
  text-align:center;
  font-size:1.1rem;
}

/* ---------- Der Baum ---------- */

.baum-bereich{ margin:1.2rem 0 2.4rem; position:relative; }
.baum-rollbereich{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.baum-rollbereich svg{
  display:block;
  min-width:660px;
  width:100%;
  max-width:1000px;
  height:auto;
  margin:0 auto;
}
.hinweis{
  text-align:center;
  color:var(--gedaempft);
  font-size:.92rem;
  max-width:560px;
  margin:.9rem auto 0;
}

/* Innenleben der SVG-Zeichnung */
.kugel{ fill:none; stroke:var(--linie); stroke-width:1.6; }
.horizontlinie{ stroke:var(--horizont); stroke-width:1.2; opacity:.75; }
.halb-himmel{ fill:var(--himmel); opacity:.55; }
.halb-erde{ fill:var(--erde); opacity:.55; }
.holz{ fill:var(--holz); }
.holz.wurzelholz{ fill:var(--wurzelholz); }

/* ---------- Die zwölf Kreise ---------- */

.kreis{ transition:opacity .3s ease; }
svg.gezoomt .kreis:not(.aktiv){ opacity:.3; }
svg.ohne-uebergang, svg.ohne-uebergang *{ transition:none !important; }

.kreisflaeche{ stroke-width:2; transition:stroke-width .2s ease; }
.kreis-krone .kreisflaeche{ fill:var(--kreis-krone-f); stroke:var(--akzent-laub); }
.kreis-wurzel .kreisflaeche{ fill:var(--kreis-wurzel-f); stroke:var(--akzent-wurzel); }
.kreis-boden .kreisflaeche{ fill:var(--kreis-boden-f); stroke:var(--akzent-boden); }

a.kreis-link{ cursor:pointer; outline:none; }
a.kreis-link:hover .kreisflaeche,
a.kreis-link:focus-visible .kreisflaeche{ stroke-width:3.5; }
/* Tastatur-Fokus liegt auf dem Etikett-Link; der Ring erscheint an der
   Kreisfläche des zugehörigen Kreises. */
.kreis:has(a.kreis-link:focus-visible) .kreisflaeche{ stroke-width:3.5; }
.kreis.aktiv a.kreis-link{ pointer-events:none; }

/* visibility nimmt die ausgeblendeten Etikett-Links auch aus der
   Tab-Reihenfolge und dem Zugriff von Vorleseprogrammen. */
.kreis-etikett{ transition:opacity .3s ease, visibility 0s; }
.kreis.aktiv .kreis-etikett{
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
/* Lokaler Schleier hinter jeder einzelnen Schriftzeile: dämmt genau dort den
   Untergrund ab, nicht den ganzen Kreis – die Äste bleiben sichtbar. */
.etikett-schleier{ fill:url(#schleier); }
.schleier-innen{ stop-color:var(--flaeche); stop-opacity:.82; }
.schleier-aussen{ stop-color:var(--flaeche); stop-opacity:0; }

/* Die Schriftgrössen 15px/15px/12.5px spiegeln ETIKETT_PX/ZEICHEN_PX in
   tools/generieren.py (Schleier-Masse der Etiketten) – nur zusammen ändern. */
.kreis-nummer{
  font-size:15px; font-weight:600; letter-spacing:.06em;
  paint-order:stroke; stroke:var(--papier); stroke-width:1.4px; stroke-linejoin:round;
}
.kreis-krone .kreis-nummer{ fill:var(--akzent-laub); }
.kreis-wurzel .kreis-nummer{ fill:var(--akzent-wurzel); }
.kreis-boden .kreis-nummer{ fill:var(--akzent-boden); }
.kreis-name{
  font-size:15px; font-weight:600; fill:var(--tinte);
  paint-order:stroke; stroke:var(--papier); stroke-width:1.3px; stroke-linejoin:round;
}
.kreis-zeichen{
  font-size:12.5px; fill:var(--gedaempft); letter-spacing:.04em;
  paint-order:stroke; stroke:var(--papier); stroke-width:1.1px; stroke-linejoin:round;
}
/* Versuch (2026-08-03): im hellen Bild die Etiketten der zwölf Gattungen ganz
   in Schwarz — Ziffer, Name und Tierkreiszeile. Statt Akzent, Tinte und
   gedämpft. Welchem Reich ein Kreis angehört, sagt weiterhin sein Ring.
   Eine Regel genügt, seit "hell" nur noch über den Schalter kommt. */
:root[data-theme="hell"] .kreis-etikett text{ fill:#000; }

a.kreis-link:focus-visible .kreis-name{ text-decoration:underline; }

/* Innenwelt eines Gattungs-Kreises: Fortsatz des Hauptasts, zwölf
   Zweige, zwölf Art-Kugeln. In der Übersicht blass und für Klicks
   durchlässig; beim Hereinzoomen voll da. */
.innenwelt{ opacity:.5; pointer-events:none; transition:opacity .35s ease; }
.kreis.aktiv .innenwelt{ opacity:1; pointer-events:auto; }
.innenholz{ fill:var(--holz); }
.kreis-wurzel .innenholz{ fill:var(--wurzelholz); }
.kreis-boden .innenholz{ fill:var(--horizont); }

.art{ transition:opacity .3s ease; }
svg.gezoomt-art .kreis.aktiv .art:not(.aktiv){ opacity:.35; }
.art-kugel{ stroke-width:1.3; }
.kreis-krone .art-kugel{ fill:var(--kreis-krone-f); stroke:var(--akzent-laub); }
.kreis-wurzel .art-kugel{ fill:var(--kreis-wurzel-f); stroke:var(--akzent-wurzel); }
.kreis-boden .art-kugel{ fill:var(--kreis-boden-f); stroke:var(--akzent-boden); }

a.art-link{ visibility:hidden; cursor:pointer; outline:none; }
.kreis.aktiv a.art-link{ visibility:visible; }
.art.aktiv a.art-link{ pointer-events:none; }
.art-treffer{ fill:transparent; stroke:transparent; stroke-width:1.6; }
a.art-link:hover .art-treffer,
a.art-link:focus-visible .art-treffer{ stroke:var(--tinte); opacity:.4; }
/* Art-Kugel: die Ziffer (I–XII) trägt in jeder Art dieselbe Grösse – ob sie
   allein und mittig steht oder ob unter ihr ein Begriff sitzt. */
.art-ziffer{ fill:var(--tinte); font-weight:600; font-size:5.4px;
  transition:opacity .3s ease; }
.art.aktiv .art-ziffer{ opacity:0; }
.art-wort{ fill:var(--tinte); transition:opacity .3s ease; }
.art.aktiv .art-wort{ opacity:0; }

/* Mitte des Gattungs-Kreises (Zoomstufe 1) */
.kreis-mitte{
  visibility:hidden; opacity:0;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.kreis.aktiv .kreis-mitte{
  visibility:visible; opacity:1;
  transition:opacity .4s ease .25s, visibility 0s;
}
.mitte-name{
  font-size:6.5px; font-weight:600; fill:var(--tinte);
  paint-order:stroke; stroke:var(--papier); stroke-width:.9px; stroke-linejoin:round;
}
.mitte-substanz{
  font-size:3.4px; fill:var(--gedaempft);
  paint-order:stroke; stroke:var(--papier); stroke-width:.8px; stroke-linejoin:round;
}
a.mitte-seite text{
  font-size:3.2px; fill:var(--gedaempft);
  paint-order:stroke; stroke:var(--papier); stroke-width:.8px; stroke-linejoin:round;
}
a.mitte-seite:hover text, a.mitte-seite:focus-visible text{
  fill:var(--tinte); text-decoration:underline;
}

/* Knopf zum Herauszoomen */
.zoom-zurueck{
  position:absolute;
  top:.4rem; left:.6rem;
  z-index:2;
  font:inherit;
  font-size:.92rem;
  color:var(--tinte);
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:999px;
  padding:.4rem .95rem;
  cursor:pointer;
}
.zoom-zurueck:hover{ border-color:var(--akzent-krone); }

/* ---------- Der Baum auf schmalen Schirmen ----------
   Bis 700px passt der Baum als Ganzes in die Breite, statt zur Hälfte
   ausserhalb eines Rollbereichs zu liegen, von dem nichts erzählt. Bei
   dieser Grösse schrumpfen die Etiketten (15px im viewBox-Mass) auf rund
   6px und sind ohnehin nicht mehr zu lesen: in der Übersicht steht darum
   allein die Ziffer, gross und in der Kreismitte. Den Namen bringt das
   Hereintippen über .kreis-mitte, und darunter stehen die zwölf als Liste.

   .kreis-name und .kreis-zeichen bleiben mit opacity:0 stehen und nicht
   mit display:none, damit die Kreis-Verweise ihren Namen für
   Vorleseprogramme behalten. Die Schleier-Ellipsen sind für die kleinen
   Etiketten bemessen und gehen mit ihnen.

   Die Grössen hier stehen nur in diesem Medienblock; die Kopplung von
   .kreis-nummer an ETIKETT_PX/ZEICHEN_PX in tools/generieren.py gilt
   unverändert für die Darstellung ab 700px. .art-wort trägt eine je
   Kugel berechnete Grösse als style-Attribut und bleibt unberührt. */
@media (max-width:700px){
  .baum-rollbereich{ overflow-x:visible; }
  .baum-rollbereich svg{ min-width:0; }

  .kreis-etikett .etikett-schleier,
  .kreis-name, .kreis-zeichen{ opacity:0; }
  .kreis-nummer{ font-size:30px; transform:translateY(28px); }

  /* Hereingezoomt vergrössert die Zoomfahrt nur rund anderthalbfach –
     6.5px blieben dann immer noch klein. */
  .mitte-name{ font-size:9px; }
  .mitte-substanz{ font-size:4.6px; }
  a.mitte-seite text{ font-size:4.4px; }
  .art-ziffer{ font-size:7.4px; }
  .art-badge{ font-size:3.6px; }
}

/* ---------- Hierarchie-Erklärung: die vier Ebenen ---------- */

.hierarchie{ margin:2.2rem 0 1rem; }
.hierarchie > h2{
  text-align:center; font-size:1.15rem; font-weight:600;
  letter-spacing:.01em; margin:0 0 .7rem;
}
.hierarchie-text{
  max-width:680px; margin:0 auto 1.6rem;
  text-align:center; color:var(--gedaempft); font-size:1rem;
}
.hierarchie-text strong{ color:var(--tinte); }

/* Vier Stufen nebeneinander, dazwischen die Trichter. Zwei Zeilen: oben die
   Bilder, unten die Titel. Jede .eb-stufe reicht ihre beiden Zeilen über
   subgrid an das Aussenraster durch – so stehen die Bilder auf einer Höhe,
   und der Trichter, der nur in Zeile 1 sitzt, wird genau so hoch wie sie.
   Unter 700px fällt dasselbe Gerüst in eine Spalte (siehe unten). */
.ebenen{ max-width:900px; margin:0 auto; padding:.2rem; }
.ebenen-buehne{
  display:grid;
  grid-template-columns:minmax(0,1fr) 4rem minmax(0,1fr) 4rem minmax(0,1fr) 4rem minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:.4rem;
}
/* Spalten ausdrücklich zuweisen. Die selbsttätige Platzierung kommt sonst
   durcheinander, weil hier zweierlei Kinder stehen: Stufen über beide Zeilen
   und Verbinder nur in der ersten. Sie schob dann alle Trichter nach links
   und die vier Stufen zusammen an den rechten Rand. Reihenfolge im HTML:
   Stufe, Verbinder, Stufe, Verbinder, Stufe, Verbinder, Stufe. */
.ebenen-buehne > :nth-child(1){ grid-column:1; }
.ebenen-buehne > :nth-child(2){ grid-column:2; }
.ebenen-buehne > :nth-child(3){ grid-column:3; }
.ebenen-buehne > :nth-child(4){ grid-column:4; }
.ebenen-buehne > :nth-child(5){ grid-column:5; }
.ebenen-buehne > :nth-child(6){ grid-column:6; }
.ebenen-buehne > :nth-child(7){ grid-column:7; }
.eb-stufe{ display:grid; grid-row:1 / span 2; grid-template-rows:subgrid; }
.eb-verbinder{ grid-row:1; }
.eb-titel{ align-self:start; margin-top:.55rem; }

/* Ein Trichter je Zwischenraum: schmal am linken (höheren) Bild, zum rechten
   (tieferen) Bild so hoch wie das Bild. Verstärkt die Lupenwirkung. */
.eb-verbinder{ position:relative; display:flex; align-items:center; justify-content:center;
  color:var(--gedaempft); }
.eb-trichter{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.eb-lupe{ position:relative; z-index:1; display:block; width:1.4rem; height:1.4rem; }
.trichter-flaeche{ fill:var(--akzent-krone); fill-opacity:.16; }
.trichter-kante{ fill:none; stroke:var(--akzent-krone); stroke-opacity:.45;
  stroke-width:1; vector-effect:non-scaling-stroke; }

.eb-bild{
  border:1px solid var(--linie); border-radius:12px;
  background:var(--flaeche); padding:.5rem;
}
.eb-svg{ display:block; width:100%; height:auto; }
.eb-titel{ text-align:center; }
.ebene-name{ display:block; font-weight:600; font-size:.98rem; }
.ebene-desc{
  display:block; color:var(--gedaempft); font-size:.82rem;
  line-height:1.4; margin-top:.15rem;
}

/* Innenleben der vier Bildchen – Farben wie im grossen Baum */
.eb-kugel{ fill:none; stroke:var(--linie); stroke-width:1.4; }
.eb-horizont{ stroke:var(--horizont); stroke-width:1; opacity:.7; }
.eb-ast{ stroke:var(--holz); stroke-width:1.1; opacity:.5; }
.eb-knoten{ stroke-width:1.4; }
.eb-krone{ fill:var(--kreis-krone-f); stroke:var(--akzent-laub); }
.eb-wurzel{ fill:var(--kreis-wurzel-f); stroke:var(--akzent-wurzel); }
.eb-boden{ fill:var(--kreis-boden-f); stroke:var(--akzent-boden); }
.eb-gattung{ stroke-width:2; }
.eb-zweig{ stroke:var(--wurzelholz); stroke-width:.8; opacity:.5; }
.eb-artkugel{ stroke-width:1.2; }
.eb-artkugel.eb-aktiv, .eb-knoten.eb-aktiv{ fill:var(--akzent-krone); }
.eb-mini-ziffer{ fill:var(--papier); font-size:12px; font-weight:600; }
.eb-artgross{ stroke-width:2.4; }
.eb-ziffer{ fill:var(--tinte); font-size:24px; font-weight:600; }
.eb-wort{ fill:var(--tinte); font-size:14px; }
.eb-punkt{ fill:var(--akzent-krone); }
.eb-titel-linie{ fill:var(--gedaempft); opacity:.6; }
.eb-sub-linie{ fill:var(--linie); }

/* Die vier Ebenen auf schmalen Schirmen: untereinander statt nebeneinander.
   Vorher lagen sie wie der Baum unter einem min-width:660px und damit zur
   Hälfte ausserhalb. Der Trichter läuft nach rechts und ergäbe gestapelt
   keinen Sinn – er entfällt, die Lupe zwischen den Stufen bleibt als
   Zeichen fürs Tiefergehen. Die Bilder sind quadratisch und bekämen sonst
   die volle Breite als Höhe, viermal hintereinander. */
@media (max-width:700px){
  .ebenen-buehne{ grid-template-columns:1fr; grid-template-rows:none; }
  /* :nth-child(n) statt * – die Spaltenzuweisung oben wiegt als
     Klasse+Pseudoklasse schwerer als ein blosser Stern und bliebe sonst
     stehen, ganz gleich, was später im Blatt steht. */
  .ebenen-buehne > :nth-child(n){ grid-column:1; }
  .eb-stufe{ grid-row:auto; grid-template-rows:none; }
  .eb-verbinder{ grid-row:auto; }
  .eb-trichter{ display:none; }
  .eb-bild{ max-width:14rem; margin:0 auto; }
  .eb-titel{ margin-top:.4rem; }
}

/* ---------- Zuletzt geschrieben ----------
   Der kurze Weg zu den Texten, gleich unter dem Baum: der Baum ordnet, nennt
   aber keinen Titel. Der Abschnittskopf trägt dasselbe Zeichen wie die
   Übersichtsliste darunter (versal, gesperrt, unterstrichen), die Einträge
   dieselbe Gestalt wie die Art-Listen – die Startseite soll dabei nicht
   aussehen wie eine dritte Erfindung. */
.neueste{ max-width:680px; margin:2.6rem auto 1rem; }
.neueste > h2{
  font-size:1rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gedaempft);
  border-bottom:1px solid var(--linie);
  padding-bottom:.5rem;
  margin:0 0 .3rem;
  font-weight:600;
}
.neueste .artikel-liste{ margin-top:0; }
.neu-ort{ margin:.35rem 0 0; font-size:.85rem; }
.neu-ort a{ color:var(--akzent-krone); text-decoration:none; }
.neu-ort a:hover{ text-decoration:underline; }

/* ---------- Übersichtsliste unter dem Baum ---------- */

.uebersicht{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem 2rem;
  margin-top:2.2rem;
}
@media (max-width:760px){
  .uebersicht{ grid-template-columns:1fr; }
}

.haelfte h2{
  font-size:1rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gedaempft);
  border-bottom:1px solid var(--linie);
  padding-bottom:.5rem;
  margin:0 0 .9rem;
  font-weight:600;
}
.haelfte h2::before{
  content:"";
  display:inline-block;
  width:.55em; height:.55em;
  border-radius:50%;
  margin-right:.55em;
  background:var(--akzent-laub);
}
.wurzel-liste h2::before{ background:var(--akzent-wurzel); }
.boden-liste h2::before{ background:var(--akzent-boden); }
.boden-liste{ grid-column:1 / -1; }
.boden-liste ul{ grid-template-columns:1fr 1fr; }
@media (max-width:760px){ .boden-liste ul{ grid-template-columns:1fr; } }

.haelfte ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.haelfte li a{
  display:block;
  padding:.8rem 1rem;
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:10px;
  text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.haelfte li a:hover{ border-color:var(--akzent-krone); transform:translateY(-1px); }
.wurzel-liste li a:hover{ border-color:var(--akzent-wurzel); }

.zeile{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.zeile strong{ font-size:1.08rem; font-weight:600; }
.zeichen{ color:var(--gedaempft); font-size:.88rem; white-space:nowrap; }
.kurz{
  display:block;
  color:var(--gedaempft);
  font-size:.92rem;
  line-height:1.45;
  margin-top:.15rem;
}

/* ---------- Einzelseite einer Weltanschauung ---------- */

.seite{ max-width:680px; }

.wa-kopf .stellung{
  display:flex;
  align-items:center;
  color:var(--gedaempft);
  font-size:.95rem;
  letter-spacing:.05em;
  margin:0 0 .3rem;
}
.miniring{ flex:none; margin-right:.6rem; }
.miniring .ring{ fill:none; stroke:var(--linie); stroke-width:1.4; }
.miniring line{ stroke:var(--horizont); stroke-width:1; opacity:.75; }
.miniring .punkt{ fill:var(--linie); }
.miniring .aktiv-krone{ fill:var(--akzent-laub); }
.miniring .aktiv-wurzel{ fill:var(--akzent-wurzel); }
.miniring .aktiv-boden{ fill:var(--akzent-boden); }

.seite h1{
  font-size:2.3rem;
  font-weight:600;
  letter-spacing:.01em;
  margin:.1rem 0 .6rem;
}
.substanz{ margin:.1rem 0 .6rem; font-size:1.02rem; }
.substanz .etikett{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  color:var(--gedaempft);
  margin-right:.6rem;
}

.leitsatz{
  font-size:1.18rem;
  font-style:italic;
  color:var(--gedaempft);
  line-height:1.55;
  margin:0 0 1rem;
}

.arten-hinweis{ color:var(--gedaempft); font-size:.95rem; margin:0 0 1.2rem; }
.leer{ color:var(--gedaempft); font-style:italic; }

.artikel{ margin:1.1rem 0 1.6rem; }
/* Der Generator hebt den h4-Titel zum h1 der Artikelseite (h5 → h2);
   beide Formen tragen dieselbe Gestalt. */
/* Die Stufen der Artikelseite: Titel, Zwischentitel, Fliesstext.
   Vorher lagen sie bei 1.25 / 1.02 / 1.0625rem – der Zwischentitel war
   also kleiner als der Text, den er überschrieb, und nur der Fettschnitt
   unterschied ihn noch. Jetzt trägt jede Stufe ihren eigenen Grad.
   Der Titel wächst mit der Breite mit: lange Titel („Die zwei Träume vom
   Ende der Freiheit") sollen auf dem Handy nicht über vier Zeilen laufen. */
.artikel h1, .artikel h4{
  margin:0 0 .25rem;
  font-size:clamp(1.75rem, 1.25rem + 2.1vw, 2.3rem);
  line-height:1.18;
  font-weight:600;
  letter-spacing:.005em;
}
.datum{ margin:0 0 1rem; color:var(--gedaempft); font-size:.9rem; }

/* Binnenstruktur längerer Artikel */
.artikel h2, .artikel h5{
  margin:2.2rem 0 .5rem;
  font-size:1.32rem;
  line-height:1.3;
  font-weight:600;
}
.artikel sup a{ text-decoration:none; color:var(--gedaempft); }
.artikel sup a:hover{ color:var(--tinte); }
.artikel blockquote{
  margin:1rem 0 1rem .2rem;
  padding-left:1.1rem;
  border-left:3px solid var(--akzent-krone);
  color:var(--zitat);
  font-style:italic;
  font-size:1.05em;
  -webkit-text-stroke:0.3px currentColor;
}
/* Urtext und Übersetzung nebeneinander, Vers neben Vers.
   »max-content« statt »1fr 1fr«: jede Spalte wird genau so breit wie ihre
   längste Zeile, und keine Zeile bricht um. Damit stehen gleiche Versnummern
   immer auf gleicher Höhe - bräche eine deutsche Zeile um, verschöbe sich
   alles Folgende gegen das Latein, und die Zählung liefe auseinander.
   Gleiche Spalten wären hier auch das Gegenteil von eng: gemessen braucht das
   Latein 264px, das Deutsche 420px, »1fr 1fr« gäbe beiden 500px und schöbe
   damit ein Viertel Spaltenbreite Leere zwischen die zwei Fassungen.
   Unter 860px reicht die Breite für beide Spalten nicht mehr (264 + 420 + Rand
   und Zwischenraum ≈ 750px, dazu die Ränder der Hauptfläche) - dort stehen sie
   untereinander, und die Verszählung führt von der einen Fassung in die andere.
   »overflow-x« ist nur das Netz darunter: schätzt der Umbruchpunkt einmal
   falsch, rollt das Zitat in seinem eigenen Kasten statt die ganze Seite.
   »start« statt der Vorgabe »stretch«, damit der Zitatstrich mit seinem Text
   endet und nicht bis zur Höhe der längeren Spalte läuft. */
.artikel .zitat-paar{
  display:grid;
  grid-template-columns:max-content max-content;
  align-items:start;
  gap:0 1rem;
  overflow-x:auto;
}
@media (max-width:860px){
  .artikel .zitat-paar{ grid-template-columns:1fr; }
}

/* Verszählung vor der Zeile: kleiner als der Vers und ohne dessen Strichstärke,
   damit sie als Apparat und nicht als Text gelesen wird. */
.artikel blockquote .vers-nr{
  font-size:.75em;
  -webkit-text-stroke:0;
}
.artikel blockquote .zitat-quelle{
  margin:.5rem 0 0;
  font-style:normal;
  font-size:.82em;
  letter-spacing:.02em;
  text-align:right;
  color:var(--referenz);
  -webkit-text-stroke:0;
}
.quellen{
  margin:.6rem 0 0;
  padding-left:1.25rem;
  font-size:1.02rem;
  line-height:1.55;
  color:var(--referenz);
  -webkit-text-stroke:0.2px currentColor;
}
.quellen li{ margin:0 0 .55rem; }
.quellen a{ overflow-wrap:anywhere; }
.methodik{
  margin-top:1.2rem;
  padding-top:.8rem;
  border-top:1px dashed var(--linie);
  font-size:.95rem;
  color:var(--referenz);
  -webkit-text-stroke:0.2px currentColor;
}

.kreis-nav{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:3rem;
  border-top:1px solid var(--linie);
  padding-top:1.2rem;
  font-size:.98rem;
}
.kreis-nav a{ text-decoration:none; color:var(--gedaempft); }
.kreis-nav a:hover{ color:var(--tinte); }
.gegenueber{ text-align:center; }

/* ============================================================
   Skalierbare Navigation: Brotkrume, Art-Karten, Art-Listen,
   Artikel-Vor/Zurück, Suche. (Farben laufen über die Variablen,
   tragen also hell und dunkel.)
   ============================================================ */

/* Suche-Link im Kopf */
.kopf-suche{ margin:.3rem 0 0; font-size:.9rem; }
.kopf-suche a{ color:var(--akzent-krone); text-decoration:none; }
.kopf-suche a:hover{ color:var(--tinte); }

/* Brotkrume */
.brotkrume{ font-size:.9rem; color:var(--gedaempft); margin:0 0 1.5rem; }
.brotkrume a{ color:var(--gedaempft); text-decoration:none; }
.brotkrume a:hover{ color:var(--akzent-krone); }
.brotkrume span{ color:var(--tinte); }
.brotkrume > *:not(:first-child)::before{ content:"›"; margin:0 .5em; color:var(--linie); }

/* SVG: Anzahl in der Art-Kugel */
.art-badge{ font-size:2.6px; font-weight:600; fill:var(--akzent-krone); transition:opacity .3s ease; }
.art.aktiv .art-badge{ opacity:0; }

/* Gattungs-Übersicht: die zwölf Arten als Karten */
.arten-uebersicht{ margin-top:2rem; }
.art-karten{ list-style:none; padding:0; margin:1.2rem 0 0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; }
.art-karte{ border:1px solid var(--linie); border-radius:7px;
  padding:.75rem 1rem 1rem; background:var(--flaeche); }
.art-karte.leer{ opacity:.5; }
.art-karte-kopf{ display:flex; justify-content:space-between; align-items:baseline;
  text-decoration:none; color:var(--tinte); border-bottom:1px solid var(--linie);
  padding-bottom:.4rem; }
.art-karte-kopf:hover .art-nr{ color:var(--akzent-krone); }
.art-nr{ font-weight:600; font-size:1.05rem; }
.art-zahl{ font-size:.85rem; color:var(--akzent-krone);
  font-variant-numeric:tabular-nums; }
.art-karte.leer .art-zahl{ color:var(--gedaempft); }
.art-teaser{ list-style:none; padding:0; margin:.55rem 0 0; font-size:.92rem; }
.art-teaser li{ margin:.3rem 0; }
.art-teaser a{ color:var(--tinte); text-decoration:none; }
.art-teaser a:hover{ color:var(--akzent-krone); }
.art-teaser .datum{ display:block; font-size:.76rem; color:var(--gedaempft); }
.mehr{ display:inline-block; margin-top:.5rem; font-size:.85rem;
  color:var(--akzent-krone); text-decoration:none; }
.mehr:hover{ text-decoration:underline; }

/* Art-Liste: alle Artikel einer Art */
.art-kopf{ margin-bottom:.4rem; }
.art-kopf h1{ margin:0; }
.art-unter{ color:var(--gedaempft); margin:.2rem 0 0; }
.art-filter{ margin:1.1rem 0 .4rem; }
.art-filter input, .such-feld input{ width:100%; max-width:34rem; padding:.5rem .7rem;
  font:inherit; color:var(--tinte); background:var(--flaeche);
  border:1px solid var(--linie); border-radius:6px; }
.art-filter input:focus, .such-feld input:focus{ outline:2px solid var(--akzent-krone);
  outline-offset:1px; }
#filter-zahl, .such-zahl{ margin-left:.6rem; color:var(--gedaempft); font-size:.9rem; }
.artikel-liste{ list-style:none; padding:0; margin:1.2rem 0 0; }
.artikel-liste > li{ padding:.9rem 0; border-bottom:1px solid var(--linie); }
/* Gruppenkopf einer Art-Liste (META-Feld gruppe:) – Kapitel, keine Kategorie */
.artikel-liste > li.gruppe-kopf{ border-bottom:none; padding:1.7rem 0 .1rem;
  color:var(--gedaempft); font-size:.8rem; letter-spacing:.09em;
  text-transform:uppercase; }
.artikel-liste > li.gruppe-kopf:first-child{ padding-top:.3rem; }
.artikel-liste > li > a, .such-treffer > li > a{ display:flex;
  justify-content:space-between; align-items:baseline; gap:1rem;
  text-decoration:none; color:var(--tinte); }
.artikel-liste .titel, .such-treffer .titel{ font-weight:600; font-size:1.1rem; }
.artikel-liste > li > a:hover .titel, .such-treffer > li > a:hover .titel{ color:var(--akzent-krone); }
.artikel-liste .datum, .such-treffer .ort{ color:var(--gedaempft);
  font-size:.85rem; white-space:nowrap; flex:none; }
.ausz{ margin:.35rem 0 0; color:var(--referenz); font-size:.95rem; }

/* Vor/Zurück am Artikel; Art-Nachbarn */
.artikel-nav, .art-nav{ display:flex; justify-content:space-between; gap:1rem;
  margin-top:3rem; border-top:1px solid var(--linie); padding-top:1.1rem;
  font-size:.95rem; }
.artikel-nav a, .art-nav a{ text-decoration:none; color:var(--gedaempft);
  max-width:32%; }
.artikel-nav a:hover, .art-nav a:hover{ color:var(--tinte); }
.artikel-nav .nach{ text-align:right; }
.artikel-nav .zur-art, .art-nav .zur-gattung{ text-align:center; color:var(--akzent-krone); }
.artikel-nav .vor span, .artikel-nav .nach span{ display:block; font-size:.78rem;
  color:var(--akzent-krone); }

/* Suche */
.such-kopf h1{ margin:0; }
.such-hinweis{ color:var(--gedaempft); margin:.2rem 0 1.1rem; }
.such-feld{ margin:0 0 1.2rem; }
.such-treffer{ list-style:none; padding:0; margin:0; }
.such-treffer > li{ padding:.85rem 0; border-bottom:1px solid var(--linie); }

/* Startseite: Suchleiste + Anzahl je Gattung */
.such-leiste{ text-align:center; margin:.5rem 0 1.6rem; }
.such-knopf{ display:inline-block; padding:.55rem 1.15rem;
  border:1px solid var(--akzent-krone); border-radius:7px;
  color:var(--akzent-krone); text-decoration:none; font-size:1rem; }
.such-knopf:hover{ background:var(--akzent-krone); color:var(--papier); }
.uebersicht .anzahl{ display:block; margin-top:.2rem; font-size:.82rem;
  color:var(--akzent-krone); font-variant-numeric:tabular-nums; }

/* ============================================================
   Druck: immer helle Palette auf weissem Grund — auch im Terminal-
   und im Nachtbild (sonst helle Schrift auf Papier). Der zweite
   Selektor deckt jede ausdrückliche Wahl ab und wiegt dabei so
   schwer wie die drei Palettenblöcke oben, steht aber später.
   Navigation und Bedienelemente werden nicht gedruckt.
   ============================================================ */
@media print{
  :root, :root[data-theme]{
    color-scheme:light;
    --papier:#fff;
    --flaeche:#fff;
    --tinte:#000;
    --gedaempft:#555;
    --linie:#c9c9c9;
    --horizont:#8a7a62;
    --himmel:#f2f5f7;
    --erde:#f3ece0;
    --holz:#5d4a35;
    --wurzelholz:#4a3c2f;
    --akzent-krone:#8a6a20;
    --akzent-krone-hell:#c49d3f;
    --zitat:#6d500f;
    --referenz:#3f3830;
    --akzent-wurzel:#4f4382;
    --akzent-wurzel-hell:#7e6fb4;
    --akzent-laub:#4e6a42;
    --kreis-krone-f:#fff;
    --kreis-wurzel-f:#fff;
    --akzent-boden:#7a452c;
    --kreis-boden-f:#fff;
  }
  .thema-schalter, .zoom-zurueck, .kopf-suche, .brotkrume, .such-leiste,
  .artikel-nav, .art-nav, .kreis-nav, .art-filter, .such-feld, .hinweis{ display:none; }
}

/* Der Weg vom Baum zurück aufs Dach: die Willkommensseite mit den fünf
   Projekten liegt eine Ebene über diesem Bestand (Umzug 2026-09-20). */
.fuss-dach{ margin-top:.7rem !important; }
.fuss-dach a{ color:var(--akzent-krone); text-decoration:none; }
.fuss-dach a:hover{ text-decoration:underline; }