/* =========================================================================
   Saksesful Dashboard — Basis-Styles
   Hell fuer das Kunden-Portal, dunkles Vollbild-Theme fuer den Lager-Kiosk.
   ========================================================================= */

:root {
    --bg: #f4f6f8;
    --card: #ffffff;
    --card-border: #e3e8ee;
    --text: #1b2733;
    --muted: #6b7785;
    --accent: #1f6feb;
    --ok: #1a7f37;
    --warn: #b35900;
    --crit: #d1242f;
    --radius: 14px;
    --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);

    /* Wert-Akzentfarben (an die Alt-Ansicht angelehnt, aber ruhiger/moderner) */
    --val-neutral: #1b2733;   /* Standard (dunkel) */
    --val-blau: #1f6feb;      /* Wochen-Verpackt-Werte */
    --val-rot: #d1242f;       /* kritisch / offene Bestellungen */
    --val-gruen: #1a7f37;     /* positiv / versendet */
    --val-grau: #8a95a3;      /* Vorjahres-/dezente Werte */

    /* Picklisten-Fortschrittsbalken: gruen mit Verlauf; voll -> rot (Eskalation) */
    --bar-from: #2ea043;
    --bar-to:   #1a7f37;
    --bar-full-from: #ff5a4d;
    --bar-full-to:   #d1242f;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ---- App-Shell (Kunden-Portal) ---- */
.app-shell { min-height: 100%; display: flex; flex-direction: column; }
.app-header {
    display: flex; align-items: baseline; gap: 12px;
    padding: 14px 22px; background: var(--card);
    border-bottom: 1px solid var(--card-border);
}
.app-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.app-version { font-size: 11px; color: var(--muted); padding: 2px 8px; background: var(--bg); border-radius: 999px; }
.app-main { flex: 1; padding: 24px; max-width: 1680px; width: 100%; margin: 0 auto; }

/* ---- Kachel-Raster: FREIES 40x40px-Raster (Marcus-Wunsch 2026-09-11) ----
   Ersetzt das vorherige feste 4-Spalten-Grid. Jede Kachel bekommt ihre
   grid-column/grid-row INLINE aus der gespeicherten (oder Default-)Position/
   Groesse (siehe DashboardGrid.razor `LayoutFuer`/`dashboard-layout.js`).
   25 Spalten x 14 Zeilen a 40px deckt bequem 1920x1080 ab, reicht aber auch
   fuer schmalere Bildschirme (Scroll bei Bedarf). Historie der zwei Grid-
   Blowup-Fallen (align-items:stretch global / flex:1 in Scroll-Containern)
   bleibt unten bei .picklist-scroll erhalten, da dieselbe Ursache bei einem
   freien Raster mit explizitem grid-row/grid-column PRO KACHEL nicht mehr
   auftreten kann (keine gemeinsamen impliziten Zeilen-Spuren mehr noetig). */
.dashboard-grid.free-grid {
    display: grid;
    grid-template-columns: repeat(25, 40px);
    /* Bugfix 2026-09-14 ("Kiosk-Layout zerschossen, wenn Picklisten-Kachel viele Zeilen hat"):
       grid-auto-rows:40px (implizite Tracks) verhindert das Wachsen NICHT. Ein Grid-Item, das
       viele implizite Zeilen ueberspannt (Picklisten-Kachel: grid-row 1/span 12) und dessen
       Inhalt hoeher als die Spur-Summe ist, dehnt die GETEILTEN Zeilen-Spuren trotzdem auf -
       dadurch wuchsen die linken Kennzahl-Kacheln von 120px auf ~337px mit. Empirisch (Headless-
       Matrix, tmp_kiosk_matrix.html): min-height:0, overflow:hidden und max-height:100% helfen
       NICHT (Prozent loest sich gegen die wachsende Zelle auf). NUR EXPLIZITE Zeilen-Tracks
       bleiben hart bei 40px. Daher grid-template-rows explizit setzen (24 Zeilen ~= 960px, deckt
       das 1080p-Kiosk-Bild ab); grid-auto-rows:40px bleibt als Fallback fuer Zeilen jenseits 24. */
    grid-template-rows: repeat(24, 40px);
    /* Bugfix 2026-09-14 ("Groesse aendert sich beim Verschieben"): OHNE grid-auto-columns
       verwendet der Browser fuer Spalten JENSEITS der 25 expliziten Spalten automatisch
       auto-bemessene Tracks (Default-Wert von grid-auto-columns). Die Picklisten-Kachel steht
       standardmaessig schon bei Spalte 11 + Span 14 = Ende Spalte 25, also GENAU am Rand -
       beim Verschieben nach rechts ragt sie sofort in eine auto-Spalte hinein, die sich am
       Inhalt statt an 40px bemisst und dadurch die Kachel optisch schrumpfen liess (wirkte wie
       eine Groessenaenderung, obwohl nur die Position sich geaendert hatte). grid-auto-rows war
       bereits korrekt fest auf 40px (siehe unten) - grid-auto-columns fehlte als Gegenstueck. */
    grid-auto-columns: 40px;
    grid-auto-rows: 40px;
    gap: 0;
    align-content: start;
    position: relative;
    min-height: calc(100vh - 200px);
    overflow: auto;
}

