/* ============================================================
   eatbase /menus redesign – additive, layered on top of vendor.
   Scoped under .eb-menu-items / .eb-menu-card / .eb-mobile-cart
   so disabling the custom/menudesign extension restores vendor.
   ============================================================ */

/* Roboto – self-hosted (CSP-konform), variable Font v51.
   Latin + Latin-ext genügen für deutschsprachige Restaurant-Namen. */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/fonts/roboto-v51-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: 'Roboto';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/fonts/roboto-v51-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;
}

:root {
    --eb-blue:        #299fd1;
    --eb-blue-dark:   #217ea6;
    --eb-blue-light:  #58cdff;
    --eb-text:        #1f1f1f;
    --eb-text-soft:   #5a6b75;
    --eb-text-muted:  #8a96a0;
    --eb-bg:          #ffffff;
    --eb-bg-soft:     #f5f7fa;
    --eb-border:      #e6ebef;
    --eb-border-strong:#d4dce2;
    --eb-radius:      24px;
    --eb-radius-sm:   14px;
    --eb-shadow:      0 1px 2px rgba(15, 30, 45, 0.04);
    --eb-shadow-hover:0 6px 24px rgba(33, 126, 166, 0.12), 0 1px 2px rgba(15,30,45,0.04);
    --eb-tap:         44px;
}

/* Safety-Net gegen horizontalen Overflow auf der Menüs-Seite.
   overflow-x: clip statt hidden bricht NICHT position: sticky
   (.sticky-top der Kategorie-Nav). 100vw absichtlich NICHT verwendet,
   weil das auf Desktop die Scrollbar mitzählt und dann selbst Overflow
   erzeugt. */
html { overflow-x: clip; }
.eb-menus-page { overflow-x: clip; }

/* ----- List wrapper: 1 Spalte mobile, 2 ab md -----
   minmax(0, 1fr) (statt 1fr / auto) verhindert, dass die Spalte auf
   den längsten unbrechbaren String wächst und die Seite breiter als
   den Viewport macht. */
.eb-menu-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

@media (min-width: 768px) {
    .eb-menu-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Karten in einer Reihe sollen sich auf die gleiche Höhe ausdehnen,
   damit der Add-Button und der Preis exakt auf gleicher Linie sitzen. */
.eb-menu-items__row { min-width: 0; width: 100%; height: 100%; }

.eb-menu-items__empty {
    color: var(--eb-text-muted);
    padding: 24px 8px;
    text-align: center;
}

/* ----- Card ----- */
.eb-menu-card {
    position: relative;
    display: block;
    height: 100%;
    background: var(--eb-bg);
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius);
    padding: 16px;
    color: var(--eb-text);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background-color 0.15s ease;
    box-shadow: var(--eb-shadow);
    cursor: pointer;
    /* dezenter Native-Tap-Highlight als sofortige Klick-Bestätigung —
       wichtig, weil das Modal jetzt erst nach Livewire-Response aufpoppt
       (siehe modal-speed.js). */
    -webkit-tap-highlight-color: rgba(41, 159, 209, 0.18);
}

/* Touch-aktiv: sofortige visuelle Bestätigung beim Tap, bevor das Modal
   öffnet. Greift in dem Moment, in dem der Finger den Bildschirm
   berührt — Browser-nativ, kein JS nötig. */
.eb-menu-card:active:not(.eb-menu-card--unavailable) {
    background-color: var(--eb-bg-soft);
    transform: scale(0.985);
    box-shadow: var(--eb-shadow);
}

.eb-menu-card:focus-visible {
    outline: 2px solid var(--eb-blue);
    outline-offset: 2px;
}

.eb-menu-card:hover {
    box-shadow: var(--eb-shadow-hover);
    border-color: var(--eb-border-strong);
    transform: translateY(-1px);
}

/* (Active-State sitzt jetzt eine Ebene weiter oben mit Hintergrund+Scale-Feedback.) */

.eb-menu-card--unavailable {
    cursor: not-allowed;
    opacity: 0.65;
}

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

/* ----- Badge (Angebot / Aktion) -----
   Im FLUSS über dem Inhalt (nicht absolut) — überdeckt so nie den
   Gericht-Namen; die Karte wird einfach höher. Die Nachbarkarte in der
   Zeile zieht automatisch mit (Grid + height:100% auf den Karten). */
.eb-menu-card__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 6px 10px 0;
    background: var(--eb-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(33, 126, 166, 0.25);
}

/* ----- Body row (content + thumb) ----- */
.eb-menu-card__body {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.eb-menu-card__content {
    flex: 1 1 auto;
    min-width: 0;
    /* leaves room for the round add button bottom-right */
    padding-right: calc(var(--eb-tap) + 4px);
}

.eb-menu-card__title {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--eb-text);
    /* lange unbrechbare Wörter umbrechen, sonst sprengen sie die Spalte */
    overflow-wrap: anywhere;
}

.eb-menu-card__desc {
    font-size: 14px;
    line-height: 1.45;
    color: var(--eb-text-soft);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
    /* clamp to two lines so cards stay calm */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eb-menu-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.eb-menu-card__price {
    font-size: 15px;
    font-weight: 700;
    color: var(--eb-text);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.eb-menu-card__price-current { letter-spacing: 0.01em; }

.eb-menu-card__price-old {
    color: var(--eb-text-muted);
    font-weight: 500;
    font-size: 13px;
    text-decoration: line-through;
}

.eb-menu-card--special .eb-menu-card__price-current { color: var(--eb-blue-dark); }

.eb-menu-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--eb-bg-soft);
    color: var(--eb-text-soft);
}

.eb-menu-card__tag--warning {
    background: rgba(255, 176, 32, 0.12);
    color: #b06e00;
}

.eb-menu-card__tag--muted i { font-size: 11px; }

/* ----- Thumbnail ----- */
.eb-menu-card__thumb-wrap {
    flex: 0 0 auto;
}

.eb-menu-card__thumb {
    width: 96px;
    height: 96px;
    border-radius: var(--eb-radius-sm);
    background-color: var(--eb-bg-soft);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .eb-menu-card__thumb {
        width: 120px;
        height: 120px;
    }
}

/* ----- Add button (visual, parent handles click) ----- */
.eb-menu-card__add {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: var(--eb-tap);
    height: var(--eb-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--eb-blue);
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(33, 126, 166, 0.28);
    transition: background 0.15s ease, transform 0.15s ease;
    pointer-events: none; /* let the parent card capture the click */
}

.eb-menu-card:hover .eb-menu-card__add {
    background: var(--eb-blue-dark);
}

.eb-menu-card--unavailable .eb-menu-card__add {
    background: var(--eb-bg-soft);
    color: var(--eb-text-muted);
    box-shadow: none;
}

