/* ============================================================
   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;

  --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. */
  --held: linear-gradient(135deg, #0f4f85 0%, #1770B8 46%, #2f8fd6 100%);
  --held-schrift: #ffffff;
  --held-leise: rgba(255, 255, 255, .78);
  /* 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");

  /* ---- 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");
  --hintergrundfarbe: #eef2fa;

  /* ---- Kachelfarben ----
     Die Kopffelder der Startseiten-Kacheln. Ein Modul waehlt einen Namen
     (`gruen`, `violett`, …), nicht einen Farbwert — sonst stuende die Farbe
     des Auftraggebers im Modulcode. */
  --kachel-blau: linear-gradient(150deg, #2a6fb5, #1f5a97);
  --kachel-gruen: linear-gradient(150deg, #3d7d63, #2f6650);
  --kachel-violett: linear-gradient(150deg, #7b52a8, #64408c);
  --kachel-rot: linear-gradient(150deg, #c0663f, #a4522f);
  --kachel-grau: linear-gradient(150deg, #5b6675, #46505d);

  /* ---- Form, Tiefe, Bewegung ---- */
  --radius: 18px;
  --radius-s: 12px;
  --radius-xs: 9px;

  --schatten: 0 1px 2px rgba(16, 33, 60, .04), 0 6px 18px -10px rgba(16, 33, 60, .16);
  /* 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-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: linear-gradient(135deg, #0a2a47 0%, #12507f 52%, #1c6ba8 100%);
  --d-hintergrundfarbe: #0b1017;
  --d-hintergrundbild:
    linear-gradient(rgba(11, 16, 23, .78), rgba(11, 16, 23, .78)),
    url("/assets/marke/hintergrund.webp");

  /* 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);

    --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);
    --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);

  --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);
  --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; }
*/