/* Kanonische Farb-Token (#108): Die dunkle Palette wird genau einmal gepflegt —
   hier. app.css, workspace.css, viewer.css und navigation-shell.css deklarieren
   keine eigenen Paletten-Hexwerte mehr, und von den gewachsenen Präfix-Namen
   (--ws-*, --viewer-*, --global-nav-*) steht keiner mehr: --ws-* und
   --viewer-* fielen am 2026-09-13 (Welle 2 gelandet, null Leser in
   public/*.css), die fünf --global-nav-*-Farben am 2026-09-20 (#397, Gruppe
   K: ihr letzter Leser war schon vor #234 gefallen), und ColorTokenConsistencyTest
   hält es so — wer einen zurückholt, baut eine zweite Antwort auf dieselbe
   Frage. Aliasse gibt es seither genau drei, alle mit Rolle (`--info`,
   `--link-hover`, `--focus-ring`; die Liste steht im Test), keine Kurzform
   und keinen Namen „für den Bestand". Diese Datei muss auf jeder Seite als
   erstes Stylesheet geladen werden — nicht jede Seite lädt app.css.

   Doppelung: `:root` steht in dieser Datei zweimal — die kanonische Palette
   hier, darunter die Maße (Abstand, Form, Ebenen, Bewegung, Schrift); die
   Alias-Blöcke für Projektbereich, Viewer und Navigation standen bis zum
   2026-09-13 beziehungsweise 2026-09-20 dazwischen.
   Das ist der eine Fall, in dem die Kapitel wichtiger sind als die
   Regel: Wer ein Maß sucht, sucht es bei seinesgleichen, und ein einziger
   Block mit beiden Kapiteln hintereinander wäre genau die Wand, gegen die
   #108 angetreten ist. Ungefährlich ist es, weil die beiden Blöcke disjunkte
   Namen setzen — kein späterer überschreibt einen früheren. Wer einen Namen
   ergänzt, prüft das mit `grep -c "--name:" color-tokens.css` (#160) — und
   erwartet 2 für die achtzehn gespiegelten Namen, seit unter den Blöcken
   das helle Thema als `:root[data-theme="light"]` steht (2026-09-13): der
   eine Block, der dieselben Namen bewusst noch einmal setzt.

   Die Apple-App liest diese Datei nicht selbst: `node ios/tools/palette.mjs`
   erzeugt daraus `ios/Sources/MountingMedia/Palette.swift`. Wer hier eine
   Farbe ändert, erzeugt danach neu — sonst fällt `ios/tools/palette.test.mjs`
   in CI (2026-09-29). */
