/* /Pages/Event/Graph/EventPlanGraphEditor.razor.rz.scp.css */
/* AUFTRAG-EVENT-ABLAUF-INTERFACE-CC.md Paket C: der Ablauf-Outliner.
   pos-theme-Tokens (Doc 20/pos-theme.css, Doc 12 Kap. 10.5 "Elevation") statt
   eigener Farben - wirkt wie aus einem Guss mit Kasse/KDS.

   Leitgedanke der Gestaltung: EINE ruhige Liste. Die Zeile traegt Name und die
   drei Werte; alles Weitere (Herleitung, Referenzen, Konflikte) tritt erst
   hervor, wenn es etwas zu sagen gibt. Kein Gantt, keine Balken, keine
   Farb-Ampel. */

.eo-shell[b-7fkh3n5zwv] {
    margin: 0 auto;
    padding: 20px 24px 60px;
    color: var(--pos-text);
    font-family: var(--tim-font);
    background: var(--pos-canvas);
    min-height: 100vh;
}

/* Eingebettet im "Plan"-Tab des EventPlanForm: ein Abschnitt im
   Backoffice-Formular, keine eigene Seite. */
.eo-embedded[b-7fkh3n5zwv] {
    min-height: 0;
    padding: 8px 0 16px;
    background: transparent;
}

.eo-topbar[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.eo-title[b-7fkh3n5zwv] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.eo-topbar-spacer[b-7fkh3n5zwv] {
    flex: 1;
}

.eo-ist-toggle[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pos-muted);
}

.eo-muted[b-7fkh3n5zwv] {
    color: var(--pos-muted);
}

/* ---- Der Bestimmtheits-Anzeiger ----
   Sachliche Auskunft, kein Ampel-Kitsch: derselbe ruhige Ton wie der Rest der
   Leiste, "vollstaendig bestimmt" bekommt lediglich etwas mehr Gewicht. */

.eo-statusbar[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 14px;
    border-radius: var(--pos-radius-btn);
    background: var(--pos-mulde-bg);
    font-size: 13px;
}

.eo-determinacy[b-7fkh3n5zwv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pos-muted);
}

.eo-determinacy-full[b-7fkh3n5zwv] {
    color: var(--pos-text);
    font-weight: 600;
}

.eo-keyhint[b-7fkh3n5zwv] {
    font-size: 12px;
}

.eo-conflict-chip[b-7fkh3n5zwv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--pos-radius-btn);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.eo-conflict-error[b-7fkh3n5zwv] {
    background: color-mix(in srgb, var(--tim-fehler) 18%, transparent);
    color: var(--tim-fehler);
}

.eo-conflict-warn[b-7fkh3n5zwv] {
    background: color-mix(in srgb, var(--tim-honig) 22%, transparent);
    color: var(--tim-honig-tief);
}

/* Unbestimmt ist KEIN Fehler, sondern ein Hinweis - deshalb bewusst kuehl und
   zurueckhaltend statt warnfarben. */
.eo-conflict-info[b-7fkh3n5zwv] {
    background: var(--pos-mulde-bg);
    color: var(--pos-muted);
    box-shadow: inset 0 0 0 1px var(--pos-hairline);
}

/* ---- Die Liste ---- */

.eo-list[b-7fkh3n5zwv] {
    background: var(--pos-panel);
    border-radius: var(--pos-radius-sheet);
    box-shadow: var(--pos-shadow-rest);
    padding: 6px 14px;
}

.eo-track-header[b-7fkh3n5zwv] {
    padding: 12px 0 4px;
    border-bottom: 1px solid var(--pos-hairline);
}

.eo-track-name[b-7fkh3n5zwv] {
    font-weight: 700;
    font-size: 14px;
    background: transparent;
    border: none;
    color: var(--pos-muted);
    padding: 2px 4px;
    border-radius: var(--pos-radius-btn);
}

.eo-track-name:hover[b-7fkh3n5zwv],
.eo-track-name:focus[b-7fkh3n5zwv] {
    background: var(--pos-surface);
    outline: 1px solid var(--pos-hairline);
}

/* ---- Die Zeile ----
   Die Einrueckung ist die ganze Struktur-Anzeige: eine zarte Fuehrungslinie je
   Ebene, sonst nichts. */

.eo-row[b-7fkh3n5zwv] {
    padding-left: calc(var(--eo-depth, 0) * 22px);
    border-top: 1px solid var(--pos-hairline);
    transition: background-color .5s ease;
}

.eo-row:first-child[b-7fkh3n5zwv] {
    border-top: none;
}

.eo-row:target[b-7fkh3n5zwv],
.eo-row.eo-flash[b-7fkh3n5zwv] {
    background: color-mix(in srgb, var(--pos-accent) 14%, transparent);
}

.eo-line[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    min-height: 40px;
}

.eo-twisty[b-7fkh3n5zwv] {
    width: 22px;
    flex: 0 0 22px;
    display: flex;
    justify-content: center;
}

.eo-name[b-7fkh3n5zwv] {
    flex: 1 1 180px;
    min-width: 120px;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--pos-radius-btn);
    background: transparent;
    color: var(--pos-text);
    font-family: inherit;
}

.eo-name:hover[b-7fkh3n5zwv] {
    border-color: var(--pos-hairline);
}

.eo-name:focus[b-7fkh3n5zwv] {
    border-color: var(--pos-accent);
    background: var(--pos-surface);
    outline: none;
}

/* AUFTRAG-BEDIENUNG-UND-ORDNUNG-CC.md Paket B: die Zeile atmet ueber zwei
   Ebenen - oben (eo-line) nur Name + Struktur, hier darunter ruhiger die
   Angaben (Zeiten, Outlet, Buchbarkeit, Bestuhlung). Gleiche Einrueckung wie
   Optionen-Ausklapper/Refchips, damit alles unter dem Namen sichtbar
   zusammengehoert. */
.eo-details[b-7fkh3n5zwv] {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-2);
    padding: 0 0 var(--tim-space-2) calc(22px + var(--tim-space-2));
}

/* ---- Die drei Werte ---- */

.eo-cells[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
}

.eo-cell[b-7fkh3n5zwv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 6px;
    border-radius: var(--pos-radius-btn);
    min-width: 132px;
}

.eo-cell-active[b-7fkh3n5zwv] {
    background: var(--pos-mulde-bg);
}

.eo-cell-label[b-7fkh3n5zwv] {
    font-size: 10px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--pos-faint);
}

.eo-cell-body[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
}

.eo-time[b-7fkh3n5zwv] {
    width: 74px;
    padding: 3px 5px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-family: inherit;
    font-size: 13px;
}

/* selbst gesagt - kraeftig UND in Akzentfarbe (Gruender 28.07., zweite
   Runde): die Wert-Optik traegt die Unterscheidung gesetzt/gerechnet
   allein, die Herkunfts-Etiketten sind zuschaltbares Zusatzwissen. */
.eo-val-set[b-7fkh3n5zwv] {
    font-weight: 700;
    color: var(--pos-accent);
    border-color: var(--pos-accent);
}

/* noch frei - ruhig, einladend */
.eo-val-free[b-7fkh3n5zwv] {
    font-weight: 400;
    color: var(--pos-muted);
}

/* ausgerechnet - ruhig, kein Eingabefeld (der falsche Zustand ist gar nicht
   erst erreichbar, deshalb braucht es hier auch kein Schloss-Symbol) */
.eo-computed[b-7fkh3n5zwv] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    padding: 3px 5px;
    color: var(--pos-text);
}

/* angenommen - sichtbar anders: der geratene Wert steht als Schatten neben dem
   leeren Feld und lädt zur Ergaenzung ein */
.eo-ghost[b-7fkh3n5zwv] {
    font-size: 12px;
    font-style: italic;
    color: var(--pos-muted);
    border-bottom: 1px dashed var(--pos-muted);
    font-variant-numeric: tabular-nums;
}

.eo-origin[b-7fkh3n5zwv] {
    font-size: 10px;
    color: var(--pos-faint);
    white-space: nowrap;
}

.eo-origin-assumed[b-7fkh3n5zwv] {
    color: var(--pos-muted);
    font-style: italic;
}

.eo-badge[b-7fkh3n5zwv] {
    display: inline-block;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.eo-badge-ist[b-7fkh3n5zwv] {
    background: color-mix(in srgb, #57B26E 25%, transparent);
    color: #2F7D36;
}

.eo-cell-more[b-7fkh3n5zwv] {
    opacity: 0;
    transition: opacity .15s ease;
}

.eo-row:hover .eo-cell-more[b-7fkh3n5zwv],
.eo-cell-active .eo-cell-more[b-7fkh3n5zwv],
.eo-cell-more:focus[b-7fkh3n5zwv] {
    opacity: 1;
}

/* ---- Optionen-Ausklapper ---- */

.eo-options[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px calc(22px + 8px);
    padding: 8px 10px;
    border-radius: var(--pos-radius-btn);
    background: var(--pos-mulde-bg);
    font-size: 12px;
}

.eo-options-title[b-7fkh3n5zwv] {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pos-faint);
    margin-right: 4px;
}

.eo-options-hint[b-7fkh3n5zwv] {
    color: var(--pos-muted);
}

.eo-input[b-7fkh3n5zwv] {
    padding: 4px 6px;
    border-radius: var(--pos-radius-btn);
    border: 1px solid var(--pos-hairline);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-family: inherit;
    font-size: 12px;
}

.eo-input-dev[b-7fkh3n5zwv] {
    width: 74px;
}

/* ---- Quer-Referenz-Chips an BEIDEN Enden ---- */

.eo-refchips[b-7fkh3n5zwv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px calc(22px + 8px);
}

.eo-refchip[b-7fkh3n5zwv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    text-decoration: none;
    color: var(--pos-text);
}

.eo-refchip-out[b-7fkh3n5zwv] {
    background: color-mix(in srgb, var(--pos-accent) 16%, transparent);
}

.eo-refchip-in[b-7fkh3n5zwv] {
    background: var(--pos-mulde-bg);
    color: var(--pos-muted);
}

/* ---- Konflikt an der Zeile ---- */

.eo-conflict[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px calc(22px + 8px);
    padding: 7px 10px;
    border-radius: var(--pos-radius-btn);
    font-size: 12px;
}

.eo-conflict-message[b-7fkh3n5zwv] {
    flex: 1 1 240px;
}

.eo-conflict-hint[b-7fkh3n5zwv] {
    font-style: italic;
}

/* ---- Knoepfe ---- */

.eo-rowactions[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    opacity: .25;
    transition: opacity .15s ease;
}

.eo-row:hover .eo-rowactions[b-7fkh3n5zwv],
.eo-rowactions:focus-within[b-7fkh3n5zwv] {
    opacity: 1;
}

.eo-btn[b-7fkh3n5zwv] {
    min-height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: var(--pos-radius-btn);
    background: var(--pos-surface);
    color: var(--pos-text);
    box-shadow: var(--pos-shadow-rest);
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
}

.eo-btn:active[b-7fkh3n5zwv] {
    box-shadow: var(--pos-shadow-pressed);
    transform: translateY(1px) scale(.98);
}

.eo-btn-small[b-7fkh3n5zwv] {
    min-height: 24px;
    padding: 0 8px;
    font-size: 12px;
}

.eo-btn-active[b-7fkh3n5zwv] {
    background: color-mix(in srgb, var(--pos-accent) 22%, var(--pos-surface));
}

.eo-btn-quiet[b-7fkh3n5zwv] {
    box-shadow: none;
    background: transparent;
    color: var(--pos-muted);
    font-weight: 400;
}

.eo-btn-resolve[b-7fkh3n5zwv] {
    background: color-mix(in srgb, var(--pos-accent) 16%, var(--pos-surface));
}

.eo-icon-btn[b-7fkh3n5zwv] {
    min-height: 26px;
    min-width: 26px;
    padding: 0;
    border: none;
    border-radius: var(--pos-radius-btn);
    background: transparent;
    color: var(--pos-muted);
    cursor: pointer;
    font-size: 12px;
}

.eo-icon-btn:hover:not(:disabled)[b-7fkh3n5zwv] {
    background: var(--pos-surface);
    color: var(--pos-text);
}

.eo-icon-btn:disabled[b-7fkh3n5zwv] {
    opacity: .3;
    cursor: default;
}

.eo-btn-danger:hover:not(:disabled)[b-7fkh3n5zwv] {
    color: var(--tim-fehler);
}

.eo-footer[b-7fkh3n5zwv] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* AUFTRAG-EINE-EVENTSTRUKTUR-CC.md Paket E: Buchbarkeit + Outlet, ruhig unter
   der Zeile statt sie zu sprengen. */
.eo-rowmeta[b-7fkh3n5zwv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
    font-size: 12px;
}

/* Paket B: die Slot-Zusammenfassung ("6 Slots · 11:30-14:00") - Aufklappen
   ausschliesslich per Klick (kein Hover-Only), Hover deutet nur an. */
.eo-slots-toggle[b-7fkh3n5zwv] {
    display: inline-flex;
    align-items: center;
    gap: var(--tim-space-1);
    padding: 2px 6px;
    border: none;
    border-radius: var(--pos-radius-btn);
    background: transparent;
    color: var(--pos-muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.eo-slots-toggle:hover[b-7fkh3n5zwv],
.eo-slots-toggle:focus[b-7fkh3n5zwv] {
    background: var(--pos-surface);
    color: var(--pos-text);
}

/* flex-basis 100% erzwingt eine eigene Zeile innerhalb des umflieszenden
   eo-rowmeta, statt sich neben die Zusammenfassung zu quetschen. */
.eo-fixedslot-list[b-7fkh3n5zwv] {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: var(--tim-space-1);
}

/* AUFTRAG-BESTUHLUNG-AN-DIE-ETAPPE-CC.md Paket C: die eingeklappte
   Bestuhlungs-Pflege unter der Zeile - gleiche Einrueckung wie eo-rowmeta,
   damit sie optisch zur Zeile gehoert statt wie ein neuer Block zu wirken. */
.eo-bestuhlung-panel[b-7fkh3n5zwv] {
    padding: 4px 0 10px 30px;
}

.eo-select[b-7fkh3n5zwv],
.eo-select-small[b-7fkh3n5zwv] {
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    background: var(--pos-surface);
    color: var(--pos-text);
}

.eo-select-small[b-7fkh3n5zwv],
.eo-input-small[b-7fkh3n5zwv],
.eo-time-small[b-7fkh3n5zwv] {
    width: auto;
    max-width: 90px;
}

.eo-input-small[b-7fkh3n5zwv],
.eo-time-small[b-7fkh3n5zwv] {
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    background: var(--pos-surface);
    color: var(--pos-text);
}

.eo-fixedslot-chip[b-7fkh3n5zwv] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
}

/* Schmale Fenster: Name/Struktur duerfen umbrechen, die Angaben-Ebene
   (eo-details) atmet ohnehin schon auf jeder Breite. */
@media (max-width: 900px) {
    .eo-line[b-7fkh3n5zwv] {
        flex-wrap: wrap;
    }
}
/* /Pages/Event/TimeGraph/TimeGraphPlanEditor.razor.rz.scp.css */
.zg-shell[b-7eouons443] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    color: var(--pos-text);
}

.zg-header[b-7eouons443] {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 16px;
}

.zg-back[b-7eouons443] {
    color: var(--pos-muted);
}

.zg-title[b-7eouons443] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.zg-durchfuehrung[b-7eouons443] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.zg-alerts[b-7eouons443] {
    margin-bottom: 12px;
}

.zg-alert[b-7eouons443] {
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 13px;
}

.zg-alert-error[b-7eouons443] {
    background: color-mix(in srgb, #B3261E 15%, transparent);
    color: #B3261E;
}

.zg-alert-conflict[b-7eouons443] {
    background: color-mix(in srgb, #C25878 15%, transparent);
    color: #C25878;
}

.zg-muted[b-7eouons443] {
    color: var(--pos-muted);
}

.zg-table[b-7eouons443] {
    width: 100%;
    border-collapse: collapse;
}

.zg-table th[b-7eouons443] {
    text-align: left;
    font-size: 12px;
    color: var(--pos-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--pos-hairline);
}

.zg-table td[b-7eouons443] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--pos-hairline);
    vertical-align: middle;
}

.zg-row-open[b-7eouons443] {
    opacity: .75;
}

.zg-input[b-7eouons443] {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--pos-hairline);
    background: var(--pos-surface);
    color: var(--pos-text);
}

.zg-input-name[b-7eouons443] {
    font-weight: 600;
    min-width: 140px;
}

.zg-input-num[b-7eouons443] {
    width: 70px;
}

.zg-input-time[b-7eouons443] {
    width: 60px;
}

.zg-input-cell[b-7eouons443] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.zg-unit[b-7eouons443] {
    color: var(--pos-muted);
    font-size: 12px;
}

/* gesetzt (kraeftig) vs. errechnet (normal) vs. offen (gedimmt) - Paket C.2 */
.zg-val-set[b-7eouons443] {
    font-weight: 700;
}

.zg-val-computed[b-7eouons443] {
    font-weight: 400;
}

.zg-val-open[b-7eouons443] {
    color: var(--pos-muted);
    font-style: italic;
}