/* ----- Compact tweaks on very small phones ----- */
@media (max-width: 380px) {
    .eb-menu-card { padding: 14px; }
    .eb-menu-card__thumb { width: 84px; height: 84px; }
    .eb-menu-card__title { font-size: 15px; }
    .eb-menu-card__desc { font-size: 13.5px; }
}

/* ============================================================
   Mobile sticky cart bar (replaces vendor buttons-mobile)
   ============================================================ */

.eb-mobile-cart {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--eb-blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(33, 126, 166, 0.32), 0 2px 6px rgba(15,30,45,0.08);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.eb-mobile-cart:hover,
.eb-mobile-cart:focus {
    background: var(--eb-blue-dark);
    color: #fff;
    text-decoration: none;
}

.eb-mobile-cart:active { transform: translateY(1px); }

/* Zwei Klassen im Selektor sind Absicht: das Markup trägt zusätzlich Bootstraps
   `.d-block`, und das setzt `display: block !important`. Bei gleicher
   Spezifität und beidseitigem !important entscheidet die Reihenfolge der
   Stylesheets, und Bootstrap wird nach dieser Datei geladen. Ergebnis war eine
   Warenkorb-Pille, die auch bei LEEREM Warenkorb über der Seite lag und unten
   den Footer mit den Rechtstexten verdeckt hat. */
.eb-mobile-cart.eb-mobile-cart--empty { display: none !important; }

.eb-mobile-cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.eb-mobile-cart__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}

.eb-mobile-cart__total {
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.eb-mobile-cart__chevron {
    font-size: 12px;
    opacity: 0.85;
    flex-shrink: 0;
}

/* Add bottom padding on the menus list so the floating bar
   doesn't cover the last item on mobile. */
@media (max-width: 991.98px) {
    main { padding-bottom: 96px; }
}

/* ============================================================
   Cart item modal (Bestell-Popup) – kompakter Card-Look
   ============================================================ */

/* Gleichmäßiger Abstand auf allen 4 Seiten: Padding direkt auf das
   Modal-Container-Element. Wichtig: !important wegen Bootstrap, das
   beim Öffnen ein inline padding-right (Scrollbar-Kompensation) setzt
   und sonst das rechte Padding überschreibt. */
/* Shell-Regeln für unsere Modal-Optik.
   WICHTIG: zusätzlich zum :has(.eb-item-modal)-Selektor müssen wir
   #orange-modal explizit treffen, weil dessen eb-item-modal-Dialog
   erst per Livewire nachgeladen wird. Ohne diese Union greift unsere
   CSS beim ERSTEN Öffnen für ein paar hundert ms NICHT (Bootstrap-
   Defaults gelten) — und sobald die Livewire-Antwort eintrifft,
   springen Padding/Flex/Position auf einmal um → exakt das Flackern.
   #orange-modal selbst hat stets dieselbe ID, also matchen die Regeln
   ab dem ersten Frame, unabhängig vom Inhalt. */
#orange-modal,
.modal:has(.eb-item-modal) {
    padding: 18px !important;
}
@media (max-width: 575.98px) {
    #orange-modal,
    .modal:has(.eb-item-modal) { padding: 14px !important; }
}

/* Wenn offen: Flex-Container, der den Dialog zentriert. Damit gibt es
   keinen äußeren Modal-Scroll – der Dialog ist exakt so groß wie der
   Modal-Bereich, der innere Body übernimmt das Scrollen.
   !important nötig wegen Bootstrap's inline display:block. */
#orange-modal.show,
.modal.show:has(.eb-item-modal) {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Dialog absolut in der Modal-Hülle zentrieren. Das entkoppelt die
   Position vom display-Modus der Hülle: beim Schließen entfernt
   Bootstrap .show direkt am Start der Close-Animation und die Hülle
   fällt von display:flex zurück auf Bootstrap's inline display:block
   — der Dialog würde dann als Block-Element auf top-left springen,
   während die Transform-Animation noch läuft (das war das „springt
   nach links + flackert"). Mit position:absolute hängt der Dialog
   an seinem eigenen Translate-Anker, nicht am Container-Layout. */
#orange-modal .modal-dialog,
.modal:has(.eb-item-modal) .modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    width: 100%;
    max-width: 460px;
}

/* Sanfte Modal-Animation: nur translate + opacity, kein scale.
   Die translateY(18px) sitzt jetzt auf dem absoluten Center-Anker,
   d. h. der Closed-State ist „etwas unterhalb der Mitte", der
   Open-State ist „exakt mittig". */
#orange-modal.fade .modal-dialog,
.modal.fade:has(.eb-item-modal) .modal-dialog {
    transition:
        transform 0.26s ease-out,
        opacity 0.22s ease-out;
    transform: translate(-50%, calc(-50% + 18px));
    opacity: 0;
}
#orange-modal.show .modal-dialog,
.modal.show:has(.eb-item-modal) .modal-dialog {
    transform: translate(-50%, -50%);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    #orange-modal.fade .modal-dialog,
    .modal.fade:has(.eb-item-modal) .modal-dialog {
        transition: opacity 0.15s linear;
        transform: translate(-50%, -50%);
    }
}

/* Sehr kleine Viewports: Dialog darf bis fast zum Rand wachsen,
   sonst kollidiert das max-width: 460px mit Smartphones < 480px. */
@media (max-width: 480px) {
    #orange-modal .modal-dialog,
    .modal:has(.eb-item-modal) .modal-dialog {
        max-width: calc(100% - 28px);
    }
}

.eb-item-modal {
    max-width: 460px;
    width: 100%;
    margin: 0;            /* Padding macht #orange-modal */
}

.eb-item-modal__form { width: 100%; display: block; }

/* .modal-content vorangestellt → Spezifität (0,2,0) schlägt das
   Vendor-Bundle, das `.modal-content { border-radius: 0 }` setzt
   und nach unserer CSS geladen wird. Ohne den doppelten Klassen-
   Selektor blieben die Modal-Ecken eckig. */
.modal-content.eb-item-modal__content {
    border: none;
    border-radius: var(--eb-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 30, 45, 0.22);
    display: flex;
    flex-direction: column;
    /* vh-Fallback für ältere Browser, dvh (dynamic viewport) berücksichtigt
       die ein-/ausklappende Adressleiste auf iOS-Safari + Chrome-Android. */
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
}

@media (max-width: 575.98px) {
    .eb-item-modal__content {
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
    }
}

/* Doppelklassen-Selektor (.btn-close.eb-item-modal__close) ist Absicht:
   Bootstraps .btn-close setzt background (Kurzform, also transparent) und
   opacity .5, das Theme-Bundle laedt NACH dieser Datei. Mit nur einer Klasse
   gewann Bootstrap, und auf dunklen Gerichtsfotos war das X unsichtbar
   (dunkles X, kein weisser Kreis, halbe Deckkraft). */
.btn-close.eb-item-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.96);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    box-shadow: 0 2px 8px rgba(15, 30, 45, 0.28), 0 0 0 1px rgba(15, 30, 45, 0.06);
    opacity: 1;
    padding: 0;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Wenn KEIN Hero, Close-Button auf Pure-Soft-Grey statt Glas */
.eb-item-modal__content:not(:has(.eb-item-modal__hero)) .btn-close.eb-item-modal__close {
    background-color: var(--eb-bg-soft);
    box-shadow: none;
}

.btn-close.eb-item-modal__close:hover,
.btn-close.eb-item-modal__close:focus {
    background-color: #fff;
    opacity: 1;
    transform: scale(1.06);
}
.btn-close.eb-item-modal__close:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-blue) 35%, transparent);
}

