/* ============================================================
   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; }

/* ----- Foto auf der Kachel (Support\FotoAnzeige, 16.10.2026) -----
   Quadratisch rechts neben dem Text, der Plus-Knopf sitzt auf der
   Bildecke. Nur wenn das Restaurant „Fotos auf der Kachel“ eingestellt
   hat; sonst gibt es weder .eb-menu-card--has-thumb noch das Bild. */
.eb-menu-card__thumb-wrap {
    flex: 0 0 auto;
    position: relative;
}

.eb-menu-card__thumb {
    display: block;
    width: 104px;
    height: 104px;
    max-width: none;
    object-fit: cover;
    border-radius: var(--eb-radius-sm);
    background-color: var(--eb-bg-soft);
}

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

/* Mit Foto sitzt der Plus-Knopf auf dem Bild, der Text braucht rechts
   keinen Platz mehr für ihn. */
.eb-menu-card--has-thumb .eb-menu-card__content { padding-right: 0; }

.eb-menu-card__thumb-wrap .eb-menu-card__add {
    right: -6px;
    bottom: -6px;
    width: 38px;
    height: 38px;
    font-size: 15px;
    box-shadow: 0 0 0 3px var(--eb-bg), 0 4px 12px rgba(33, 126, 166, 0.28);
}

/* ----- 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: 88px; height: 88px; }
    .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);
}

/* Gericht ohne Optionen und ohne „Dazu bestellen": die Anmerkung steht direkt
   unter dem Kopf, der schon eine Trennlinie hat. Keine zweite Linie. */
.eb-item-modal__body:not(:has(.menu-option, .eb-dazu)) .eb-item-modal__options { margin-bottom: 0; }
.eb-item-modal__body:not(:has(.menu-option, .eb-dazu)) .eb-item-modal__comment {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.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"]: das Trinkgeld klappt auf
   eine Zeile zusammen, damit ohne internes Scrollen mehr Platz bleibt.
   Der Gast klappt es mit einem Klick wieder auf. Der Gutschein hängt
   NICHT mehr daran (siehe eigener Block weiter unten).

   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 als eine Zeile -----
   Die Zeile (.eb-cart-mini) steht immer im Markup und ist 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 {
        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 {
        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 {
        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;
    }
    /* 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; }
}

/* ----- Gutschein: eine Ansicht, immer dieselbe -----
   Der Block hing früher am Kompakt-Modus: im Kompakt-Modus eine Kachel-Zeile,
   sonst ein dauerhaft offenes Eingabefeld. Da sticky-cart.js nach jeder
   Warenkorb-Änderung neu misst, wechselte die Ansicht mitten in der Bestellung
   (z. B. nach der Trinkgeld-Auswahl). Deshalb hängt hier jetzt NICHTS mehr an
   einer Messung: kleiner unterstrichener Link, Feld zu, Klick öffnet es.
   Der Auf-Zustand steht an <html> (data-eb-couponopen), weil Livewire die Box
   bei jeder Mengenänderung neu morpht und alles im Warenkorb-DOM verlöre. */
#cart-coupon.eb-coupon {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.eb-coupon__link {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--eb-text-muted);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.eb-coupon__link:hover,
.eb-coupon__link:focus-visible {
    color: var(--eb-text);
}
/* Zu, solange der Gast den Link nicht angetippt hat. Ein eingelöster Gutschein
   hält das Feld serverseitig offen (is-applied), damit er änderbar bleibt. */
#cart-coupon.eb-coupon .eb-cart-collapse__body {
    display: none;
}
html[data-eb-couponopen="1"] #cart-coupon.eb-coupon .eb-cart-collapse__body,
#cart-coupon.eb-coupon.is-applied .eb-cart-collapse__body {
    display: block;
    margin-top: 10px;
}

/* ----- 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;
}
/* Ohne „ändern"-Button (eine Bestellart, nur schnellstmöglich): rechts
   genauso viel Luft wie links, sonst sitzt der Text am Rand. */
.eb-fulfil--fest { padding-right: 16px; }
/* 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; }