.zg-badge[b-7eouons443] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.zg-badge-elastic[b-7eouons443] {
    background: color-mix(in srgb, #9B84D8 25%, transparent);
    color: #6B4FA3;
}

.zg-badge-ist[b-7eouons443] {
    background: color-mix(in srgb, #57B26E 25%, transparent);
    color: #2F7D36;
}

.zg-row-actions[b-7eouons443] {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}

.zg-btn[b-7eouons443] {
    min-height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: var(--pos-surface);
    color: var(--pos-text);
    box-shadow: var(--pos-shadow-rest);
    cursor: pointer;
    font-weight: 600;
}

.zg-btn-small[b-7eouons443] {
    min-height: 26px;
    padding: 0 8px;
    font-size: 12px;
}

.zg-btn-primary[b-7eouons443] {
    background: var(--pos-accent);
    color: #fff;
}

.zg-btn-danger[b-7eouons443] {
    background: var(--tim-fehler, #B3261E);
    color: #fff;
}

.zg-add-node[b-7eouons443] {
    margin-top: 16px;
}
/* /Pages/Event/TimeGraph/TimeGraphPlanList.razor.rz.scp.css */
/* AUFTRAG-EVENT-ZEITGRAPH-PROTOTYP-CC.md Paket C: Elevation-Optik (Doc 12
   Kap. 10.5) ueber die bereits global verlinkten pos-theme.css-Tokens - kein
   Anfassen von index.html noetig (Tokens sind schon da). */

.zg-shell[b-5347tv9kms] {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    color: var(--pos-text);
}

.zg-title[b-5347tv9kms] {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}

.zg-muted[b-5347tv9kms] {
    color: var(--pos-muted);
}

.zg-new-plan[b-5347tv9kms] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.zg-input[b-5347tv9kms] {
    padding: 8px 10px;
    border-radius: var(--pos-radius-btn, 6px);
    border: 1px solid var(--pos-hairline);
    background: var(--pos-surface);
    color: var(--pos-text);
}

.zg-btn[b-5347tv9kms] {
    min-height: 38px;
    padding: 0 14px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    box-shadow: var(--pos-shadow-rest);
    cursor: pointer;
    font-weight: 600;
}

.zg-btn-primary[b-5347tv9kms] {
    background: var(--pos-accent);
    color: #fff;
}

.zg-btn-danger[b-5347tv9kms] {
    background: var(--tim-fehler, #B3261E);
    color: #fff;
}

.zg-btn:disabled[b-5347tv9kms] {
    opacity: .4;
    cursor: default;
}

.zg-table[b-5347tv9kms] {
    width: 100%;
    border-collapse: collapse;
}

.zg-table th[b-5347tv9kms] {
    text-align: left;
    font-size: 12px;
    color: var(--pos-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--pos-hairline);
}

.zg-table td[b-5347tv9kms] {
    padding: 8px;
    border-bottom: 1px solid var(--pos-hairline);
}
/* /Pages/Index.razor.rz.scp.css */
.tim-index[b-d5g0reupfj] {
    padding: 32px 24px;
    font-family: var(--tim-font);
}

.tim-index-hero[b-d5g0reupfj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 0 32px;
}

.tim-index-welcome[b-d5g0reupfj] {
    margin: 0;
    color: var(--tim-aubergine);
    font-size: 18px;
}

.tim-index-tiles[b-d5g0reupfj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.tim-index-tile[b-d5g0reupfj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    min-height: 120px;
    padding: 20px;
    border-radius: var(--tim-radius-lg);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: transform 100ms ease-out, box-shadow 100ms ease-out;
    box-shadow: 0 4px 14px -8px rgba(59, 44, 53, 0.3);
}

.tim-index-tile:hover[b-d5g0reupfj] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(59, 44, 53, 0.35);
    text-decoration: none;
}

.tim-index-tile-tomate[b-d5g0reupfj] {
    background: var(--tim-tomate-flaeche);
    color: var(--tim-tomate-tief);
}

.tim-index-tile-aubergine[b-d5g0reupfj] {
    background: var(--tim-aubergine-flaeche);
    color: var(--tim-aubergine-tief);
}

.tim-index-tile-minze[b-d5g0reupfj] {
    background: var(--tim-minze-flaeche);
    color: var(--tim-minze-tief);
}

.tim-index-tile-honig[b-d5g0reupfj] {
    background: var(--tim-honig-flaeche);
    color: var(--tim-honig-tief);
}
/* /Pages/Invoicing/InvoiceA4.razor.rz.scp.css */
/* AUFTRAG-RECHNUNG-DURCHSTICH-CC.md Paket E — A4 nach DIN 5008 Form B.
   Massgebend ist Doc/muster-rechnung-a4.html; die Masse dort sind keine
   Geschmacksfrage, sondern die Norm: Anschriftfeld 85x45 mm ab 45/20 mm,
   Infoblock ab 125 mm, Falzmarken bei 105 und 210 mm. Ein Fensterumschlag
   verzeiht nichts. */

@page {
    size: A4;
    margin: 0;
}

.inv-shell[b-l5pmc6t1zc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px 48px;
}

.inv-toolbar[b-l5pmc6t1zc] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 210mm;
    max-width: 100%;
    margin-bottom: 12px;
}

.inv-status[b-l5pmc6t1zc] {
    font-size: 0.9rem;
    opacity: 0.75;
}

/* Das BLATT. Auf dem Schirm mit Rand und Schatten, damit man sieht, dass es
   ein Blatt ist; im Ausdruck ohne beides. */
.inv-sheet[b-l5pmc6t1zc] {
    position: relative;
    box-sizing: border-box;
    width: 210mm;
    min-height: 297mm;
    max-width: 100%;
    padding: 14mm 20mm 12mm 25mm;
    background: #fff;
    color: #1a1a1a;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 9.5pt;
    line-height: 1.42;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
}

.inv-fold[b-l5pmc6t1zc] {
    position: absolute;
    left: 0;
    width: 4mm;
    border-top: 0.3pt solid #999;
}

.inv-fold-mid[b-l5pmc6t1zc] {
    width: 6mm;
    border-color: #777;
}

/* ---- Kopf --------------------------------------------------------------- */

.inv-head[b-l5pmc6t1zc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 9mm;
}

.inv-wordmark[b-l5pmc6t1zc] {
    font-size: 20pt;
    letter-spacing: 5px;
    font-weight: 600;
}

.inv-claim[b-l5pmc6t1zc] {
    font-size: 8pt;
    color: #666;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin-top: 1mm;
}

.inv-housecontact[b-l5pmc6t1zc] {
    text-align: right;
    font-size: 8pt;
    color: #444;
    line-height: 1.5;
}

/* ---- Anschriftfeld und Infoblock ---------------------------------------- */

.inv-addressrow[b-l5pmc6t1zc] {
    display: flex;
}

.inv-sender[b-l5pmc6t1zc] {
    font-size: 6.5pt;
    color: #777;
    text-decoration: underline;
    text-decoration-color: #bbb;
    margin-bottom: 2.5mm;
}

.inv-addressfield[b-l5pmc6t1zc] {
    width: 85mm;
    min-height: 27mm;
    font-size: 10pt;
}

.inv-infoblock[b-l5pmc6t1zc] {
    font-size: 8.5pt;
    margin-left: auto;
    border-collapse: collapse;
}

.inv-infoblock td[b-l5pmc6t1zc] {
    padding: 0.4mm 0;
}

.inv-infoblock td:first-child[b-l5pmc6t1zc] {
    color: #666;
    padding-right: 5mm;
}

.inv-infoblock td:last-child[b-l5pmc6t1zc] {
    text-align: right;
}

/* ---- Betreff ------------------------------------------------------------ */

.inv-subject[b-l5pmc6t1zc] {
    font-size: 13pt;
    font-weight: 600;
    margin: 8mm 0 1mm;
}

.inv-subline[b-l5pmc6t1zc] {
    font-size: 9.5pt;
    color: #333;
    margin-bottom: 5mm;
}

/* ---- Positionen --------------------------------------------------------- */

table.inv-pos[b-l5pmc6t1zc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
    margin-top: 5mm;
}

table.inv-pos th[b-l5pmc6t1zc] {
    text-align: left;
    font-weight: 600;
    border-bottom: 0.5pt solid #1a1a1a;
    padding: 1.2mm 1.5mm;
}

table.inv-pos td[b-l5pmc6t1zc] {
    padding: 1.2mm 1.5mm;
    vertical-align: top;
    border-bottom: 0.25pt solid #ddd;
}

.inv-r[b-l5pmc6t1zc] {
    text-align: right;
}

.inv-col-pos[b-l5pmc6t1zc] { width: 8mm; }
.inv-col-qty[b-l5pmc6t1zc] { width: 14mm; }
.inv-col-price[b-l5pmc6t1zc] { width: 20mm; }
.inv-col-vat[b-l5pmc6t1zc] { width: 12mm; }
.inv-col-amount[b-l5pmc6t1zc] { width: 22mm; }

/* AUFTRAG-RECHNUNG-REFERENZMODELL-SPRACHEN-CC.md Paket E.1: die Uebersetzung
   der Position als zweite Zeile unter ihr. Kursiv und leiser - sie ist eine
   Lesehilfe neben dem Original, nicht eine zweite Position. Keine Klammern:
   runde stecken schon in Artikelnamen („Cola (0,33 l)"), und zwei Klammerpaare
   uebereinander liest niemand. */
.inv-pos-second[b-l5pmc6t1zc] {
    font-style: italic;
    color: #555;
    font-size: 8pt;
    line-height: 1.35;
}

/* Der Massgeblichkeits-Baustein (D.3): unauffaellig, aber da - er sagt, welche
   der beiden Fassungen das Original ist (E-169). */
.inv-prevailing[b-l5pmc6t1zc] {
    margin-top: 2mm;
    font-size: 7.5pt;
    color: #555;
}

/* Die Nachlasszeile gehoert sichtbar zur Position darueber - eingerueckt und
   leiser, aber nie weggelassen (§ 14 Abs. 4 Nr. 7). */
.inv-discount td[b-l5pmc6t1zc] {
    color: #555;
    padding-top: 0;
    border-bottom: 0.25pt solid #ddd;
}

.inv-discount td:nth-child(2)[b-l5pmc6t1zc] {
    padding-left: 6mm;
}

/* ---- Summen ------------------------------------------------------------- */

/* 82 mm und nicht mehr 62: Eine Paar-Beschriftung ist naturgemaess doppelt so
   lang wie eine einzelne („Rechnungsbetrag / Total amount"), und bei 62 mm
   brach sie um - samt dem Betrag daneben, der dann zweizeilig stand. Am
   04.08.2026 im Browser gemessen. Die Breite gilt fuer beide Faelle: Eine
   einsprachige Rechnung mit breiterem Summenblock sieht unveraendert richtig
   aus, zwei Breiten je nach Sprachwahl waeren zwei Layouts. */
.inv-sums[b-l5pmc6t1zc] {
    margin-left: auto;
    width: 82mm;
    font-size: 9pt;
    margin-top: 2mm;
    border-collapse: collapse;
}

.inv-sums td[b-l5pmc6t1zc] {
    padding: 0.7mm 1.5mm;
}

/* Der Betrag bricht nie um - ein zweizeiliges „99,60 €" liest sich auf einem
   Rechtsdokument wie zwei Zahlen. */
.inv-sums td.inv-r[b-l5pmc6t1zc] {
    white-space: nowrap;
    width: 24mm;
}

.inv-sums .inv-total td[b-l5pmc6t1zc] {
    border-top: 0.7pt solid #1a1a1a;
    font-weight: 600;
    font-size: 10pt;
    padding-top: 1.4mm;
}

/* ---- Fusszeile ---------------------------------------------------------- */

.inv-foot[b-l5pmc6t1zc] {
    margin-top: auto;
    padding-top: 2.5mm;
    border-top: 0.5pt solid #999;
    display: flex;
    gap: 5mm;
    font-size: 6.5pt;
    color: #555;
    line-height: 1.55;
}

.inv-foot > div[b-l5pmc6t1zc] {
    flex: 1.05;
}

.inv-foot > div.inv-foot-bank[b-l5pmc6t1zc] {
    flex: 1.25;
}

.inv-foot b[b-l5pmc6t1zc] {
    font-weight: 600;
    color: #333;
}

/* ---- Der Ausdruck ------------------------------------------------------- */
/* Auf dem Papier ist die Werkzeugleiste weg und das Blatt randlos - was zur
   ANSICHT gehoert, gehoert nicht zum Beleg. */

@media print {
    .inv-toolbar[b-l5pmc6t1zc] {
        display: none;
    }

    .inv-shell[b-l5pmc6t1zc] {
        padding: 0;
        display: block;
    }

    .inv-sheet[b-l5pmc6t1zc] {
        box-shadow: none;
        width: 210mm;
        max-width: none;
        min-height: 297mm;
    }
}
/* /Pages/Pos/CanvasEditor/LayoutEditor.razor.rz.scp.css */
/* Kern-Editor: rein geometrisch, kennt keine POS-Farben/-Bedeutung - Optik hier
   ist nur die Canvas-Flaeche + Auswahl/Griffe, alles Inhaltliche kommt vom Host
   ueber ElementTemplate. Nutzt dieselben --pos-* Tokens wie die Bonier-UI
   (Elevation, Doc 12 Kap. 10.5) - der Host bindet diese Komponente innerhalb
   eines .pos-shell ein. */

.layout-editor-canvas[b-xzt0g9s53q] {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: var(--pos-surface);
    border-radius: var(--pos-radius-sheet, 10px);
    box-shadow: var(--pos-shadow-rest);
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.layout-editor-canvas-grid[b-xzt0g9s53q] {
    background-image:
        linear-gradient(to right, var(--pos-hairline) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pos-hairline) 1px, transparent 1px);
    background-position: -1px -1px;
}

.layout-editor-element[b-xzt0g9s53q] {
    position: absolute;
    box-sizing: border-box;
    touch-action: none;
    cursor: move;
    display: flex;
}

.layout-editor-element-selected[b-xzt0g9s53q] {
    outline: 2px solid var(--pos-accent);
    outline-offset: 2px;
    z-index: 5;
}

.le-handle[b-xzt0g9s53q] {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--pos-accent);
    border: 2px solid var(--pos-panel);
    border-radius: 50%;
    touch-action: none;
    z-index: 10;
}

.le-handle-n[b-xzt0g9s53q]  { top: -7px; left: 50%; margin-left: -7px; cursor: ns-resize; }
.le-handle-s[b-xzt0g9s53q]  { bottom: -7px; left: 50%; margin-left: -7px; cursor: ns-resize; }
.le-handle-e[b-xzt0g9s53q]  { right: -7px; top: 50%; margin-top: -7px; cursor: ew-resize; }
.le-handle-w[b-xzt0g9s53q]  { left: -7px; top: 50%; margin-top: -7px; cursor: ew-resize; }
.le-handle-nw[b-xzt0g9s53q] { top: -7px; left: -7px; cursor: nwse-resize; }
.le-handle-se[b-xzt0g9s53q] { bottom: -7px; right: -7px; cursor: nwse-resize; }
.le-handle-ne[b-xzt0g9s53q] { top: -7px; right: -7px; cursor: nesw-resize; }
.le-handle-sw[b-xzt0g9s53q] { bottom: -7px; left: -7px; cursor: nesw-resize; }

/* Rechteck-Zug fuer Mehrfachauswahl (Gruender-Feedback 24.07.2026) - Maus UND
   Touch, einziger Weg auf Tablets ohne Strg-Taste. */
.le-marquee[b-xzt0g9s53q] {
    position: absolute;
    border: 1px dashed var(--pos-accent);
    background: color-mix(in srgb, var(--pos-accent) 15%, transparent);
    pointer-events: none;
    z-index: 8;
}
/* /Pages/Pos/CanvasEditor/PosCanvasEditor.razor.rz.scp.css */
.pce-shell[b-dtmvwsqtq2] {
    /* width:100% + flex:1 1 auto fehlten hier - <app> ist ab 768px per
       site.css selbst ein Row-Flex-Container (flex-direction:row), und ohne
       das ist .pce-shell nur ein GEWOEHNLICHES Flex-Item darin: schrumpft auf
       seinen Inhalt (shrink-to-fit) statt die Zeile zu fuellen, egal wie breit
       das Browserfenster ist. Exakt das Muster, das PosVisitDetail.razor.css
       .pos-shell schon richtig macht - hier beim urspruenglichen Bau des
       Prototyps schlicht vergessen (Gruender-Feedback 24.07.2026: "es passiert
       GAR NICHTS" beim Breiterziehen - das war die eigentliche Ursache, nicht
       die Canvas-Anpassung selbst). */
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--pos-canvas);
    color: var(--pos-text);
    font-family: inherit;
}

.pce-toolbar[b-dtmvwsqtq2] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--pos-hairline);
    background: var(--pos-panel);
}

.pce-toolbar button[b-dtmvwsqtq2],
.pce-toolbar select[b-dtmvwsqtq2],
.pce-toolbar input[type="text"][b-dtmvwsqtq2],
.pce-toolbar input[type="number"][b-dtmvwsqtq2] {
    min-height: 34px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: 12.5px;
    padding: 0 10px;
    cursor: pointer;
}

.pce-toolbar button:disabled[b-dtmvwsqtq2] {
    opacity: .4;
    cursor: default;
}

.pce-name[b-dtmvwsqtq2] {
    width: 160px;
    font-weight: 600;
    cursor: text;
}

.pce-exit[b-dtmvwsqtq2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    padding: 0 !important;
}

.pce-group[b-dtmvwsqtq2] {
    display: flex;
    gap: 2px;
    background: var(--pos-surface);
    border-radius: var(--pos-radius-btn, 6px);
    padding: 2px;
}

.pce-group button[b-dtmvwsqtq2] {
    background: transparent;
}

.pce-active[b-dtmvwsqtq2] {
    color: var(--pos-accent) !important;
    box-shadow: var(--pos-shadow-pressed);
}

.pce-check[b-dtmvwsqtq2] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--pos-muted);
}

.pce-spacer[b-dtmvwsqtq2] {
    flex: 1 1 auto;
}

.pce-snap-custom[b-dtmvwsqtq2] {
    width: 60px;
}

.pce-body[b-dtmvwsqtq2] {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.pce-col[b-dtmvwsqtq2] {
    min-height: 0;
}

/* Palette/Eigenschaften-Panels: etwas breiter als der urspruengliche Wert
   (240px statt 220px) und einklappbar ueber die Pfeil-Buttons daneben, wenn
   man den Platz fuer die Canvas-Flaeche braucht. War kurz auf 280px, aber das
   ging der Canvas-Flaeche 1:1 verloren und liess v. a. Terminal (breites
   Format, an die Spaltenbreite gebunden) viel zu klein wirken (Gruender-
   Feedback 24.07.2026) - 240px ist der Kompromiss. */
.pce-col-palette[b-dtmvwsqtq2],
.pce-col-props[b-dtmvwsqtq2] {
    flex: 0 0 240px;
    overflow: hidden;
    transition: flex-basis .15s ease;
}

.pce-col-collapsed[b-dtmvwsqtq2] {
    flex-basis: 0;
}

.pce-col-palette[b-dtmvwsqtq2] {
    border-right: 1px solid var(--pos-hairline);
    /* Kein eigener Scroll mehr - PosCanvasPalette regelt das intern
       (fester Kopf/Fuss, scrollbare Artikel-Mitte, Gruender-Feedback
       24.07.2026), sonst gaebe es zwei verschachtelte Scrollcontainer. */
}

.pce-collapse-toggle[b-dtmvwsqtq2] {
    flex: 0 0 auto;
    align-self: center;
    width: 16px;
    height: 64px;
    margin: 0 -1px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-panel);
    color: var(--pos-muted);
    font-size: 13px;
    cursor: pointer;
    z-index: 3;
}

.pce-collapse-toggle:hover[b-dtmvwsqtq2] {
    color: var(--pos-text);
}

/* AUFTRAG-AKTE-MEGA-CC.md Paket F.1: die freie Flaeche um den Canvas ist
   IMMER die CI-Creme (--tim-sand, Doc 20 Kap. 4/Doc 03 E-58) statt der
   Elevation-Flaeche (--pos-canvas) - im Hell-Modus ohnehin derselbe Wert,
   im Dunkel-Modus bewusste Abweichung von der sonstigen Kasse/Kueche-
   Dunkelflaeche: der Editor ist ein Layout-/Design-Werkzeug (Lichttisch-
   Metapher), keine Betriebs-Oberflaeche. Keine neue Farbe - bestehendes
   CI-Token. */
.pce-col-canvas[b-dtmvwsqtq2] {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    overflow: auto;
    background: var(--tim-sand, #F7F1EA);
}

.pce-col-props[b-dtmvwsqtq2] {
    border-left: 1px solid var(--pos-hairline);
    overflow-y: auto;
}

/* Element-Inhalt (Host-Template fuer LayoutEditor - siehe RenderElement) */
.pce-el-content[b-dtmvwsqtq2] {
    width: 100%;
    height: 100%;
    border-radius: var(--pos-radius-tile, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--pos-shadow-rest);
    position: relative;
    overflow: hidden;
}

.pce-el-label[b-dtmvwsqtq2] {
    overflow-wrap: anywhere;
}

.pce-el-deko[b-dtmvwsqtq2] {
    box-shadow: none;
    color: var(--pos-muted);
}

.pce-deko-frame-label[b-dtmvwsqtq2] {
    position: absolute;
    top: 2px;
    left: 6px;
    font-size: 10px;
}

/* Rahmen: nur eine gezeichnete Umrandung, keine Flaeche. Farbe, Linienart und
   -staerke kommen komplett als Inline-Style vom Host (ElementContentStyle) -
   hier keine feste Vorgabe mehr, sonst wuerde eine Auswahl nie ankommen (siehe
   Gruender-Feedback 24.07.2026: Farbwahl/Linienart am Rahmen wirkungslos). */

.pce-deko-line[b-dtmvwsqtq2] {
    width: 100%;
    height: 100%;
    background: var(--pos-hairline);
}

.pce-el-tiny-hint[b-dtmvwsqtq2] {
    position: absolute;
    bottom: 2px;
    right: 4px;
    color: var(--tim-honig, #F2B33D);
    font-size: 14px;
    line-height: 1;
}
/* /Pages/Pos/CanvasEditor/PosCanvasPalette.razor.rz.scp.css */
/* Dreiteiliges Layout (Gruender-Feedback 24.07.2026): Suche+Kategorie-Dropdown
   oben fest, Artikelraster in der Mitte scrollbar, Deko/Sonstige-Werkzeuge
   unten fest - damit viele Warengruppen nicht mehr die Werkzeuge nach unten
   aus dem sichtbaren Bereich verdraengen. */
.pcp-palette[b-6n73e7oo2e] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    gap: 8px;
    overflow: hidden;
}

.pcp-palette-top[b-6n73e7oo2e] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pcp-palette-scroll[b-6n73e7oo2e] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pcp-palette-bottom[b-6n73e7oo2e] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--pos-hairline);
}

.pcp-palette-search input[b-6n73e7oo2e] {
    width: 100%;
    min-height: 36px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: 0 10px;
    font-size: 13px;
}

.pcp-palette-cats[b-6n73e7oo2e] {
    width: 100%;
    min-height: 32px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: 0 8px;
    font-size: 12px;
    cursor: pointer;
}

.pcp-palette-section-label[b-6n73e7oo2e] {
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pos-faint);
}

.pcp-palette-grid[b-6n73e7oo2e] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.pcp-palette-item[b-6n73e7oo2e] {
    /* min-width:0 ueberschreibt den Grid-Item-Default (min-width:auto =
       min-content) - sonst erzwingt ein langes, unteilbares Wort wie
       "Kimchi-Bratling" die halbe Spalte breiter als ihr 1fr-Anteil und die
       GANZE Palette bekommt einen horizontalen Scrollbalken (Gruender-
       Feedback 24.07.2026: "Scroll-Dinge tauchen auf"). */
    min-width: 0;
    min-height: 42px;
    border: none;
    border-radius: var(--pos-radius-tile, 8px);
    background: var(--pos-surface);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    padding: 6px;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-rest);
    overflow-wrap: anywhere;
}

.pcp-palette-item:active[b-6n73e7oo2e] {
    transform: translateY(1px) scale(.98);
    box-shadow: var(--pos-shadow-pressed);
}

/* Deko/Sonstige Elemente etwas kompakter als die Artikel-Kacheln - sie sind
   Werkzeuge, keine Bon-Buttons, und stehen jetzt dauerhaft im Blick (Gruender-
   Feedback 24.07.2026). */
.pcp-palette-item-deko[b-6n73e7oo2e] {
    min-height: 32px;
    font-size: 11px;
    background: var(--pos-surface);
    color: var(--pos-text);
}

.pcp-palette-empty[b-6n73e7oo2e] {
    grid-column: 1 / -1;
    color: var(--pos-faint);
    font-size: 12px;
    text-align: center;
    margin: 8px 0;
}
/* /Pages/Pos/CanvasEditor/PosCanvasPreview.razor.rz.scp.css */
.pcv-wrap[b-yxrzoaxh8o] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    overflow: auto;
    width: 100%;
}

.pcv-toolbar[b-yxrzoaxh8o] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Eigener Container NUR fuer die Canvas-Flaeche (Toolbar-Zeile bleibt aussen
   vor) - LayoutEditor.razor/PosCanvasPreview.razor.cs messen DIESES Element
   per ResizeObserver (pos-canvas-editor.js observeFit), um die Flaeche per
   "object-fit:contain" einzupassen (Gruender-Feedback 24.07.2026: CSS
   Container Queries + aspect-ratio reagierten beim echten Fenster-Resize
   nicht zuverlaessig - bekanntes Chromium-Zusammenspielproblem). */
.pcv-canvas-holder[b-yxrzoaxh8o] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.pcv-check[b-yxrzoaxh8o] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--pos-muted);
}

.pcv-hit-readout[b-yxrzoaxh8o] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pos-accent);
}

.pcv-canvas[b-yxrzoaxh8o] {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: var(--pos-surface);
    border-radius: var(--pos-radius-sheet, 10px);
    box-shadow: var(--pos-shadow-rest);
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
}

.pcv-debug-grid[b-yxrzoaxh8o] {
    position: absolute;
    inset: 0;
    display: grid;
    z-index: 1;
}

.pcv-debug-cell[b-yxrzoaxh8o] {
    opacity: .22;
}

.pcv-element[b-yxrzoaxh8o] {
    position: absolute;
    box-sizing: border-box;
    border-radius: var(--pos-radius-tile, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--pos-shadow-rest);
    overflow-wrap: anywhere;
    pointer-events: none;
    z-index: 2;
    transition: filter 120ms ease-out, transform 120ms ease-out;
}

.pcv-element-deko[b-yxrzoaxh8o] {
    box-shadow: none;
    color: var(--pos-muted);
    background: transparent !important;
}

/* Press-Feedback (Doc 15 A8.5): kurzes Aufleuchten des GETROFFENEN Buttons,
   nicht des angeklickten Punkts - macht sichtbar, WAS die Touch-Intelligenz
   entschieden hat, gerade wenn neben der gezeichneten Flaeche getippt wurde. */
.pcv-flash[b-yxrzoaxh8o] {
    filter: brightness(1.5);
    transform: scale(1.04);
}
/* /Pages/Pos/CanvasEditor/PosCanvasProperties.razor.rz.scp.css */
.pcpr-panel[b-3gp6rivnq7] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pcpr-empty[b-3gp6rivnq7] {
    color: var(--pos-faint);
    font-size: 12.5px;
    text-align: center;
    margin: 20px 0;
}