.eb-item-modal__hero {
    width: 100%;
    height: 200px;
    background: var(--eb-bg-soft);
    overflow: hidden;
    flex-shrink: 0;
}

.eb-item-modal__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 575.98px) {
    .eb-item-modal__hero { height: 180px; }
}

/* ----- Header: Title + Description, immer sichtbar (scrollt NICHT) ----- */
.eb-item-modal__header {
    padding: 20px 22px 14px;
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid var(--eb-border);
}

/* Ohne Hero: etwas mehr Top-Padding, sonst rutscht der Close-Button
   in den Titel-Bereich. */
.eb-item-modal__content:not(:has(.eb-item-modal__hero)) .eb-item-modal__header {
    padding-top: 28px;
}

.eb-item-modal__title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 6px;
    color: var(--eb-text);
    padding-right: 36px; /* Platz für Close-Button bei No-Hero-Variante */
}

.eb-item-modal__content:has(.eb-item-modal__hero) .eb-item-modal__title {
    padding-right: 0;
}

.eb-item-modal__desc {
    color: var(--eb-text-soft);
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
}

/* ----- Body: nur dieser Bereich scrollt (Optionen, Anmerkung) ----- */
.eb-item-modal__body {
    padding: 16px 22px 14px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.eb-item-modal__options { margin-bottom: 4px; }

.eb-item-modal__comment {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--eb-border);
}

.eb-item-modal__comment-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--eb-text-soft);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eb-item-modal__comment-input {
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    resize: vertical;
    background: #fff;
}

.eb-item-modal__comment-input:focus {
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 3px rgba(41, 159, 209, 0.18);
    outline: none;
}

/* ----- Allergene & Zusatzstoffe -----
   Ganz am Ende des Scroll-Bereichs, bewusst zurückgenommen: klein und grau,
   aber mit ausreichendem Kontrast und normaler Zeilenhöhe, damit es lesbar
   bleibt, wenn jemand gezielt danach sucht. Keine Chips, keine Icons. */
.eb-item-modal__allergens {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--eb-border);
    font-size: 12px;
    line-height: 1.5;
    color: var(--eb-text-muted);
}

.eb-item-modal__allergens-label {
    font-weight: 600;
    color: var(--eb-text-soft);
}

/* ----- Footer (qty + submit), bleibt immer am Boden sichtbar -----
   Desktop: nebeneinander. Mobile: untereinander (Submit full-width).  */
.eb-item-modal__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--eb-border);
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .eb-item-modal__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    }
    /* Qty-Stepper auf Mobile zentriert (statt vollbreit, sieht ruhiger aus) */
    .eb-item-modal__qty {
        align-self: center;
    }
    /* Submit-Pill nimmt die volle Breite ein – fasst dort auch lange Texte */
    .eb-item-modal__submit {
        width: 100%;
    }
}

.eb-item-modal__qty {
    display: inline-flex;
    align-items: center;
    background: var(--eb-bg-soft);
    border-radius: 999px;
    padding: 4px;
    flex-shrink: 0;
}

.eb-item-modal__qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #fff;
    color: var(--eb-text);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 30, 45, 0.08);
    transition: background 0.12s ease, color 0.12s ease;
}

.eb-item-modal__qty-btn:hover { background: var(--eb-blue); color: #fff; }

.eb-item-modal__qty-input {
    width: 44px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    padding: 0 4px;
    outline: none;
}

.eb-item-modal__submit {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: var(--eb-blue);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(33, 126, 166, 0.28);
    transition: background 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.eb-item-modal__submit:hover { background: var(--eb-blue-dark); }
.eb-item-modal__submit:active { transform: translateY(1px); }

.eb-item-modal__submit-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-item-modal__submit-total { font-weight: 700; opacity: 0.95; flex-shrink: 0; }

/* Loading state des Orange-Modals: identische Dimensionen wie das echte
   Item-Modal, damit der Content-Swap nicht zu einem Layout-Sprung führt. */
#orange-modal .modal-dialog:not(.eb-item-modal) {
    max-width: 460px;
    width: 100%;
}
#orange-modal .modal-dialog:not(.eb-item-modal) .modal-content {
    border: none;
    border-radius: var(--eb-radius);
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 60px rgba(15, 30, 45, 0.22);
}
#orange-modal .ti-loading {
    color: var(--eb-blue);
}

/* Sanftes Opacity-FadeIn beim Content-Swap (Spinner → echtes Modal).
   Nur Opacity, kein Transform – sonst Konflikt mit Dialog-Animation. */
.eb-item-modal__content,
#orange-modal .modal-dialog:not(.eb-item-modal) .modal-content {
    animation: ebContentFade 0.18s ease-out both;
}
@keyframes ebContentFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   Mobile cart offcanvas (mobile slide-up Warenkorb)
   Bootstrap offcanvas-lg: ab lg ein normaler Block (rechte Spalte),
   darunter ein Bottom-Sheet.
   ============================================================ */

.eb-cart-offcanvas.offcanvas-lg {
    --bs-offcanvas-height: 80vh;
    --bs-offcanvas-border-width: 0;
}

@media (max-width: 991.98px) {
    .eb-cart-offcanvas.offcanvas-lg {
        background: #f5f7fa;
        border-top-left-radius: var(--eb-radius);
        border-top-right-radius: var(--eb-radius);
        box-shadow: 0 -10px 30px rgba(15, 30, 45, 0.18);
    }
    .eb-cart-offcanvas .offcanvas-header {
        padding: 14px 18px;
        border-bottom: 1px solid var(--eb-border);
        background: #fff;
        border-top-left-radius: var(--eb-radius);
        border-top-right-radius: var(--eb-radius);
    }
    .eb-cart-offcanvas .offcanvas-title {
        font-weight: 700;
        font-size: 17px;
        margin: 0;
        color: var(--eb-text);
    }
    .eb-cart-offcanvas .offcanvas-body {
        padding: 16px;
        background: #f5f7fa;
    }
    /* Cart-Box innerhalb des Sheets braucht keinen eigenen border/shadow */
    .eb-cart-offcanvas #cart-box {
        border: none !important;
        box-shadow: none !important;
        padding: 16px !important;
        border-radius: var(--eb-radius) !important;
    }
    /* Der Sheet hat oben bereits die Überschrift „Warenkorb". Die Überschrift
       der Gerichte-Kachel darunter wäre eine Dopplung (Finding #26). Ab lg ist
       der Sheet-Header ausgeblendet, dort bleibt die Kachel-Überschrift die
       einzige Beschriftung und deshalb sichtbar. */
    .eb-cart-offcanvas #cart-items > h5 {
        display: none;
    }
    .eb-cart-offcanvas #cart-items > .eb-cart-items,
    .eb-cart-offcanvas #cart-items > ul:first-child {
        margin-top: 0;
    }
}