/* Toolbar oberhalb des Rasters: Editier-Modus umschalten. */
.dashboard-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.layout-edit-btn, .layout-reset-btn {
    padding: 7px 14px; border-radius: 8px; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.layout-edit-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.layout-reset-btn { color: var(--crit); }
.layout-hint { font-size: 12.5px; color: var(--muted); }
/* Kein Kiosk-Theming fuer die Toolbar mehr noetig (Bugfix 2026-09-14, "Layout bearbeiten
   nicht in der Liveansicht"): DashboardGrid.razor rendert die Toolbar jetzt nur noch bei
   Kiosk=false (Portal), sie kommt im Lager-TV also gar nicht mehr in den DOM. */

/* Wrapper JEDER Kachel im freien Raster: traegt grid-column/grid-row inline
   sowie die --tile-font-scale-Variable, die StatTile/PicklistTile fuer die
   individuelle Schriftgroesse nutzen. */
.tile-wrapper {
    position: relative;
    min-width: 0;
    min-height: 0;
    font-size: calc(1em * var(--tile-font-scale, 1));
}
/* Kiosk-Basis-Schriftgroesse (20px statt Browser-Default 16px) sitzt HIER am Wrapper,
   nicht mehr direkt an .stat-tile/.picklist-tile (Bugfix 2026-09-14: ein fixes
   font-size:20px an diesen Kacheln ueberschrieb bisher die A+/A--Skalierung komplett,
   siehe --tile-font-scale oben - Marcus-Meldung "A+/A- hat keine Wirkung"). Hoehere
   Spezifitaet (.dashboard-grid.kiosk .tile-wrapper) gewinnt gegenueber der Basisregel. */
.dashboard-grid.kiosk .tile-wrapper { font-size: calc(20px * var(--tile-font-scale, 1)); }
.tile-wrapper > .tile { height: 100%; width: 100%; }
.tile-wrapper.picklist-wrapper { display: flex; }
.tile-wrapper.picklist-wrapper > .tile { display: flex; flex-direction: column; }

/* Editier-Modus: Kacheln erhalten Griff-Cursor + Hover-Rahmen, damit klar ist,
   dass sie jetzt anfassbar sind. Extra Bottom-Padding schafft Platz fuer die
   A-/A+-Schriftbuttons, die sonst bei kleinen Kacheln den Inhalt ueberlappen
   (verifiziert per Screenshot 2026-09-11). */
.tile-wrapper.tile-editable { cursor: grab; touch-action: none; }
.tile-wrapper.tile-editable > .tile { outline: 2px dashed transparent; transition: outline-color .15s ease; padding-bottom: 2em; }
.tile-wrapper.tile-editable:hover > .tile { outline-color: var(--accent); }
.tile-wrapper.tile-dragging { cursor: grabbing; z-index: 20; opacity: .85; }
.tile-wrapper.tile-dragging > .tile { outline-color: var(--accent); box-shadow: 0 8px 24px rgba(16,24,40,.25); }
.tile-wrapper.tile-resizing { z-index: 20; }
.tile-wrapper.tile-resizing > .tile { outline-color: var(--warn); }

/* Trefferflaeche vergroessert 16px->22px (Marcus-Feedback 2026-09-14: bei kleinen
   Kacheln war der Griff schwer zu treffen); Groesse jetzt wie die A-/A+-Buttons. */
.tile-resize-handle {
    position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px;
    cursor: nwse-resize; z-index: 5;
    background:
        linear-gradient(135deg, transparent 0 50%, var(--accent) 50% 60%, transparent 60% 70%, var(--accent) 70% 80%, transparent 80% 100%);
    opacity: .8;
}
.tile-font-controls {
    position: absolute; left: 4px; bottom: 4px; z-index: 5;
    display: flex; gap: 4px;
}
.tile-font-controls button {
    width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1;
}
.kiosk-root .tile-font-controls button { background: var(--k-card); color: var(--k-val-neutral); border-color: var(--k-card-border); }

.tile {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;           /* eigene Hoehe je Kachel */
    transition: box-shadow .15s ease, transform .15s ease;
}
.tile:hover { box-shadow: 0 6px 20px rgba(16,24,40,.10); }

/* Zahlen-Kachel: kompakt, feste, ruhige Hoehe.
   Schriftgroessen in `em` statt `px` (2026-09-11): der Wrapper setzt
   `font-size: calc(1em * var(--tile-font-scale))`, dadurch skaliert JEDE
   Kachel individuell mit, wenn sie im Editier-Modus per "A+"/"A-" vergroessert
   wird - ohne dass ein px-Wert pro Kachel manuell gepflegt werden muss. */
.stat-tile { min-height: 96px; padding: 0.875em 1em; justify-content: space-between; font-size: 1em; }
.tile-title {
    font-size: 0.72em; font-weight: 600; color: var(--text);
    letter-spacing: .04em; text-transform: uppercase;
}
.tile-value { font-size: 2.25em; font-weight: 750; line-height: 1; letter-spacing: -.02em; color: var(--val-neutral); }

/* Farb-Akzent der Wertzahl je Kachel (wie Alt-Ansicht) */
.stat-tile.accent-neutral .tile-value { color: var(--val-neutral); }
.stat-tile.accent-blau    .tile-value { color: var(--val-blau); }
.stat-tile.accent-rot     .tile-value { color: var(--val-rot); }
.stat-tile.accent-gruen   .tile-value { color: var(--val-gruen); }
.stat-tile.accent-grau    .tile-value { color: var(--val-grau); }
.stat-tile.accent-warn    .tile-value { color: var(--warn); }
/* dezenter Farbstreifen oben je Akzent */
.stat-tile { position: relative; overflow: hidden; }
.stat-tile::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--card-border);
}
.stat-tile.accent-blau::before  { background: var(--val-blau); }
.stat-tile.accent-rot::before   { background: var(--val-rot); }
.stat-tile.accent-gruen::before { background: var(--val-gruen); }
.stat-tile.accent-grau::before  { background: var(--val-grau); }
.stat-tile.accent-warn::before  { background: var(--warn); }
.tile-sub { font-size: 0.75em; color: var(--muted); }
.tile-count {
    display: inline-block; margin-left: 8px; padding: 1px 9px;
    font-size: 0.75em; font-weight: 700; border-radius: 999px;
    background: var(--bg); color: var(--muted); vertical-align: middle;
}
.tile-empty { color: var(--muted); font-size: 0.8125em; padding: 6px 0; }

