@import '_content/Shababs.Optimize.Modules.Fiskal/Shababs.Optimize.Modules.Fiskal.tnj9i5yl7u.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-te7o19b8ux] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--sb-bg, #0b0c0f);
    min-height: 100vh;
    color: var(--sb-text, #e8eaed);
}

main[b-te7o19b8ux] {
    flex: 1;
    min-width: 0;
    background: transparent;
}

.sidebar[b-te7o19b8ux] {
    background: linear-gradient(180deg, #0f1115 0%, #0a0b0e 100%);
    border-right: 1px solid var(--sb-border, #2a2e38);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
}

/* Collapsible sidebar (CSS-only, render-mode agnostic) */
.sidebar-toggle-state[b-te7o19b8ux] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.sidebar-toggle-btn[b-te7o19b8ux] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    user-select: none;
    height: 1.7rem;
    padding: 0 0.6rem;
    border: 1px solid var(--sb-border, #2a2e38);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--sb-text-dim, #a1a7b3);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sidebar-toggle-btn:hover[b-te7o19b8ux] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sb-text, #e8eaed);
    border-color: var(--sb-border-strong, #3a3f4b);
}

.sidebar-toggle-icon[b-te7o19b8ux] {
    width: 1.05rem;
    height: 1.05rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232, 234, 237, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.top-row[b-te7o19b8ux] {
    background: rgba(15, 17, 21, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sb-border, #2a2e38);
    justify-content: space-between;
    height: var(--sb-topbar-h, 2.25rem);
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Die Statusleiste steht teils direkt hier (Einrichtungsmodus), teils in
   SystemStatusBar.razor — deshalb jede Regel zweimal: einmal gescopet, einmal
   ueber ::deep fuer die Kindkomponente. */
.top-row-status[b-te7o19b8ux],
.top-row[b-te7o19b8ux]  .top-row-status {
    display: inline-flex;
    align-items: center;
    /* Enger als zuvor: Zwischen den Eintraegen steht ein Mittelpunkt, der die
       Trennung uebernimmt. Grosse Luecken PLUS Trenner waeren doppelt gemoppelt. */
    gap: 0.4rem;
    min-width: 0;
    /* Stoerungen werden nie ausgeblendet (unten) — auf dem Handy koennen sie
       deshalb breiter sein als der Bildschirm. Ohne diese Begrenzung ragen sie
       ueber den rechten Rand, und Chrome weitet den Layout-Viewport auf die
       Inhaltsbreite: die GANZE Seite erschien um ~30 % herausgezoomt, die
       Reiterleiste der Kasse lag unter dem Falz. Jetzt schiebt man die Leiste
       seitwaerts, ohne Balken; ihre Breite bleibt die des Fensters. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sb-text-dim, #a1a7b3);
    letter-spacing: 0.02em;
}

.status-dot[b-te7o19b8ux],
.top-row[b-te7o19b8ux]  .status-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--sb-success, #2ecc71);
    animation: sb-status-pulse-b-te7o19b8ux 2.4s ease-out infinite;
}

.top-row-status[b-te7o19b8ux]::-webkit-scrollbar,
.top-row[b-te7o19b8ux]  .top-row-status::-webkit-scrollbar {
    display: none;
}

/* Der Punkt traegt die schlechteste Lage der ganzen Leiste. Der Betreiber kennt
   ihn schon — jetzt beantwortet er die Frage „laeuft alles?" aus dem Augenwinkel,
   ohne dass dafuer ein zusaetzliches Element noetig waere. */
.top-row[b-te7o19b8ux]  .status-dot--warn {
    background: var(--sb-warning, #f4a261);
    animation-name: sb-status-pulse-warn-b-te7o19b8ux;
}

.top-row[b-te7o19b8ux]  .status-dot--problem {
    background: var(--sb-danger, #e63946);
    animation-name: sb-status-pulse-problem-b-te7o19b8ux;
}

/* Ein Eintrag bleibt Text, keine Plakette: Eine Leiste, die immer bunt ist, wird
   nicht mehr gelesen. Farbe bekommt nur, was nicht stimmt. */
.top-row[b-te7o19b8ux]  .status-item {
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}

.top-row[b-te7o19b8ux]  .status-item--warn {
    color: var(--sb-warning, #f4a261);
    font-weight: 600;
}

.top-row[b-te7o19b8ux]  .status-item--problem {
    color: var(--sb-warn-text, #ff8a93);
    font-weight: 600;
}

/* Anklickbar ist nur, was eine Handlung nach sich zieht — deshalb unterstreicht
   der Verweis erst beim Zeigen und nicht dauerhaft. */
.top-row[b-te7o19b8ux]  a.status-item:hover,
.top-row[b-te7o19b8ux]  a.status-item:focus-visible {
    text-decoration: underline;
}

.top-row[b-te7o19b8ux]  .status-sep {
    color: var(--sb-border-strong, #3a3f4b);
    user-select: none;
}

/* Schmales Fenster: die ruhigen Eintraege treten ab, Stoerungen NIE. Genau das
   macht die Leiste vertrauenswuerdig — was uebrig bleibt, ist immer das Wichtige. */
@media (max-width: 62rem) {
    .top-row[b-te7o19b8ux]  .status-item--ok,
    .top-row[b-te7o19b8ux]  .status-item--ok + .status-sep,
    .top-row[b-te7o19b8ux]  .status-sep:has(+ .status-item--ok) {
        display: none;
    }

    .top-row[b-te7o19b8ux]  .status-item:first-of-type {
        display: inline;
    }
}

@keyframes sb-status-pulse-b-te7o19b8ux {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-success, #2ecc71) 55%, transparent); }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes sb-status-pulse-warn-b-te7o19b8ux {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-warning, #f4a261) 55%, transparent); }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes sb-status-pulse-problem-b-te7o19b8ux {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-danger, #e63946) 65%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Ein blinkender Punkt ist eine Bewegung, die niemand abschalten kann — hier
   schon. Die Farbe traegt die Aussage ohnehin allein. */
@media (prefers-reduced-motion: reduce) {
    .status-dot[b-te7o19b8ux],
    .top-row[b-te7o19b8ux]  .status-dot {
        animation: none;
    }
}

    .top-row[b-te7o19b8ux]  a, .top-row[b-te7o19b8ux]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
        color: var(--sb-text-dim, #a1a7b3);
    }

    .top-row[b-te7o19b8ux]  a:hover, .top-row[b-te7o19b8ux]  .btn-link:hover {
        text-decoration: none;
        color: var(--sb-accent, #e63946);
    }

    .top-row[b-te7o19b8ux]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-te7o19b8ux] {
        justify-content: space-between;
    }
    .top-row[b-te7o19b8ux]  a, .top-row[b-te7o19b8ux]  .btn-link {
        margin-left: 0;
    }
    /* On mobile the NavMenu provides its own hamburger toggler. */
    .sidebar-toggle-btn[b-te7o19b8ux] {
        display: none;
    }
}

@media (min-width: 641px) {
    .page[b-te7o19b8ux] {
        flex-direction: row;
    }
    .sidebar[b-te7o19b8ux] {
        width: 240px;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow: hidden;
        transition: width .22s ease, opacity .22s ease;
    }
    /* Collapsed state: hide the sidebar to free up screen space */
    .sidebar-toggle-state:checked ~ .sidebar[b-te7o19b8ux] {
        width: 0;
        opacity: 0;
        border-right-color: transparent;
        pointer-events: none;
    }
    .top-row[b-te7o19b8ux] {
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .top-row.auth[b-te7o19b8ux]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }
    .top-row[b-te7o19b8ux], article[b-te7o19b8ux] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

#blazor-error-ui[b-te7o19b8ux] {
    color-scheme: dark only;
    background: var(--sb-danger, #e63946);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-te7o19b8ux] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav-brand[b-8epz0g1wfu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--sb-border, #2a2e38);
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sb-accent, #e63946) 14%, transparent), transparent 55%),
        #0a0b0e;
}

.nav-brand img[b-8epz0g1wfu] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--sb-accent, #e63946) 45%, transparent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 3px color-mix(in srgb, var(--sb-accent, #e63946) 14%, transparent);
    transition: box-shadow .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.nav-brand a:hover img[b-8epz0g1wfu] {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 0 3px color-mix(in srgb, var(--sb-accent, #e63946) 30%, transparent);
}

.nav-brand .brand-text[b-8epz0g1wfu] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.nav-brand .brand-name[b-8epz0g1wfu] {
    font-family: var(--sb-font-display, 'Sora', sans-serif);
    font-weight: 600;
    color: var(--sb-text, #e8eaed);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.nav-brand .brand-sub[b-8epz0g1wfu] {
    font-size: 0.62rem;
    color: var(--sb-text-muted, #6c727f);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-top: 2px;
}

.navbar-toggler[b-8epz0g1wfu] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.25rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--sb-border, #2a2e38);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232, 234, 237, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

.nav-section-label[b-8epz0g1wfu] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sb-text-muted, #6c727f);
    padding: 0.85rem 1.25rem 0.35rem;
    font-weight: 600;
}

.bi[b-8epz0g1wfu] {
    display: inline-block;
    flex-shrink: 0;
    margin-right: 0.7rem;
    font-size: 1.1rem;
    opacity: 0.85;
}

.nav-item[b-8epz0g1wfu] {
    font-size: 0.9rem;
    padding: 0 0.6rem;
}

    .nav-item:first-of-type[b-8epz0g1wfu] { padding-top: 0.5rem; }
    .nav-item:last-of-type[b-8epz0g1wfu] { padding-bottom: 0.5rem; }

    .nav-item[b-8epz0g1wfu]  .nav-link {
        color: var(--sb-text-dim, #a1a7b3);
        background: none;
        border: none;
        border-radius: 9px;
        min-height: 2.6rem;
        display: flex;
        align-items: center;
        padding: 0.3rem 0.8rem;
        /* Lange Einträge („Sprachgesteuerte Kasse") brechen um, statt über den
           Nachbarn zu laufen — feste Höhe plus Zeilenhöhe 2,6rem tat genau das. */
        line-height: 1.25;
        text-align: left;
        width: 100%;
        font-weight: 500;
        letter-spacing: -0.01em;
        transition: background .2s ease, color .2s ease, transform .15s ease;
    }

.nav-item[b-8epz0g1wfu]  a.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--sb-accent, #e63946) 26%, transparent), color-mix(in srgb, var(--sb-accent, #e63946) 5%, transparent));
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--sb-accent, #e63946);
}

.nav-item[b-8epz0g1wfu]  a.active .bi {
    opacity: 1;
}

.nav-item[b-8epz0g1wfu]  .nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--sb-text, #e8eaed);
    transform: translateX(2px);
}

hr.text-white-50[b-8epz0g1wfu] {
    border: none;
    border-top: 1px solid var(--sb-border, #2a2e38);
    margin: 0.6rem 1.1rem;
    opacity: 1;
}

.nav-group[b-8epz0g1wfu] {
    margin: 0.15rem 0;
}

/* Gruppentitel im selben Register wie der Eyebrow des Seitenkopfs (Monospace,
   Kapitälchen): Das Wort, das hier steht, steht oben auf jeder Seite der Gruppe
   wieder — so weiß man auf jedem Bildschirm, in welchem Bereich man ist. */
.nav-group-summary[b-8epz0g1wfu] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0.35rem 0.6rem 0;
    padding: 0 0.8rem;
    height: 2.3rem;
    border-radius: 9px;
    color: var(--sb-text-muted, #6c727f);
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}

.nav-group-summary .bi[b-8epz0g1wfu] {
    font-size: 0.95rem;
    opacity: 0.7;
}

.nav-group-summary[b-8epz0g1wfu]::-webkit-details-marker {
    display: none;
}

.nav-group-summary:hover[b-8epz0g1wfu] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--sb-text, #e8eaed);
}

.nav-group-summary .nav-group-title[b-8epz0g1wfu] {
    flex: 1 1 auto;
}

.nav-group-chevron[b-8epz0g1wfu] {
    margin-right: 0 !important;
    opacity: 0.6;
    transition: transform .2s ease;
}

.nav-group[open] > .nav-group-summary .nav-group-chevron[b-8epz0g1wfu] {
    transform: rotate(180deg);
}

.nav-group-items[b-8epz0g1wfu] {
    padding-left: 0.6rem;
}

.nav-group-items .nav-item[b-8epz0g1wfu]  .nav-link {
    min-height: 2.35rem;
    font-size: 0.86rem;
}

.nav-scrollable[b-8epz0g1wfu] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-8epz0g1wfu] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-8epz0g1wfu] {
        display: none;
    }

    .nav-scrollable[b-8epz0g1wfu] {
        display: block;
        height: calc(100vh - 4.2rem);
        overflow-y: auto;
        padding-bottom: 1rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Sichtbarkeit des Reconnect-Overlays.
 *
 * Flach geschrieben, ohne CSS-Nesting: Zielplattform ist unter anderem Chromium M94
 * (Samsung Tizen 7). Nesting kam erst mit M112 — die Vorlage nutzte es, M94 verwarf
 * die Regel, und der Dialog blieb unsichtbar, während sein Backdrop trotzdem die
 * Fläche abdunkelte. Ebenso raus: `transition: display ... allow-discrete` (M117)
 * und alles rund um <dialog>/::backdrop.
 *
 * Die Klassen components-reconnect-{show,retrying,failed,rejected} setzt das
 * Framework; hier wird nur darauf reagiert.
 */

#components-reconnect-modal[b-nzi65jv1qb] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show[b-nzi65jv1qb],
#components-reconnect-modal.components-reconnect-retrying[b-nzi65jv1qb],
#components-reconnect-modal.components-reconnect-failed[b-nzi65jv1qb] {
    display: block;
}

/* Innerhalb des Overlays ist standardmäßig alles versteckt; der jeweilige
   Zustand blendet genau seine Zeile ein. */
.components-reconnect-first-attempt-visible[b-nzi65jv1qb],
.components-reconnect-repeated-attempt-visible[b-nzi65jv1qb],
.components-reconnect-failed-visible[b-nzi65jv1qb] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-nzi65jv1qb],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-nzi65jv1qb],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-nzi65jv1qb] {
    display: block;
}

/* ---------------------------------------------------------------------------
   Interactive: Kasse, Verwaltung, Küchen-Tablet — blockierend, mit Aktion.
   --------------------------------------------------------------------------- */

#components-reconnect-modal[data-profile="interactive"] .reconnect-pill[b-nzi65jv1qb] {
    display: none;
}

#components-reconnect-modal[data-profile="interactive"] .reconnect-scrim[b-nzi65jv1qb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 2000;
}

#components-reconnect-modal[data-profile="interactive"] .reconnect-card[b-nzi65jv1qb] {
    position: fixed;
    inset: 0;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    pointer-events: none;
}

#components-reconnect-modal[data-profile="interactive"] .reconnect-card p[b-nzi65jv1qb] {
    margin: 0;
    padding: 1.25rem 1.75rem;
    max-width: 24rem;
    border-radius: .5rem;
    background: #fff;
    color: #1a1e27;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}

#components-reconnect-modal[data-profile="interactive"] #components-reconnect-button[b-nzi65jv1qb] {
    pointer-events: auto;
    border: 0;
    border-radius: .35rem;
    padding: .5rem 1.5rem;
    font-size: 1rem;
    color: #fff;
    background: #3b6ea2;
    cursor: pointer;
}

#components-reconnect-modal[data-profile="interactive"] #components-reconnect-button:hover[b-nzi65jv1qb] {
    background: #2f5981;
}

/* Sichtbarer Tastaturfokus auf der einzigen Taste des Overlays. :focus-visible
   gibt es seit M86 — auf M94 also in Ordnung. */
#components-reconnect-modal[data-profile="interactive"] #components-reconnect-button:focus-visible[b-nzi65jv1qb] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Countdown und Versuchszähler in der Datenschrift mit Tabellenziffern, damit
   der Text nicht bei jeder Sekunde um eine Ziffernbreite springt. Bewusst ein
   eigener Klassenname statt .sb-num: die Datei soll ohne sb-page.css stehen. */
.reconnect-num[b-nzi65jv1qb] {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Unattended: Wandbildschirme — leise Ecke, nie über dem Inhalt.
   --------------------------------------------------------------------------- */

#components-reconnect-modal[data-profile="unattended"] .reconnect-scrim[b-nzi65jv1qb],
#components-reconnect-modal[data-profile="unattended"] .reconnect-card[b-nzi65jv1qb] {
    display: none;
}

#components-reconnect-modal[data-profile="unattended"] .reconnect-pill[b-nzi65jv1qb] {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 2000;
    /* Der Gast soll die Speisekarte bedienen können, nicht die Pille. Und ein
       Klick darf hier ohnehin nichts auslösen — es steht niemand davor. */
    pointer-events: none;
    max-width: 32rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #cfd6e2;
    font-size: clamp(.75rem, 1vw, 1rem);
    line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   Spinner (nur Interactive)
   --------------------------------------------------------------------------- */

#components-reconnect-modal[data-profile="unattended"] .reconnect-spinner[b-nzi65jv1qb] {
    display: none;
}

.reconnect-spinner[b-nzi65jv1qb] {
    display: none;
    position: relative;
    width: 80px;
    height: 80px;
}

#components-reconnect-modal.components-reconnect-show[data-profile="interactive"] .reconnect-spinner[b-nzi65jv1qb],
#components-reconnect-modal.components-reconnect-retrying[data-profile="interactive"] .reconnect-spinner[b-nzi65jv1qb] {
    display: block;
}

.reconnect-spinner div[b-nzi65jv1qb] {
    position: absolute;
    border: 3px solid #0087ff;
    opacity: 1;
    border-radius: 50%;
    animation: reconnect-ripple-b-nzi65jv1qb 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.reconnect-spinner div:nth-child(2)[b-nzi65jv1qb] {
    animation-delay: -0.5s;
}

@keyframes reconnect-ripple-b-nzi65jv1qb {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* Reduzierte Bewegung: statt der Wellen ein ruhiger, stehender Ring. Der
   Zustand bleibt erkennbar, nur die Dauerbewegung fällt weg. */
@media (prefers-reduced-motion: reduce) {
    .reconnect-spinner div[b-nzi65jv1qb] {
        animation: none;
        top: 10px;
        left: 10px;
        width: 60px;
        height: 60px;
        opacity: .6;
    }

    .reconnect-spinner div:nth-child(2)[b-nzi65jv1qb] {
        display: none;
    }
}
/* /Components/Pages/Analysis/ComparisonPanel.razor.rz.scp.css */
/* Diagramme der Analyse: Stundenbalken und Phasen-Zeitstrahl. Breiten kommen aus
   den Daten (Inline-Style), Farben aus den Theme-Tokens — Manuell = warning,
   Digital = success; Phasen: Warten = warning, Bearbeiten = info, Abholen = success. */

.hourly-chart[b-0k99d9ze98] { display: flex; flex-direction: column; gap: 0.35rem; }
.hour-row[b-0k99d9ze98] { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 0.5rem; }
.hour-lbl[b-0k99d9ze98] { font-size: var(--sb-fs-sm); color: var(--sb-text-dim); }
.bars[b-0k99d9ze98] { display: flex; flex-direction: column; gap: 0.2rem; }
.bar[b-0k99d9ze98] {
    height: 18px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.4rem;
    border-radius: 3px;
    font-family: var(--sb-font-mono);
    font-size: var(--sb-fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #0b0c0f;
}
.bar.manual[b-0k99d9ze98] { background: var(--sb-warning); }
.bar.digital[b-0k99d9ze98] { background: var(--sb-success); }
.bar span[b-0k99d9ze98] { white-space: nowrap; }

.chart-legend[b-0k99d9ze98] { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; font-size: var(--sb-fs-sm); color: var(--sb-text-dim); }
.dot[b-0k99d9ze98] { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }
.dot.manual[b-0k99d9ze98], .dot.seg-wait[b-0k99d9ze98] { background: var(--sb-warning); }
.dot.digital[b-0k99d9ze98], .dot.seg-pickup[b-0k99d9ze98] { background: var(--sb-success); }
.dot.seg-proc[b-0k99d9ze98] { background: var(--sb-info); }

.tl-row[b-0k99d9ze98] { margin-bottom: 0.55rem; }
.tl-row:last-child[b-0k99d9ze98] { margin-bottom: 0; }
.tl-head[b-0k99d9ze98] { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.2rem; }
.tl-label[b-0k99d9ze98] { font-size: var(--sb-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.tl-total[b-0k99d9ze98] { font-family: var(--sb-font-mono); font-size: var(--sb-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sb-text-dim); white-space: nowrap; }
.tl-bar[b-0k99d9ze98] { display: flex; height: 14px; background: var(--sb-bg-elev-2); border-radius: 4px; overflow: hidden; }
.tl-seg[b-0k99d9ze98] { height: 100%; min-width: 2px; flex-shrink: 0; }
.tl-seg.seg-wait[b-0k99d9ze98] { background: var(--sb-warning); }
.tl-seg.seg-proc[b-0k99d9ze98] { background: var(--sb-info); }
.tl-seg.seg-pickup[b-0k99d9ze98] { background: var(--sb-success); }
/* /Components/Pages/Analysis/TrackingPanel.razor.rz.scp.css */
/* Fortschrittsring auf der Kundenkarte: Spur und Beschriftung folgen dem Theme,
   die Ringfarbe selbst kommt aus den Daten (Stufe des Besuchs) und bleibt im Markup. */
.ring-track[b-2aepfe6j5e] { stroke: var(--sb-border-strong); }
.ring-label[b-2aepfe6j5e] { fill: var(--sb-text); }
/* /Components/Pages/Cashier.razor.rz.scp.css */
/* Fiskalisierungs-Hinweisstreifen der Kassenansicht.

   Liegt bewusst hier statt in wwwroot/app.css: der Streifen haengt an der
   Zeilenaufteilung des Kassen-Grids und gehoert damit zu dieser Seite.

   Kernproblem: .pos-screen hat eine feste Hoehe (100vh - Topbar) und keine
   grid-template-rows. Bei align-content: normal (= stretch) verteilt das Grid
   die freie Hoehe gleichmaessig auf alle impliziten Zeilen - die Bannerzeile
   bekam so die Haelfte des Bildschirms. Eine Hoehenbegrenzung am Banner selbst
   hilft nicht, weil die *Zeile* trotzdem so hoch bleibt. Die Zeilen muessen
   daher explizit definiert werden: Banner inhaltshoch, Spalten der Rest. */
.pos-screen.has-fiskal-banner[b-377lleevzj] {
    grid-template-rows: auto minmax(0, 1fr);
}

.pos-screen .pos-fiskal-banner[b-377lleevzj] {
    align-self: start;
    font-size: 0.72rem;
    line-height: 1.15;
    padding: 0.2rem 0.55rem;
    border-radius: var(--sb-radius);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Pages/CatalogManagement.razor.rz.scp.css */
/* Sprachkürzel vor den Übersetzungsfeldern: gleiche Breite, damit die
   Eingaben untereinander bündig stehen. */
.catalog-lang[b-m2744u2h6z] {
    width: 3.5rem;
    justify-content: center;
}

/* /Components/Pages/ExternalSystems/TerminalUiPanel.razor.rz.scp.css */
/* Vorschaubilder der hochgeladenen Medien (Logo, Banner, Attract, Kategorie-Header). */
.terminal-media-preview[b-1ul9tbg71r] { max-height: 7.5rem; }
.terminal-media-preview--sm[b-1ul9tbg71r] { max-height: 6.25rem; }

.kiosk-theme-preview[b-1ul9tbg71r] {
    background: var(--kp-bg);
    border-radius: 24px;
    padding: 1.5rem;
    font-family: var(--kp-font), sans-serif;
    min-height: 220px;
}

.kiosk-theme-preview__surface[b-1ul9tbg71r] {
    background: var(--kp-surface);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-card);
    padding: 1.5rem;
    color: var(--kp-text);
}

.kiosk-theme-preview__title[b-1ul9tbg71r] {
    font-size: 1.5rem;
    font-weight: 800;
}

.kiosk-theme-preview__muted[b-1ul9tbg71r] {
    color: var(--kp-muted);
    margin-top: 0.25rem;
}

.kiosk-theme-preview__btn[b-1ul9tbg71r] {
    background: var(--kp-primary);
    color: var(--kp-primary-text);
    border: none;
    border-radius: var(--kp-radius-btn);
    padding: 0.6rem 1.2rem;
    font-weight: 700;
}

.kiosk-theme-preview__chip[b-1ul9tbg71r] {
    background: color-mix(in srgb, var(--kp-primary) 18%, transparent);
    color: var(--kp-primary);
    border-radius: var(--kp-radius-btn);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.kiosk-theme-preview__success[b-1ul9tbg71r] {
    color: var(--kp-success);
    align-self: center;
    font-weight: 600;
}

.kiosk-theme-preview__danger[b-1ul9tbg71r] {
    color: var(--kp-danger);
    align-self: center;
    font-weight: 600;
}

/* Vorschau des Kategoriesymbols direkt am Eingabefeld: Ein Emoji ist im Textfeld
   winzig, in der Navigationsleiste des Kiosks aber gross. Hier steht es in der
   Groesse, in der es spaeter tatsaechlich wirkt — inklusive des Standardsymbols,
   solange das Feld leer ist. */
.tui-icon-preview[b-1ul9tbg71r] {
    font-size: 1.15rem;
    line-height: 1;
    min-width: 2.75rem;
    justify-content: center;
}
/* /Components/Pages/ForecastAnalysis.razor.rz.scp.css */
/* Fester Zeichenbereich für Chart.js: der Canvas füllt den Rahmen responsiv,
   braucht dafür aber eine Höhe vom Elternelement. */
.forecast-chart[b-poyokn8kls] { position: relative; height: 560px; }
/* /Components/Pages/GuestShop/GuestShopHeroPanel.razor.rz.scp.css */
/* Vorschau des Gast-Shop-Startbilds: Hochformat wie am Handy, damit der Betreiber
   sieht, was der Gast sieht — und nicht ein breit gezogenes Vorschaubild. */
.guest-hero-preview[b-fpwjt7xth3] {
    width: 100%;
    max-width: 12rem;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: var(--sb-radius, 10px);
    border: 1px solid var(--sb-border);
}
/* /Components/Pages/Haccp/HaccpTerminal.razor.rz.scp.css */
/* HACCP-Terminal: Prüfkarten sind Tasten. Der Rahmen trägt den Zustand (überfällig,
   jetzt fällig), erledigte Karten treten zurück. Farben aus den Theme-Tokens. */
.haccp-page[b-6v84qngfyh] { max-width: 70rem; }

.haccp-card[b-6v84qngfyh] { border-width: 2px; cursor: pointer; transition: border-color var(--sb-dur) ease; }
.haccp-card:hover[b-6v84qngfyh], .haccp-card:focus-visible[b-6v84qngfyh] { border-color: var(--sb-border-strong); }
.haccp-card.haccp-overdue[b-6v84qngfyh] { border-color: var(--sb-danger); }
.haccp-card.haccp-due[b-6v84qngfyh] { border-color: var(--sb-warning); }
.haccp-card.haccp-done[b-6v84qngfyh] { opacity: 0.7; }

/* Anleitungen aus der Vorlage enthalten Zeilenumbrüche, die erhalten bleiben sollen. */
.haccp-instructions[b-6v84qngfyh] { white-space: pre-line; }
/* /Components/Pages/Kitchen/BarPicker.razor.rz.scp.css */
/* Anzeige-Leiste-Umschalter (BarPicker.razor) als Register.

   Die globale Pillen-Gestalt (.bar-picker / .bar-picker-btn in
   kitchen-station.css) bleibt für andere Gruppen bestehen; dieser scoped
   Block legt für den Umschalter die Unterstrich-Reiter der Verwaltungsseiten
   (.sb-tabs, sb-page.css) auf dunklen Grund: gleiche Familie, gleiche
   Grammatik — eine Schrift, ein Unterstrich in der Stationsfarbe, kein
   gefüllter Kasten. Scoped-Selektoren schlagen die globalen Regeln über die
   Attribut-Spezifität, ohne sie zu verändern. Keine neuen Farbwerte: Grau-
   töne aus kitchen-station.css, Akzent aus --station-color. */

.bar-picker[b-w09jstkuc4] {
    align-items: stretch;
    gap: 0.15rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #262b34;
    border-radius: 0;
    padding: 0;
}

.bar-picker-btn[b-w09jstkuc4] {
    position: relative;
    margin-bottom: -1px;
    min-height: 2.5rem;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: #8b93a1;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

.bar-picker-btn .bi[b-w09jstkuc4] {
    color: #6f7a8c;
    transition: color .15s ease;
}

.bar-picker-btn:hover[b-w09jstkuc4] {
    background: transparent;
    color: #d6dae2;
    border-bottom-color: #3a4150;
}

.bar-picker-btn:hover .bi[b-w09jstkuc4] {
    color: #aeb6c4;
}

.bar-picker-btn.active[b-w09jstkuc4] {
    background: transparent;
    color: #f4f5f7;
    font-weight: 600;
    border-bottom-color: var(--station-color, #e63946);
}

.bar-picker-btn.active .bi[b-w09jstkuc4] {
    color: var(--station-color, #e63946);
}

@media (prefers-reduced-motion: reduce) {
    .bar-picker-btn[b-w09jstkuc4],
    .bar-picker-btn .bi[b-w09jstkuc4] {
        transition: none;
    }
}
/* /Components/Pages/Kitchen/OrderCard.razor.rz.scp.css */
/* Scoped styles for a single Bestellkarte (OrderCard.razor).

   Moved verbatim out of OrdersOverview.razor.css because Blazor scoped CSS does
   not cross the component boundary: the ".order-*" rules must live next to the
   markup they style. Elevation/radius/motion now flow from the shared --kds-*
   tokens (defined on .station-dashboard in kitchen-station.css) with literal
   fallbacks so the card still renders if it is ever used outside that shell.
   The serving-type pill styles moved to ServingTypeBadge.razor.css. */

.order-card[b-n0ns1vs2i9] {
    /* Schienenfarbe + Tinte der Wartezeit. Neutral, solange nichts eilt; die
       Klassen wait-warn / wait-danger (Schwellen: KitchenOrderPresenter
       .GetWaitUrgencyClass) schalten beide gemeinsam auf amber bzw. rot, und
       nur eine abholbereite Karte bekommt den grünen Streifen — Grün heißt
       „fertig", sonst nichts. */
    --kds-wait-rail: #94a3b8;
    --kds-wait-ink: #475569;

    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    background: #ffffff;
    border: 1px solid #e2e5ea;
    border-radius: var(--kds-radius-card, 0.5rem);
    padding: 0.5rem 0.65rem 0.5rem calc(0.65rem + 4px);
    color: #262b34;
    box-shadow: var(--kds-elev-card, 0 1px 3px rgba(0, 0, 0, 0.18));
}

/* Linker Schienenstreifen — der Bon hängt an der Schiene. Sitzt im Padding-
   Kasten, deshalb Innenradius = Außenradius minus Rahmen. Kein z-index: die
   Brot-Rahmen-Overlay (.order-card-frame) darf ihn überdecken, solange sie
   sichtbar ist; transparent lässt sie ihn durch. */
.order-card[b-n0ns1vs2i9]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--kds-wait-rail);
    border-radius: calc(var(--kds-radius-card, 0.5rem) - 1px) 0 0 calc(var(--kds-radius-card, 0.5rem) - 1px);
    pointer-events: none;
}

.order-card.status-ready[b-n0ns1vs2i9] { --kds-wait-rail: #15803d; }
.order-card.wait-warn[b-n0ns1vs2i9] { --kds-wait-rail: #b45309; --kds-wait-ink: #b45309; }
.order-card.wait-danger[b-n0ns1vs2i9] { --kds-wait-rail: #b91c1c; --kds-wait-ink: #b91c1c; }

/* One-shot entrance so a newly arriving order eases in instead of popping into
   the board — a calm cue that draws the eye to the new ticket without motion
   that lingers. Honoured only when the operator hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .order-card[b-n0ns1vs2i9] {
        animation: kds-card-enter-b-n0ns1vs2i9 var(--kds-motion-base, 200ms) var(--kds-ease, ease-out) both;
    }
}

@keyframes kds-card-enter-b-n0ns1vs2i9 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Status / wait-time rings. Order matters: the wait-time ring is defined after
   the status ring so an overdue order's amber/red frame wins over its plain
   status frame — unchanged from the original board. */
.order-card.status-new[b-n0ns1vs2i9] { box-shadow: 0 0 0 1px #94a3b8 inset; }
.order-card.status-prep[b-n0ns1vs2i9] { box-shadow: 0 0 0 2px #2563eb inset; }
.order-card.status-ready[b-n0ns1vs2i9] { box-shadow: 0 0 0 2px #15803d inset; }

.order-card.wait-warn[b-n0ns1vs2i9] { box-shadow: 0 0 0 2px #b45309 inset; }
.order-card.wait-danger[b-n0ns1vs2i9] { box-shadow: 0 0 0 2px #b91c1c inset; }

/* Small always-visible queue-position badge, overlapping the top-left corner of
   the card frame. Numbered 1..n among orders still waiting to be cooked (a
   "Ready" order no longer competes for a spot). Deliberately a single neutral
   style for every position — the queue order itself (and, when active, the
   "Umsortiert" badge below) already communicates what staff need to know. */
.order-priority-badge[b-n0ns1vs2i9] {
    position: absolute;
    top: -0.55rem;
    left: -0.55rem;
    z-index: 2;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--kds-radius-pill, 999px);
    background: #343b46;
    color: #f4f5f7;
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: calc(1rem * var(--of-font-scale, 1));
    font-weight: 800;
    border: 2px solid #ffffff;
}

/* Flags an order the KI-Sortierung moved out of plain FIFO order (batching or
   gap-filling). Deliberately a calm, distinct accent (indigo) that doesn't
   compete with the red/green/amber status and wait-time signals. */
.order-reordered-badge[b-n0ns1vs2i9] {
    position: absolute;
    top: -0.55rem;
    right: -0.4rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #4f46e5;
    color: #fff;
    border: 2px solid #ffffff;
    border-radius: var(--kds-radius-pill, 999px);
    padding: 0.15rem 0.55rem;
    font-size: calc(0.7rem * var(--of-font-scale, 1));
    font-weight: 700;
    white-space: nowrap;
}

/* Full-card overlay frame: signals the bread/side-dish prep status around the whole
   card border. While preparing, the border shows the same draining countdown ring as
   the toaster slots in the SmartLoadBar/BreadLoadBar (--prep-pct, set inline per item),
   using border-image so it doesn't need to touch the card's own background. No glow/
   blink — once done, the border simply turns solid green. */
.order-card-frame[b-n0ns1vs2i9] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 5px solid transparent;
    pointer-events: none;
    box-sizing: border-box;
}

.order-card-frame.bread-toasting[b-n0ns1vs2i9] {
    border-image: conic-gradient(#ff8800 calc(var(--prep-pct, 0) * 1%), #2a2f38 0) 1;
}

.order-card-frame.bread-done[b-n0ns1vs2i9] {
    border-color: #198754;
}

.order-card-header[b-n0ns1vs2i9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

/* Bestellnummer in der Datenschrift — dieselbe Gestalt wie auf dem Bon, und
   mit Tabellenziffern stehen die Nummern aller Karten im Raster bündig. */
.order-number[b-n0ns1vs2i9] {
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: calc(1.35rem * var(--of-font-scale, 1));
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: #1b1e25;
}

.order-header-badges[b-n0ns1vs2i9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}

.order-badge[b-n0ns1vs2i9] {
    font-size: calc(0.7rem * var(--of-font-scale, 1));
    font-weight: 600;
}

.schedule-badge[b-n0ns1vs2i9] { background: #6f42c1; }

/* Wartezeit = lautestes Signal der Karte. Etikett („WARTET SEIT") leise in
   Mono-Kapitälchen, der Wert so groß wie die Bestellnummer; Tabellenziffern,
   damit „9 Min“ → „10 Min“ nichts verschiebt. Farbe kommt aus --kds-wait-ink,
   das die wait-*-Klassen der Karte oben setzen. */
.order-wait[b-n0ns1vs2i9] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.45rem;
    margin: 0 0 0.4rem;
}

.order-wait-caption[b-n0ns1vs2i9] {
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-size: calc(0.68rem * var(--of-font-scale, 1));
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #667085;
    white-space: nowrap;
}

.order-wait-caption i[b-n0ns1vs2i9] {
    font-size: 1.05em;
    margin-right: 0.1rem;
}

.order-wait-value[b-n0ns1vs2i9] {
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: calc(1.35rem * var(--of-font-scale, 1));
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--kds-wait-ink);
}

/* Gestrichelte Abrisskante zwischen Kopf und Positionen — das einzige
   Gliederungsmotiv des Bons. Innerhalb der Positionen bleiben die Trenner
   feiner, der Fuß hat eine durchgezogene Linie. */
.order-items[b-n0ns1vs2i9] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dashed #b9c0cb;
    padding-top: 0.4rem;
}

.order-item + .order-item[b-n0ns1vs2i9] {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed #e2e5ea;
}

/* Per-dish bread-toast border: used instead of the full-card frame when an order
   has several toast-relevant items so each one's own toaster status is visible. */
.order-item.bread-toasting[b-n0ns1vs2i9],
.order-item.bread-done[b-n0ns1vs2i9] {
    border-radius: var(--kds-radius-sm, 0.375rem);
    padding: 0.35rem 0.4rem;
    margin-left: -0.4rem;
    margin-right: -0.4rem;
    box-sizing: border-box;
}

.order-item.bread-toasting[b-n0ns1vs2i9] {
    border: 3px solid #d7dbe2;
    border-image: conic-gradient(#ff8800 calc(var(--prep-pct, 0) * 1%), #d7dbe2 0) 1;
}

.order-item.bread-done[b-n0ns1vs2i9] {
    border: 3px solid #198754;
}

.order-item-main[b-n0ns1vs2i9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: calc(1.05rem * var(--of-font-scale, 1));
}

.order-item-qty[b-n0ns1vs2i9] {
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #667085;
}

.order-item-name[b-n0ns1vs2i9] {
    font-weight: 800;
    color: #12141a;
}

.order-tag[b-n0ns1vs2i9] {
    font-size: calc(0.85rem * var(--of-font-scale, 1));
    font-weight: 700;
    padding: 0.25em 0.55em;
}

.meat-tag[b-n0ns1vs2i9] { background: #dc3545; }
.spice-tag[b-n0ns1vs2i9] { background: #fd7e14; }
/* Abweichende Fleischportion („Groß · 250 g"): ruhig, damit die Fleischart die Farbe behält. */
.portion-tag[b-n0ns1vs2i9] { background: #475569; font-variant-numeric: tabular-nums; }

.order-item-sub[b-n0ns1vs2i9] {
    font-size: calc(0.95rem * var(--of-font-scale, 1));
    font-weight: 700;
    color: #475569;
    margin-left: 1.6rem;
}

.order-item-exclusion[b-n0ns1vs2i9] { color: #b91c1c; }

.order-item-extra[b-n0ns1vs2i9] { color: #0f6fa3; }

.order-item-note[b-n0ns1vs2i9] {
    font-size: calc(0.9rem * var(--of-font-scale, 1));
    font-weight: 700;
    color: #664d03;
    background: #fff3cd;
    border-radius: 0.25rem;
    padding: 0.1rem 0.4rem;
    margin: 0.2rem 0 0 1.6rem;
    display: inline-block;
}

.order-item-translation[b-n0ns1vs2i9] {
    font-size: calc(0.78rem * var(--of-font-scale, 1));
    font-style: italic;
    color: #0d6efd;
    margin: 0.15rem 0 0 1.6rem;
}

.order-card-footer[b-n0ns1vs2i9] {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid #e2e5ea;
}

/* Footer action buttons (Abholbereit / Abgeholt). Bootstrap paints rest/hover/
   active/disabled already; this only sizes them for a wall screen operated by
   thumb (≥ 3rem tall, full width) and adds the missing keyboard focus ring so
   the footer is fully operable and visible under keyboard/AT navigation. */
.order-action-btn[b-n0ns1vs2i9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    font-size: calc(1rem * var(--of-font-scale, 1));
    font-weight: 700;
    border-radius: var(--kds-radius-sm, 0.375rem);
}

.order-action-btn i[b-n0ns1vs2i9] {
    font-size: 1.15em;
}

.order-action-btn:focus-visible[b-n0ns1vs2i9] {
    outline: none;
    box-shadow: var(--kds-focus-ring, 0 0 0 3px rgba(96, 165, 250, 0.75));
}

/* Per-dish assignment: quick-pick swatches shown right below each dish so a
   preparer claims the specific dish they're making. Sized for a busy,
   fast-paced kitchen where staff can't "aim" precisely. */
.order-item-assign[b-n0ns1vs2i9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0.4rem 0 0 1.6rem;
}

.assign-swatch-sm[b-n0ns1vs2i9] {
    min-width: 3.2rem;
    min-height: 2.4rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.4rem;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    font-size: calc(0.8rem * var(--of-font-scale, 1));
    font-weight: 700;
    transition: filter var(--kds-motion-fast, 120ms) var(--kds-ease, ease),
                transform var(--kds-motion-fast, 120ms) var(--kds-ease, ease);
}

.assign-swatch-sm:hover[b-n0ns1vs2i9] { filter: brightness(1.1); }
.assign-swatch-sm:active[b-n0ns1vs2i9] { transform: scale(0.96); }

/* Complete the interaction set: a clear keyboard focus ring so a preparer can
   tab onto a claim swatch and see exactly which one is targeted (WCAG 2.2 AA). */
.assign-swatch-sm:focus-visible[b-n0ns1vs2i9] {
    outline: none;
    box-shadow: var(--kds-focus-ring, 0 0 0 3px rgba(96, 165, 250, 0.75));
    filter: brightness(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .assign-swatch-sm:active[b-n0ns1vs2i9] { transform: none; }
}

.assign-swatch-sm.assign-blue[b-n0ns1vs2i9] { background: #3a86ff; }
.assign-swatch-sm.assign-purple[b-n0ns1vs2i9] { background: #8338ec; }
.assign-swatch-sm.assign-pink[b-n0ns1vs2i9] { background: #ff006e; }
.assign-swatch-sm.assign-teal[b-n0ns1vs2i9] { background: #06d6a0; }
.assign-swatch-sm.assign-amber[b-n0ns1vs2i9] { background: #ffbe0b; }

/* Once a dish is claimed (individually, or cascaded from the whole order being
   claimed), the swatches are replaced by this tinted background — mirroring the
   whole-order card tint (.order-card.assign-*) — plus a small non-interactive
   label. Double-click/double-tap the dish to release just that one again. */
.order-item.assign-blue[b-n0ns1vs2i9],
.order-item.assign-purple[b-n0ns1vs2i9],
.order-item.assign-pink[b-n0ns1vs2i9],
.order-item.assign-teal[b-n0ns1vs2i9],
.order-item.assign-amber[b-n0ns1vs2i9] {
    border-radius: var(--kds-radius-sm, 0.375rem);
    padding: 0.35rem 0.4rem;
    margin-left: -0.4rem;
    margin-right: -0.4rem;
    box-sizing: border-box;
}

.order-item.assign-blue[b-n0ns1vs2i9] { background: rgba(58, 134, 255, 0.18); }
.order-item.assign-purple[b-n0ns1vs2i9] { background: rgba(131, 56, 236, 0.18); }
.order-item.assign-pink[b-n0ns1vs2i9] { background: rgba(255, 0, 110, 0.16); }
.order-item.assign-teal[b-n0ns1vs2i9] { background: rgba(6, 214, 160, 0.18); }
.order-item.assign-amber[b-n0ns1vs2i9] { background: rgba(255, 190, 11, 0.22); }

/* Solid-color badge (not just a text label) so the employee abbreviation stays
   readable regardless of which translucent tint the row itself has — text
   color comes from GetContrastTextColor() computed against this same solid
   color. */
.order-item-assigned-label[b-n0ns1vs2i9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.3rem 0 0 1.6rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
    font-size: calc(0.75rem * var(--of-font-scale, 1));
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.order-item-assigned-label.assign-blue[b-n0ns1vs2i9] { background: #3a86ff; }
.order-item-assigned-label.assign-purple[b-n0ns1vs2i9] { background: #8338ec; }
.order-item-assigned-label.assign-pink[b-n0ns1vs2i9] { background: #ff006e; }
.order-item-assigned-label.assign-teal[b-n0ns1vs2i9] { background: #06d6a0; }
.order-item-assigned-label.assign-amber[b-n0ns1vs2i9] { background: #ffbe0b; }
/* /Components/Pages/Kitchen/OrdersBoardHeader.razor.rz.scp.css */
/* Kopfleiste der Bestellübersicht (OrdersBoardHeader.razor).

   Das Gerüst (.station-header, .station-title, Picker-Gruppen) kommt global
   aus kitchen-station.css und ist mit StationView geteilt. Hier nur, was die
   Bestellübersicht anders macht: der Titel als Mono-Eyebrow (Geschwister von
   .sb-eyebrow in sb-page.css, aber auf dunklem Grund) sowie Zähler und Uhr in
   der Datenschrift. */

/* Eyebrow: kleine Mono-Kapitälchen mit kurzem Akzentstrich in der
   Stationsfarbe — dieselbe Gestalt wie .sb-eyebrow der Verwaltungsseiten.
   Im eingeklappten Zustand greift die globale Verkleinerung
   (.station-header.collapsed .station-title) unverändert. */
.orders-board-title[b-fy5cj2jqpk] {
    gap: 0.55rem;
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-size: calc(0.8rem * var(--of-font-scale, 1));
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #aeb6c4;
}

.orders-board-title[b-fy5cj2jqpk]::before {
    content: "";
    width: 1.1rem;
    height: 2px;
    background: var(--station-color, #e63946);
    border-radius: 1px;
    flex-shrink: 0;
}

.station-header.collapsed .orders-board-title[b-fy5cj2jqpk]::before {
    width: 0.6rem;
}

.orders-count[b-fy5cj2jqpk] {
    font-size: calc(0.78rem * var(--of-font-scale, 1));
    font-weight: 800;
    background: var(--station-color, #e63946);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    min-width: 1.9rem;
    text-align: center;
}

/* Uhr in der Datenschrift mit Tabellenziffern: eine laufende Sekunde springt
   dann nicht mehr, weil jede Ziffer gleich breit ist. */
.orders-clock[b-fy5cj2jqpk] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: calc(0.9rem * var(--of-font-scale, 1));
    color: #aeb6c4;
    white-space: nowrap;
}

.orders-clock i[b-fy5cj2jqpk] {
    color: #6f7a8c;
}
/* /Components/Pages/Kitchen/OrdersOverview.razor.rz.scp.css */
/* Board-level layout for the Bestellübersicht (OrdersOverview.razor).

   Only the scroll container, the empty-state panel, the responsive card grid
   and the first-load skeleton live here. The header's count/clock moved to
   OrdersBoardHeader.razor.css and every .order-* rule moved to OrderCard.razor.css,
   because Blazor scoped CSS does not cross the component boundary. */

.orders-scroll[b-yuv6qh4do9] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.2rem;
}

/* Leerzustand als „leerer Zettel": gestrichelter Rahmen wie .sb-empty auf den
   Verwaltungsseiten, sonst ruhig — ein Gastraum-/Küchenbildschirm ohne
   Bestellungen soll nicht nach Fehler aussehen. */
.orders-empty[b-yuv6qh4do9] {
    background: #16191f;
    border: 1px dashed #3a4150;
    border-radius: 14px;
    padding: 2.5rem 2rem;
    text-align: center;
    color: #8b93a1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orders-empty i[b-yuv6qh4do9] { color: #3a4150; }
.orders-empty h3[b-yuv6qh4do9] { color: #d6dae2; font-weight: 600; }
.orders-empty p[b-yuv6qh4do9] { margin: 0; }

/* Grid instead of CSS columns: columns fill top-to-bottom within each column
   first (column-major), which stacked new orders vertically in column 1 even
   with free horizontal space. Grid's default row-major auto-flow fills left-to-
   right first, only wrapping to a new row once the current one is full. */
.orders-masonry[b-yuv6qh4do9] {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    align-items: start;
    gap: 0.6rem 0.75rem;
}

@media (min-width: 640px) {
    .orders-masonry[b-yuv6qh4do9] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .orders-masonry[b-yuv6qh4do9] { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1400px) {
    .orders-masonry[b-yuv6qh4do9] { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1800px) {
    .orders-masonry[b-yuv6qh4do9] { grid-template-columns: repeat(5, 1fr); }
}

/* First-load skeleton — shown ONCE while the very first order query resolves
   (guarded by _loading, set false exactly once after OnInitializedAsync). A
   realtime refresh never shows this: it swaps the cards in place. The skeleton
   mirrors the real card grid so the layout does not jump when data arrives. */
.orders-skeleton[b-yuv6qh4do9] {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    align-items: start;
    gap: 0.6rem 0.75rem;
}

@media (min-width: 640px) {
    .orders-skeleton[b-yuv6qh4do9] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .orders-skeleton[b-yuv6qh4do9] { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1400px) {
    .orders-skeleton[b-yuv6qh4do9] { grid-template-columns: repeat(4, 1fr); }
}

.skeleton-card[b-yuv6qh4do9] {
    height: 8.5rem;
    border-radius: var(--kds-radius-card, 0.5rem);
    background: #16191f;
    border: 1px solid #262b34;
    /* Spiegelt den Schienenstreifen der echten Karte (OrderCard), damit beim
       Eintreffen der Daten nichts springt. */
    border-left: 4px solid #262b34;
    position: relative;
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .skeleton-card[b-yuv6qh4do9]::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
        animation: kds-skeleton-shimmer-b-yuv6qh4do9 1.4s ease-in-out infinite;
    }
}

@keyframes kds-skeleton-shimmer-b-yuv6qh4do9 {
    100% { transform: translateX(100%); }
}
/* /Components/Pages/Kitchen/ServingTypeBadge.razor.rz.scp.css */
.order-badge[b-eijj9ddlhf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: calc(0.72rem * var(--of-font-scale, 1));
    font-weight: 700;
    line-height: 1;
    padding: 0.32em 0.6em;
    border-radius: var(--kds-radius-pill, 999px);
    white-space: nowrap;
}

/* "Hier essen" stays the loud, unmissable variant (warm red) because it drives
   the tray/plating decision; "Mitnehmen" is the calmer neutral so the two read
   as a clear pair rather than two competing colours. */
.serving-here[b-eijj9ddlhf] {
    background: var(--kds-serving-here-bg, #fdecec);
    color: var(--kds-serving-here-fg, #b02020);
    box-shadow: inset 0 0 0 1px var(--kds-serving-here-bd, #f3c2c2);
}

.serving-togo[b-eijj9ddlhf] {
    background: var(--kds-serving-togo-bg, #eef1f6);
    color: var(--kds-serving-togo-fg, #3a4a63);
    box-shadow: inset 0 0 0 1px var(--kds-serving-togo-bd, #d3dae6);
}
/* /Components/Pages/Management.razor.rz.scp.css */
/* Management: nur das, was das Seitengerüst (css/sb-page.css) nicht schon abdeckt. */

/* Auslage mit offener Aufgabe: warme Kante statt Glühen — Tabletts auf der Theke
   blenden sonst am Abend. */
.card.border-warning[b-fv7ts895uv] {
    border-color: color-mix(in srgb, var(--sb-warning, #f4a261) 60%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sb-warning, #f4a261) 25%, transparent);
}
/* /Components/Pages/ManagementSettings.razor.rz.scp.css */
/* Einstellungsformulare: ein Formular mit wenigen Feldern wird nicht über die
   volle Bildschirmbreite gezogen — eine Lesebreite wie ein Bon. */
.settings-card[b-x1crsgoesu] { max-width: 44rem; }

/* Zahlenfelder in Tabellen: schmal und rechtsbündig wie die Spalte. */
.settings-num[b-x1crsgoesu],
.recipe-amount[b-x1crsgoesu] { max-width: 8rem; text-align: right; }
.settings-unit[b-x1crsgoesu] { max-width: 8rem; }

/* Hex-Wert der Primärfarbe neben dem Farbwähler. */
.brand-color-input[b-x1crsgoesu] { max-width: 10rem; }

/* Druckvorschau des Logos: weißes „Papier“, Pixel bleiben Pixel. */
.receipt-preview[b-x1crsgoesu] {
    padding: 0.5rem;
    border: 1px solid var(--sb-border, #2a2e38);
    border-radius: var(--sb-radius-sm, 6px);
    background: #fff;
    text-align: center;
}

.receipt-preview img[b-x1crsgoesu] {
    max-width: 100%;
    image-rendering: pixelated;
}

.branding-settings .brand-logo-preview[b-x1crsgoesu] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    border-radius: var(--sb-radius, 14px);
    border: 1px solid var(--sb-border, #2a2e38);
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--brand-color, #e63946) 14%, transparent), transparent 60%),
        var(--sb-bg-elev, #15171c);
    overflow: hidden;
}

.branding-settings .brand-logo-preview img[b-x1crsgoesu] {
    max-height: 110px;
    max-width: 85%;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

.branding-settings .brand-color-chip[b-x1crsgoesu] {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.branding-settings .brand-swatches[b-x1crsgoesu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.branding-settings .brand-swatch[b-x1crsgoesu] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.branding-settings .brand-swatch:hover[b-x1crsgoesu],
.branding-settings .brand-swatch:focus-visible[b-x1crsgoesu] {
    border-color: rgba(255, 255, 255, 0.6);
}

.branding-settings .brand-swatch.selected[b-x1crsgoesu] {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
/* /Components/Pages/OrderHistory.razor.rz.scp.css */
/* Bestellverlauf: Liste links, Detailkarte rechts bleibt beim Scrollen unter der
   Kopfleiste stehen; auf schmalen Geräten rutscht sie unter die Liste. */
.history-detail[b-5ospskekh9] { position: sticky; top: calc(var(--sb-topbar-h, 2.25rem) + 1rem); }
.history-row[b-5ospskekh9] { cursor: pointer; }

@media (max-width: 991.98px) {
    .history-detail[b-5ospskekh9] { position: static; }
}
/* /Components/Pages/Workforce/EmployeeArea.razor.rz.scp.css */
/* Mitarbeiterbereich: schmale Spalte für Tablet und Wandterminal. Eine Breite für
   beide Reiter — vorher hatten Stempeluhr (56rem) und Mitarbeiter-Status (44rem)
   je eine eigene, was unter einer gemeinsamen Reiterleiste bei jedem Wechsel
   gesprungen wäre. Die weitere Zahl gewinnt, weil das Namensraster der Stempeluhr
   sie braucht. */
.employee-area[b-yrjd6klcmy] { max-width: 56rem; }
/* /Components/Pages/Workforce/EmployeeSelfServicePanel.razor.rz.scp.css */
/* „Mein Bereich“: die Seitenbreite steht einmal auf der Sammelseite
   (EmployeeArea.razor.css) und gilt für beide Reiter. */

/* Farbfelder für die Zuweisungsfarbe auf der Kassenübersicht. Die Farben selbst
   sind die Palette aus OrderAssignmentColor (gleich wie in der Küche); der
   gewählte Ring folgt dem Theme, damit er auf dunkler Fläche sichtbar ist. */
.employee-swatch-btn[b-bbu6z6dxti] {
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 999px;
    border: 3px solid transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.employee-swatch-btn.selected[b-bbu6z6dxti] { border-color: var(--sb-text); }
.employee-swatch-btn:disabled[b-bbu6z6dxti] { opacity: 0.35; cursor: not-allowed; }

.employee-swatch-btn.assign-blue[b-bbu6z6dxti] { background: #3a86ff; }
.employee-swatch-btn.assign-purple[b-bbu6z6dxti] { background: #8338ec; }
.employee-swatch-btn.assign-pink[b-bbu6z6dxti] { background: #ff006e; }
.employee-swatch-btn.assign-teal[b-bbu6z6dxti] { background: #06d6a0; }
.employee-swatch-btn.assign-amber[b-bbu6z6dxti] { background: #ffbe0b; }

/* Extra "own color" swatch: a native <input type="color"> transparently
   overlaid on the round swatch button, so clicking it opens the OS/browser
   color picker instead of just toggling a fixed swatch. */
.employee-swatch-custom[b-bbu6z6dxti] {
    position: relative;
    border: 3px solid var(--sb-border-strong);
    color: #333;
    cursor: pointer;
    overflow: hidden;
    margin: 0;
}

.employee-swatch-custom.selected[b-bbu6z6dxti] { border-color: var(--sb-text); }

.employee-swatch-custom-input[b-bbu6z6dxti] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}
/* /Components/Shared/CatalogImageCell.razor.rz.scp.css */
/* Bildzelle als Schalter. Die Maße kommen aus der Katalogverwaltung, in der die Zellen
   bisher standen (32 / 36 / 56 px) — hier zusammengeführt, damit sie nur noch an einer
   Stelle stehen. */
.catalog-image-drop[b-w1kt4n0hkm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 6px;
    background: var(--sb-bg-elev-2, #23262e);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .12s ease, color .12s ease;
}

.catalog-image-drop--sm[b-w1kt4n0hkm] { width: 32px; height: 32px; }
.catalog-image-drop--md[b-w1kt4n0hkm] { width: 36px; height: 36px; }
.catalog-image-drop--lg[b-w1kt4n0hkm] { width: 56px; height: 56px; border-radius: var(--sb-radius-sm, 8px); }

.catalog-image-drop__img[b-w1kt4n0hkm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Der leere Platz ist die Einladung: gestrichelt, damit er als Lücke lesbar bleibt und
   nicht als Bild, das nicht geladen hat. */
.catalog-image-drop--empty[b-w1kt4n0hkm] {
    border: 1px dashed var(--sb-border-strong, #3a3f4b);
    background: transparent;
    color: var(--sb-text-dim, #a1a7b3);
}

.catalog-image-drop:hover[b-w1kt4n0hkm],
.catalog-image-drop:focus-within[b-w1kt4n0hkm] {
    border-color: var(--sb-accent, #e63946);
    color: var(--sb-text, #e8eaed);
}

/* Sichtbarer Tastaturfokus — die Dateiauswahl steckt in einem versteckten Feld, dessen
   Fokus sonst nirgends zu sehen wäre. */
.catalog-image-drop:focus-within[b-w1kt4n0hkm] {
    outline: 2px solid var(--sb-accent, #e63946);
    outline-offset: 2px;
}