/* === Poppins (self-hosted, DSGVO) === */
/* Fonts liegen lokal unter core/web/fonts/ und werden NICHT mehr per Hotlink
   von fonts.googleapis.com/gstatic.com geladen — sonst ginge bei jedem
   Seitenaufruf die Besucher-IP an Google (LG München I, 3 O 17493/20).
   Gewichte 300–800 (800 wird real genutzt, z.B. Hero/QR-Karte), Subsets
   latin + latin-ext (deutsche Umlaute/€ etc.). woff2 v24, font-display: swap. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/poppins-v24-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/poppins-v24-latin-ext-300.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-v24-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-v24-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-v24-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-v24-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-v24-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-v24-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-v24-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-v24-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-v24-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-v24-latin-ext-800.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* === Reset & Base === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #1a1a1a;
    --primary-dark: #000000;
    --bg: #f6f6f4;
    --card: #ffffff;
    --text: #1d1d1f;
    --text-light: #6b7280;
    --border: #e8e8e4;
    /* Warmer Akzent — nur für semantische Highlights (Schärfe-Tag, Tracking-
       Puls, Such-Flash; optional themebar via colorAccent). CTAs hovern seit
       WEB-33 mit aufgehelltem --primary, damit der Hover in der Markenfarbe
       des Tenants bleibt (white-label) statt fix orange zu werden. */
    --accent: #e8552b;
    --accent-soft: #fff1ea;
    /* Deaktiviertes Gericht (WEB-42): Karte eine Spur dunkler als die Seite. */
    --unavailable-bg: #efefeb;
    --unavailable-badge-bg: #e2e2dc;
    --unavailable-badge-text: #4b5563;
    /* Status-Toene (APP-43): Bedeutung vor Branding — gelb wartet, gruen laeuft,
       rot storniert; *-on = Schrift auf dem Ton, *-soft/*-on-soft = getoent.
       Spiegel der App (core/mobile/src/theme/theme.ts statusTone). */
    --tone-waiting: #f59e0b;
    --tone-waiting-on: #422006;
    --tone-waiting-soft: #fef3c7;
    --tone-waiting-on-soft: #92400e;
    --tone-progress: #15803d;
    --tone-progress-on: #ffffff;
    --tone-progress-soft: #dcfce7;
    --tone-progress-on-soft: #166534;
    --tone-cancelled: #dc2626;
    --tone-cancelled-on: #ffffff;
    --tone-cancelled-soft: #fee2e2;
    --tone-cancelled-on-soft: #991b1b;
    --tone-neutral: #6b7280;
    --tone-neutral-on: #ffffff;
    --tone-neutral-soft: #f3f4f6;
    --tone-neutral-on-soft: #4b5563;
    --shadow-sm: 0 1px 2px rgba(20,20,20,.04), 0 1px 3px rgba(20,20,20,.06);
    --shadow: 0 6px 20px rgba(20,20,20,.07);
    --shadow-lg: 0 18px 50px rgba(20,20,20,.14);
    --radius: 16px;
    --topbar-h: 64px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 130px;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* === Fixed Topbar === */
/* Immer sichtbar: Login klebt auf ALLEN Viewports oben rechts. Oben transparent,
   wird beim Scrollen (scrollY > 40) solide + blendet links Logo/Name ein. */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(16px, 4vw, 40px);
    background: transparent;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
    border-bottom: 1px solid transparent;
}

.topbar.scrolled {
    /* Frueher Milchglas (backdrop-filter: blur) — der Blur wird bei JEDEM
       gescrollten Frame neu berechnet und war auf schwaecheren Rechnern eine
       messbare Ruckelquelle (WEB-33). Fast deckendes Weiss sieht praktisch
       identisch aus und kostet beim Scrollen nichts. */
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--border);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;   /* darf schrumpfen, der Name kuerzt sich (WEB-40) */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.topbar.scrolled .topbar-brand {
    opacity: 1;
    transform: none;
}

.topbar-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .04em;
    flex-shrink: 0;
    overflow: hidden;
}

/* Hochgeladenes Logo (WEB-21) ersetzt die Initialen im Mark. */
.topbar-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    /* Lange Namen kuerzen statt Lupe/Konto aus der Leiste zu draengen (WEB-40). */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rechte Gruppe der Kopfleiste: Lupe + Konto (WEB-40). */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}

/* Lupe (WEB-40): erscheint erst, wenn das Suchfeld unter der Info-Karte hinter
   der Leiste verschwunden ist. visibility (statt display) haelt den Platz frei
   — der Konto-Button springt nicht — und nimmt sie trotzdem aus Tab-Reihenfolge
   und Screenreader. */
.topbar-search-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(.85);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s,
        background .2s ease, color .2s ease;
}

.topbar-search-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.topbar-search-btn:hover,
.topbar-search-btn[aria-expanded="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* === User Profile Button (lives inside .topbar, always top-right) === */
.user-btn {
    height: 42px;
    min-width: 42px;
    padding: 0 18px 0 13px;
    border: none;
    cursor: pointer;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    background: #fff;
    color: var(--primary);
    box-shadow: var(--shadow);
    transition: transform .15s ease, background .2s ease, color .2s ease,
                padding .25s ease, gap .25s ease;
}

.user-btn-text {
    white-space: nowrap;
    max-width: 14em;
    overflow: hidden;
    transition: max-width .25s ease, opacity .2s ease;
}

/* Gescrollte Kopfleiste: die Namens-Pille schrumpft zum runden Kopf (wie in
   der App) — sonst bleibt fuer den Restaurantnamen kaum Platz. Der Vorname
   steht nur ueber dem Titelbild; der Screenreader liest ihn weiter vor. */
.topbar.scrolled .user-btn {
    box-shadow: none;
    border: 1px solid var(--border);
    padding: 0;
    gap: 0;
    justify-content: center;
}

.topbar.scrolled .user-btn-text {
    max-width: 0;
    opacity: 0;
}

.user-btn svg {
    width: 19px;
    height: 19px;
}

.user-btn:hover {
    transform: translateY(-1px);
    background: var(--primary);
    color: #fff;
}

.user-btn.logged-in {
    color: #fff;
    background: var(--primary);
}

.user-btn.logged-in:hover {
    background: var(--primary-dark);
}

/* === Auth Modal === */
.auth-modal {
    max-width: 440px;
}

.auth-tabs {
    display: flex;
    background: #f1f1f1;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    color: #888;
    transition: all 0.2s;
}

.auth-tab.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.auth-subtitle {
    color: #6c757d;
    font-size: 0.85rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.auth-switch {
    text-align: center;
    font-size: 0.82rem;
    color: #6c757d;
    margin-top: 16px;
}

.auth-switch a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-switch a:hover,
.auth-switch a:active,
.auth-switch a:focus {
    text-decoration: underline;
}

/* "Passwort vergessen?"-Link – gleiche Optik wie "Jetzt registrieren",
   nur etwas weniger Abstand, damit er als zweite Zeile darunter passt. */
.auth-switch.auth-forgot {
    margin-top: 8px;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    padding: 4px;
    display: flex;
    align-items: center;
}

.password-toggle:hover {
    color: var(--primary);
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .form-group {
    flex: 1;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.profile-email {
    font-size: 0.82rem;
    color: #6c757d;
    margin: 2px 0 0;
}

/* === Profil-Hub: zentrierter Kopf mit grossem Avatar === */
.profile-header-big {
    flex-direction: column;
    text-align: center;
    gap: 0;
    padding-bottom: 20px;
}

.profile-avatar-big {
    width: 88px;
    height: 88px;
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.profile-header-big .profile-name {
    font-size: 1.35rem;
    margin: 0;
}

.profile-header-big .profile-email {
    margin-top: 4px;
}

.profile-userid {
    font-size: 0.75rem;
    color: #999;
    margin: 2px 0 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.05em;
}

/* === Profil-Hub: Menue (Konto / Bestellungen) === */
.profile-menu {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-menu-item {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.profile-menu-item:hover {
    background: #f1f1f1;
    border-color: #d0d0d0;
}

.profile-menu-item:active {
    transform: scale(0.99);
}

.profile-menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text);
}

.profile-menu-icon svg {
    width: 20px;
    height: 20px;
}

.profile-menu-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-menu-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.profile-menu-sub {
    font-size: 0.75rem;
    color: #888;
}

.profile-menu-chevron {
    color: #bbb;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-menu-chevron svg {
    width: 18px;
    height: 18px;
}

/* === Profil-Subview-Header (Zurueck-Button + Titel) === */
.profile-back {
    background: none;
    border: none;
    padding: 0 0 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.profile-back:hover {
    color: var(--primary);
}

.profile-subview-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 20px;
}

/* === Bestellungen-Liste === */
.profile-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-orders-loading,
.profile-orders-empty {
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    padding: 40px 0;
}

.profile-order-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--bg);
}

.profile-order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.profile-order-id {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.78rem;
    color: #666;
}

.profile-order-status {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #eee;
    color: #555;
}

/* Status-Farben wie in der Bestellverfolgung (APP-43): laufend kraeftig,
   erledigt nur getoent — so heben sich Angenommen und Abgeschlossen ab. */
.profile-order-status.status-neu,
.profile-order-status.status-vorbestellung { background: var(--tone-waiting); color: var(--tone-waiting-on); }
.profile-order-status.status-angenommen,
.profile-order-status.status-zubereitung,
.profile-order-status.status-unterwegs,
.profile-order-status.status-fertig        { background: var(--tone-progress); color: var(--tone-progress-on); }
.profile-order-status.status-abgeschlossen { background: var(--tone-progress-soft); color: var(--tone-progress-on-soft); }
.profile-order-status.status-storniert,
.profile-order-status.status-abgelehnt     { background: var(--tone-cancelled-soft); color: var(--tone-cancelled-on-soft); }

.profile-order-meta {
    font-size: 0.78rem;
    color: #888;
    margin-bottom: 10px;
}

.profile-order-items {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 10px;
}

.profile-order-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #e5e5e5;
    padding-top: 10px;
}

.profile-order-total {
    font-weight: 700;
    font-size: 1rem;
}

/* Detail-Bereich der Karte oeffnet die Bestellverfolgung (APP-39, wie die App). */
.profile-order-card {
    transition: border-color 0.15s;
}

.profile-order-card:hover {
    border-color: var(--primary);
}

.profile-order-open {
    cursor: pointer;
    border-radius: 8px;
}

.profile-order-open:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.profile-order-status.status-vorbestellung { background: #fff3cd; color: #856404; }
.profile-order-status.status-abgelehnt     { background: #f8d7da; color: #721c24; }

/* "Erneut bestellen" (APP-39): voller Knopf in Markenfarbe, wie in der App. */
.btn-reorder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    border: none;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-reorder:hover { opacity: 0.9; }
.btn-reorder:disabled { opacity: 0.6; cursor: wait; }

.btn-logout {
    width: 100%;
    padding: 14px;
    background: none;
    border: 2px solid #dc3545;
    color: #dc3545;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-logout:hover {
    background: #dc3545;
    color: white;
}

.gdpr-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.gdpr-heading {
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
}

.gdpr-hint {
    margin: 0 0 12px;
    font-size: 0.75rem;
    color: #666;
    line-height: 1.4;
}

.btn-secondary,
.btn-danger {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.btn-secondary {
    background: none;
    border: 2px solid #6c757d;
    color: #6c757d;
}
.btn-secondary:hover {
    background: #6c757d;
    color: white;
}

.btn-danger {
    background: none;
    border: 2px solid #dc3545;
    color: #dc3545;
}
.btn-danger:hover {
    background: #dc3545;
    color: white;
}

.auth-message {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 14px;
    display: none;
}

.auth-message.error {
    background: #fef2f2;
    color: #dc3545;
}

.auth-message.success {
    background: #f0fdf4;
    color: #16a34a;
}

/* === Hero === */
/* === Hero === */
.hero {
    position: relative;
    min-height: min(58vh, 440px);
    display: flex;
    align-items: flex-end;
    padding: clamp(28px, 7vw, 64px) 0 clamp(70px, 9vw, 96px);
    overflow: hidden;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Fallback ohne hochgeladenes Titelbild (WEB-21): Marken-Verlauf, damit
       der weisse Hero-Text lesbar bleibt. Ein Bild deckt ihn einfach ab. */
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.45) 78%, rgba(0,0,0,.72) 100%);
}

.hero-content {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    color: #fff;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.25);
    padding: 6px 13px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 16px;
    white-space: nowrap;
}

/* Erst mit den Server-Settings sichtbar (WEB-39) — display:inline-flex oben
   ueberstimmt sonst das hidden-Attribut. */
.hero-eyebrow[hidden],
.status-badge[hidden] {
    display: none;
}

.hero-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,.3);
}

.hero-eyebrow.closed .dot {
    background: #f87171;
    box-shadow: 0 0 0 3px rgba(248,113,113,.3);
}

.hero-content h1 {
    font-size: clamp(2.4rem, 6vw, 4.1rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

.hero-content p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 300;
    margin-top: 10px;
    opacity: .96;
    text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

/* Keine aktiven Kanaele (Bestellstopp / Settings noch nicht geladen, WEB-39). */
.hero-chips[hidden] {
    display: none;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.94);
    color: var(--text);
    padding: 9px 15px;
    border-radius: 999px;
    font-size: .83rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}

.hero-chip svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

/* === Shell + Info Card (überlappt Hero) === */
.shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

.info-card {
    position: relative;
    z-index: 5;
    margin-top: -58px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    /* flex-start (nicht center): klappt die Aktions-Spalte die Oeffnungszeiten
       auf, waechst NUR sie in der Hoehe — Logo, Name + Meta bleiben oben stehen
       statt vertikal mitzurutschen. */
    align-items: flex-start;
    gap: 20px;
    padding: 18px 22px;
    flex-wrap: wrap;
}

.info-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    overflow: hidden;
}

.info-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-main {
    flex: 1;
    min-width: 200px;
}

.info-main h2 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.info-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 5px;
    font-size: .86rem;
    color: var(--text-light);
}

