/**
 * 91-levels.css - Ebenen-Farbschema
 *
 * ERZEUGT von scripts/gen_level_css.py aus derselben Farbtabelle wie
 * die Dreiecks-SVGs (enzbilderSVG3.pm -> svg_triangle.FILL_COLORS).
 * Nicht von Hand bearbeiten - Aenderungen gehen beim naechsten Build
 * verloren. Farbe aendern heisst: in svg_triangle.py aendern, dann
 * neu erzeugen. So bleiben Bild und Seite gleich.
 *
 * Bedeutung: gleiche Farbe = gleiche Systemebene.
 *   Ebene 1 rot      Logik, Natur, Geist
 *   Ebene 2 blau     Sein, Wesen, Begriff
 *   Ebene 3 gruen    Bestimmtheit, Groesse, Mass
 *   ...
 *   ab Ebene 9 wiederholt sich der Zyklus
 *
 * Gefaerbt werden nur Akzente, nicht Flaechen: die Farben sind fuer
 * weisse Schrift auf farbigem Dreieck gewaehlt, nicht als
 * Seitenhintergrund.
 */


:root {
  --level-0: black;
  --level-0-text: white;
  --level-1: #ED0000;
  --level-1-text: white;
  --level-2: #3466FC;
  --level-2-text: white;
  --level-3: #048904;
  --level-3-text: white;
  --level-4: #FF66FF;
  --level-4-text: black;
  --level-5: yellow;
  --level-5-text: black;
  --level-6: lightgrey;
  --level-6-text: black;
  --level-7: turquoise;
  --level-7-text: black;
  --level-8: #C1A2DD;
  --level-8-text: black;
  --level-9: #ED0000;
  --level-9-text: white;
  --level-10: #3466FC;
  --level-10-text: white;
  --level-11: #048904;
  --level-11-text: white;
  --level-12: #FF66FF;
  --level-12-text: black;
  --level-13: yellow;
  --level-13-text: black;
  --level-14: lightgrey;
  --level-14-text: black;
  --level-15: turquoise;
  --level-15-text: black;
  --level-16: #C1A2DD;
  --level-16-text: black;
}

/* Akzentfarbe der Seite = Farbe ihrer Systemebene */
[data-level="0"] { --level: var(--level-0); --level-text: var(--level-0-text); }
[data-level="1"] { --level: var(--level-1); --level-text: var(--level-1-text); }
[data-level="2"] { --level: var(--level-2); --level-text: var(--level-2-text); }
[data-level="3"] { --level: var(--level-3); --level-text: var(--level-3-text); }
[data-level="4"] { --level: var(--level-4); --level-text: var(--level-4-text); }
[data-level="5"] { --level: var(--level-5); --level-text: var(--level-5-text); }
[data-level="6"] { --level: var(--level-6); --level-text: var(--level-6-text); }
[data-level="7"] { --level: var(--level-7); --level-text: var(--level-7-text); }
[data-level="8"] { --level: var(--level-8); --level-text: var(--level-8-text); }
[data-level="9"] { --level: var(--level-9); --level-text: var(--level-9-text); }
[data-level="10"] { --level: var(--level-10); --level-text: var(--level-10-text); }
[data-level="11"] { --level: var(--level-11); --level-text: var(--level-11-text); }
[data-level="12"] { --level: var(--level-12); --level-text: var(--level-12-text); }
[data-level="13"] { --level: var(--level-13); --level-text: var(--level-13-text); }
[data-level="14"] { --level: var(--level-14); --level-text: var(--level-14-text); }
[data-level="15"] { --level: var(--level-15); --level-text: var(--level-15-text); }
[data-level="16"] { --level: var(--level-16); --level-text: var(--level-16-text); }

/* --- Anwendung ------------------------------------------------- */

.triangle-page .triangle-code {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: var(--rounded, 3px);
  background: var(--level, var(--color-gray-200));
  color: var(--level-text, #000);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.triangle-page .page-header h1 {
  border-bottom: 3px solid var(--level, var(--color-gray-300));
  padding-bottom: 0.3em;
}

.triangle-page .breadcrumb li:last-child {
  border-left: 3px solid var(--level, transparent);
  padding-left: 0.5em;
}

/* Die Unterbegriffe stehen eine Ebene tiefer - deshalb deren Farbe.
   Ohne JavaScript nicht ableitbar, daher hier nicht eingefaerbt;
   gen_pages.py koennte data-child-level mitgeben, falls gewuenscht. */
.triangle-page .triangle-children .code,
.triangle-page .triangle-fallback .code {
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-600, #666);
}

/* Ersatzdarstellung, solange das SVG nicht portiert ist */
.triangle-fallback {
  border-left: 4px solid var(--level, var(--color-gray-300));
  padding-left: 1em;
  list-style: none;
}

/* Tabelle: Ebenenspalte einfaerben, damit die Systematik auch dort
   sichtbar wird. Nur ein Punkt, kein Flaechenhintergrund - bei 2097
   Zeilen waere das unruhig. */
.datatable .col-level::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--zeilen-level, transparent);
  vertical-align: baseline;
}

.datatable tr[data-level="0"] { --zeilen-level: var(--level-0); }
.datatable tr[data-level="1"] { --zeilen-level: var(--level-1); }
.datatable tr[data-level="2"] { --zeilen-level: var(--level-2); }
.datatable tr[data-level="3"] { --zeilen-level: var(--level-3); }
.datatable tr[data-level="4"] { --zeilen-level: var(--level-4); }
.datatable tr[data-level="5"] { --zeilen-level: var(--level-5); }
.datatable tr[data-level="6"] { --zeilen-level: var(--level-6); }
.datatable tr[data-level="7"] { --zeilen-level: var(--level-7); }
.datatable tr[data-level="8"] { --zeilen-level: var(--level-8); }
.datatable tr[data-level="9"] { --zeilen-level: var(--level-9); }
.datatable tr[data-level="10"] { --zeilen-level: var(--level-10); }
.datatable tr[data-level="11"] { --zeilen-level: var(--level-11); }
.datatable tr[data-level="12"] { --zeilen-level: var(--level-12); }
.datatable tr[data-level="13"] { --zeilen-level: var(--level-13); }
.datatable tr[data-level="14"] { --zeilen-level: var(--level-14); }
.datatable tr[data-level="15"] { --zeilen-level: var(--level-15); }
.datatable tr[data-level="16"] { --zeilen-level: var(--level-16); }