/* ============================================================
   Marke — Design-Tokens
   ============================================================

   DIESE DATEI IST KUNDENSPEZIFISCH UND WIRD AUSGETAUSCHT (A10).

   Der Kern (`portal.css`) greift ausschliesslich ueber `var(--…)` zu und
   enthaelt keine einzige Farbe. Eine Zweitinstallation fuer einen anderen
   Auftraggeber ersetzt genau diese Datei plus das Logo — keine Codeaenderung.

   **Was hier steht und was nicht:** Hier stehen die Entscheidungen, die eine
   Marke trifft — Farben, Schriften, Rundungen, Tiefe. Die Masse der Oberflaeche
   (Abstaende, Schriftgroessen, Lesebreiten, Dauern) stehen im Kern: Sie sind
   Gestaltungsraster, kein Corporate Design. Ein Auftraggeber, der sie
   ueberschreiben duerfte, koennte damit das Layout zerlegen, ohne es zu
   merken. Einzelne Werte laessen sich hier trotzdem nachziehen — sie sind
   Variablen, keine Konstanten.

   Werte laut CD-Manual des Bayerischen Turnverbands v1.0.
   ============================================================ */
:root {
  /* ---- Farben ---- */
  --blau: #1770B8;
  --blau-dunkel: #115a93;
  --blau-hell: #5989C7;
  --blau-20: #D9E0F2;

  --akzent: #E3000B;
  --akzent-80: #E94D33;
  --akzent-20: #FCD9C9;

  --schrift: #12161d;
  --schrift-weich: #3b4658;
  --schrift-leise: #6b7785;

  --linie: #e0e7f1;
  --linie-weich: #eef2f7;

  --grund: #f3f6fb;
  --grund-2: #f9fbfe;
  --karte: #ffffff;
  /* Die Seitenleiste als leise blaue Flaeche (Aenderungskatalog 28.09.,
     Punkt 6.3 „Blau als Grundton durchziehen"): Weiss neben weissem Inhalt
     liess das Portal grau wirken, obwohl jede Neutralflaeche bereits blau
     getoent ist. Ein Ton zwischen `--grund` und `--kachel-blau` — die Leiste
     ist eine Flaeche, kein Kachelkopf. */
  --leiste: #eef3fa;

  --ok: #15924f;
  --ok-grund: #e9f7ef;
  --fehler: #E3000B;
  --fehler-grund: #FCD9C9;
  --warnung: #c5860a;
  --warnung-grund: #fdf4e0;

  /* Rollenfamilien (App\Support\Rollenfarbe): je Familie Schrift, Grund und
     Rand. Hauptberuf nutzt Blau, Ehrenamt Gruen — die stehen oben schon. */
  --rolle-system: #a30008;         --rolle-system-grund: #fde8ea;         --rolle-system-rand: #f5b5ba;
  --rolle-admin: #9a4a00;          --rolle-admin-grund: #ffe9d6;          --rolle-admin-rand: #f7c9a3;
  --rolle-intern-rand: #b9c8ea;
  --rolle-referent: #5b2ea6;       --rolle-referent-grund: #ece4f9;       --rolle-referent-rand: #cfbdf0;
  --rolle-ehrenamt-rand: #b7e3c8;
  --rolle-digi: #7a5300;           --rolle-digi-grund: #fff4d1;           --rolle-digi-rand: #f0d68a;
  --rolle-akkreditierung: #0b6b66; --rolle-akkreditierung-grund: #dcf3f2; --rolle-akkreditierung-rand: #a8dedb;
  --rolle-newsletter: #9a1f5e;     --rolle-newsletter-grund: #fbe3f0;     --rolle-newsletter-rand: #f0b8d3;

  /* Schrift auf gefuellten Flaechen. Gehoert in die Marke, nicht in den Kern:
     Bei einer hellen Primaerfarbe waere Weiss unlesbar, und der Kern darf das
     nicht entscheiden. */
  --schrift-auf-farbe: #ffffff;

  /* **Rot, das man lesen kann.** `--akzent` ist die CD-Signalfarbe und als
     Flaeche hinter weisser Schrift grenzwertig — in der geometrischen
     Ersatzschrift war die Beschriftung eines gefuellten roten Knopfes kaum zu
     entziffern. Fuer gefuellte Flaechen gibt es deshalb einen abgedunkelten
     Ton; das Signalrot bleibt fuer Linien, Schrift und Marken. */
  --gefahr-flaeche: #b8000a;
  --gefahr-flaeche-tief: #940008;

  /* ---- Der Held: grosse Farbflaeche am Seitenkopf ----
     Die Startseite und jeder Modulkopf beginnen mit einer Flaeche in der
     Markenfarbe. Als Verlauf und nicht als Vollton, weil eine 300 px hohe
     Flaeche im reinen `--blau` erschlagend wirkt. */
  /* Seit 0.41.0 ohne Fläche — nur Titel, Zeichen und eine Haarlinie; vorher
     (0.40.0) weiß, davor Pastellverlauf. Frühere Notiz: weiß mit
     Haarlinie, die Illustration bleibt im Seitenhintergrund. */
  --held: transparent;
  --held-schrift: #0f3b66;
  --held-leise: rgba(15, 59, 102, .78);
  /* Dezent seit 28.09.: Der satte Verlauf erschlug jede Seite — jetzt eine
     leise Toenung wie die Kacheln, die Schrift dunkel darauf. Im dunklen
     Schema bleibt die Flaeche eine Stufe heller als die Karte, Schrift hell. */
  /* Der Schleier auf gefuellten Flaechen: das Symbolfeld in einem gefuellten
     Knopf, ein Knopf beim Ueberfahren im Held. Er gehoert in die Marke, weil er
     zur Schrift auf der Flaeche passen muss — bei einer hellen Primaerfarbe
     waere ein weisser Schleier unsichtbar. */
  --schleier: rgba(255, 255, 255, .16);
  --schleier-stark: rgba(255, 255, 255, .2);

  /* Das Dreieck im Auswahlfeld. Es steht hier, weil es eine Farbe traegt und
     der Kern keine haben darf (A10) — als SVG in der Adresse, damit es ohne
     zweiten Netzabruf da ist. `%23` ist das maskierte Doppelkreuz. */
  --auswahlpfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%233b4658' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  /* Die Illustration im Held. Sie steht dort — und nur dort — als grosses
     Bild; ueber der ganzen Seite konkurriert sie mit dem Inhalt. */
  --held-bild: url("/assets/marke/hintergrund.webp?v=2026-09c");

  /* ---- Schriften ----
     Century Gothic und Harabara sind lizenzabhaengig je Auftraggeber und
     gehoeren NICHT zum Produkt-Core. Fehlen sie, greifen die geometrischen
     Ersatzschriften — das Layout bricht dadurch nicht. */
  --schriftfamilie: "Century Gothic", "Questrial", "Avenir Next", "Futura",
                    "Trebuchet MS", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, sans-serif;
  --schriftfamilie-titel: "Harabara", "Century Gothic", "Questrial", "Futura",
                          "Avenir Next", "Trebuchet MS", sans-serif;

  /* ---- Hintergrundbild ----
     Kundenspezifisch und deshalb hier, nicht im Kern: `portal.css` setzt nur
     `background-image: var(--hintergrundbild)`. Wer keines hat, setzt `none`
     und bekommt eine ruhige Flaeche — das Layout haengt nicht daran.

     **Auf jeder Seite, wie im Vorgaengerportal.** Zwischenzeitlich lief es nur
     noch auf den Gastseiten, waehrend die Arbeitsflaeche eine reine Flaeche
     war. Der Auftraggeber wollte das Bild zurueck — es ist das
     Wiedererkennungszeichen des Vorgaengerportals, und Karten, Tabellen,
     Seitenleiste und Kopfleiste haben eigene deckende Hintergruende
     (`var(--karte)`), sodass es unter ihnen durchlaeuft, ohne Inhalte
     schwerer lesbar zu machen.

     **Absoluter Pfad, und das ist keine Nachlaessigkeit.** Ein relatives
     `url()` innerhalb einer CSS-Variablen loest der Browser gegen die Adresse
     der SEITE auf, nicht gegen die der Stylesheet-Datei -- anders als in einer
     gewoehnlichen Regel. `url("hintergrund.webp")` wurde damit zu
     `/hintergrund.webp` und lief ins Leere: kein Fehler, keine Meldung, nur
     kein Bild. */
  --hintergrundbild:
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
    url("/assets/marke/hintergrund.webp?v=2026-09c");
  --hintergrundfarbe: #eef2fa;
  /* Hoehe durch Breite der Bilddatei (941 / 1672). Der Kern braucht es, um
     die Oberkante des eingepassten Bildes in die Hintergrundfarbe auslaufen
     zu lassen. Wer das Bild tauscht, traegt hier dessen Verhaeltnis ein. */
  --hintergrund-verhaeltnis: .5628;

  /* ---- Kachelfarben ----
     Die Kopffelder der Startseiten-Kacheln. Ein Modul waehlt einen Namen
     (`gruen`, `violett`, …), nicht einen Farbwert — sonst stuende die Farbe
     des Auftraggebers im Modulcode. */
  /* Ein leiser Ton als Flaeche, die Farbe selbst nur im Zeichen: Fuenf
     gesaettigte Farbbloecke nebeneinander schrien um die Wette, und die
     Wiedererkennung braucht die Farbe nicht in dieser Menge — ein
     getoentes Feld mit einem farbigen Symbol reicht dem Auge. */
  --kachel-blau: #e7eef8;    --kachel-blau-zeichen: #1f5a97;
  --kachel-gruen: #e4f0ea;   --kachel-gruen-zeichen: #2f6650;
  --kachel-violett: #ede7f5; --kachel-violett-zeichen: #64408c;
  --kachel-rot: #f6e9e2;     --kachel-rot-zeichen: #a4522f;
  --kachel-grau: #e9ecf0;    --kachel-grau-zeichen: #46505d;

  /* ---- Bild- und Wortmarke in der Kopfleiste ----
     Die Wortmarke traegt die Markenfarbe; die Bildmarke braucht keine eigene
     Flaeche, die Kopfleiste ist ohnehin weiss. */
  --wortmarke: #1770B8;
  --logo-flaeche: transparent;
  --logo-polster: 0;

  /* ---- Form, Tiefe, Bewegung ---- */
  /* Seit 0.37.0 kleiner (vorher 18/12/9): Große Rundungen polstern jede
     Karte optisch auf, und die Layoutrunde wollte das Gegenteil. */
  --radius: 12px;
  --radius-s: 8px;
  --radius-xs: 6px;

  /* Karten liegen auf der Fläche, sie schweben nicht: nur noch eine
     Haarkante. Der tiefe Schatten gehört Aufklapplisten und Dialogen
     (`--schatten-md`, `--schatten-hoch`). */
  --schatten: 0 1px 2px rgba(16, 33, 60, .06);
  /* Der Schatten unter der Kopfleiste -- flacher und weiter als der
     Kartenschatten, damit die Leiste ueber dem Inhalt schwebt statt auf ihm zu
     liegen. */
  --schatten-kopf: 0 10px 30px -22px rgba(16, 33, 60, .7);

  --schatten-md: 0 2px 6px rgba(16, 33, 60, .06), 0 18px 38px -16px rgba(16, 33, 60, .22);
  /* Die oberste Ebene: schwebende Menues und alles, was ueber der Seite liegt.
     Weiter und weicher als der Kartenschatten — eine Ebene erkennt man am
     Abstand zum Untergrund, nicht an der Schwaerze. */
  --schatten-hoch: 0 4px 10px rgba(16, 33, 60, .08), 0 30px 60px -24px rgba(16, 33, 60, .32);
  --fokusring: 0 0 0 4px rgba(23, 112, 184, .28);

  --uebergang: cubic-bezier(.22, .61, .36, 1);

  /* ---- Dunkles Schema ----
     Die Palette liegt hier als eigener Satz Namen bereit und wirkt noch nicht.
     Zugewiesen wird sie weiter unten — zweimal, weil CSS keinen Weg kennt, eine
     Systemeinstellung und eine getroffene Wahl in einem Selektor zu fassen.
     Dupliziert sind dabei nur die Zuweisungen, nie die Werte: Wer eine Farbe
     aendert, aendert sie an genau einer Stelle. */
  --d-blau: #58a8ea;
  --d-blau-dunkel: #8cc4f2;
  --d-blau-hell: #3f86c4;
  --d-blau-20: #17324b;

  --d-akzent: #ff5a63;
  --d-akzent-80: #ff8a72;
  --d-akzent-20: #4a1d1d;

  --d-schrift: #e9eef7;
  --d-schrift-weich: #b3becd;
  --d-schrift-leise: #8592a4;

  --d-linie: #2a3546;
  --d-linie-weich: #202939;

  --d-grund: #0e131c;
  --d-grund-2: #151d29;
  --d-karte: #172030;
  --d-leiste: #121a26;

  --d-ok: #4ec98a;
  --d-ok-grund: #14301f;
  --d-fehler: #ff5a63;
  --d-fehler-grund: #3a1416;
  --d-warnung: #e0a83a;
  --d-warnung-grund: #33270c;

  --d-rolle-system: #ffb3b8;         --d-rolle-system-grund: #4a1216;         --d-rolle-system-rand: #7a1f26;
  --d-rolle-admin: #ffcf9e;          --d-rolle-admin-grund: #4a2a10;          --d-rolle-admin-rand: #7a4a1f;
  --d-rolle-intern-rand: #2f4a6e;
  --d-rolle-referent: #d3bfff;       --d-rolle-referent-grund: #2e2050;       --d-rolle-referent-rand: #4d3a80;
  --d-rolle-ehrenamt-rand: #1f5a38;
  --d-rolle-digi: #ffe08a;           --d-rolle-digi-grund: #423408;           --d-rolle-digi-rand: #6e5a14;
  --d-rolle-akkreditierung: #9fe3df; --d-rolle-akkreditierung-grund: #0f3735; --d-rolle-akkreditierung-rand: #1c5e5a;
  --d-rolle-newsletter: #ffb6d9;     --d-rolle-newsletter-grund: #43162c;     --d-rolle-newsletter-rand: #6e2549;

  --d-gefahr-flaeche: #c22029;
  --d-gefahr-flaeche-tief: #9c1820;

  --d-held: transparent;
  --d-held-schrift: #f2f6fb;
  --d-held-leise: rgba(242, 246, 251, .78);

  /* Kacheln auf dunklem Grund: die Flaeche eine Stufe heller als die Karte,
     das Zeichen in der aufgehellten Farbe. */
  --d-kachel-blau: #1c2b40;    --d-kachel-blau-zeichen: #8cc4f2;
  --d-kachel-gruen: #1a2f27;   --d-kachel-gruen-zeichen: #7fd1a8;
  --d-kachel-violett: #29223d; --d-kachel-violett-zeichen: #c7aaf0;
  --d-kachel-rot: #35241c;     --d-kachel-rot-zeichen: #f0a884;
  --d-kachel-grau: #222a36;    --d-kachel-grau-zeichen: #b3becd;

  /* Die Wortmarke wird weiss: Das Markenblau ist auf der dunklen Leiste zu
     matt. Die Bildmarke bekommt ihre weisse Flaeche zurueck — laut CD steht
     das Logo nur auf Weiss, und auf Dunkel war es nicht zu lesen. */
  --d-wortmarke: #ffffff;
  --d-logo-flaeche: #ffffff;
  --d-logo-polster: .3rem .5rem;
  --d-hintergrundfarbe: #0b1017;
  --d-hintergrundbild:
    linear-gradient(rgba(11, 16, 23, .78), rgba(11, 16, 23, .78)),
    url("/assets/marke/hintergrund.webp?v=2026-09c");

  /* Schatten auf dunklem Grund: Schwarz auf Dunkel ist unsichtbar. Tiefe
     entsteht dort ueber einen hellen Rand oben und einen sehr weiten Schlagraum
     — deshalb kraeftigere Werte und ein feiner Lichtsaum. */
  --d-schatten: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 22px -12px rgba(0, 0, 0, .8);
  --d-schatten-md: 0 1px 0 rgba(255, 255, 255, .05), 0 22px 44px -18px rgba(0, 0, 0, .85);
  --d-schatten-hoch: 0 1px 0 rgba(255, 255, 255, .06), 0 36px 70px -26px rgba(0, 0, 0, .9);
  --d-schatten-kopf: 0 12px 34px -24px rgba(0, 0, 0, .95);
  --d-fokusring: 0 0 0 4px rgba(88, 168, 234, .35);
}