.info-meta .sep {
    color: var(--border);
}

/* Trenner nur zwischen sichtbarer Adresse UND sichtbarem Status (WEB-39). */
.info-meta [hidden] + .sep,
.info-meta .sep:has(+ [hidden]) {
    display: none;
}

.info-actions {
    /* Aktionen stehen untereinander (Anrufen oben, Oeffnungszeiten unten).
       FESTE Spaltenbreite statt align-items: stretch: beide Buttons sind
       dadurch immer gleich UND konstant breit — egal ob die Oeffnungszeiten
       auf- oder zugeklappt sind (der Klick verbreitert den Button nicht mehr).
       Die Breite fasst zugleich die breiteste Zeitzeile ("Montag 11:00 – 22:00
       Uhr") ohne Umbruch. */
    display: flex;
    flex-direction: column;
    width: 253px;
    /* Kein flex-gap: der wuerde auch ueber der zugeklappten (max-height:0)
       Tabelle einen 10px-Schlitz reservieren. Abstand Anrufen->Oeffnungszeiten
       traegt btn-call per margin; der Abstand Button->Tabelle steckt in der
       animierten margin-top der Tabelle (0 zu / 10px auf). */
    flex-shrink: 0;
    /* Etwas Abstand zum rechten Kartenrand, damit die Buttons nicht ganz
       aussen kleben (nach links eingerueckt). */
    margin-right: 40px;
}

.btn-call {
    display: inline-flex;
    align-items: center;
    /* Fuellt die Aktions-Spalte (= Breite des Oeffnungszeiten-Buttons) und
       zentriert den Text, damit beide Buttons identisch aussehen. */
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    /* Exakt dieselbe Box wie der "Oeffnungszeiten"-Button: gleiches Padding
       UND ein 1px transparenter Rahmen, damit die Hoehe trotz fehlender
       sichtbarer Border identisch zum bordered <summary> ist. */
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    /* Abstand zum "Oeffnungszeiten"-Button (info-actions traegt keinen gap). */
    margin-bottom: 10px;
    transition: background .2s ease, transform .15s ease;
}

.btn-call:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* Ohne hinterlegte Tenant-Nummer kein Anruf-Button (WEB-39). */
.btn-call[hidden] {
    display: none;
}

.btn-call svg {
    width: 16px;
    height: 16px;
}

/* === Status Badge (im Info-Card-Meta) === */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

.status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

.status-open {
    color: #16a34a;
}

.status-closed {
    color: #dc2626;
}

.status-closed::before {
    box-shadow: 0 0 0 3px rgba(220,38,38,.18);
}

/* === Opening Hours Toggle (als Button im Info-Card) === */
.opening-hours-toggle {
    font-size: .82rem;
}

.opening-hours-toggle summary {
    cursor: pointer;
    list-style: none;
    /* display:flex (statt inline-flex) + zentriert => der sichtbare Button
       fuellt die Aktions-Spalte, exakt gleich breit wie "Anrufen". */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    transition: background .2s ease;
}

.opening-hours-toggle summary::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.opening-hours-toggle summary:hover {
    background: #efefec;
}

.opening-hours-toggle summary::-webkit-details-marker {
    display: none;
}

.opening-hours-table {
    /* Zeile 2 der Info-Karte (flex-basis: 100% erzwingt den Umbruch UNTER Name +
       Buttons), aber per max-width auf eine ruhige Panel-Breite begrenzt und
       links buendig — NICHT ueber die ganze Karte gestreckt. Die Wochentage
       stehen untereinander (je Zeile ein Tag, Zeit rechts). Zugeklappt Hoehe 0
       + unsichtbar; aufgeklappt waechst die Karte nach unten, der restliche
       Seiteninhalt rutscht sanft mit. Da display nicht animierbar ist, laeuft
       das Auf-/Zuklappen ueber max-height + opacity + padding + margin. */
    flex-basis: 100%;
    max-width: 440px;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    padding: 0 20px;
    background: var(--card);
    border-radius: 12px;
    border: 1px solid transparent;
    opacity: 0;
    transition: max-height .3s ease, opacity .22s ease, padding .3s ease,
        margin-top .3s ease, border-color .3s ease;
}

.info-card:has(.opening-hours-toggle[open]) .opening-hours-table {
    /* max-height ist die Animations-Obergrenze (nicht die reale Hoehe): grosszuegig
       ueber dem hoechsten Fall (Handy: 7 Zeilen einspaltig ~245px), damit nie
       etwas abgeschnitten wird. */
    max-height: 300px;
    margin-top: 14px;
    padding: 14px 20px;
    border-color: var(--border);
    opacity: 1;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.82rem;
    color: var(--text-light);
}

.hours-row.hours-today {
    color: var(--text);
    font-weight: 600;
}

.hours-day {
    min-width: 90px;
}

/* === Closed Banner === */
.closed-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 1180px;
    margin: 16px auto 0;
    padding: 12px 20px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

.closed-banner svg {
    flex-shrink: 0;
    color: #dc2626;
}

/* Bestellstopp (SUNMI-8): bewusst kraeftiger als der neutrale
   "gerade geschlossen"-Hinweis. Ausserhalb der Oeffnungszeiten kann der Kunde
   vorbestellen — beim Stopp geht GAR nichts, das darf er nicht ueberlesen.
   Farbton = WDColors.Stopped im Sunmi-Terminal. */
.closed-banner-stop {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    font-weight: 600;
}

.closed-banner-stop svg {
    color: #fff;
}

/* === E-Mail-Bestaetigung (SEC-6) === */
/* Hinweis im Profil, solange die Adresse offen ist. Bewusst in Bernstein
   statt Rot: es ist eine Erinnerung, kein Fehler - gesperrt wird nichts. */
.verify-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.85rem;
}

.verify-banner-text {
    flex: 1 1 200px;
}

.verify-banner-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border: 1px solid #d97706;
    border-radius: 8px;
    background: transparent;
    color: #b45309;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.verify-banner-btn:hover:not(:disabled) {
    background: #d97706;
    color: #fff;
}

.verify-banner-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Kurze Rueckmeldung nach dem Klick auf den Bestaetigungs-Link. Liegt ueber
   allem (auch ueber dem Auth-Modal), weil sie den Erfolg quittiert. */
.verify-notice {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    max-width: min(92vw, 460px);
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.verify-notice-ok {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.verify-notice-warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* === Category Navigation (sticky unter Topbar) === */
.category-nav {
    position: sticky;
    top: var(--topbar-h);
    z-index: 120;
    /* Solide Theme-Hintergrundfarbe statt Milchglas-Blur: die Leiste klebt
       dauerhaft im Viewport, ihr Blur lief sonst bei jedem Scroll-Frame mit
       (Ruckelquelle, WEB-33) — und var(--bg) folgt dem Tenant-Theme, die
       alte rgba-Konstante tat das nicht. */
    background: var(--bg);
    margin-top: 26px;
    border-top: 1px solid transparent;
}

.category-nav-inner {
    display: flex;
    gap: 8px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px clamp(16px, 4vw, 40px);
    overflow-x: auto;
    scrollbar-width: none;
}

.category-nav-inner::-webkit-scrollbar {
    display: none;
}

.cat-link {
    padding: 9px 17px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    transition: all .18s ease;
}

.cat-link:hover {
    border-color: var(--primary);
}

.cat-link.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* === Main Content === */
.main-content {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px clamp(16px, 4vw, 40px) 60px;
}

.menu-container {
    flex: 1;
    min-width: 0;
}

/* === Menu Section === */
.menu-section {
    margin-bottom: 46px;
    scroll-margin-top: 130px;
}

.section-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 4px;
    color: var(--text);
}

.section-desc {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 18px;
    margin-top: 4px;
}

/* === Category Banner Image === */
.section-banner {
    width: 100%;
    height: 160px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}

.section-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

/* === Menu Item (Foto-Thumbnail-Karte) === */
.menu-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    /* Bild rechtsbuendig: Text links, Thumbnail rechts. Ohne Bild (Setting
       "Bilder bei Gerichten" aus, oder Admin-Add-Karte) faellt das Info-Panel
       dank flex:1 einfach auf volle Breite. */
    flex-direction: row-reverse;
    gap: 14px;
    /* Seitlich 16px Luft zum Rahmen, oben/unten knapper: kompakte Karte,
       identisch zur App (WEB-41). */
    padding: 14px 16px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
}

.menu-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* Waehrend des Scrollens keine Hover-Uebergaenge auf den Karten: fahren die
   Karten unterm stehenden Cursor durch, wuerde sonst jede beruehrte Karte
   ihren grossen weichen Schatten ueber die Transition-Dauer animieren (viele
   Repaints pro Sekunde). Sofortiges Umschalten reicht dort voellig — die
   Klasse setzt js/navigation.js#markScrolling (WEB-33). */
body.is-scrolling .menu-item,
body.is-scrolling .item-add {
    transition: none;
}

.item-thumb {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--bg);
}

.item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.item-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 5px;
}

.item-tag {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
}

.item-tag.veg {
    background: #e9f7ec;
    color: #1c8a3c;
}

.item-tag.hot {
    background: var(--accent-soft);
    color: var(--accent);
}

.item-tag.pop {
    background: #fff6e0;
    color: #b97e00;
}

/* Name + Beschreibung je max. zwei Zeilen mit engem Zeilenabstand (statt der
   Body-1.6) — haelt die Karte kompakt wie in der App (WEB-41). */
.item-info h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-info p {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--text-light);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.item-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.item-price .from {
    font-size: .7rem;
    font-weight: 500;
    color: var(--text-light);
    margin-right: 3px;
}

.item-add {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .15s ease, background .2s ease;
}

.menu-item:hover .item-add {
    /* Aufgehelltes --primary statt --accent: Hover bleibt in der Tenant-
       Markenfarbe (WEB-33). Browser ohne color-mix verwerfen die Deklaration
       beim Parsen -> Button bleibt schlicht --primary. */
    background: color-mix(in srgb, var(--primary) 84%, #fff);
}

.item-add:active {
    transform: scale(.9);
}

.item-add svg {
    width: 18px;
    height: 18px;
}

/* === Deaktiviertes Gericht: "Aktuell nicht verfuegbar" (WEB-42) ===
   Bleibt in der Karte (der Kunde sieht, dass es das Gericht gibt), ist aber
   sichtbar aus: dunklere Karte, gedaempfter Text, graues Bild, Status-Pille
   statt (+). Kein Hover-Anheben — die Karte ist nicht klickbar. */
.menu-item.is-unavailable {
    background: var(--unavailable-bg);
    cursor: default;
}

.menu-item.is-unavailable:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.menu-item.is-unavailable .item-info h3,
.menu-item.is-unavailable .item-price {
    color: var(--text-light);
}

.menu-item.is-unavailable .item-info p {
    color: #9ca3af;
}

.menu-item.is-unavailable .item-thumb {
    filter: grayscale(1);
    opacity: .55;
}

/* Neben einem Gericht-Bild ist die Textspalte auf dem Handy zu schmal fuer
   Preis + Pille: dann bricht die Pille in eine eigene Zeile um, statt unter
   das Bild zu ragen. */
.menu-item.is-unavailable .item-foot {
    flex-wrap: wrap;
    row-gap: 6px;
}

.item-unavailable {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--unavailable-badge-bg);
    color: var(--unavailable-badge-text);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* === Cart Sidebar === */
.cart-sidebar {
    width: 352px;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    position: sticky;
    top: calc(var(--topbar-h) + 70px);
    height: fit-content;
    max-height: calc(100vh - var(--topbar-h) - 90px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.cart-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h2 {
    font-size: 1.2rem;
    font-weight: 600;
}

.cart-count {
    background: var(--primary);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
}

.cart-close {
    display: none;
    margin-left: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.cart-close:hover,
.cart-close:focus-visible {
    background: var(--border);
}

.cart-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 290;
}

.cart-backdrop.open {
    display: block;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    max-height: 400px;
}

.cart-empty {
    text-align: center;
    color: var(--text-light);
    padding: 40px 0;
    font-size: 0.9rem;
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg);
}

.cart-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Kopfzeile im Warenkorb: Name links, Grundpreis rechts (Bon-/Mail-Format) */
.cart-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.cart-item-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-item-price {
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--text);
    font-weight: 500;
}

/* Getraenke/Extras je als "+ …"-Zeile unter dem Gericht (Bon-Format). */
.cart-item-opts {
    margin: 2px 0 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cart-item-opt {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--text-light);
    line-height: 1.3;
}

.cart-item-opt-label {
    min-width: 0;
    word-break: break-word;
}

.cart-item-opt-price {
    flex-shrink: 0;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cart-item-controls button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--text);
    position: relative;
    padding: 0;
    /* Inneren Span (das Zeichen "+"/"−") unsichtbar machen,
       wir zeichnen die Striche bullet-genau per Pseudo-Element. */
    font-size: 0;
}

/* Horizontaler Strich = Minus, sowie der waagerechte Teil von Plus */
.cart-item-controls button::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

/* Vertikaler Strich nur fuer Plus-Buttons */
.cart-item-controls button[data-cart-plus]::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 10px;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

.cart-item-controls button:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.cart-item-qty {
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 20px;
    text-align: center;
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid var(--border);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
}