/* Listen-Kachel (Adressfehler/Stornos): Position kommt inline vom .tile-wrapper. */
.list-tile .tile-list {
    margin: 2px 0 0; padding: 0; list-style: none;
    overflow: auto; max-height: 260px;
    display: flex; flex-direction: column; gap: 2px;
}
.list-tile li {
    font-variant-numeric: tabular-nums; font-size: 0.84375em;
    padding: 4px 8px; border-radius: 6px; background: var(--bg);
}

/* Picklisten-Kachel: Position/Groesse kommt jetzt inline vom .tile-wrapper
   (freies Raster, Marcus-Wunsch 2026-09-11). Bleibt intern ein Flex-Layout,
   damit .picklist-scroll den Rest der Wrapper-Hoehe ausfuellen kann. */
.picklist-tile {
    display: flex;
    flex-direction: column;
    font-size: 1em;
}
.picklist-head {
    display: flex; justify-content: space-between;
    font-size: 0.72em; font-weight: 600; color: var(--muted);
    letter-spacing: .04em; text-transform: uppercase;
    padding: 0 2px 6px; border-bottom: 1px solid var(--card-border);
}
.picklist-head span { font-size: 0.95em; }
/* GRID-BLOWUP-FALLE, 2. Runde (verifiziert per Screenshot 2026-09-11 mit realistisch
   vielen Picklisten-Zeilen, siehe Skill layout-headless-screenshot-verifizieren):
   `flex:1 1 auto` auf .picklist-scroll innerhalb der Grid-Zelle (.picklist-tile mit
   align-self:stretch) sieht harmlos aus, weil die Zelle selbst nicht mehr waechst -
   ABER `grid-auto-rows:min-content` bemisst die Zeilen-Spuren weiterhin am
   MIN-CONTENT-Bedarf ALLER Zellen der Spur. Ein Flex-Container mit vielen Kindern hat
   auch mit `flex:1`/`min-height:0` einen von der Kindanzahl abhaengigen min-content-Bedarf,
   der bei ~18 Picklisten-Zeilen die komplette implizite 4-Zeilen-Spur auseinanderzieht
   (mit 1 Zeile: kompakt/korrekt: mit 18 Zeilen: riesige Luecken zwischen den
   Kennzahl-Kacheln links). Fix: feste `max-height` statt `flex:1` - die Grid-Zeilen-
   Spur bemisst sich dann an dieser festen Pixelgrenze, nicht am Scroll-Inhalt.
   Im freien Raster (2026-09-11) hat die Picklisten-Kachel eine EXPLIZITE Hoehe
   vom Wrapper (grid-row-span * 40px) statt calc(100vh-...) - flex:1 auf einem
   Element mit fester Elternhoehe ist unkritisch (keine gemeinsamen impliziten
   Zeilen-Spuren mit anderen Kacheln mehr, siehe .dashboard-grid.free-grid). */