.pcpr-row[b-3gp6rivnq7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pcpr-row label[b-3gp6rivnq7] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pos-faint);
}

.pcpr-row input[type="text"][b-3gp6rivnq7],
.pcpr-row > input[type="number"][b-3gp6rivnq7] {
    min-height: 34px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: 0 8px;
    font-size: 13px;
}

.pcpr-row-grid[b-3gp6rivnq7] {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 6px;
}

.pcpr-row-grid label[b-3gp6rivnq7] {
    margin: 0;
}

.pcpr-row-grid input[b-3gp6rivnq7] {
    min-height: 30px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: 0 6px;
    font-size: 12.5px;
    width: 100%;
}

.pcpr-colors[b-3gp6rivnq7] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.pcpr-color[b-3gp6rivnq7] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}

.pcpr-color-active[b-3gp6rivnq7] {
    border-color: var(--pos-text);
}

.pcpr-color-none[b-3gp6rivnq7] {
    background: repeating-conic-gradient(var(--pos-hairline) 0% 25%, var(--pos-surface) 0% 50%) 50% / 10px 10px;
    color: var(--pos-text);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcpr-seg[b-3gp6rivnq7] {
    display: flex;
    gap: 4px;
}

.pcpr-seg button[b-3gp6rivnq7] {
    flex: 1 1 0;
    min-height: 30px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: 11.5px;
    cursor: pointer;
}

.pcpr-seg-active[b-3gp6rivnq7] {
    color: var(--pos-accent);
    box-shadow: var(--pos-shadow-pressed);
}

.pcpr-hint[b-3gp6rivnq7] {
    margin: 0;
    font-size: 11.5px;
    color: #D9822B;
}

.pcpr-actions[b-3gp6rivnq7] {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.pcpr-actions button[b-3gp6rivnq7] {
    flex: 1 1 0;
    min-height: 34px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pcpr-delete[b-3gp6rivnq7] {
    color: var(--pos-accent);
}
/* /Pages/Pos/Components/PosBon.razor.rz.scp.css */
.pos-bon[b-cvjiezrz15] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pos-panel);
    color: var(--pos-text);
    /* AUFTRAG-BON-TOOLBAR-ORDNUNG-CC.md: die Bon-SPALTE ist der Container, der
       auf seine Breite reagieren soll - nicht die Toolbar, die ist selbst der
       Inhalt. Die Spalte ist ueber PosBonResizeHandle ziehbar und hat damit
       keine bekannte Breite. */
    container-type: inline-size;
}

/* Gruender-Screenshot 06.08.2026: die Toolbar lief ueber den Spaltenrand
   hinaus - "Invoice" verschwand unter den Artikelkacheln. Ursache war nicht
   ein zu breiter Knopf, sondern eine Zeile, die gar nicht umbrechen KONNTE:
   flex ohne flex-wrap, jedes Kind auf "flex: 0 0 auto". Sobald der Spacer auf
   0 geschrumpft war, gab es nichts mehr nachzugeben, und der Rest schob sich
   nach rechts aus der Spalte.

   Nachtrag vom selben Tag (AUFTRAG-BON-TOOLBAR-ORDNUNG-CC.md): "Sie bricht um"
   allein genuegte nicht - flex-wrap bricht dort, wo GERADE der Platz ausgeht,
   nicht dort, wo es fachlich Sinn ergibt. Die Aktionsgruppe zerfiel deshalb
   mitten hindurch ("Table discount" oben, "Split" darunter). Jetzt gibt es
   GENAU EINEN Umbruchpunkt, an einer GEMESSENEN Breite statt einer geratenen:
   Bei --ui-scale 1 und franzoesischen Beschriftungen (die laengsten der drei
   Sprachen de/fr/en) misst die Anzeige-Gruppe (.pos-bon-toolbar-view) 392,9px,
   die Aktionsgruppe (.pos-bon-toolbar-actions) 383,2px - beide Gruppen
   nebeneinander samt Zwischenraum, Trenner und Toolbar-Padding rund 813px.
   Schwelle knapp darueber gesetzt: 830px Container-Breite (siehe
   @container-Regel unten). Gemessen am 06.08.2026 mit den echten
   Toolbar-Klassen und den aktuellen Uebersetzungen; bei einer Aenderung an den
   Beschriftungen nachpruefen. */
.pos-bon-toolbar[b-cvjiezrz15] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    border-bottom: 1px solid var(--pos-hairline);
}

/* Die Anzeige-Schalter - eigene, benannte Gruppe (wie die Aktionen es seit
   Paket 1 des Beleg-Auftrags schon sind), damit die Toolbar genau ZWEI
   Flex-Kinder hat und nur zwischen ihnen ueberhaupt umgebrochen werden kann.
   flex-wrap bleibt als LETZTER Ausweg (5e): wird die Spalte noch schmaler als
   fuer zwei einzeilige Reihen noetig, darf innerhalb der Gruppe umbrechen -
   ueberlaufen bleibt trotzdem verboten. */
.pos-bon-toolbar-view[b-cvjiezrz15] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    row-gap: calc(6px * var(--ui-scale, 1));
}

.pos-bon-voided-toggle[b-cvjiezrz15] {
    display: flex;
    align-items: center;
    gap: calc(5px * var(--ui-scale, 1));
    font-size: calc(11.5px * var(--ui-scale, 1));
    color: var(--pos-muted);
    /* Ein Bedienelement, dessen eigene Aufschrift umbricht, sieht immer nach
       Unfall aus - jedes Toolbar-Element ist ab jetzt eine unteilbare
       Einheit. */
    white-space: nowrap;
}

/* Der zarte Trenner "sortiert" die zwei Gruppen, ohne aufzufallen - und
   wechselt mit dem Layout die Richtung: senkrechter Haarstrich einzeilig
   (Default hier), waagerechter zweizeilig (siehe @container-Regel unten). */
.pos-bon-toolbar-divider[b-cvjiezrz15] {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    background: var(--pos-hairline);
}

/* Bis hierher stand zwischen den Anzeige-Schaltern und den Aktionen ein
   leerer Spacer mit "flex: 1 1 auto", der die Aktionen nach rechts drueckte.
   Die drei Aktionen sind seit dem Beleg-Auftrag EINE Gruppe mit
   "margin-left: auto" statt Einzelknoepfe hinter dem Spacer - dasselbe Bild
   einzeilig, der automatische Rand nimmt den freien Platz auf.

   Bei zwei Reihen (@container-Regel unten) waere dieser Rand jetzt falsch:
   Die Gruppe stuende in der zweiten Reihe einsam rechts, statt buendig unter
   den Schaltern zu beginnen. Dort wird "margin-left" deshalb auf 0 und
   "justify-content" auf "flex-start" gedreht. Wird es noch schmaler, bricht
   die Gruppe in sich selbst um (eigenes flex-wrap) - der letzte Ausweg,
   bevor etwas ueberliefe. */
.pos-bon-toolbar-actions[b-cvjiezrz15] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    row-gap: calc(6px * var(--ui-scale, 1));
    margin-left: auto;
}

.pos-bon-toolbar-btn[b-cvjiezrz15] {
    flex: 0 0 auto;
    min-height: calc(28px * var(--ui-scale, 1));
    padding: 0 calc(10px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(11.5px * var(--ui-scale, 1));
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
}

/* DER FESTGELEGTE UMBRUCHPUNKT (Begruendung und Messung oben bei
   .pos-bon-toolbar): unterhalb der gemessenen Schwelle klappen die zwei
   Gruppen untereinander - ein Zustandswechsel bei bekannter Breite statt
   flex-wrap, das an einer beliebigen Stelle bricht. */
@container (max-width: 830px) {
    .pos-bon-toolbar[b-cvjiezrz15] {
        flex-direction: column;
        align-items: stretch;
    }

    .pos-bon-toolbar-actions[b-cvjiezrz15] {
        margin-left: 0;
        justify-content: flex-start;
    }

    .pos-bon-toolbar-divider[b-cvjiezrz15] {
        width: auto;
        height: 1px;
        align-self: auto;
    }
}

/* Gruender-Test 23.07.2026: Schatten oben/unten an der scrollbaren Liste -
   deutet an, dass darunter/darueber noch Zeilen "verschwinden". Reine CSS-
   Technik ohne JS: zwei "Abdeck"-Verlaeufe scrollen MIT dem Inhalt
   (background-attachment: local) und schieben sich bei Erreichen des
   jeweiligen Endes genau vor die zwei ortsfesten Schatten-Verlaeufe
   (background-attachment: scroll) - der Schatten ist dadurch nur sichtbar,
   solange dort tatsaechlich noch mehr Inhalt liegt. Optisches Experiment,
   nur dieser eine background-Block, um es bei Nichtgefallen wieder zu
   entfernen. */
.pos-bon-lines[b-cvjiezrz15] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: calc(8px * var(--ui-scale, 1));
    scrollbar-width: thin;
    scrollbar-color: var(--pos-muted) var(--pos-canvas);

    background:
        linear-gradient(var(--pos-panel) 30%, rgba(0, 0, 0, 0)),
        linear-gradient(rgba(0, 0, 0, 0), var(--pos-panel) 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-color: var(--pos-panel);
    background-size: 100% 32px, 100% 32px, 100% 12px, 100% 12px;
    background-attachment: local, local, scroll, scroll;
}

/* Gründer-Feedback 22.07.2026: die native Scrollleiste ignorierte das Theme
   (immer heller Track+grauer Schieber, im Dunkel-Theme "zu viel Weiß") - Track
   jetzt explizit auf die Canvas-Farbe des jeweiligen Themes gesetzt. */
.pos-bon-lines[b-cvjiezrz15]::-webkit-scrollbar {
    width: 8px;
}

.pos-bon-lines[b-cvjiezrz15]::-webkit-scrollbar-track {
    background: var(--pos-canvas);
}

.pos-bon-lines[b-cvjiezrz15]::-webkit-scrollbar-thumb {
    background: var(--pos-muted);
    border-radius: 4px;
}

.pos-bon-empty[b-cvjiezrz15] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    color: var(--pos-muted);
    text-align: center;
    margin-top: calc(32px * var(--ui-scale, 1));
}

.pos-bon-empty .fa[b-cvjiezrz15] {
    font-size: calc(24px * var(--ui-scale, 1));
}

.pos-bon-empty p[b-cvjiezrz15] {
    margin: 0;
    font-size: calc(13px * var(--ui-scale, 1));
}

@keyframes pos-fade-in-b-cvjiezrz15 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pos-bon-line[b-cvjiezrz15] {
    display: flex;
    align-items: stretch;
    gap: calc(10px * var(--ui-scale, 1));
    padding: calc(9px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) 0;
    animation: pos-fade-in-b-cvjiezrz15 150ms ease-out;
}

/* Gang-lose Zeile: der Trenner laeuft ueber die VOLLE Breite (auch unter der
   Mengen-Spalte hindurch), wie vor der Gang-Umgestaltung - nur Zeilen
   innerhalb einer Gang-Gruppe (siehe .pos-bon-course-rows) beginnen den
   Trenner erst am Namen, damit die Gang-Linie links frei durchlaeuft. */
.pos-bon-line-plain[b-cvjiezrz15] {
    border-bottom: 1px solid var(--pos-hairline);
    padding-bottom: calc(9px * var(--ui-scale, 1));
}

.pos-bon-line-plain .pos-bon-line-content[b-cvjiezrz15] {
    border-bottom: none;
    padding-bottom: 0;
}

.pos-bon-line-content[b-cvjiezrz15] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: calc(10px * var(--ui-scale, 1));
    padding-bottom: calc(9px * var(--ui-scale, 1));
    border-bottom: 1px solid var(--pos-hairline);
}

/* Paket A (Gaenge), Gründer-Feedback 22.07.2026: EINE durchgehende Linie ueber
   die ganze Gang-Gruppe (Gruppen-Element, nicht mehr je Zeile - vorher an
   jedem Zeilenabstand sichtbar "zerrissen"). Die Gangnummer erscheint als
   kleiner Kreis oben auf der Linie. */
.pos-bon-course-group[b-cvjiezrz15] {
    display: flex;
    align-items: stretch;
    gap: calc(10px * var(--ui-scale, 1));
}

/* Gründer-Feedback 23.07.2026: die Gang-Nummer (Kreis, per negativem "left"
   nach links aus .pos-bon-course-mark herausgezogen) wurde am linken Rand der
   Bon-Spalte angeschnitten. Zusammen mit der Gang-Linie (::before) 7px nach
   rechts geschoben - reicht, weil dort noch Luft war; alles andere bleibt. */
.pos-bon-course-mark[b-cvjiezrz15] {
    flex: 0 0 auto;
    align-self: stretch;
    width: calc(20px * var(--ui-scale, 1));
    margin-left: calc(9px * var(--ui-scale, 1));
    position: relative;
}

/* Gründer-Feedback 22.07.2026: die Linie endet ~5px vor dem Gruppenende, statt
   bis ganz unten durchzulaufen - sonst beruehrt sie fast den Kreis des
   naechsten Gangs darunter, es fehlt Luft zwischen den beiden Gruppen. Border
   deshalb auf einem eigenen Pseudo-Element mit verkuerztem "bottom" statt
   direkt auf .pos-bon-course-mark (das weiterhin die volle Gruppenhoehe fuer
   den Flex-Stretch braucht). */
.pos-bon-course-mark[b-cvjiezrz15]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: calc(5px * var(--ui-scale, 1));
    border-left: 2px solid var(--pos-hairline);
}

.pos-bon-course-rows[b-cvjiezrz15] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Paket B (Doc 17 Kap. 5, Sprachnotiz): die Gang-Nummern wurden groesser und
   sind jetzt die Bedienflaeche (Tap -> "Gang abrufen"), statt reiner Anzeige. */
.pos-bon-course-number[b-cvjiezrz15] {
    position: absolute;
    top: calc(2px * var(--ui-scale, 1));
    left: calc(-15.5px * var(--ui-scale, 1));
    width: calc(31px * var(--ui-scale, 1));
    height: calc(31px * var(--ui-scale, 1));
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(15px * var(--ui-scale, 1));
    font-weight: 700;
    box-shadow: var(--pos-shadow-pressed);
    cursor: pointer;
    touch-action: manipulation;
    padding: 0;
}

.pos-bon-course-number:disabled[b-cvjiezrz15] {
    cursor: default;
}

/* Farbcode: grau = gehalten (Default), blau = abgerufen/in Produktion,
   gruen = fertig produziert, Rot-Akzent zusaetzlich bei Storno im Gang. */
.pos-bon-course-number-held[b-cvjiezrz15] {
    background: var(--pos-faint);
    color: #fff;
}

.pos-bon-course-number-fired[b-cvjiezrz15] {
    background: #4C6EF5;
    color: #fff;
}

