/* ============================================================
   Shabab's Optimize — Dark Theme
   ============================================================ */

:root {
    --sb-bg: #0b0c0f;
    --sb-bg-elev: #15171c;
    --sb-bg-elev-2: #1c1f26;
    --sb-bg-card: #1a1d24;
    --sb-border: #2a2e38;
    --sb-border-strong: #3a3f4b;
    --sb-text: #e8eaed;
    --sb-text-dim: #a1a7b3;
    --sb-text-muted: #6c727f;
    --sb-accent: #e63946;
    --sb-accent-2: #f4a261;
    --sb-accent-hover: #ff4d5b;
    --sb-success: #2ecc71;
    --sb-warning: #f4a261;
    --sb-danger: #e63946;
    --sb-info: #4cc9f0;
    --sb-warn-text: #ff8a93;
    --sb-info-text: #7fd6ff;
    --sb-radius: 10px;
    --sb-radius-sm: 6px;
    --sb-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --sb-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
    --sb-font: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sb-font-display: 'Sora', 'Inter', 'Segoe UI', sans-serif;
    --sb-topbar-h: 2.25rem;
}

html, body {
    font-family: var(--sb-font);
    background: var(--sb-bg);
    color: var(--sb-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    letter-spacing: -0.005em;
}

body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(230, 57, 70, 0.07), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(76, 201, 240, 0.05), transparent 60%),
        var(--sb-bg);
}

a, .btn-link { color: var(--sb-accent-2); }
a:hover { color: var(--sb-accent-hover); }

/* Bootstrap's default .form-text color (--bs-secondary-color) is tuned for a light
   theme and renders too dark to read on this app's dark surfaces (Einstellungen etc.).
   Reuse the app's own muted-text token, which is already themed for both dark and
   light mode, instead of Bootstrap's fixed gray. */
.form-text {
    color: var(--sb-text-muted);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sb-text);
    font-family: var(--sb-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.card {
    background: var(--sb-bg-card);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    color: var(--sb-text);
    box-shadow: var(--sb-shadow-soft);
}

.card-header {
    background: var(--sb-bg-elev-2);
    border-bottom: 1px solid var(--sb-border);
    color: var(--sb-text);
    font-weight: 600;
    border-radius: var(--sb-radius) var(--sb-radius) 0 0 !important;
}

.card-header.bg-primary,
.card-header.bg-danger,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-success,
.card-header.bg-dark {
    background: var(--sb-bg-elev-2) !important;
    color: var(--sb-text) !important;
    border-bottom: 1px solid var(--sb-border);
}

.card-header.bg-primary { border-left: 4px solid var(--sb-accent); }
.card-header.bg-danger  { border-left: 4px solid var(--sb-danger); }
.card-header.bg-info    { border-left: 4px solid var(--sb-info); }
.card-header.bg-warning { border-left: 4px solid var(--sb-warning); }
.card-header.bg-success { border-left: 4px solid var(--sb-success); }
.card-header.bg-dark    { border-left: 4px solid var(--sb-accent-2); }

.card-footer {
    background: var(--sb-bg-elev-2);
    border-top: 1px solid var(--sb-border);
}

.btn {
    border-radius: var(--sb-radius-sm);
    font-weight: 500;
    transition: transform .05s ease, background-color .15s ease, border-color .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    color: #fff;
    background: var(--sb-accent);
    border-color: var(--sb-accent);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--sb-accent-hover);
    border-color: var(--sb-accent-hover);
    color: #fff;
}