/* Wenn der Sheet offen ist, soll die floating Pille nicht im Weg sein.
   :has() funktioniert in allen aktuellen Browsern (Chrome 105+, Safari 15.4+,
   Firefox 121+) – Fallback ist ein sichtbarer Pill, kein Bruch. */
body:has(.eb-cart-offcanvas.show) .eb-mobile-cart { display: none !important; }

/* ============================================================
   Desktop: Warenkorb klebt beim Scrollen — dreistufig nach Platz.

   Gesteuert von menudesign/sticky-cart.js, das die natürliche Höhe der
   Box gegen den verfügbaren Platz misst und html[data-eb-cartfit] setzt:

     (kein Attribut)  Warenkorb läuft normal mit der Seite — auch der
                      Zustand, wenn das Skript nie läuft. Bewusst der
                      Standard: ohne Messung wird nichts begrenzt, also
                      kann auch nichts abgeschnitten werden.
     ok               klebt, natürliche Höhe, nichts scrollt intern.
     scroll           klebt, Höhe gedeckelt: #eb-cart-scroll (Positionen,
                      Adresse, Gutschein, Trinkgeld) scrollt intern,
                      #eb-cart-foot (Summen + Button) bleibt stehen.
     flow             zu niedrig selbst für den gedeckelten Fall: Kleben
                      wird aufgegeben, dafür erscheint .eb-flow-bar.

   Zusätzlich html[data-eb-cartcompact="1"]: Trinkgeld und Gutschein
   klappen auf je eine Zeile zusammen, damit ohne internes Scrollen
   mehr Platz bleibt. Der Gast klappt sie mit einem Klick wieder auf.

   Historie: Vorher war NUR #cart-items scrollbar (flex: 1 1 auto;
   min-height: 0) und alles darunter fest. Sobald die festen Blöcke die
   Deckelhöhe überschritten, schrumpfte die Positionsliste auf 0 px —
   Warenkorb sah leer aus, Gesamtbetrag stimmte trotzdem. Genau dagegen
   ist die Scrollzone jetzt eine eigene Ebene MIT Mindesthöhe.
   ============================================================ */
@media (min-width: 992px) {
    /* Sticky MUSS auf der offcanvas-body sitzen: ihr Parent ist die von der
       Row auf volle Zeilenhöhe gestreckte .col — nur innerhalb eines hohen
       Parents hat sticky überhaupt Spielraum. Ein sticky auf dem Livewire-
       Root griffe nie (Parent offcanvas-body = exakt Inhaltshöhe).
       Bootstrap setzt offcanvas-body ab lg ohnehin auf overflow: visible. */
    /* Bootstrap macht .offcanvas-body ab lg zu display:flex; die Livewire-
       Wurzel darin ist ein Flex-Item ohne Breite und nahm nur ihre
       natuerliche Breite ein. Ergebnis: die Warenkorb-Box wurde je nach
       Inhalt (Laenge der Gerichtnamen) breiter oder schmaler. Kind fuellt
       die Spalte jetzt immer. */
    .eb-menus-page .eb-cart-offcanvas .offcanvas-body > * {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    html[data-eb-cartfit="ok"] .eb-menus-page .eb-cart-offcanvas .offcanvas-body,
    html[data-eb-cartfit="scroll"] .eb-menus-page .eb-cart-offcanvas .offcanvas-body {
        position: sticky;
        /* Kategorie-Nav-Höhe kommt zur Laufzeit aus sticky-cart.js
           (--eb-catnav-h), + 24px = derselbe Abstand wie der Gutter
           zwischen Warenkorb und Gericht-Kacheln. */
        top: calc(var(--eb-catnav-h, 64px) + 24px);
    }

    /* Der Deckel ist der von JS gemessene Platz (--eb-cart-avail), nicht eine
       zweite Rechnung in CSS: zwei Formeln, die dasselbe meinen, laufen
       irgendwann auseinander. Der Fallback-Wert greift nur, falls die Variable
       fehlt, und ist absichtlich großzügig. */
    html[data-eb-cartfit="scroll"] .eb-menus-page #cart-box {
        display: flex;
        flex-direction: column;
        max-height: var(--eb-cart-avail, calc(100dvh - 120px));
    }
    html[data-eb-cartfit="scroll"] .eb-menus-page #eb-cart-foot {
        flex: 0 0 auto;
        position: relative;
    }
    html[data-eb-cartfit="scroll"] .eb-menus-page #eb-cart-scroll {
        flex: 1 1 auto;
        /* Die Mindesthöhe ist der eigentliche Schutz gegen den alten Bug:
           die Zone darf nie unter etwa anderthalb Positionen fallen. Reicht
           der Platz dafür nicht, schaltet sticky-cart.js auf "flow" um,
           statt hier etwas zu quetschen. */
        min-height: 150px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;
        /* Luft unter dem letzten Block: ohne sie klebt er am Fuß und wirkt
           angeschnitten, auch wenn er vollständig da ist. */
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: var(--eb-border-strong) transparent;
    }

    /* Sichtbarer Hinweis, dass unter der Kante noch etwas liegt. Ohne ihn
       sieht eine bündig abgeschnittene Liste aus wie das Ende der Liste —
       das war der Grund, warum der leere Warenkorb als Fehler gelesen wurde.

       Am unteren Ende der Zone (data-eb-cartend, gesetzt von sticky-cart.js)
       fällt er weg: dort folgt nichts mehr, und ein Verlauf über dem letzten
       Block ließe ihn abgeschnitten aussehen, obwohl er vollständig da ist. */
    html[data-eb-cartfit="scroll"]:not([data-eb-cartend="1"]) .eb-menus-page #eb-cart-foot::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -22px;
        height: 22px;
        pointer-events: none;
        background: linear-gradient(to top, #fff 15%, rgba(255, 255, 255, 0));
    }
}

