/* ==========================================================================
   L24-LOOK (1.11.2026) - der ClosingHub-Look fuer die ganze App

   Max am 1.11.2026, nach dem Entwurfs-Board: "okay also ich sehe nichts von
   closing hub right now lol - aber ja bau mal nach closing hub um!"
   Damit ist die Abweichung vom Board v24.28 entschieden (BOARD-STANDARD.md).

   Was hier steht, ist SICHTBAR gemeint (AUDIT.md Abschnitt 3, 4, 9):
   1. Grund: einfarbig (seit 3.11.2026, vorher Lichtflecken und Karo-Raster).
   2. Glas: Leiste und Hauptflaeche mit Weichzeichner 28 px, Saettigung 1,8,
      violett getoenter Schatten, Ausstieg bei reduzierter Transparenz.
   3. Seitenleiste: jeder Menuepunkt mit eigener farbiger Symbolkachel, der
      aktive voll gefuellt mit Gluehschatten.
   4. Kennzahlen: Farb-Kacheln (zwei Farbflecken, Doppelrand, Pfeil) auf allen
      Seiten mit Kennzahl-Rastern.
   5. Formulare: Seitenblatt rechts statt Dialog in der Mitte, Schleier nur
      ueber dem Inhalt, Feder von rechts.
   Farben aus l24-tokens.css (--k-*). Geladen: index.html, l24.css,
   platin-seite.css, mobil.html.
   ========================================================================== */

/* ── 1. Grund: einfarbig, ruhig (3.11.2026) ─────────────────────────────
   Hier lagen bis heute drei Lichtflecken (violett, blau, rosa) und ein
   Karo-Raster oben links. Max am 3.11.2026: "Mathebuch-Stil", will er nie
   wieder sehen. Der Grund ist jetzt EINE Flaeche, Wert in l24-ruhe.css
   (--l24-grund). Kein Raster, kein Verlauf, auch nicht als ::before. */