.pos-bon-course-number-done[b-cvjiezrz15] {
    background: var(--tim-minze, #17A398);
    color: #fff;
}

/* AUFTRAG-CI-ROLLOUT-CC.md Paket F: Storno-Ring bewusst NICHT --pos-accent
   (der ist jetzt Tomate, die primaere Aktionsfarbe) - eigenes Fehler-Rot,
   damit Storno nicht mit einer aktiven Aktion verwechselbar ist. */
.pos-bon-course-number-void-accent[b-cvjiezrz15] {
    box-shadow: 0 0 0 2px var(--tim-fehler, #B3261E);
}

.pos-bon-line-voided[b-cvjiezrz15] {
    opacity: 0.5;
}

.pos-bon-line-voided .pos-bon-line-name[b-cvjiezrz15] {
    text-decoration: line-through;
}

.pos-bon-line-qty-static[b-cvjiezrz15] {
    flex: 0 0 auto;
    min-width: calc(26px * var(--ui-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(13px * var(--ui-scale, 1));
    color: var(--pos-faint);
    font-variant-numeric: tabular-nums;
}

/* Nachtrag 6. Runde Punkt 22: kompakte Platz-Kennung ("P3") neben der Menge -
   eigenes, dezentes Tag statt Freitext, damit es in beiden Bon-Ansichten
   (Protokoll/summierend) nicht mit Kommentar/Optionen verwechselt wird. */
.pos-bon-line-seat[b-cvjiezrz15] {
    flex: 0 0 auto;
    padding: calc(1px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-muted);
    font-size: calc(10.5px * var(--ui-scale, 1));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pos-bon-line-main[b-cvjiezrz15] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    touch-action: manipulation;
}

/* Umbricht statt abzuschneiden - ein langer Kommentar/Optionen-Text darf die
   Bonspalte nie breiter machen (sie hat eine feste Breite), also lieber eine
   zweite/dritte Zeile als Ellipsis oder horizontales Ausufern. */
.pos-bon-line-sub[b-cvjiezrz15] {
    font-size: calc(11px * var(--ui-scale, 1));
    color: var(--pos-muted);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.pos-bon-line-status[b-cvjiezrz15] {
    font-size: calc(10.5px * var(--ui-scale, 1));
    color: var(--pos-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Gründer-Feedback 23.07.2026 (3): NUR die Schriftfarbe soll sich abheben,
   kein Hintergrund-Chip ("viel zu aufdringlich") - zwei Orange-Schattierungen,
   bewusst als feste Farben (nicht theme-abhaengig), da sie auf hellem wie
   dunklem Grund gleichermaßen lesbar sein sollen. */
.pos-bon-line-status-waiting-production[b-cvjiezrz15] {
    color: #FD7E14;
}

.pos-bon-line-status-in-production[b-cvjiezrz15] {
    color: #E8590C;
}

.pos-bon-line-total-discounted[b-cvjiezrz15] {
    color: var(--pos-accent);
}

.pos-bon-line-total-base[b-cvjiezrz15] {
    display: block;
    font-size: calc(11px * var(--ui-scale, 1));
    color: var(--pos-faint);
    text-decoration: line-through;
    font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
    .pos-bon-line[b-cvjiezrz15] {
        animation: none;
    }
}

.pos-bon-line-qty[b-cvjiezrz15] {
    display: flex;
    align-items: center;
    gap: calc(2px * var(--ui-scale, 1));
    flex: 0 0 auto;
}

.pos-bon-line-qty-text[b-cvjiezrz15] {
    min-width: calc(26px * var(--ui-scale, 1));
    text-align: center;
    font-size: calc(13px * var(--ui-scale, 1));
    color: var(--pos-faint);
    font-variant-numeric: tabular-nums;
}

.pos-bon-qty-btn[b-cvjiezrz15] {
    width: calc(24px * var(--ui-scale, 1));
    height: calc(24px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: transparent;
    color: var(--pos-muted);
    font-size: calc(14px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-touch-callout: none;
    transition: transform 100ms ease-out, background 100ms ease-out;
}

.pos-bon-qty-btn:active[b-cvjiezrz15] {
    transform: scale(0.9);
    background: var(--pos-surface);
}

/* Umbricht statt abzuschneiden - ein langer Artikelname darf die Bonspalte
   nie in die Breite treiben (Gründer-Feedback 22.07.2026: "Liste muss schmal
   bleiben"), also lieber eine zweite Zeile als Ellipsis/horizontales Wachsen. */
.pos-bon-line-name[b-cvjiezrz15] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: calc(14px * var(--ui-scale, 1));
}

.pos-bon-line-total[b-cvjiezrz15] {
    flex: 0 0 auto;
    min-width: calc(60px * var(--ui-scale, 1));
    text-align: right;
    font-size: calc(14px * var(--ui-scale, 1));
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    touch-action: manipulation;
}

/* Nachtrag 7. Runde Punkt 26: gebuchte Zahlungen unterhalb der Bon-Zeilen,
   ueber der Summen-Fusszeile. */
.pos-bon-payments[b-cvjiezrz15] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--ui-scale, 1));
    padding: calc(6px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) 0;
    border-top: 1px solid var(--pos-hairline);
}

.pos-bon-payment-row[b-cvjiezrz15] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    font-size: calc(12px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-bon-payment-method[b-cvjiezrz15] {
    flex: 1 1 auto;
    font-weight: 600;
}

.pos-bon-payment-amount[b-cvjiezrz15] {
    font-variant-numeric: tabular-nums;
}

.pos-bon-payment-row-voided[b-cvjiezrz15] {
    text-decoration: line-through;
    opacity: 0.6;
}

.pos-bon-payment-voided-tag[b-cvjiezrz15] {
    font-size: calc(10px * var(--ui-scale, 1));
    color: var(--tim-fehler, #B3261E);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
}

.pos-bon-footer[b-cvjiezrz15] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--ui-scale, 1));
    border-top: 1px solid var(--pos-hairline);
    padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
    padding-bottom: calc(10px * var(--ui-scale, 1) + env(safe-area-inset-bottom, 0px));
}

.pos-bon-footer-left[b-cvjiezrz15] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--ui-scale, 1));
}

.pos-bon-sum[b-cvjiezrz15] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Gründer-Feedback 26.07.2026: "Bezahlen" stand bisher im Kopfbereich - jetzt
   unten rechts neben der Summe, bewusst weiter in Akzentfarbe (kein stiller
   Icon-Toggle wie die uebrigen Kopf-Aktionen). */
.pos-bon-pay-btn[b-cvjiezrz15] {
    flex: 0 0 auto;
    min-height: calc(34px * var(--ui-scale, 1));
    padding: 0 calc(14px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-accent);
    color: var(--pos-on-accent, #fff);
    font-weight: 700;
    font-size: calc(12.5px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

.pos-bon-pay-btn:active[b-cvjiezrz15] {
    transform: translateY(1px) scale(0.98);
}

.pos-bon-sum-label[b-cvjiezrz15] {
    font-size: calc(11px * var(--ui-scale, 1));
    color: var(--pos-faint);
}

.pos-bon-sum-value[b-cvjiezrz15] {
    font-size: calc(22px * var(--ui-scale, 1));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* AUFTRAG-EVENT-EDITOR-UND-BELEGUNGSKONFLIKT-CC.md Paket G (F-58): "Im hellen
   Modus ist der Send-Button kaum sichtbar ... Im Dunkelmodus dasselbe."
   Gemessen: der Knopf hatte im Hellmodus EXAKT die Farbe seines Untergrunds
   (--pos-surface #FFFFFF auf --pos-panel #FFFFFF); abgegrenzt hat ihn nur ein
   Pixel Schatten mit 9 % Deckkraft. Im Dunkelmodus #271E24 auf #1C151A, und der
   Schatten (rgba(0,0,0,.3)) ist auf dunklem Grund per se unsichtbar.

   Das ist keine Kontrast-Kleinigkeit, sondern eine umgekehrte Hierarchie:
   "Senden" ist die haeufigste Handlung am Bon, "Bezahlen" passiert einmal je
   Vorgang. Senden ist deshalb jetzt der primaere, gefuellte Knopf (Minze, s.
   --pos-go in pos-theme.css); Bezahlen bleibt in Tomate und damit deutlich
   sichtbar. Groesse/Gewicht bleiben gestaffelt (Senden 38px hoch und 22px
   Innenabstand, Bezahlen 34px/14px), damit die Rangfolge auch ohne Farbe
   lesbar ist. */
.pos-bon-send[b-cvjiezrz15] {
    flex: 0 0 auto;
    min-height: calc(38px * var(--ui-scale, 1));
    padding: 0 calc(22px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-go);
    color: var(--pos-on-go, #fff);
    font-weight: 700;
    font-size: calc(14px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-touch-callout: none;
    box-shadow: var(--pos-shadow-pressed);
    transition: transform 100ms ease-out, box-shadow 100ms ease-out, filter 100ms ease-out;
}

.pos-bon-send:active[b-cvjiezrz15] {
    transform: translateY(1px) scale(0.98);
    box-shadow: none;
    filter: brightness(1.1);
}

/* Paket G: "nichts zu senden" muss klar INAKTIV lesen, nicht als blasser
   Vollknopf. Auf einer gefuellten Flaeche wirkt opacity 0.4 anders als auf der
   fruehen weissen - deshalb faellt der Knopf im deaktivierten Zustand ganz auf
   den leisen Ton zurueck, mit Haarlinie (als inset-Schatten, damit die
   Knopfgroesse sich nicht aendert) und gedaempfter Schrift. */
.pos-bon-send:disabled[b-cvjiezrz15] {
    background: var(--pos-surface);
    color: var(--pos-muted);
    box-shadow: inset 0 0 0 1px var(--pos-hairline);
    opacity: 1;
    cursor: default;
}

/* Gründer-Feedback 23.07.2026: "Abgeholt" - der Service meldet fertige,
   abgeholte Positionen selbst (beendet die Wartezeit-Service-Uhr), nicht die
   Kueche. */
.pos-bon-pickup-strip[b-cvjiezrz15] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--ui-scale, 1));
    padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    background: rgba(47, 158, 68, 0.12);
    border-bottom: 1px solid var(--pos-hairline);
}

.pos-bon-pickup-row[b-cvjiezrz15] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
}

.pos-bon-pickup-qty[b-cvjiezrz15] {
    font-weight: 700;
    font-size: calc(12px * var(--ui-scale, 1));
}

.pos-bon-pickup-name[b-cvjiezrz15] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: calc(12px * var(--ui-scale, 1));
}

.pos-bon-pickup-wait[b-cvjiezrz15] {
    font-variant-numeric: tabular-nums;
    font-size: calc(11px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-bon-pickup-btn[b-cvjiezrz15] {
    flex: 0 0 auto;
    min-height: calc(28px * var(--ui-scale, 1));
    padding: 0 calc(10px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--tim-minze, #17A398);
    color: #fff;
    font-size: calc(11.5px * var(--ui-scale, 1));
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

/* Gründer-Feedback 23.07.2026: nach ~1 Minute Wartezeit soll die Zeile
   blinken, damit ein schludernder Abholvorgang auffaellt. */
@keyframes pos-bon-pickup-blink-b-cvjiezrz15 {
    0%, 100% { background: rgba(224, 49, 49, 0.28); }
    50% { background: transparent; }
}

.pos-bon-pickup-row-blink[b-cvjiezrz15] {
    animation: pos-bon-pickup-blink-b-cvjiezrz15 1s ease-in-out infinite;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .pos-bon-pickup-row-blink[b-cvjiezrz15] {
        animation: none;
        background: rgba(224, 49, 49, 0.28);
    }
}
/* /Pages/Pos/Components/PosBonResizeHandle.razor.rz.scp.css */
.pos-bon-resize-handle[b-jpmsnu1zc2] {
    position: absolute;
    top: -3px;
    right: -12px;
    width: 24px;
    height: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    cursor: ew-resize;
    touch-action: none;
    z-index: 5;
}

/* "Ein kleines Dreieck, das auf der Spitze steht" - Basis oben, Spitze unten. */
.pos-bon-resize-triangle[b-jpmsnu1zc2] {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--pos-muted);
    transition: border-top-color 100ms ease-out;
}

.pos-bon-resize-handle:hover .pos-bon-resize-triangle[b-jpmsnu1zc2],
.pos-bon-resize-handle:active .pos-bon-resize-triangle[b-jpmsnu1zc2] {
    border-top-color: var(--pos-accent);
}
/* /Pages/Pos/Components/PosColorPickerSheet.razor.rz.scp.css */
.pos-color-picker[b-ds35y7uace] {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--ui-scale, 1));
}

.pos-color-picker-item[b-ds35y7uace] {
    margin: 0;
    font-weight: 600;
    font-size: calc(13px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-color-picker-grid[b-ds35y7uace] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(44px * var(--ui-scale, 1)), 1fr));
    gap: calc(10px * var(--ui-scale, 1));
}

.pos-color-swatch[b-ds35y7uace] {
    width: calc(44px * var(--ui-scale, 1));
    height: calc(44px * var(--ui-scale, 1));
    border: 2px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    touch-action: manipulation;
}

.pos-color-swatch-active[b-ds35y7uace] {
    border-color: var(--pos-text);
    box-shadow: var(--pos-shadow-pressed);
}

.pos-color-picker-reset[b-ds35y7uace] {
    min-height: calc(38px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-muted);
    font-size: calc(12.5px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}
/* /Pages/Pos/Components/PosCommentSheet.razor.rz.scp.css */
.pos-comment-edit[b-bpuba6r318] {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--ui-scale, 1));
}

.pos-comment-edit-textarea[b-bpuba6r318] {
    resize: vertical;
    min-height: calc(70px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: calc(8px * var(--ui-scale, 1));
    font-size: calc(13px * var(--ui-scale, 1));
    font-family: inherit;
}

.pos-comment-edit-actions[b-bpuba6r318] {
    display: flex;
    justify-content: flex-end;
}

.pos-comment-edit-save[b-bpuba6r318] {
    min-height: calc(38px * var(--ui-scale, 1));
    padding: 0 calc(18px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-accent);
    color: var(--pos-on-accent, #fff);
    font-weight: 700;
    font-size: calc(13px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}
/* /Pages/Pos/Components/PosCompactNav.razor.rz.scp.css */
/* Kompaktmodus-Navigation (kein Faecher, kein Seitwaerts-Scroll): drei grosse
   Hauptbereich-Buttons + kleiner Favoriten-Zugang. Tap auf einen Hauptbereich
   oeffnet ein fast bildschirmfuellendes PosSheet mit den Warengruppen als grosse,
   daumenfreundliche Kacheln - zwei Taps bis zu den Produkten, aber nichts
   scrollt seitwaerts und alles ist auf Anhieb lesbar (12-kassenkonzept Kap. 3). */

.pos-compact-nav[b-ao4w0srg74] {
    flex: 0 0 auto;
    display: flex;
    gap: calc(8px * var(--ui-scale, 1));
    padding: calc(8px * var(--ui-scale, 1));
    padding-bottom: calc(8px * var(--ui-scale, 1) + env(safe-area-inset-bottom, 0px));
    background: var(--pos-panel);
    border-top: 1px solid var(--pos-hairline);
}

.pos-compact-fav[b-ao4w0srg74],
.pos-compact-hb[b-ao4w0srg74] {
    border: none;
    border-radius: var(--pos-radius-btn, 7px);
    background: var(--pos-surface);
    color: var(--pos-text);
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-touch-callout: none;
    box-shadow: var(--pos-shadow-pressed);
    transition: transform 100ms ease-out, filter 100ms ease-out;
}

.pos-compact-fav:active[b-ao4w0srg74],
.pos-compact-hb:active[b-ao4w0srg74] {
    transform: translateY(1px) scale(0.98);
    filter: brightness(1.08);
}

.pos-compact-fav[b-ao4w0srg74] {
    flex: 0 0 auto;
    width: calc(48px * var(--ui-scale, 1));
    min-height: calc(48px * var(--ui-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(18px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-compact-fav-active[b-ao4w0srg74] {
    color: var(--pos-accent);
}

.pos-compact-hb[b-ao4w0srg74] {
    flex: 1 1 0;
    min-height: calc(48px * var(--ui-scale, 1));
    font-size: calc(14px * var(--ui-scale, 1));
    font-weight: 600;
}

.pos-compact-hb-active[b-ao4w0srg74] {
    color: var(--pos-accent);
}

.pos-compact-sheet-grid[b-ao4w0srg74] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(10px * var(--ui-scale, 1));
}

.pos-compact-sheet-item[b-ao4w0srg74] {
    min-height: calc(56px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 7px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(14px * var(--ui-scale, 1));
    font-weight: 600;
    padding: calc(10px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-touch-callout: none;
    text-align: center;
    box-shadow: var(--pos-shadow-pressed);
    transition: transform 100ms ease-out, filter 100ms ease-out;
}

.pos-compact-sheet-item:active[b-ao4w0srg74] {
    transform: translateY(1px) scale(0.98);
    filter: brightness(1.08);
}

/* Gründer-Feedback 23.07.2026: dieselbe Warengruppen-Farbe wie in PosFan
   (breite Ansicht) - weisser Text, da die Palette gedeckte Mitteltoene liefert. */
.pos-compact-sheet-item-colored[b-ao4w0srg74] {
    color: #FFFFFF;
}
/* /Pages/Pos/Components/PosDiscountSheet.razor.rz.scp.css */
.pos-discount[b-zrvpcsve4t] {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--ui-scale, 1));
}

/* Live-Vorschau: Basispreis + Pfeil + Effektivpreis, aktualisiert sich schon
   waehrend der Eingabe (Gründer-Feedback: "sollte auch gleich oben der
   Basispreis sich entsprechend korrigieren"). */
.pos-discount-preview[b-zrvpcsve4t] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: calc(8px * var(--ui-scale, 1));
    padding: calc(6px * var(--ui-scale, 1)) 0 calc(2px * var(--ui-scale, 1));
    font-size: calc(16px * var(--ui-scale, 1));
    font-weight: 700;
}

.pos-discount-preview-base[b-zrvpcsve4t] {
    color: var(--pos-text);
}

.pos-discount-preview-base-struck[b-zrvpcsve4t] {
    color: var(--pos-faint);
    font-weight: 400;
    font-size: calc(13px * var(--ui-scale, 1));
    text-decoration: line-through;
}

.pos-discount-preview .fa-arrow-right[b-zrvpcsve4t] {
    font-size: calc(11px * var(--ui-scale, 1));
    color: var(--pos-faint);
}

/* Gründer-Feedback 23.07.2026: >50%-Preisaenderung - Amber statt dem roten
   Accent (der ist fuer destruktive Aktionen wie Storno reserviert), damit
   "Warnung" optisch nicht mit "Gefahr/Loeschen" verwechselt wird. */
.pos-discount-warning[b-zrvpcsve4t] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--ui-scale, 1));
    padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
    border-radius: var(--pos-radius-btn, 6px);
    background: rgba(217, 130, 43, 0.15);
    color: #D9822B;
    font-size: calc(12px * var(--ui-scale, 1));
    font-weight: 600;
}

.pos-discount-preview-effective[b-zrvpcsve4t] {
    color: var(--pos-accent);
}

.pos-discount-current[b-zrvpcsve4t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: calc(13px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

/* Modus-Auswahl (Prozent/Betrag/Zielpreis) - genau ein Modus aktiv, ersetzt
   die drei fruehreren Zeilen mit je eigenem Anwenden-Button (Gründer-
   Feedback: "Mir ist die Logik nicht so ganz klar"). */
.pos-discount-modes[b-zrvpcsve4t] {
    display: flex;
    gap: calc(6px * var(--ui-scale, 1));
}

.pos-discount-modes button[b-zrvpcsve4t] {
    flex: 1 1 0;
    min-height: calc(34px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-muted);
    font-weight: 600;
    font-size: calc(12.5px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

.pos-discount-mode-active[b-zrvpcsve4t] {
    color: var(--pos-accent) !important;
    box-shadow: var(--pos-shadow-pressed);
}

.pos-discount-clear[b-zrvpcsve4t] {
    border: none;
    background: transparent;
    color: var(--pos-accent);
    font-size: calc(12px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

.pos-discount-toggle[b-zrvpcsve4t] {
    display: flex;
    gap: calc(6px * var(--ui-scale, 1));
}

.pos-discount-toggle button[b-zrvpcsve4t] {
    flex: 1 1 0;
    min-height: calc(34px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-muted);
    font-weight: 600;
    font-size: calc(13px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

.pos-discount-toggle-active[b-zrvpcsve4t] {
    color: var(--pos-accent) !important;
}

.pos-discount-row[b-zrvpcsve4t] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
}

.pos-discount-label[b-zrvpcsve4t] {
    flex: 0 0 auto;
    width: calc(70px * var(--ui-scale, 1));
    font-size: calc(12px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-discount-input[b-zrvpcsve4t] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: calc(34px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: 0 calc(8px * var(--ui-scale, 1));
    font-size: calc(13px * var(--ui-scale, 1));
}

/* Gründer-Feedback 23.07.2026: der native Zahlen-Spinner (Pfeil hoch/runter)
   ist in keinem der drei Modi nuetzlich (Tippen/Zahlenfeld ist der eigentliche
   Eingabeweg) - ueberall ausgeblendet. */
.pos-discount-input-no-spinner[b-zrvpcsve4t]::-webkit-outer-spin-button,
.pos-discount-input-no-spinner[b-zrvpcsve4t]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pos-discount-input-no-spinner[b-zrvpcsve4t] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.pos-discount-apply-main[b-zrvpcsve4t] {
    min-height: calc(42px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-accent);
    color: var(--pos-on-accent, #fff);
    font-weight: 700;
    font-size: calc(14px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

.pos-discount-apply-main:disabled[b-zrvpcsve4t] {
    opacity: 0.4;
    cursor: default;
}

.pos-discount-reason[b-zrvpcsve4t] {
    min-height: calc(34px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: 0 calc(8px * var(--ui-scale, 1));
    font-size: calc(13px * var(--ui-scale, 1));
}

.pos-discount-checkbox[b-zrvpcsve4t] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--ui-scale, 1));
    font-size: calc(12px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-discount-void[b-zrvpcsve4t] {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--ui-scale, 1));
    padding-top: calc(8px * var(--ui-scale, 1));
    border-top: 1px solid var(--pos-hairline);
}

.pos-discount-void-btn[b-zrvpcsve4t] {
    min-height: calc(36px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-accent);
    font-weight: 600;
    font-size: calc(13px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

.pos-discount-void-confirm:disabled[b-zrvpcsve4t] {
    opacity: 0.4;
    cursor: default;
}
/* /Pages/Pos/Components/PosFan.razor.rz.scp.css */
/* Drei Hauptbereich-Bloecke (Getraenke/Speisen/Sonstiges), je einer klickbar
   beschriftet. Die Warengruppen-Chips eines Blocks fliessen natuerlich nach
   rechts und wickeln (flex-wrap) in eine neue Zeile, sobald der Rand erreicht
   ist - nur so viele Zeilen wie tatsaechlich noetig, gedeckelt auf drei.
   Wuerde sogar eine vierte Zeile noetig, schaltet pos-fan.js den Block
   stattdessen auf eine einzeilige, per Pfeil blaetterbare Scroll-Leiste um
   (Extremfall, in der Praxis kaum zu erwarten). */

.pos-fan[b-2pzelvvsdv] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: calc(8px * var(--ui-scale, 1));
    background: var(--pos-panel);
    border-top: 1px solid var(--pos-hairline);
    padding: calc(8px * var(--ui-scale, 1));
}

.pos-fan-fav[b-2pzelvvsdv] {
    flex: 0 0 auto;
    width: calc(40px * var(--ui-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--pos-radius-btn, 7px);
    background: var(--pos-surface);
    color: var(--pos-muted);
    font-size: calc(16px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-pressed);
    transition: transform 100ms ease-out, filter 100ms ease-out;
}

.pos-fan-fav:active[b-2pzelvvsdv] {
    transform: translateY(1px) scale(0.96);
    filter: brightness(1.08);
}

.pos-fan-fav-active[b-2pzelvvsdv] {
    color: var(--pos-accent);
}

.pos-fan-rows[b-2pzelvvsdv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(6px * var(--ui-scale, 1));
}

/* Feste Mindesthoehe, damit ein Block ohne Chips (z.B. Sonstiges ohne
   Warengruppen - nur das Label) nicht schmaler wird als ein Block mit Chips -
   sonst wirken die Luecken zwischen den Bloecken ungleichmaessig. */
.pos-fan-row[b-2pzelvvsdv] {
    flex: 0 0 auto;
    min-height: calc(28px * var(--ui-scale, 1));
    display: flex;
    align-items: flex-start;
    gap: calc(6px * var(--ui-scale, 1));
    min-width: 0;
}

.pos-fan-row-label[b-2pzelvvsdv] {
    flex: 0 0 auto;
    width: calc(72px * var(--ui-scale, 1));
    height: calc(28px * var(--ui-scale, 1));
    font-size: calc(11px * var(--ui-scale, 1));
    font-weight: 600;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 100ms ease-out;
}

.pos-fan-row-label:active[b-2pzelvvsdv] {
    color: var(--pos-text);
}

.pos-fan-row-label-active[b-2pzelvvsdv] {
    color: var(--pos-accent) !important;
}

.pos-fan-row-arrow[b-2pzelvvsdv] {
    flex: 0 0 auto;
    width: calc(26px * var(--ui-scale, 1));
    height: calc(26px * var(--ui-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--pos-radius-btn, 7px);
    background: var(--pos-surface);
    color: var(--pos-muted);
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-pressed);
    transition: transform 100ms ease-out, filter 100ms ease-out;
}

.pos-fan-row-arrow:active[b-2pzelvvsdv] {
    transform: translateY(1px) scale(0.96);
    filter: brightness(1.08);
}

.pos-fan-row-arrow[hidden][b-2pzelvvsdv] {
    display: none;
}

/* Normalfall: wickelt natuerlich in bis zu drei Zeilen, gedeckelt per
   max-height (3 Chip-Zeilen + 2 Zwischenraeume) mit overflow:hidden - das
   liefert pos-fan.js zugleich das Messsignal (scrollHeight > clientHeight),
   ob eine vierte Zeile noetig waere. */
.pos-fan-row-track[b-2pzelvvsdv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    gap: calc(6px * var(--ui-scale, 1));
    max-height: calc((3 * 28px + 2 * 6px) * var(--ui-scale, 1));
    overflow: hidden;
}

/* Extremfall (vierte Zeile waere noetig): einzeilig, per Pfeil-Tap
   blaetterbar. Kein Wisch-/Zieh-Scroll, keine sichtbare Scrollbar - die Zeile
   bewegt sich nur, wenn ein Pfeil-Button track.scrollBy() ausloest. */
.pos-fan-row-track-scroll[b-2pzelvvsdv] {
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;
}

.pos-fan-row-track-scroll[b-2pzelvvsdv]::-webkit-scrollbar {
    display: none;
}

.pos-fan-chip[b-2pzelvvsdv] {
    flex: 0 0 auto;
    height: calc(28px * var(--ui-scale, 1));
    padding: 0 calc(10px * var(--ui-scale, 1));
    display: flex;
    align-items: center;
    white-space: nowrap;
    border: none;
    border-radius: var(--pos-radius-btn, 7px);
    background: var(--pos-surface);
    color: var(--pos-muted);
    font-size: calc(12.5px * var(--ui-scale, 1));
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-touch-callout: none;
    box-shadow: var(--pos-shadow-pressed);
    transition: transform 100ms ease-out, filter 100ms ease-out;
}

.pos-fan-chip:active[b-2pzelvvsdv] {
    transform: translateY(1px) scale(0.98);
    filter: brightness(1.08);
}

.pos-fan-chip-active[b-2pzelvvsdv] {
    color: var(--pos-text);
}

/* Gründer-Feedback 23.07.2026: Kategorie-Buttons sollen die Farbe zeigen, die
   der Warengruppe (SICat) zugewiesen ist - dieselbe gedeckte Mitteltoene-
   Palette wie bei den Artikel-Kacheln (PosTile), deshalb auch hier immer
   weisser Text statt Hell/Dunkel-Umschaltung je Farbe. */
.pos-fan-chip-colored[b-2pzelvvsdv] {
    color: #FFFFFF;
}

.pos-fan-chip-colored.pos-fan-chip-active[b-2pzelvvsdv] {
    box-shadow: 0 0 0 2px var(--pos-accent), var(--pos-shadow-pressed);
}
/* /Pages/Pos/Components/PosInvoiceSheet.razor.rz.scp.css */
/* AUFTRAG-RECHNUNG-DURCHSTICH-CC.md Paket C: das Rechnungs-Blatt an der Kasse.
   Bewusst dieselbe Formensprache wie die uebrigen Kassen-Sheets (Fingergroesse
   vor Dichte) - der Kellner bedient das mit dem Daumen, nicht mit der Maus. */

.pos-invoice[b-hhs099sbuo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px 12px;
}

.pos-invoice-error[b-hhs099sbuo] {
    background: var(--pos-danger-bg, #fdecea);
    color: var(--pos-danger-fg, #8a1c12);
    border-radius: 8px;
    padding: 10px 12px;
    line-height: 1.35;
}

.pos-invoice-busy[b-hhs099sbuo] {
    opacity: 0.6;
}

.pos-invoice-hint[b-hhs099sbuo] {
    margin: 0;
    font-size: 0.85em;
    opacity: 0.75;
    line-height: 1.35;
}

.pos-invoice-number[b-hhs099sbuo] {
    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.pos-invoice-sum[b-hhs099sbuo] {
    font-size: 1.35em;
    font-weight: 600;
}

.pos-invoice-recipient[b-hhs099sbuo] {
    border: 1px solid var(--pos-line, #d7d7d7);
    border-radius: 10px;
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-invoice-recipient legend[b-hhs099sbuo] {
    padding: 0 6px;
    font-size: 0.85em;
    opacity: 0.8;
}

.pos-invoice-recipient label[b-hhs099sbuo] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.85em;
    flex: 1;
}

.pos-invoice-recipient input[b-hhs099sbuo] {
    font: inherit;
    font-size: 1rem;
    padding: 9px 10px;
    border: 1px solid var(--pos-line, #d7d7d7);
    border-radius: 8px;
    background: var(--pos-input-bg, #fff);
    color: inherit;
}

.pos-invoice-row[b-hhs099sbuo] {
    display: flex;
    gap: 8px;
}

.pos-invoice-narrow[b-hhs099sbuo] {
    max-width: 8em;
}

.pos-invoice-actions[b-hhs099sbuo] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* „Verwerfen" und „Stornieren" sind leiser als die Haupthandlung - sie sollen
   erreichbar sein, aber nicht einladen. */
.pos-invoice-quiet[b-hhs099sbuo] {
    opacity: 0.8;
}

/* AUFTRAG-RECHNUNG-REFERENZMODELL-SPRACHEN-CC.md Paket C.3: die Sprachwahl.
   Sie sitzt zwischen den Angaben und den Handlungen - eine Entscheidung ueber
   das Dokument, kein Formularfeld ueber den Gast. */
.pos-invoice-language[b-hhs099sbuo] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.pos-invoice-language select[b-hhs099sbuo] {
    flex: 1;
    min-width: 0;
}
/* /Pages/Pos/Components/PosKitchenTables.razor.rz.scp.css */
/* AUFTRAG-KDS-TISCHLISTE-CC.md Paket A - selbes Muster wie
   PosOpenTables.razor.css (optisches Vorbild), Kachel-Inhalt aber
   Kuechen-spezifisch statt Kassen-Summe. */
.pos-kitchen-tables[b-qmqnc0bpj1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    overflow-y: auto;
    padding: 8px;
    box-sizing: border-box;
    background: var(--pos-panel);
    flex: 0 0 auto;
    width: 180px;
}

.pos-kitchen-tables-row[b-qmqnc0bpj1] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-height: 48px;
    padding: 6px 10px;
    border: none;
    border-radius: var(--pos-radius-tile, 8px);
    background: var(--pos-surface);
    color: var(--pos-text);
    cursor: pointer;
    touch-action: manipulation;
    text-align: left;
    box-shadow: var(--pos-shadow-rest);
}

.pos-kitchen-tables-row-current[b-qmqnc0bpj1] {
    box-shadow: 0 0 0 2px var(--pos-accent), var(--pos-shadow-rest);
}

.pos-kitchen-tables-main[b-qmqnc0bpj1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-kitchen-tables-name[b-qmqnc0bpj1] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-kitchen-tables-courses[b-qmqnc0bpj1] {
    flex: 0 0 auto;
    display: flex;
    gap: 3px;
}

.pos-kitchen-tables-course[b-qmqnc0bpj1] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}

.pos-kitchen-tables-course-held[b-qmqnc0bpj1] {
    background: var(--pos-faint);
}

.pos-kitchen-tables-course-fired[b-qmqnc0bpj1] {
    background: #4C6EF5;
}

.pos-kitchen-tables-course-done[b-qmqnc0bpj1] {
    background: var(--tim-minze, #17A398);
}

.pos-kitchen-tables-wait-row[b-qmqnc0bpj1] {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
}

.pos-kitchen-tables-wait-count[b-qmqnc0bpj1] {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    color: var(--pos-accent);
}

.pos-kitchen-tables-wait-timer[b-qmqnc0bpj1] {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--pos-muted);
}
/* /Pages/Pos/Components/PosOpenTables.razor.rz.scp.css */
/* AUFTRAG-AKTE-MEGA-NACHBESSERUNG-CC.md Nachtrag 5. Runde Punkt 15: A+/A-
   muss JEDE Schrift der Kassen-Seite skalieren, "eine Wurzel-Variable, keine
   Ausnahmen" - diese Spalte war komplett aussen vor (kein einziges
   var(--ui-scale) in der ganzen Datei), obwohl --ui-scale auf .pos-shell
   gesetzt wird und hier vererbt ankommt. Jetzt durchgehend wie in den
   anderen Pos-Komponenten (PosBon.razor.css etc.) calc(Npx * var(--ui-scale, 1)). */
/* Nachtrag 8. Runde Punkt 27: dieser Bereich scrollt selbst nicht mehr -
   das uebernimmt .pos-open-tables-scroll darunter, damit der "Neuer
   Tisch"-Button (Punkt 27, sticky unten) und das Aufzieh-Dreieck
   (Punkt 29) ausserhalb des Scroll-Bereichs bleiben. */
.pos-open-tables[b-8g46151k16] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: calc(8px * var(--ui-scale, 1));
    box-sizing: border-box;
    background: var(--pos-panel);
}

/* Nachtrag 8. Runde Punkt 29: Mehrspalten-Tischliste - column-width laesst
   den Browser selbst entscheiden, wie viele Spalten in die (per Aufzieh-
   Dreieck veraenderbare) Breite passen ("so viele Spalten wie Platz").
   column-fill: auto (statt balance) fuellt naturgemaess LINKS zuerst von
   oben nach unten, dann die naechste Spalte rechts davon - genau die in
   Punkt 29 verlangte Reihenfolge, ganz ohne den rtl-Kniff der KDS-Warteliste. */
.pos-open-tables-scroll[b-8g46151k16] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    column-width: calc(190px * var(--ui-scale, 1));
    column-gap: calc(10px * var(--ui-scale, 1));
    column-fill: auto;
}

.pos-open-tables-scroll > *[b-8g46151k16] {
    break-inside: avoid;
}

.pos-open-tables-row[b-8g46151k16] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(2px * var(--ui-scale, 1));
    min-height: calc(48px * var(--ui-scale, 1));
    padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-tile, 8px);
    background: var(--pos-surface);
    color: var(--pos-text);
    cursor: pointer;
    touch-action: manipulation;
    text-align: left;
    /* Gruender-Feedback 25.07.2026: --pos-surface == --pos-panel im Hell-
       Theme (bewusst, Doc 12 - Abgrenzung laeuft ueber den Schatten, nicht
       ueber Farbe) - ohne eigenen Schatten war eine Tisch-Zeile im Hellen
       nicht vom Untergrund zu unterscheiden. */
    box-shadow: var(--pos-shadow-rest);
}

.pos-open-tables-row-current[b-8g46151k16] {
    box-shadow: 0 0 0 2px var(--pos-accent), var(--pos-shadow-rest);
}

/* Paket D (AUFTRAG-KASSE-SERVICE-AMPEL-CC.md): Farbwaesche als schmaler
   Rand-Akzent statt grossflaechiger Einfaerbung (Doc 20 Kap. 4: Tomate/Farben
   sparsam im Arbeits-UI der Kasse) - --pos-ampel-color kommt inline je Zeile
   aus der hoechsten erreichten Eskalationsstufe (Paket C). */
.pos-open-tables-row-ampel[b-8g46151k16] {
    border-left: 4px solid var(--pos-ampel-color, transparent);
}

/* Gründer-Feedback 24.07.2026: kein hartes An/Aus-Blinken und kein Ring am
   Rahmen - ein weiches Glow auf der Kachel selbst, das nie ganz ausgeht
   (oszilliert nur zwischen "leicht sichtbar" und "voll sichtbar"). */
@keyframes pos-open-tables-ampel-glow-b-8g46151k16 {
    0%, 100% { box-shadow: 0 0 4px 0 var(--pos-ampel-color, transparent); }
    50% { box-shadow: 0 0 14px 3px var(--pos-ampel-color, transparent); }
}

.pos-open-tables-row-ampel-pulse[b-8g46151k16] {
    animation: pos-open-tables-ampel-glow-b-8g46151k16 var(--pos-ampel-pulse-duration, 2.4s) ease-in-out infinite;
}

@keyframes pos-open-tables-row-flash-b-8g46151k16 {
    0% { filter: brightness(1.6); }
    100% { filter: brightness(1); }
}

/* Paket D.3: kurzes Feedback beim Long-Press (manueller Check), damit klar
   ist, dass der Check registriert wurde. */
.pos-open-tables-row-flash[b-8g46151k16] {
    animation: pos-open-tables-row-flash-b-8g46151k16 400ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .pos-open-tables-row-ampel-pulse[b-8g46151k16],
    .pos-open-tables-row-flash[b-8g46151k16] {
        animation: none;
    }
}

.pos-open-tables-main[b-8g46151k16] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
}

.pos-open-tables-name-col[b-8g46151k16] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.pos-open-tables-name[b-8g46151k16] {
    font-weight: 700;
    font-size: calc(14px * var(--ui-scale, 1));
}

/* Paket D.2: erscheint erst, sobald Stufe 1 erreicht ist. Gründer-Feedback
   24.07.2026: bleibt bewusst grau (var(--pos-muted)) statt in der Stufenfarbe
   - die Farbe zeigt sich nur ueber den Rand-Akzent/das Glow der Kachel. */
.pos-open-tables-ampel-timer[b-8g46151k16] {
    font-variant-numeric: tabular-nums;
    font-size: calc(11px * var(--ui-scale, 1));
    font-weight: 700;
    color: var(--pos-muted);
}

/* Gründer-Feedback 24.07.2026: die Gang-Badges bleiben oben bei Name/Preis
   (pos-open-tables-main) - der Abholtimer bekommt hier nur eine eigene,
   rechtsbuendige Zeile darunter (align-self statt volle Breite), damit er
   optisch unter die Gang-Badges rutscht, ohne deren Position zu aendern. */
.pos-open-tables-wait-row[b-8g46151k16] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--ui-scale, 1));
    align-self: flex-end;
}

.pos-open-tables-wait-timer[b-8g46151k16] {
    font-variant-numeric: tabular-nums;
    font-size: calc(11px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

@keyframes pos-open-tables-blink-b-8g46151k16 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.pos-open-tables-wait-row-blink[b-8g46151k16] {
    animation: pos-open-tables-blink-b-8g46151k16 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pos-open-tables-wait-row-blink[b-8g46151k16] {
        animation: none;
    }
}

.pos-open-tables-ready[b-8g46151k16] {
    width: calc(8px * var(--ui-scale, 1));
    height: calc(8px * var(--ui-scale, 1));
    border-radius: 50%;
    background: var(--tim-minze, #17A398);
    flex: 0 0 auto;
}

.pos-open-tables-sum[b-8g46151k16] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: calc(12px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-open-tables-courses[b-8g46151k16] {
    flex: 0 0 auto;
    display: flex;
    gap: calc(3px * var(--ui-scale, 1));
}

.pos-open-tables-course[b-8g46151k16] {
    width: calc(16px * var(--ui-scale, 1));
    height: calc(16px * var(--ui-scale, 1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(9px * var(--ui-scale, 1));
    font-weight: 700;
    color: #fff;
}

.pos-open-tables-course-held[b-8g46151k16] {
    background: var(--pos-faint);
}

.pos-open-tables-course-fired[b-8g46151k16] {
    background: #4C6EF5;
}

.pos-open-tables-course-done[b-8g46151k16] {
    background: var(--tim-minze, #17A398);
}

/* AUFTRAG-CI-ROLLOUT-CC.md Paket F: siehe PosBon.razor.css - eigenes
   Fehler-Rot statt --pos-accent (jetzt Tomate). */
.pos-open-tables-course-void-accent[b-8g46151k16] {
    box-shadow: 0 0 0 2px var(--tim-fehler, #B3261E);
}

/* AUFTRAG-AKTE-MEGA-CC.md Paket D.2: Kellner-Spalte - Tisch -> Kinder. Der
   Zeilen-Button traegt nur noch die Zusammenfassung, die Kinder haengen als
   eigenes <div> danach (ein <button> darf keine weiteren interaktiven
   Elemente enthalten). */
.pos-open-tables-item[b-8g46151k16] {
    display: flex;
    flex-direction: column;
    /* Nachtrag 8. Runde Punkt 29: ersetzt den frueheren Flex-"gap" des
       Elternelements (das jetzt ein Mehrspalten-Container ist, column-gap
       wirkt nur zwischen den Spalten, nicht vertikal innerhalb einer Spalte). */
    margin-bottom: calc(6px * var(--ui-scale, 1));
}

.pos-waiter-children[b-8g46151k16] {
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--ui-scale, 1));
    padding: calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
}

.pos-waiter-child[b-8g46151k16] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--ui-scale, 1));
    padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-mulde-bg);
    font-size: calc(11.5px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-waiter-child-label[b-8g46151k16] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-waiter-child-count[b-8g46151k16],
.pos-waiter-child-progress[b-8g46151k16],
.pos-waiter-child-timer[b-8g46151k16] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Koch-Frage: pulsierend (nicht blinkend, Auftrag Punkt D.2) - weiches Glow
   wie die Service-Ampel, nie ganz aus. */
@keyframes pos-waiter-question-pulse-b-8g46151k16 {
    0%, 100% { box-shadow: 0 0 3px 0 var(--pos-accent); }
    50% { box-shadow: 0 0 10px 2px var(--pos-accent); }
}

.pos-waiter-question[b-8g46151k16] {
    color: var(--pos-text);
    font-weight: 600;
    cursor: pointer;
    animation: pos-waiter-question-pulse-b-8g46151k16 2.2s ease-in-out infinite;
}

.pos-waiter-question-hint[b-8g46151k16] {
    font-style: italic;
    font-weight: 400;
    color: var(--pos-muted);
}

/* Nachtrag 3. Runde Punkt 11: Farblogik konsistent zu den Gang-Badges
   (Doc 17 Kap. 5) - gehalten bleibt der gedimmte Basis-Look von
   .pos-waiter-child (var(--pos-muted)), abgerufen/in Produktion wird
   deutlich abgesetzt (blau), damit der Abruf ohne Reinklicken erkennbar ist. */
.pos-waiter-waiting-fired[b-8g46151k16] {
    color: #4C6EF5;
    font-weight: 600;
}

.pos-waiter-batch[b-8g46151k16] {
    color: #4C6EF5;
}

.pos-waiter-ready[b-8g46151k16] {
    background: color-mix(in srgb, var(--tim-minze, #17A398) 18%, var(--pos-mulde-bg));
}

/* Selbstheiler (Auftrag D.2): X Minuten nach fertig wird der Eintrag blass -
   verschwindet erst mit Quittung/Rechnung, nicht hier. */
.pos-waiter-ready-faded[b-8g46151k16] {
    opacity: 0.45;
}

.pos-waiter-transit[b-8g46151k16] {
    background: color-mix(in srgb, #4C6EF5 18%, var(--pos-mulde-bg));
}

.pos-waiter-pickup-btn[b-8g46151k16] {
    flex: 0 0 auto;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-accent);
    color: #fff;
    font-size: calc(11px * var(--ui-scale, 1));
    font-weight: 700;
    padding: calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

/* Nachtrag 4. Runde Punkt 14a: Vorgangs-Waehler, wenn ein Tisch-Kopf mit
   mehreren offenen Vorgaengen angetippt wird (Split-Faelle) - bestehendes
   Sheet-Muster (Backdrop + Panel), analog zum Lieferlauf-Manifest. */
.pos-visit-picker-backdrop[b-8g46151k16] {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-visit-picker[b-8g46151k16] {
    width: min(360px, 90vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--pos-panel);
    border-radius: var(--pos-radius-sheet, 10px);
    box-shadow: var(--pos-shadow-rest);
    overflow: hidden;
}

.pos-visit-picker-header[b-8g46151k16] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
    border-bottom: 1px solid var(--pos-hairline);
    font-weight: 700;
    font-size: calc(14px * var(--ui-scale, 1));
}

.pos-visit-picker-body[b-8g46151k16] {
    overflow-y: auto;
    padding: calc(8px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--ui-scale, 1));
}

.pos-visit-picker-row[b-8g46151k16] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--ui-scale, 1));
    min-height: calc(40px * var(--ui-scale, 1));
    padding: 0 calc(10px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(13px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

/* Paket D.6: Lieferlauf-Manifest. */
.pos-run-manifest-backdrop[b-8g46151k16] {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-run-manifest[b-8g46151k16] {
    width: min(420px, 90vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--pos-panel);
    border-radius: var(--pos-radius-sheet, 10px);
    box-shadow: var(--pos-shadow-rest);
    overflow: hidden;
}

.pos-run-manifest-header[b-8g46151k16] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
    border-bottom: 1px solid var(--pos-hairline);
    font-weight: 700;
}

.pos-run-manifest-body[b-8g46151k16] {
    overflow-y: auto;
    padding: calc(8px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
}

.pos-run-manifest-row[b-8g46151k16] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    padding: calc(6px * var(--ui-scale, 1)) 0;
    border-bottom: 1px solid var(--pos-hairline);
    font-size: calc(13px * var(--ui-scale, 1));
}

.pos-run-manifest-qty[b-8g46151k16] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.pos-run-manifest-name[b-8g46151k16] {
    flex: 1 1 auto;
}

.pos-run-manifest-seat[b-8g46151k16] {
    flex: 0 0 auto;
    color: var(--pos-muted);
    font-size: calc(11px * var(--ui-scale, 1));
}

.pos-run-manifest-footer[b-8g46151k16] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
    border-top: 1px solid var(--pos-hairline);
}

/* Nachtrag 3. Runde Punkt 10: informatives Panel nach dem Ein-Tap-Pickup -
   kein Aktions-Gegenstueck mehr noetig, nur noch ein Hinweis + Schliessen. */
.pos-run-manifest-delivered-hint[b-8g46151k16] {
    flex: 1 1 auto;
    color: var(--tim-minze, #17A398);
    font-weight: 600;
}

/* Nachtrag 4. Runde Punkt 14a: "Free tables"-Graustufenliste entfaellt - an
   ihrer Stelle steht jetzt der "Neuer Tisch"-Button, der das Nummernpad
   (Punkt 14b) oeffnet. */
/* Paket E.13: "Neuer Tisch" + Zahnrad (Tischwahl Nummernpad|Plan) nebeneinander. */
.pos-open-tables-new-table-row[b-8g46151k16] {
    position: relative;
    display: flex;
    gap: calc(6px * var(--ui-scale, 1));
    align-items: stretch;
}

.pos-open-tables-new-table-row .pos-open-tables-new-table-btn[b-8g46151k16] {
    flex: 1 1 auto;
}

.pos-open-tables-zahnrad-menu[b-8g46151k16] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    background: var(--pos-panel);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-sheet, 8px);
    box-shadow: var(--pos-shadow-rest);
    overflow: hidden;
}

.pos-open-tables-zahnrad-menu button[b-8g46151k16] {
    border: none;
    background: transparent;
    color: var(--pos-text);
    text-align: left;
    padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
    font-size: calc(12px * var(--ui-scale, 1));
    cursor: pointer;
}

.pos-open-tables-zahnrad-menu button:hover[b-8g46151k16] {
    background: var(--pos-surface);
}

/* Nachschaerfung Paket A (Befund): "Plan" traegt bei Listenplan-Outlets
   zwar disabled="true" (Klick bleibt wirkungslos), aber die geerbte
   .res-timeline-grid-menu-active-Farbe (!important, aus reservations.css)
   liess den deaktivierten Menuepunkt weiterhin voll eingefaerbt aussehen,
   wenn er zugleich die aktive Geraete-Uebersteuerung war - "erklaert
   deaktiviert" (Auftragstext) verlangt mehr als nur den Tooltip. Hoehere
   Spezifitaet (2 Klassen+Element) gewinnt unabhaengig von der Ladereihenfolge
   der Stylesheets. */
.pos-open-tables-zahnrad-menu button:disabled[b-8g46151k16] {
    color: var(--pos-muted) !important;
    opacity: .6;
    cursor: not-allowed;
}

/* Nachschaerfung Paket A (Befund): .pos-numpad-backdrop/.pos-numpad/
   .pos-numpad-header werden HIER erneut als literales Markup gerendert
   (nicht ueber die <PosTableNumpad>-Komponente), Blazor-CSS-Isolation
   scopt sie deshalb auf DIESE Datei - die Basis-Regeln aus
   PosTableNumpad.razor.css (dort fuer die <PosTableNumpad>-Instanz)
   griffen hier nie, der Backdrop blieb ungestylt (position: static statt
   fixed) und das Sheet lief unpositioniert in den Dokumentfluss. */
.pos-numpad-backdrop[b-8g46151k16] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-numpad[b-8g46151k16] {
    width: min(560px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--pos-panel);
    border-radius: var(--pos-radius-sheet, 10px);
    box-shadow: var(--pos-shadow-rest);
    overflow: hidden;
}

.pos-numpad-header[b-8g46151k16] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
    border-bottom: 1px solid var(--pos-hairline);
    font-weight: 700;
    font-size: calc(15px * var(--ui-scale, 1));
    color: var(--pos-text);
}

/* Die Plan-Ansicht braucht mehr Platz als das Nummernpad - eigene Groesse
   auf demselben Sheet-Muster (.pos-numpad-backdrop/.pos-numpad). */
.pos-tischplan-sheet[b-8g46151k16] {
    width: min(96vw, 1400px);
    height: min(92vh, 1000px);
    display: flex;
    flex-direction: column;
}

.pos-tischplan-sheet .pos-tischplan-ansicht[b-8g46151k16] {
    flex: 1 1 auto;
    min-height: 0;
}

.pos-open-tables-new-table-btn[b-8g46151k16] {
    flex: 0 0 auto;
    min-height: calc(44px * var(--ui-scale, 1));
    margin-top: calc(6px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(13px * var(--ui-scale, 1));
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-rest);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6px * var(--ui-scale, 1));
}

.pos-open-tables-new-table-btn:active[b-8g46151k16] {
    transform: translateY(1px) scale(0.99);
    box-shadow: var(--pos-shadow-pressed);
}

.pos-open-tables-scope-toggle[b-8g46151k16] {
    flex: 0 0 auto;
    margin-bottom: calc(4px * var(--ui-scale, 1));
    min-height: calc(32px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: transparent;
    color: var(--pos-muted);
    font-size: calc(11px * var(--ui-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    touch-action: manipulation;
}

.pos-open-tables-scope-toggle-active[b-8g46151k16] {
    color: var(--pos-accent);
}

.pos-open-tables-empty[b-8g46151k16] {
    margin: auto;
    padding: calc(16px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
    color: var(--pos-muted);
    font-size: calc(12px * var(--ui-scale, 1));
    text-align: center;
}
/* /Pages/Pos/Components/PosOpenTablesResizeHandle.razor.rz.scp.css */
.pos-open-tables-resize-handle[b-be9s4acfrs] {
    position: absolute;
    top: -3px;
    left: -12px;
    width: 24px;
    height: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    cursor: ew-resize;
    touch-action: none;
    z-index: 5;
}

/* Ein kleines Dreieck, das auf der Spitze steht - Basis oben, Spitze unten. */
.pos-open-tables-resize-triangle[b-be9s4acfrs] {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--pos-muted);
    transition: border-top-color 100ms ease-out;
}

.pos-open-tables-resize-handle:hover .pos-open-tables-resize-triangle[b-be9s4acfrs],
.pos-open-tables-resize-handle:active .pos-open-tables-resize-triangle[b-be9s4acfrs] {
    border-top-color: var(--pos-accent);
}
/* /Pages/Pos/Components/PosOptionsSheet.razor.rz.scp.css */
.pos-options[b-5br0jld66m] {
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--ui-scale, 1));
}

.pos-options-item[b-5br0jld66m] {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--ui-scale, 1));
    padding-bottom: calc(10px * var(--ui-scale, 1));
    border-bottom: 1px solid var(--pos-hairline);
}

.pos-options-item-head[b-5br0jld66m] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
}

.pos-options-item-name[b-5br0jld66m] {
    font-weight: 600;
    font-size: calc(14px * var(--ui-scale, 1));
}

.pos-options-item-delta[b-5br0jld66m] {
    font-size: calc(12px * var(--ui-scale, 1));
    color: var(--pos-muted);
    font-variant-numeric: tabular-nums;
}

.pos-options-item-forced[b-5br0jld66m] {
    margin-left: auto;
    font-size: calc(10.5px * var(--ui-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pos-accent);
}

.pos-options-flag[b-5br0jld66m] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    font-size: calc(13px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-options-input[b-5br0jld66m] {
    min-height: calc(38px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: 0 calc(10px * var(--ui-scale, 1));
    font-size: calc(14px * var(--ui-scale, 1));
}

.pos-options-choices[b-5br0jld66m] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(6px * var(--ui-scale, 1));
}

.pos-options-choice[b-5br0jld66m] {
    min-height: calc(34px * var(--ui-scale, 1));
    padding: 0 calc(12px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-muted);
    font-weight: 600;
    font-size: calc(13px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

.pos-options-choice-active[b-5br0jld66m] {
    color: var(--pos-accent);
    box-shadow: inset 0 0 0 1.5px var(--pos-accent);
}

.pos-options-comment[b-5br0jld66m] {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--ui-scale, 1));
}

.pos-options-textarea[b-5br0jld66m] {
    min-height: calc(64px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    font-size: calc(13px * var(--ui-scale, 1));
    font-family: inherit;
    resize: vertical;
}

.pos-options-validation[b-5br0jld66m] {
    margin: 0;
    font-size: calc(12px * var(--ui-scale, 1));
    color: var(--pos-accent);
}

.pos-options-confirm[b-5br0jld66m] {
    min-height: calc(42px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-weight: 700;
    font-size: calc(14px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-pressed);
}

.pos-options-confirm:active[b-5br0jld66m] {
    transform: translateY(1px) scale(0.99);
    filter: brightness(1.08);
}
/* /Pages/Pos/Components/PosPaySheet.razor.rz.scp.css */
.pos-pay[b-16b1oecr97] {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--ui-scale, 1));
}

.pos-pay-balance[b-16b1oecr97] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(2px * var(--ui-scale, 1));
    padding: calc(6px * var(--ui-scale, 1)) 0 calc(2px * var(--ui-scale, 1));
}

.pos-pay-balance-label[b-16b1oecr97] {
    font-size: calc(12px * var(--ui-scale, 1));
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pos-pay-balance-value[b-16b1oecr97] {
    font-size: calc(24px * var(--ui-scale, 1));
    font-weight: 700;
    color: var(--pos-text);
    font-variant-numeric: tabular-nums;
}

.pos-pay-hint[b-16b1oecr97] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--ui-scale, 1));
    padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
    border-radius: var(--pos-radius-btn, 6px);
    background: rgba(217, 130, 43, 0.15);
    color: #D9822B;
    font-size: calc(12px * var(--ui-scale, 1));
    font-weight: 600;
}

.pos-pay-methods[b-16b1oecr97] {
    display: flex;
    gap: calc(6px * var(--ui-scale, 1));
}

.pos-pay-methods button[b-16b1oecr97] {
    flex: 1 1 0;
    min-height: calc(38px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-muted);
    font-weight: 600;
    font-size: calc(13px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

.pos-pay-method-active[b-16b1oecr97] {
    color: var(--pos-accent) !important;
    box-shadow: var(--pos-shadow-pressed);
}

.pos-pay-row[b-16b1oecr97] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
}

.pos-pay-label[b-16b1oecr97] {
    flex: 0 0 auto;
    width: calc(80px * var(--ui-scale, 1));
    font-size: calc(12px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-pay-input[b-16b1oecr97] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: calc(38px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    padding: 0 calc(8px * var(--ui-scale, 1));
    font-size: calc(15px * var(--ui-scale, 1));
    font-variant-numeric: tabular-nums;
}

.pos-pay-input-no-spinner[b-16b1oecr97]::-webkit-outer-spin-button,
.pos-pay-input-no-spinner[b-16b1oecr97]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pos-pay-input-no-spinner[b-16b1oecr97] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.pos-pay-change[b-16b1oecr97] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(6px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-mulde-bg);
    font-size: calc(13px * var(--ui-scale, 1));
    color: var(--pos-muted);
}

.pos-pay-change-value[b-16b1oecr97] {
    font-weight: 700;
    color: var(--pos-text);
    font-variant-numeric: tabular-nums;
}

.pos-pay-confirm[b-16b1oecr97] {
    min-height: calc(44px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-accent);
    color: var(--pos-on-accent, #fff);
    font-weight: 700;
    font-size: calc(14px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

.pos-pay-confirm:disabled[b-16b1oecr97] {
    opacity: 0.4;
    cursor: default;
}

.pos-pay-history[b-16b1oecr97] {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--ui-scale, 1));
    padding-top: calc(8px * var(--ui-scale, 1));
    border-top: 1px solid var(--pos-hairline);
}

.pos-pay-history-row[b-16b1oecr97] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    font-size: calc(12.5px * var(--ui-scale, 1));
    color: var(--pos-text);
}

.pos-pay-history-row-voided[b-16b1oecr97] {
    color: var(--pos-muted);
    text-decoration: line-through;
}

.pos-pay-history-voided-tag[b-16b1oecr97] {
    font-size: calc(10.5px * var(--ui-scale, 1));
    color: var(--tim-fehler, #B3261E);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
}
/* /Pages/Pos/Components/PosReceiptList.razor.rz.scp.css */
/* AUFTRAG-KASSEN-BELEGE-CC.md Paket C: die Belegliste.

   Sie lebt im PosSheet und damit in der Vollbild-Welt: --pos-*-Tokens für
   Farbe und Schatten, --ui-scale für JEDE Größe (A+/A- muss auch hier
   wirken - "eine Wurzel-Variable, keine Ausnahmen", Nachtrag 5. Runde
   Punkt 15). */
.pos-receipts[b-w3gl8rwvt3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: calc(8px * var(--ui-scale, 1));

    /* Der Sheet wächst mit seinem Inhalt, und .pos-sheet-body scrollt - damit
       ist er zugleich ein Klipp-Rahmen für alles absolut Positionierte darin.
       An einem Tag OHNE Belege war der Sheet nur zwei Zeilen hoch, und das
       Kalender-Popup wurde nach zwei Monatszeilen abgeschnitten (im Browser
       am 04.08.2026 gesehen). Die Mindesthöhe schafft dem Popup Platz und
       lässt den leeren Tag zugleich wie eine Aussage aussehen statt wie ein
       halb geladener Dialog. */
    min-height: min(calc(420px * var(--ui-scale, 1)), 70vh);
}

.pos-receipts-head[b-w3gl8rwvt3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(8px * var(--ui-scale, 1));
}

.pos-receipts-datenav[b-w3gl8rwvt3] {
    display: flex;
    align-items: center;
    gap: calc(4px * var(--ui-scale, 1));
}

.pos-receipts-date[b-w3gl8rwvt3] {
    background: transparent;
    border: none;
    color: var(--pos-text);
    font-weight: 700;
    font-size: calc(15px * var(--ui-scale, 1));
    cursor: pointer;
    white-space: nowrap;
}

.pos-receipts-spacer[b-w3gl8rwvt3] {
    flex: 1 1 auto;
}

.pos-receipts-sort[b-w3gl8rwvt3] {
    display: flex;
    gap: calc(4px * var(--ui-scale, 1));
}

.pos-receipts-sum[b-w3gl8rwvt3] {
    color: var(--pos-muted);
    font-size: calc(13px * var(--ui-scale, 1));
}

.pos-receipts-empty[b-w3gl8rwvt3] {
    color: var(--pos-muted);
    padding: calc(16px * var(--ui-scale, 1)) 0;
}

.pos-receipts-scroll[b-w3gl8rwvt3] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--ui-scale, 1));
}

/* Die Zeile ist ein GITTER aus zwei Teilen: der Öffnen-Button (der die sechs
   Datenspalten trägt) und daneben der Nachdruck-Knopf. Getrennt, weil ein
   <button> im <button> kein gültiges HTML ist - und weil die beiden
   Handlungen nicht verschmelzen dürfen: Der eine Klick zeigt etwas an, der
   andere kostet ein Blatt Papier. */
.pos-receipts-row[b-w3gl8rwvt3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(40px * var(--ui-scale, 1));
    align-items: center;
    gap: calc(4px * var(--ui-scale, 1));
    width: 100%;
    border-radius: var(--pos-radius-tile, 8px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(14px * var(--ui-scale, 1));
    /* --pos-surface == --pos-panel im Hell-Theme (bewusst, Doc 12 - die
       Abgrenzung läuft über den Schatten, nicht über Farbe). */
    box-shadow: var(--pos-shadow-rest);
}

/* Sechs Datenspalten mit fester Gewichtung statt einer Tabelle. Der Betrag
   steht rechtsbündig, weil Beträge sich nur so untereinander vergleichen
   lassen. */
.pos-receipts-open[b-w3gl8rwvt3],
.pos-receipts-header[b-w3gl8rwvt3] {
    display: grid;
    grid-template-columns:
        calc(52px * var(--ui-scale, 1))
        minmax(0, 1.2fr)
        calc(96px * var(--ui-scale, 1))
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr);
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    width: 100%;
    padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.pos-receipts-open > span[b-w3gl8rwvt3],
.pos-receipts-header > span[b-w3gl8rwvt3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Kopfzeile trägt dieselben Spalten, aber keine Zeilen-Optik - sie ist
   Beschriftung, keine Schaltfläche. */
.pos-receipts-header[b-w3gl8rwvt3] {
    grid-template-columns:
        calc(52px * var(--ui-scale, 1))
        minmax(0, 1.2fr)
        calc(96px * var(--ui-scale, 1))
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        calc(40px * var(--ui-scale, 1));
    display: grid;
    background: transparent;
    box-shadow: none;
    color: var(--pos-muted);
    font-size: calc(12px * var(--ui-scale, 1));
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: default;
}

.pos-receipts-reprint[b-w3gl8rwvt3] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(32px * var(--ui-scale, 1));
    margin-right: calc(6px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: transparent;
    color: var(--pos-muted);
    cursor: pointer;
    touch-action: manipulation;
}

.pos-receipts-reprint:hover:not(:disabled)[b-w3gl8rwvt3] {
    background: var(--pos-mulde-bg);
    color: var(--pos-text);
}

.pos-receipts-reprint:disabled[b-w3gl8rwvt3] {
    opacity: .4;
    cursor: default;
}

/* Rückmeldung des Nachdrucks - oben, nicht an der Zeile: „bei welchem
   Drucker ist es gelandet" ist die Frage, die danach kommt. */
.pos-receipts-print[b-w3gl8rwvt3] {
    padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-mulde-bg);
    color: var(--pos-text);
    font-size: calc(13px * var(--ui-scale, 1));
}

.pos-receipts-amount[b-w3gl8rwvt3] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pos-receipts-table[b-w3gl8rwvt3] {
    font-weight: 700;
}

.pos-receipts-invoice[b-w3gl8rwvt3],
.pos-receipts-server[b-w3gl8rwvt3] {
    color: var(--pos-muted);
}

/* Ein Storno bleibt lesbar, aber es soll nicht wie eine gültige Rechnung
   aussehen - die stornierte Nummer steht weiter da, mit einem Wort daneben. */
.pos-receipts-cancelled[b-w3gl8rwvt3] {
    margin-left: calc(6px * var(--ui-scale, 1));
    color: var(--pos-accent);
    font-size: calc(11px * var(--ui-scale, 1));
    text-transform: uppercase;
}
/* /Pages/Pos/Components/PosRevenueCenterChoice.razor.rz.scp.css */
/* AUFTRAG-ERLOESEINHEIT-RUECKFRAGE-CC.md Paket B.3: Die Rueckfrage ist eine
   TAP-Handlung im Service, kein Formular - grosse Flaechen untereinander,
   nichts, was man treffen muss. Farben ueber die --pos-*-Tokens (Doc 20),
   damit sie im Kassen-Dunkelmodus wie im hellen Backoffice-Panel sitzen. */
.pos-revenue-center-choice[b-rckz4ufnvf] {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--ui-scale, 1));
}

.pos-revenue-center-choice-hint[b-rckz4ufnvf] {
    margin: 0 0 calc(4px * var(--ui-scale, 1)) 0;
    color: var(--pos-text);
    font-size: calc(13px * var(--ui-scale, 1));
}

.pos-revenue-center-choice-option[b-rckz4ufnvf] {
    min-height: calc(44px * var(--ui-scale, 1));
    text-align: left;
    font-weight: 600;
}
/* /Pages/Pos/Components/PosRevenueCenterPicker.razor.rz.scp.css */
/* AUFTRAG-CI-ROLLOUT-CC.md Paket F: bisher voellig ungestylt (AUFTRAG-POS-
   TENANT-SCOPING-CC nannte es explizit "kein Design-Aufwand") - jetzt neben
   der neuen Wortmarke (siehe PosRevenueCenterPicker.razor) auch selbst ein
   Mindestmass an Layout, sonst wirkt die Seite direkt neben der Marke kaputt.
   Reine Optik, keine Funktionsaenderung. */
.pos-outlet-picker[b-z34hgj7ec6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 100vh;
    padding: 32px 16px;
    box-sizing: border-box;
}

.pos-outlet-picker-title[b-z34hgj7ec6] {
    color: var(--pos-muted);
    font-size: 14px;
    margin: 0;
}

.pos-outlet-picker-tile[b-z34hgj7ec6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: min(320px, 80vw);
    padding: 16px 20px;
    border: none;
    border-radius: var(--pos-radius-tile, 8px);
    background: var(--pos-surface);
    color: var(--pos-text);
    cursor: pointer;
    box-shadow: var(--pos-shadow-rest);
    transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}

.pos-outlet-picker-tile:hover[b-z34hgj7ec6] {
    box-shadow: 0 0 0 2px var(--pos-accent), var(--pos-shadow-rest);
}

.pos-outlet-picker-tile:active[b-z34hgj7ec6] {
    transform: translateY(1px) scale(0.99);
}

.pos-outlet-picker-provider[b-z34hgj7ec6] {
    font-size: 11px;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pos-outlet-picker-name[b-z34hgj7ec6] {
    font-size: 15px;
    font-weight: 700;
}
/* /Pages/Pos/Components/PosSheet.razor.rz.scp.css */
.pos-sheet-backdrop[b-a9kjtkv499] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 900;
}

.pos-sheet[b-a9kjtkv499] {
    position: fixed;
    background: var(--pos-panel);
    color: var(--pos-text);
    z-index: 901;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.pos-sheet-bottom[b-a9kjtkv499] {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80svh;
    border-radius: var(--pos-radius-sheet, 10px) var(--pos-radius-sheet, 10px) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pos-sheet-dialog[b-a9kjtkv499] {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, 90vw);
    max-height: 80vh;
    border-radius: var(--pos-radius-sheet, 10px);
}

/* Fuer Inhalte, die Breite brauchen (z.B. Tisch-Split mit zwei
   nebeneinanderliegenden Spalten) - passt sich weiterhin an die
   Fensterbreite an (vw-Deckel), wird aber nicht mehr von den 480px der
   normalen Options-/Nachlass-Dialoge eingeengt. */
.pos-sheet-dialog.pos-sheet-wide[b-a9kjtkv499] {
    width: min(1100px, 92vw);
    max-height: 88vh;
}

.pos-sheet-bottom.pos-sheet-wide[b-a9kjtkv499] {
    max-height: 92svh;
}

.pos-sheet-header[b-a9kjtkv499] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pos-line);
    flex: 0 0 auto;
}

.pos-sheet-title[b-a9kjtkv499] {
    font-weight: 600;
}

.pos-sheet-close[b-a9kjtkv499] {
    min-width: 40px;
    min-height: 40px;
    border: none;
    background: transparent;
    color: var(--pos-text);
    font-size: 1.1rem;
    cursor: pointer;
    touch-action: manipulation;
}

.pos-sheet-body[b-a9kjtkv499] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
}
/* /Pages/Pos/Components/PosSplitPanel.razor.rz.scp.css */
.pos-split[b-0s7m5x1fef] {
    display: flex;
    gap: calc(14px * var(--ui-scale, 1));
    height: min(560px, 62vh);
}

.pos-split-col[b-0s7m5x1fef] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--ui-scale, 1));
    background: var(--pos-surface);
    border-radius: var(--pos-radius-btn, 6px);
    padding: calc(10px * var(--ui-scale, 1));
    overflow-y: auto;
}

.pos-split-target[b-0s7m5x1fef] {
    box-shadow: inset 0 0 0 1.5px var(--pos-hairline);
}

.pos-split-col-title[b-0s7m5x1fef] {
    font-size: calc(11px * var(--ui-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pos-muted);
}

.pos-split-list[b-0s7m5x1fef] {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--ui-scale, 1));
}

.pos-split-hint[b-0s7m5x1fef] {
    margin: calc(12px * var(--ui-scale, 1)) 0;
    font-size: calc(12px * var(--ui-scale, 1));
    color: var(--pos-faint);
    text-align: center;
}

.pos-split-item[b-0s7m5x1fef] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-panel);
    cursor: grab;
    touch-action: none;
}

.pos-split-item-qty[b-0s7m5x1fef] {
    flex: 0 0 auto;
    font-size: calc(12.5px * var(--ui-scale, 1));
    color: var(--pos-muted);
    font-variant-numeric: tabular-nums;
}

.pos-split-item-name[b-0s7m5x1fef] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(13px * var(--ui-scale, 1));
}

.pos-split-item-qty-control[b-0s7m5x1fef] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: calc(4px * var(--ui-scale, 1));
    font-size: calc(12.5px * var(--ui-scale, 1));
    font-variant-numeric: tabular-nums;
}

.pos-split-item-qty-control button[b-0s7m5x1fef] {
    width: calc(22px * var(--ui-scale, 1));
    height: calc(22px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    cursor: pointer;
    touch-action: manipulation;
}

.pos-split-item-qty-control button:disabled[b-0s7m5x1fef] {
    opacity: 0.35;
    cursor: default;
}

.pos-split-actions[b-0s7m5x1fef] {
    display: flex;
    justify-content: flex-end;
    padding-top: calc(10px * var(--ui-scale, 1));
}

.pos-split-confirm[b-0s7m5x1fef] {
    min-height: calc(40px * var(--ui-scale, 1));
    padding: 0 calc(20px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-weight: 700;
    font-size: calc(13.5px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-pressed);
}

.pos-split-confirm:disabled[b-0s7m5x1fef] {
    opacity: 0.4;
    cursor: default;
}
/* /Pages/Pos/Components/PosTableNumpad.razor.rz.scp.css */
.pos-numpad-backdrop[b-t68pa00z6u] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-numpad[b-t68pa00z6u] {
    width: min(560px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--pos-panel);
    border-radius: var(--pos-radius-sheet, 10px);
    box-shadow: var(--pos-shadow-rest);
    overflow: hidden;
}

.pos-numpad-header[b-t68pa00z6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
    border-bottom: 1px solid var(--pos-hairline);
    font-weight: 700;
    font-size: calc(15px * var(--ui-scale, 1));
    color: var(--pos-text);
}

.pos-numpad-body[b-t68pa00z6u] {
    display: flex;
    min-height: 0;
}

/* Nachtrag 8. Runde Punkt 28 (REVIDIERT): die Tischliste steht jetzt RECHTS
   vom Pad - kein eigener Rand mehr noetig, der Rand haengt jetzt am Pad
   (.pos-numpad-pad). */
.pos-numpad-list[b-t68pa00z6u] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: calc(10px * var(--ui-scale, 1));
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--ui-scale, 1));
    max-height: calc(420px * var(--ui-scale, 1));
}