/* === Cart Detail Rows === */
.cart-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-light);
    padding: 2px 0;
}

.cart-free-delivery {
    color: #2d6a4f;
    font-weight: 500;
}

.cart-hint {
    font-size: 0.78rem;
    color: var(--primary);
    text-align: center;
    padding: 4px 0;
    font-weight: 500;
}

.cart-warning {
    font-size: 0.78rem;
    color: #c0392b;
    text-align: center;
    padding: 6px 10px;
    margin: 6px 0;
    background: #fef2f2;
    border-radius: 6px;
    font-weight: 500;
}

/* === PLZ Hint === */
.plz-hint {
    font-size: 0.78rem;
    padding: 6px 10px;
    margin-top: 6px;
    border-radius: 6px;
    font-weight: 500;
}

.plz-valid {
    color: #2d6a4f;
    background: #f0fdf4;
}

.plz-invalid {
    color: #c0392b;
    background: #fef2f2;
}

.form-group input.input-valid {
    border-color: #2d6a4f;
}

/* Hoehere Spezifitaet als die Basis-Border-Regel (deren :not(...)-Selektoren sonst
   border-color schlagen wuerden) + weicher roter Grund, damit ein leeres Pflichtfeld
   klar rot markiert ist (wie in der App). Auch im Fokus bleibt der Rahmen rot — der
   Browser fokussiert beim Absenden gerade das erste fehlende Feld (APP-39). */
.form-group input.input-error:not([type="radio"]):not([type="checkbox"]),
.form-group input.input-error:not([type="radio"]):not([type="checkbox"]):focus {
    border-color: #c0392b;
    background: #fef2f2;
}

/* Inline-Hinweis in der Kasse (z.B. "Sofort" bei geschlossenem/nicht-annehmendem
   Laden) — wie in der App: erscheint direkt unter dem Zeitpunkt-Umschalter,
   nicht erst beim Absenden. */
.checkout-inline-hint {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    color: #c0392b;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
}
.checkout-inline-hint[hidden] {
    display: none;
}
/* Neutraler Hinweis statt Fehler (z.B. "nur Online-Zahlung", PAY-17). */
.checkout-inline-hint.is-info {
    background: var(--bg);
    color: var(--text-light);
}

/* "Liefergebiet: …" unter dem Ort-Feld, aus den Liefer-Zonen (WEB-39). */
.checkout-area-hint {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 4px;
}

.btn-order {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    font-family: inherit;
}

.btn-order:hover {
    /* Wie der .item-add-Hover: aufgehelltes --primary statt Orange (WEB-33). */
    background: color-mix(in srgb, var(--primary) 84%, #fff);
}

/* Gesperrt (Mindestbestellwert nicht erreicht / Bestellstopp): deutlich
   ausgegraut in der Markenfarbe — sobald es passt, wird der Knopf wieder satt
   und signalisiert "jetzt geht's zur Kasse" (WEB-43). */
.btn-order:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-order:disabled:hover {
    background: var(--primary);
}

.btn-clear {
    width: 100%;
    padding: 10px;
    background: transparent;
    color: var(--text-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
    font-family: inherit;
}

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

/* === Floating Phone Button === */
.phone-fab {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.phone-fab:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.phone-fab svg {
    width: 26px;
    height: 26px;
}

/* === Floating Cart Button (Mobile) === */
.cart-fab {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.cart-fab svg {
    width: 24px;
    height: 24px;
}

.fab-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--text);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Bottom Navigation (Mobile, Instagram-style) === */
.bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    z-index: 250;
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    padding: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item svg {
    width: 28px;
    height: 28px;
    transition: transform 0.15s ease;
}

.bottom-nav-item.active svg {
    stroke-width: 2;
}

.bottom-nav-item:active svg {
    transform: scale(0.9);
}

.bottom-nav-badge {
    position: absolute;
    top: 8px;
    left: calc(50% + 10px);
    background: var(--primary);
    color: #fff;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #fff;
    box-sizing: content-box;
    pointer-events: none;
}

.bottom-nav-badge[hidden] {
    display: none;
}

/* === Modal === */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20,20,20,.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

.modal-overlay.show {
    display: flex;
}

.modal {
    background: var(--card);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 28px;
    max-width: 500px;
    width: 100%;
    position: relative;
    /* Transform-basierte Pop-Animation — KEINE opacity-Keyframes, sonst kann
       der Inhalt unsichtbar einfrieren (siehe Design-Vorgabe). */
    animation: pop .24s cubic-bezier(.2,.9,.3,1.2) both;
}

@keyframes pop {
    from { transform: translateY(18px) scale(.97); }
    to   { transform: none; }
}

/* Admin-Bearbeiten-Modals breiter + vertikal zentriert statt klein am oberen
   Rand. `margin: auto` zentriert das Modal im Flex-Overlay in BEIDEN Achsen,
   faellt bei zu hohem Inhalt aber auf 0 zurueck -> das Modal bleibt ueber
   `overflow-y` des Overlays voll scrollbar (kein oben abgeschnittener Kopf,
   deshalb NICHT `align-items: center` am Overlay). Nur `.admin-modal`, damit
   Kunden-Modals (Auth/Tracking/Optionen) unberuehrt bleiben. Die spaeter in
   der Datei definierten Sondermasse (.admin-settings-modal/
   .admin-menu-manage-modal = 880px, .admin-device-pair-modal = 420px) haben
   gleiche Spezifitaet und stehen danach -> sie behalten ihre eigene Breite. */
.admin-modal {
    max-width: 640px;
    margin: auto;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: none;
    background: var(--bg);
    border-radius: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: background 0.2s, color 0.2s;
}

.modal-close:hover {
    background: #ececec;
    color: var(--text);
}

/* Zurueck-Link in verschachtelten Bearbeiten-Modals (WEB-29): fuehrt vom
   Sub-Editor zurueck zum Eltern-Modal (Bearbeiten-Hub bzw. Kategorie-Editor),
   statt das Modal ganz zu schliessen. Liegt im Textfluss ueber der Ueberschrift,
   kollidiert also nicht mit dem absolut positionierten Schliessen-X. */
.modal-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    padding: 4px 0;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.2s;
}

.modal-back:hover {
    color: var(--text);
}

.modal h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text);
}

/* Feld-Titel mit "(optional)" + Info-Knopf (APP-39, wie die App): die
   Erklaerung klappt unter dem Titel auf, statt als Dialog zu stoeren. */
.label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.form-group .label-row label {
    margin-bottom: 0;
}

.label-optional {
    font-weight: 400;
    color: var(--text-light);
}

.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-light);
    cursor: pointer;
}

.info-btn:hover,
.info-btn[aria-expanded="true"] {
    color: var(--primary);
}

.field-hint {
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-light);
    font-size: 0.8rem;
    line-height: 1.45;
}

.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:not([type="radio"]):not([type="checkbox"]):focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.radio-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s;
    text-align: center;
}

.radio-label:hover {
    border-color: var(--primary);
    background: rgba(0,0,0,0.02);
}

.radio-label:has(input:checked) {
    border-color: var(--primary);
    background: rgba(0,0,0,0.04);
    font-weight: 600;
}

.radio-label input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    padding: 0;
    flex: none;
    align-self: center;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-content: center;
    cursor: pointer;
}

.radio-label input[type="radio"]::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
}

.radio-label input[type="radio"]:checked {
    border-color: var(--primary);
}

.radio-label input[type="radio"]:checked::before {
    background: var(--primary);
}

/* === Segment-Toggle (Bestellart + Zeitpunkt) — moderner Umschalter à la App/Lieferando ===
   Bewusst EIGENE Klassen (statt .radio-label zu ueberschreiben), damit dieser Look in
   EINEM Commit steckt und leicht rueckrollbar ist. Die Radios bleiben darunter
   (Formularwerte + JS unveraendert) — nur visuell ein Pillen-Umschalter. */
.segment-toggle {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* .seg-item ist ein <label> -> UNTER .segment-toggle scopen, damit es die Regel
   .form-group label schlaegt (die sonst display:block UND margin-bottom:6px
   vererbt -> das Segment sitzt oben, Luft drunter). margin:0 nimmt genau diesen
   6px-Abstand wieder raus, damit die Pille den Track fuellt = vertikal zentriert. */
.segment-toggle .seg-item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 11px 8px;
    border-radius: calc(var(--radius) - 5px);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    user-select: none;
    transition: color 0.18s, background 0.18s, box-shadow 0.18s;
}
.segment-toggle .seg-item:hover {
    color: var(--primary);
}
/* Radio bleibt fokussierbar (Tastatur), aber unsichtbar. */
.segment-toggle .seg-item input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}
/* Ausgewaehltes Segment: helle Pille in der Marken-/App-Farbe (heller Grund + Markentext). */
.segment-toggle .seg-item:has(input:checked) {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.segment-toggle .seg-item:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* === Bestellart im Warenkorb (WEB-43) ===
   Derselbe Segment-Umschalter wie beim Zeitpunkt in der Kasse, mit Icons;
   sitzt fest unter dem Warenkorb-Kopf (scrollt nicht mit der Liste weg). */
.cart-order-type {
    flex-shrink: 0;
    margin: 14px 20px 0;
}

/* .segment-toggle setzt display:flex und schlaegt damit [hidden]. */
.cart-order-type[hidden] {
    display: none;
}

.cart-order-type .seg-item {
    gap: 8px;
}

.cart-order-type .seg-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Bestellart in der Kasse: nur Anzeige + "Aendern" (zurueck zum Warenkorb). */
.checkout-order-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--text-light);
}

.checkout-order-type strong {
    color: var(--text);
    font-weight: 700;
}

/* Symbol der Bestellart (SVG aus WD.OrderType); die Groesse setzt der jeweilige Ort. */
.order-type-icon {
    display: inline-flex;
}

.checkout-order-type .order-type-icon {
    margin-right: 8px;
    vertical-align: -4px;
    color: var(--text);
}

.checkout-order-type .order-type-icon svg {
    width: 18px;
    height: 18px;
}

.checkout-order-type-change {
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--primary);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* PayPal-Markenschriftzug in der Zahlart-Auswahl (PAY-Politur). aria-label
   "PayPal" am Wrapper -> Screenreader lesen weiterhin "PayPal". */