:root {
    color-scheme: dark;

    /* Die Palette steht in OKLCH. Dort liegen Helligkeit, Buntheit und Farbton
       getrennt nebeneinander: „zehn Prozent heller" heißt für Blau dann
       dasselbe wie für Grün, und ein helles Thema lässt sich später aus
       denselben Namen ableiten, statt achtzehn Werte neu zu erfinden. Der
       Hexwert dahinter ist die Brücke zu Werkzeugen ohne OKLCH — Kommentar,
       nicht zweite Wahrheit. Umgerechnet wird sRGB → linear → LMS → OKLab →
       LCH nach CSS Color 4. */

    /* Flächen. `--window` ist der Grund eines Fensters auf das Material und
       die eine Sprosse unter `--canvas` — ein Bildschirm, der nichts zeigt,
       ist dunkler als der Raum. Gegen `--canvas` trägt er nur 1,04:1, deshalb
       bekommt ein leeres Fenster seinen Innenring `--border`. Im hellen Thema
       wird er als einziger Wert nicht gespiegelt: Ein Bildschirm ist auch im
       hellen Raum dunkel. */
    --window: oklch(0.115 0.014 262.5); /* #03050a */
    /* Die Kachel mit Initialen: der Leerzustand eines Arbeitsbereichs ohne
       Titelbild und ohne Standbild (2026-09-11). Creme, weil sie ein Bild
       vertritt und kein Zustand ist — deshalb wird sie wie `--window` im
       hellen Thema nicht gespiegelt: Ein Bild wechselt nicht mit dem Thema.
       `--on-cover` trägt 15,93:1 darauf; `--text-subtle` nur 2,88 — auf der
       Kachel steht deshalb nie gedämpfter Text. Es ist derselbe Wert wie
       `--on-brand` und trotzdem ein eigener Name: Schrift auf der Kachel und
       Schrift auf der Marke sind zwei Aufgaben, und die zweite darf sich
       ändern, ohne die erste mitzunehmen. */
    --cover: oklch(0.93 0.03 85); /* #f1e7d2 */
    --on-cover: oklch(0.154 0.023 262.5); /* #070c16 */
    --canvas: oklch(0.154 0.023 262.5); /* #070c16 */
    --sidebar: oklch(0.179 0.031 263.3); /* #0a111f */
    --surface-1: oklch(0.208 0.033 260.3); /* #0f1827 */
    --surface-2: oklch(0.238 0.039 258.3); /* #131f31 */
    --surface-recessed: oklch(0.182 0.031 261.1); /* #0a1220 */
    --surface-hover: oklch(0.270 0.055 261.4); /* #172641 */
    --surface-selected: oklch(0.316 0.074 259.9); /* #1a3157 */

    /* Linien */
    --border: oklch(0.320 0.048 259.5); /* #24334b */
    --border-strong: oklch(0.394 0.056 257.6); /* #334764 */

    /* Text. --text-subtle war auseinandergelaufen (#108): app.css sagte
       #7a89a3, workspace.css/viewer.css #71809a. Es gewinnt der hellere
       app.css-Wert — mehr Kontrast auf denselben dunklen Flächen, und nichts
       im Repo deutet darauf hin, dass die Viewer-Seiten absichtlich dunkler
       gedämpft waren. */
    --text: oklch(0.966 0.016 262.8); /* #eef4ff */
    --text-muted: oklch(0.712 0.039 259.8); /* #94a3bb */
    --text-subtle: oklch(0.627 0.043 261.4); /* #7a89a3 */

    /* Akzente und Status */
    --brand: oklch(0.646 0.192 255.7); /* #2b8cff */
    --brand-hover: oklch(0.70 0.155 255.7); /* #58a0fc */
    --brand-soft: oklch(0.30 0.09 255.7); /* #072d5a */
    --success: oklch(0.784 0.140 161.0); /* #55d49b */
    --warning: oklch(0.785 0.123 75.0); /* #e7ad57 */
    --danger-color: oklch(0.691 0.163 17.3); /* #ef6b76 */

    /* Genau zwei Blau, und jedes hat seine Aufgabe. `--brand` ist die
       Fläche: Primärknopf, Auswahlrand, Wortmarke. `--brand-hover` ist die
       Schrift auf dunklem Grund: Verweis, Hinweis, Fokusring — `--brand` als
       Text trägt auf `--surface-selected` nur 3,89:1, `--brand-hover` dort
       4,84:1. Vorher waren es drei Blau, von denen sich zwei um vier Prozent
       Helligkeit unterschieden: der gewöhnliche Verweis las `--brand-hover`,
       der Pfeil-Verweis `.shape-link` dagegen ein eigenes `--info`. Zwei
       fast gleiche Blautöne sind schlechter als zwei verschiedene — niemand
       hält sie für eine Aussage, alle halten sie für einen Fehler. Deshalb
       ist `--info` jetzt derselbe Ton und kein vierter.

       Umgekehrt gilt: Schrift auf `--brand` ist `--on-brand`, nie weiß.
       Weiß auf #2b8cff trägt 3,33:1 und fällt durch; das dunkle #070c16
       darauf trägt 5,87:1. */
    --info: var(--brand-hover);
    --link: var(--brand-hover);
    --link-hover: var(--brand);


    /* Die Breite des Inhalts, einmal. Es gab zwei Seitenschalen mit zwei
       Maximalbreiten (`.shape-page` 1360px, `.settings-page` 1120px); beim
       Wechsel zwischen zwei Seiten sprang der Inhalt um gut hundert Pixel,
       obwohl die Topleiste stehen blieb. Wer die Breite aendert, aendert sie
       hier — nicht in einem der beiden Blaetter. */
    --content-max: 1360px;
}

