/* ==========================================================================
   L24-STIL (1.11.2026) - das HHV-Stilpaket in der Lampenwerk24-App

   Max am 1.11.2026 zur Vorschau: "Ja, so bauen". Grundlage: STIL-PAKET.md,
   gestaltung.html und die Bilder aus dem HHV-Stilpaket; Bauplan im PR.
   Die CLAUDE.md dieser App geht vor:
   - Akzent ist die Markenfarbe Verkehrsblau #063971 (wie im Theme).
   - Gelb ohne Orange-Stich: #EAB308 / tief #854D0E statt des Paket-Gelbs
     #F59E0B / #A35A06 (Orange ist bei Lampenwerk24 verboten).
   - Keine Hover-Hektik: Zeiger-Effekte nur Rand und Pfeil, nichts springt.

   Diese Datei ist das FUNDAMENT (Paket 1 des Bauplans): Farben, drei
   Glasstufen, Grund. Sie laedt nach l24-look.css und stellt dort und in den
   erzeugten Board-Dateien (platin.css, platin-rahmen.css) die Variablen um.
   Die gläsernen Symbole liefert l24-symbole.js.
   Eingebunden: l24.css, platin-seite.css, index.html, mobil.html.
   ========================================================================== */

:root {
  /* Akzent (Markenfarbe) */
  --l24-akzent: #063971; --l24-akzent-tief: #04294F; --l24-akzent-weich: #E6ECF3;
  --cl-akzent: #063971; --cl-akzent-hover: #04294F; --cl-akzent-zart: #E6ECF3;
  --t-akzent: #063971; --t-akzent-hover: #04294F; --t-akzent-gedrueckt: #031D38; --t-akzent-zart: #E6ECF3;
  --t-auskunft: #04294F; --t-auskunft-flaeche: #E6ECF3;
  --bk-marke: #063971; --bk-marke-tief: #04294F; --bk-marke-tint: #E6ECF3;

  /* Text wie im Paket */
  --t-text-1: #17171A; --t-text-2: #383E46; --t-text-3: #5F646B;

  /* Kachelfarben aus dem Paket, je hell und tief (Schrift auf heller Kachel tief) */
  --k-rot: #F43F5E;     --k-rot-tief: #BE123C;
  --k-gelb: #EAB308;    --k-gelb-tief: #854D0E;
  --k-blau: #38BDF8;    --k-blau-tief: #0369A1;
  --k-gruen: #22C55E;   --k-gruen-tief: #15803D;
  --k-violett: #8B5CF6; --k-violett-tief: #5B32B8;
  --k-grau: #94A3B8;    --k-grau-tief: #475569;

  /* Drei Glasstufen (Paket Abschnitt 2) */
  --glas-1: rgba(255, 255, 255, .72);
  --glas-2: rgba(255, 255, 255, .80);
  --glas-3: rgba(255, 255, 255, .90);
  --glas-filter-12: blur(24px) saturate(1.8);
  --glas-filter-3: blur(28px) saturate(1.8);
  --glas-rand: 1px solid rgba(255, 255, 255, .9);
  --glas-schatten: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(23, 23, 26, .05), 0 14px 34px -18px rgba(6, 57, 113, .30);
  --glas-glanz: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%);

  /* Variablen der erzeugten Board-Dateien auf die Markenfarbe */
  --lila: #063971; --lila-tief: #04294F; --lila-mid: #063971; --lila-zart: #E6ECF3; --blau: #063971; --fokus: #063971;
  --b-blau: #063971; --b-blau-tief: #04294F; --b-blau-zart: #E6ECF3;
  --blau-text: #04294F; --blau-zart: #E6ECF3; --lila-text: #04294F; --lila-hell: #04294F;
  --ma-6: rgba(6, 57, 113, .14); --ma-6-t: #04294F;
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glas-1: #fff; --glas-2: #fff; --glas-3: #fff; --glas-filter-12: none; --glas-filter-3: none; }
}
/* Der Rahmen (platin-rahmen.css) setzt seine Farben im eigenen Bereich */
html body .shell-top { --lila: #063971; --lila-tief: #04294F; --lila-mid: #063971; --lila-hell: #04294F; --lila-zart: #E6ECF3; --lila-text: #04294F;
  --blau: #063971; --blau-text: #04294F; --blau-zart: #E6ECF3; --fokus: #063971; --akz-rgb: 6, 57, 113; }

/* Fest eingetragene Blautoene der erzeugten Board-Dateien (platin.css, platin-rahmen.css),
   die keine Variable lesen. Die Dateien selbst werden nicht von Hand geaendert. */
html body .zaehler, html body .seite :is(.zs, .zs.a, .zs.b, .zs.g, .ava, .m-ava) { background: rgba(6, 57, 113, .12); }
html body .seite .vvor { background: rgba(6, 57, 113, .10); }
html body .seite :is(.vm.wir, .vm.wir.noetig, .blase.du) { background: #E6ECF3 !important; }
html body .seite .gr-m { background: #E6ECF3 !important; color: #04294F !important; }
html body .seite .gr-l { background: #063971 !important; }
html body .seite :is(.fz.sel, .fz.sofort.sel, .zeile.gewaehlt, .zeile.sel, .kz.gewaehlt, .mz.sel, .at.sel) { box-shadow: inset 0 0 0 1.5px rgba(6, 57, 113, .55) !important; }
html body .seite :is(.fz.sel, .fz.sofort.sel, .zeile.gewaehlt, .zeile.sel, .kz.gewaehlt, .mz.sel, .at.sel)::before { box-shadow: inset 0 0 0 1.5px rgba(6, 57, 113, .55), 0 4px 14px rgba(30, 34, 40, .08); }

/* ── Grund: eine ruhige Flaeche (3.11.2026, vorher drei Lichtflecken) ── */
html body .shell-top, html body #app.app { background: var(--l24-grund, #F3F4F6) !important; }

/* ── Glas Stufe 1: Seitenleiste, Kopfzeile, Handy-Leiste (kein Lesetext) ── */
html body #sidebar.d-leiste, html body .d-haupt {
  background: var(--glas-glanz), var(--glas-1) !important; border: var(--glas-rand) !important;
  box-shadow: var(--glas-schatten) !important;
  -webkit-backdrop-filter: var(--glas-filter-12) !important; backdrop-filter: var(--glas-filter-12) !important;
}
html body .leiste { background: rgba(255, 255, 255, .93) !important; }
/* Gewaehlter Reiter: Glastropfen statt flacher hellblauer Flaeche (Max, Nov. 2026: "Warum kann das
   hier nicht in Liquid-Glass-Style sein?"). Hell, mit Lichtkante oben und weichem Schatten. */
html body .leiste-pille {
  background: radial-gradient(120% 100% at 30% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .7) 75%), color-mix(in srgb, var(--l24-akzent, #063971) 7%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, .95) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(20, 24, 32, .05), 0 1px 2px rgba(20, 24, 32, .07), 0 6px 18px color-mix(in srgb, var(--l24-akzent, #063971) 14%, transparent) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.8); backdrop-filter: blur(8px) saturate(1.8);
}
html body .leiste button.an { color: var(--l24-akzent) !important; }
html body .leiste button.an svg { stroke: var(--l24-akzent) !important; }

/* ── Glas Stufe 2: Karten, Kacheln, Listen, Tabellen ── */
html body :is(.karte, .l24-card, .b-karte, .b-insel, #entscheiden .ent-z, #entscheiden .ent-rk, #liste > .fall):not(.l24-kachel):not(.sv-k) {
  background-color: var(--glas-2);
  border-color: rgba(255, 255, 255, .9) !important;
}
html body :is(.karte, .l24-card):not(:is(.zb-kpis, .kpis, .dr-kpis, .plan-kpis, .sup-kpis, .sd-kpis, .an-kpis, .prod-kpis, .raster-3, .l24-kpi-grid, .hm-kpis) > *):not(#fragenHinweis) {
  background: var(--glas-glanz), var(--glas-2) !important;
  box-shadow: var(--glas-schatten) !important;
}

/* ── Glas Stufe 3: Seitenblatt, Fenster, Toast, Menues, Glocke ── */
html body :is(.tb-bell-menu, .tb-user-menu, .pf-sortmenue, .b-menue, .l24-ui-toast, .l24-toast, .fassung-band, .l24-fassung, .cmdk) {
  background: var(--glas-glanz), var(--glas-3) !important;
  -webkit-backdrop-filter: var(--glas-filter-3) !important; backdrop-filter: var(--glas-filter-3) !important;
  border: var(--glas-rand) !important;
}
@media (min-width: 701px) {
  html body .l24-modal-scrim:not(#_) > .l24-modal, html body .pf-vollbild:not(#_) > .l24-card,
  html body :is(.ship-ov, .modal-overlay):not(#_) > :is(.ship-card, .modal-box) {
    background: var(--glas-glanz), var(--glas-3) !important;
    -webkit-backdrop-filter: var(--glas-filter-3) !important; backdrop-filter: var(--glas-filter-3) !important;
  }
  /* Seitenblatt: 560 bis 600 px, 16 px Abstand, Schleier Markenfarbe 10 % */
  html body .l24-modal-scrim:not(#_) > .l24-modal { width: 560px !important; }
  html body :is(.l24-modal-scrim, .pf-vollbild, .ship-ov, .modal-overlay):not(#_) { background: rgba(6, 57, 113, .10) !important; }
}

/* ── Hauptknoepfe rund in der Markenfarbe (Paket: Knoepfe rund) ── */
html body :is(.knopf.prim, .l24-btn.primary, .l24-btn.dark, #fragenHinweis .fh-los, .b-knopf.prim) {
  background: var(--l24-akzent) !important; color: #fff !important; border-color: transparent !important; border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(6, 57, 113, .25), 0 8px 18px -8px rgba(6, 57, 113, .55) !important;
}
@media (hover: hover) { html body :is(.knopf.prim, .l24-btn.primary, .l24-btn.dark):hover { background: var(--l24-akzent-tief) !important; } }
@media (min-width: 701px) { html body :is(.knopf, .l24-btn):not(.ico):not(.rund):not(.pf-lk):not(.l24-tab) { border-radius: 999px !important; } }

/* Aktiver Menuepunkt: weiche Pille in der Markenfarbe */
html body #sbNav .d-punkt.an { background: var(--l24-akzent-weich) !important; box-shadow: none !important; color: var(--l24-akzent) !important; }

/* ── Handy-Lagefilter: Farbe nach Bedeutung mit den Paket-Farben ── */
html body .lagefilter .lgf { --f: var(--k-blau); --ft: var(--k-blau-tief); }
html body .lagefilter .lgf:is([data-lage="dran"], [data-lage="abgel"]) { --f: var(--k-rot); --ft: var(--k-rot-tief); }
html body .lagefilter .lgf:is([data-lage="kunde"], [data-lage="repro"]) { --f: var(--k-gelb); --ft: var(--k-gelb-tief); }
html body .lagefilter .lgf:is([data-lage="zu"], [data-lage="fertig"]) { --f: var(--k-gruen); --ft: var(--k-gruen-tief); }

/* ── Glaeserne Symbole (l24-symbole.js): weiche Groesse, kein Rand ── */
.l24-glas-sym { display: block; flex: none; overflow: visible; }
.l24-linie-sym { display: inline-block; flex: none; vertical-align: middle; }

/* ── Paket 2: Kacheln mit glaesernem Symbol (data-sym, bestueckt von l24-symbole.js) ──
   Farbe nach Bedeutung ueber data-farbe: zwei weiche Lichtflecken auf 6 % Grundfarbe,
   weisser Doppelrand innen, Zahl in der tiefen Farbe. Gewaehlt: Rand in der tiefen Farbe. */
html body [data-farbe="rot"]:not(#_):not(#_)     { --f: var(--k-rot);     --ft: var(--k-rot-tief); }
html body [data-farbe="gelb"]:not(#_):not(#_)    { --f: var(--k-gelb);    --ft: var(--k-gelb-tief); }
html body [data-farbe="blau"]:not(#_):not(#_)    { --f: var(--k-blau);    --ft: var(--k-blau-tief); }
html body [data-farbe="gruen"]:not(#_):not(#_)   { --f: var(--k-gruen);   --ft: var(--k-gruen-tief); }
html body [data-farbe="violett"]:not(#_):not(#_) { --f: var(--k-blau); --ft: var(--k-blau-tief); }
html body [data-farbe="grau"]:not(#_):not(#_)    { --f: var(--k-blau); --ft: var(--k-blau-tief); }
html body .l24-symk[data-farbe]:not(#_) {
  position: relative; isolation: isolate;
  /* Keine Lichtflecken mehr (Max, Nov. 2026: "rechts dunkler, Rest heller"): gleiches Licht
     von oben wie jede Kachel, siehe assets/l24-guss.css. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--f) 8%, white), color-mix(in srgb, var(--f) 17%, white)) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55), 0 0 0 1px rgba(23, 23, 26, .05) !important;
}
html body .l24-symk[data-farbe]:is(.an, .active, [aria-pressed="true"]):not(#_) {
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55), 0 0 0 1.5px var(--ft) !important;
}
html body .l24-symk[data-farbe]:not(#_):not(#_) :is(.zahl-gross, .sp-kachel-zahl, .prog-value, .zb-kpi-n, b):not(.l24-tag *) { color: var(--ft) !important; }
.l24-symk[data-sym]:not(#_) { padding-right: 72px !important; }
.l24-symk-bild { position: absolute; right: 14px; bottom: 12px; display: block; line-height: 0; pointer-events: none; z-index: 0; }

/* ── Paket 3: Handy ──────────────────────────────────────────────────────
   Lage-Filter als Mini-Kacheln (Paket: Zahl in der tiefen Farbe, Wort darunter,
   bis vier in einer Reihe). Bei mehr Lagen wischt man seitlich, nichts bricht um.
   Die Farbe kommt weiter aus --f/--ft nach Bedeutung (siehe oben). */
html body .lagefilter:not(#_) {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(66px, 1fr); gap: 8px;
  /* 5 px Luft rundum, sonst schneidet das seitliche Wischen den Auswahlrand ab */
  padding: 5px 5px 4px !important; margin-left: -5px !important; margin-right: -5px !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow-x: auto;
}
/* Kacheln: eine saubere Farbe von oben nach unten (Max, Nov. 2026). Vorher ein dunkler Fleck oben
   rechts und ein farbiger Schatten, der nach unten ausblich. */
html body .lagefilter:not(#_) .lgf {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  height: auto; min-height: 58px; padding: 9px 12px; border-radius: 18px; white-space: nowrap;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--f) 11%, #fff), color-mix(in srgb, var(--f) 16%, #fff));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px color-mix(in srgb, var(--f) 16%, transparent), 0 1px 2px rgba(20, 24, 32, .05);
}
html body .lagefilter:not(#_) .lgf b { order: -1; font-size: 22px; font-weight: 760; line-height: 1; letter-spacing: -.01em; color: var(--ft); font-variant-numeric: tabular-nums; }
html body .lagefilter:not(#_) .lgf span { font-size: 12.5px; font-weight: 600; color: var(--ft); opacity: .9; }
html body .lagefilter:not(#_) .lgf[aria-pressed="true"] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--f) 14%, #fff), color-mix(in srgb, var(--f) 19%, #fff)) !important;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 0 0 1.5px var(--ft) !important;
}
/* Gleitende Markierung: bei Kacheln traegt jede ihre Farbe selbst, die Auswahl zeigt der Rand.
   Darum bleibt die gewaehlte Kachel sichtbar, statt durchsichtig ueber dem Gleiter zu liegen. */
html body .lagefilter.mit-gleiter:not(#_) > .l24-gleiter { display: none !important; }
/* Vier :not(#…), damit die Regel ueber l24-ruhe.css ".mit-gleiter > [aria-pressed]" (drei) steht:
   dort wird die gewaehlte Kachel durchsichtig, und "du bist dran" hatte keine Flaeche mehr (Nov. 2026). */
html body .lagefilter.mit-gleiter:not(#_):not(#__):not(#___):not(#____) > .lgf[aria-pressed="true"] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--f) 14%, #fff), color-mix(in srgb, var(--f) 19%, #fff)) !important;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 0 0 1.5px var(--ft) !important;
}
html body .b-bandzeile:not(#_) { align-items: stretch; }
html body .b-bandzeile:not(#_) > .b-rund { align-self: center; }

/* Mehr-Menue: Gruppen mit glaesernem Motiv statt blauem Kreis */
html body .b-symq.b-symglas:not(#_) { background: none; width: 34px; height: 34px; }
html body .b-symq.b-symglas:not(#_) svg { width: 34px; height: 34px; stroke: none; fill: none; }
html body .lagefilter .lgf:is([data-lage="problem"], [data-lage="kein_label"], [data-lage="angekuendigt"]) { --f: var(--k-rot); --ft: var(--k-rot-tief); }
html body .lagefilter .lgf[data-lage="unterwegs"] { --f: var(--k-gelb); --ft: var(--k-gelb-tief); }

/* ── Paket 4: leere Zustaende, Toast ─────────────────────────────────────
   Leere Listen zeigen ein glaesernes Bild (Paket: 132 px auf Listen, am Handy 112).
   Bild als Hintergrund aus der SVG-Datei: jede Datei ist ein eigenes Dokument,
   die Verlaufs-Kennungen kommen sich nicht in die Quere.
   Motiv nach Lage: erledigt (nichts offen), Suche (nichts gefunden), Werkzeug
   (nicht erreichbar), sonst die leere Ablage. */
html body .l24-leer:not(#_) .zeichen {
  width: 132px; height: 132px; border-radius: 0; margin-bottom: 2px;
  background: url("symbole/glas-erledigt.svg?h=4261ec57107b") center / contain no-repeat; box-shadow: none;
}
html body .l24-leer:not(#_) .zeichen svg { display: none; }
html body .l24-leer.z-suche:not(#_) .zeichen { background-image: url("symbole/glas-suche.svg?h=edd55fc43d31"); }
html body .l24-leer:is(.z-kiste, .z-post):not(#_) .zeichen { background-image: url("symbole/glas-ablage.svg?h=a8285616f9aa"); }
html body .l24-empty:not(:has(svg)):not(#_)::before {
  width: 132px; height: 132px; border-radius: 0; margin: 0 auto 8px;
  background: url("symbole/glas-ablage.svg?h=a8285616f9aa") center / contain no-repeat; box-shadow: none;
}
html body .leer-zeile:not(#_)::before {
  width: 36px; height: 36px; border-radius: 0; left: 16px;
  background: url("symbole/glas-ablage.svg?h=a8285616f9aa") center / contain no-repeat; box-shadow: none;
}
/* Handy-App */
html body #app .leer:not(#_)::before {
  content: ""; display: block; width: 112px; height: 112px; margin: 0 auto 10px;
  background: url("symbole/glas-ablage.svg?h=a8285616f9aa") center / contain no-repeat;
}
html body #app .leer.gut:not(#_)::before { background-image: url("symbole/glas-erledigt.svg?h=4261ec57107b"); }
html body #app .leer.such:not(#_)::before { background-image: url("symbole/glas-suche.svg?h=edd55fc43d31"); }
html body #app .leer.fehlt:not(#_)::before { background-image: url("symbole/glas-werkzeug.svg?h=86fbb6865c8c"); }

/* Toast: gruener Haken vor dem Text (Fehler bleiben ohne) */
html body :is(.l24-ui-toast:not(.fehler), .l24-toast:not(.err)):not(#_) { display: flex; align-items: center; gap: 10px; }
html body :is(.l24-ui-toast:not(.fehler), .l24-toast:not(.err)):not(#_)::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat,
    linear-gradient(160deg, #4ADE80, #15803D);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px -4px rgba(21, 128, 61, .6);
}

/* ── Paket 5: Symbolkreis wird glaesernes Symbol (data-glas, l24-symbole.js) ── */
html body .l24-glasfeld:not(#_) { background: none !important; box-shadow: none !important; border: 0 !important; }
html body .l24-glasfeld:not(#_) > svg { display: block; }
/* Uebersicht: der Pfeil-Knopf oben rechts lag ueber der grossen Zahl. Die Zahl rueckt davor. */
html body .raster-3 > .karte[data-ziel]:not(#_) { padding-right: 56px !important; }