.pos-numpad-list-row[b-t68pa00z6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--ui-scale, 1));
    min-height: calc(44px * var(--ui-scale, 1));
    padding: 0 calc(12px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(14px * var(--ui-scale, 1));
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-rest);
}

.pos-numpad-list-row-occupied[b-t68pa00z6u] {
    border-left: 3px solid var(--pos-accent);
}

.pos-numpad-list-name[b-t68pa00z6u] {
    flex: 1 1 auto;
}

.pos-numpad-list-badge[b-t68pa00z6u] {
    flex: 0 0 auto;
    min-width: calc(20px * var(--ui-scale, 1));
    height: calc(20px * var(--ui-scale, 1));
    border-radius: 50%;
    background: var(--pos-accent);
    color: #fff;
    font-size: calc(11px * var(--ui-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-numpad-empty[b-t68pa00z6u] {
    margin: auto;
    color: var(--pos-muted);
    font-size: calc(13px * var(--ui-scale, 1));
    text-align: center;
    padding: calc(16px * var(--ui-scale, 1));
}

.pos-numpad-visit-choice[b-t68pa00z6u] {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--ui-scale, 1));
}

.pos-numpad-visit-choice-label[b-t68pa00z6u] {
    font-weight: 700;
    font-size: calc(15px * var(--ui-scale, 1));
    color: var(--pos-text);
}

.pos-numpad-visit-choice-row[b-t68pa00z6u] {
    min-height: calc(44px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(14px * var(--ui-scale, 1));
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

.pos-numpad-visit-choice-back[b-t68pa00z6u] {
    min-height: calc(36px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: transparent;
    color: var(--pos-muted);
    font-size: calc(12px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

/* Gruender-Wunsch: runde Tasten, grosse Touch-Ziele. Nachtrag 8. Runde
   Punkt 28 (REVIDIERT): das Pad steht jetzt LINKS - der trennende Rand
   (frueher an .pos-numpad-list) haengt jetzt hier. */
.pos-numpad-pad[b-t68pa00z6u] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10px * var(--ui-scale, 1));
    padding: calc(14px * var(--ui-scale, 1));
    border-right: 1px solid var(--pos-hairline);
}

.pos-numpad-display[b-t68pa00z6u] {
    min-width: calc(180px * var(--ui-scale, 1));
    min-height: calc(40px * var(--ui-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-mulde-bg);
    color: var(--pos-text);
    font-size: calc(22px * var(--ui-scale, 1));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/* Paket D.11: "Tisch 12 gibt es in der aktuellen Bestuhlung nicht" - eine
   erklaerte Abweisung statt eines Geistertisches. */
.pos-numpad-fehler[b-t68pa00z6u] {
    max-width: calc(180px * var(--ui-scale, 1));
    color: var(--pos-danger, #c0392b);
    font-size: calc(12px * var(--ui-scale, 1));
    text-align: center;
}

.pos-numpad-keys[b-t68pa00z6u] {
    display: grid;
    grid-template-columns: repeat(3, calc(56px * var(--ui-scale, 1)));
    grid-auto-rows: calc(56px * var(--ui-scale, 1));
    gap: calc(8px * var(--ui-scale, 1));
}

.pos-numpad-key[b-t68pa00z6u] {
    border: none;
    border-radius: 50%;
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(18px * var(--ui-scale, 1));
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-rest);
}

.pos-numpad-key:active[b-t68pa00z6u] {
    transform: translateY(1px) scale(0.96);
    box-shadow: var(--pos-shadow-pressed);
}

.pos-numpad-key-secondary[b-t68pa00z6u] {
    color: var(--pos-muted);
}

.pos-numpad-key-primary[b-t68pa00z6u] {
    background: var(--pos-accent);
    color: #fff;
}

.pos-numpad-cancel[b-t68pa00z6u] {
    min-height: calc(36px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: transparent;
    color: var(--pos-muted);
    font-size: calc(12px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
}

@media (max-width: 560px) {
    .pos-numpad-body[b-t68pa00z6u] {
        flex-direction: column;
    }

    .pos-numpad-pad[b-t68pa00z6u] {
        border-right: none;
        border-bottom: 1px solid var(--pos-hairline);
    }

    .pos-numpad-list[b-t68pa00z6u] {
        max-height: calc(200px * var(--ui-scale, 1));
    }
}
/* /Pages/Pos/Components/PosTablePlanView.razor.rz.scp.css */
.pos-tischplan-ansicht[b-3naq5h4sjy] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: calc(10px * var(--ui-scale, 1));
}

.pos-tischplan-svg[b-3naq5h4sjy] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: var(--pos-canvas, #f4f4f4);
    border-radius: var(--pos-radius-sheet, 8px);
}

.pos-tischplan-ansicht-hint[b-3naq5h4sjy],
.pos-tischplan-ansicht-leer[b-3naq5h4sjy] {
    margin: auto;
    text-align: center;
    color: var(--pos-muted);
    padding: calc(16px * var(--ui-scale, 1));
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* A8.7b: Status auf einen Blick - frei/offen/eskaliert, dieselbe Ampelfarbe
   wie die Kellner-Spalte (PosOpenTables), hier auf der ganzen Tischflaeche
   statt nur an einem Rand. Die eigentlichen Farbregeln stehen in
   wwwroot/css/plan.css (ungescopt) - .pe-tischplatte wird von der
   Kind-Komponente PlanElementDarstellung gerendert, eine hier gescopte
   Regel wuerde nie greifen (Befund waehrend Browser-Verifikation). */
.pos-tischplan-element[b-3naq5h4sjy] {
    cursor: pointer;
    touch-action: manipulation;
}
/* /Pages/Pos/Components/PosTile.razor.rz.scp.css */
.pos-tile[b-bf7oqko7cy] {
    position: relative;
    min-height: 44px;
    min-width: 44px;
    height: calc(58px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-tile, 8px);
    background: var(--pos-surface);
    color: var(--pos-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(3px * var(--ui-scale, 1));
    padding: calc(8px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    box-shadow: var(--pos-shadow-rest);
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    transition: transform 100ms ease-out, box-shadow 100ms ease-out, filter 100ms ease-out;
}

[data-theme="light"] .pos-tile[b-bf7oqko7cy] {
    border-top: none;
}

.pos-tile:active[b-bf7oqko7cy] {
    transform: translateY(1px) scale(0.98);
    box-shadow: var(--pos-shadow-pressed);
    filter: brightness(1.06);
}

.pos-tile-label[b-bf7oqko7cy] {
    font-size: calc(13px * var(--ui-scale, 1));
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* Nachtrag 10. Runde Punkt 30: ein langes einzelnes Wort ragte bei A+
       ueber den Kachelrand statt umzubrechen - overflow-wrap:normal verbot
       jeden Umbruch mitten im Wort. break-word erlaubt den Umbruch als
       Fallback, hyphens:auto nutzt (mit lang="de" am Element) wo verfuegbar
       echte Browser-Silbentrennung mit Trennstrich statt hartem Bruch. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.pos-tile-badge[b-bf7oqko7cy] {
    position: absolute;
    top: calc(5px * var(--ui-scale, 1));
    right: calc(7px * var(--ui-scale, 1));
    font-size: calc(11px * var(--ui-scale, 1));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pos-muted);
}

/* Optional per Header-Toggle (Kap. 10.5 bleibt "kein Preis" default). Ein
   durchsichtiger Streifen quer ueber die volle Kachelbreite unten - nicht nur
   ein kleines Preis-Badge - mit den Kachel-Ecken unten links/rechts
   mitgerundet, damit er wie ein Kachel-Fuss statt wie ein aufgeklebter Zettel
   wirkt. Flache Farbe ohne Blur (bewusst "nur ein bisschen" Tönung, ca. 80%
   durchsichtig) - darunterliegender Label-Text bleibt lesbar. */
.pos-tile-price[b-bf7oqko7cy] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(3px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
    border-radius: 0 0 var(--pos-radius-tile, 8px) var(--pos-radius-tile, 8px);
    font-size: calc(10px * var(--ui-scale, 1));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pos-text);
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .pos-tile-price[b-bf7oqko7cy] {
    background: rgba(255, 255, 255, 0.2);
}

/* Farb-Fix 22.07.2026 (Doc 15 A4, revidiert): die Palette liefert gedeckte
   Mitteltoene statt Pastell, kontrastfest genug fuer Weiß-Text - Kachel-Text
   ist deshalb immer Weiß, unabhaengig vom Theme (kein Hell/Dunkel-Umschalten
   je Farbe mehr noetig). */
.pos-tile-colored[b-bf7oqko7cy] {
    color: #FFFFFF;
}

.pos-tile-colored .pos-tile-badge[b-bf7oqko7cy] {
    color: rgba(255, 255, 255, 0.75);
}

.pos-tile-colored .pos-tile-price[b-bf7oqko7cy] {
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.35);
}
/* /Pages/Pos/Components/PosTileGrid.razor.rz.scp.css */
.pos-tile-grid[b-opf040sx1e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(100px * var(--ui-scale, 1)), 1fr));
    grid-auto-rows: calc(58px * var(--ui-scale, 1));
    grid-auto-flow: row dense;
    gap: calc(8px * var(--ui-scale, 1));
    padding: calc(10px * var(--ui-scale, 1));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    height: 100%;
    align-content: start;
}
/* /Pages/Pos/Components/PosTileRecess.razor.rz.scp.css */
.pos-mulde[b-xodb1smgfb] {
    grid-column: span 2;
    grid-row: span 2;
    background: var(--pos-mulde-bg);
    border-radius: var(--pos-radius-mulde, 10px);
    padding: calc(5px * var(--ui-scale, 1));
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--ui-scale, 1));
    overflow: hidden;
}

.pos-mulde-title[b-xodb1smgfb] {
    flex: 0 0 auto;
    font-size: calc(11px * var(--ui-scale, 1));
    font-weight: 600;
    color: var(--pos-muted);
    padding: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-mulde-items[b-xodb1smgfb] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: calc(6px * var(--ui-scale, 1));
    min-height: 0;
}

.pos-mulde-item[b-xodb1smgfb] {
    position: relative;
    min-width: 0;
    min-height: 0;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-touch-callout: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    transition: transform 100ms ease-out, filter 100ms ease-out;
}

.pos-mulde-item-size[b-xodb1smgfb] {
    font-size: calc(11.5px * var(--ui-scale, 1));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pos-mulde-item-price[b-xodb1smgfb] {
    font-size: calc(9px * var(--ui-scale, 1));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pos-muted);
}

.pos-mulde-item:active[b-xodb1smgfb] {
    transform: translateY(1px) scale(0.96);
    filter: brightness(1.1);
}

.pos-mulde-item-badge[b-xodb1smgfb] {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: calc(9px * var(--ui-scale, 1));
    font-weight: 700;
    color: var(--pos-muted);
}

/* Farb-Fix 22.07.2026: siehe PosTile.razor.css - immer Weiß-Text. */
.pos-mulde-item-colored[b-xodb1smgfb] {
    color: #FFFFFF;
}

.pos-mulde-item-colored .pos-mulde-item-price[b-xodb1smgfb],
.pos-mulde-item-colored .pos-mulde-item-badge[b-xodb1smgfb] {
    color: rgba(255, 255, 255, 0.75);
}
/* /Pages/Pos/PosKitchen.razor.rz.scp.css */
/* Kuechenschirm v2 / Barschirm (AUFTRAG-KDS-KUECHENSCHIRM-CC.md Paket A, Doc 17
   Kap. 3/4) - "Elevation"-Tokens aus pos-theme.css, grosse Touch-Ziele (min.
   48px, Doc 17 Kap. 9.8: "Kueche ohne Bar lebbar"), kein UI-Scale-Regler wie
   im Bonier-Screen noetig. */

/* AUFTRAG-AKTE-MEGA-CC.md Paket C.5 (Brett-Layout, "volle Browserbreite"):
   width:100% + flex:1 1 auto fehlten hier - <app> ist ab 768px per
   site.css selbst ein Row-Flex-Container, ohne das ist .pos-kitchen-shell
   nur ein gewoehnliches Flex-Item darin und schrumpft auf seinen Inhalt
   (shrink-to-fit) statt die Zeile zu fuellen, unabhaengig von der
   Fensterbreite. Gleiches Muster wie PosCanvasEditor.razor.css .pce-shell
   und PosVisitDetail.razor.css .pos-shell (bei der Verifikation dieses
   Auftrags entdeckt - das Brett-Layout selbst war korrekt gebaut, aber
   durch diesen fehlenden Grow nie sichtbar breiter als sein Inhalt). */
/* AUFTRAG-AKTE-MEGA-NACHBESSERUNG-CC.md Nachtrag 6. Runde Punkt 18:
   min-height:100vh begrenzt nichts (es ist ein MINIMUM) - sobald eine Spalte
   mehr Karten enthaelt, als in eine Bildschirmhoehe passen, wuchs die ganze
   Shell (und mit ihr .pos-kitchen-column-body-multicol per height:100%
   weiter unten) einfach ueber die Fensterhoehe hinaus mit, statt intern zu
   scrollen/umzubrechen - der Mehrspalten-Fluss bekam dadurch nie eine
   tatsaechlich begrenzte Hoehe zum Umbrechen. height:100dvh (dynamische
   Viewport-Hoehe, beruecksichtigt mobile Browser-Chrome) deckelt die Shell
   wirklich, genau wie .pos-shell (PosVisitDetail.razor.css) es schon fuer
   die Kasse tut. */
.pos-kitchen-shell[b-968h2rk1ms] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    height: 100dvh;
    padding: 12px;
    box-sizing: border-box;
    color: var(--pos-text);
    gap: 10px;
}

.pos-kitchen-header[b-968h2rk1ms] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-kitchen-title[b-968h2rk1ms] {
    font-size: 20px;
    font-weight: 700;
}

.pos-kitchen-spacer[b-968h2rk1ms] {
    flex: 1 1 auto;
}

.pos-icon-btn[b-968h2rk1ms] {
    min-height: 40px;
    padding: 0 12px;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

.pos-icon-btn-active[b-968h2rk1ms] {
    background: var(--pos-accent);
    color: #fff;
}

.pos-kitchen-conflict[b-968h2rk1ms] {
    padding: 10px 14px;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.pos-kitchen-alarms[b-968h2rk1ms] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@keyframes pos-kitchen-flash-b-968h2rk1ms {
    0%, 100% { background: var(--pos-surface); }
    50% { background: var(--pos-accent); }
}

.pos-kitchen-alarm-row[b-968h2rk1ms] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--pos-radius-btn, 6px);
    animation: pos-kitchen-flash-b-968h2rk1ms 1s ease-in-out 3;
    border: 1px solid var(--pos-accent);
}

.pos-kitchen-alarm-flash[b-968h2rk1ms] {
    font-size: 18px;
}

.pos-kitchen-alarm-text[b-968h2rk1ms] {
    flex: 1 1 auto;
}

/* AUFTRAG-KDS-TISCHLISTE-CC.md Paket A: von grid auf flex umgestellt, damit
   die neue Tischliste-Spalte (PosKitchenTables, eigene feste Breite) links
   Platz bekommt, ohne den Barschirm (weiterhin exakt 3 gleich breite Spalten,
   kein Tischliste-Kind) zu veraendern. */
.pos-kitchen-board[b-968h2rk1ms] {
    flex: 1 1 auto;
    display: flex;
    gap: 12px;
    min-height: 0;
}

.pos-kitchen-column[b-968h2rk1ms] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    background: var(--pos-panel);
    border-radius: var(--pos-radius-mulde, 10px);
    padding: 10px;
    box-sizing: border-box;
}

/* AUFTRAG-AKTE-MEGA-CC.md Paket C.5 (Gruender-Feedback 25.07.2026): die
   frühere Sondergewichtung der IN-PRODUKTION-Spalte entfaellt ersatzlos -
   alle drei Kartenspalten teilen sich den Platz neben der Tischliste
   gleichmaessig (jede flex: 1 1 0 ueber .pos-kitchen-column oben) und
   bekommen alle denselben Mehrspalten-Fluss. */
/* Bei der Verifikation entdeckt: die Basisklasse .pos-kitchen-column-body
   (weiter unten) setzt ebenfalls "display" (flex) - bei gleicher Spezifitaet
   gewinnt im Markup die spaeter im Stylesheet stehende Regel, das war bisher
   .pos-kitchen-column-body und hat den Mehrspalten-Fluss komplett
   unterdrueckt (alle Karten liefen einspaltig, volle Breite). Kombinierter
   Selektor macht den Vorrang unabhaengig von der Reihenfolge im Stylesheet. */
/* AUFTRAG-AKTE-MEGA-NACHBESSERUNG-CC.md Punkt 6: CSS-columns balanciert per
   Default (verteilt Karten moeglichst gleichmaessig auf alle Kolonnen, z. B.
   2/1/1 bei 4 Karten) - das Brett soll aber ERST die rechte Kolonne
   vollstaendig fuellen (oben->unten), bevor eine weitere beginnt.
   column-fill:auto erzwingt sequenzielles Fuellen; dafuer braucht der
   Container eine begrenzte Hoehe (schon vorhanden: .pos-kitchen-column-body
   sitzt in einer Flex-Spalte mit fixer Resthoehe, overflow-y:auto weiter
   unten faengt den Ueberlauf ab, falls selbst alle Kolonnen zusammen nicht
   reichen). */
.pos-kitchen-column-body.pos-kitchen-column-body-multicol[b-968h2rk1ms] {
    display: block;
    column-width: 320px;
    column-gap: 8px;
    column-fill: auto;
    height: 100%;
}

.pos-kitchen-column-body-multicol > *[b-968h2rk1ms] {
    break-inside: avoid;
    margin-bottom: 8px;
}

/* Paket C.5: Warteliste (Eingang) fliesst Nr. 1 oben RECHTS, Spalte abwaerts,
   dann eine Kolonne weiter nach LINKS - ein bewusster Lese-/Schulungs-Kniff
   fuer die Flussrichtung, kein Bug. rtl auf dem mehrspaltigen Container
   kehrt die Fuellreihenfolge der CSS-Spalten um; ltr auf der einzelnen Karte
   macht ihren Inhalt wieder normal lesbar. */
.pos-kitchen-flow-rtl[b-968h2rk1ms] {
    direction: rtl;
}

.pos-kitchen-flow-rtl > .pos-kitchen-card[b-968h2rk1ms] {
    direction: ltr;
}

.pos-kitchen-column-finished.pos-kitchen-column-collapsed[b-968h2rk1ms] {
    flex: 0 0 auto;
}

.pos-kitchen-column-title[b-968h2rk1ms] {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--pos-muted);
}

.pos-kitchen-column-title-clickable[b-968h2rk1ms] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pos-kitchen-collapse-arrow[b-968h2rk1ms] {
    color: var(--pos-faint);
}

.pos-kitchen-column-body[b-968h2rk1ms] {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* AUFTRAG-KDS-TISCHLISTE-CC.md Paket B.4: diese Spalte scrollt statt zu
   blaettern - dieselbe Basis-Klasse reicht (overflow-y: auto ist schon da),
   nur zur Kennzeichnung im Markup. */
.pos-kitchen-column-body-scroll[b-968h2rk1ms] {
    overflow-y: auto;
}

.pos-kitchen-automatik-header[b-968h2rk1ms] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.pos-kitchen-already-prepared[b-968h2rk1ms] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pos-muted);
}

.pos-kitchen-pager[b-968h2rk1ms] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 8px;
}