/* Maße, Form, Ebenen, Bewegung und Schrift — das Fundament neben der Farbe. */
/* Doppelung: ein zweiter Block (der fünfte, bis die Alias-Blöcke am
   2026-09-13 und 2026-09-20 fielen) statt einer eigenen Datei. Eine eigene Datei
   kostete dreierlei, was dieser Block nicht kostet: einen zweiten Eintrag in
   ColorTokenConsistencyTest::THEMED_STYLESHEETS, rund vierzig weitere
   <link>-Zeilen in Blade-Dateien ohne gemeinsame Schale, und eine weitere
   Zeile in der Erlaubnisliste des Reverse Proxy (docs/Zugriff/Aussengrenze.md).
   Diese Datei wird ohnehin auf jeder Seite als erstes geladen — genau das
   braucht ein Token. Wie die Palette darüber setzt er ausschließlich
   eigene Namen; kein späterer überschreibt einen früheren. */
:root {
    /* Abstand. Acht Stufen decken 332 der rund 430 gemessenen Abstände; was
       dazwischen lag, war eine Handentscheidung, keine Absicht. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;

    /* Form. Drei Radien nach Rolle statt einunddreißig nach Gefühl: das
       Bedienelement, die Fläche, das Schwebende. */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --radius-round: 50%;

    /* Schatten. Drei Höhen. `--shadow-float` war bis zum 2026-09-20 ein
       vierter Name für die dritte, „weil ihn der Bestand liest" — acht Leser,
       die jetzt `--shadow-3` lesen (#397, Gruppe K). */
    --shadow-1: 0 1px 2px rgb(0 0 0 / .3);
    --shadow-2: 0 8px 24px rgb(0 0 0 / .35);
    --shadow-3: 0 16px 40px rgb(0 0 0 / .35);

    /* Ebenen. Eine Leiter mit Lücken, damit Zwischenstufen nachrücken können,
       ohne dass die ganze Reihe neu durchgezählt wird. Kein --z-dialog: ein
       <dialog> aus showModal() liegt im Top Layer und damit ohnehin über
       allem — eine Zahl dafür wäre eine Behauptung ohne Wirkung. */
    --z-sticky: 30;
    --z-menu: 40;
    --z-backdrop: 50;
    --z-drawer: 60;
    --z-menu-top: 80;
    --z-popover: 100;
    /* 130 hieß bis zum 2026-09-24 `--z-toast` und wurde von keinem Blatt
       gelesen: Die Meldungen liegen auf `--z-popover` (100), auf 130 liegt
       allein der rote Rahmen um ungespeicherte Änderungen. Der Name folgt
       jetzt seinem Leser. Die Desktop-App führt ihr eigenes `--z-toast`
       (client/src/tokens.css) — dort liest es ihre Meldung. Dazwischen stehen
       110 (Speicherleiste) und 120 (Ladeanzeige) als kommentierte Zahlen, wie
       die 90: Eine Sprosse je Einzelfall wäre eine Entscheidung über die ganze
       Reihe, nicht über ein Element (ENTSCHEIDUNGEN 2026-09-24). */
    --z-alert-frame: 130;

    /* Bewegung. Nur die drei Werte, die tatsächlich gelesen werden; sie
       standen bis hierher im Kopf von interaction-feedback.css und gehören
       zu den übrigen Maßen. `--motion-pop` war ein vierter Name für die
       Kurve, den niemand las (2026-09-20, #397, Gruppe K). */
    --motion-fast: 140ms;
    --motion-menu: 180ms;
    --motion-enter: cubic-bezier(0, 0, .2, 1);

    /* Maße der Bedienelemente. Am groben Zeiger (Finger) gilt die größere
       Höhe — 44px ist die Zielgröße, die WCAG 2.2 verlangt. Zwei Stufen und
       nichts dazwischen (2026-09-20, #397): SpacingTokenConsistencyTest
       lässt in keinem Blatt eine `height`/`min-height` von 33 bis 44 px als
       Zahl durch — bis dahin standen 36 und 44 in 34 Deklarationen selbst,
       daneben 34, 38, 40 und 42 an Knopf, Reiter, Suchfeld und Dialogfeld.
       Was im Band liegt und keine Bedienhöhe ist (die Tabellenzelle mit
       ihren 42), steht dort namentlich mit Grund. */
    --control-h: 36px;
    /* Die beiden kleinen Maße darunter (2026-09-24, #397 Gruppe K, Daniels
       Wahl): 30 ist der Knopf ohne Wort in einer dichten Zeile (Symbolknopf,
       Kommentar- und Transkriptwerkzeuge, Papierkorb-Spalte), 32 der Knopf
       in einer Leiste (Glocke, Auftragsanzeige, Playbar, Dateiaktion). Sie
       standen in 36 Deklarationen und drei Rasterspalten als Zahl. Als Token
       ändert sich kein Pixel, aber eine 29 oder 31 fällt jetzt dem Wächter
       auf (SpacingTokenConsistencyTest). Ob sie am Finger auf 44 wachsen,
       ist eine eigene, offene Frage — heute tun es nur Playbar und Glocke. */
    --control-h-icon: 30px;
    --control-h-bar: 32px;
    --control-h-touch: 44px;
    /* Die Breite von `main` samt Rand — app.css und admin-layout.css lesen
       sie; `--content-max` oben ist der Inhalt darin. Beide Zahlen stehen
       nur hier (SpacingTokenConsistencyTest, 2026-09-20, #397). */
    --shell-max: 1600px;

    /* Das Fenster auf das Material: drei Breiten nach Rolle, ein Verhältnis.
       16:9 ist das Verhältnis des Fensters, nicht des Materials — Hochkant
       steht mit Balken darin, wie auf jedem Monitor. */
    --frame-w: 96px; /* Fenster in einer Zeile: Arbeitsbereich, Medium */
    --frame-w-s: 56px; /* Fenster in einer Ereigniszeile; Breite des Schlitzes */
    --frame-w-card: 168px; /* Mindestbreite einer Kachel im Streifen */
    --frame-ratio: 16 / 9; /* Seitenverhältnis jedes Fensters */

    /* Schrift. Sieben Größen und drei Gewichte; die Schriftfamilien kommen
       hier an, damit kein Blatt seinen eigenen Stapel führt. */
    --font-sans: "Inter Variable", system-ui, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 13px;
    --font-base: 14px;
    --font-lg: 17px;
    --font-xl: 24px;
    --font-2xl: 32px; /* Display: `h1` der Topleiste, `.stat strong`; Inter `opsz` endet bei 32 */
    /* Die achte Größe gehört nicht ins Panel (2026-09-13, #357): Wer ohne
       Konto und Einweisung landet — Freigabe, Anlieferung, Stock, Urkunde,
       Passwortkarte, Fehlerseite —, liest Lesetext, Feld und Knopf in 16 px;
       Meta und Beschriftung bleiben dort bei --font-base als Boden. Bis hierher
       schrieben delivery.css und stock.css die 16 als Zahl, und share.css
       versprach die Regel, ohne sie einzulösen. */
    --font-outer: 16px;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    /* Drei Zeilenhöhen, keine vierte (2026-09-20, #397): `none` ist der
       Zeilenkasten gleich dem Schriftgrad — für ein einzelnes Zeichen im
       festen Kasten (Zähler-Pille, ✓ im Ring, × und + im Kreis, das
       Fragezeichen der Hilfe), das `place-items: center` mittig setzt und
       das mit jeder größeren Zeile aus der Mitte rutscht. Bis hierher
       stand die 1 zwölfmal als Zahl in den Blättern, daneben 1.3, 1.35,
       1.4, 1.5, 1.55, 1.65 und 16 bis 30 px — 35 Handentscheidungen für
       drei Stufen. TypographyTokenConsistencyTest lässt seither in keinem
       Blatt eine Zahl an `line-height` durch — außer `0`, das Text
       versteckt, wie bei `font-size`. */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-base: 1.45;

    /* Diese beiden gehören zur Farbe und stehen trotzdem hier, weil sie erst
       zusammen mit einem Maß eine Regel ergeben. Der Fokusring ist überall
       `--brand-hover` mit `outline-offset: 2px` — direkt auf `--brand`
       trägt er 1,25:1 und verschwände genau dort, wo er am nötigsten ist.
       `--on-brand` ist ein eigener Wert und kein Alias: Schrift auf der Marke
       bleibt dunkel, auch wenn später ein helles Thema dazukommt. */
    --focus-ring: var(--brand-hover);
    --on-brand: oklch(0.154 0.023 262.5); /* #070c16 */

    /* Die Abdunklung hinter Dialog, Konsole und Schublade — ein Wert, vier
       Leser (2026-09-13, #360). Vorher schrieb jedes Blatt seine eigene:
       `rgb(2 7 17 / .78)`, `rgba(2, 6, 14, .72)`, `rgb(4 8 16 / .72)`,
       `rgba(2, 7, 17, .64)` — vier Grautöne für dasselbe Ding, und keiner
       stand in der Palette. Aus `--window` gemischt, nicht aus `--canvas`:
       Der Vorhang bleibt wie der Bildschirm auch im hellen Thema dunkel, denn
       eine Seite tritt hinter einem Dialog zurück, sie wird nicht heller. */
    --backdrop: color-mix(in srgb, var(--window) 75%, transparent);
}