/* ----- Kompakt-Modus: Trinkgeld und Gutschein als eine Zeile -----
   Die Zeilen (.eb-cart-mini) stehen immer im Markup und sind normal
   ausgeblendet. Der Aufklapp-Zustand hängt an <html> und NICHT im
   Warenkorb-DOM: Livewire morpht die Box bei jeder Mengenänderung neu
   und würde ein dort gesetztes Attribut (z. B. <details open>) wieder
   entfernen. So überlebt der Zustand jedes Re-Render. */
.eb-cart-mini { display: none; }

@media (min-width: 992px) {
    html[data-eb-cartcompact="1"] .eb-menus-page .eb-cart-collapse .eb-cart-mini {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        margin: 0;
        background: #fbfbfc;
        border: 1px solid var(--eb-border);
        border-radius: 12px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: var(--eb-text);
        cursor: pointer;
        text-align: left;
        transition: background 0.12s ease, border-color 0.12s ease;
    }
    html[data-eb-cartcompact="1"] .eb-menus-page .eb-cart-collapse .eb-cart-mini:hover {
        background: #fff;
        border-color: var(--eb-border-strong);
    }
    .eb-cart-mini__icon { font-size: 15px; line-height: 1; }
    .eb-cart-mini__label { flex: 0 0 auto; }
    .eb-cart-mini__value {
        margin-left: auto;
        font-weight: 600;
        color: var(--eb-text-muted);
    }
    .eb-cart-mini__chev { font-size: 11px; color: var(--eb-text-muted); }

    /* Zugeklappt = Inhalt weg. Zwei Klassen plus Attribut schlagen die
       Inline-<style>-Regeln der Trinkgeld-Karte (#cart-tip .eb-tip3__grid),
       deshalb hier bewusst mit hoher Spezifität. */
    html[data-eb-cartcompact="1"] .eb-menus-page .eb-cart-collapse[data-eb-collapse="tip"] .eb-cart-collapse__body,
    html[data-eb-cartcompact="1"] .eb-menus-page .eb-cart-collapse[data-eb-collapse="coupon"] .eb-cart-collapse__body {
        display: none;
    }
    html[data-eb-cartcompact="1"][data-eb-tipopen="1"] .eb-menus-page .eb-cart-collapse[data-eb-collapse="tip"] .eb-cart-collapse__body,
    html[data-eb-cartcompact="1"][data-eb-couponopen="1"] .eb-menus-page .eb-cart-collapse[data-eb-collapse="coupon"] .eb-cart-collapse__body {
        display: block;
    }
    /* Aufgeklappt bleibt die Zeile als Kopf stehen (sonst gäbe es keinen Weg
       zurück) und dreht den Pfeil. Die Trinkgeld-Karte bringt eine eigene
       Überschrift mit — die wird dann ausgeblendet, sonst steht „Trinkgeld"
       zweimal untereinander. */
    html[data-eb-cartcompact="1"][data-eb-tipopen="1"] .eb-menus-page .eb-cart-collapse[data-eb-collapse="tip"] .eb-cart-mini__chev,
    html[data-eb-cartcompact="1"][data-eb-couponopen="1"] .eb-menus-page .eb-cart-collapse[data-eb-collapse="coupon"] .eb-cart-mini__chev {
        transform: rotate(180deg);
    }
    html[data-eb-cartcompact="1"][data-eb-tipopen="1"] .eb-menus-page #cart-tip .eb-tip3__head,
    html[data-eb-cartcompact="1"][data-eb-tipopen="1"] .eb-menus-page #cart-tip .eb-tip3__sub {
        display: none;
    }
    html[data-eb-cartcompact="1"][data-eb-tipopen="1"] .eb-menus-page #cart-tip.eb-tip3 {
        padding-top: 6px;
        margin-top: 6px;
    }
    html[data-eb-cartcompact="1"][data-eb-couponopen="1"] .eb-menus-page #cart-coupon .eb-cart-collapse__body {
        margin-top: 8px;
    }

    /* Der Gutschein-Block bringt eigene Bootstrap-Abstände mit (py-3) — die
       fallen im Kompakt-Modus weg, sonst rahmt Luft eine einzelne Zeile. */
    html[data-eb-cartcompact="1"] .eb-menus-page #cart-coupon {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 0 !important;
    }
    html[data-eb-cartcompact="1"][data-eb-couponopen="1"] .eb-menus-page #cart-coupon {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Etwas weniger Luft in der ganzen Box, wenn es eng wird. */
    html[data-eb-cartcompact="1"] .eb-menus-page #cart-items > h5 { margin-bottom: 0.75rem !important; }
    html[data-eb-cartcompact="1"] .eb-menus-page #cart-buttons { margin-top: 0.5rem !important; }
    html[data-eb-cartcompact="1"] .eb-menus-page #cart-buttons > p { margin-bottom: 0.5rem !important; }
}

/* ----- Rückfallebene „flow": Warenkorb scrollt mit der Seite -----
   Dann fehlt der dauerhaft sichtbare Bestellbutton — deshalb diese Leiste.
   Sie ist die Desktop-Entsprechung der mobilen Pille und liegt wie diese
   im @teleport am Body, also außerhalb von .eb-menus-page. */
.eb-flow-bar { display: none; }

@media (min-width: 992px) {
    html[data-eb-cartfit="flow"] .eb-flow-bar:not(.eb-flow-bar--empty) {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        background: #fff;
        border-top: 1px solid var(--eb-border);
        box-shadow: 0 -6px 20px rgba(15, 30, 45, 0.10);
    }
    .eb-flow-bar__inner {
        max-width: 1140px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 16px;
    }
    .eb-flow-bar__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 26px;
        padding: 0 8px;
        border-radius: 999px;
        background: var(--eb-blue);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }
    .eb-flow-bar__label {
        font-size: 15px;
        font-weight: 600;
        color: var(--eb-text);
    }
    .eb-flow-bar__total {
        margin-left: auto;
        font-size: 16px;
        font-weight: 700;
        color: var(--eb-text);
    }
    .eb-flow-bar__btn {
        border: none;
        border-radius: 999px;
        background: var(--eb-blue);
        color: #fff;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        padding: 10px 22px;
        cursor: pointer;
        transition: background 0.15s ease;
    }
    .eb-flow-bar__btn:hover { background: var(--eb-blue-dark); }
    .eb-flow-bar__btn--off {
        background: var(--eb-border-strong);
        color: #fff;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Die Leiste liegt über dem Seitenende — sonst verdeckt sie den Footer
       mit den Rechtstexten. */
    html[data-eb-cartfit="flow"] body { padding-bottom: 68px; }
}

/* ============================================================
   Local-Header oben auf /menus – Restaurant-Name als Display-Font.
   ============================================================ */

.eb-local-name {
    font-family: 'Roboto', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: 1.7rem;
    line-height: 1.2;
    color: var(--eb-text);
    margin: 0 0 0.4rem;
}

@media (min-width: 768px) {
    .eb-local-name { font-size: 1.95rem; }
}