.picklist-scroll { overflow: auto; flex: 1 1 auto; min-height: 0; margin-top: 8px; }
/* Marcus-Feedback 2026-09-14 (ERSETZT das 2026-09-13-Stretch-Verhalten): Beim VERGROESSERN
   der Kachel mit WENIGEN aktiven Picklisten (z.B. 4) zogen sich die Zeilen per `flex:1 1 auto`
   + `min-height:100%` auf die volle Kachelhoehe auf -> einzelne Zeilen wurden riesig. Gewuenscht:
   Zeilen orientieren sich am INHALT / an der Schriftgroesse (min-height:3.5em + font-size in `em`,
   skaliert mit A+/A-), NICHT an der Kachelhoehe. Daher: kein `min-height:100%` am Container und
   `.pl-row { flex: 0 0 auto }` (kein Strecken). Wenige Zeilen sitzen oben (Leerraum unten wird
   bewusst in Kauf genommen), viele Zeilen wachsen ueber .picklist-scroll hinaus -> bestehender
   interner Scroll (overflow:auto) greift wie bisher. */
.picklist-bars { display: flex; flex-direction: column; gap: 10px; }

/* Eine Balken-Zeile: farbiger Balken als Hintergrund, Name links, Anzahl rechts.
   Schrift in `em` (2026-09-11), damit "A+"/"A-" im Editier-Modus auch die
   Picklisten-Schrift skaliert (font-size sitzt am .picklist-tile-Wrapper). */
.pl-row {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto; min-height: 3.5em; padding: 0.625em 1.125em; border-radius: 10px;
    background: var(--bg); overflow: hidden;
}
.pl-bar {
    position: absolute; top: 0; left: 0; bottom: 0; width: 0;
    background: linear-gradient(90deg, var(--bar-from), var(--bar-to));
    border-radius: 10px; transition: width .4s ease;
}
.pl-name, .pl-count { position: relative; z-index: 1; }
/* Namenslabel: dunkel + weisser Halo, damit es SOWOHL auf dem gruenen Balken
   als auch daneben auf hellem Grund gut lesbar bleibt. flex+min-width:0+ellipsis
   verhindert, dass lange Namen den Zaehler ueberlappen (war das Lesbarkeits-Problem). */
