/* ══════════════════════════════════════════════════════════════════════════
   MARKE — die Farbwelt des Dashboards, hell und dunkel.

   Warum eine eigene Datei und nicht ein Eingriff in `modern.css`: Dort steht
   die Bauteillehre — wie eine Karte aufgebaut ist, wie eine Reihe sitzt, wie
   sich das Ganze auf dem Telefon verhält. Hier steht nur, WELCHE Farben,
   welche Schrift und welches Licht. Beides getrennt zu halten heißt, dass
   ein Themenwechsel keine Zeile Aufbau anfasst — und dass diese Datei sich
   entfernen lässt, wenn die Farbwelt wieder eine andere sein soll.

   Zwei Themen, ein Tokensatz:

     HELL   — warmer Grund statt Weiß, weiße Karten darauf, die wichtigste
              Zahl auf einer satten Farbfläche. Für den Tag am Fenster.
     DUNKEL — Nachtblau mit Licht dahinter, Zahlen mit Verlauf. Für den
              Abend im Betrieb, wo ein weißer Bildschirm blendet.

   Das dunkle ist KEIN umgedrehtes helles: Jeder Wert ist einzeln gesetzt,
   damit Kontrast und Akzent in beiden tragen. Genau daran erkennt man ein
   Thema, das gebaut wurde, von einem, das errechnet wurde.

   Die drei Selektoren sind dieselben wie in `app.css` und `modern.css`, und
   sie müssen es sein:

     :root                                        → hell (Grundfall)
     @media dark + :root:not([data-theme="hell"]) → dunkel, wenn das System
                                                    dunkel steht und niemand
                                                    ausdrücklich hell wählte
     :root[data-theme="dunkel"]                   → dunkel, ausdrücklich

   Spezifität ist hier kein Schönheitsfehler, sondern die ganze Mechanik:
   `:root:not([data-theme="hell"])` ist (0,2,0) und schlägt jedes schlichte
   `:root` (0,1,0), egal wie spät es geladen wird. Wer hier einen Wert nur
   auf `:root` setzt und im dunklen Thema sucht, warum nichts passiert, hat
   genau diesen Punkt übersehen — im August 2026 ist das schon einmal
   passiert.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Schrift ──────────────────────────────────────────────────────────────
   Zwei Schnitte, selbst ausgeliefert: `Sora` trägt die Zahlen und
   Überschriften, `Manrope` den Fließtext. Beide unter der SIL Open Font
   License, zusammen 49 kB.

   SELBST ausgeliefert, nicht von Google geholt — das ist keine Kleinigkeit:
   Ein `<link>` auf fonts.googleapis.com wäre eine Verbindung zu einem
   fremden Dienst bei jedem Aufruf, und das Dashboard soll autark laufen
   (`werkzeuge/autark.sh` prüft genau das). Nebeneffekt: Die Oberfläche sieht
   auf Windows aus wie auf dem iPad, statt dort in Arial zu landen.

   `font-display: swap` und nicht `block`: Lieber kurz die Systemschrift als
   ein leerer Bildschirm — die Zahlen sollen früh da sein. */