.btn-outline-primary { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-primary:hover { background: rgba(230, 57, 70, 0.12); color: #fff; border-color: var(--sb-accent); }

.btn-success { background: var(--sb-success); border-color: var(--sb-success); color: #0b0c0f; }
.btn-success:hover { background: #29b765; border-color: #29b765; color: #0b0c0f; }
.btn-outline-success { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-success:hover { background: rgba(46, 204, 113, 0.15); border-color: var(--sb-success); color: var(--sb-text); }

.btn-danger { background: var(--sb-danger); border-color: var(--sb-danger); color: #fff; }
.btn-outline-danger { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-danger:hover { background: rgba(230, 57, 70, 0.15); border-color: var(--sb-danger); color: var(--sb-text); }

.btn-warning, .btn-warning:hover { color: #0b0c0f; }
.btn-outline-warning { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-warning:hover { background: rgba(244, 162, 97, 0.15); border-color: var(--sb-warning); color: var(--sb-text); }

.btn-info { background: var(--sb-info); border-color: var(--sb-info); color: #0b0c0f; }
.btn-outline-info, .btn-outline-secondary { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-info:hover { background: rgba(76, 201, 240, 0.15); border-color: var(--sb-info); color: var(--sb-text); }
.btn-outline-secondary:hover { background: var(--sb-bg-elev-2); color: var(--sb-text); }

.btn-secondary { background: var(--sb-bg-elev-2); border-color: var(--sb-border-strong); color: var(--sb-text); }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(230, 57, 70, 0.4);
    outline: none;
}

.form-control, .form-select {
    background: var(--sb-bg-elev);
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
}

.form-control:focus, .form-select:focus {
    background: var(--sb-bg-elev);
    border-color: var(--sb-accent);
    color: var(--sb-text);
}

.form-control::placeholder { color: var(--sb-text-muted); }
.form-label, label { color: var(--sb-text-dim); }

.table {
    color: var(--sb-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--sb-text);
    --bs-table-border-color: var(--sb-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--sb-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: var(--sb-text);
}

.list-group-item {
    background: var(--sb-bg-card);
    border-color: var(--sb-border);
    color: var(--sb-text);
}

.alert { border-radius: var(--sb-radius); border: 1px solid var(--sb-border); }
.alert-info    { background: rgba(76, 201, 240, 0.08); color: var(--sb-text); border-color: rgba(76, 201, 240, 0.3); }
.alert-success { background: rgba(46, 204, 113, 0.08); color: var(--sb-text); border-color: rgba(46, 204, 113, 0.3); }
.alert-danger  { background: rgba(230, 57, 70, 0.08);  color: var(--sb-text); border-color: rgba(230, 57, 70, 0.3); }

.toast { background: var(--sb-bg-card); color: var(--sb-text); border: 1px solid var(--sb-border); }
.modal-content { background: var(--sb-bg-card); color: var(--sb-text); border: 1px solid var(--sb-border); }
.modal-header, .modal-footer { border-color: var(--sb-border); }

.badge { font-weight: 500; letter-spacing: 0.02em; }
.badge.bg-secondary { background: var(--sb-bg-elev-2) !important; color: var(--sb-text-dim); border: 1px solid var(--sb-border); }
.badge.bg-danger    { background: rgba(230, 57, 70, 0.2) !important;  color: #ff8a93; }
.badge.bg-warning   { background: rgba(244, 162, 97, 0.2) !important; color: #ffc89a; }
.badge.bg-info      { background: rgba(76, 201, 240, 0.2) !important; color: #9bdbf2; }
.badge.bg-success   { background: rgba(46, 204, 113, 0.2) !important; color: #7be0a9; }
.badge.bg-primary   { background: rgba(230, 57, 70, 0.2) !important;  color: #ff8a93; }

.text-muted { color: var(--sb-text-muted) !important; }
.text-white { color: var(--sb-text) !important; }
.text-dark  { color: var(--sb-text) !important; }
.bg-light   { background: var(--sb-bg-elev) !important; color: var(--sb-text) !important; }
.bg-white   { background: var(--sb-bg-card) !important; color: var(--sb-text) !important; }
hr { border-color: var(--sb-border); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sb-bg); }
::-webkit-scrollbar-thumb { background: var(--sb-border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-accent); }

.content { padding-top: 1.1rem; }
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--sb-success); }
.invalid { outline: 1px solid var(--sb-danger); }
.validation-message { color: var(--sb-danger); }

.blazor-error-boundary {
    background: var(--sb-danger);
    color: #fff;
    padding: 1rem;
    border-radius: var(--sb-radius);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- Brand ---------- */
.brand-logo {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sb-accent);
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.2);
}

.brand-logo-lg {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sb-accent);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.2), var(--sb-shadow);
}

/* ---------- Cashier no-scroll grid ---------- */
.pos-screen {
    --pos-gap: 0.6rem;
    height: calc(100vh - var(--sb-topbar-h, 2.25rem));
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr 1.25fr;
    gap: var(--pos-gap);
    padding: var(--pos-gap);
    overflow: hidden;
}

/* ---- Reiter-Shell der Kasse -------------------------------------------
   Die Bonier-Ansicht bleibt unverändert; sie bekommt lediglich einen
   Arbeitsbereich über der Umschaltleiste. Der Kassenreiter wird beim
   Wechsel nur ausgeblendet und nicht ausgehängt, damit Warenkorb und
   Konfiguration einen Ausflug in einen anderen Reiter überleben. */

/* Die Kasse ist eine reine Touchscreen-Arbeitsfläche (POS), kein Verwaltungs-
   formular - das globale Content-Padding von MainLayout.razor (article.content,
   1.1rem oben + 1.25rem links/rechts !important ab 641px) verschwendet hier nur
   Platz, den .pos-screen selbst schon über --pos-gap regelt. :has() erkennt
   zuverlässig genau diese Seite, ohne dass MainLayout die aktuelle Route kennen
   müsste - .pos-shell ist immer der direkte Wurzel-Container von Cashier.razor. */
.content:has(> .pos-shell) {
    padding: 0 !important;
}

.pos-shell {
    --pos-tabbar-h: 3.4rem;
}

.pos-shell .pos-workspace {
    height: calc(100vh - var(--sb-topbar-h, 2.25rem) - var(--pos-tabbar-h));
    overflow: hidden;
}

.pos-shell .pos-workspace > .pos-screen {
    height: 100%;
}

.pos-workspace__panel {
    height: 100%;
    overflow-y: auto;
    padding: 0.75rem;
}

.pos-workspace__hidden {
    display: none !important;
}

.pos-tabbar {
    height: var(--pos-tabbar-h);
    display: flex;
    gap: 0.35rem;
    align-items: stretch;
    padding: 0.3rem 0.5rem;
    background: var(--sb-bg-elev-2);
    border-top: 1px solid var(--sb-border);
}

.pos-tabbar__tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0 0.75rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-card);
    color: var(--sb-text-dim);
    font-size: 0.95rem;
    cursor: pointer;
}

.pos-tabbar__tab:hover:not(:disabled) {
    border-color: var(--sb-border-strong);
    color: var(--sb-text);
}

.pos-tabbar__tab--active {
    background: var(--sb-accent, #e63946);
    border-color: var(--sb-accent, #e63946);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

.pos-tabbar__icon { font-size: 1.15rem; }

.pos-tabbar__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Auf schmalen Kassendisplays zählt die Trefferfläche mehr als die Schrift. */
@media (max-width: 900px) {
    .pos-tabbar__label { display: none; }
    .pos-tabbar__icon { font-size: 1.4rem; }
}

.pos-col {
    background: var(--sb-bg-card);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pos-col-header {
    padding: 0.5rem 0.75rem;
    background: var(--sb-bg-elev-2);
    border-bottom: 1px solid var(--sb-border);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sb-text-dim);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-col-body {
    padding: 0.5rem;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.pos-col-footer {
    padding: 0.5rem;
    border-top: 1px solid var(--sb-border);
    background: var(--sb-bg-elev-2);
}

.pos-group-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sb-text-muted);
    padding: 0.5rem 0.2rem 0.3rem;
    font-weight: 600;
}

.pos-group-label:first-child { padding-top: 0.1rem; }

.pos-btn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
}

.pos-btn-grid.single { grid-template-columns: 1fr; }
.pos-btn-grid.three  { grid-template-columns: repeat(3, 1fr); }

.pos-btn {
    background: var(--sb-bg-elev);
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
    border-radius: var(--sb-radius-sm);
    padding: 0.55rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background-color .12s ease, border-color .12s ease, transform .05s ease;
    line-height: 1.15;
    min-height: 2.35rem;
}

.pos-btn:hover {
    background: var(--sb-bg-elev-2);
    border-color: var(--sb-border-strong);
}

.pos-btn:active { transform: translateY(1px); }

.pos-btn.active {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    color: #fff;
    box-shadow: 0 0 0 1px var(--sb-accent), 0 4px 12px rgba(230, 57, 70, 0.25);
}

/* All selection states share one accent color for consistent contrast, regardless of the
   semantic modifier class (info/warn/success/danger/excluded) still used on the element. */
.pos-btn.active.info,
.pos-btn.active.warn,
.pos-btn.active.success,
.pos-btn.active.danger,
.pos-btn.active.excluded {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    color: #fff;
    box-shadow: 0 0 0 1px var(--sb-accent), 0 4px 12px rgba(230, 57, 70, 0.25);
}

.pos-cart-item {
    background: var(--sb-bg-elev);
    border: 1px solid var(--sb-border);
    border-left: 3px solid var(--sb-accent);
    border-radius: var(--sb-radius-sm);
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.pos-cart-item .title {
    font-weight: 600;
    color: var(--sb-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}

.pos-cart-item .meta {
    color: var(--sb-text-dim);
    font-size: 0.78rem;
    margin-top: 0.2rem;
    line-height: 1.3;
}

.serv-badge {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.serv-badge--dinein {
    background: #143a2b;
    color: #7ee6ab;
    border: 1px solid #2f7a52;
}

.serv-badge--takeaway {
    background: #1f2a42;
    color: #8fb4ff;
    border: 1px solid #35538c;
}

.pos-cart-empty {
    text-align: center;
    color: var(--sb-text-muted);
    padding: 2rem 1rem;
    font-size: 0.9rem;
}

.pos-add-btn {
    width: 100%;
    background: #c1232f;
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.7rem;
    border-radius: var(--sb-radius-sm);
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.25);
}

.pos-add-btn:hover { filter: brightness(1.08); }
.pos-add-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.pos-col-topbar {
    padding: 0.2rem;
    border-bottom: 1px solid var(--sb-border);
    background: var(--sb-bg-elev-2);
}

.pos-col-order {
    position: relative;
}

.pos-submit-btn--floating {
    position: absolute;
    bottom: 18%;
    min-height: 6rem;
    padding: 1.4rem 0.85rem;
    font-size: 1.2rem;
    z-index: 3;
}

.pos-col-order .pos-col-body {
    padding-bottom: 7.5rem;
}


.pos-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--sb-success), #1f9c55);
    border: none;
    color: #0b0c0f;
    font-weight: 700;
    padding: 0.85rem;
    border-radius: var(--sb-radius-sm);
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(46, 204, 113, 0.3);
    letter-spacing: 0.02em;
}

.pos-submit-btn:hover { filter: brightness(1.08); }
.pos-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.pos-clear-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--sb-border-strong);
    color: var(--sb-text-dim);
    padding: 0.45rem;
    border-radius: var(--sb-radius-sm);
    font-size: 0.82rem;
    cursor: pointer;
    margin-top: 0.4rem;
}

.pos-clear-btn:hover { background: var(--sb-bg-elev-2); color: var(--sb-text); }

/* ------------------------------------------------------------
   Cashier: high-contrast light surface (readable under glare)
   Scoped to .pos-screen only — rest of the app keeps the dark theme.
   ------------------------------------------------------------ */
.pos-screen {
    --sb-bg: #eef0f3;
    --sb-bg-elev: #ffffff;
    --sb-bg-elev-2: #e7e9ee;
    --sb-bg-card: #ffffff;
    --sb-border: #c7cbd4;
    --sb-border-strong: #9aa0ac;
    --sb-text: #14161a;
    --sb-text-dim: #3a3f4a;
    --sb-text-muted: #5a606c;
    --sb-warn-text: #b3202b;
    --sb-info-text: #0f6fa3;
    background: var(--sb-bg);
}

/* Overlay tints in the "In Zubereitung / Zu bezahlen" panels were tuned for a
   dark surface (white-on-dark). Flip them to dark-on-light so cards/badges
   stay visible instead of nearly disappearing on the new light background. */
.pos-screen .pos-prep-panel { background: rgba(0, 0, 0, 0.03); }
.pos-screen .pos-prep-toggle:hover { background: rgba(0, 0, 0, 0.05); }
.pos-screen .pos-prep-toggle .count { background: rgba(0, 0, 0, 0.08); }
.pos-screen .pos-prep-item { background: rgba(0, 0, 0, 0.035); border-color: rgba(0, 0, 0, 0.08); }
.pos-screen .pos-prep-item .serv { background: rgba(0, 0, 0, 0.08); }
.pos-screen .pos-pay-head .serv,
.pos-screen .pos-pay-head .method { background: rgba(0, 0, 0, 0.08); }

.pos-screen .pos-edit-banner { color: #0b3d91; }
.pos-screen .pos-edit-banner strong { color: #06214f; }
.pos-screen .pos-edit-cancel {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--sb-text-dim);
}
.pos-screen .pos-edit-cancel:hover:not(:disabled) { background: rgba(0, 0, 0, 0.12); }
.pos-screen .pos-prep-item .editing-badge { color: #0b3d91; }
.pos-screen .pos-prep-item .print-failed-badge { color: #8a5a00; }

/* Action pills (Verpacken/Bearbeiten/Bezahlt) used solid white text tuned
   for a dark tint background; darken to stay legible on the light tint. */
.pos-screen .pos-prep-action,
.pos-screen .pos-pay-btn { color: #0e3d20; }
.pos-screen .pos-prep-action.edit { color: #0b3d91; }
.pos-screen .pos-prep-action.retry-print { color: #6b4900; }
.pos-screen .pos-pay-items .dish { color: var(--sb-text); }

/* ============================================================
   Auth pages (Login, Register, etc.)
   ============================================================ */
body { background: var(--sb-bg); color: var(--sb-text); }

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(230, 57, 70, 0.15), transparent 60%),
        radial-gradient(800px 400px at 50% 110%, rgba(230, 57, 70, 0.08), transparent 60%),
        var(--sb-bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--sb-bg-card);
    border: 1px solid var(--sb-border);
    border-radius: 14px;
    padding: 2rem 1.75rem 1.5rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.auth-brand img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sb-accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18);
}

.auth-brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sb-text);
    letter-spacing: -0.01em;
}

.auth-brand-sub {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sb-text-muted);
}

.auth-form .form-floating > label {
    color: var(--sb-text-muted);
}

.auth-form .form-control {
    background: var(--sb-bg-elev);
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
}

.auth-form .form-control:focus {
    background: var(--sb-bg-elev-2);
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.2);
    color: var(--sb-text);
}

.auth-form .form-check-input {
    background-color: var(--sb-bg-elev);
    border-color: var(--sb-border-strong);
}

.auth-form .form-check-input:checked {
    background-color: var(--sb-accent);
    border-color: var(--sb-accent);
}

.auth-submit {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
}

.auth-submit:hover, .auth-submit:focus {
    background: #d12f3c;
    border-color: #d12f3c;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25);
}

.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: 0.85rem;
}

.auth-links a {
    color: var(--sb-text-dim);
    text-decoration: none;
}

.auth-links a:hover {
    color: var(--sb-accent);
}

.auth-hint {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sb-border);
    font-size: 0.78rem;
    color: var(--sb-text-muted);
    text-align: center;
}

.auth-hint code {
    background: var(--sb-bg-elev);
    color: var(--sb-text);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.78rem;
}

/* Cashier "In Zubereitung" compact collapsible panel */
.pos-prep-panel {
    border-bottom: 1px solid var(--sb-border, #2a2f3a);
    background: rgba(255,255,255,0.02);
    flex: 0 0 auto;
}
.pos-prep-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--sb-text, #e6e7ea);
    border: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
}
.pos-prep-toggle:hover { background: rgba(255,255,255,0.04); }
.pos-prep-toggle .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #555;
    flex: 0 0 auto;
}
.pos-prep-toggle .dot.active { background: var(--sb-accent-2, #ffb020); box-shadow: 0 0 6px var(--sb-accent-2, #ffb020); }
.pos-prep-toggle .lbl { flex: 1 1 auto; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.72rem; color: var(--sb-text-dim, #9aa0a6); }
.pos-prep-toggle .count {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    color: var(--sb-text, #e6e7ea);
    min-width: 1.4rem;
    text-align: center;
}
.pos-prep-toggle .chev { color: var(--sb-text-dim, #9aa0a6); font-size: 0.75rem; width: 0.8rem; text-align: center; }
.pos-prep-body {
    padding: 0.4rem 0.5rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 3rem;
    max-height: clamp(3rem, 16vh, 9rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Cashier column 4: bound the info panels so the three of them can never
   consume the whole column, and guarantee the cart-in-progress + submit
   button stay visible even when many orders pile up. */
.pos-col-cart { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pos-col-cart .pos-prep-panel { flex: 0 0 auto; }
.pos-cart-body {
    flex: 1 1 auto;
    min-height: 6.5rem;
}
.pos-col-cart .pos-col-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.pos-prep-empty {
    font-size: 0.75rem;
    color: var(--sb-text-dim, #9aa0a6);
    text-align: center;
    padding: 0.4rem 0;
}
.pos-prep-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--sb-text, #e6e7ea);
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
    font-size: 0.78rem;
}
.pos-prep-item.is-busy { opacity: 0.85; }
/* Kopfzeile + Aktionsknöpfe nebeneinander; die Fiskal-/Storno-Anzeige (falls
   vorhanden) folgt darunter über die volle Kartenbreite, statt sich die Zeile
   mit den Knöpfen zu teilen und in eine schmale Spalte umzubrechen. */
.pos-prep-item .prep-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pos-prep-item .prep-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.pos-prep-item .num { font-weight: 700; color: var(--sb-accent, #ff5a5f); font-size: 0.85rem; }
.pos-prep-item .serv {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em;
    background: rgba(255,255,255,0.08);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    color: var(--sb-text-dim, #c8ccd1);
}
.pos-prep-item .items { color: var(--sb-text-dim, #9aa0a6); font-size: 0.72rem; }
.pos-prep-item .station {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sb-accent-2, #ffb020);
    background: rgba(255, 176, 32, 0.12);
    border: 1px solid rgba(255, 176, 32, 0.30);
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Dedicated action button inside a prep/ready item (touch-safe) */
.pos-prep-action {
    flex: 0 0 auto;
    width: auto;
    border: 1px solid rgba(40,167,69,0.55);
    background: rgba(40,167,69,0.18);
    color: #fff;
    font-weight: 700;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.12s, border-color 0.12s;
}
.pos-prep-action:hover:not(:disabled) {
    background: rgba(40,167,69,0.30);
    border-color: rgba(40,167,69,0.80);
}
.pos-prep-action:disabled { opacity: 0.6; cursor: default; }
.pos-prep-action.is-busy { cursor: progress; }

/* "Bearbeiten" action on an open order */
.pos-prep-action.edit {
    border-color: rgba(88, 166, 255, 0.55);
    background: rgba(88, 166, 255, 0.16);
}
.pos-prep-action.edit:hover:not(:disabled) {
    background: rgba(88, 166, 255, 0.30);
    border-color: rgba(88, 166, 255, 0.85);
}
.pos-prep-item.is-editing {
    border-color: rgba(88, 166, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.45) inset;
}
.pos-prep-item .editing-badge {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #58a6ff;
    background: rgba(88, 166, 255, 0.14);
    border: 1px solid rgba(88, 166, 255, 0.40);
    padding: 0.06rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Warning badge + retry action for orders whose bons failed to print */
.pos-prep-item .print-failed-badge {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #ffc107;
    background: rgba(255, 193, 7, 0.14);
    border: 1px solid rgba(255, 193, 7, 0.45);
    padding: 0.06rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pos-prep-action.retry-print {
    border-color: rgba(255, 193, 7, 0.55);
    background: rgba(255, 193, 7, 0.18);
    color: #fff;
}
.pos-prep-action.retry-print:hover:not(:disabled) {
    background: rgba(255, 193, 7, 0.32);
    border-color: rgba(255, 193, 7, 0.85);
}

/* Stornierte Bestellung: gedämpfte Karte, "Entfernen" statt Zubereitungs-Aktionen */
.pos-prep-item.is-cancelled {
    background: rgba(255, 90, 95, 0.06);
    border-color: rgba(255, 90, 95, 0.25);
}
.pos-prep-action.dismiss {
    border-color: rgba(255, 90, 95, 0.55);
    background: rgba(255, 90, 95, 0.16);
    color: #fff;
}
.pos-prep-action.dismiss:hover:not(:disabled) {
    background: rgba(255, 90, 95, 0.30);
    border-color: rgba(255, 90, 95, 0.85);
}

/* Solange der Warenkorb leer ist, braucht Spalte 4 keinen Platz für
   Warenkorb/Fußzeile zu reservieren — die Bestelltafeln dürfen dann größer
   werden, damit der begrenzte Platz effizienter genutzt wird. */
.pos-col-cart.cart-empty .pos-prep-body {
    max-height: clamp(6rem, 46vh, 28rem);
}
.pos-col-cart.cart-empty .pos-cart-body {
    flex: 0 0 auto;
    min-height: 2.5rem;
}

/* Reiter "Bestellungen": dieselben drei Tafeln wie in der Seitenleiste, aber
   ganzflächig und nebeneinander statt übereinander, da hier die volle Breite
   zur Verfügung steht. */
.pos-orders-panel {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    height: 100%;
    overflow: hidden;
}
.pos-orders-panel .pos-prep-panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sb-border, #2a2f3a);
    border-radius: var(--sb-radius-sm, 6px);
    background: var(--sb-bg-card);
    overflow: hidden;
}
.pos-orders-panel .pos-prep-body.pos-prep-body--expanded {
    max-height: none;
    flex: 1 1 auto;
}

/* Karten-Auf-/Zuklappen (nur Reiter "Bestellungen") + Lupen-Icon fürs große
   Detail-Modal + klickbare Bestellnummer (nur Kassen-Seitenleiste, öffnet
   direkt das Modal, da dort kein Platz zum Aufklappen ist). */
.prep-head--clickable {
    cursor: pointer;
    border-radius: 5px;
    margin: -0.15rem -0.3rem;
    padding: 0.15rem 0.3rem;
    transition: background 0.12s;
}
.prep-head--clickable:hover {
    background: rgba(255, 255, 255, 0.05);
}
.pos-screen .prep-head--clickable:hover {
    background: rgba(0, 0, 0, 0.05);
}
.expand-chevron {
    color: var(--sb-text-dim, #9aa0a6);
    font-size: 0.7rem;
    width: 0.75rem;
    text-align: center;
    flex: 0 0 auto;
}
.num.clickable {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.pos-detail-icon {
    flex: 0 0 auto;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border-radius: 5px;
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
    line-height: 1.3;
    cursor: pointer;
}
.pos-detail-icon:hover {
    background: rgba(255, 255, 255, 0.14);
}
.pos-screen .pos-detail-icon {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.05);
}
.pos-screen .pos-detail-icon:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Ausgeklappte Detailansicht einer Bestellkarte (Reiter "Bestellungen") sowie
   Inhalt des großen Detail-Modals - eine einzige RenderFragment-Quelle
   (RenderOrderDetailBody), zweimal eingebunden. */
.pos-detail {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pos-screen .pos-detail {
    border-top-color: rgba(0, 0, 0, 0.12);
}
.pos-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.3rem 0.75rem;
    font-size: 0.78rem;
}
.pos-detail-meta .lbl {
    color: var(--sb-text-dim, #9aa0a6);
    margin-right: 0.35rem;
}
.pos-detail-items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pos-detail-totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem 1rem;
    font-size: 0.82rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pos-screen .pos-detail-totals {
    border-top-color: rgba(0, 0, 0, 0.1);
}
.pos-detail-totals .lbl {
    color: var(--sb-text-dim, #9aa0a6);
    margin-right: 0.35rem;
}
.pos-detail-totals .total {
    font-weight: 700;
    font-size: 0.92rem;
}

/* Menü-Detailkarte (OrderMenuDetailCard): eigene Kennzeichnung + Gesamtpreis, die
   enthaltenen Bestandteile (Hauptgericht via OrderItemDetailCard, Beilage/Getränk/
   Dessert als Klartextzeile) folgen eingerückt darunter. */
.pos-detail-item--menu {
    border-left: 2px solid var(--sb-accent-2, #ffb020);
}
.pos-menu-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sb-accent-2, #ffb020);
    background: rgba(255, 176, 32, 0.14);
    border: 1px solid rgba(255, 176, 32, 0.4);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.4rem;
}
.pos-detail-item-price {
    font-weight: 700;
    color: #60a5fa;
}
.pos-detail-menu-components {
    margin-top: 0.35rem;
    padding-left: 0.5rem;
    border-left: 1px dashed rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pos-screen .pos-detail-menu-components {
    border-left-color: rgba(0, 0, 0, 0.12);
}
.pos-menu-extras {
    font-size: 0.78rem;
    color: var(--sb-text-dim, #9aa0a6);
}

/* Editing banner + cancel in the cart footer */
.pos-edit-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.8rem;
    color: #cfe3ff;
    background: rgba(88, 166, 255, 0.14);
    border: 1px solid rgba(88, 166, 255, 0.45);
    border-radius: 6px;
}
.pos-edit-banner strong { color: #fff; }
.pos-edit-cancel {
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.06);
    color: var(--sb-text, #e6e7ea);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    cursor: pointer;
}
.pos-edit-cancel:hover:not(:disabled) { background: rgba(255,255,255,0.14); }
.pos-edit-cancel:disabled { opacity: 0.5; cursor: default; }
.pos-submit-btn.editing {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-color: #2563eb;
}

/* ============================================================
   "Zu bezahlen" panel variant
   ============================================================ */
.pos-prep-panel.pay .pos-prep-toggle { background: rgba(244, 162, 97, 0.08); }
.pos-prep-panel.pay .dot.warn { background: var(--sb-warning); box-shadow: 0 0 6px var(--sb-warning); }
.pos-prep-item.pay {
    background: rgba(244, 162, 97, 0.10);
    border-color: rgba(244, 162, 97, 0.45);
}
.pos-prep-item.pay:hover {
    background: rgba(244, 162, 97, 0.18);
    border-color: rgba(244, 162, 97, 0.7);
}

/* ============================================================
   "Abholbereit" panel variant
   ============================================================ */
.pos-prep-panel.ready .pos-prep-toggle { background: rgba(46, 204, 113, 0.10); }
.pos-prep-panel.ready .dot.success { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.pos-prep-item.ready {
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.50);
}
.pos-prep-action.ready {
    border-color: rgba(46, 204, 113, 0.60);
    background: rgba(46, 204, 113, 0.22);
}
.pos-prep-action.ready:hover:not(:disabled) {
    background: rgba(46, 204, 113, 0.34);
    border-color: rgba(46, 204, 113, 0.85);
}

/* Detailed "to pay" cards for the cashier (with dish/meat/grill info) */
.pos-pay-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(244, 162, 97, 0.45);
    border-radius: 8px;
    background: rgba(244, 162, 97, 0.08);
}
.pos-pay-card.online {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.08);
}
.pos-pay-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
}
.pos-pay-head .num {
    font-weight: 700;
    color: var(--sb-accent, #ff5a5f);
    font-size: 0.95rem;
}
.pos-pay-head .serv,
.pos-pay-head .method {
    background: rgba(255,255,255,0.08);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
}
.pos-pay-head .amount {
    margin-left: auto;
    font-weight: 700;
    color: #60a5fa;
    font-size: 0.9rem;
}
.pos-pay-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pos-pay-items li {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 1.1fr;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    font-size: 0.8rem;
    align-items: center;
}
.pos-pay-items .dish { font-weight: 600; color: #fff; }
.pos-pay-items .meat {
    color: var(--sb-text-dim, #c8ccd1);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pos-pay-items .veg {
    font-size: 0.72rem;
    text-align: right;
}
.pos-pay-items .veg.yes { color: #34d399; }
.pos-pay-items .veg.no  { color: #f87171; }
.pos-pay-btn {
    align-self: stretch;
    border: 1px solid rgba(40,167,69,0.55);
    background: rgba(40,167,69,0.20);
    color: #fff;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
.pos-pay-btn:hover {
    background: rgba(40,167,69,0.32);
    border-color: rgba(40,167,69,0.8);
}
.pos-pay-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.pos-pay-btn.is-busy {
    background: rgba(40,167,69,0.32);
    opacity: 0.95;
    cursor: progress;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
/* Löschen einer noch unbezahlten Bestellung (z. B. Karte am Terminal abgelehnt) -
   bewusst zurückhaltender als die grüne Zahlungsbestätigung, aber als "Achtung"
   erkennbar, da endgültig statt nur ein Statuswechsel. */
.pos-pay-btn.delete {
    margin-top: 0.35rem;
    border-color: rgba(255, 90, 95, 0.45);
    background: rgba(255, 90, 95, 0.12);
    color: #ffb3b3;
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
}
.pos-pay-btn.delete:hover:not(:disabled) {
    background: rgba(255, 90, 95, 0.24);
    border-color: rgba(255, 90, 95, 0.75);
    color: #fff;
}
.pay-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: pay-spin 0.7s linear infinite;
}
@keyframes pay-spin {
    to { transform: rotate(360deg); }
}

.cust-summary .total.cash-note {
    background: rgba(244, 162, 97, 0.10);
    border-color: rgba(244, 162, 97, 0.45);
    color: #f4a261;
    justify-content: center;
    text-align: center;
    font-weight: 500;
}

/* ============================================================
   Customer self-service portal (public, dezent)
   ============================================================ */
.cust-shell {
    min-height: 100vh;
    background: #000;
    color: #f1f1f1;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.cust-header {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #1c1c1c;
    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}

.cust-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: #f1f1f1;
    text-decoration: none;
}
.cust-brand img {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #2a2a2a;
}
.cust-brand .brand-name {
    display: block;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}
.cust-brand .brand-sub {
    display: block;
    font-size: 0.75rem;
    color: #8a8a8a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cust-main {
    flex: 1;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.cust-footer {
    padding: 1rem 1.5rem 1.5rem;
    color: #5e5e5e;
    text-align: center;
    font-size: 0.78rem;
    border-top: 1px solid #1c1c1c;
}
.cust-footer .dot { margin: 0 0.5rem; opacity: 0.5; }

.cust-loading { display: flex; justify-content: center; padding: 4rem 0; }

.cust-wizard h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
    color: #fff;
}
.cust-wizard h2.mt { margin-top: 2rem; }
.cust-help { color: #9a9a9a; font-size: 0.92rem; margin-bottom: 1.25rem; }
.cust-help.big { font-size: 1.05rem; color: #cfcfcf; }
.cust-help.small { font-size: 0.78rem; color: #6a6a6a; }

.cust-steps {
    display: flex;
    gap: 0.35rem;
    padding: 0;
    margin: 0 0 1rem 0;
    list-style: none;
}
.cust-steps li {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #1a1a1a;
    text-indent: -9999px;
    overflow: hidden;
}
.cust-steps li.active { background: linear-gradient(90deg, #e63946, #ffb37a); }
.cust-steps li.done   { background: #2ecc71; }

.cust-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}
.cust-tile-grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cust-tile-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cust-tile-grid.four  { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.cust-tile {
    position: relative;
    background: #0d0d0d;
    border: 1px solid #1d1d1d;
    border-radius: 14px;
    overflow: hidden;
    color: #f1f1f1;
    cursor: pointer;
    text-align: left;
    transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease;
    padding: 0;
    min-height: 170px;
    display: flex;
    flex-direction: column;
}
.cust-tile:hover { border-color: #3a3a3a; transform: translateY(-1px); }
.cust-tile.selected {
    border-color: var(--sb-accent, #e63946);
    box-shadow: 0 0 0 2px rgba(230,57,70,0.25), 0 6px 20px rgba(0,0,0,0.5);
}
.cust-tile.excluded {
    border-color: #4a1f24;
    opacity: 0.55;
    filter: grayscale(0.4);
}
.cust-tile .img {
    flex: 1;
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-image:
        linear-gradient(135deg, rgba(230,57,70,0.18), rgba(244,162,97,0.10));
    min-height: 110px;
}
.cust-tile .label {
    padding: 0.6rem 0.85rem 0.7rem;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(2px);
    border-top: 1px solid #1a1a1a;
}
.cust-tile .label strong {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}
.cust-tile .label em {
    display: block;
    font-style: normal;
    color: #9a9a9a;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}
.cust-tile.selected .label em { color: var(--sb-accent-2, #f4a261); }

.cust-nav-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.cust-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 10px;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .05s;
    min-width: 140px;
}
.cust-btn:active { transform: translateY(1px); }
.cust-btn.primary {
    background: linear-gradient(180deg, #ec4750 0%, #c41f2c 100%);
    color: #fff;
    border-color: #c41f2c;
}
.cust-btn.primary:hover { background: linear-gradient(180deg, #ff5d65 0%, #d62938 100%); }
.cust-btn.primary:disabled { opacity: 0.45; cursor: not-allowed; }
.cust-btn.ghost {
    background: transparent;
    border-color: #2a2a2a;
    color: #d1d1d1;
}
.cust-btn.ghost:hover { background: #111; }
.cust-btn.ghost:disabled { opacity: 0.35; cursor: not-allowed; }
.cust-btn.link {
    background: transparent;
    border: none;
    color: #f4a261;
    padding: 0.25rem 0.5rem;
    min-width: 0;
    font-weight: 500;
}

.cust-cart-summary {
    margin-top: 2rem;
    background: #0a0a0a;
    border: 1px solid #1d1d1d;
    border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem;
}
.cust-cart-summary .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #161616;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}
.cust-cart-summary .head strong { color: #fff; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.cust-cart-summary ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}
.cust-cart-summary li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d8d8d8;
    font-size: 0.92rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #131313;
}
.cust-cart-summary .actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.cust-summary { margin-bottom: 1rem; }
.cust-summary .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-bottom: 1px solid #141414;
}
.cust-summary .row .meta { color: #8a8a8a; font-size: 0.82rem; margin-top: 0.2rem; }
.cust-summary .row .meta .warn { color: #ff8a93; }
.cust-summary .row .price { color: #fff; font-weight: 600; min-width: 80px; text-align: right; }
.cust-summary .total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #2a2a2a;
    font-size: 1.1rem;
}
.cust-summary .total strong { color: #fff; font-size: 1.35rem; }

.cust-error {
    background: rgba(230,57,70,0.14);
    border: 1px solid rgba(230,57,70,0.45);
    color: #ffb1b6;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin: 1rem 0 0;
}

.cust-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #c1c1c1;
}

.cust-pending, .cust-confirmed {
    text-align: center;
    padding: 2rem 1rem 3rem;
    color: #e8e8e8;
}
.cust-pickup-code {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%);
    border: 1px solid #2c2c2c;
    border-radius: 18px;
    padding: 1.2rem 1.5rem;
    display: inline-block;
    margin: 1.25rem 0;
    box-shadow: 0 8px 30px rgba(230,57,70,0.18);
}
.cust-order-items {
    list-style: none;
    padding: 0;
    color: #b9b9b9;
    margin: 1.25rem 0;
}
.cust-pay-total {
    display: inline-flex;
    gap: 0.5rem;
    align-items: baseline;
    background: #0d0d0d;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-top: 0.5rem;
}
.cust-pay-total strong { font-size: 1.3rem; color: #fff; }

@media (max-width: 640px) {
    .cust-pickup-code { font-size: 3rem; }
}

/* Live presence widget in the cashier */
.pos-presence {
    margin: 0.5rem 0.5rem 0.75rem;
    padding: 0.55rem 0.7rem 0.65rem;
    background: #0f0f0f;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
}
.pos-presence .head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pos-presence .head .lbl { flex: 1; }
.pos-presence .head .count {
    color: #f4a261;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0;
}
.pos-presence .head .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #444;
    box-shadow: 0 0 0 2px #0f0f0f;
}
.pos-presence .head .dot.active {
    background: #2ecc71;
    animation: pos-pulse 1.4s ease-in-out infinite;
}
@keyframes pos-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(46,204,113,0);    }
}
.pos-presence .spark {
    margin-top: 0.45rem;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 38px;
}
.pos-presence .spark.empty {
    color: #555;
    font-size: 0.75rem;
    align-items: center;
    justify-content: center;
}
.pos-presence .spark .bar {
    flex: 1;
    min-width: 3px;
    background: linear-gradient(180deg, #f4a261, #b9651e);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}
.pos-prep-item .action { font-weight: 600; color: #2ecc71; font-size: 0.78rem; }
/* ============================================================
   CUSTOMER PORTAL — MOBILE-FIRST OPTIMIZATIONS
   Optimiert für Handys (Hauptzielgruppe) und Tablets.
   ============================================================ */

/* Safe-area + smooth touch behaviour for the public portal */
html, body { -webkit-text-size-adjust: 100%; }
.cust-shell {
    min-height: 100dvh;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overscroll-behavior-y: contain;
}

/* No iOS tap highlight, no double-tap zoom on interactive elements */
.cust-tile, .cust-btn, .cust-brand, .cust-cart-summary .actions button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Larger, finger-friendly tap targets everywhere (Apple HIG / Material: >= 44px) */
.cust-btn { min-height: 48px; }
.cust-tile { min-height: 180px; }

/* Header: lighter on mobile, sticky for orientation */
.cust-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 0.7rem 1rem;
    padding-top: calc(0.7rem + env(safe-area-inset-top));
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    backdrop-filter: saturate(160%) blur(8px);
    background: rgba(8,8,8,0.92);
}
.cust-brand img { height: 38px; width: 38px; }
.cust-brand .brand-name { font-size: 1.05rem; }

/* Main: tighter horizontal padding on phones, leave room for sticky CTA */
.cust-main {
    padding: 1rem 0.9rem calc(7rem + env(safe-area-inset-bottom));
}

/* Tiles: full-bleed feel on mobile, snappy press feedback */
.cust-tile-grid {
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cust-tile-grid.two { gap: 0.7rem; }
.cust-tile { border-radius: 16px; }
.cust-tile:active { transform: scale(0.985); }
.cust-tile .img { min-height: 96px; }
.cust-tile .label { padding: 0.55rem 0.7rem 0.6rem; }
.cust-tile .label strong { font-size: 0.92rem; line-height: 1.2; }
.cust-tile .label em { font-size: 0.72rem; }

/* Sticky bottom action bar: keeps "Weiter" always thumb-reachable */
.cust-nav-row {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 1.25rem -0.9rem 0;
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.92) 25%, #000 100%);
    z-index: 15;
    gap: 0.6rem;
}
.cust-nav-row .cust-btn {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1rem;
    font-size: 1rem;
}
.cust-nav-row .cust-btn.primary { flex: 2; }

/* Wizard headings: more legible on small screens */
.cust-wizard h2 { font-size: 1.15rem; line-height: 1.3; }
.cust-wizard h2.mt { margin-top: 1.5rem; }
.cust-help { font-size: 0.88rem; margin-bottom: 0.9rem; }

/* Cart summary: compact, full-width, scrollable item list */
.cust-cart-summary { padding: 0.85rem 0.9rem 1rem; border-radius: 14px; }
.cust-cart-summary ul {
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cust-cart-summary .actions { gap: 0.5rem; }
.cust-cart-summary .actions .cust-btn { flex: 1; min-width: 0; }

/* Checkout summary rows wrap nicely on phones */
.cust-summary .row { flex-wrap: wrap; gap: 0.4rem; }
.cust-summary .row .price { min-width: 0; }

/* Pickup code — readable from a distance, but not overflowing on tiny screens */
.cust-pickup-code {
    font-size: clamp(2.6rem, 12vw, 4rem);
    letter-spacing: 0.08em;
    padding: 1rem 1.2rem;
    word-break: break-all;
}

/* ----- Phones (default already covers up to 640px) ----- */
@media (max-width: 480px) {
    .cust-tile-grid,
    .cust-tile-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cust-tile-grid.three { grid-template-columns: 1fr 1fr; }
    .cust-tile { min-height: 160px; }
    .cust-tile .img { min-height: 86px; }

    .cust-main { padding: 0.85rem 0.75rem calc(7rem + env(safe-area-inset-bottom)); }
    .cust-brand .brand-sub { display: none; }
    .cust-wizard h2 { font-size: 1.08rem; }

    .cust-nav-row { margin: 1rem -0.75rem 0; padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* Very small phones (iPhone SE, ~360px) */
@media (max-width: 360px) {
    .cust-tile { min-height: 140px; }
    .cust-tile .img { min-height: 74px; }
    .cust-tile .label strong { font-size: 0.85rem; }
    .cust-tile .label em { font-size: 0.68rem; }
}

/* ----- Tablets ----- */
@media (min-width: 641px) and (max-width: 1024px) {
    .cust-main { padding: 1.5rem 1.5rem calc(8rem + env(safe-area-inset-bottom)); max-width: 760px; }
    .cust-tile-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .cust-tile-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cust-tile { min-height: 200px; }
    .cust-tile .img { min-height: 130px; }
    .cust-wizard h2 { font-size: 1.4rem; }
    .cust-nav-row { margin: 1.5rem -1.5rem 0; padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ----- Desktop: drop the sticky bar back to inline (more elegant) ----- */
@media (min-width: 1025px) {
    .cust-nav-row {
        position: static;
        margin: 1.5rem 0 0;
        padding: 0;
        background: none;
    }
    .cust-main { padding: 1.75rem 1.5rem 3rem; }
    .cust-tile { min-height: 220px; }
}

/* Landscape phones — keep the sticky bar slim to preserve vertical space */
@media (max-height: 480px) and (orientation: landscape) {
    .cust-tile { min-height: 130px; }
    .cust-tile .img { min-height: 68px; }
    .cust-header { position: static; }
    .cust-nav-row { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cust-tile, .cust-btn { transition: none !important; }
}
/* --- Vorbestellung (Pre-order) --- */
.cust-badge { display:inline-block; margin-top:.35rem; padding:.15rem .5rem; border-radius:999px; background:rgba(255,193,7,.15); color:#ffc107; font-size:.75rem; font-style:normal; font-weight:600; }
.cust-schedule { margin-top:1rem; padding:1rem; border-radius:.75rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:.5rem; }
.cust-schedule label { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-weight:600; }
.cust-schedule small { color:rgba(255,255,255,.65); }
.cust-input { padding:.6rem .8rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.35); color:#fff; font-size:1.1rem; max-width:160px; }

.pos-pay-card.preorder { border-color:#ffc107; box-shadow:0 0 0 1px rgba(255,193,7,.35) inset; }
.pos-pay-head .preorder-badge { background:rgba(255,193,7,.18); color:#ffc107; padding:.15rem .55rem; border-radius:999px; font-weight:700; font-size:.8rem; }

.cust-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.cust-modal { background:#1a1a1a; border:1px solid rgba(255,255,255,.1); border-radius:1rem; padding:1.5rem; max-width:420px; width:100%; color:#fff; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.cust-modal h3 { margin:0 0 .75rem 0; font-size:1.25rem; }
.cust-modal p { color:rgba(255,255,255,.8); margin:0 0 1.25rem 0; }
.cust-modal-actions { display:flex; gap:.75rem; justify-content:flex-end; flex-wrap:wrap; }

/* ============================================================
   CASHIER / POS — RESPONSIVE LAYOUT
   The 4-column "no-scroll" grid is tuned for desktop and
   landscape tablets. The rules below progressively relax it for
   portrait tablets and phones: the screen stops being a fixed
   100vh canvas and becomes a normally-scrolling, stacked layout
   with finger-friendly tap targets.
   ============================================================ */

/* ----- Portrait tablets / narrow viewports (<= 900px) ----- */
@media (max-width: 900px) {
    .pos-screen {
        /* Drop the locked viewport height so the page can grow and scroll. */
        height: auto;
        min-height: calc(100dvh - var(--sb-topbar-h, 2.25rem));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    /* Columns size to their content; the page scrolls, not each column. */
    .pos-col { overflow: visible; }
    .pos-col-body { overflow-y: visible; }
    .pos-col-cart { overflow-y: visible; }

    /* Larger, touch-friendly controls. */
    .pos-btn { min-height: 2.85rem; font-size: 0.9rem; }
    .pos-add-btn { padding: 0.85rem; font-size: 1rem; }
    .pos-submit-btn { padding: 0.9rem; font-size: 1.05rem; }

    /* The cart submit/clear footer flows naturally under the items on
       small screens (sticky-bottom only makes sense for the desktop
       column-scroll layout). */
    .pos-col-cart .pos-col-footer { position: static; }
    .pos-col-cart .pos-cart-body { flex: 0 0 auto; }

    /* Same reasoning for the "Bestellung aufgeben" button in column 3: the
       column height is no longer fixed here, so the floating/absolute
       placement used on desktop would land unpredictably. Let it flow
       in-line after the configurator content instead. */
    .pos-col-order .pos-submit-btn--floating {
        position: static;
        margin-top: 0.75rem;
        min-height: 4.5rem;
    }
    .pos-col-order .pos-col-body { padding-bottom: 0.5rem; }

    /* Avoid iOS zoom-on-focus (needs >= 16px) for the remark field. */
    .pos-col-footer .form-control { font-size: 16px; }

    /* Open-order rows (Cashier "Offene Bestellungen"): the header info
       (number, serving type, item count, station, badges) and the action
       buttons no longer fit on one line at tablet widths. Let the row wrap
       onto two lines instead of squeezing/overlapping everything: the
       header takes its own full-width line, and the actions flow below it
       with the small icon buttons (✎ edit / 🖨 retry) kept compact while
       the primary "Abholbereit markieren" button grows to fill the rest. */
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-item { flex-wrap: wrap; }
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-item .prep-head { flex: 1 1 100%; }
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-action { flex: 1 1 auto; }
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-action.edit,
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-action.retry-print { flex: 0 0 auto; }
}

/* ----- Phones (<= 600px): one column, everything stacks ----- */
@media (max-width: 600px) {
    .pos-screen {
        --pos-gap: 0.5rem;
        grid-template-columns: 1fr;
    }

    /* Comfortable tap targets (Apple HIG / Material >= 44px). */
    .pos-btn { min-height: 3rem; font-size: 0.95rem; }
    .pos-btn-grid { gap: 0.45rem; }

    /* Step header sticks to the top of its column for orientation. */
    .pos-col-header {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* Prep / ready / pay actions go full width so they're easy to hit. */
    .pos-prep-item { flex-wrap: wrap; }
    .pos-prep-action { width: 100%; }

    /* Kill tap highlight + double-tap zoom on all POS controls. */
    .pos-btn, .pos-add-btn, .pos-submit-btn, .pos-clear-btn,
    .pos-prep-toggle, .pos-prep-action, .pos-pay-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* ----- Landscape phones (short viewport) ----- */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .pos-screen { min-height: 0; }
    .pos-col-body { padding: 0.4rem; }
}

/* ---------------------------------------------------------------
   Fiskalisierung (§ 146a AO) – Statusbanner und Vorgangs-Panel
   --------------------------------------------------------------- */
.pos-fiskal-banner {    
    grid-column: 1 / -1;
    background: #7a2e00;
    color: #ffe9d6;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-bottom: 2px solid #ff8a3d;
}

/* Dauerhafter Hinweis fuer Betriebe ohne aktivierte Fiskalisierung -
   sachlich, nicht alarmierend: das ist ein zulaessiger Betriebsmodus. */
.pos-fiskal-banner.is-info {
    background: #1f3a5f;
    color: #d8e7ff;
    border-bottom-color: #4a86d8;
}

.fiskal-panel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

.fiskal-panel__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fiskal-panel__meta {
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.fiskal-panel__actions {
    display: flex;
    gap: 0.35rem;
}

.fiskal-panel__message {
    font-size: 0.7rem;
}

.fiskal-panel__message--success { color: #7fd18a; }
.fiskal-panel__message--error { color: #ff8080; }

/* --- Storno-Dialog: Pflichtbegründung nach § 146a AO ---------------------- */

.fiskal-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.62);
}

.fiskal-modal {
    width: min(34rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: #1f2430;
    color: #e9edf5;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.55);
}

.fiskal-modal__title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.fiskal-modal__hint {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    opacity: 0.75;
}

.fiskal-modal__reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

/* Große Trefferflächen: der Dialog wird im Stoßbetrieb mit dem Finger bedient. */
.fiskal-reason {
    min-height: 3rem;
    padding: 0.5rem 0.65rem;
    border: 2px solid #3b4353;
    border-radius: 0.5rem;
    background: #272d3a;
    color: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.fiskal-reason:hover { border-color: #5a6478; }

.fiskal-reason--active {
    border-color: #ff8080;
    background: #3a2830;
    font-weight: 600;
}

.fiskal-modal__label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

.fiskal-modal__note {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #3b4353;
    border-radius: 0.5rem;
    background: #272d3a;
    color: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.fiskal-modal__error {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: #ff8080;
}

.fiskal-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.fiskal-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fiskal-badge--ok { background: #1e5c2e; color: #d6ffdf; }
.fiskal-badge--warn { background: #7a2e00; color: #ffe9d6; }

/* ---- Menue-Assistent (Kassenreiter "Menues") ---------------------------- */

.menu-wizard {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 60rem;
    margin: 0 auto;
}

.menu-wizard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.6rem;
}

.menu-wizard__menu {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 7rem;
    padding: 0.75rem;
    text-align: left;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-card);
    color: var(--sb-text);
    cursor: pointer;
}

.menu-wizard__menu:hover { border-color: var(--sb-border-strong); }
.menu-wizard__menu-icon { font-size: 1.6rem; }
.menu-wizard__menu-name { font-weight: 600; }
.menu-wizard__menu-price { color: var(--sb-text-dim); }
.menu-wizard__menu-desc { font-size: 0.82rem; color: var(--sb-text-dim); }

.menu-wizard__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.menu-wizard__title { font-size: 1.15rem; font-weight: 600; }
.menu-wizard__subtitle { color: var(--sb-text-dim); }

.menu-wizard__cancel {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: transparent;
    color: var(--sb-text-dim);
    cursor: pointer;
}

.menu-wizard__slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem;
}

.menu-wizard__slot {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 4.2rem;
    padding: 0.55rem 0.7rem;
    text-align: left;
    border: 1px dashed var(--sb-border-strong);
    border-radius: var(--sb-radius);
    background: transparent;
    color: var(--sb-text-dim);
    cursor: pointer;
}

.menu-wizard__slot--filled {
    border-style: solid;
    background: var(--sb-bg-card);
    color: var(--sb-text);
}

.menu-wizard__slot--active {
    border-color: var(--sb-accent, #e63946);
    color: var(--sb-text);
}

.menu-wizard__slot-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.menu-wizard__slot-value { font-weight: 600; }

.menu-wizard__options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.menu-wizard__option {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 3.6rem;
    padding: 0.5rem 0.7rem;
    text-align: left;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-card);
    color: var(--sb-text);
    cursor: pointer;
}

.menu-wizard__option:hover { border-color: var(--sb-border-strong); }
.menu-wizard__option-name { font-weight: 600; }
.menu-wizard__option-surcharge { font-size: 0.82rem; color: var(--sb-text-dim); }

.menu-wizard__prompt {
    padding: 0.9rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-elev-2);
    color: var(--sb-text-dim);
}

.menu-wizard__prompt--warn { color: var(--sb-warn, #d08700); }

.menu-wizard__primary,
.menu-wizard__confirm {
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--sb-accent, #e63946);
    border-radius: var(--sb-radius);
    background: var(--sb-accent, #e63946);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.menu-wizard__confirm:disabled {
    border-color: var(--sb-border);
    background: var(--sb-bg-card);
    color: var(--sb-text-dim);
    cursor: not-allowed;
}

.menu-wizard__error {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--sb-danger, #e63946);
    border-radius: var(--sb-radius);
    color: var(--sb-danger, #e63946);
}

.menu-wizard__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 3rem 1rem;
    color: var(--sb-text-dim);
}

.menu-wizard__empty-icon { font-size: 2.4rem; }
.menu-wizard__empty-hint { font-size: 0.85rem; }

/* ---- Menue-Konfiguration (Kassenreiter) --------------------------------- */

.menu-config { display: flex; flex-direction: column; gap: 0.8rem; }

.menu-config__toolbar { display: flex; align-items: center; gap: 0.8rem; }

.menu-config__new,
.menu-config__save {
    padding: 0.5rem 1rem;
    border: 1px solid var(--sb-accent, #e63946);
    border-radius: var(--sb-radius);
    background: var(--sb-accent, #e63946);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.menu-config__message { color: var(--sb-text-dim); }
.menu-config__message--error { color: var(--sb-danger, #e63946); }

.menu-config__body {
    display: grid;
    grid-template-columns: minmax(14rem, 20rem) 1fr;
    gap: 1rem;
    align-items: start;
}

.menu-config__list { display: flex; flex-direction: column; gap: 0.35rem; }

.menu-config__entry {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
    text-align: left;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-card);
    color: var(--sb-text);
    cursor: pointer;
}

.menu-config__entry--active { border-color: var(--sb-accent, #e63946); }
.menu-config__entry-name { font-weight: 600; }
.menu-config__entry-meta { font-size: 0.82rem; color: var(--sb-text-dim); }

.menu-config__badge {
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.6rem;
    background: var(--sb-bg-elev-2);
    font-size: 0.72rem;
    color: var(--sb-text-dim);
}

.menu-config__empty { padding: 1rem; color: var(--sb-text-dim); }

.menu-config__editor {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-card);
}

.menu-config__row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }

.menu-config__row label,
.menu-config__full {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
    color: var(--sb-text-dim);
}

.menu-config__full { width: 100%; }

.menu-config__editor input[type="text"],
.menu-config__editor input[type="number"],
.menu-config__editor select {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-elev-2);
    color: var(--sb-text);
}

.menu-config__check {
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem;
}

.menu-config__components { display: flex; flex-direction: column; gap: 0.6rem; }

.menu-config__components-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.menu-config__component {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-elev-2);
}

.menu-config__options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.3rem;
}

.menu-config__option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.88rem;
}

.menu-config__option-price { margin-left: auto; color: var(--sb-text-dim); }
.menu-config__surcharge { width: 5.5rem; }
.menu-config__hint { font-size: 0.82rem; color: var(--sb-text-dim); }

.menu-config__actions { display: flex; gap: 0.6rem; }

.menu-config__actions button,
.menu-config__components-head button,
.menu-config__remove {
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: transparent;
    color: var(--sb-text);
    cursor: pointer;
}

.menu-config__delete { color: var(--sb-danger, #e63946); }

/* ===== Schnellzugriff-Raster (Favoriten) ===== */
.pos-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.pos-tile {
    --pos-tile-color: #2f3542;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.2rem;
    min-height: 3.6rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--pos-tile-color) 60%, transparent);
    border-left: 4px solid var(--pos-tile-color);
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--pos-tile-color) 16%, transparent);
    /* Der Kachelhintergrund ist immer nur eine leichte 16%-Abtönung der
       gewählten Farbe über der hellen Kassenfläche — nie voll gesättigt.
       "color: inherit" holte sich hier zuvor den umgebenden --sb-text, der
       im Dunkelmodus fast weiß ist, und wurde auf dem hellen Kachelgrund
       unlesbar. Feste dunkle Schrift ist auf jeder Abtönung sicher lesbar. */
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
}

.pos-tile:hover { background: color-mix(in srgb, var(--pos-tile-color) 30%, transparent); }
.pos-tile:active { transform: translateY(1px); }

.pos-tile__label { font-weight: 600; font-size: 0.85rem; line-height: 1.15; }
.pos-tile__price { font-size: 0.75rem; opacity: 0.75; font-variant-numeric: tabular-nums; }

/* ===== Konfiguration des Schnellzugriffs ===== */
.pos-layout { padding: 1rem; }
.pos-layout__head h2 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.pos-layout__head p { font-size: 0.85rem; opacity: 0.75; max-width: 46rem; }

.pos-layout__message { margin: 0.6rem 0; padding: 0.5rem 0.75rem; border-radius: 0.35rem; font-size: 0.85rem; }
.pos-layout__message.success { background: rgba(46, 160, 67, 0.18); }
.pos-layout__message.error { background: rgba(220, 53, 69, 0.18); }

.pos-layout__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 0.75rem;
}

@media (max-width: 60rem) {
    .pos-layout__columns { grid-template-columns: minmax(0, 1fr); }
}

.pos-layout__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }

.pos-layout__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.35rem;
}

.pos-layout__badge {
    flex: 0 0 auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
    min-width: 4rem;
}

.pos-layout__name { flex: 1 1 auto; font-weight: 600; font-size: 0.9rem; }
.pos-layout__color { flex: 0 0 auto; width: 2rem; height: 1.8rem; padding: 0; border: none; background: none; cursor: pointer; }
.pos-layout__row .pos-btn { flex: 0 0 auto; min-width: 2.2rem; min-height: 2.2rem; padding: 0 0.4rem; }
.pos-layout__actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* Kassenwahl in der Reiterleiste */
.pos-tabbar__aside { margin-left: auto; display: flex; align-items: center; padding-right: 0.5rem; }

.pos-register-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

.pos-register-picker__select {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 0.3rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
   Digitaler Beleg: Angebot an der Kasse und oeffentliche Belegseite.
   --------------------------------------------------------------------------- */

.receipt-offer {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-top: .5rem;
    padding: .6rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background: #fff;
}

.receipt-offer__qr {
    flex: 0 0 auto;
    image-rendering: pixelated; /* QR-Module muessen hart bleiben, nicht weichgezeichnet */
    border-radius: .25rem;
}

.receipt-offer__body { min-width: 0; }
.receipt-offer__title { font-weight: 600; }
.receipt-offer__hint { font-size: .85rem; color: #6c757d; }

.receipt-offer__url {
    display: block;
    margin: .35rem 0;
    font-size: .75rem;
    color: #495057;
    overflow-wrap: anywhere;
}

.receipt-offer__actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.receipt-offer__state { margin-top: .35rem; font-size: .8rem; color: #198754; }
.receipt-offer__error { margin-top: .35rem; font-size: .8rem; color: #dc3545; }

.receipt-page {
    min-height: 100vh;
    padding: 1rem;
    background: #f1f3f5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.receipt-sheet {
    width: 100%;
    max-width: 26rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    color: #212529;
}

.receipt-head { text-align: center; line-height: 1.35; }
.receipt-head__company { font-size: 1rem; font-weight: 700; }
.receipt-head__line { color: #495057; }

.receipt-storno {
    margin: .75rem 0;
    padding: .4rem;
    text-align: center;
    border: 1px dashed #dc3545;
    border-radius: .25rem;
    color: #dc3545;
}

.receipt-storno__note { font-size: .78rem; }

.receipt-meta {
    display: flex;
    justify-content: space-between;
    margin: .75rem 0 .25rem;
    padding-top: .5rem;
    border-top: 1px dashed #adb5bd;
    color: #495057;
}

.receipt-lines { width: 100%; border-collapse: collapse; }
.receipt-lines td { padding: .12rem 0; vertical-align: top; }
.receipt-lines__qty { width: 2.5rem; }
.receipt-lines__sum { width: 5rem; text-align: right; white-space: nowrap; }
.receipt-lines__marker { margin-left: .25rem; color: #868e96; }

.receipt-row {
    display: flex;
    justify-content: space-between;
    padding: .12rem 0;
}

.receipt-row--total {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px dashed #adb5bd;
    font-size: 1rem;
    font-weight: 700;
}

.receipt-vat {
    width: 100%;
    margin-top: .75rem;
    border-collapse: collapse;
    font-size: .74rem;
}

.receipt-vat th, .receipt-vat td { padding: .12rem .2rem; text-align: right; }
.receipt-vat th:first-child, .receipt-vat td:first-child { text-align: left; }
.receipt-vat thead th { border-bottom: 1px solid #dee2e6; color: #6c757d; }

.receipt-tse {
    margin-top: .9rem;
    padding-top: .6rem;
    border-top: 1px dashed #adb5bd;
    font-size: .72rem;
    color: #495057;
}

.receipt-tse__row { display: flex; justify-content: space-between; gap: .5rem; }
.receipt-tse__mono { overflow-wrap: anywhere; text-align: right; }
.receipt-tse__signature { margin-top: .4rem; overflow-wrap: anywhere; color: #868e96; }
.receipt-tse__warning { color: #dc3545; font-weight: 700; text-align: center; }

.receipt-sheet--empty { text-align: center; font-family: inherit; }
.receipt-empty__title { font-size: 1.15rem; margin-bottom: .5rem; }
.receipt-empty__text { color: #6c757d; font-size: .9rem; margin: 0; }

/* --------------------------------------------------------------------------
   Farbanker der Kasse

   Das gewählte Hauptgericht setzt --pos-accent auf dem Kassenbildschirm; alle
   Folgeschritte (Fleisch, Brot, Zutaten, Soßen) nehmen den Ton auf. Im
   Stoßbetrieb sieht der Bediener damit auf einen Blick, welches Gericht offen
   ist, statt die Zutatenliste des vorigen Döners weiterzuklicken.
   -------------------------------------------------------------------------- */

.pos-btn--dish {
    min-height: 3.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-left: 4px solid var(--pos-dish-color, transparent);
    background: var(--pos-dish-soft, inherit);
}

.pos-btn--dish.active {
    background: var(--pos-dish-color, var(--sb-accent));
    color: var(--pos-dish-text, #fff);
    border-color: var(--pos-dish-color, var(--sb-accent));
}

.pos-btn__icon {
    margin-right: 0.35rem;
    opacity: 0.85;
}

/* Die Einfaerbung haengt an einer eigenen Klasse statt an leeren
   var()-Fallbacks: ohne gepflegte Farbe soll die Kasse exakt so aussehen wie
   bisher, und ein Regelsatz, der nur "manchmal" greift, waere hier eine
   Fehlerquelle im Livebetrieb. */
.pos-screen--accented .pos-btn.active.info,
.pos-screen--accented .pos-btn.active.success {
    background: var(--pos-accent);
    border-color: var(--pos-accent-line);
    color: var(--pos-accent-text);
}

.pos-screen--accented .pos-btn:not(.active):not(.pos-btn--dish):not(.pos-btn--blocked) {
    border-color: var(--pos-accent-line);
}

.pos-screen--accented .pos-group-label {
    border-left: 3px solid var(--pos-accent);
    padding-left: 0.5rem;
}

.pos-screen--accented .pos-col-header {
    box-shadow: inset 0 -2px 0 var(--pos-accent);
}

.pos-btn--blocked,
.pos-btn--blocked:hover {
    opacity: 0.35;
    filter: grayscale(1);
    cursor: not-allowed;
}

.pos-note {
    font-size: 0.78rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.35rem;
    margin-top: 0.4rem;
}

.pos-note--warn {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

/* Fleischauflage im Menü-Konfigurator */
.menu-config__meat {
    margin: 0.5rem 0 0.75rem;
}

.menu-config__meat-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.menu-config__meat-hint {
    font-weight: 400;
    color: var(--sb-text-dim);
}

.menu-config__meat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.menu-config__meat-chip {
    border: 1px solid var(--sb-border, #d0d0d0);
    background: transparent;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.menu-config__meat-chip--on {
    background: var(--sb-accent, #3b82f6);
    border-color: var(--sb-accent, #3b82f6);
    color: #fff;
}

.menu-config__option--blocked {
    opacity: 0.45;
}

.menu-config__option-note {
    font-size: 0.72rem;
    color: #b45309;
}

.menu-config__hint--warn {
    color: #b45309;
}

.menu-wizard__hint {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 0.3rem;
}

/* ============================================================================
   KASSE / POS — UX-Feinschliff (dembrandt Stufen 3–6)

   Reiner Darstellungs-Layer. Alles hier ist ADDITIV und an .pos-shell /
   .pos-screen / die bestehende pos-*-Familie gebunden; keine bestehende Regel,
   kein --sb-*-Token und keine Klasse wird umbenannt oder entfernt. Die Farben
   stammen ausschließlich aus den --sb-*-Tokens, damit die Regeln sowohl auf der
   hellen Kassenfläche (.pos-screen) als auch auf den dunklen Konfig-Panels
   (.pos-workspace__panel) tragen.
   ========================================================================== */

/* -- Zusätzliche POS-Tokens (nur ergänzend zu den --pos-*/--sb-* von oben) -- */
.pos-shell {
    --pos-dur-fast: 0.09s;
    --pos-dur: 0.15s;
    --pos-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --pos-elev-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05);
    --pos-elev-2: 0 10px 28px rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------------------
   Stufe 6 — Barrierefreiheit: sichtbarer Tastaturfokus auf JEDEM Bedienelement
   der Kasse. Bisher gab es keinerlei :focus-visible; Tastaturbedienung im
   Stoßbetrieb war damit blind. Doppelter Ring (flächenfarbener Innenring +
   Akzent-Außenring) bleibt auf jeder Tastenfarbe sichtbar — auch auf den
   akzent-gefüllten aktiven Tasten. outline dient als nicht abschneidbarer
   Rückfall, falls der box-shadow an einer overflow-Kante beschnitten wird.
   -------------------------------------------------------------------------- */
.pos-shell :is(button, [role="button"], a[href], input, select, textarea, .pos-tile):focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--sb-bg-card), 0 0 0 4px var(--sb-accent);
    z-index: 4;
}

/* Maus-/Touch-Bedienung soll den kräftigen Fokusring nicht sehen. */
.pos-shell :is(button, [role="button"], .pos-tile):focus:not(:focus-visible) {
    outline: none;
}

/* --------------------------------------------------------------------------
   Stufe 4 — Komponentenfamilie: vollständige, aus einer gemeinsamen Logik
   abgeleitete Zustände (Ruhe/Hover/Aktiv/Fokus/Deaktiviert/Gesperrt) statt
   ad-hoc pro Taste. Die Grundmaße (Radius, Höhe, Polsterung) der bestehenden
   .pos-btn/.pos-tile bleiben unangetastet — hier kommen nur die fehlenden
   Zustände dazu.
   -------------------------------------------------------------------------- */

/* Gleichmäßiges Übergangsverhalten für die ganze Tastenfamilie. */
.pos-shell .pos-btn,
.pos-shell .pos-tile,
.pos-shell .pos-tabbar__tab,
.pos-shell .pos-add-btn,
.pos-shell .pos-submit-btn,
.pos-shell .pos-clear-btn {
    transition: background-color var(--pos-dur) ease,
                border-color var(--pos-dur) ease,
                box-shadow var(--pos-dur) ease,
                filter var(--pos-dur) ease,
                transform var(--pos-dur-fast) var(--pos-ease);
}

/* Deaktivierte pos-btn (z. B. während des Absendens) eindeutig kennzeichnen. */
.pos-shell .pos-btn:disabled,
.pos-shell .pos-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Kacheln bekamen bisher keinen Übergang — der Hover-Farbwechsel sprang hart. */
.pos-shell .pos-tile:hover { box-shadow: var(--pos-elev-1); }
.pos-shell .pos-tile:active { transform: translateY(1px) scale(0.99); }

/* --------------------------------------------------------------------------
   Gesperrte Gerichte (durch Menü blockiert): bisher nur ein title-Tooltip und
   grau. Das ist im Stoßbetrieb mehrdeutig — „aus" oder „nur gerade nicht"?
   Jetzt unmissverständlich: gestrichelter Rahmen + diagonale Schraffur
   signalisieren „nicht wählbar", der Cursor bleibt not-allowed. Höhere
   Spezifität als die globale .pos-btn--blocked-Regel, aber auf .pos-screen
   begrenzt, damit anderswo nichts kippt.
   -------------------------------------------------------------------------- */
.pos-screen .pos-btn--blocked,
.pos-screen .pos-btn--blocked:hover {
    opacity: 0.55;
    filter: grayscale(1);
    cursor: not-allowed;
    border-style: dashed;
    border-color: var(--sb-border-strong);
    background-image: repeating-linear-gradient(135deg,
        transparent, transparent 6px,
        rgba(0, 0, 0, 0.07) 6px, rgba(0, 0, 0, 0.07) 8px);
    transform: none;
}

/* --------------------------------------------------------------------------
   Stufe 3 — Layout & Gestalt: der Blick soll dem Arbeitsfluss von links nach
   rechts folgen. Die Spalten decken je mehrere Fachschritte ab (Spalte 1 trägt
   1·Produkt / 2·Fleisch / 3·Brot), deshalb wäre eine erfundene Spaltennummer
   irreführend. Stattdessen klare, gemeinsame Regionen: jede Spalte wird leicht
   erhoben (common region) und ihr Kopf bekommt eine dezente Akzent-Unterkante
   als Sektionsabschluss. So liest sich der Bildschirm als vier saubere Zonen in
   natürlicher Lesereihenfolge — ohne farbige Seitenbalken.
   -------------------------------------------------------------------------- */
.pos-screen .pos-col {
    box-shadow: var(--pos-elev-1);
}

/* Sektionsabschluss unter jedem Spaltenkopf. Der bereits vorhandene, kräftigere
   Akzent des .pos-screen--accented-Modus (bei gewähltem Gericht) überschreibt
   diese ruhige Grundvariante gewollt. */
.pos-screen .pos-col-header {
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--sb-accent) 35%, transparent);
}

/* --------------------------------------------------------------------------
   Fiskalstreifen: an die neue __icon/__text-Struktur der Komponente angepasst
   (bündige Ausrichtung). Rein additiv — der Streifen wird nur in der Kasse
   verwendet.
   -------------------------------------------------------------------------- */
.pos-fiskal-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pos-fiskal-banner__icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.pos-fiskal-banner__text { min-width: 0; }

/* --------------------------------------------------------------------------
   Stufe 5 — Politur: dezente Mikrointeraktionen. Gerichte-/Zutatentasten
   bekommen ein spürbares, aber ruhiges Druckfeedback; der Reiterwechsel und
   neu hinzugefügte Warenkorbzeilen blenden sanft ein. Alles kurz und
   funktional — kein Zierrat, der den Bediener aufhält.
   -------------------------------------------------------------------------- */
.pos-shell .pos-btn:active:not(:disabled):not(.pos-btn--blocked) {
    transform: translateY(1px) scale(0.985);
}

@keyframes pos-panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.pos-shell .pos-workspace__panel {
    animation: pos-panel-in var(--pos-dur) var(--pos-ease);
}

@keyframes pos-cart-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.pos-screen .pos-cart-item {
    animation: pos-cart-in var(--pos-dur) var(--pos-ease);
}

/* Erhöhter Modaldialog (Zusatzprodukte) — klare Trennung von der Fläche. */
.pos-shell .modal-dialog .modal-content { box-shadow: var(--pos-elev-2); }

/* --------------------------------------------------------------------------
   Stufe 6 — „prefers-reduced-motion": alle hier ergänzten Bewegungen abschalten,
   Fokusringe und Zustände bleiben erhalten.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pos-shell .pos-workspace__panel,
    .pos-screen .pos-cart-item {
        animation: none;
    }
    .pos-shell .pos-btn,
    .pos-shell .pos-tile,
    .pos-shell .pos-tabbar__tab,
    .pos-shell .pos-add-btn,
    .pos-shell .pos-submit-btn,
    .pos-shell .pos-clear-btn {
        transition: none;
    }
    .pos-shell .pos-btn:active,
    .pos-shell .pos-tile:active {
        transform: none;
    }
}