/* Die Zuweisung des dunklen Schemas.

   Zwei Selektoren, eine Liste: Das System sagt „dunkel" (und niemand hat
   ausdruecklich hell gewaehlt) — oder die Person hat sich im Portal fuer
   dunkel entschieden. `data-schema` steht am `<html>`, damit die Farbe schon
   vor dem ersten Anstrich feststeht; auf `<body>` gesetzt blitzt sonst das
   helle Schema auf. */
@media (prefers-color-scheme: dark) {
  :root:not([data-schema="hell"]) {
    --blau: var(--d-blau);
    --blau-dunkel: var(--d-blau-dunkel);
    --blau-hell: var(--d-blau-hell);
    --blau-20: var(--d-blau-20);

    --akzent: var(--d-akzent);
    --akzent-80: var(--d-akzent-80);
    --akzent-20: var(--d-akzent-20);

    --schrift: var(--d-schrift);
    --schrift-weich: var(--d-schrift-weich);
    --schrift-leise: var(--d-schrift-leise);

    --linie: var(--d-linie);
    --linie-weich: var(--d-linie-weich);

    --grund: var(--d-grund);
    --grund-2: var(--d-grund-2);
    --karte: var(--d-karte);
    --leiste: var(--d-leiste);

    --ok: var(--d-ok);
    --ok-grund: var(--d-ok-grund);
    --fehler: var(--d-fehler);
    --fehler-grund: var(--d-fehler-grund);
    --warnung: var(--d-warnung);
    --warnung-grund: var(--d-warnung-grund);
  --rolle-system: var(--d-rolle-system); --rolle-system-grund: var(--d-rolle-system-grund); --rolle-system-rand: var(--d-rolle-system-rand);
  --rolle-admin: var(--d-rolle-admin); --rolle-admin-grund: var(--d-rolle-admin-grund); --rolle-admin-rand: var(--d-rolle-admin-rand);
  --rolle-intern-rand: var(--d-rolle-intern-rand);
  --rolle-referent: var(--d-rolle-referent); --rolle-referent-grund: var(--d-rolle-referent-grund); --rolle-referent-rand: var(--d-rolle-referent-rand);
  --rolle-ehrenamt-rand: var(--d-rolle-ehrenamt-rand);
  --rolle-digi: var(--d-rolle-digi); --rolle-digi-grund: var(--d-rolle-digi-grund); --rolle-digi-rand: var(--d-rolle-digi-rand);
  --rolle-akkreditierung: var(--d-rolle-akkreditierung); --rolle-akkreditierung-grund: var(--d-rolle-akkreditierung-grund); --rolle-akkreditierung-rand: var(--d-rolle-akkreditierung-rand);
  --rolle-newsletter: var(--d-rolle-newsletter); --rolle-newsletter-grund: var(--d-rolle-newsletter-grund); --rolle-newsletter-rand: var(--d-rolle-newsletter-rand);

    --gefahr-flaeche: var(--d-gefahr-flaeche);
    --gefahr-flaeche-tief: var(--d-gefahr-flaeche-tief);

    --held: var(--d-held);

    --held-schrift: var(--d-held-schrift);

    --held-leise: var(--d-held-leise);
    --kachel-blau: var(--d-kachel-blau);       --kachel-blau-zeichen: var(--d-kachel-blau-zeichen);
    --kachel-gruen: var(--d-kachel-gruen);     --kachel-gruen-zeichen: var(--d-kachel-gruen-zeichen);
    --kachel-violett: var(--d-kachel-violett); --kachel-violett-zeichen: var(--d-kachel-violett-zeichen);
    --kachel-rot: var(--d-kachel-rot);         --kachel-rot-zeichen: var(--d-kachel-rot-zeichen);
    --kachel-grau: var(--d-kachel-grau);       --kachel-grau-zeichen: var(--d-kachel-grau-zeichen);
    --wortmarke: var(--d-wortmarke);
    --logo-flaeche: var(--d-logo-flaeche);
    --logo-polster: var(--d-logo-polster);
    --hintergrundfarbe: var(--d-hintergrundfarbe);
    --hintergrundbild: var(--d-hintergrundbild);

    --schatten: var(--d-schatten);
    --schatten-md: var(--d-schatten-md);
    --schatten-hoch: var(--d-schatten-hoch);
    --schatten-kopf: var(--d-schatten-kopf);
    --fokusring: var(--d-fokusring);

    /* Auf dunklem Grund braucht das Dreieck die helle Schriftfarbe. */
    --auswahlpfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23b3becd' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  }
}

:root[data-schema="dunkel"] {
  --blau: var(--d-blau);
  --blau-dunkel: var(--d-blau-dunkel);
  --blau-hell: var(--d-blau-hell);
  --blau-20: var(--d-blau-20);

  --akzent: var(--d-akzent);
  --akzent-80: var(--d-akzent-80);
  --akzent-20: var(--d-akzent-20);

  --schrift: var(--d-schrift);
  --schrift-weich: var(--d-schrift-weich);
  --schrift-leise: var(--d-schrift-leise);

  --linie: var(--d-linie);
  --linie-weich: var(--d-linie-weich);

  --grund: var(--d-grund);
  --grund-2: var(--d-grund-2);
  --karte: var(--d-karte);
  --leiste: var(--d-leiste);

  --ok: var(--d-ok);
  --ok-grund: var(--d-ok-grund);
  --fehler: var(--d-fehler);
  --fehler-grund: var(--d-fehler-grund);
  --warnung: var(--d-warnung);
  --warnung-grund: var(--d-warnung-grund);
  --rolle-system: var(--d-rolle-system); --rolle-system-grund: var(--d-rolle-system-grund); --rolle-system-rand: var(--d-rolle-system-rand);
  --rolle-admin: var(--d-rolle-admin); --rolle-admin-grund: var(--d-rolle-admin-grund); --rolle-admin-rand: var(--d-rolle-admin-rand);
  --rolle-intern-rand: var(--d-rolle-intern-rand);
  --rolle-referent: var(--d-rolle-referent); --rolle-referent-grund: var(--d-rolle-referent-grund); --rolle-referent-rand: var(--d-rolle-referent-rand);
  --rolle-ehrenamt-rand: var(--d-rolle-ehrenamt-rand);
  --rolle-digi: var(--d-rolle-digi); --rolle-digi-grund: var(--d-rolle-digi-grund); --rolle-digi-rand: var(--d-rolle-digi-rand);
  --rolle-akkreditierung: var(--d-rolle-akkreditierung); --rolle-akkreditierung-grund: var(--d-rolle-akkreditierung-grund); --rolle-akkreditierung-rand: var(--d-rolle-akkreditierung-rand);
  --rolle-newsletter: var(--d-rolle-newsletter); --rolle-newsletter-grund: var(--d-rolle-newsletter-grund); --rolle-newsletter-rand: var(--d-rolle-newsletter-rand);

  --gefahr-flaeche: var(--d-gefahr-flaeche);
  --gefahr-flaeche-tief: var(--d-gefahr-flaeche-tief);

  --held: var(--d-held);

  --held-schrift: var(--d-held-schrift);

  --held-leise: var(--d-held-leise);
  --kachel-blau: var(--d-kachel-blau);       --kachel-blau-zeichen: var(--d-kachel-blau-zeichen);
  --kachel-gruen: var(--d-kachel-gruen);     --kachel-gruen-zeichen: var(--d-kachel-gruen-zeichen);
  --kachel-violett: var(--d-kachel-violett); --kachel-violett-zeichen: var(--d-kachel-violett-zeichen);
  --kachel-rot: var(--d-kachel-rot);         --kachel-rot-zeichen: var(--d-kachel-rot-zeichen);
  --kachel-grau: var(--d-kachel-grau);       --kachel-grau-zeichen: var(--d-kachel-grau-zeichen);
  --wortmarke: var(--d-wortmarke);
  --logo-flaeche: var(--d-logo-flaeche);
  --logo-polster: var(--d-logo-polster);
  --hintergrundfarbe: var(--d-hintergrundfarbe);
  --hintergrundbild: var(--d-hintergrundbild);

  --schatten: var(--d-schatten);
  --schatten-md: var(--d-schatten-md);
  --schatten-hoch: var(--d-schatten-hoch);
  --schatten-kopf: var(--d-schatten-kopf);
  --fokusring: var(--d-fokusring);

    /* Auf dunklem Grund braucht das Dreieck die helle Schriftfarbe. */
    --auswahlpfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23b3becd' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
}

/* Der Browser soll seine eigenen Flaechen mitziehen — Bildlaufleisten,
   Formularelemente, die Einfuegemarke. Ohne diese Zeile steht ein weisses
   Auswahlfeld mitten in einer dunklen Seite. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-schema="hell"]) { color-scheme: dark; } }
:root[data-schema="dunkel"] { color-scheme: dark; }
:root[data-schema="hell"] { color-scheme: light; }

/* Web-Schriften bereitstellen: woff2 nach `assets/marke/fonts/` legen und
   diesen Block einkommentieren. Bewusst auskommentiert ausgeliefert — ohne
   Lizenz duerfen die Dateien nicht mit.

@font-face { font-family: "Harabara"; src: url("fonts/Harabara.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Century Gothic"; src: url("fonts/CenturyGothic.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Century Gothic"; src: url("fonts/CenturyGothic-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
*/