.pl-name {
    flex: 1 1 auto; min-width: 0; margin-right: 0.875em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: left; font-size: 1.375em; font-weight: 700; color: var(--text);
    text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9);
}
.pl-count {
    flex: 0 0 auto;
    text-align: right; font-size: 1.375em; font-weight: 800; font-variant-numeric: tabular-nums;
    min-width: 2.4em; padding-left: 0.625em; color: var(--text);
}
/* Zeilen mit Wert (unter Schwelle): gruener Balken, Text dunkel + lesbar */
.pl-row.has-value .pl-name  { color: var(--text); }
.pl-row.has-value .pl-count { color: var(--text); }
/* Nullwerte: kein Balken, dezent grau */
.pl-row.is-zero { background: var(--bg); }
.pl-row.is-zero .pl-name  { color: var(--muted); font-weight: 600; text-shadow: none; }
.pl-row.is-zero .pl-count { color: var(--muted); }

/* Schmalere Anzeigen: das freie Raster hat pro Kachel eine eigene, in Pixeln
   gespeicherte Position/Groesse (kein automatischer Spalten-Umbruch mehr moeglich,
   da grid-column/grid-row inline pro Kachel gesetzt sind). `.dashboard-grid.free-grid`
   hat bereits `overflow:auto` - auf sehr schmalen Bildschirmen scrollt das Raster
   horizontal/vertikal, statt Kacheln zu ueberlappen. Editier-Modus erlaubt jederzeit,
   die Anordnung fuer den jeweiligen Bildschirm manuell anzupassen. */