/* "Info"-Label, das oberhalb des Restaurant-Namens im Modal-Header steht */
.eb-info-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--eb-blue-dark);
    margin: 0 0 6px;
}

/* Sekundär-Infos (Status, Öffnungszeit, Mehr-Infos-Link) etwas
   ruhiger und konsistenter. */
.panel-local .breadcrumb .breadcrumb-item {
    font-size: 14px;
}
.panel-local a[data-bs-target="#localInfoModal"] {
    color: var(--eb-blue-dark);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.12s ease;
}
.panel-local a[data-bs-target="#localInfoModal"]:hover {
    color: var(--eb-blue);
    text-decoration: underline;
}

/* ============================================================
   Local-Info-Modal Inhalt (Restaurant-Infos im Popup-Look)
   ============================================================ */

.eb-info-section + .eb-info-section { margin-top: 18px; }

.eb-info-section__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--eb-text-soft);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.eb-info-section__title i {
    color: var(--eb-blue);
    width: 16px;
    text-align: center;
}

.eb-info-card {
    background: var(--eb-bg-soft);
    border-radius: var(--eb-radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--eb-text);
}
.eb-info-card + .eb-info-card { margin-top: 8px; }
.eb-info-card p:last-child { margin-bottom: 0; }

.eb-info-desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--eb-text);
}

/* Liefergebiete: pro Gebiet eine aufklappbare Karte (<details>). Zusammen-
   gefasste Kopfzeile (Name + Liefergebühr) immer sichtbar, Details beim
   Aufklappen. Komplett ohne JS (CSP-konform). */
.eb-area {
    background: var(--eb-bg-soft);
    border-radius: var(--eb-radius-sm);
    overflow: hidden;
}
.eb-area + .eb-area { margin-top: 8px; }

.eb-area__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none; /* Standard-Dreieck entfernen (Firefox) */
    user-select: none;
}
.eb-area__head::-webkit-details-marker { display: none; } /* Safari/Chrome */

.eb-area__name {
    font-weight: 600;
    color: var(--eb-text);
    font-size: 14px;
}
.eb-area__teaser {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--eb-blue-dark);
    white-space: nowrap;
}
.eb-area__chev {
    color: var(--eb-text-soft);
    font-size: 12px;
    transition: transform 0.18s ease;
}
.eb-area[open] .eb-area__chev { transform: rotate(180deg); }

.eb-area__body {
    padding: 2px 14px 12px;
}
.eb-area__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
    border-top: 1px solid var(--eb-border, rgba(0, 0, 0, 0.06));
}
.eb-area__label {
    color: var(--eb-text-soft);
}
.eb-area__value {
    font-weight: 600;
    color: var(--eb-text);
    text-align: right;
}
.eb-area__row--free .eb-area__value { color: var(--eb-blue-dark); }


/* ============================================================
   Zeiten-Block im Local-Header (Findings #18/#19)
   Jede Angabe steht in einer eigenen Zeile: Öffnung, dann (nur bei
   abweichenden Zeiten) Lieferung und Abholung, darunter „Mehr Infos".
   Vorher lagen alle Angaben als Breadcrumb in einer Zeile, wodurch der
   Link „Mehr Infos" direkt hinter der Lieferzeile klebte.
   ============================================================ */
.eb-local-times__row {
    display: block;
    line-height: 1.5;
    margin: 0;
}
.eb-local-times__row + .eb-local-times__row {
    margin-top: 2px;
}


/* ============================================================
   Redesign 07.09.2026: Restaurant-Kopf, Suche, Kategorien,
   Optionen im Bestell-Popup, Mengen-Stepper im Warenkorb.
   Alles additiv und über var(--eb-*) an die Markenfarbe gekoppelt.
   ============================================================ */

/* ----- Restaurant-Kopf (.eb-hero) ----- */
.eb-hero-band {
    background:
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--eb-blue) 11%, #fff) 0%, rgba(255, 255, 255, 0) 62%),
        #fff;
    border-bottom: 1px solid var(--eb-border);
}
.eb-hero-band__inner { padding-top: 28px; padding-bottom: 28px; }

.eb-hero {
    display: flex;
    align-items: center;
    gap: 22px;
}

.eb-hero__logo {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--eb-border);
    border-radius: 26px;
    box-shadow: 0 8px 24px rgba(15, 30, 45, 0.08);
    overflow: hidden;
}
.eb-hero__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 18px;
}

.eb-hero__body { flex: 1 1 auto; min-width: 0; }

.eb-hero__name.eb-local-name {
    font-size: 2.05rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 12px;
}

.eb-hero__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.eb-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--eb-bg-soft);
    color: var(--eb-text-soft);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}
.eb-chip i { font-size: 12px; opacity: 0.85; }