.pos-kitchen-pager-label[b-968h2rk1ms] {
    color: var(--pos-muted);
    font-size: 12px;
}

.pos-kitchen-card[b-968h2rk1ms] {
    background: var(--pos-surface);
    border-radius: var(--pos-radius-tile, 8px);
    padding: 10px;
    box-shadow: var(--pos-shadow-rest);
    border-left: 4px solid transparent;
    transition: border-color 200ms ease;
}

.pos-kitchen-card-clickable[b-968h2rk1ms] {
    cursor: pointer;
}

/* Doc 17 Kap. 5: gehaltene Gaenge - gedimmte Vorschau, nicht claimbar. */
.pos-kitchen-card-held[b-968h2rk1ms] {
    opacity: .55;
}

/* AUFTRAG-KDS-TISCHLISTE-CC.md Paket B.2: bereits ausgelieferte Karten im
   Tisch-Detail (Haekchen "bereits zubereitet anzeigen") - neutral gedimmt,
   noch etwas schwaecher als gehalten (fachlich abgeschlossen, nicht nur
   noch nicht dran). */
.pos-kitchen-card-done[b-968h2rk1ms] {
    opacity: .4;
}

.pos-kitchen-held-badge[b-968h2rk1ms] {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pos-muted);
    border: 1px solid var(--pos-hairline);
    border-radius: 4px;
    padding: 2px 6px;
}