.pp-logo {
    font-weight: 800;
    font-style: italic;
    font-size: 1.05em;
    letter-spacing: -0.3px;
}
.pp-logo-pay { color: #003087; }
.pp-logo-pal { color: #009cde; }

/* === Mehrstufiger Checkout (PAY-13) === */
.checkout-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 0.8rem;
    color: var(--text-light);
}
.cp-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}
.cp-num {
    display: inline-grid;
    place-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ececec;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 700;
}
.cp-step.active { color: var(--text); }
.cp-step.active .cp-num,
.cp-step.done .cp-num { background: var(--primary); color: #fff; }
.cp-line { flex: 1; height: 2px; background: var(--border); border-radius: 2px; }

.checkout-step[hidden] { display: none; }

/* Zahlart-Karten */
.pay-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.pay-method { display: block; cursor: pointer; }
.pay-method[hidden] { display: none; }
.pay-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.pay-method-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    background: #fff;
}
.pay-method:hover .pay-method-card { border-color: var(--primary); }
/* Gesperrte Zahlart (Bar bei Lieferung aus, PAY-17): sichtbar mit Grund, nicht waehlbar. */
.pay-method.is-disabled { cursor: not-allowed; opacity: 0.55; }
.pay-method.is-disabled:hover .pay-method-card { border-color: var(--border); }
.pay-method:has(input:focus-visible) .pay-method-card { outline: 2px solid var(--primary); outline-offset: 2px; }
.pay-method:has(input:checked) .pay-method-card,
.pay-method.is-selected .pay-method-card {
    border-color: var(--primary);
    background: rgba(0,0,0,0.03);
    box-shadow: 0 0 0 1px var(--primary) inset;
}
.pay-method-logo {
    flex: none;
    width: 46px;
    height: 38px;
    display: grid;
    place-content: center;
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
}
.pay-method-logo .pp-logo { font-size: 0.78rem; }
.pay-method-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pay-method-name { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.pay-method-sub { font-size: 0.78rem; color: var(--text-light); }
.pay-method-check {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    position: relative;
    transition: border-color 0.18s, background 0.18s;
}
.pay-method:has(input:checked) .pay-method-check,
.pay-method.is-selected .pay-method-check {
    border-color: var(--primary);
    background: var(--primary);
}
.pay-method:has(input:checked) .pay-method-check::after,
.pay-method.is-selected .pay-method-check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2.5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pay-logo-stripe { color: #635bff; }
.pay-logo-bar { color: #2d6a4f; }
.pay-logo-karte { color: #2b5797; }

/* Rechtshinweis + Aktionszeile (Zurueck / Zahlungspflichtig bestellen) */
.checkout-legal {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.55;
    margin: 16px 0 14px;
}
.checkout-legal a { color: var(--primary); text-decoration: underline; }
.checkout-actions { display: flex; gap: 10px; align-items: stretch; }
.checkout-actions .btn-back {
    flex: 0 0 auto;
    padding: 14px 18px;
    background: #f1f1f1;
    color: var(--text);
    border: none;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.checkout-actions .btn-back:hover { background: #e4e4e4; }
.checkout-actions .btn-submit { flex: 1; }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Erfolgs-Banner im Tracking-Modal ("Zahlung erfolgreich") */
.pay-success-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #e7f6ec;
    border: 1px solid #b4e0c2;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 4px 0 16px;
}
.pay-success-banner[hidden] { display: none; }
.psb-check {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2d6a4f;
    color: #fff;
    display: grid;
    place-content: center;
}
.psb-text { display: flex; flex-direction: column; gap: 1px; }
.psb-text strong { color: #1b4332; font-size: 0.98rem; }
.psb-text span { color: #2d6a4f; font-size: 0.82rem; }

.order-summary {
    background: var(--bg);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    font-size: 0.85rem;
}

.order-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}
.order-summary-muted { color: var(--text-light); }

/* === Pfand (PAY-20): Hinweis am Gericht / an der Wahl, nie im Preis === */
.item-deposit { margin: 2px 0 0; font-size: .75rem; color: var(--text-light); }
.opt-row-deposit { display: block; font-size: .75rem; font-weight: 400; color: var(--text-light); }
/* Allergene/Zusatzstoffe einer Options-Wahl (WEB-64) — gleiche Optik wie der Pfand. */
.opt-row-food { display: block; font-size: .75rem; font-weight: 400; color: var(--text-light); line-height: 1.35; }
.options-deposit { margin: -8px 0 12px; font-size: .8rem; color: var(--text-light); }

.order-summary-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

.order-summary-opt {
    color: var(--text-light);
    font-size: 0.85rem;
}

/* Mengen-Stepper unter der Position (Schritt 1, APP-39) — Knoepfe wie im Warenkorb. */
.order-summary-qty {
    justify-content: flex-end;
    margin: 4px 0 8px;
}

/* Bestellstopp in der offenen Kasse (SUNMI-8). Gleicher Farbton wie der
   Shop-Balken (.closed-banner-stop), damit der Kunde beides als dieselbe
   Aussage liest. */
.checkout-stop-notice {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    font-weight: 600;
    line-height: 1.45;
}

/* === Order Tabs === */
.order-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    background: #f1f1f1;
    border-radius: 10px;
    padding: 4px;
}

.order-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.order-tab.active {
    background: var(--primary);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.order-tab:not(.active):hover {
    color: var(--text);
    background: rgba(0,0,0,0.05);
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.btn-submit:hover {
    background: var(--primary-dark);
}

/* === Options Modal === */
.option-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

/* === Option groups: radio/checkbox rows (Lieferando-style, WEB-13) === */
.option-group {
    margin-bottom: 18px;
    border-radius: 12px;
    scroll-margin-top: 12px;
    transition: box-shadow .2s, background .2s;
}
.option-group.needs-pick {
    box-shadow: 0 0 0 2px var(--primary, #d62828);
    background: rgba(214, 40, 40, .05);
}
.option-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.option-group-title { font-size: .98rem; font-weight: 700; }
.option-group-check {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: var(--primary, #1a1a1a);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .78rem;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s, transform .2s;
}
.option-group.satisfied .option-group-check { opacity: 1; transform: scale(1); }

.opt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.opt-row:hover { border-color: var(--primary); }
.opt-row.selected { border-color: var(--primary); background: rgba(0, 0, 0, .03); }
.opt-row:has(.opt-input:disabled) { opacity: .5; cursor: not-allowed; }

.opt-input {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    flex: none;
    border: 2px solid var(--border);
    background: #fff;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.opt-input[type="radio"] { border-radius: 50%; }
.opt-input[type="checkbox"] { border-radius: 6px; }
.opt-input::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform .15s;
}
.opt-input[type="checkbox"]::before {
    width: 6px;
    height: 10px;
    margin-top: -2px;
    border-radius: 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    background: transparent;
    transform: rotate(45deg) scale(0);
}
.opt-input:checked { border-color: var(--primary, #1a1a1a); background: var(--primary, #1a1a1a); }
.opt-input[type="radio"]:checked::before { transform: scale(1); }
.opt-input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
.opt-input:disabled { cursor: not-allowed; }

.opt-row-name { flex: 1; font-size: .92rem; font-weight: 500; }
.opt-row-extra { flex: none; font-size: .85rem; font-weight: 600; color: var(--primary, #d62828); }

/* === Größen-Absolutpreis + Allergen-Hinweis im Options-Modal (WEB-14) === */
.opt-row-price { flex: none; font-size: .92rem; font-weight: 700; color: var(--text); }

.options-desc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
.options-desc-text { flex: 1; font-size: .85rem; color: var(--text-light); line-height: 1.4; }
.options-info-btn {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-light);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}
.options-info-btn:hover { border-color: var(--primary); color: var(--primary); }
.options-allergen {
    margin: -6px 0 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, .03);
    border-radius: 10px;
    font-size: .8rem;
    color: var(--text-light);
    line-height: 1.45;
}
.options-allergen[hidden] { display: none; }
.options-allergen a { color: var(--primary); font-weight: 600; }

/* === Produktinfo: Allergene + Zusatzstoffe (WEB-63) === */
.product-info-link {
    align-self: flex-start;
    /* Tippflaeche >= 24px (WCAG 2.5.8) — die Karte drumherum legt sonst bei
       einem knappen Fehltipp sofort in den Warenkorb; Rand gleicht das aus. */
    min-height: 24px;
    margin: -2px 0 2px;
    padding: 4px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .78rem;
    color: var(--text-light);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.product-info-link:hover { color: var(--primary); }
.product-info-list { margin: 0 0 10px; }
.product-info-list dt { font-weight: 600; color: var(--text); margin-top: 6px; }
.product-info-list dt:first-child { margin-top: 0; }
.product-info-list dd { margin: 2px 0 0; color: var(--text-light); }
.product-info-contact { margin: 0; }
.modal-product-info { max-width: 440px; }
.modal-product-info h2 { margin-bottom: 14px; padding-right: 32px; }
.modal-product-info .product-info-list,
.modal-product-info .product-info-contact { font-size: .9rem; line-height: 1.5; }
.modal-product-info .product-info-contact { color: var(--text-light); }
.modal-product-info .product-info-contact a { color: var(--primary); font-weight: 600; }

.options-price {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: right;
    margin: 16px 0;
    color: var(--text);
}

/* Per-item option modal: selection rule + surcharge labels (WEB-5) */
.option-rule {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-light);
}

.option-extra {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary, #d62828);
}

/* === Admin: Bearbeiten-Stift (WEB-29) === */
.admin-item-tools { display: flex; gap: 8px; margin-top: 10px; }

/* EIN neutraler Stift-Button pro Gericht/Kategorie — ersetzt die vielen
   roten Einzel-Chips (Optionen/Bild/MwSt/Löschen). */
.admin-edit-btn,
.admin-cat-edit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0; padding: 7px 13px;
    font-size: 0.78rem; font-weight: 600; font-family: inherit;
    background: #fff; border: 1px solid var(--border, #d6d6d0); color: var(--text, #1d1d1f);
    border-radius: 999px; cursor: pointer;
}
.admin-edit-btn:hover, .admin-cat-edit-btn:hover {
    background: var(--bg, #f6f6f4);
    border-color: #b9b9b2;
}
.admin-item-tools .admin-edit-btn { flex: 1; }
.admin-cat-edit-btn { margin-left: 10px; vertical-align: middle; }

.admin-options-item { font-weight: 500; color: var(--text-light); }

/* Hub-Modal: Einträge nutzen die Dropdown-Optik (.admin-menu-item). */
.admin-edit-hub { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.admin-edit-hub .admin-menu-item { border: 1px solid var(--border, #e8e8e4); }

/* Allergene & Zusatzstoffe je Gericht (WEB-63). Die Labels tragen das
   `.admin-modal`-Praefix (0-2-0), sonst erzwingt die generische
   `.admin-modal label`-Regel (0-1-1) display:block + margin-top + fett. */
.admin-food-info-group {
    border: 1px solid var(--border, #e8e8e4);
    border-radius: 14px;
    padding: 12px 14px 14px;
    margin: 0 0 14px;
}
.admin-food-info-group legend { font-weight: 700; padding: 0 6px; }
.admin-food-info-modes { display: flex; gap: 10px; margin-bottom: 12px; }
.admin-modal .admin-food-info-mode {
    flex: 1; display: flex; gap: 8px; align-items: flex-start; margin: 0;
    padding: 8px 10px; border: 1px solid var(--border, #e8e8e4); border-radius: 10px; cursor: pointer;
}
.admin-food-info-mode small { display: block; color: var(--text-light); font-size: 0.75rem; font-weight: 400; }
.admin-food-info-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.admin-modal .admin-food-info-choice {
    display: flex; gap: 8px; align-items: center; margin: 0;
    font-size: 0.9rem; font-weight: 500; cursor: pointer;
}
.admin-food-info-choice input:disabled + span { color: var(--text-light); opacity: .55; }
@media (max-width: 600px) {
    .admin-food-info-modes { flex-direction: column; }
    .admin-food-info-choices { grid-template-columns: 1fr; }
}

/* MwSt-Auswahl (7% Speise / 19% Getränk) */
.admin-vat-choices { display: flex; gap: 12px; margin-top: 12px; }
.admin-vat-choice {
    flex: 1; padding: 18px 12px; text-align: center;
    background: #fff; border: 2px solid var(--border, #d6d6d0);
    border-radius: 12px; font-family: inherit; cursor: pointer;
}
.admin-vat-choice b { display: block; font-size: 1.3rem; }
.admin-vat-choice small { color: var(--text-light); font-size: 0.8rem; }
.admin-vat-choice.selected {
    border-color: var(--primary, #d62828);
    background: rgba(214, 40, 40, 0.05);
}

/* "Gericht/Kategorie löschen" ganz unten im Editor — bewusst abgesetzt. */
.admin-danger-zone { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border, #e8e8e4); }
.admin-danger-btn {
    width: 100%; padding: 12px;
    background: #fff; color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.5);
    border-radius: 10px; font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.admin-danger-btn:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* Sprung-Button zum geteilten Bild-Editor (Kategorie-Formular) */
.admin-edit-image-btn {
    display: block; width: 100%; padding: 12px;
    background: #fff; border: 1px solid #ddd; color: var(--text, #1d1d1f);
    border-radius: 10px; font-family: inherit; font-size: 0.95rem; cursor: pointer;
}
.admin-edit-image-btn:hover { background: var(--bg, #f6f6f4); }

body:not(.admin-mode) .admin-item-tools,
body.order-mode .admin-item-tools { display: none; }

/* Bild-URL + Hochladen + Vorschau (in den Modals) */
.admin-image-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-image-field .admin-img-url { flex: 1 1 180px; }

.admin-img-upload-btn {
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.85rem;
    background: #fff;
    border: 1px solid var(--primary, #d62828);
    color: var(--primary, #d62828);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.admin-img-upload-btn:hover { background: rgba(214, 40, 40, 0.08); }
.admin-img-upload-btn:disabled { opacity: 0.6; cursor: default; }

.admin-img-preview {
    width: 100%;
    max-height: 140px;
    object-fit: contain;
    border: 1px solid var(--border, #e5e3da);
    border-radius: 8px;
    background: #faf9f6;
}

.admin-img-remove-btn {
    flex: 1;
    padding: 13px;
    border: 1px solid rgba(220, 38, 38, .45);
    border-radius: 12px;
    background: #fff;
    color: #b91c1c;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.admin-img-remove-btn:hover { background: rgba(220, 38, 38, .05); }

.admin-options-hint {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 8px 0 16px;
}

.admin-opt-group {
    border: 1px solid var(--border, #e8e8e4);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    margin-bottom: 12px;
    counter-increment: optgroup;
}

#adminOptionGroups { counter-reset: optgroup; }

.admin-opt-group-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.admin-opt-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #b91c1c;
}

.admin-opt-eyebrow::after { content: " " counter(optgroup); }

.admin-opt-remove-group {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
    color: #999;
    font-size: 1rem;
    cursor: pointer;
}

.admin-fld {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-light, #6b7280);
    margin-bottom: 10px;
}

.admin-fld input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid #e2e1dc;
    border-radius: 10px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.admin-fld small {
    display: block;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: .7rem;
    color: #a3a29c;
    margin-top: 4px;
}

.admin-opt-minmax { display: flex; gap: 10px; align-items: flex-start; }
/* Keep both captions on a single line and reset the global `.admin-modal label`
   margin-top (which only `:first-of-type` clears) so both columns top-align. */
.admin-opt-minmax .admin-fld { flex: 1; margin-top: 0; white-space: nowrap; }

.admin-fld-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-light, #6b7280);
    margin: 4px 0 8px;
}

.admin-opt-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-opt-choice {
    border: 1px solid #efeeea;
    border-radius: 12px;
    padding: 10px;
    background: #fafaf8;
}

.admin-opt-choice-main { display: flex; gap: 8px; }
.admin-opt-choice-main .admin-opt-choice-name { flex: 1; min-width: 0; }
.admin-opt-choice-main .admin-opt-choice-price { width: 92px; flex: none; text-align: right; }

.admin-opt-choice-main input {
    padding: 10px 12px;
    border: 1px solid #e2e1dc;
    border-radius: 10px;
    font-family: inherit;
    font-size: .9rem;
    box-sizing: border-box;
}

.admin-opt-choice-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.admin-opt-default {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: #555;
}

.admin-opt-choice .admin-opt-remove {
    border: none;
    background: none;
    color: #b91c1c;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px;
}

.admin-opt-add-choice,
.admin-add-group-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    padding: 11px;
    border: 1.5px dashed #d4d3cd;
    border-radius: 12px;
    background: none;
    text-align: center;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-light, #6b7280);
    cursor: pointer;
}

.admin-opt-add-choice { color: #1d6fdc; }
.admin-add-group-btn { margin-top: 0; }

/* === Optionen-Bibliothek + Editor (WEB-13) === */
/* BUGFIX: die generische `.admin-modal input[type=...]`-Regel (Spezifitaet
   0-2-1, weiter unten) ueberschrieb width + padding der Choice-Felder — das
   Preis-Feld bekam width:100% + flex:none und frass die Zeile, das Name-Feld
   kollabierte auf 0px (man konnte nichts tippen). Diese `.admin-modal`-
   praefixierten Regeln (0-3-x) gewinnen wieder + machen die Felder kompakter. */
/* Kompakte Höhe: `#adminGroupEditBody`-Scope (ID, 1-x-x) schlaegt die generische
   `.admin-modal input[type=...]`-Regel (0-2-1) sicher — sonst bleiben 14px
   Padding (Felder zu hoch). */
#adminGroupEditBody input[type="text"],
#adminGroupEditBody input[type="number"] {
    padding: 7px 10px;
    font-size: .9rem;
}
.admin-modal .admin-opt-choice-main .admin-opt-choice-name { flex: 1; min-width: 0; width: auto; }
.admin-modal .admin-opt-choice-main .admin-opt-choice-price { width: 96px; flex: none; text-align: right; }
/* Pfand je Wahl (PAY-20) in der Fusszeile der Wahl — Praefix gegen die generische .admin-modal label-Regel. */
.admin-modal .admin-opt-deposit {
    display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: .85rem; font-weight: 500; color: var(--text-light);
}
.admin-modal .admin-opt-deposit input { width: 76px; padding: 5px 8px; text-align: right; }
/* Allergene/Zusatzstoffe je Wahl (WEB-64): Knopf mit Kurzstand in der Fusszeile,
   die Haekchen (Bausteine aus WEB-63) klappen darunter auf. */
.admin-opt-choice-foot { flex-wrap: wrap; gap: 6px 12px; }
.admin-opt-food-toggle {
    border: none; background: none; padding: 4px 0; cursor: pointer; text-align: left;
    font-family: inherit; font-size: .8rem; font-weight: 600; color: #1d6fdc;
}
.admin-opt-food { margin-top: 10px; }
.admin-opt-food .admin-food-info-group { margin-bottom: 10px; background: #fff; }
/* Choice-Zeilen etwas kompakter. */
.admin-opt-choice { padding: 8px; }
/* Dezenter Hinweis neben einem Feld-Label (z.B. „nur intern"). */
.admin-fld-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-light, #6b7280);
    font-size: .72rem;
}

/* Pflichtfeld-Checkbox + Auswahltyp im Gruppen-Editor.
   `.admin-modal`-Praefix (Spezifitaet 0-2-x) schlaegt die generische
   `.admin-modal label`-Regel (0-1-1), die sonst display:block + margin/bold
   erzwingt (diese Komponenten sind <label>s). */
.admin-modal .admin-opt-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: #333;
    font-weight: 500;
    margin: 6px 0 14px;
    cursor: pointer;
}
.admin-modal .admin-opt-check input { width: 17px; height: 17px; flex: none; margin: 0; }

.admin-opt-types { display: flex; gap: 10px; margin-bottom: 14px; }
.admin-modal .admin-opt-radio {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 11px 12px;
    /* 2px Rahmen in BEIDEN Zustaenden -> identische Groesse, nur Farbe wechselt. */
    border: 2px solid #e2e1dc;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
}
.admin-modal .admin-opt-radio:has(input:checked) {
    border-color: var(--primary, #1a1a1a);
    background: rgba(0, 0, 0, .03);
    font-weight: 700;
}
.admin-modal .admin-opt-radio input { margin: 0; flex: none; }

/* Maximal-waehlbar: dezent statt grosser Sektions-Ueberschrift. */
.admin-opt-maxwrap { margin-bottom: 14px; }
.admin-opt-maxwrap[hidden] { display: none; }
.admin-modal .admin-opt-maxlabel {
    display: block;
    margin: 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-light, #6b7280);
}
.admin-modal .admin-opt-maxlabel input { display: block; width: 100%; max-width: 170px; margin-top: 6px; }

/* Per-Gericht Zuordnungs-Checkliste */
.admin-modal .admin-opt-pick {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    padding: 11px 12px;
    border: 1px solid #e8e8e4;
    border-radius: 12px;
    color: #333;
    font-weight: 400;
    cursor: pointer;
}
.admin-modal .admin-opt-pick:has(input:checked) {
    border-color: var(--primary, #1a1a1a);
    background: rgba(0, 0, 0, .03);
}
.admin-modal .admin-opt-pick input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.admin-opt-pick-main { display: flex; flex-direction: column; gap: 2px; }
.admin-opt-pick-name { font-weight: 600; font-size: .92rem; }
.admin-opt-pick-meta { font-size: .76rem; color: var(--text-light, #6b7280); }

/* Bibliothek-Liste (Settings-Tab "Optionen") */
.option-lib-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e8e8e4;
    border-radius: 12px;
    margin-bottom: 8px;
}
.option-lib-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-lib-name { font-weight: 600; font-size: .95rem; }
.option-lib-meta { font-size: .78rem; color: var(--text-light, #6b7280); }
/* Interne Anmerkung neben dem Namen (Bibliothek + Zuordnungs-Checkliste). */
.option-lib-note {
    margin-left: 8px;
    font-weight: 500;
    font-style: italic;
    font-size: .8rem;
    color: var(--text-light, #6b7280);
}
.option-lib-actions { display: flex; gap: 6px; flex: none; }
.option-lib-edit,
.option-lib-del {
    border: 1px solid #e2e1dc;
    background: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
.option-lib-del { color: #b91c1c; border-color: #f0d3d3; }

/* === Menü-Reihenfolge (Settings-Tab "Reihenfolge") === */
/* Kategorie-Block: Header + Drop-Liste der Gerichte. Als Ganzes ziehbar zum
   Umsortieren der Kategorien; die innere Liste ist Drop-Ziel für Gerichte. */
.menu-order-cat {
    border: 1px solid #e8e8e4;
    border-radius: 14px;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
}
.menu-order-cat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #faf9f6;
    border-bottom: 1px solid #eeede8;
    cursor: grab;
}
.menu-order-cat-head:active { cursor: grabbing; }
.menu-order-cat-name { font-weight: 600; font-size: .98rem; flex: 1; min-width: 0; }
.menu-order-cat-count { font-size: .78rem; color: var(--text-light, #6b7280); flex: none; }

/* Drop-Liste: min-height, damit auch eine leere Kategorie ein Ziel bleibt. */
.menu-order-items {
    padding: 8px;
    min-height: 40px;
}
.menu-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #efeeea;
    border-radius: 10px;
    background: #fafaf8;
    margin-bottom: 6px;
    cursor: grab;
}
.menu-order-item:last-child { margin-bottom: 0; }
.menu-order-item:active { cursor: grabbing; }
.menu-order-item-name { font-size: .9rem; min-width: 0; }

/* Abbrechen-Button in den Options-Modals */
.admin-opt-cancel {
    flex: 1;
    padding: 14px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    font-family: inherit;
    font-size: .95rem;
    cursor: pointer;
}

/* === Größen-Editor + Drag&Drop (WEB-14) === */
.admin-size-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #efeeea;
    border-radius: 10px;
    background: #fafaf8;
    margin-bottom: 8px;
}
.admin-modal .admin-size-row input { padding: 7px 10px; font-size: .9rem; }
.admin-modal .admin-size-row .admin-size-name { flex: 1; min-width: 0; width: auto; }
.admin-modal .admin-size-row .admin-size-price { width: 96px; flex: none; text-align: right; }

.admin-drag-handle {
    flex: none;
    cursor: grab;
    color: #b9b8b2;
    font-size: 1rem;
    line-height: 1;
    user-select: none;
    padding: 0 2px;
}
.admin-drag-handle:active { cursor: grabbing; }
.dragging { opacity: .5; }

/* Bibliotheks-Zeile: Drag-Handle links, Info füllt die Mitte. */
.option-lib-row .admin-drag-handle { align-self: center; }
.option-lib-info { flex: 1; }

/* === Order Tracking Modal === */
.modal-tracking {
    max-width: 480px;
}

.tracking-back[hidden] { display: none; }

.tracking-order-nr {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-top: -16px;
    margin-bottom: 20px;
}

.tracking-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 20px 0;
}

.tracking-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    /* Platz der Verbindungslinie (::before/::after zeichnen sie hinein). */
    border-left: 3px solid transparent;
    margin-left: 18px;
    padding-left: 20px;
    position: relative;
}

.tracking-step:first-child {
    padding-top: 0;
}

.tracking-step:last-child {
    padding-bottom: 0;
}

/* Offener Schritt: Inhalt blass, die Linie bleibt voll sichtbar (wie in der App). */
.tracking-step:not(.active) > * {
    opacity: 0.4;
}

/* Verbindungslinie von Kreis zu Kreis: die obere Haelfte (::before) fuehrt zum
   vorigen, die untere (::after) zum naechsten Schritt — so ragt nichts ueber den
   ersten Kreis hinaus und die Linie reicht bis an den letzten heran. */
.tracking-step::before,
.tracking-step::after {
    content: '';
    position: absolute;
    left: -3px;
    width: 3px;
    background: var(--border);
}

.tracking-step::before {
    top: 0;
    height: 50%;
}

.tracking-step::after {
    top: 50%;
    bottom: 0;
}

.tracking-step:first-child::before,
.tracking-step:last-child::after {
    content: none;
}

/* Farbton des aktuellen Status (tracking.js setzt .tone-* auf Zeitleiste +
   Zeitzeile): erreichte Schritte und ihre Linien tragen ihn, der laufende pulsiert. */
.tone-waiting   { --tone: var(--tone-waiting);   --tone-on: var(--tone-waiting-on);   --tone-soft: var(--tone-waiting-soft);   --tone-on-soft: var(--tone-waiting-on-soft); }
.tone-progress  { --tone: var(--tone-progress);  --tone-on: var(--tone-progress-on);  --tone-soft: var(--tone-progress-soft);  --tone-on-soft: var(--tone-progress-on-soft); }
.tone-cancelled { --tone: var(--tone-cancelled); --tone-on: var(--tone-cancelled-on); --tone-soft: var(--tone-cancelled-soft); --tone-on-soft: var(--tone-cancelled-on-soft); }
.tone-neutral   { --tone: var(--tone-neutral);   --tone-on: var(--tone-neutral-on);   --tone-soft: var(--tone-neutral-soft);   --tone-on-soft: var(--tone-neutral-on-soft); }

/* Erreichte Abschnitte im Status-Ton; die Linie UNTER dem laufenden Schritt
   fuehrt zu einem offenen Schritt und bleibt grau. */
.tracking-step.active::before,
.tracking-step.active:not(.current)::after {
    background: var(--tone);
}

.tracking-step.active .step-icon {
    background: var(--tone);
    color: var(--tone-on);
    border-color: var(--tone);
}

.tracking-step.current .step-icon {
    box-shadow: 0 0 0 5px var(--tone-soft);
    animation: pulseStep 2s ease-in-out infinite;
}

@keyframes pulseStep {
    0%, 100% { box-shadow: 0 0 0 0 var(--tone-soft), 0 0 0 5px var(--tone-soft); }
    50% { box-shadow: 0 0 0 9px transparent, 0 0 0 5px var(--tone-soft); }
}

.step-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -22px;
    z-index: 1; /* ueber der Verbindungslinie */
    transition: all 0.3s;
}

.step-icon svg {
    width: 20px;
    height: 20px;
}

.step-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 12px;
}

.step-title {
    font-weight: 600;
    font-size: 0.92rem;
}

.step-desc {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 2px;
}

.step-time {
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
}

.tracking-info {
    text-align: center;
    padding: 16px;
    background: var(--tone-soft, var(--tone-neutral-soft));
    border-radius: 8px;
    margin: 16px 0;
}

.tracking-info p {
    font-size: 0.82rem;
    color: var(--tone-on-soft, var(--tone-neutral-on-soft));
    margin: 0;
}

.tracking-actions {
    margin-top: 16px;
}

/* === Allergen Notice === */
.allergen-notice {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px;
    background: #f0f0f0;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.6;
}

.allergen-notice a {
    color: var(--text);
    font-weight: 500;
}

/* === Footer === */
.footer {
    background: #1a1a1a;
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 24px 20px;
    font-size: 0.8rem;
}

.footer-links {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: white;
}

/* Anbieter-Hinweis „Bestellsystem von LieferUP" (WEB-60): dezent unter den
   Rechtstext-Links, nur der Name ist der Link. */
.footer-credit {
    margin: 12px 0 0;
}

.footer-credit a {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-credit a:hover {
    color: white;
}

/* App-Version: dezent, klein, monospace.
   Pflegen via package.json -> /api/version (siehe footerVersion-Script). */
.footer-version {
    margin: 14px 0 0;
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 0.03em;
}

/* === Cookie Banner === */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a1a;
    color: rgba(255,255,255,0.85);
    padding: 16px 24px;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
    font-size: 0.82rem;
    line-height: 1.5;
}

.cookie-banner.hidden {
    display: none;
}

.cookie-banner p {
    flex: 1;
    margin: 0;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 18px;
        font-size: 0.8rem;
    }
    .cookie-buttons {
        width: 100%;
        justify-content: flex-end;
    }
    .cookie-buttons button {
        flex: 1;
        min-height: 44px;
    }

    /* Titelbild auf dem Handy so kompakt wie in der App (WEB-61). Masse wie in
       core/mobile/src/components/RestaurantHeader.tsx: 250px Mindesthoehe, Inhalt unten
       verankert mit 44px Abstand, die Info-Karte ragt 34px hinein. Vorher galt auch
       hier die Desktop-Hoehe (58 % des Bildschirms, bis 440px) — das Bild fuellte den
       halben Bildschirm, die Speisekarte begann erst unter dem Falz. Oben bleibt die
       Hoehe der Kopfleiste frei: die Status-Pille steht unter dem Anmelde-Knopf. */
    .hero {
        min-height: 250px;
        padding: var(--topbar-h) 0 44px;
    }

    .hero-eyebrow {
        margin-bottom: 14px;
    }

    .hero-content p {
        font-size: .875rem;
        margin-top: 6px;
    }

    .hero-chips {
        gap: 8px;
        margin-top: 16px;
    }

    .hero-chip {
        padding: 8px 13px;
        font-size: .78rem;
    }

    /* Kompakte Info-Karte: Kopfzeile (Logo + Name/Status) und Buttons nebeneinander. */
    .info-card {
        gap: 12px;
        padding: 14px;
        margin-top: -34px;
        border-radius: 18px;
    }

    /* Adresse und Status stehen auf dem Handy untereinander — der Trenner hinge sonst
       allein am Ende der Adresszeile. */
    .info-meta .sep {
        display: none;
    }

    .info-logo {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 1.1rem;
    }

    .info-main {
        min-width: 0;
    }

    .info-main h2 {
        font-size: 1.15rem;
    }

    .info-actions {
        /* Auf dem Handy: Buttons nebeneinander (halbe/halbe) in Zeile 1, die
           aufgeklappten Oeffnungszeiten in voller Breite in Zeile 2 darunter. */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        flex-basis: 100%;
        /* Desktop-Festbreite aufheben: hier fuellt die Zeile die Kartenbreite. */
        width: auto;
        gap: 8px;
        margin-right: 0;
    }

    /* "Anrufen" und der Oeffnungszeiten-Button teilen sich Zeile 1 (je halbe
       Breite). Das <details> umschliesst nur noch den Button. */
    .btn-call,
    .opening-hours-toggle {
        flex: 1 1 0;
    }

    .btn-call,
    .opening-hours-toggle summary {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 11px 0;
        font-size: .84rem;
    }

    /* Der Button-Abstand kommt hier aus dem flex-gap (8px), nicht aus der
       Desktop-margin — sonst schoebe die untere Zeile zusaetzlich weg. */
    .btn-call {
        margin-bottom: 0;
    }

    /* Oeffnungszeiten auf dem Handy: bricht als volle Zeile 2 unter die beiden
       Buttons um (flex-basis:100%) und klappt dort im Fluss auf/zu — dieselbe
       max-height-Animation wie am Desktop, der Rest rutscht mit. */
    .opening-hours-table {
        flex-basis: 100%;
        width: auto;
    }
}

.btn-cookie-accept {
    padding: 10px 20px;
    background: white;
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s;
}

.btn-cookie-accept:hover {
    opacity: 0.9;
}

.btn-cookie-decline {
    padding: 10px 20px;
    background: transparent;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.btn-cookie-decline:hover {
    border-color: white;
    color: white;
}

/* === Legal Modals === */
.modal-legal {
    max-width: 650px;
    max-height: 85vh;
    position: relative;
}

.modal-legal .modal-close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 10;
}

.modal-legal h3 {
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 8px;
}

.modal-legal p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 8px;
}

.modal-legal a {
    color: var(--primary);
    word-break: break-all;
}

.modal-legal ul {
    margin: 8px 0 12px 20px;
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.7;
}

.modal-legal li {
    margin-bottom: 4px;
}

/* Rechtstexte werden als Fragment (h1/h2 + optionaler Hinweis) pro Tenant
   dynamisch geladen (WEB-16). Im Modal-Kontext kleiner halten als die
   globalen Shop-Headlines. */
.modal-legal .legal-content h1 {
    font-size: 1.35rem;
    margin: 4px 0 12px;
}
.modal-legal .legal-content h2 {
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 8px;
}
.modal-legal .legal-content .legal-note {
    background: #fff8e6;
    border: 1px solid #f0e0a8;
    border-radius: 8px;
    padding: 10px 12px;
    color: #6b5a12;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

/* === Item Added Animation === */
@keyframes addPulse {
    0% { box-shadow: 0 0 0 0 rgba(26,26,26,0.4); }
    70% { box-shadow: 0 0 0 10px rgba(26,26,26,0); }
    100% { box-shadow: 0 0 0 0 rgba(26,26,26,0); }
}

.menu-item.added {
    animation: addPulse 0.4s ease-out;
    border-color: var(--primary);
}

/* === Responsive === */
/* Das Titelbild hat hier und unter 480px bewusst KEINE feste Hoehe mehr (WEB-61):
   `height: 240px/200px` stammte aus dem Layout vor dem Redesign, war gegen die
   Mindesthoehe von .hero wirkungslos und haette den unten verankerten Inhalt
   abgeschnitten, sobald sie greift. Die Hoehe folgt dem Inhalt. */
@media (max-width: 900px) {
    .hero-content h1 {
        font-size: 2rem;
    }

    .main-content {
        flex-direction: column;
    }

    .cart-sidebar {
        display: none;
        position: fixed;
        /* Im Admin-Modus startet die Sidebar erst unterhalb des Toolbars. */
        top: var(--admin-toolbar-h);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        /* 100dvh minus Toolbar, damit die Sidebar nicht nach unten ueberlaeuft. */
        height: calc(100dvh - var(--admin-toolbar-h));
        max-height: none;
        border-radius: 0;
        transform: none;
        z-index: 240;
        box-shadow: none;
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
        background: var(--card);
    }

    /* Backdrop nicht noetig wenn Sidebar Full-Screen ist */
    .cart-backdrop {
        display: none !important;
    }

    /* Auth-Modal als "neue Seite" darstellen.
       Im Admin-Modus startet der Overlay erst UNTER dem roten Toolbar —
       sonst sitzt der ganze Modal-Container hinter dem fixen Toolbar
       (z-index 10000) und Header + Close-X waeren unerreichbar. */
    .modal-overlay {
        top: var(--admin-toolbar-h);
        padding: 0;
        background: var(--card);
        align-items: stretch;
        justify-content: stretch;
        z-index: 240;
    }

    .modal {
        max-width: none;
        width: 100%;
        /* Hoehe = Viewport minus Toolbar, damit das Modal exakt in den
           verkleinerten Overlay passt und nicht unten ueberlaeuft. */
        max-height: none;
        height: calc(100dvh - var(--admin-toolbar-h));
        border-radius: 0;
        padding: 24px 20px calc(80px + env(safe-area-inset-bottom) + 60px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Kein X mehr auf Auth-Modal & Cart-Sidebar — Wechsel ueber Bottom-Nav */
    #authModal .modal-close,
    #cartSidebar .cart-close {
        display: none !important;
    }

    .cart-sidebar.open {
        display: flex;
    }

    .cart-sidebar .cart-items {
        max-height: none;
    }

    .cart-close {
        display: flex;
    }

    .cart-fab {
        display: none;
    }

    .bottom-nav {
        display: flex;
    }

    body {
        padding-bottom: 60px;
    }

    .menu-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.6rem;
    }

    .logo-circle {
        width: 100px;
        height: 100px;
    }

    .menu-item {
        padding: 12px 16px;
    }

    .modal {
        padding: 24px 20px calc(80px + env(safe-area-inset-bottom) + 60px);
    }
}

/* Sehr schmale Phones: Login-Button nur als Icon (bleibt sichtbar & tappbar). */
@media (max-width: 380px) {
    .user-btn .user-btn-text {
        display: none;
    }

    .user-btn {
        width: 44px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
}

/* === Admin Mode === */
#adminToolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    padding: 10px 20px;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.4);
}

.admin-toolbar-inner {
    display: flex; align-items: center; gap: 14px;
    max-width: 1400px; margin: 0 auto;
}
.admin-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; color: #dc2626; padding: 5px 12px; border-radius: 8px;
    font-weight: 800; font-size: 0.78rem; letter-spacing: 1px; flex-shrink: 0;
}
.admin-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.25); }
.admin-info { font-size: 0.82rem; opacity: .92; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-menu-btn {
    margin-left: auto; flex-shrink: 0; width: 42px; height: 36px; border: none; cursor: pointer;
    border-radius: 9px; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center;
    transition: background .18s;
}
.admin-menu-btn:hover { background: rgba(255,255,255,.28); }
.admin-bars { display: block; width: 20px; height: 14px; position: relative; }
.admin-bars span { position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .25s, opacity .2s, top .25s; }
.admin-bars span:nth-child(1) { top: 0; }
.admin-bars span:nth-child(2) { top: 6px; }
.admin-bars span:nth-child(3) { top: 12px; }
.admin-menu-btn.open .admin-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.admin-menu-btn.open .admin-bars span:nth-child(2) { opacity: 0; }
.admin-menu-btn.open .admin-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.admin-menu-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(20,20,20,.25);
    opacity: 0; pointer-events: none; transition: opacity .2s; }
.admin-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.admin-menu {
    position: fixed; top: calc(var(--admin-toolbar-h, 52px) + 8px); right: clamp(12px, 4vw, 40px);
    z-index: 9999; width: 288px; background: #fff; color: var(--text, #1d1d1f);
    border: 1px solid var(--border, #e8e8e4); border-radius: 16px; box-shadow: 0 18px 50px rgba(20,20,20,.18);
    padding: 8px; opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right;
    pointer-events: none; transition: opacity .2s, transform .2s cubic-bezier(.2,.9,.3,1.2);
}
.admin-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.admin-menu-section { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-light, #6b7280); padding: 10px 12px 6px; }
.admin-menu-item { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
    text-decoration: none; padding: 11px 12px; border: none; background: none; cursor: pointer;
    border-radius: 10px; font-family: inherit; font-size: .9rem; font-weight: 600;
    color: var(--text, #1d1d1f); transition: background .15s; }
.admin-menu-item:hover { background: var(--bg, #f6f6f4); }
.admin-menu-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid;
    place-items: center; background: var(--bg, #f6f6f4); font-size: 1rem; }
.admin-menu-lbl { flex: 1; min-width: 0; }
.admin-menu-lbl small { display: block; font-size: .74rem; font-weight: 500;
    color: var(--text-light, #6b7280); margin-top: 1px; }
.admin-menu-item.accent .admin-menu-ic { background: #fff1ea; color: #e8552b; }
.admin-menu-item.danger { color: #dc2626; }
.admin-menu-item.danger .admin-menu-ic { background: #fdecec; color: #dc2626; }
.admin-menu-divider { height: 1px; background: var(--border, #e8e8e4); margin: 6px 8px; }

/*
 * --admin-toolbar-h: Hoehe des roten fixen Admin-Toolbars (#adminToolbar).
 * Wird nur im Admin-Modus auf 52px gesetzt, sonst 0. Modal/Cart-Sidebar
 * im Mobile-Vollbild rechnen damit Top-Padding/Top-Offset, damit der
 * Inhalt nicht hinter dem Toolbar verschwindet (Pendant zum 80px
 * Bottom-Nav-Balken, der via padding-bottom respektiert wird).
 */
:root {
    --admin-toolbar-h: 0px;
}

body.admin-mode {
    --admin-toolbar-h: 52px;
    padding-top: var(--admin-toolbar-h);
}

body.admin-mode .hero {
    margin-top: 0;
}

body.admin-mode .user-btn {
    top: 62px;
}

/* Category header row (admin): title left, Bearbeiten-Stift right (WEB-29). */
.admin-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-cat-header .section-title {
    margin-bottom: 0;
    /* `0 1 auto`: no grow (so the actions stay next to the title, left of the
       row, like the mockup — not pushed to the far right edge) BUT allow shrink
       so a long category name wraps instead of overflowing the viewport (which
       showed up as a white strip on the right / horizontal scroll). */
    flex: 0 1 auto;
    min-width: 0;
}

.admin-cat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Inside the flex header the Stift uses the row gap, not its own margin. */
.admin-cat-actions .admin-cat-edit-btn {
    margin: 0;
}

/* In the pure edit mode the customer "add to cart" (+) affordance only confuses
   the admin (the click is already a no-op via cart.js). Hide the + button and
   the card pointer. In order-mode the admin shops like a customer, so the body
   keeps `order-mode` — there the + stays visible/functional. */
body.admin-mode:not(.order-mode) .menu-item .item-add {
    display: none;
}

body.admin-mode:not(.order-mode) .menu-item {
    cursor: default;
}

/* Add new item button */
.admin-add-item-btn {
    border: 2px dashed #ccc !important;
    background: #fafafa !important;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-add-item-btn:hover {
    border-color: #dc2626 !important;
    background: #fee2e2 !important;
}

.admin-add-item-btn h3 {
    color: #999;
    font-size: 1rem;
}

.admin-add-item-btn:hover h3 {
    color: #dc2626;
}

.admin-add-item-btn p {
    color: #bbb;
    font-size: 0.8rem;
}

/* Admin Modals */
.admin-modal h2 {
    margin-bottom: 20px;
}

.admin-modal label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    margin-top: 14px;
    color: #333;
}

.admin-modal label:first-of-type {
    margin-top: 0;
}

.admin-modal input[type="text"],
.admin-modal input[type="number"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.admin-modal input:focus {
    outline: none;
    border-color: #1a1a1a;
}

.admin-modal .order-submit-btn {
    width: 100%;
    padding: 16px;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.admin-modal .order-submit-btn:hover {
    opacity: 0.85;
}

/* Hide admin elements when not admin */
body:not(.admin-mode) .admin-edit-btn,
body:not(.admin-mode) .admin-cat-edit-btn,
body:not(.admin-mode) .admin-add-item-btn,
body:not(.admin-mode) #adminToolbar {
    display: none !important;
}

/* Bestellmodus: Admin shoppt als Kunde -> Edit-Controls verstecken.
   Toolbar bleibt sichtbar. */
body.order-mode .admin-edit-btn,
body.order-mode .admin-cat-edit-btn,
body.order-mode .admin-add-item-btn,
body.order-mode .admin-add-category-btn {
    display: none !important;
}

#adminOrderModeBtn.active {
    background: #2d6a4f;
    color: #fff;
}

.admin-menu-tip { margin: 6px 6px 4px; padding: 10px 12px; background: var(--bg, #f6f6f4);
    border-radius: 10px; font-size: .76rem; color: var(--text-light, #6b7280); line-height: 1.5; }
.admin-menu-tip b { color: var(--text, #1d1d1f); font-weight: 600; }

@media (max-width: 700px) {
    #adminToolbar { padding: 8px 12px; }
    body:not(.order-mode) #adminToolbar .admin-info { display: none; }
}

@media (max-width: 600px) {
    #adminToolbar { padding: 8px 12px; }
    .admin-toolbar-inner { gap: 10px; }
    .admin-badge { font-size: 0.7rem; padding: 3px 8px; }
    .admin-menu { width: auto; left: 12px; right: 12px; }
}

/* === Admin Settings Modal + "Kategorien und Gerichte"-Modal ===
   Beide sind Tab-Modals mit demselben Breiten-/Scroll-Verhalten (DRY). */
.admin-settings-modal,
.admin-menu-manage-modal {
    /* Breit genug, damit alle Tabs (inkl. Allgemein + Geraete bzw. Reihenfolge +
       Optionen) in eine Zeile passen, ohne horizontal scrollen zu muessen. */
    max-width: 880px;
    max-height: 85vh;
    overflow-y: auto;
}

/* Auf Mobile sollen beide Modals das gleiche Vollbild-Verhalten bekommen wie
   .modal — die obigen Desktop-Constraints wuerden sonst die Hoehe auf 85vh
   begrenzen und das Modal im Overlay nicht ganz ausfuellen lassen. */
@media (max-width: 900px) {
    .admin-settings-modal,
    .admin-menu-manage-modal {
        max-width: none;
        max-height: none;
    }
}

/* Settings Tabs — Look wird vom "Kategorien und Gerichte"-Modal geteilt
   (.menu-manage-*), damit beide Tab-Modals identisch aussehen (DRY). Die
   Tab-Switch-Logik ist getrennt (data-settings-tab vs. data-menu-tab). */
.settings-tabs,
.menu-manage-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
    background: #f1f3f5;
    border-radius: 10px;
    padding: 4px;
}

.settings-tab,
.menu-manage-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
}

.settings-tab.active,
.menu-manage-tab.active {
    background: white;
    color: #1a1a1a;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.settings-tab:hover:not(.active),
.menu-manage-tab:hover:not(.active) {
    color: #333;
}

/* Settings Panels */
.settings-panel,
.menu-manage-panel {
    display: none;
}

.settings-panel.active,
.menu-manage-panel.active {
    display: block;
}

.settings-hint {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 16px;
}

.settings-subheading {
    font-size: 0.95rem;
    margin: 20px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.settings-empty {
    font-size: 0.9rem;
    color: #aaa;
    font-style: italic;
    margin: 8px 0 16px;
}

/* Hours Editor.
   EIN gemeinsames Grid fuer alle 7 Wochentag-Reihen: nur so synchronisiert
   Grid die Spaltenbreite ueber alle Reihen hinweg (laengster Wochentag
   "Donnerstag" diktiert die Breite, kuerzere Tage haben Whitespace rechts).
   Wenn jede Reihe ihr eigenes Grid haette, wuerde jede Zeile fuer sich
   den Tag-Slot ausrechnen → Donnerstag wuerde breiter werden als Montag
   und das Layout verschoben aussehen. */
/* Hours Editor.
   Jede Reihe hat ihr eigenes Grid mit FIXEN Pixel-Breiten fuer Spalte
   1 (Wochentag) + Spalte 2 (Toggle). Weil die Breiten hartcodiert sind,
   sind alle 7 Reihen exakt gleich gelayoutet — Wochentage, Checkboxen
   und Zeit-Inputs fluchten vertikal sauber.
   Day-Spalte 110px ist sicher fuer "Donnerstag" (laengster Wochentag)
   bei 0.9rem/600 + 12px padding-right. Whitespace rechts neben
   kuerzeren Tagen ("Montag") ist explizit gewuenscht.
   column-gap bewusst 0: damit der border-bottom als durchgehende Linie
   ueber die ganze Reihe laeuft. Der Spaltenabstand kommt aus
   padding-inline-end auf den ersten beiden Cells. */
.hours-edit-row {
    display: grid;
    grid-template-columns: 110px 110px 1fr;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f5;
}

.hours-edit-row:last-child {
    border-bottom: none;
}

.hours-edit-row > *:not(:last-child) {
    padding-inline-end: 12px;
}

.hours-edit-day {
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-modal label.hours-toggle,
.hours-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

.hours-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1a1a1a;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.hours-toggle-label {
    font-size: 0.8rem;
    color: var(--text-light);
    cursor: pointer;
    white-space: nowrap;
}

.hours-edit-times {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    transition: opacity 0.2s;
}

.hours-time-input {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100px;
    text-align: center;
}

.hours-time-input:focus {
    outline: none;
    border-color: #1a1a1a;
}

.hours-edit-dash {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Closures */
.closure-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 8px;
}

.closure-entry.closure-past {
    opacity: 0.5;
}

.closure-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
}

.closure-reason {
    font-size: 0.82rem;
    color: var(--text-light);
}

.closure-badge-past {
    font-size: 0.72rem;
    color: #999;
    background: #eee;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 2px;
    width: fit-content;
}

.closure-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.closure-remove-btn:hover {
    background: #dc2626;
    color: white;
}

.closure-add-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.closure-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

/* Lieferung: PLZ + Ort + Add-Button immer untereinander, volle Breite */
.area-add-row {
    flex-direction: column;
    align-items: stretch;
    margin-top: 12px;
}

.area-add-row .closure-field,
.area-add-row .closure-field input {
    width: 100%;
}

.closure-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.closure-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.closure-field input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
}

.closure-field input:focus {
    outline: none;
    border-color: #1a1a1a;
}

.closure-field-full {
    width: 100%;
    margin-top: 10px;
}

.closure-field-full input {
    width: 100%;
}

.admin-settings-add-btn {
    margin-top: 12px;
    padding: 10px 20px;
    background: #f1f3f5;
    border: 2px dashed #ccc;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.admin-settings-add-btn:hover {
    border-color: #1a1a1a;
    color: #1a1a1a;
    background: #e9ecef;
}

/* Delivery Settings */
.delivery-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.delivery-setting {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.delivery-setting label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    line-height: 1.2;
}

.delivery-setting input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.delivery-setting input:focus {
    outline: none;
    border-color: #1a1a1a;
}

/* Notification Settings (Restaurant-Mail) */
.notify-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

.notify-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Warnung zu einer Einstellung (z.B. Bar bei Lieferung aus ohne Online-Zahlung, PAY-17). */
.settings-warning {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    color: #b42318;
    font-size: 0.85rem;
    line-height: 1.45;
}
.settings-warning[hidden] { display: none; }

#settingsGeneral .delivery-setting input {
    text-align: left;
    font-weight: 500;
}

/* Delivery Areas Chips */
.delivery-areas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.delivery-area-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #f1f3f5;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
}

.chip-remove {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #dee2e6;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.chip-remove:hover {
    background: #dc2626;
    color: white;
}

/* Liefer-Zonen-Karten (WEB-35): eine Karte je Zone mit Name, Konditionen
   und eigener PLZ-Liste. Nutzt die bestehenden delivery-*-Bausteine. */
.zone-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zone-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zone-name-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
}

.zone-name-input:focus {
    outline: none;
    border-color: #1a1a1a;
}

.zone-card .area-add-row {
    margin-top: 0;
}

.zone-card .admin-settings-add-btn {
    margin-top: 0;
}

/* Settings Save Button */
.settings-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.settings-save-btn {
    width: 100%;
    padding: 16px;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.settings-save-btn:hover {
    opacity: 0.85;
}

/* ============================================================ */
/* === Geräte-Tab (Sunmi-Pairing) === */
/* ============================================================ */
.settings-hint {
    margin: 0 0 14px;
    font-size: 0.9rem;
    color: #555;
}

#devicesList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.device-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
}

.device-entry-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.device-entry-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-entry-meta {
    font-size: 0.78rem;
    color: #6c757d;
}

.device-entry-revoke {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: #fff;
    color: #dc2626;
    border: 1px solid #dc2626;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.device-entry-revoke:hover {
    background: #dc2626;
    color: #fff;
}

.device-entry-empty {
    padding: 14px;
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
    background: #f8f9fa;
    border-radius: 10px;
}

/* Pair-Modal */
.admin-device-pair-modal {
    text-align: center;
    max-width: 420px;
}

.device-pair-hint {
    color: #444;
    font-size: 0.92rem;
    margin: 6px 0 18px;
    line-height: 1.5;
}

.device-pair-qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 16px;
}

.device-pair-qr-wrap img {
    width: 280px;
    height: 280px;
    max-width: 100%;
    display: block;
}

.device-pair-meta {
    font-size: 0.95rem;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.device-pair-meta strong {
    font-variant-numeric: tabular-nums;
    color: #dc2626;
}

.device-pair-fallback {
    margin-top: 6px;
    color: #888;
    font-size: 0.78rem;
    word-break: break-all;
}

.device-pair-fallback code {
    background: #f1f3f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: #1a1a1a;
}

/* Admin Toast */
.admin-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a1a1a;
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    z-index: 100000;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.admin-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsive settings */
@media (max-width: 600px) {
    /* Mobile: schmalere Spalten fuer Wochentag + Toggle, damit die
       Time-Inputs (1fr) genug Platz haben. 90px Day-Spalte reicht fuer
       "Donnerstag" bei 0.85rem/600 + 8px padding-end (~83px Textbreite).
       Beide Cells gleiche Breite (90px) damit alle Checkboxen + Times
       sauber in einer vertikalen Linie stehen. */
    .hours-edit-row {
        grid-template-columns: 90px 90px 1fr;
    }

    .hours-edit-row > *:not(:last-child) {
        padding-inline-end: 8px;
    }

    .hours-edit-day {
        font-size: 0.85rem;
    }

    .hours-toggle-label {
        font-size: 0.75rem;
    }

    .hours-edit-times {
        gap: 4px;
    }

    .hours-time-input {
        width: 100%;
        /* Hard floor damit "23:00" lesbar bleibt, falls die Wochentag-
           Spalte (z.B. wegen sehr breitem Font) viel Platz frisst. */
        min-width: 56px;
        padding: 6px 4px;
        font-size: 0.85rem;
    }

    .delivery-settings-grid {
        grid-template-columns: 1fr;
    }

    .delivery-setting label {
        min-height: 0;
    }

    .settings-tabs,
    .menu-manage-tabs {
        flex-direction: column;
    }

    .closure-row {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .closure-field {
        width: 100%;
    }
}

/* ============================================================ */
/* === Abrechnungen (Monatsabrechnungen, Admin-Profil) === */
/* ============================================================ */

/* Akzent-Icon der Profil-Karte "Abrechnungen" */
.profile-menu-icon-accent {
    background: var(--accent-soft);
    border-color: #f6d3c4;
    color: var(--accent);
}

.statements-intro {
    font-size: 0.82rem;
    color: #888;
    margin: 0 0 18px;
}

.statements-list {
    display: flex;
    flex-direction: column;
}

/* --- Highlight-Karte "Dieser Monat" --- */
.statement-current {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    border: none;
    border-radius: 16px;
    padding: 16px 17px;
    margin-bottom: 22px;
    color: #fff;
    background: linear-gradient(135deg, #2a2a2e, #161618);
    box-shadow: 0 10px 24px rgba(20, 20, 20, 0.18);
}

.statement-current-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ff9a7a;
}

.statement-current-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #36d07f;
    box-shadow: 0 0 0 3px rgba(54, 208, 127, 0.25);
}

.statement-current-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 10px;
    gap: 12px;
}

.statement-current-left { display: flex; flex-direction: column; min-width: 0; }
.statement-current-right { text-align: right; flex-shrink: 0; }

.statement-current-label { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.statement-current-sub { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); margin-top: 3px; }
.statement-current-sum { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; display: block; }
.statement-current-note { font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); }

/* --- Jahres-Gruppen + Monatszeilen --- */
.statement-year-group { margin-bottom: 16px; }

.statement-year-head {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #aaa;
    text-transform: uppercase;
    margin: 0 2px 9px;
}

.statement-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.statement-row {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.statement-row:active { transform: scale(0.99); }

.statement-tile {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.statement-tile-mon {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    line-height: 1;
}

.statement-tile-year { font-size: 0.62rem; color: #aaa; line-height: 1.4; }

.statement-row-main { flex: 1; min-width: 0; }
.statement-row-label { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.statement-row-sub { display: block; font-size: 0.75rem; color: #888; }

.statement-row-right { text-align: right; margin-right: 4px; flex-shrink: 0; }
.statement-row-sum { display: block; font-size: 0.95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.statement-row-note { display: block; font-size: 0.68rem; color: #aaa; }

.statement-row-chevron { color: #bbb; flex-shrink: 0; display: flex; }

/* --- Beleg-Blatt (Detail) --- */
.statement-sheet {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #e6e6e2;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(20, 20, 20, 0.07);
    overflow: hidden;
    /* Alle Betraege mit gleicher Ziffernbreite -> saubere rechte Spalte */
    font-variant-numeric: tabular-nums;
}

.statement-sheet-head { padding: 15px 18px 12px; border-bottom: 1px solid #e6e6e2; }

.statement-sheet-letterhead { margin-bottom: 11px; }
.statement-sheet-brand { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; }
.statement-sheet-addr { font-size: 0.7rem; color: #555; line-height: 1.45; margin-top: 2px; }
.statement-sheet-contact { font-size: 0.68rem; color: #777; margin-top: 3px; }

.statement-sheet-kicker {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #999;
}

.statement-sheet-title { font-size: 1.02rem; font-weight: 700; line-height: 1.15; margin-top: 1px; }

.statement-sheet-period {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: #777;
    margin-top: 3px;
}

.statement-sheet-meta { font-size: 0.66rem; color: #999; margin-top: 4px; }

.statement-sheet-badge {
    margin-top: 8px;
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    color: #15803d;
    background: #dcfbe7;
    padding: 2px 8px;
    border-radius: 999px;
}

.statement-sheet-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: #ececea;
    border-bottom: 1px solid #e6e6e2;
}

.statement-kpi { background: #fafafa; padding: 9px 10px; text-align: center; }
.statement-kpi-val { font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em; }
.statement-kpi-label {
    font-size: 0.56rem;
    color: #888;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.statement-sheet-body { padding: 2px 18px 16px; }

.statement-sheet-sectitle {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
    margin: 13px 0 2px;
}

.statement-sheet-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #f1f1ef;
    font-size: 0.76rem;
}

.statement-sheet-label { color: #333; }
.statement-sheet-sub { color: #999; font-size: 0.7rem; }
.statement-sheet-row.is-muted .statement-sheet-label { color: #999; }

.statement-sheet-val {
    font-weight: 500;
    color: #1a1a1a;
    text-align: right;
    flex-shrink: 0;
}

.statement-sheet-val.is-strong { font-weight: 700; }
.statement-sheet-row.is-muted .statement-sheet-val { color: #999; }

.statement-sheet-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 12px;
    padding-top: 9px;
    /* Duenne Trennlinie statt der frueheren 2px-Schwarzen: die Zeile soll die
       Bloecke darueber abschliessen, nicht mit der Summenzeile der USt-Tabelle
       um Aufmerksamkeit konkurrieren. */
    border-top: 1px solid var(--border);
}

/* Die Abschluss-Zeile tritt bewusst hinter die Summenzeile der USt-Tabelle
   zurueck: sie wiederholt nur das Brutto und dient als Kontrollanker fuer die
   Bloecke darueber. Die Kernaussage (Netto | USt | Brutto nebeneinander) steht
   in .statement-vat-row.is-strong — die darf lauter sein. */
.statement-sheet-total-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.statement-sheet-total-val { font-size: 0.9rem; font-weight: 700; }

.statement-sheet-disclaimer {
    font-size: 0.62rem;
    color: #aaa;
    line-height: 1.55;
    border-top: 1px solid #f1f1ef;
    margin-top: 14px;
    padding-top: 10px;
}

/* --- Aktionsleiste (Drucken / PDF / Bild) --- */
.statement-actions {
    display: flex;
    gap: 9px;
    margin-top: 16px;
}

.stmt-btn {
    flex: 1;
    min-height: 50px;
    border-radius: 13px;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid #e2e1dc;
    background: #fff;
    color: #3f3f43;
}

.stmt-btn-primary {
    border: none;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(20, 20, 20, 0.22);
}

.stmt-btn:active { transform: scale(0.98); }

/* Reichweiten-Hinweis: was die Auswertung NICHT enthaelt. Bewusst in
   Textfarbe (nicht grau wie das Kleingedruckte) — er darf nicht untergehen. */
.statement-sheet-scope {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text);
    margin-top: 14px;
}

/* --- USt-Tabelle im Beleg-Blatt (spiegelt den PDF-Beleg) --- */
/* Steuersatz links, drei rechtsbuendige Zahlenspalten: Netto | USt | Brutto.
   Die Summenzeile ist zwischen zwei Linien eingefasst, damit
   netto + USt = brutto senkrecht nachrechenbar ist. */
.statement-vat-table { margin-bottom: 14px; }

.statement-vat-row {
    display: grid;
    grid-template-columns: 1fr repeat(3, minmax(72px, 96px));
    gap: 8px;
    align-items: baseline;
    padding: 5px 0;
}

.statement-vat-row.is-head {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

/* Die Zellen der Kopfzeile duerfen die Header-Groesse NICHT ueberschreiben —
   sonst rendert der Kopf so gross wie die Datenzeilen (und kollidiert auf
   schmalen Schirmen mit den Nachbarspalten). */
.statement-vat-row.is-head .statement-vat-rate,
.statement-vat-row.is-head .statement-vat-num { font-size: inherit; }

/* Kernaussage des Belegs: Netto | USt | Brutto nebeneinander. Bekommt das
   meiste Gewicht — daran liest man ab, was netto und was brutto ist. */
.statement-vat-row.is-strong {
    font-weight: 800;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 2px;
    padding: 7px 0;
}

.statement-vat-row.is-strong .statement-vat-rate,
.statement-vat-row.is-strong .statement-vat-num { font-size: 1rem; }

.statement-vat-rate { font-size: 0.9rem; }

.statement-vat-num {
    text-align: right;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;   /* Ziffern untereinander ausrichten */
    white-space: nowrap;
}

@media (max-width: 600px) {
    /* Auf schmalen Schirmen die Zahlenspalten enger fassen, damit die Zeile
       nicht umbricht (Betraege muessen untereinander lesbar bleiben). */
    .statement-vat-row {
        grid-template-columns: minmax(56px, 0.9fr) repeat(3, minmax(52px, 1fr));
        gap: 4px;
    }
    .statement-vat-rate,
    .statement-vat-num { font-size: 0.75rem; }
    /* "Umsatzsteuer" ist als Kopf zu lang fuer 375px -> kleiner + ohne Sperrung,
       damit die drei Spaltenkoepfe nicht aneinanderstossen. */
    .statement-vat-row.is-head {
        font-size: 0.6rem;
        letter-spacing: 0;
    }
}

/* === Payment Modal (PAY-5) === */
#paymentElement,
#paymentPaypal { margin: 12px 0; }
.payment-status { margin: 10px 0; font-size: 0.9rem; color: var(--text-light); min-height: 1.2em; }
.payment-status.payment-error { color: #c0392b; }
#paymentPayBtn { margin-top: 8px; }

/* === Shop-Suche (Gerichte + Kategorien) ===
   Live-Suchleiste mit Dropdown. Sitzt zwischen Info-Card und Kategorie-Nav.
   Funktioniert identisch auf Desktop + Handy. */
.shop-search {
    position: relative;
    max-width: 720px;
    /* Mittig zwischen Info-Card und Kategorie-Leiste: groesserer Abstand oben
       und unten schiebt die Suchleiste in die optische Mitte. */
    margin: 22px auto 30px;
}

.shop-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}

.shop-search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.shop-search-ic {
    width: 20px;
    height: 20px;
    margin-left: 16px;
    color: var(--text-light);
    flex-shrink: 0;
}

.shop-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 14px 12px;
    font-size: 1rem;
    color: var(--text);
    font-family: inherit;
}

.shop-search-input::placeholder { color: var(--text-light); }

.shop-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-light);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.shop-search-clear:hover { background: var(--border); color: var(--text); }
/* display:inline-flex oben ueberstimmt sonst das hidden-Attribut (× stand immer da). */
.shop-search-clear[hidden] { display: none; }

/* Dropdown-Liste der Treffer. */
.shop-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    max-height: 60vh;
    overflow-y: auto;
    z-index: 140;
}

.shop-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
}

.shop-search-result:hover,
.shop-search-result.active {
    background: var(--accent-soft);
}

.shop-search-ric {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.shop-search-rtext {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shop-search-rlabel {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-search-rsub {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Kurzes Aufblitzen des angesprungenen Gerichts nach Auswahl. */
@keyframes search-flash {
    0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
    25%  { box-shadow: 0 0 0 4px var(--accent-soft); }
    100% { box-shadow: 0 0 0 0 rgba(232,85,43,0); }
}

.menu-item.search-flash {
    animation: search-flash 1.6s ease-out;
    border-color: var(--accent) !important;
}

/* === Such-Overlay aus der Kopfleiste (WEB-40) ===
   Klappt unter der fixen Leiste auf (die bleibt samt Lupe sichtbar), die Seite
   dahinter ist abgedunkelt und gesperrt — wie das Such-Overlay der App.
   z-index ueber Bottom-Nav (250) und Warenkorb (240); ein Tipp ausserhalb
   (z.B. Konto-Button) schliesst das Panel vorher (searchOverlay.js). */
.search-overlay-backdrop {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 260;
    background: rgba(0, 0, 0, .35);
}

.search-overlay {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 270;
    padding: 12px clamp(16px, 4vw, 40px) 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.search-overlay-inner {
    max-width: 720px;
    margin: 0 auto;
}

.search-overlay-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-overlay-row .shop-search-box {
    flex: 1;
    min-width: 0;
}

.search-overlay-cancel {
    flex-shrink: 0;
    padding: 8px 4px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

/* Treffer im Panel im Fluss statt als schwebendes Dropdown. */
.search-overlay .shop-search-results {
    position: static;
    margin-top: 10px;
    box-shadow: none;
    max-height: min(60vh, 480px);
    overscroll-behavior: contain;
}

.search-overlay-empty {
    margin-top: 14px;
    text-align: center;
    font-size: .9rem;
    color: var(--text-light);
}

/* Seite hinter dem offenen Panel sperren; scrollbar-gutter haelt den Platz der
   Scrollleiste frei, damit nichts seitlich springt. */
html.search-overlay-open {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Handy: etwas kompakter, voller Breite innerhalb der Shell. */
@media (max-width: 600px) {
    .shop-search {
        /* Auf dem Handy nutzt die Leiste die volle Shell-Breite. Unten nur wenig
           Abstand: die Kategorie-Leiste bringt ihren eigenen Innenabstand mit. */
        margin: 26px auto 6px;
    }
    .shop-search-input {
        padding: 12px 10px;
        font-size: 16px; /* verhindert iOS-Zoom beim Fokus */
    }
    .shop-search-ic { margin-left: 14px; }
    .shop-search-results { max-height: 50vh; }

    /* Abstaende um die Kategorie-Leiste wie in der App (WEB-62). Vorher lagen
       zwischen Suchfeld und Chips 41px und zwischen Chips und erster Ueberschrift
       44px — die Speisekarte begann deutlich tiefer als in der App. Jetzt 21px
       und 26px (App: rund 14 und 40 bis zur Schrift). */
    .category-nav {
        margin-top: 0;
    }

    .main-content {
        padding-top: 12px;
    }
}

/* ============================================================
   === Bestellkanäle im Settings-Tab „Verfügbarkeit" (WEB-31) ===
   ============================================================
   Pro Kanal (Abholung/Lieferung) eine Karte mit An/Aus-Schalter,
   Vorlaufzeit, Annahmeschluss, Zeiten-Modus und einer Klartext-
   Vorschau, die die Minuten-Eingaben in echte Uhrzeiten übersetzt. */
.channel-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
    background: var(--card);
}

.channel-card.is-paused {
    background: #fbfbfa;
    border-style: dashed;
}

.channel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.channel-title {
    font-weight: 600;
    font-size: 1rem;
}

.channel-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Pause-Zeile: nur sichtbar, wenn der Kanal aus ist. */
.channel-resume {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
}

.channel-resume-clear {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-light);
}

.channel-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 12px;
}

.channel-field {
    flex: 1 1 200px;
    min-width: 180px;
}

.channel-field > label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.channel-field small {
    display: block;
    color: var(--text-light);
    font-size: 0.78rem;
    margin-top: 4px;
}

.channel-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.channel-input-row input {
    width: 76px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.channel-hours-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* Das globale Formular-Label im Settings-Modal bringt font-weight 600 und
   margin-bottom mit — hier neutralisieren, sonst stehen die beiden Radios
   („wie Öffnungszeiten" / „eigene Zeiten") auf unterschiedlicher Höhe. */
.channel-hours-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}

.channel-hours-mode input[type="radio"] {
    flex: none;
    margin: 0;
}

.channel-hours-row {
    display: grid;
    grid-template-columns: 96px 76px 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
}

.channel-hours-day { color: var(--text-light); }

.channel-hours-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}

.channel-hours-toggle input[type="checkbox"] {
    flex: none;
    margin: 0;
}

.channel-hours-time {
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
}

.channel-hours-sep { color: var(--text-light); }

/* Klartext-Vorschau: übersetzt die Einstellungen in echte Uhrzeiten,
   damit der Wirt nicht selbst rechnen muss. */
.channel-preview {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--text);
    font-size: 0.85rem;
}

.channel-preview.is-warn {
    background: #fff4e5;
    color: #8a4b00;
}

/* Bestellstopp-Hinweis (SUNMI-8): reine Anzeige, geschaltet wird am
   Küchen-Terminal. Bewusst kräftiger als die Warn-Vorschau — er hebt die
   Kanal-Einstellungen darunter komplett auf. Farbton = Shop-Banner
   (.closed-banner-stop) und WDColors.Stopped im Terminal. */
.channel-stop-notice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #dc2626;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.45;
}

@media (max-width: 600px) {
    .channel-fields { gap: 12px; }
    .channel-hours-row {
        grid-template-columns: 74px 64px 1fr auto 1fr;
        gap: 6px;
        font-size: 0.8rem;
    }
}