/* Das helle Thema — vorbereitet, nicht eingeschaltet (2026-09-13, #360).
   Kein Umschalter setzt `data-theme` heute; der Block ist da, damit einer
   möglich ist, ohne ein zweites Thema zu bauen: dieselben achtzehn Namen,
   andere Zahlen, derselbe Farbton je Name (255,7° für die drei Blau,
   258–263° für die Flächen, 161°/75°/17° für die drei Zustände). Möglich
   wurde er, als der letzte Farbwert außerhalb dieser Datei fort war — jeder
   davon bliebe hier dunkel stehen.

   Nicht gespiegelt, mit Absicht: `--window` und `--cover`/`--on-cover` (ein
   Bildschirm und ein Bild wechseln nicht mit dem Thema), `--on-brand` (die
   Schrift auf der Marke bleibt dunkel, die Marke bleibt dieselbe Fläche) und
   `--backdrop` (aus `--window` gemischt). `--brand` ist Fläche und bleibt
   der Wert des App-Icons; `--brand-hover` ist Schrift und muss auf hellem
   Grund dunkler sein (5,65:1 auf `--canvas`; auf `--surface-selected` 4,497 — gerundet 4,50, aber unter der Schwelle).
   Genau dort liegt die eine bekannte Schwäche: Der Primärknopf unter der Maus
   (`.primary:hover`, `--brand-hover` mit `--on-brand`) trägt im hellen Thema
   nur 3,23:1 — vor einem Umschalter braucht er eine eigene Hover-Stufe aus
   `--brand`. Die Leiter liegt gespiegelt: Was auf dem Grund liegt, ist eine
   Stufe *dunkler* als er (`--surface-1` ist das Hellste), `--surface-recessed`
   liegt auf Grundhöhe. Die Kontrasttabelle steht in
   docs/Oberflaeche/Farben-und-Thema.md; `ColorTokenConsistencyTest` verlangt
   hier genau die achtzehn Namen und keinen der ausgenommenen. */