/* Doc 17 Kap. 3.4: Rot ausschliesslich fuer ueberfaellig + Storno.
   AUFTRAG-CI-ROLLOUT-CC.md Paket G (Doc 20 Kap. 4): wartend/Warnung -> Honig,
   ueberfaellig -> eigenes Fehler-Rot (bewusst NICHT --pos-accent, der ist
   jetzt Tomate und ausschliesslich fuer das aktiv fokussierte Element
   reserviert - sonst waere "ueberfaellig" nicht mehr von einer aktiven
   Aktion unterscheidbar). */
.pos-kitchen-card-yellow[b-968h2rk1ms] {
    border-left-color: var(--tim-honig, #F2B33D);
}

.pos-kitchen-card-red[b-968h2rk1ms] {
    border-left-color: var(--tim-fehler, #B3261E);
}

.pos-kitchen-card-header[b-968h2rk1ms] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pos-kitchen-card-table[b-968h2rk1ms] {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 14px;
}

/* AUFTRAG-AKTE-MEGA-CC.md Paket C.6: dynamischer Warteschlangenplatz,
   prominent auf den Wartelisten-Karten - bewusst als Lesehilfe/Schulung fuer
   die Flussrichtung (Nr. 1 oben rechts, siehe .pos-kitchen-flow-rtl). */
.pos-kitchen-card-rank[b-968h2rk1ms] {
    flex: 0 0 auto;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--pos-mulde-bg);
    color: var(--pos-text);
}

/* Paket C.3: "X/Y"-Fortschritt einer Batch-Karte mit mehr als einer Position. */
.pos-kitchen-progress-badge[b-968h2rk1ms] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pos-muted);
    border: 1px solid var(--pos-hairline);
    border-radius: 4px;
    padding: 2px 6px;
}

.pos-kitchen-cook-badge[b-968h2rk1ms],
.pos-kitchen-server-badge[b-968h2rk1ms] {
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding: 0 6px;
}

.pos-kitchen-server-badge[b-968h2rk1ms] {
    background: var(--pos-faint);
}

.pos-kitchen-card-rows[b-968h2rk1ms] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.pos-kitchen-card-row[b-968h2rk1ms] {
    display: flex;
    gap: 8px;
    font-size: 15px;
}

.pos-kitchen-card-qty[b-968h2rk1ms] {
    flex: 0 0 auto;
    font-weight: 700;
    min-width: 28px;
}

.pos-kitchen-card-name[b-968h2rk1ms] {
    flex: 1 1 auto;
}

.pos-kitchen-card-sub[b-968h2rk1ms] {
    font-size: 12px;
    color: var(--pos-muted);
    padding-left: 36px;
    margin-bottom: 4px;
}

.pos-kitchen-card-timer[b-968h2rk1ms] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--pos-muted);
    margin-bottom: 6px;
}