.eb-chip--state { font-weight: 600; }
.eb-chip--open   { background: #e6f6ec; color: #1b7a44; }
.eb-chip--soon   { background: #fff3df; color: #955700; }
.eb-chip--closed { background: #fdeceb; color: #b3261e; }
.eb-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
    flex: 0 0 auto;
}

.eb-chip--link {
    background: #fff;
    border-color: var(--eb-border-strong);
    color: var(--eb-blue-dark);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.eb-chip--link:hover,
.eb-chip--link:focus-visible {
    border-color: var(--eb-blue);
    color: var(--eb-blue);
    background: color-mix(in srgb, var(--eb-blue) 6%, #fff);
    text-decoration: none;
}
.eb-chip__soft { color: var(--eb-text-muted); font-weight: 500; }

/* Bestellart-Karte rechts */
.eb-hero__side {
    display: flex;
    justify-content: flex-end;
}

.eb-fulfil {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 270px;
    max-width: 100%;
    padding: 10px 10px 10px 12px;
    background: #fff;
    border: 1px solid var(--eb-border);
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(15, 30, 45, 0.06);
}
.eb-fulfil__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--eb-blue) 12%, #fff);
    color: var(--eb-blue-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.eb-fulfil__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.eb-fulfil__label { font-size: 15px; font-weight: 700; color: var(--eb-text); }
.eb-fulfil__when  { font-size: 13px; color: var(--eb-text-soft); margin-top: 2px; }
.eb-fulfil__change {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--eb-bg-soft);
    color: var(--eb-blue-dark);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.eb-fulfil__change:hover,
.eb-fulfil__change:focus-visible {
    background: var(--eb-blue);
    color: #fff;
    text-decoration: none;
}
/* Tisch-Modus (custom/dinein): Badge bekommt dieselbe Karte, Text bleibt eine Zeile. */
.eb-fulfil--dinein { padding: 12px 16px; font-weight: 600; color: var(--eb-text); }
.eb-fulfil--dinein .fa { color: var(--eb-blue-dark); }

@media (max-width: 991.98px) {
    .eb-hero__side { justify-content: center; margin-top: 18px; }
    .eb-fulfil { width: 100%; }
}

@media (max-width: 767.98px) {
    .eb-menus-page .container { padding-left: 1.25rem; padding-right: 1.25rem; }
    .eb-hero-band__inner { padding-top: 24px; padding-bottom: 22px; }
    .eb-hero { flex-direction: column; text-align: center; gap: 14px; }
    .eb-hero__logo { width: 92px; height: 92px; border-radius: 24px; }
    .eb-hero__name.eb-local-name { font-size: 1.7rem; margin-bottom: 10px; }
    .eb-hero__chips { justify-content: center; }
    .eb-hero__side { margin-top: 16px; }
}

/* ----- Suche ----- */
.eb-menus-page .menu-search { padding-bottom: 18px !important; }

.eb-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    margin: 0;
    padding: 0 7px 0 18px;
    background: #fff;
    border: 1px solid var(--eb-border);
    border-radius: 999px;
    box-shadow: var(--eb-shadow);
    cursor: text;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.eb-search:focus-within {
    background: #fff;
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--eb-blue) 16%, transparent);
}
.eb-search__icon {
    flex: 0 0 auto;
    margin-right: 12px;
    font-size: 15px;
    color: var(--eb-text-muted);
    transition: color 0.15s ease;
}
.eb-search:focus-within .eb-search__icon { color: var(--eb-blue-dark); }
.eb-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    outline: 0;
    font-size: 15px;
    color: var(--eb-text);
    -webkit-appearance: none;
    appearance: none;
}
.eb-search__input::placeholder { color: var(--eb-text-muted); }
.eb-search__input::-webkit-search-cancel-button,
.eb-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.eb-search__clear {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--eb-bg-soft);
    color: var(--eb-text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.eb-search__clear:hover { background: var(--eb-text); color: #fff; }

/* ----- Kategorie-Leiste ----- */
.eb-menus-page #navbar-categories {
    gap: 4px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.eb-menus-page #navbar-categories .nav-link {
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.eb-menus-page #navbar-categories .nav-link:hover:not(.active) {
    background: var(--eb-bg-soft);
    color: var(--eb-text);
}
.eb-menus-page #navbar-categories .nav-link.active {
    font-weight: 600;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--eb-blue) 30%, transparent);
}

/* Kategorie-Überschriften etwas kräftiger, Beschreibung ruhiger. */
.eb-menus-page .menu-group-toggle {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--eb-text);
}
.eb-menus-page .menu-category > p {
    color: var(--eb-text-soft);
    font-size: 14.5px;
}

/* ----- Mengen-Stepper (Warenkorb, wiederverwendbar) ----- */
.eb-qty {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: var(--eb-bg-soft);
    border-radius: 999px;
}
.eb-qty__btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--eb-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 30, 45, 0.10);
    transition: background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.eb-qty__btn:hover { background: var(--eb-blue); color: #fff; }
.eb-qty__btn--remove { color: var(--eb-text-soft); }
.eb-qty__btn--remove:hover { background: #e5484d; color: #fff; }
.eb-qty__btn.disabled { pointer-events: none; opacity: 0.6; }
.eb-qty__value {
    min-width: 30px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--eb-text);
    font-variant-numeric: tabular-nums;
}
.eb-qty--sm .eb-qty__btn { width: 28px; height: 28px; font-size: 11px; }
.eb-qty--sm .eb-qty__value { min-width: 26px; font-size: 14px; }

/* ----- Warenkorb-Positionen ----- */
.eb-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--eb-border);
}
.eb-cart-item:first-child { padding-top: 0; }
.eb-cart-item:last-child { border-bottom: 0; padding-bottom: 0; }

.eb-cart-item__side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.eb-cart-item__main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
div.eb-cart-item__main { cursor: default; }
button.eb-cart-item__main:hover .eb-cart-item__name { color: var(--eb-blue-dark); }
.eb-cart-item__name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--eb-text);
    overflow-wrap: anywhere;
    transition: color 0.12s ease;
}
.eb-cart-item__qty-inline { color: var(--eb-blue-dark); }
.eb-cart-item .eb-cart-opts { margin-top: 3px; }
.eb-cart-item .eb-cart-opts__row {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--eb-text-soft);
}
.eb-cart-item__comment {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 10px;
    border-radius: 10px;
    background: var(--eb-bg-soft);
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--eb-text-soft);
    text-align: left;
}
.eb-cart-item__comment i { margin-top: 2px; font-size: 11px; }
.eb-cart-item__price {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 15px;
    font-weight: 700;
    color: var(--eb-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.eb-cart-item__price-old { font-size: 12px; font-weight: 500; color: var(--eb-text-muted); }

/* Warenkorb-Box (Desktop) im Kachel-Look der Speisekarte. Auf Mobil gelten
   die Bottom-Sheet-Regeln weiter oben. */
@media (min-width: 992px) {
    .eb-menus-page #cart-box {
        border-color: var(--eb-border) !important;
        border-radius: var(--eb-radius) !important;
        box-shadow: var(--eb-shadow) !important;
        padding: 18px !important;
    }
}
.eb-menus-page #cart-items > h5 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 14px !important;
}
.eb-menus-page #cart-buttons .checkout-btn {
    border-radius: 999px !important;
    font-weight: 700;
    padding-top: 12px;
    padding-bottom: 12px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--eb-blue) 28%, transparent);
}
.eb-menus-page #cart-buttons .checkout-btn.disabled { box-shadow: none; }

/* ----- Optionen im Bestell-Popup -----
   Jede Auswahl ist eine ganze Zeile zum Antippen (50 px hoch, Rahmen,
   gewählt = Markenrand + leichte Tönung). Das Label wird per ::after über
   die ganze Zeile gelegt, damit auch der Rand um das Kästchen zählt.
   Spezifität bewusst hoch (5 Klassen): variants.css hat eigene Zeilenregeln
   für die Größen-Gruppe, hier sollen alle Gruppen gleich aussehen. */
.eb-item-modal .eb-item-modal__options .menu-option { margin-bottom: 20px !important; }
.eb-item-modal .eb-item-modal__options .menu-option:last-child { margin-bottom: 0 !important; }

.eb-item-modal .eb-opt__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 10px;
}
.eb-item-modal .eb-opt__head .eb-opt__title {
    flex: 0 1 auto;
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--eb-text);
}
.eb-item-modal .eb-option-size .eb-opt__head .eb-opt__title {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eb-text-soft);
}
.eb-opt__chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--eb-bg-soft);
    color: var(--eb-text-soft);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.eb-opt__chip--required {
    background: color-mix(in srgb, var(--eb-blue) 12%, #fff);
    color: var(--eb-blue-dark);
}
.eb-opt__hint {
    flex-basis: 100%;
    margin: 0 !important;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--eb-text-muted);
}