/* Doppelung: dieselben Namen wie im ersten Block, mit Absicht — dieser Block
   überschreibt sie, wenn `data-theme="light"` am Wurzelelement steht, und
   sonst nie. Es ist die eine Doppelung, für die die Datei angelegt wurde
   („Ein späterer Block :root[data-theme=light] überschreibt die 18 Werte,
   sonst nichts"). */
:root[data-theme="light"] {
    color-scheme: light;

    /* Flächen. Die Leiter läuft nach unten: Grund, darauf die Fläche als das
       Hellste, darunter Stufe um Stufe das, was unter der Maus oder gewählt
       ist. Vertieft liegt auf Grundhöhe — heller als die Fläche geht nicht. */
    --canvas: oklch(0.975 0.005 262.5); /* #f5f7fa */
    --sidebar: oklch(0.955 0.008 263.3); /* #edf0f6 */
    --surface-1: oklch(0.995 0.002 260.3); /* #fdfdff */
    --surface-2: oklch(0.965 0.008 258.3); /* #f0f4f9 */
    --surface-recessed: oklch(0.975 0.008 261.1); /* #f4f7fc */
    --surface-hover: oklch(0.935 0.020 261.4); /* #e2eaf7 */
    --surface-selected: oklch(0.90 0.040 259.9); /* #cfdff9 */

    /* Linien */
    --border: oklch(0.88 0.015 259.5); /* #d2d8e2 */
    --border-strong: oklch(0.80 0.025 257.6); /* #b4bfce */

    /* Text. `--text-subtle` trägt 4,93:1 auf `--canvas` und 5,21 auf der
       Fläche — und wie im dunklen Thema nicht auf `--surface-hover` (4,37)
       oder `--surface-selected` (3,92). */
    --text: oklch(0.20 0.025 262.8); /* #101621 */
    --text-muted: oklch(0.45 0.035 259.8); /* #4a5669 */
    --text-subtle: oklch(0.53 0.035 261.4); /* #616c81 */

    /* Akzente und Status. `--brand` bleibt; die Schrift-Blau und die drei
       Zustände werden dunkler, damit sie als Text auf Weiß 4,5:1 tragen
       (5,65 / 5,05 / 5,24 / 4,99 auf `--canvas`). */
    --brand: oklch(0.646 0.192 255.7); /* #2b8cff */
    --brand-hover: oklch(0.50 0.19 255.7); /* #005ecb */
    --brand-soft: oklch(0.92 0.045 255.7); /* #d1e7ff */
    --success: oklch(0.50 0.14 161.0); /* #007a48 */
    --warning: oklch(0.52 0.13 75.0); /* #935b00 */
    --danger-color: oklch(0.55 0.19 17.3); /* #c82d47 */
}