/* ---- Kritisch/Blink ---- */
@keyframes blink-bg {
    0%, 100% { background: var(--card); }
    50%      { background: #ffe3e3; }
}
.tile-blink { animation: blink-bg 1s steps(1, end) infinite; border-color: var(--crit); }

@keyframes blink-row {
    0%, 100% { background: var(--bar-full-to); }
    50%      { background: #7a0e00; }
}
/* Voll (Wert >= Schwelle): kraeftiger roter Vollbalken, blinkt zur Eskalation.
   Hier ist weisser Text korrekt (durchgehend roter Grund). */
.pl-row.row-blink { background: var(--bar-full-to); }
.pl-row.row-blink .pl-bar {
    width: 100% !important;
    background: linear-gradient(90deg, var(--bar-full-from), var(--bar-full-to));
    animation: blink-row 1s steps(1, end) infinite;
}
.pl-row.row-blink .pl-name, .pl-row.row-blink .pl-count { color: #fff; font-weight: 800; text-shadow: none; }

/* ---- Admin-Seiten (z. B. Kiosk-Verwaltung, 2026-09-14) ---- */
.admin-card {
    max-width: 900px; margin: 0 0 20px; background: var(--card);
    border: 1px solid var(--card-border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px 24px;
}
.admin-card h2 { margin-top: 0; font-size: 17px; }
.admin-card p { color: var(--muted); font-size: 14px; }
.theme-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.btn-primary, .btn-secondary, .btn-danger {
    display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent;
    font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.4;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--card); color: var(--text); border-color: var(--card-border); }
.btn-danger { background: #fff; color: var(--crit); border-color: var(--crit); }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--card-border); }
.admin-table tr.row-inactive { opacity: .55; }
.admin-table .admin-actions { display: flex; gap: 8px; white-space: nowrap; }
.link-field {
    width: 100%; min-width: 260px; padding: 6px 8px; border: 1px solid var(--card-border);
    border-radius: 6px; font-size: 12.5px; background: var(--bg); color: var(--text);
}

/* ---- Login ---- */
.login-card {
    max-width: 360px; margin: 8vh auto; background: var(--card);
    border: 1px solid var(--card-border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 28px;
}
.login-card h1 { margin-top: 0; font-size: 20px; }
.login-card label { display: block; margin: 14px 0 4px; font-size: 14px; color: var(--muted); }
.login-card input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--card-border);
    border-radius: 8px; font-size: 15px;
}
.login-card button {
    margin-top: 20px; width: 100%; padding: 11px; border: 0; border-radius: 8px;
    background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.login-error { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #ffe3e3; color: var(--crit); font-size: 14px; }

/* =========================================================================
   Kiosk-Modus: dunkles Vollbild fuer die Lager-Anzeige
   ========================================================================= */
/* Kiosk-Theme-Variablen (Marcus-Wunsch 2026-09-14: Hell/Dunkel in den Einstellungen
   umschaltbar, siehe AppSetting.KioskDunkelModus + IAppSettingsService). Sitzen an
   .kiosk-shell (umschliesst ALLE drei Kiosk-Zustaende: Pruefung laeuft/abgelehnt/
   freigegeben, siehe Kiosk.razor), damit auch .kiosk-hinweis (Lade-/Fehlermeldung
   VOR Token-Pruefung) korrekt eingefaerbt ist. Default = dunkel (bisheriges Verhalten,
   unveraendert); die Klasse "kiosk-light" auf .kiosk-shell schaltet auf helle Werte um
   (wiederverwendet dieselben Farben wie das Portal-Theme). */
.kiosk-shell {
    --k-bg: #0d1117;
    --k-card: #161b22;
    --k-card-border: #30363d;
    --k-muted: #8b949e;
    --k-header: #2ea043;
    --k-hinweis-text: #c9d1d9;
    --k-row-bg: #21262d;
    --k-pl-text: #ffffff;
    --k-pl-shadow: 0 1px 2px rgba(0,0,0,.6);
    --k-blink-a: #161b22;
    --k-blink-b: #5a1a1f;
    --k-val-neutral: #e6edf3;
    --k-val-blau: #58a6ff;
    --k-val-rot: #ff6b64;
    --k-val-gruen: #3fb950;
    --k-val-grau: #8b949e;
    --k-val-warn: #d29922;
    --k-before-neutral: #30363d;
    --k-before-blau: #1f6feb;
    --k-before-rot: #da3633;
    --k-before-gruen: #2ea043;
    --k-before-grau: #6e7681;
    --k-before-warn: #d29922;
}
.kiosk-shell.kiosk-light {
    --k-bg: #f4f6f8;
    --k-card: #ffffff;
    --k-card-border: #e3e8ee;
    --k-muted: #6b7785;
    --k-header: #1a7f37;
    --k-hinweis-text: #1b2733;
    --k-row-bg: #f4f6f8;
    --k-pl-text: #1b2733;
    --k-pl-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9);
    --k-blink-a: #ffffff;
    --k-blink-b: #ffe3e3;
    --k-val-neutral: #1b2733;
    --k-val-blau: #1f6feb;
    --k-val-rot: #d1242f;
    --k-val-gruen: #1a7f37;
    --k-val-grau: #8a95a3;
    --k-val-warn: #b35900;
    --k-before-neutral: #e3e8ee;
    --k-before-blau: #1f6feb;
    --k-before-rot: #d1242f;
    --k-before-gruen: #1a7f37;
    --k-before-grau: #8a95a3;
    --k-before-warn: #b35900;
}

.kiosk-root { min-height: 100vh; background: var(--k-bg); padding: 20px; }

/* Titel oben links, Farbe folgt dem Kiosk-Theme (gruen in beiden Varianten, wie Alt-Ansicht). */
.kiosk-header {
    font-size: 30px; font-weight: 800; letter-spacing: -.01em;
    color: var(--k-header); padding: 4px 4px 18px;
}
.kiosk-hinweis {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--k-bg); color: var(--k-hinweis-text); font-size: 22px;
}
.kiosk-fehler { color: #ff7b72; }  /* Fehlerfarbe bewusst theme-unabhaengig (Warnrot bleibt gut sichtbar) */

.dashboard-grid.kiosk {
    /* grid-template-columns/rows kommen jetzt einheitlich von .free-grid (25x40px-Raster).
       Kiosk-Header nimmt oben etwas Platz weg -> Rest ans Grid geben. */
    min-height: calc(100vh - 130px);
}
.dashboard-grid.kiosk .tile {
    background: var(--k-card);
    border-color: var(--k-card-border);
    color: var(--k-val-neutral);
    box-shadow: none;
}
.dashboard-grid.kiosk .tile:hover { box-shadow: none; }
/* min-height an MIN_SPAN_ROWS=3 (120px, dashboard-layout.js) angeglichen (Bugfix
   2026-09-14: vorher 128px > 3*40px, Kachel ragte beim Minimal-Resize aus ihrer
   Grid-Zelle heraus - Ursache der "Resize bei kleinen Kacheln unzuverlaessig"-Meldung).
   font-size kommt jetzt von .dashboard-grid.kiosk .tile-wrapper (siehe oben). */
.dashboard-grid.kiosk .stat-tile { min-height: 120px; }
.dashboard-grid.kiosk .tile-title { color: var(--k-muted); }

/* Akzentfarben je Theme (dunkel: heller fuer Kontrast; hell: identisch zum Portal) */
.dashboard-grid.kiosk .stat-tile.accent-neutral .tile-value { color: var(--k-val-neutral); }
.dashboard-grid.kiosk .stat-tile.accent-blau    .tile-value { color: var(--k-val-blau); }
.dashboard-grid.kiosk .stat-tile.accent-rot     .tile-value { color: var(--k-val-rot); }
.dashboard-grid.kiosk .stat-tile.accent-gruen   .tile-value { color: var(--k-val-gruen); }
.dashboard-grid.kiosk .stat-tile.accent-grau    .tile-value { color: var(--k-val-grau); }
.dashboard-grid.kiosk .stat-tile.accent-warn    .tile-value { color: var(--k-val-warn); }
.dashboard-grid.kiosk .stat-tile::before { background: var(--k-before-neutral); }
.dashboard-grid.kiosk .stat-tile.accent-blau::before  { background: var(--k-before-blau); }
.dashboard-grid.kiosk .stat-tile.accent-rot::before   { background: var(--k-before-rot); }
.dashboard-grid.kiosk .stat-tile.accent-gruen::before { background: var(--k-before-gruen); }
.dashboard-grid.kiosk .stat-tile.accent-grau::before  { background: var(--k-before-grau); }
.dashboard-grid.kiosk .stat-tile.accent-warn::before  { background: var(--k-before-warn); }

/* Kiosk: Picklisten-Balkenzeilen. Basis-Schriftgroesse kommt jetzt von
   .dashboard-grid.kiosk .tile-wrapper (siehe oben); .pl-name/.pl-count bleiben in
   `em` und skalieren automatisch mit. */
.dashboard-grid.kiosk .picklist-head { color: var(--k-muted); border-bottom-color: var(--k-card-border); }
.dashboard-grid.kiosk .pl-row { background: var(--k-row-bg); }
.dashboard-grid.kiosk .pl-name {
    color: var(--k-pl-text); text-shadow: var(--k-pl-shadow);
}
.dashboard-grid.kiosk .pl-row.has-value .pl-name,
.dashboard-grid.kiosk .pl-row.has-value .pl-count { color: var(--k-pl-text); }
.dashboard-grid.kiosk .pl-count { color: var(--k-val-neutral); }
.dashboard-grid.kiosk .pl-row.is-zero .pl-name,
.dashboard-grid.kiosk .pl-row.is-zero .pl-count { color: var(--k-muted); text-shadow: none; }
.dashboard-grid.kiosk .pl-row.row-blink .pl-name,
.dashboard-grid.kiosk .pl-row.row-blink .pl-count { color: #fff; text-shadow: none; }
.dashboard-grid.kiosk .tile-count { background: var(--k-row-bg); color: var(--k-muted); }
.dashboard-grid.kiosk .list-tile li { background: var(--k-row-bg); color: var(--k-val-neutral); }

.dashboard-grid.kiosk .tile-blink { animation: blink-bg-dark 1s steps(1, end) infinite; }
@keyframes blink-bg-dark {
    0%, 100% { background: var(--k-blink-a); }
    50%      { background: var(--k-blink-b); }
}