html body .shell-top { background: var(--l24-grund, #F3F4F6) !important; }
html body .shell-top::before { content: none !important; display: none !important; }
html body .shell-top > * { position: relative; z-index: 1; }

/* ── 2. Glas ──────────────────────────────────────────────────────────────── */
html body #sidebar.d-leiste, html body .d-haupt {
  background: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .28)) !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(23, 23, 26, .05),
              0 1px 2px rgba(23, 23, 26, .04), 0 12px 32px -16px rgba(40, 30, 80, .28) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important; backdrop-filter: blur(28px) saturate(1.8) !important;
}
@media (prefers-reduced-transparency: reduce) {
  html body #sidebar.d-leiste, html body .d-haupt { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ── 3. Seitenleiste mit farbigen Symbolkacheln ──────────────────────────── */
html body #sbNav .d-punkt { --f: var(--k-blau); --ft: var(--k-blau-tief); position: relative; gap: 10px; }
html body #sbNav .d-punkt > .i {
  width: 26px !important; height: 26px !important; flex: none; border-radius: 8px;
  -webkit-mask: none !important; mask: none !important;
  background: color-mix(in srgb, var(--f) 16%, #fff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 22%, transparent);
  position: relative; transition: background .15s, box-shadow .15s, scale .3s var(--ruhig, ease);
}
html body #sbNav .d-punkt > .i::after {
  content: ""; position: absolute; inset: 5px; background: var(--ft);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
html body #sbNav .d-punkt.an {
  background: color-mix(in srgb, var(--ft) 9%, rgba(255, 255, 255, .85)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ft) 30%, transparent) !important;
  color: var(--t-text-1, #111214) !important; font-weight: 600;
}
html body #sbNav :is(.d-punkt.an, .d-punkt.offen) > .i { background: var(--ft) !important; box-shadow: 0 6px 14px -6px var(--ft); }
html body #sbNav :is(.d-punkt.an, .d-punkt.offen) > .i::after { background: #fff; }
@media (hover: hover) { html body #sbNav .d-punkt:hover > .i { scale: 1.08; } }
html body #sbNav .d-punkt[data-tab="home"]            { --f: var(--k-gelb);    --ft: var(--k-gelb-tief); }
html body #sbNav .d-punkt[data-tab="uebersicht"]      { --f: var(--k-blau);    --ft: var(--k-blau-tief); }
html body #sbNav .d-punkt[data-tab="postfach"]        { --f: var(--k-blau);    --ft: var(--k-blau-tief); }
html body #sbNav .d-punkt[data-tab="fragen"]          { --f: var(--k-violett); --ft: var(--k-violett-tief); }
html body #sbNav .d-punkt[data-tab="kalender"]        { --f: var(--k-rot);     --ft: var(--k-rot-tief); }
html body #sbNav .d-punkt[data-tab="todo"]            { --f: var(--k-gruen);   --ft: var(--k-gruen-tief); }
html body #sbNav .d-punkt[data-tab="motivplan"]       { --f: #EC4899;          --ft: #BE185D; }
html body #sbNav .d-punkt[data-bereich="werkstatt"]   { --f: var(--k-violett); --ft: var(--k-violett-tief); }
html body #sbNav .d-punkt[data-bereich="vertrieb"]    { --f: var(--k-gruen);   --ft: var(--k-gruen-tief); }
html body #sbNav .d-punkt[data-bereich="kundenservice"]     { --f: var(--k-blau);    --ft: var(--k-blau-tief); }
html body #sbNav .d-punkt[data-bereich="marketing"]   { --f: #EC4899;          --ft: #BE185D; }
html body #sbNav .d-punkt[data-bereich="finanzen"]    { --f: var(--k-gelb);    --ft: var(--k-gelb-tief); }
html body #sbNav .d-punkt[data-bereich="system"]      { --f: var(--k-grau);    --ft: var(--k-grau-tief); }
html body #sbNav .d-gruppe { letter-spacing: .06em; }
/* Hauptknopf oben rechts und in den Seiten: deutlicher Akzent */
html body .d-logo { background: linear-gradient(140deg, #6C8CF5, var(--l24-akzent, #063971) 60%, #6D28D9) !important; color: #fff !important; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--l24-akzent, #063971) 60%, transparent); }

/* ── 4. Kennzahlen als Farb-Kacheln, auf allen Seiten ─────────────────────── */
html body :is(.l24-kpi-grid > .l24-kpi, .sup-kpis > .sup-kpi, .sd-kpis > .sd-kpi, .an-kpis > .karte:not(.an-skel),
.raster-3 > section.karte, .prod-kpis > *, .zb-kpis > *, .kpis > *, .dr-kpis > *, .plan-kpis > *) {
  --f: var(--k-blau); --ft: var(--k-blau-tief);
  position: relative; overflow: hidden; border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--t-text-1, #111214) 7%, transparent) !important;
  background:
    radial-gradient(circle at 108% -12%, color-mix(in srgb, var(--f) 30%, transparent), transparent 52%),
    radial-gradient(circle at -12% 115%, color-mix(in srgb, var(--f) 12%, transparent), transparent 54%),
    color-mix(in srgb, var(--f) 5%, #fff) !important;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .9), inset 0 0 0 6px color-mix(in srgb, var(--t-text-1, #111214) 6%, transparent),
              0 1px 2px color-mix(in srgb, var(--t-text-1, #111214) 4%, transparent), 0 12px 28px -18px color-mix(in srgb, var(--ft) 55%, transparent) !important;
  transition: border-color .18s var(--ruhig, ease);
}
html body :is(.l24-kpi-grid > .l24-kpi, .sup-kpis > .sup-kpi, .sd-kpis > .sd-kpi, .an-kpis > .karte, .raster-3 > section.karte, .prod-kpis > *, .zb-kpis > *, .kpis > *, .dr-kpis > *, .plan-kpis > *):nth-child(5n+2) { --f: var(--k-violett); --ft: var(--k-violett-tief); }
html body :is(.l24-kpi-grid > .l24-kpi, .sup-kpis > .sup-kpi, .sd-kpis > .sd-kpi, .an-kpis > .karte, .raster-3 > section.karte, .prod-kpis > *, .zb-kpis > *, .kpis > *, .dr-kpis > *, .plan-kpis > *):nth-child(5n+3) { --f: var(--k-gruen); --ft: var(--k-gruen-tief); }
html body :is(.l24-kpi-grid > .l24-kpi, .sup-kpis > .sup-kpi, .sd-kpis > .sd-kpi, .an-kpis > .karte, .raster-3 > section.karte, .prod-kpis > *, .zb-kpis > *, .kpis > *, .dr-kpis > *, .plan-kpis > *):nth-child(5n+4) { --f: var(--k-gelb); --ft: var(--k-gelb-tief); }
html body :is(.l24-kpi-grid > .l24-kpi, .sup-kpis > .sup-kpi, .sd-kpis > .sd-kpi, .an-kpis > .karte, .raster-3 > section.karte, .prod-kpis > *, .zb-kpis > *, .kpis > *, .dr-kpis > *, .plan-kpis > *):nth-child(5n+5) { --f: #EC4899; --ft: #BE185D; }
/* Gut und schlecht schlagen die Reihenfolge */
html body .l24-kpi-grid > .l24-kpi.good { --f: var(--k-gruen); --ft: var(--k-gruen-tief); }
html body .l24-kpi-grid > .l24-kpi.bad { --f: var(--k-rot); --ft: var(--k-rot-tief); }
.l24-kpi .k-label, .sup-kpi > .leise:first-child, .sd-kpi .leise:first-child { color: var(--ft) !important; font-weight: 650 !important; }
.l24-kpi .k-value, .sup-kpi .zahl-gross, .sd-kpi .zahl-gross, .raster-3 .zahl-gross { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.raster-3 > section.karte .symq { background: var(--ft) !important; color: #fff !important; border-radius: 14px !important; box-shadow: 0 8px 18px -8px var(--ft) !important; }
/* Klickbare Kacheln: Pfeil oben rechts, Rand in Kachelfarbe bei Hover */
:is(.l24-kpi.is-link, .sup-kpi[data-ziel], .raster-3 > section.karte[data-ziel], .kpis > [data-ziel])::after {
  content: ""; position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in srgb, var(--f) 16%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-opacity='.7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transition: translate .18s var(--ruhig, ease);
}
@media (hover: hover) {
  :is(.l24-kpi.is-link, .sup-kpi[data-ziel], .raster-3 > section.karte[data-ziel], .kpis > [data-ziel]):hover { border-color: var(--ft) !important; cursor: pointer; }
  :is(.l24-kpi.is-link, .sup-kpi[data-ziel], .raster-3 > section.karte[data-ziel], .kpis > [data-ziel]):hover::after { translate: 3px 0; }
}

/* ── 5. Seitenblatt rechts statt Dialog (am Rechner) ──────────────────────── */
@keyframes l24-seitenblatt { from { opacity: 0; translate: 28px 0; } }
@media (min-width: 701px) {
  html body .l24-modal-scrim:not(#_), html body .pf-vollbild:not(#_) {
    justify-content: flex-end !important; align-items: stretch !important; padding: 16px !important;
    background: color-mix(in srgb, var(--l24-akzent, #063971) 10%, transparent) !important;
    -webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important;
  }
  html body .l24-modal-scrim:not(#_) > .l24-modal, html body .pf-vollbild:not(#_) > .l24-card {
    width: 480px !important; max-width: calc(100vw - 32px) !important; max-height: none !important; height: auto; margin: 0 !important;
    display: flex !important; flex-direction: column; overflow: auto;
    border-radius: 20px !important; background: rgba(250, 250, 251, .97) !important; border: 1px solid #fff !important;
    box-shadow: 0 24px 60px rgba(20, 24, 32, .22) !important;
    animation: l24-seitenblatt var(--feder-dauer, .38s) var(--feder, ease) both !important;
  }
  html body .pf-vollbild:not(#_) > .l24-card { width: 560px !important; padding: 22px 24px !important; }
  html body .l24-modal-scrim:not(#_) > .l24-modal > .l24-modal-bd { flex: 1; overflow: auto; }
  html body .l24-modal-scrim:not(#_) > .l24-modal > .l24-modal-ft { margin-top: auto; background: rgba(30, 34, 40, .04); }
}
@media (prefers-reduced-motion: reduce) { .l24-modal-scrim > .l24-modal, .pf-vollbild > .l24-card { animation: none !important; } }

/* ── Postfach: Lage-Kacheln in Farbe (du bist dran rot, auf Kunde gelb, erledigt gruen) ── */
.pf-lk { --f: var(--k-blau); --ft: var(--k-blau-tief); }
.pf-lk-dran { --f: var(--k-rot); --ft: var(--k-rot-tief); }
.pf-lk-kunde { --f: var(--k-gelb); --ft: var(--k-gelb-tief); }
.pf-lk-zu { --f: var(--k-gruen); --ft: var(--k-gruen-tief); }
html body .pf-lk {
  color: var(--ft) !important; border: 1px solid color-mix(in srgb, #111214 7%, transparent) !important; border-radius: 20px !important;
  background:
    radial-gradient(circle at 108% -12%, color-mix(in srgb, var(--f) 30%, transparent), transparent 52%),
    radial-gradient(circle at -12% 115%, color-mix(in srgb, var(--f) 12%, transparent), transparent 54%),
    color-mix(in srgb, var(--f) 5%, #fff) !important;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .9), inset 0 0 0 5px rgba(17, 18, 20, .06) !important;
}
html body .pf-lk b { color: #111214 !important; }
html body .pf-lk.active { border-color: var(--ft) !important; }
html body .pf-lk .pf-lk-pfeil { color: var(--ft) !important; background: color-mix(in srgb, var(--f) 16%, #fff) !important; }
html body .pf-lk.active .pf-lk-pfeil { background: var(--ft) !important; }
html body .pf-lk-zu .pf-lk-pfeil, html body .pf-lk-zu.active { border-color: var(--ft); }
html body .pf-lk:hover { border-color: var(--ft) !important; }

/* ── Handy-App: derselbe einfarbige Grund (3.11.2026, vorher Lichtflecken) ── */
html body #app.app { background: var(--l24-grund, #F3F4F6) !important; }

/* ==========================================================================
   BAUSTEINE AUF ALLEN SEITEN (1.11.2026, Max: "dann bitte mal alles genau
   umbauen! alle seiten!"). Werte aus AUDIT.md Abschnitt 3 und 4, Akzent bleibt
   das Lampenwerk24-Blau. Zwei Familien: Board-Seiten (platin.css: .karte,
   .knopf, .segment, .pille, .zeile, .feld) und alte Seiten (l24-v2:
   .l24-card, .l24-btn, .l24-tabs, .l24-tag, .l24-table, .l24-input).
   ========================================================================== */
:root {
  --cl-akzent: var(--l24-akzent, #063971); --cl-akzent-hover: var(--l24-akzent-tief, #04294F); --cl-akzent-zart: var(--l24-akzent-weich, #E6ECF3);
  --cl-rand: #DCDCE0; --cl-rand-zart: #EDEDEF; --cl-text: #17171A; --cl-text-2: #5C5C64;
  --cl-glas-schatten: 0 0 0 1px rgba(23, 23, 26, .05), 0 1px 2px rgba(23, 23, 26, .04), 0 12px 32px -16px rgba(40, 30, 80, .22);
}

/* ── Glaskarte (4.3) ── */
html body :is(.karte, .l24-card):not(.l24-kachel):not(.sup-kpi):not(.sd-kpi):not(#fragenHinweis):not(:is(.zb-kpis, .kpis, .dr-kpis, .plan-kpis, .sup-kpis, .sd-kpis, .an-kpis, .prod-kpis, .raster-3, .l24-kpi-grid) > *) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .62)) !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--cl-glas-schatten) !important;
}
html body :is(.kkopf h2, .l24-card-hd h2) { font-size: 16px !important; font-weight: 650 !important; letter-spacing: -.01em; }

/* ── Seitenkopf: Titel wie ClosingHub (28 px, eng) ── */
html body :is(.skopf h1, .l24-page-hd h1) { font-size: 28px !important; font-weight: 650 !important; letter-spacing: -.03em !important; line-height: 1.1 !important; }
html body :is(.skopf .unter, .l24-page-hd .sub) { color: var(--cl-text-2) !important; }

/* ── Knoepfe: am Rechner 36 px, Radius 10, Hauptaktion im Akzent (4.5, 3) ── */
@media (min-width: 701px) {
  html body :is(.knopf, .l24-btn):not(.ico):not(.rund):not(.pf-lk):not(.l24-tab) {
    min-height: 36px !important; height: auto; border-radius: 10px !important; padding-inline: 14px !important; font-size: 14px !important;
  }
  html body :is(.knopf.klein, .l24-btn.sm):not(.ico) { min-height: 32px !important; border-radius: 9px !important; padding-inline: 12px !important; font-size: 13.5px !important; }
}
html body :is(.knopf.prim, .l24-btn.primary, .l24-btn.dark) {
  background: var(--cl-akzent) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--l24-akzent, #063971) 25%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--l24-akzent, #063971) 55%, transparent) !important;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) { html body :is(.knopf.prim, .l24-btn.primary, .l24-btn.dark):hover { background: var(--cl-akzent-hover) !important; } }
html body :is(.knopf.sek, .l24-btn:not(.primary):not(.dark):not(.danger):not(.on):not(.l24-tab):not(.pf-lk)) {
  background: rgba(255, 255, 255, .9) !important; color: var(--cl-text) !important; border: 1px solid var(--cl-rand) !important; box-shadow: 0 1px 2px rgba(23, 23, 26, .04) !important;
}
@media (hover: hover) { html body :is(.knopf.sek, .l24-btn:not(.primary):not(.dark):not(.danger):not(.on):not(.l24-tab):not(.pf-lk)):hover { background: #F4F5F7 !important; border-color: #B9B9C0 !important; } }

/* ── Segment-Umschalter und Reiter (4.6) ── */
html body :is(.segment, .l24-tabs) {
  padding: 4px !important; gap: 2px !important; border-radius: 10px !important; border: 0 !important;
  background: color-mix(in srgb, var(--cl-akzent) 8%, rgba(255, 255, 255, .6)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cl-akzent) 14%, transparent) !important;
  overflow-x: auto; scrollbar-width: none;
}
html body :is(.segment > span, .segment > button, .l24-tabs > .l24-tab, .l24-tabs > button) {
  min-height: 28px !important; height: 28px; padding: 0 12px !important; border-radius: 7px !important; font-size: 13.5px !important; font-weight: 500 !important;
  color: var(--cl-text-2) !important; background: transparent !important; box-shadow: none !important; border: 0 !important;
}
html body :is(.segment > span.an, .segment > button.an, .segment > [aria-selected="true"], .l24-tabs > .active, .l24-tabs > [aria-selected="true"]) {
  background: #fff !important; color: var(--cl-text) !important; font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(23, 23, 26, .08), 0 0 0 1px rgba(23, 23, 26, .04) !important;
}
html body :is(.segment .n, .l24-tabs .cnt) { color: var(--cl-akzent) !important; font-weight: 650 !important; }

/* ── Pillen (4.7): 24 px, rund; Farb-Pillen 13 % Farbe, Schrift in der tiefen Farbe ── */
html body :is(.pille, .l24-tag, .chip):not(.pf-lk) {
  height: 24px !important; min-height: 24px; padding: 0 9px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important;
  background: #EFEFF1 !important; color: #3F3F46 !important; border: 0 !important; box-shadow: none !important;
}
html body :is(.pille.rot, .l24-tag.red, .l24-tag.rot) { background: color-mix(in srgb, #F43F5E 13%, #fff) !important; color: #BE123C !important; }
html body :is(.pille.fertig, .pille.gruen, .l24-tag.green, .l24-tag.gruen) { background: color-mix(in srgb, #22C55E 15%, #fff) !important; color: #146236 !important; }
html body :is(.pille.laeuft, .pille.blau, .l24-tag.blue, .l24-tag.blau) { background: color-mix(in srgb, var(--l24-akzent, #063971) 12%, #fff) !important; color: var(--l24-akzent-tief, #04294F) !important; }
html body :is(.pille.gelb, .l24-tag.amber, .l24-tag.gelb, .l24-tag.yellow) { background: color-mix(in srgb, #F59E0B 16%, #fff) !important; color: #8A5A00 !important; }

/* ── Felder (3, 4): weiss, Rand, Radius 10, Fokusring im Akzent ── */
html body :is(.feld, .l24-input, .l24-select, .l24-search, .such-feld, .ms-feld) {
  background: #fff !important; border: 1px solid var(--cl-rand) !important; border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(23, 23, 26, .04) !important; color: var(--cl-text);
}
html body .l24-textarea { background: #fff !important; border: 1px solid var(--cl-rand) !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(23, 23, 26, .04) !important; }
html body :is(.feld, .l24-input, .l24-select, .l24-search, .l24-textarea):focus-within,
html body :is(.l24-input, .l24-textarea, .l24-select):focus {
  border-color: var(--cl-akzent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-akzent) 18%, transparent) !important; outline: none !important;
}

/* ── Listenzeilen und Tabellen (4.13): Hover im Akzent, Pfeil rueckt ── */
html body .zeile { transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
@media (hover: hover) {
  html body :is(.zeile, .l24-row.is-link):not(.karte.zahlen > .zeile):hover { background: color-mix(in srgb, var(--cl-akzent) 5%, transparent) !important; }
  html body .zeile:hover .chev, html body .zeile:hover .i-weiter { transform: translateX(3px); }
  /* Kacheln: beim Zeigen heben sie sich leicht ab, statt flach grau zu werden (Max, Nov. 2026:
     "OnHover ... nur ein haesslicher Strich im Grauen"). Farbe bleibt, Lichtkante wird heller,
     weicher neutraler Schatten darunter, der Pfeil schiebt nach rechts. */
  html body :is(.karte.zahlen > .zeile, .hm-stat, .q4h-haelfte):not(#_) { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .22s ease; }
  html body :is(.karte.zahlen > .zeile, .hm-stat):hover:not(#_):not(#_) {
    transform: translateY(-2px); filter: saturate(1.08) brightness(1.01);
    box-shadow: inset 0 1px 0 white, 0 0 0 1px color-mix(in srgb, var(--tinte) 8%, transparent), 0 14px 30px -12px color-mix(in srgb, var(--tinte) 28%, transparent) !important; }
  html body .q4h-haelfte:hover:not(#_) { background: color-mix(in srgb, white 55%, transparent); }
}
html body :is(.zeile .chev, .zeile .i-weiter) { transition: transform .18s var(--ruhig, ease); }
html body .zeile.gewaehlt { background: color-mix(in srgb, var(--cl-akzent) 8%, #fff) !important; box-shadow: inset 3px 0 0 var(--cl-akzent); }
html body :is(.l24-table, .tabelle) thead th {
  height: 42px; background: color-mix(in srgb, var(--cl-akzent) 4%, transparent) !important; color: var(--cl-text-2) !important;
  font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
}

/* ── Symbolkachel (4.2): runde graue Kreise werden farbige Kacheln ── */
html body .symq:not(.raster-3 .symq) {
  border-radius: 11px !important; background: color-mix(in srgb, var(--cl-akzent) 14%, #fff) !important; color: var(--cl-akzent) !important;
  border: 0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cl-akzent) 20%, transparent) !important;
}

/* ── Menues und Popover (4.10): Glas, Radius 12, Eintraege 32 px ── */
html body :is(.pf-sortmenue, .tb-user-menu, .tb-bell-menu, .menue, .pop) {
  background: rgba(255, 255, 255, .92) !important; border: 1px solid var(--cl-rand) !important; border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px -12px rgba(23, 23, 26, .22), 0 2px 6px rgba(23, 23, 26, .06) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
}
html body :is(.tb-user-menu, .tb-bell-menu, .pf-sortmenue, .menue, .pop):not([hidden]) { animation: l24-auf var(--feder-dauer, .38s) var(--feder, ease) both; }

/* ── Versand-Dialoge im Rahmen: ebenfalls Seitenblatt ── */
@media (min-width: 701px) {
  html body :is(.ship-ov, .modal-overlay):not(#_) {
    justify-content: flex-end !important; align-items: stretch !important; padding: 16px !important;
    background: color-mix(in srgb, var(--l24-akzent, #063971) 10%, transparent) !important; -webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important;
  }
  html body :is(.ship-ov, .modal-overlay):not(#_) > :is(.ship-card, .modal-box) {
    width: 480px !important; max-width: calc(100vw - 32px) !important; max-height: none !important; margin: 0 !important; overflow: auto;
    border-radius: 20px !important; background: rgba(250, 250, 251, .97) !important; border: 1px solid #fff !important;
    box-shadow: 0 24px 60px rgba(20, 24, 32, .22) !important;
    animation: l24-seitenblatt var(--feder-dauer, .38s) var(--feder, ease) both !important;
  }
}

/* ── Handy-App: Lage-Filter als Farb-Pillen ── */
/* Farbe nach Bedeutung, nicht nach Position (1.11.2026): sonst waere am Handy in den
   Aufgaben "uebersehen" gruen geworden. Neutral blau, wo keine Bedeutung passt. */
html body .lagefilter .lgf { --f: #5B8DEF; --ft: var(--l24-akzent, #063971); }
html body .lagefilter .lgf:is([data-lage="dran"], [data-lage="abgel"]) { --f: #F43F5E; --ft: #BE123C; }
html body .lagefilter .lgf:is([data-lage="kunde"], [data-lage="repro"]) { --f: #F59E0B; --ft: #B45309; }
html body .lagefilter .lgf:is([data-lage="zu"], [data-lage="fertig"]) { --f: #22C55E; --ft: #146236; }
html body .lagefilter .lgf[aria-pressed="true"] {
  background: radial-gradient(circle at 110% -20%, color-mix(in srgb, var(--f) 30%, transparent), transparent 60%), color-mix(in srgb, var(--f) 9%, #fff) !important;
  box-shadow: inset 0 0 0 1.5px var(--ft), 0 6px 16px -8px var(--ft) !important;
}

/* ==========================================================================
   ANIMATIONS-KATALOG (AUDIT.md Abschnitt 5), 1.11.2026. Max: "Hast du
   saemtliche Animationen noch eingebaut?" Was Logik braucht, steht in
   l24-animation.js. Fuellmodus immer "backwards": nach dem Ende bleibt kein
   transform stehen, der feste Elemente (Dialoge) im Inneren verschieben wuerde.
   ========================================================================== */

/* Gleitende Auswahl in Umschaltern (Pillen-Gleiten) */
html body .mit-gleiter > :is([aria-pressed="true"], .an, .active, [aria-selected="true"]):not(.l24-gleiter):not(#_) {
  background: transparent !important; box-shadow: none !important; border-color: transparent !important;
}
html body .mit-gleiter > :not(.l24-gleiter) { position: relative; z-index: 1; }
.l24-gleiter {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: translate var(--feder-dauer, .38s) var(--feder, ease), width var(--feder-dauer, .38s) var(--feder, ease),
              height var(--feder-dauer, .38s) var(--feder, ease), opacity .15s;
}

/* Rollende Zahlen: die neue Zahl rollt von unten herein */
@keyframes l24-roll { from { opacity: 0; translate: 0 .55em; filter: blur(2px); } }
.l24-rollt { display: inline-block; animation: l24-roll .42s var(--feder, ease) backwards; }

/* Menue-Symbol tupft beim Drueberfahren (nav-zeichen-tupfer: 1 auf 1,18 auf 1, 0,3 s) */
@keyframes l24-tupfer { 50% { scale: 1.18; } }
@media (hover: hover) { html body #sbNav .d-punkt:hover > .i { scale: 1 !important; animation: l24-tupfer .3s var(--ruhig, ease); } }

/* Pillen erscheinen (flamme-herein: 0,8 auf 1, 0,3 s) - Fristen, Warnungen, Zaehler */
@keyframes l24-pille-herein { from { scale: .8; opacity: 0; } }
:is(#frKnapp, .pille.rot, .zaehler.on, .leiste .punkt, .pf-lk-dran b) { animation: l24-pille-herein .3s var(--ruhig, ease) backwards; }

/* Karten mit Versatz beim Laden einer Seite (Rechner) */
:is(body.seite > .d-haupt, .l24-page) > :nth-child(1) { animation: l24-auf var(--feder-dauer, .38s) var(--feder, ease) backwards; }
:is(body.seite > .d-haupt, .l24-page) > :nth-child(2) { animation: l24-auf var(--feder-dauer, .38s) var(--feder, ease) 40ms backwards; }
:is(body.seite > .d-haupt, .l24-page) > :nth-child(3) { animation: l24-auf var(--feder-dauer, .38s) var(--feder, ease) 80ms backwards; }
:is(body.seite > .d-haupt, .l24-page) > :nth-child(4) { animation: l24-auf var(--feder-dauer, .38s) var(--feder, ease) 120ms backwards; }
:is(body.seite > .d-haupt, .l24-page) > :nth-child(n+5) { animation: l24-auf var(--feder-dauer, .38s) var(--feder, ease) 160ms backwards; }
.hm-kpis > :nth-child(2) { animation: l24-auf var(--feder-dauer, .38s) var(--feder, ease) 60ms backwards; }
.hm-kpis > :nth-child(3) { animation: l24-auf var(--feder-dauer, .38s) var(--feder, ease) 120ms backwards; }

/* Leere Zustaende: das Zeichen schwebt leise (deko-schweben, 7 s) */
@keyframes l24-schweben { 50% { translate: 0 -4px; } }
.l24-leer .zeichen { animation: l24-schweben 7s ease-in-out infinite; }

/* Stromlauf um den Knopf, der gerade etwas will (stromlauf-knopf, 3,2 s):
   "Antworten" bei offenen Fragen an Max, am Handy und auf Mein Tag. */
@property --l24-strom { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes l24-strom { to { --l24-strom: 360deg; } }
:is(#fragenHinweis .fh-los, #frKnopf) { position: relative; isolation: isolate; }
:is(#fragenHinweis .fh-los, #frKnopf)::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--l24-strom), transparent 0 70%, #4DE8FF 80%, #B98BFF 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: l24-strom 3.2s linear infinite;
}

/* Drei huepfende Punkte fuer kurze Wartezeiten (lade-punkt, 1,2 s, versetzt 0,16 s) */
@keyframes l24-punkt { 0%, 80%, 100% { opacity: .25; translate: 0 0; } 40% { opacity: 1; translate: 0 -3px; } }
.l24-punkte { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.l24-punkte i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: l24-punkt 1.2s ease-in-out infinite; }
.l24-punkte i:nth-child(2) { animation-delay: .16s; } .l24-punkte i:nth-child(3) { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .l24-gleiter, .l24-rollt, .l24-leer .zeichen, .l24-punkte i, :is(#fragenHinweis .fh-los, #frKnopf)::before { animation: none !important; transition: none !important; }
}

/* ── To-Do in der Handy-App: jede Aufgabe eine eigene Karte (1.11.2026) ──
   Dasselbe Muster wie "Bitte entscheiden": Max wollte keine Zeilen mit
   Haarlinien in einer gemeinsamen Karte, sondern Karten mit Luecke. 14 px wie
   in der Handy-App. Nur am Handy; am Rechner bleibt die Liste eine Karte. */
@media (max-width: 700px) {
  html body.todo-seite .td-karte.td-karte:not(#_):not(#__) {
    background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important; padding: 0 !important;
  }
  html body.todo-seite .td-karte > .kkopf { padding: 4px 4px 0 !important; }
  html body.todo-seite .td-karte > div:has(> .zeile) { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
  html body.todo-seite .td-karte .zeile.ti:not(#_) {
    margin: 0 !important; padding: 14px !important; border: 1px solid rgba(255, 255, 255, .85) !important; border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .66)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(23, 23, 26, .04), 0 10px 26px -18px rgba(40, 30, 80, .3) !important;
  }
  html body.todo-seite .td-karte .zeile.ti::before { display: none !important; }
  html body.todo-seite .td-karte .zeile.ti:active { scale: .98; }
}

/* ── Glocke und Konto-Menue: Menue, kein Dialog (1.11.2026) ─────────────────
   Max: "Wenn ich auf die Glocke klicke, dann wird alles dunkel. Das ergibt keinen
   Sinn." Der Kopf-Schleier (platin-bruecke.css, Board v24.28) dunkelte die ganze
   Seite ab und machte sie unscharf. Er bleibt als unsichtbare Flaeche liegen,
   damit ein Klick daneben das Menue schliesst, aber ohne Farbe und Unschaerfe.
   Die Hauptflaeche behaelt ihr Glas. Erscheinen wie im Stil-Paket: aus 6 px
   oben, 0,38 s Feder. */
/* 3.11.2026: ganz aus. Er lag ueber der Glocke und schluckte Klick, Hover und Mausrad (siehe index.html). */
html body .kopf-schleier, html body.kopf-offen .kopf-schleier { display: none !important; }
html body.kopf-offen .d-haupt { -webkit-backdrop-filter: blur(28px) saturate(1.8) !important; backdrop-filter: blur(28px) saturate(1.8) !important; }
@keyframes l24-menue-auf { from { opacity: 0; translate: 0 -6px; } }
html body :is(.tb-bell-menu, .tb-user-menu).open { animation: l24-menue-auf var(--feder-dauer, .38s) var(--feder, ease) backwards !important; }
@media (prefers-reduced-motion: reduce) { html body :is(.tb-bell-menu, .tb-user-menu).open { animation: none !important; } }

/* ── Reiterleisten: gleicher Rand ringsum (3.11.2026) ─────────────────────
   Max zum Druckplan: "der Abstand von der Pill ... ist nicht einheitlich". Das
   Board (platin.css, erzeugt) gibt jeder Leiste mindestens 48px Hoehe. Das passt
   nur zu Reitern von 38px; kleinere (30, 34, 36px) hatten oben und unten 9px
   Luft, seitlich 4px. Gemessen auf allen 52 Seiten, betroffen waren To-Do,
   Support, Reels, Umfrage, Chat-Luecken, Nutzung, Analytics, Kommentare,
   Aufgaben, Fall-Archiv und Support-Bericht. Die Leiste liegt jetzt an ihren
   Reitern an, der Rand ist ueberall 4px. .l24-tabs steht in platin-bruecke.css. */
/* "html .seite" und nicht "html body .seite": auf vielen Seiten traegt body selbst die Klasse. */
html .seite .segment, html .seite .prow.pfilter, html .seite .tabgrid.prow,
html .sb-steuer > .segment { min-height: 0; }

/* KEINE HARTE KANTE BEIM SCROLLEN (Max, 6. Nov. 2026: "die harten Kanten ueberall raus"). Jede Seite
   laeuft in einem Rahmen in .stage; scrollt sie, schnitt der Rahmenrand den Inhalt gerade ab. Jetzt
   blendet oben und unten ein 18-px-Verlauf in die weisse Flaeche aus, fuer alle Seiten zugleich.
   Rechts 14 px frei, damit der Rollbalken nicht ueberdeckt wird. */
html body .stage::before, html body .stage::after {
  content: ""; position: absolute; left: 0; right: 14px; height: 18px; z-index: 5; pointer-events: none;
}
html body .stage::before { top: 0; background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)); }
html body .stage::after { bottom: 0; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); }