/* Nachtrag 6. Runde Punkt 20: zweite Zeitangabe waehrend der Produktion -
   dezenter als die Kochzeit selbst (kleiner, keine eigene Zeile Gewicht),
   aber klar beschriftet. */
.pos-kitchen-card-guest-wait[b-968h2rk1ms] {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--pos-faint);
    margin-bottom: 6px;
}

/* AUFTRAG-AKTE-MEGA-CC.md Paket C.2: Koch-Frage - pulsierend statt starr
   waehrend das 90-s-Fenster laeuft, damit sie auffaellt ohne so aggressiv wie
   der Storno-Alarm (pos-kitchen-flash) zu wirken. */
@keyframes pos-kitchen-pulse-b-968h2rk1ms {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

.pos-kitchen-latecomer[b-968h2rk1ms] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0;
    padding: 8px;
    border-radius: var(--pos-radius-btn, 6px);
    border: 1px solid var(--tim-honig, #F2B33D);
    background: color-mix(in srgb, var(--tim-honig, #F2B33D) 15%, var(--pos-surface));
    animation: pos-kitchen-pulse-b-968h2rk1ms 1.6s ease-in-out infinite;
}

.pos-kitchen-latecomer-text[b-968h2rk1ms] {
    font-size: 13px;
    font-weight: 600;
}

.pos-kitchen-latecomer-actions[b-968h2rk1ms] {
    display: flex;
    gap: 8px;
}

.pos-kitchen-card-actions[b-968h2rk1ms] {
    display: flex;
    gap: 8px;
}

.pos-kitchen-btn[b-968h2rk1ms] {
    min-height: 48px;
    flex: 1 1 auto;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-mulde-bg);
    color: var(--pos-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

.pos-kitchen-btn:disabled[b-968h2rk1ms] {
    opacity: .4;
    cursor: default;
}

.pos-kitchen-btn-primary[b-968h2rk1ms] {
    background: var(--pos-accent);
    color: #fff;
}

@media (max-width: 900px) {
    .pos-kitchen-board[b-968h2rk1ms] {
        flex-direction: column;
    }
}
/* /Pages/Pos/PosScreensOpen.razor.rz.scp.css */
/* AUFTRAG-PRODUCTION-SCREENS-CC.md Paket D.4: gleiche Optik wie
   PosRevenueCenterPicker.razor.css - Blazor-CSS-Isolation scoped Klassen pro
   Komponente, ein reines Wiederverwenden der Klassennamen aus einer anderen
   .razor.css greift hier nicht, deshalb eigene (identische) Regeln. */
.pos-outlet-picker[b-37x4wfhoa1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 100vh;
    padding: 32px 16px;
    box-sizing: border-box;
}

.pos-outlet-picker-title[b-37x4wfhoa1] {
    color: var(--pos-muted);
    font-size: 14px;
    margin: 0;
}

.pos-outlet-picker-tile[b-37x4wfhoa1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: min(320px, 80vw);
    padding: 16px 20px;
    border: none;
    border-radius: var(--pos-radius-tile, 8px);
    background: var(--pos-surface);
    color: var(--pos-text);
    cursor: pointer;
    box-shadow: var(--pos-shadow-rest);
    transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}

.pos-outlet-picker-tile:hover[b-37x4wfhoa1] {
    box-shadow: 0 0 0 2px var(--pos-accent), var(--pos-shadow-rest);
}

.pos-outlet-picker-tile:active[b-37x4wfhoa1] {
    transform: translateY(1px) scale(0.99);
}

.pos-outlet-picker-name[b-37x4wfhoa1] {
    font-size: 15px;
    font-weight: 700;
}
/* /Pages/Pos/PosVisitDetail.razor.rz.scp.css */
.pos-shell[b-rqpc2fpbqy] {
    width: 100%;
    flex: 1 1 auto;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    background: var(--pos-canvas);
    color: var(--pos-text);
    font-family: var(--tim-font);
    font-size: 14px;
}

.pos-loading[b-rqpc2fpbqy] {
    margin: auto;
    font-size: 1.1rem;
}

.pos-header[b-rqpc2fpbqy] {
    flex: 0 0 auto;
    height: calc(52px * var(--ui-scale, 1));
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale, 1));
    padding: 0 calc(12px * var(--ui-scale, 1));
    background: var(--pos-panel);
    border-bottom: 1px solid var(--pos-hairline);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pos-header-title[b-rqpc2fpbqy] {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 500;
    font-size: calc(17px * var(--ui-scale, 1));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-header-status[b-rqpc2fpbqy] {
    flex: 0 0 auto;
    font-size: calc(13px * var(--ui-scale, 1));
    color: var(--pos-muted);
    white-space: nowrap;
}

.pos-header-spacer[b-rqpc2fpbqy] {
    flex: 1 1 auto;
}

.pos-icon-btn[b-rqpc2fpbqy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: calc(6px * var(--ui-scale, 1));
    min-height: calc(34px * var(--ui-scale, 1));
    padding: 0 calc(10px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    cursor: pointer;
    touch-action: manipulation;
    font-size: calc(12px * var(--ui-scale, 1));
    box-shadow: var(--pos-shadow-pressed);
    transition: transform 100ms ease-out, box-shadow 100ms ease-out, filter 100ms ease-out;
}

.pos-icon-btn:active[b-rqpc2fpbqy] {
    transform: translateY(1px) scale(0.98);
    box-shadow: none;
    filter: brightness(1.08);
}

.pos-icon-btn-label[b-rqpc2fpbqy] {
    font-weight: 600;
}

.pos-icon-btn-active[b-rqpc2fpbqy] {
    color: var(--pos-accent);
}

/* Paket A (Gaenge): eigene kleine Gruppe statt eines einzelnen Icon-Buttons,
   damit +/- wurstfingertauglich neben der aktiven Gang-Anzeige Platz haben. */
.pos-gang-control[b-rqpc2fpbqy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: calc(4px * var(--ui-scale, 1));
}

.pos-gang-step[b-rqpc2fpbqy] {
    flex: 0 0 auto;
    width: calc(28px * var(--ui-scale, 1));
    min-height: calc(34px * var(--ui-scale, 1));
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: calc(14px * var(--ui-scale, 1));
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-pressed);
}

.pos-gang-step:active[b-rqpc2fpbqy] {
    transform: translateY(1px) scale(0.94);
    filter: brightness(1.1);
}

.pos-split-notice[b-rqpc2fpbqy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--pos-accent);
    color: #fff;
    font-size: calc(13px * var(--ui-scale, 1));
}

.pos-split-notice button[b-rqpc2fpbqy] {
    flex: 0 0 auto;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: var(--pos-radius-btn, 6px);
    padding: 4px 10px;
    cursor: pointer;
    touch-action: manipulation;
    font-weight: 600;
}

.pos-body[b-rqpc2fpbqy] {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.pos-body-wide[b-rqpc2fpbqy] {
    flex-direction: row;
}

.pos-body-compact[b-rqpc2fpbqy] {
    flex-direction: column;
}

.pos-bon-column[b-rqpc2fpbqy] {
    position: relative;
    flex: 0 0 calc(345px * var(--ui-scale, 1));
    min-width: 0;
    border-right: 1px solid var(--pos-hairline);
    min-height: 0;
}

.pos-main[b-rqpc2fpbqy] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Ohne min-width:0 schrumpft der Bereich in der Zweispalten-Zeile nicht mit,
       sondern schiebt sich nach rechts aus dem Bild -> die Artikel-Kacheln
       reduzieren dann NICHT sauber von 3 auf 2 auf 1 Spalte. */
    min-width: 0;
}

.pos-main > .pos-tile-grid[b-rqpc2fpbqy] {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.pos-main > .pos-fan[b-rqpc2fpbqy],
.pos-main > .pos-compact-nav[b-rqpc2fpbqy] {
    flex: 0 0 auto;
}

/* Paket D (Doc 17 Kap. 6): "Offene Tische" am rechten Rand des Zweispalt-Modus.
   Nachtrag 8. Runde Punkt 29: aufziehbar (PosOpenTablesResizeHandle setzt
   flexBasis per JS/sessionStorage, dieser Wert ist nur der Erstladungs-
   Fallback, bis das JS-Modul greift) - position:relative fuers absolut
   positionierte Aufzieh-Dreieck. */
.pos-open-tables-column[b-rqpc2fpbqy] {
    position: relative;
    flex: 0 0 calc(220px * var(--ui-scale, 1));
    min-width: 0;
    border-left: 1px solid var(--pos-hairline);
    min-height: 0;
}

.pos-bon-summary[b-rqpc2fpbqy] {
    flex: 0 0 auto;
    min-height: calc(44px * var(--ui-scale, 1));
    margin: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) 0;
    border: none;
    border-radius: var(--pos-radius-btn, 6px);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-weight: 600;
    font-size: calc(14px * var(--ui-scale, 1));
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--pos-shadow-pressed);
    transition: transform 100ms ease-out, filter 100ms ease-out;
}

.pos-bon-summary:active[b-rqpc2fpbqy] {
    transform: translateY(1px) scale(0.99);
    filter: brightness(1.08);
}

/* Paket B (Doc 17 Kap. 5): Fehlermeldung im Gang-Abruf-Sheet (409 bei
   Sequenzverletzung/Wettlauf). */
.pos-fire-course-error[b-rqpc2fpbqy] {
    color: var(--pos-accent);
    font-weight: 600;
}


/* Nachtrag 2. Runde Punkt 7: kein eigener Vollflaechen-Tischwahl-Zustand
   mehr - "/pos" ohne Vorgang zeigt statt der Artikelkacheln nur diesen
   dezenten Hinweis, die eigentliche Tischwahl passiert in der rechten
   Kellner-Spalte (PosOpenTables, siehe deren .razor.css fuer die freien-
   Tische-Kacheln). */
.pos-select-table-hint[b-rqpc2fpbqy] {
    margin: auto;
    color: var(--pos-muted);
    font-size: calc(1.1rem * var(--ui-scale, 1));
    text-align: center;
    padding: 0 calc(24px * var(--ui-scale, 1));
}

/* Paket D.5: Platz-Waehler im Header, gleiche Optik wie der Gang-Kontrollknopf. */
.pos-seat-control[b-rqpc2fpbqy] {
    display: flex;
    align-items: center;
    gap: calc(2px * var(--ui-scale, 1));
}
/* /Pages/SItem/SICatListPage.razor.rz.scp.css */
.sicat-color-dot[b-987eeldilo] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
/* /Pages/SItem/SItemColorPicker.razor.rz.scp.css */
.sitem-color-picker-shell[b-ipdvc4lgef] {
    padding: 12px;
    border-radius: var(--pos-radius-sheet, 10px);
    max-width: 420px;
}
/* /Pages/SItem/SItemTilePreview.razor.rz.scp.css */
.sitem-tile-preview[b-tr3vjmihlr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}

.sitem-tile-preview-title[b-tr3vjmihlr] {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.7;
}

.sitem-tile-preview-row[b-tr3vjmihlr] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sitem-tile-preview-canvas[b-tr3vjmihlr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: var(--pos-radius-sheet, 10px);
    width: 130px;
}

.sitem-tile-preview-canvas-label[b-tr3vjmihlr] {
    font-size: 0.7rem;
    color: var(--pos-muted);
}
/* /Shared/AppLoadingScreen.razor.rz.scp.css */
.tim-loading[b-60x8nrjds7] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tim-sand);
    z-index: 2000;
}

.tim-loading-mark[b-60x8nrjds7] {
    width: min(220px, 60vw);
    height: auto;
}

.tim-loading-dot[b-60x8nrjds7] {
    transform-box: fill-box;
    transform-origin: center;
    animation: tim-dot-pulse-b-60x8nrjds7 1.6s ease-in-out infinite;
}

@keyframes tim-dot-pulse-b-60x8nrjds7 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
    .tim-loading-dot[b-60x8nrjds7] {
        animation: none;
    }
}
/* /Shared/DevLayout.razor.rz.scp.css */
/* AUFTRAG-CI-ROLLOUT-CC.md Paket C/H: reiner Dev-Einstieg (/seed) - nur
   Grundstil erben, kein Umbau (Doc: "kein Aufwand" fuer Nebenseiten). */
.tim-dev-layout[b-tcdbx32jrf] {
    font-family: var(--tim-font);
    background: var(--tim-sand);
    color: var(--tim-aubergine);
    min-height: 100vh;
    padding: 24px;
    box-sizing: border-box;
}

.tim-dev-layout h1[b-tcdbx32jrf] {
    font-family: var(--tim-font-brand);
    color: var(--tim-aubergine);
}

.tim-dev-layout a[b-tcdbx32jrf] {
    color: var(--tim-tomate-tief);
}
/* /Shared/Loading.razor.rz.scp.css */
.tim-inline-spinner[b-j8l5jt40x5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
}

.tim-inline-spinner-dot[b-j8l5jt40x5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tim-tomate, #E4572E);
    animation: tim-inline-spinner-bounce-b-j8l5jt40x5 1s ease-in-out infinite;
}

.tim-inline-spinner-dot:nth-child(2)[b-j8l5jt40x5] {
    animation-delay: 0.15s;
}

.tim-inline-spinner-dot:nth-child(3)[b-j8l5jt40x5] {
    animation-delay: 0.3s;
}

@keyframes tim-inline-spinner-bounce-b-j8l5jt40x5 {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .tim-inline-spinner-dot[b-j8l5jt40x5] {
        animation: none;
        opacity: 0.7;
    }
}
/* /Shared/PosDayPicker.razor.rz.scp.css */
/* ============================================================
   AUFTRAG-KASSEN-BELEGE-CC.md Paket C.3: der Kalender-Sprung als gemeinsame
   Komponente. Die Regeln stammen aus reservations.css (.res-timeline-cal*,
   AUFTRAG-TIMELINE-WAAGERECHT Paket D) und sind hier UNVERAENDERT im
   Aussehen, nur umbenannt und gekapselt - die Timeline sah danach genauso
   aus wie vorher.

   Scoped CSS statt eines weiteren Blocks in der globalen Datei: Die Klassen
   gehoeren zu genau dieser Komponente, und zwei Aufrufer aus zwei
   Seitenwelten (Reservierungs-Timeline, Kassen-Belegliste) sollen sich nicht
   ueber eine gemeinsame globale Datei beeinflussen koennen.

   Die --pos-*-Tokens kommen von der umgebenden .pos-shell - dadurch geht
   Hell/Dunkel automatisch mit (Doc 19 Kap. 8).
   ============================================================ */
.pos-daypicker[b-5cpwauy4wc] {
    position: relative;
    display: flex;
}

/* Die Popup-Flaeche. Sie war bisher .res-timeline-grid-menu (geteilt mit dem
   Zahnrad-Menue daneben) - hier ausgeschrieben, damit die Komponente ohne
   fremde Klasse steht. */
.pos-daypicker-menu[b-5cpwauy4wc] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--pos-panel);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-sheet);
    box-shadow: var(--pos-shadow-rest);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 26;
    padding: 8px;
    min-width: 260px;
    gap: 8px;
}

.pos-daypicker-menu button[b-5cpwauy4wc] {
    background: transparent;
    border: none;
    color: var(--pos-text);
    padding: 8px 20px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.pos-daypicker-menu button:hover[b-5cpwauy4wc] {
    background: var(--pos-mulde-bg);
}

/* Ebene 1: das Jahr - ein Schritt je Jahr, ohne den Umweg ueber zwoelf
   Monate (ausdrueckliche Gruender-Forderung). */
.pos-daypicker-year[b-5cpwauy4wc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
    color: var(--pos-text);
}

/* Ebene 2: die Monate, ausgeschrieben. */
.pos-daypicker-months[b-5cpwauy4wc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.pos-daypicker-months button[b-5cpwauy4wc] {
    padding: 4px 6px !important;
    text-align: center !important;
    font-size: 0.75rem;
    border-radius: var(--pos-radius-btn);
}

/* Ebene 3: das Monatsraster des gewaehlten Monats, Montag zuerst. */
.pos-daypicker-days[b-5cpwauy4wc] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.pos-daypicker-dow[b-5cpwauy4wc] {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pos-muted);
    padding-bottom: 2px;
}

.pos-daypicker-days button[b-5cpwauy4wc] {
    padding: 5px 0 !important;
    text-align: center !important;
    font-size: 0.78rem;
    border-radius: var(--pos-radius-btn);
}

.pos-daypicker-active[b-5cpwauy4wc] {
    background: var(--pos-accent) !important;
    color: var(--pos-on-accent) !important;
    font-weight: 700;
}

/* „Heute" bleibt erkennbar, auch wenn ein anderer Tag gewaehlt ist. */
.pos-daypicker-today[b-5cpwauy4wc] {
    box-shadow: inset 0 0 0 1px var(--pos-accent);
}
/* /Shared/TimAuthStage.razor.rz.scp.css */
.tim-auth-stage[b-58yvhebhmy] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: var(--tim-sand);
    padding: 32px 16px;
    box-sizing: border-box;
}

.tim-auth-card[b-58yvhebhmy] {
    width: 100%;
    max-width: 440px;
    background: #FFFFFF;
    border-radius: var(--tim-radius-lg);
    box-shadow: 0 8px 30px -14px rgba(59, 44, 53, 0.3);
    padding: 32px;
    box-sizing: border-box;
    color: var(--tim-aubergine);
}
/* /Shared/TimBrand.razor.rz.scp.css */
.tim-brand-wrap[b-8zkltzv8ml] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    /* Schutzzone (Doc 20 Kap. 2): rundum mindestens die Hoehe des i-Punkts -
       ein kleiner Innenabstand haelt die Marke von angrenzenden Elementen fern. */
    padding: 0.2em;
}

.tim-brand[b-8zkltzv8ml] {
    display: block;
    width: auto;
}

.tim-brand-tagline[b-8zkltzv8ml] {
    font-family: var(--tim-font);
    font-weight: 400;
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

.tim-brand-tagline-invers[b-8zkltzv8ml] {
    color: rgba(247, 241, 234, 0.65);
}

.tim-brand-tagline-hell[b-8zkltzv8ml] {
    color: rgba(59, 44, 53, 0.65);
}
/* /Shared/TimErrorPanel.razor.rz.scp.css */
/* AUFTRAG-PROFIL-UND-FEHLERSICHT-CC.md Paket B: der Kasten liegt IN der
   Boundary-Stelle (Content-Bereich bzw. Kassenbaum), keine Vollbild-Flaeche wie
   .update-overlay - Seitenleiste, Kopfzeile, Banner sitzen ohnehin ausserhalb
   der ErrorBoundary und bleiben bedienbar.
   Farben ueber --pos-*-Token mit --tim-*-Rueckfall: in PosLayout (Nachfahre von
   .pos-shell) traegt der Kasten die Kassenfarben; in MainLayout (kein
   .pos-shell-Vorfahre) faellt er auf die globalen CI-Root-Token zurueck. */
.tim-error-panel[b-809kcja2xr] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.tim-error-panel-box[b-809kcja2xr] {
    background: var(--pos-panel, var(--tim-sand, #F7F1EA));
    color: var(--pos-text, var(--tim-aubergine-tief, #3B2C35));
    border: 1px solid var(--pos-hairline, #E3D9CE);
    border-radius: 8px;
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.tim-error-panel-icon[b-809kcja2xr] {
    font-size: 2rem;
    color: var(--pos-danger, var(--tim-fehler, #B3261E));
}

.tim-error-panel-btn[b-809kcja2xr] {
    border: none;
    background: var(--pos-accent, var(--tim-tomate, #E4572E));
    color: var(--pos-on-go, #FFFFFF);
    border-radius: 6px;
    padding: 0.75rem 2rem;
    font-size: 1.05rem;
    cursor: pointer;
    margin-top: 0.5rem;
}

.tim-error-panel-btn:hover[b-809kcja2xr] {
    background: var(--pos-danger, var(--tim-tomate-tief, #A83A1B));
}

.tim-error-panel-details[b-809kcja2xr] {
    margin-top: 1rem;
    text-align: left;
    font-size: 0.85rem;
    opacity: 0.85;
}

.tim-error-panel-details pre[b-809kcja2xr] {
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Shared/UpdateBanner.razor.rz.scp.css */
.update-banner[b-4fez2rmm8f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: #F2B33D;
    color: #3B2C35;
    font-size: 0.9rem;
}

.update-banner-text[b-4fez2rmm8f] {
    flex: 1 1 auto;
}

.update-banner-btn[b-4fez2rmm8f] {
    border: 1px solid #3B2C35;
    background: transparent;
    color: #3B2C35;
    border-radius: 4px;
    padding: 0.2rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.update-banner-btn:hover[b-4fez2rmm8f] {
    background: rgba(59, 44, 53, 0.1);
}

.update-banner-close[b-4fez2rmm8f] {
    border: none;
    background: transparent;
    color: #3B2C35;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
/* /Shared/UpdateOverlay.razor.rz.scp.css */
/* AUFTRAG-UPDATE-WARNUNG-CC.md Paket E: neue oberste Stufe der z-index-Leiter
   (site.css, Zeile ~108 ff.) - 2100, ueber dem AppLoadingScreen (2000). Das
   Rot-Overlay ist die einzige Flaeche, die noch ueber dem App-Boot-Bildschirm
   liegen darf, weil es dessen Nachfolgezustand ist, nicht sein Vorlaeufer. */
.update-overlay[b-241ppqkqxa] {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 11, 13, 0.75);
    padding: 1rem;
}

.update-overlay-box[b-241ppqkqxa] {
    background: var(--tim-sand, #F7F1EA);
    color: #3B2C35;
    border-radius: 8px;
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.update-overlay-note[b-241ppqkqxa] {
    font-style: italic;
}

.update-overlay-versions[b-241ppqkqxa] {
    font-family: monospace;
    opacity: 0.8;
}

.update-overlay-btn[b-241ppqkqxa] {
    border: none;
    background: #E4572E;
    color: #F7F1EA;
    border-radius: 6px;
    padding: 0.75rem 2rem;
    font-size: 1.05rem;
    cursor: pointer;
    margin-top: 0.5rem;
}

.update-overlay-btn:hover[b-241ppqkqxa] {
    background: #c94a24;
}

.update-overlay-countdown[b-241ppqkqxa] {
    margin-top: 1rem;
    opacity: 0.75;
    font-size: 0.9rem;
}