.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 0 0 6px;
    padding: 0 14px 0 48px !important;
    background: #fff;
    border: 1px solid var(--eb-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check:last-child { margin-bottom: 0; }
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check:hover {
    border-color: var(--eb-border-strong);
    background: #fbfcfd;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check:has(.form-check-input:checked) {
    border-color: var(--eb-blue);
    background: color-mix(in srgb, var(--eb-blue) 6%, #fff);
    box-shadow: 0 0 0 1px var(--eb-blue) inset;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check:has(.form-check-input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check-input {
    position: absolute;
    left: 14px;
    top: 50%;
    float: none;
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    transform: translateY(-50%);
    border: 2px solid var(--eb-border-strong);
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check-input[type="checkbox"] { border-radius: 7px; }
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check-input:checked {
    background-color: var(--eb-blue);
    border-color: var(--eb-blue);
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check-input:focus {
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-blue) 20%, transparent);
}

.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 10px 0 !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--eb-text);
    cursor: pointer;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check-label::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check-label .float-end {
    float: none !important;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 600 !important;
    color: var(--eb-text-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check:has(.form-check-input:checked) .form-check-label .float-end {
    color: var(--eb-blue-dark);
}

/* Versteckte Werte („n weitere anzeigen") */
.eb-item-modal .eb-item-modal__options .hidden-item-options { margin-top: 6px; }
/* „inklusive" bei Werten ohne Aufpreis (radio-Partial custom.optiondefaults) */
.eb-item-modal .eb-item-modal__options .form-check-label .eb-opt__incl { font-weight: 500 !important; color: var(--eb-text-muted); }
.eb-opt__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-top: 10px;
    padding: 0 14px;
    border: 1px dashed var(--eb-border-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--eb-blue-dark);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.eb-opt__more i { font-size: 11px; }
.eb-opt__more:hover {
    border-style: solid;
    border-color: var(--eb-blue);
    background: color-mix(in srgb, var(--eb-blue) 6%, #fff);
}

/* Auswahlliste (select) */
.eb-item-modal .eb-item-modal__options .option-group .form-select {
    min-height: 50px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--eb-border-strong);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--eb-text);
}
.eb-item-modal .eb-item-modal__options .option-group .form-select:focus {
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-blue) 20%, transparent);
}

/* Mengen-Optionen: Bezeichnung links, Stepper rechts */
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-quantity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    margin: 0 0 8px;
    padding: 6px 8px 6px 14px !important;
    background: #fff;
    border: 1px solid var(--eb-border);
    border-radius: 14px;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-quantity:last-child { margin-bottom: 0; }
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-quantity-label {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--eb-text);
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-quantity-label .float-end {
    float: none !important;
    margin-left: auto;
    padding-left: 10px;
    font-size: 13.5px;
    font-weight: 600 !important;
    color: var(--eb-text-soft);
    white-space: nowrap;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-quantity-input {
    order: 2;
    flex: 0 0 auto;
    padding: 3px;
    background: var(--eb-bg-soft);
    border-radius: 999px;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-quantity-input .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: #fff;
    color: var(--eb-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 1px 2px rgba(15, 30, 45, 0.10);
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-quantity-input .btn:hover {
    background: var(--eb-blue);
    color: #fff;
}
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-quantity-input input {
    width: 34px;
    max-width: 34px !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--eb-text);
}

/* ============================================================
   Bestellart-Popup („ändern" an der Bestellart-Karte), 07.09.2026.
   Hülle = .eb-item-modal, Kacheln = .eb-seg / .eb-addr (checkout.css).
   ============================================================ */
.eb-fm .eb-info-section + .eb-info-section { margin-top: 20px; }

.eb-fm .eb-seg__opt { padding: 12px 8px 10px; }

/* Datum + Uhrzeit nebeneinander, Selects im Kachel-Look */
.eb-fm__when {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.eb-fm .form-floating > .form-select {
    height: 58px;
    padding-left: 14px;
    border: 1.5px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    font-size: 15px;
    font-weight: 600;
    color: var(--eb-text);
}
.eb-fm .form-floating > .form-select:focus {
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-blue) 18%, transparent);
}
.eb-fm .form-floating > label {
    padding-left: 14px;
    color: var(--eb-text-muted);
    font-size: 14px;
}

/* Adresse: Suchfeld + Vorschläge */
.eb-fm .eb-addr-search__input.form-control { font-size: 15px; height: 40px; }
.eb-fm .autocomplete-suggestions {
    margin-top: 8px;
    border: 1px solid var(--eb-border) !important;
    border-radius: var(--eb-radius-sm) !important;
    overflow: hidden;
}
.eb-fm .autocomplete-suggestions .list-group-item {
    border: 0;
    border-bottom: 1px solid var(--eb-border);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--eb-text);
}
.eb-fm .autocomplete-suggestions .list-group-item:last-child { border-bottom: 0; }
.eb-fm .autocomplete-suggestions .list-group-item-action:hover { background: var(--eb-bg-soft); }
.eb-fm .autocomplete-suggestions + div {
    border: 0 !important;
    padding: 4px 4px 0 !important;
    color: var(--eb-text-muted);
}

/* Karte zum Feinjustieren */
.eb-fm__map { margin-top: 12px; }
.eb-fm__map-hint {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--eb-text-soft);
}
.eb-fm #map.map-container {
    height: 200px;
    border-radius: var(--eb-radius-sm);
    overflow: hidden;
    padding: 0;
}
.eb-fm__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--eb-text-soft);
}
.eb-fm__consent i { color: var(--eb-blue); margin-top: 3px; }
.eb-fm__consent a { color: var(--eb-blue-dark); font-weight: 600; }

/* Gespeicherte Adressen (angemeldete Gäste) */
.eb-fm__saved-hint {
    margin: 12px 0 8px;
    font-size: 13.5px;
    color: var(--eb-text-soft);
}
.eb-fm__saved-hint a { color: var(--eb-blue-dark); font-weight: 600; }
.eb-fm__saved { display: flex; flex-direction: column; gap: 6px; }
.eb-fm__saved-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--eb-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.eb-fm__saved-row:hover { border-color: var(--eb-blue); background: color-mix(in srgb, var(--eb-blue) 6%, #fff); }
.eb-fm__saved-row > .fa-location-dot { color: var(--eb-blue-dark); }
.eb-fm__saved-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.eb-fm__saved-chev { color: var(--eb-text-muted); font-size: 12px; }
.eb-fm__saved-empty {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--eb-radius-sm);
    background: var(--eb-bg-soft);
    font-size: 13.5px;
    color: var(--eb-text-soft);
}

/* Bestätigen-Button: volle Breite, Text mittig, Haken rechts */
.eb-fm__submit { width: 100%; justify-content: center; }
.eb-fm__submit i { font-size: 13px; }
.eb-fm__submit.disabled { opacity: 0.7; pointer-events: none; }