/* Inter Variable, aus dem Haus (2026-09-10). Die Schrift steht hier, weil
   dieses Blatt das einzige ist, das jede Seite als erstes lädt — an jedem
   anderen Ort fehlte sie genau auf den Seiten, die ihr Blatt nicht laden.
   Ein Variable Font ersetzt sechs Einzelschnitte: 100 900 deckt jedes
   Gewicht, das die Skala kennt. `swap` zeigt sofort den Systemstapel und
   tauscht nach; ein blockierender Ladevorgang wäre im LAN unsichtbar und
   über die Freigabe eine leere Seite. Ein Kursivschnitt kommt bewusst nicht
   mit — die drei Fundstellen synthetisiert der Browser. */
@font-face {
    font-family: "Inter Variable";
    src: url("/fonts/inter-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

/* Papier (2026-09-11, Issue #357). Gedruckt ist die Lizenzurkunde ein
   Dokument, und ein Dokument steht schwarz auf weiß: Toner für einen
   dunklen Grund ist Verschwendung, und ein weißer Text auf einem Grund, den
   der Drucker weglässt, ist unsichtbar. Die Papierfarben stehen hier — und
   nur hier — als Hexwerte, weil dieses Blatt das einzige ist, in dem eine
   Farbe überhaupt steht (`ColorTokenConsistencyTest`); jedes andere Blatt
   druckt über die Token und bleibt hexfrei (`CertificatePrintTest`). Es ist
   zugleich der erste Schritt zu einem hellen Thema: Wer die Palette hier
   kippt, hat die Seite gekippt. */
@media print {
    :root {
        /* Das Schema zuerst: Der Drucker lässt Hintergründe weg, und die
           Grundfläche der Seite kommt dann vom Schema — mit `dark` wäre
           sie schwarz, wo kein Blatt etwas malt. */
        color-scheme: light;
        --canvas: #ffffff;
        --surface-1: #ffffff;
        --surface-2: #ffffff;
        --window: #ffffff;
        --text: #000000;
        --text-muted: #444444;
        --text-subtle: #444444;
        --border: #999999;
        --border-strong: #999999;
        --link: #000000;
    }
}