@font-face {
  font-family: "Sora";
  src: url("../schriften/sora.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../schriften/manrope.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  --schrift: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: "Sora", var(--schrift);
}

body, input, select, textarea, button, .btn, .btn2, .btn-ghost {
  font-family: var(--schrift);
}
/* Überschriften und große Zahlen tragen die Display-Schrift. Sie ist enger
   und hat mehr Charakter — in Fließtext wäre sie anstrengend, in einer
   Kennzahl ist genau das der Punkt. */
h1, h2, h3, .brand, .kpiw, .kpi-wert, .awgross, .grosszahl, .heldzahl {
  font-family: var(--schrift-zahl);
  letter-spacing: -.025em;
}

/* ══ FARBWELT: STAHL ════════════════════════════════════════════════════
   Gedecktes Blaugrau. Am 07.09.2026 standen zwei Welten zur Wahl — Stahl und
   Tiefsee (Marineblau mit Türkis). Die Entscheidung fiel auf Stahl, und die
   Wahl ist damit entfallen: Ein Umschalter mit einer Möglichkeit ist
   schlimmer als keiner.

   Die EBENE bleibt trotzdem stehen, und das ist kein Rest: Die Themenblöcke
   weiter unten enthalten dadurch KEINE Farbe, nur `var(--w-…)`. Ein anderer
   Ton — sei es eine Hausfarbe oder eine zweite Welt — ist damit ein Block
   und keine Suche durch dreißig Regeln.

   `--w-h-*` sind die hellen Werte, `--w-d-*` die dunklen. Beide gehören zur
   WELT, nicht zum Thema: Ein Blau, das im Hellen trägt, ist im Dunkeln zu
   dunkel — der Grund, warum ein dunkles Thema nie ein umgedrehtes helles
   sein kann. */
:root {
  --w-h-grund: #edf0f4; --w-h-card2: #e6eaf0; --w-h-hover: #f2f5f8;
  --w-h-akz: #2d6394; --w-h-akz-hell: #3f7fb8; --w-h-akz-leise: rgba(45,99,148,.10);
  --w-h-held: linear-gradient(150deg, #24537f 0%, #2d6394 52%, #3f86b8 100%);
  --w-h-k1: #ffffff; --w-h-k2: #bfe3f5;
  --w-h-licht:
    radial-gradient(920px 720px at 96% -12%, rgba(45,99,148,.28), transparent 60%),
    radial-gradient(760px 620px at -8% 8%, rgba(63,127,184,.16), transparent 58%),
    radial-gradient(880px 700px at 78% 104%, rgba(100,130,160,.18), transparent 62%);

  --w-d-grund: #0a0f16; --w-d-flaeche: #131a24; --w-d-card2: #1a2230; --w-d-hover: #1a2230;
  --w-d-akz: #5b9dd9; --w-d-akz-hell: #82bce9; --w-d-akz-leise: rgba(91,157,217,.16);
  --w-d-k1: #5b9dd9; --w-d-k2: #7fd4e8;
  --w-d-licht:
    radial-gradient(1050px 780px at 10% -14%, rgba(91,157,217,.42), transparent 62%),
    radial-gradient(880px 680px at 92% 0%, rgba(127,212,232,.26), transparent 60%),
    radial-gradient(820px 640px at 58% 112%, rgba(148,163,184,.16), transparent 62%);

  --w-marke: linear-gradient(140deg, #2d6394, #3f86b8);
  --w-marke-dunkel: linear-gradient(140deg, #2d6394, #5b9dd9);
}

/* ══ HELL ═══════════════════════════════════════════════════════════════ */
:root {
  --n-grund: var(--w-h-grund);
  --n-flaeche: #ffffff;
  /* Neutrale und Signalfarben gehören NICHT zur Farbwelt: Ein Fehlerrot muss
     in jeder Welt dasselbe Rot sein, sonst lernt es niemand. */
  --n-strich: rgba(20,28,40,.08);
  --n-strich-stark: rgba(20,28,40,.15);
  --n-text: #121820;
  --n-leise: #566173;
  --n-sehrleise: #8b95a5;
  --n-akzent: var(--w-h-akz);
  --n-akzent-hell: var(--w-h-akz-hell);
  --n-akzent-leise: var(--w-h-akz-leise);
  --n-gut: #0b7a4b;
  --n-gut-leise: rgba(11,122,75,.10);
  --n-ab: #d92d3f;
  --n-ab-leise: rgba(217,45,63,.09);

  --bg: var(--n-grund);
  --card: var(--n-flaeche);
  --card2: var(--w-h-card2);
  --fg: var(--n-text);
  --muted: var(--n-leise);
  --border: var(--n-strich);
  --accent: var(--n-akzent);
  --accent2: var(--n-akzent-hell);
  --accent-fg: #ffffff;
  --hover: var(--w-h-hover);
  --ok: var(--n-gut);
  --danger: var(--n-ab);
  --marke: var(--n-akzent);
  --messing: var(--n-akzent);
  --grad-card: var(--n-flaeche);
  --grad-raise: var(--n-flaeche);
  --grad-chrome: var(--n-flaeche);
  --grad-accent: var(--w-h-held);

  /* Der Grund ist keine Farbe, sondern eine Fläche mit drei sehr weiten
     Lichtern. Blass genug, dass darüber jede Tabelle lesbar bleibt — das ist
     die Grenze, an der Atmosphäre in Ärger umschlägt. Welche Lichter das
     sind, sagt die Farbwelt. */
  --licht: var(--w-h-licht);
  --held: var(--w-h-held);
  --held-text: #ffffff;
  --held-leise: rgba(255,255,255,.74);
  --kurve1: var(--w-h-k1);
  --kurve2: var(--w-h-k2);
  --kartenkante: inset 0 1px 0 rgba(255,255,255,.9);

  --s1: 0 1px 2px rgba(25,22,34,.05);
  --s2: 0 10px 30px -10px rgba(25,22,34,.14);
  --s3: 0 26px 60px -18px rgba(25,22,34,.22);
}

/* ══ DUNKEL ═════════════════════════════════════════════════════════════
   Einmal für „System steht dunkel", einmal für „ausdrücklich gewählt".
   Zwei Blöcke mit demselben Inhalt sind hier kein Versehen: CSS kennt kein
   ODER über Selektorlisten hinweg, das eine `@media` mit einschließt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --n-grund: var(--w-d-grund);
    --n-flaeche: var(--w-d-flaeche);
    --n-strich: rgba(255,255,255,.085);
    --n-strich-stark: rgba(255,255,255,.17);
    --n-text: #eaf0f7;
    --n-leise: #8d9aad;
    --n-sehrleise: #6b7889;
    --n-akzent: var(--w-d-akz);
    --n-akzent-hell: var(--w-d-akz-hell);
    --n-akzent-leise: var(--w-d-akz-leise);
    --n-gut: #4ade9b;
    --n-gut-leise: rgba(74,222,155,.13);
    --n-ab: #ff6b81;
    --n-ab-leise: rgba(255,107,129,.13);

    --bg: var(--n-grund);
    --card: var(--n-flaeche);
    --card2: var(--w-d-card2);
    --fg: var(--n-text);
    --muted: var(--n-leise);
    --border: var(--n-strich);
    --accent: var(--n-akzent);
    --accent2: var(--n-akzent-hell);
    --accent-fg: #ffffff;
    --hover: var(--w-d-hover);
    --ok: var(--n-gut);
    --danger: var(--n-ab);
    --marke: var(--n-akzent);
    --messing: var(--n-akzent);
    /* Karten sind hier kein Farbwert, sondern ein sehr flacher Verlauf mit
       Lichtkante oben. Genau das lässt sie erhoben wirken, ohne dass ein
       Schatten fällt — auf dunklem Grund fällt keiner auf. */
    --grad-card: linear-gradient(168deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    --grad-raise: linear-gradient(168deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
    --grad-chrome: transparent;
    --grad-accent: linear-gradient(140deg, var(--w-d-akz), var(--w-d-akz-hell));

    --licht: var(--w-d-licht);
    --held: linear-gradient(168deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
    --held-text: #ffffff;
    --held-leise: #8b95ae;
    --kurve1: var(--w-d-k1);
    --kurve2: var(--w-d-k2);
    --kartenkante: inset 0 1px 0 rgba(255,255,255,.13);

    --s1: 0 1px 2px rgba(2,4,10,.5);
    --s2: 0 14px 40px -12px rgba(2,4,10,.6);
    --s3: 0 26px 70px -18px rgba(2,4,10,.75);
  }
}
:root[data-theme="dunkel"] {
  --n-grund: var(--w-d-grund);
  --n-flaeche: var(--w-d-flaeche);
  --n-strich: rgba(255,255,255,.085);
  --n-strich-stark: rgba(255,255,255,.17);
  --n-text: #eaf0f7;
  --n-leise: #8d9aad;
  --n-sehrleise: #6b7889;
  --n-akzent: var(--w-d-akz);
  --n-akzent-hell: var(--w-d-akz-hell);
  --n-akzent-leise: var(--w-d-akz-leise);
  --n-gut: #4ade9b;
  --n-gut-leise: rgba(74,222,155,.13);
  --n-ab: #ff6b81;
  --n-ab-leise: rgba(255,107,129,.13);

  --bg: var(--n-grund);
  --card: var(--n-flaeche);
  --card2: var(--w-d-card2);
  --fg: var(--n-text);
  --muted: var(--n-leise);
  --border: var(--n-strich);
  --accent: var(--n-akzent);
  --accent2: var(--n-akzent-hell);
  --accent-fg: #ffffff;
  --hover: var(--w-d-hover);
  --ok: var(--n-gut);
  --danger: var(--n-ab);
  --marke: var(--n-akzent);
  --messing: var(--n-akzent);
  --grad-card: linear-gradient(168deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  --grad-raise: linear-gradient(168deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  --grad-chrome: transparent;
  --grad-accent: linear-gradient(140deg, var(--w-d-akz), var(--w-d-akz-hell));

  --licht: var(--w-d-licht);
  --held: linear-gradient(168deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
  --held-text: #ffffff;
  --held-leise: #8b95ae;
  --kurve1: var(--w-d-k1);
  --kurve2: var(--w-d-k2);
  --kartenkante: inset 0 1px 0 rgba(255,255,255,.13);

  --s1: 0 1px 2px rgba(2,4,10,.5);
  --s2: 0 14px 40px -12px rgba(2,4,10,.6);
  --s3: 0 26px 70px -18px rgba(2,4,10,.75);
}

/* ── Das Licht ────────────────────────────────────────────────────────────
   Auf dem `body`, nicht in einer eigenen Ebene: Eine zusätzliche Ebene mit
   `position:fixed` wäre ein weiterer Bezugsrahmen, und genau daran hing im
   August die Fußleiste des Telefons oben fest, weil `backdrop-filter` auf
   `aside` denselben Effekt hatte.

   `#app` muss dafür durchsichtig werden: `modern.css` legt dort eine volle
   Fläche in `--n-grund` darüber, und die verdeckt jedes Licht. */
body {
  background-color: var(--n-grund);
  background-image: var(--licht);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--n-text);
}
#app, main { background: transparent; }

/* Karten fangen das Licht an der oberen Kante. Ein Haarstrich aus Licht
   statt eines gezeichneten Rahmens — das ist der Unterschied zwischen
   „erhoben" und „umrandet". */
.card, .kachel, .panel, .box, .modal, .zgz, .tile {
  box-shadow: var(--s2), var(--kartenkante);
}

/* ── Bewegung ─────────────────────────────────────────────────────────────
   Der halbe Eindruck entsteht beim Ankommen. Die Karten treten versetzt ein,
   damit der Bildschirm sich aufbaut statt erscheint. Reines CSS, kostet
   nichts, und wer Bewegung abgeschaltet hat, bekommt keine. */
@keyframes ckvEin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
#content > * { animation: ckvEin .34s cubic-bezier(.2,.7,.3,1) both; }
#content > *:nth-child(2) { animation-delay: .04s; }
#content > *:nth-child(3) { animation-delay: .08s; }
#content > *:nth-child(4) { animation-delay: .12s; }
#content > *:nth-child(5) { animation-delay: .16s; }
#content > *:nth-child(n+6) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  #content > * { animation: none; }
}

/* ── Symbole ──────────────────────────────────────────────────────────────
   Die Strichzeichnungen aus `ikon()`. Sie folgen `currentColor`, also
   braucht keine einzige von ihnen eine eigene Farbregel: Im aktiven Reiter
   ist das Symbol in der Akzentfarbe, weil der Text es ist.

   `flex: none` ist wichtig — in einer Flexzeile mit langem Namen würde das
   SVG sonst zusammengedrückt, und ein gestauchtes Symbol sieht aus wie ein
   Fehler, nicht wie ein Symbol. */
.ikon { flex: none; display: block; }
.ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--n-sehrleise);
  /* Die Emoji brauchten eine Schriftgröße; die Zeichnungen bringen ihre
     Größe selbst mit. Der Rest der Regel bleibt, damit die Ausrichtung in
     der Leiste dieselbe ist wie vorher. */
  font-size: 0;
}
.navlink .ic, .nv .ic { color: inherit; opacity: .72; }
.navlink.active .ic, .nv.an .ic, .active .ic { opacity: 1; color: var(--n-akzent); }
.mi { display: inline-flex; align-items: center; justify-content: center; color: var(--n-akzent); }
.chip .ikon { display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* ── Das Zeichen der Anwendung ────────────────────────────────────────────
   Statt des Emoji ein Verlaufsquadrat in denselben Farben wie `marke.svg`
   auf dem Startbildschirm. Dadurch trägt die Anwendung im Fenster dasselbe
   Zeichen wie ihr Symbol auf dem Gerät — das ist der Grund, warum es hier
   kein zweites Motiv gibt. */
.brand .mark {
  display: inline-block; width: 24px; height: 24px; border-radius: 8px;
  background: var(--w-marke);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--n-akzent) 34%, transparent);
  vertical-align: -6px; margin-right: 4px; font-size: 0;
}
.brand {
  font-family: var(--schrift-zahl); font-weight: 650; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: 9px;
}
.brand .mark { vertical-align: baseline; margin-right: 0; }

/* ── Der Themenumschalter ─────────────────────────────────────────────────
   Drei Felder statt eines Schalters: Ein Schalter kennt zwei Zustände, hier
   gibt es drei — hell, dunkel und „wie das Gerät". Der dritte ist keine
   Zwischenstufe, sondern eine eigene Entscheidung, und die lässt sich mit
   einem Kipper nicht ausdrücken.

   Ohne Beschriftung: Die drei Zeichen (Sonne, Halbkreis, Mond) sind auf
   engem Raum lesbarer als drei Wörter, und die Leiste hat unten wenig
   Platz. Der Titel nennt jede Wahl im Klartext. */
.themawahl {
  display: flex; gap: 2px; padding: 3px; margin: 8px 0 6px;
  border-radius: 10px; background: var(--n-akzent-leise);
}
.themawahl button {
  flex: 1; height: 26px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; padding: 0; position: relative;
  color: var(--n-leise);
}
.themawahl button::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.6px solid currentColor;
}
/* Hell: voller Kreis. System: halb gefüllt. Dunkel: gefüllt mit Ausschnitt.
   Drei Zustände desselben Zeichens — das liest sich als Reihe, nicht als
   drei verschiedene Knöpfe. */
.themawahl [data-thema="system"]::before {
  background: linear-gradient(90deg, transparent 50%, currentColor 50%);
}
.themawahl [data-thema="dunkel"]::before { background: currentColor; }
.themawahl button.an {
  background: var(--n-flaeche); color: var(--n-akzent);
  box-shadow: var(--s1), var(--kartenkante);
}
.themawahl button:hover:not(.an) { color: var(--n-text); }

/* ── Die Seitenleiste ─────────────────────────────────────────────────────
   Gemessen statt geraten: Der Bereich um die Navigation stand auf
   (231,234,238) — ein bläuliches Grau, während der Grund daneben (239,234,225)
   warm war. Der Unterschied ist im Bild kaum zu sehen und im Quelltext gar
   nicht; auf dem Bildschirm sieht man einen Kasten, der dort nicht hingehört.

   Ursache: `app.css` legt einen Verlauf aus `--chrome`/`--chrome2` auf
   `aside` UND `#mainNav`. `modern.css` nimmt ihn nur dem `aside` wieder ab,
   und auch das erst ab 901 px. Der innere Kasten blieb übrig.

   Beide Merkmale werden hier trotzdem gesetzt: Wer sie irgendwo sonst noch
   benutzt, soll die neue Farbwelt bekommen und nicht die alte. */
:root { --chrome: transparent; --chrome2: transparent; }
aside, #mainNav { background: transparent !important; }

/* ── Die Hauptkennzahl ────────────────────────────────────────────────────
   Im hellen Thema ist sie eine satte Farbfläche — die einzige der Seite, und
   genau deshalb wirkt sie. Im dunklen wäre dasselbe Violett ein Scheinwerfer
   in einem dunklen Raum: Es zieht den Blick, aber es blendet, und die Zahl
   darauf verliert an Schärfe.

   Dort also umgekehrt: eine ruhige Glasfläche wie jede andere Karte, und die
   ZAHL trägt den Verlauf. Dasselbe Mittel, andere Richtung — hell trägt die
   Fläche, dunkel trägt die Schrift.

   `!important`, weil die Regel in `modern.css` es auch führt; ohne wäre der
   Kampf nicht zu gewinnen, und ein `!important` gegen ein `!important` ist
   hier kein Notnagel, sondern die einzige Sprache, die dort gesprochen wird. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .kpi.held {
    background: var(--grad-card) !important;
    box-shadow: var(--s2), var(--kartenkante) !important;
  }
  :root:not([data-theme="hell"]) .kpi.held .v {
    background: linear-gradient(96deg, #fff 20%, var(--w-d-akz-hell) 58%, var(--w-d-k2) 96%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important; -webkit-text-fill-color: transparent;
  }
  :root:not([data-theme="hell"]) .kpi.held .k,
  :root:not([data-theme="hell"]) .kpi.held .kfuss { color: var(--n-leise) !important; }
  :root:not([data-theme="hell"]) .kpi.held .kfuss.auf { color: var(--n-gut) !important; }
  :root:not([data-theme="hell"]) .kpi.held .kfuss.ab { color: var(--n-ab) !important; }
}
:root[data-theme="dunkel"] .kpi.held {
  background: var(--grad-card) !important;
  box-shadow: var(--s2), var(--kartenkante) !important;
}
:root[data-theme="dunkel"] .kpi.held .v {
  background: linear-gradient(96deg, #fff 20%, var(--w-d-akz-hell) 58%, var(--w-d-k2) 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
}
:root[data-theme="dunkel"] .kpi.held .k,
:root[data-theme="dunkel"] .kpi.held .kfuss { color: var(--n-leise) !important; }
:root[data-theme="dunkel"] .kpi.held .kfuss.auf { color: var(--n-gut) !important; }
:root[data-theme="dunkel"] .kpi.held .kfuss.ab { color: var(--n-ab) !important; }

/* ── Die große Umsatzkachel im Bento ──────────────────────────────────────
   Sie heißt `.awgross`, nicht `.kpi.held` — die beiden sehen gleich aus und
   stammen aus verschiedenen Ansichten. Am Bild aufgefallen: Die Regel für
   `.kpi.held` änderte im dunklen Thema nichts, weil die Kachel auf der
   Übersicht die andere Klasse trägt. Beide brauchen dieselbe Behandlung,
   sonst hängt es davon ab, wo man hinsieht.

   Im Dunkeln trägt die ZAHL den Verlauf, nicht die Fläche (Begründung beim
   Block darüber), und die Kurve leuchtet in den Farben der Bühne. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .awgross {
    background: var(--grad-card);
    box-shadow: var(--s2), var(--kartenkante);
  }
  :root:not([data-theme="hell"]) .awgrossw {
    background: linear-gradient(96deg, #fff 18%, var(--w-d-akz-hell) 56%, var(--w-d-k2) 96%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  :root:not([data-theme="hell"]) .awgross .awl,
  :root:not([data-theme="hell"]) .awunter { color: var(--n-leise); }
  :root:not([data-theme="hell"]) .awgross .awpille.auf {
    background: var(--n-gut-leise); color: var(--n-gut);
  }
  :root:not([data-theme="hell"]) .awgross .awpille.ab {
    background: var(--n-ab-leise); color: var(--n-ab);
  }
  :root:not([data-theme="hell"]) .awkurve .fl { fill: rgba(124,107,255,.22); }
  :root:not([data-theme="hell"]) .awkurve .ln {
    stroke: var(--n-akzent-hell);
    /* Das Leuchten macht `drop-shadow`, nicht `filter: blur` — geblurrt
       würde die Linie selbst weich, hier soll nur ein Schein darunter
       liegen. */
    filter: drop-shadow(0 0 6px rgba(124,107,255,.55));
  }
}
:root[data-theme="dunkel"] .awgross {
  background: var(--grad-card);
  box-shadow: var(--s2), var(--kartenkante);
}
:root[data-theme="dunkel"] .awgrossw {
  background: linear-gradient(96deg, #fff 18%, var(--w-d-akz-hell) 56%, var(--w-d-k2) 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
:root[data-theme="dunkel"] .awgross .awl,
:root[data-theme="dunkel"] .awunter { color: var(--n-leise); }
:root[data-theme="dunkel"] .awgross .awpille.auf {
  background: var(--n-gut-leise); color: var(--n-gut);
}
:root[data-theme="dunkel"] .awgross .awpille.ab {
  background: var(--n-ab-leise); color: var(--n-ab);
}
:root[data-theme="dunkel"] .awkurve .fl { fill: rgba(124,107,255,.22); }
:root[data-theme="dunkel"] .awkurve .ln {
  stroke: var(--n-akzent-hell);
  filter: drop-shadow(0 0 6px rgba(124,107,255,.55));
}

/* Im HELLEN Thema bleibt die Farbfläche — aber im Farbton der neuen Welt
   und mit weichem, weitem Schatten statt eines kurzen harten. */
.awgross {
  background: var(--grad-accent);
  box-shadow: 0 18px 44px -16px rgba(79,70,229,.45), inset 0 1px 0 rgba(255,255,255,.22);
}
.awgrossw { font-family: var(--schrift-zahl); }

/* ── Telefon und PWA ──────────────────────────────────────────────────────
   Am Bild aufgefallen: Die Kopfleiste stand auf `--n-flaeche` — im hellen
   Thema also weiß über warmem Grund. Das sah aus wie ein zweites Fenster,
   das über der Anwendung liegt, und genau diesen Eindruck sollte die neue
   Optik loswerden.

   Kopf und Fuß tragen deshalb den GRUND, nicht die Kartenfläche: Die Karten
   sind das Erhobene, die Leisten sind der Rahmen. Zusammen mit dem Licht auf
   dem `body` ergibt das eine durchgehende Fläche vom oberen bis zum unteren
   Rand.

   KEIN `backdrop-filter` auf `aside` — die Begründung steht in `modern.css`
   und hat einen Tag gekostet: Der Filter erzeugt einen Bezugsrahmen für
   `position: fixed`, und die Fußleiste `#mainNav` liegt im Markup INNERHALB
   des `aside`. Sie klebte danach oben am Bildschirm. */
@media (max-width: 900px) {
  aside { background: var(--n-grund) !important; }
  #mainNav {
    background: color-mix(in srgb, var(--n-grund) 94%, transparent) !important;
    border-top: 1px solid var(--n-strich) !important;
  }

  /* Der Umschalter sitzt oben neben „Abmelden". Auf dem Telefon braucht er
     Daumenmaß — aber nicht um jeden Preis: Mit 3 × 40 px daneben passten
     Name und Abmeldeknopf nicht mehr in die Zeile, die Kopfleiste wurde
     breiter als der Bildschirm, und damit ließ sich die GANZE Seite seitlich
     schieben. Im Bild sah man „Abmeld…" und rechts abgeschnittene Karten.

     32 px hoch und 34 breit ist die Grenze, an der beides gilt: sicher zu
     treffen und schmal genug. Damit es auch bei langen Namen so bleibt,
     darf der Name schrumpfen (`min-width: 0`) und die Zeile notfalls
     umbrechen — kürzen ist zulässig, überlaufen nicht. */
  .themawahl { margin: 0; padding: 2px; flex: none; }
  .themawahl button { height: 32px; min-width: 34px; }
  .userbox {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; min-width: 0; max-width: 100%;
  }
  .userbox #userName {
    flex: 1 1 60px; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  /* Der Abmeldeknopf darf sich verschmälern, statt die Zeile zu sprengen. */
  /*
   * Auf dem Telefon trägt die Marke nur ihr Zeichen.
   *
   * Am Gerät aufgefallen: Mit dem Umschalter daneben brauchte die Kopfzeile
   * zwei Zeilen — „CKV Dashboard" und die drei Felder oben, „Abmelden"
   * darunter. Beim Scrollen schob sich die obere Zeile unter die
   * Statusleiste, und der Umschalter klebte neben der Uhr.
   *
   * Der Name ist dort ohnehin die überflüssigste Angabe: Darunter steht in
   * 24 Pixeln, welche Ansicht offen ist, und wer die App vom Startbildschirm
   * öffnet, weiß, welche App er geöffnet hat. Das Zeichen bleibt und bleibt
   * tippbar — es führt zur Startseite.
   */
  .brand .bt { display: none; }

  /* Kompakter, damit Marke, Umschalter und Abmelden in EINE Zeile passen.
     Bricht die Zeile trotzdem um (sehr schmales Gerät), ist das in Ordnung —
     überlaufen darf sie nicht. */
  .userbox .logout {
    flex: 0 1 auto; min-width: 0;
    padding: 6px 11px; font-size: 12.5px;
  }
}

/* In der PWA reicht der Grund bis unter die Statusleiste — sonst steht dort
   ein Streifen in der Farbe des Browsers. `env(safe-area-inset-*)` regelt
   den Abstand des Inhalts, die FARBE dahinter muss der Grund selbst sein. */
@media (display-mode: standalone) {
  body { background-color: var(--n-grund); }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLANZ — Licht, Leuchten, Verläufe.

   Nachgereicht, weil der Vergleich mit dem Entwurf zwei Dinge zeigte, die
   beim Übertragen verlorengegangen waren: Das Licht im Hintergrund war so
   blass, dass man es für einen Druckfehler halten konnte, und die leuchtende
   Kurve gab es nur im dunklen Thema. Beides war aber genau das, was den
   Entwurf vom Werkzeug unterschied.
   ══════════════════════════════════════════════════════════════════════════ */

/* Das Licht kommt aus der Farbwelt (`--w-h-licht` / `--w-d-licht`) und steht
   deshalb nicht mehr hier. Die Regel, nach der es gebaut ist, gilt weiter:
   drei Kegel, alle an den RÄNDERN, keiner in der Mitte — dort stehen die
   Karten, und über einer Zahlenkolonne muss der Untergrund ruhig sein. */

/* ── Die Kurve leuchtet ───────────────────────────────────────────────────
   In BEIDEN Themen, nicht nur im dunklen — das war der Fehler beim ersten
   Übertragen. Im Hellen liegt sie auf der violetten Fläche, dort leuchtet
   Weiß nach Gold; im Dunkeln auf Glas, dort Violett nach Türkis.

   `drop-shadow` und nicht `blur`: Geblurrt würde die Linie selbst weich und
   verlöre ihre Schärfe. Ein Schatten in ihrer eigenen Farbe legt einen
   Schein darunter und lässt die Linie stehen. Zwei gestaffelte Schatten —
   ein enger, harter und ein weiter, weicher — weil genau das der Unterschied
   zwischen „glüht" und „ist verwischt" ist. */
.awkurve .fl { fill: url(#awkFl); }
.awkurve .ln {
  stroke: url(#awkLn); stroke-width: 2.6;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.85))
          drop-shadow(0 0 14px var(--kurve2));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .awkurve .ln {
    filter: drop-shadow(0 0 4px var(--kurve1)) drop-shadow(0 0 18px var(--kurve2));
  }
}
:root[data-theme="dunkel"] .awkurve .ln {
  filter: drop-shadow(0 0 4px var(--kurve1)) drop-shadow(0 0 18px var(--kurve2));
}

/* ── Balken folgen dem Thema ──────────────────────────────────────────────
   Sie standen auf festen Werten (#6366f1 → #4f46e5) und blieben deshalb im
   dunklen Thema in der Farbe des hellen. Jetzt aus den Merkmalen, und im
   Dunkeln mit einem Schein an der Oberkante — dort, wo der Balken endet und
   das Auge hinsieht. */
.awbal i.jetzt, .awsbal i.jetzt {
  background: linear-gradient(180deg, var(--n-akzent-hell), var(--n-akzent));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .awbal i.jetzt,
  :root:not([data-theme="hell"]) .awsbal i.jetzt {
    box-shadow: 0 0 12px -2px var(--n-akzent-hell);
  }
}
:root[data-theme="dunkel"] .awbal i.jetzt,
:root[data-theme="dunkel"] .awsbal i.jetzt {
  box-shadow: 0 0 12px -2px var(--n-akzent-hell);
}

/* ── Karten sind keine flachen Flächen ────────────────────────────────────
   Ein sehr flacher Verlauf von oben nach unten, kaum wahrnehmbar (zwei
   Prozent) — aber er nimmt der Karte das Papierne. Zusammen mit der
   Lichtkante an der Oberkante ergibt das eine Fläche, die Licht empfängt,
   statt eine, die gedruckt ist. */
/* `:not(.awgross):not(.held)` ist Pflicht, nicht Feinschliff: Diese beiden
   tragen ihren Farbverlauf über die Kurzform `background`, und die setzt
   `background-image` mit. Eine spätere Regel auf `background-image` löscht
   ihn — im Bild stand die Hauptkachel danach fast weiß da, mit einer gelb
   leuchtenden Kurve auf Nichts. */
.awk:not(.awgross), .card, .kachel:not(.held), .panel, .zgz {
  background-image: linear-gradient(178deg, rgba(255,255,255,.6), rgba(255,255,255,0) 42%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .awk:not(.awgross),
  :root:not([data-theme="hell"]) .card,
  :root:not([data-theme="hell"]) .kachel:not(.held),
  :root:not([data-theme="hell"]) .panel,
  :root:not([data-theme="hell"]) .zgz {
    background-image: linear-gradient(168deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  }
}
:root[data-theme="dunkel"] .awk:not(.awgross),
:root[data-theme="dunkel"] .card,
:root[data-theme="dunkel"] .kachel:not(.held),
:root[data-theme="dunkel"] .panel,
:root[data-theme="dunkel"] .zgz {
  background-image: linear-gradient(168deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
}

/* ── Die letzten festen Farben ────────────────────────────────────────────
   Drei Stellen in `modern.css` tragen ihren Verlauf fest im Stylesheet und
   folgen keinem Merkmal: die Balken der Ranglisten, die der Zahlarten und
   die Knopffarbe. Im Probelauf blieben sie violett stehen, während alles
   andere schon blau war — genau die Art Rest, die man erst im Bild sieht.

   Sie zeigen jetzt auf den Akzent. Damit folgen sie jeder künftigen
   Farbwelt, ohne dass jemand daran denken muss. */
.awliste .bb i, .awsbz .bar i {
  background: linear-gradient(90deg, var(--n-akzent-hell), var(--n-akzent));
}
:root { --n-knopf: var(--w-h-akz); }
:root[data-theme="dunkel"] { --n-knopf: var(--w-d-akz); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) { --n-knopf: var(--w-d-akz); }
}
/* Die erste Warengruppenfarbe war der alte Akzent. Ohne diese Zeile stünde
   im Ring ein Violett, das sonst nirgends mehr vorkommt. Die übrigen vier
   bleiben, wie sie sind: Sie stehen für Kategorien, nicht für die Marke. */
:root { --aw-f1: var(--w-h-akz-hell); }
:root[data-theme="dunkel"] { --aw-f1: var(--w-d-akz-hell); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) { --aw-f1: var(--w-d-akz-hell); }
}

/* ── Konto und Darstellung auf dem Telefon ────────────────────────────────
   Im Kopf standen fünf namenlose Bedienelemente nebeneinander — drei Kreise
   fürs Thema, zwei Quadrate für die Farbwelt. Am 07.09.2026 kam die Frage,
   die das beantwortet: „Wofür soll das sein?"

   Auf dem Telefon liegt jetzt alles hinter EINEM Knopf, und auf dem Blatt
   dahinter trägt jede Wahl ihren Namen. Am Rechner bleibt die Leiste, dort
   ist Platz für die Beschriftung.

   Der Knopf zeigt die aktuelle Farbwelt als Kachel: Er ist damit nicht nur
   eine Tür, sondern zeigt auch, was hinter ihr eingestellt ist. */
.kontoknopf { display: none; }
@media (max-width: 900px) {
  .kontoknopf {
    display: block; width: 34px; height: 34px; flex: none;
    border: 0; border-radius: 10px; cursor: pointer; padding: 0;
    background: var(--grad-accent);
    box-shadow: var(--s1), inset 0 1px 0 rgba(255,255,255,.25);
    color: #fff; font-family: var(--schrift-zahl);
    font-size: 12px; font-weight: 700; letter-spacing: .01em;
  }
  .themawahl, .userbox .logout { display: none !important; }
  .userbox { justify-content: space-between; flex-wrap: nowrap; }
}

/* Das Blatt selbst — beschriftet, mit Platz. */
.kbgruppe { margin-top: 14px; }
.kbgruppe:first-child { margin-top: 4px; }
.kbtitel {
  font-size: 11.5px; font-weight: 640; letter-spacing: .04em;
  text-transform: uppercase; color: var(--n-sehrleise); margin-bottom: 7px;
}
.kbwahl { display: flex; flex-direction: column; gap: 6px; }
.kbwahl button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--n-strich); background: var(--n-flaeche);
  color: var(--n-text); font: inherit;
}
.kbwahl button b { font-size: 13.5px; font-weight: 620; }
.kbwahl button i {
  font-style: normal; font-size: 12px; color: var(--n-leise); margin-left: auto;
}
.kbwahl button.an {
  border-color: var(--n-akzent);
  box-shadow: inset 0 0 0 1px var(--n-akzent);
  background: var(--n-akzent-leise);
}
.kbabmelden { width: 100%; padding: 11px; border-radius: 12px; }


/* ══ Register scrollen, Chips brechen um ════════════════════════════════
   Eine Revision, und zwar eine begründete. `modern.css` legt fest: „Chip-
   Reihen brechen um, statt zu scrollen" — eine Reihe, die scrollt, braucht
   eine Zeile, eine die umbricht zwei, und versteckte Chips findet niemand.
   Für Filterchips stimmt das weiter.

   Für REGISTER stimmt es nicht. Am 07.09.2026 im Bild: „Übersicht · Fertige
   Berichte · Eigene Auswertung" in Zeile eins, „Meine Berichte" allein in
   Zeile zwei, „Vergleich" in Zeile drei — drei Zeilen Bedienelemente vor der
   ersten Zahl, auf einem Bildschirm, der ohnehin knapp ist.

   Der Unterschied zwischen beiden: Ein Chip ist eine AUSWAHL — man will alle
   sehen, um zu wählen. Ein Register ist NAVIGATION — man kennt sein Ziel und
   sucht es. Vier Register über drei Zeilen sind keine Leiste mehr, sondern
   ein Absatz. Also scrollen sie, einzeilig, und die Abblendung am rechten
   Rand sagt, dass rechts noch etwas steht.

   Der Vergleich scrollt NICHT mit: Er steht außerhalb der Liste, weil er
   keine Navigation ist. Auf dem Telefon verliert er sein Etikett — der Wert
   sagt bereits, was er ist. */
.awsreitliste { display: flex; align-items: center; gap: 26px; min-width: 0; }

@media (max-width: 760px) {
  /* Zwei Zeilen — aber die richtigen.
     Beides in EINE Zeile zu zwingen ging schief: Der Wähler stand als
     „Vorja…" da (sagt nichts) oder nahm die halbe Breite (dann sind die
     Register weg). Auf dem Telefon haben die Register Vorrang; sie bekommen
     die volle Breite und scrollen, der Wähler eine flache Zeile darunter,
     rechts. Das sind zwei Zeilen statt drei, und beide sind lesbar. */
  .awsreiter {
    flex-wrap: wrap !important;
    gap: 0 10px; row-gap: 6px; align-items: center;
  }
  .awsreitliste { flex: 1 0 100%; }
  .awsreitliste {
    flex: 1 1 auto; min-width: 0; gap: 18px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Die Abblendung ist der einzige Hinweis darauf, dass die Leiste weiter
       geht — ohne sie sieht ein abgeschnittenes Wort wie ein Fehler aus. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .awsreitliste::-webkit-scrollbar { display: none; }
  .awsreit { white-space: nowrap; flex: none; }

  /* Der Wähler darf SCHRUMPFEN (`0 1 auto`), nicht nur nicht wachsen: Mit
     `0 0 auto` nahm „Vorjahr (Wochentage)" die halbe Zeile und schob die
     Register aus dem Bild — im Prüfbild stand „Fertige Be…" unter dem
     Wähler. Gekürzt wird der Text im Feld; die volle Liste sieht man
     ohnehin erst beim Antippen. */
  .awsverg .avt { display: none; }
  .awsverg { flex: 0 0 auto; margin-left: auto; }
  .awsverg select {
    max-width: 60vw; min-height: 30px;
    font-size: 12.5px !important; padding: 0 8px !important;
  }
}

/* Die Fassungszeile im Konto-Blatt. */
.kbfassung {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; border-radius: 12px;
  border: 1px solid var(--n-strich); background: var(--n-flaeche);
  font-size: 12.5px; color: var(--n-leise);
}