/* ============================================================
   Online-Bestellung – Speisekarte-Steuerung, Warenkorb-Button,
   Warenkorb-/Checkout-/Bestätigungsseiten
   ============================================================ */

/* ---------- "In den Warenkorb" auf der Speisekarte ---------- */
.op-order{
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;
}
/* Preis-Spalte (rechte Spalte einer Gericht-Reihe): Preis / Variant-Select / Cart-Button
   jeweils in eigener Zeile, rechtsbündig. */
.op-price-col.elementor-column > .elementor-widget-wrap.elementor-element-populated{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:8px !important;
}
.op-price-col .op-order{
    display:flex;flex-direction:column;align-items:flex-end;
    gap:8px;margin:0;
}
.op-price{white-space:nowrap}
/* Preis-Spalte (rechte Spalte einer Gericht-Reihe): 50% Desktop / 30% Mobile */
.elementor-3608 .elementor-element.elementor-element-5405764a{width:50%}
@media (max-width:768px){
    .elementor-3608 .elementor-element.elementor-element-5405764a{width:30%}
}
.op-variant{
    background:#211d1a;color:#ece6dc;border:1px solid #3a342c;
    border-radius:999px;padding:0 32px 0 14px;font-size:13px;font-family:inherit;
    height:40px;line-height:40px;cursor:pointer;max-width:220px;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23a99e8d' d='M3.5 6l4.5 4.5L12.5 6z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:14px;
}
.op-variant:focus{outline:0;border-color:#eda900}
.op-add{
    display:inline-flex;align-items:center;justify-content:center;
    background:#eda900;color:#1a1510;border:0;border-radius:50%;cursor:pointer;
    width:40px;height:40px;padding:0;font-family:inherit;
    box-shadow:0 2px 8px rgba(237,169,0,.22);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.op-add-icon{width:18px;height:18px;flex-shrink:0;display:block}
.op-add:hover,
.op-add:focus-visible{
    background:#efb554;color:#1a1510;
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(237,169,0,.42);
}
.op-add:active{
    transform:translateY(0);
    box-shadow:0 1px 4px rgba(237,169,0,.3);
    background:#d99800;
}
.op-add:disabled{
    opacity:.55;cursor:default;
    transform:none;box-shadow:0 1px 3px rgba(0,0,0,.2);
}

/* ---------- Schwebender Warenkorb-Button (alle Seiten) ---------- */
.op-fab{
    position:fixed;right:22px;bottom:22px;z-index:9998;
    width:58px;height:58px;border-radius:50%;
    background:#eda900;color:#1a1510;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 22px rgba(0,0,0,.5);transition:.25s;
}
.op-fab:hover{background:#efb554;transform:translateY(-2px)}
.op-fab svg{width:26px;height:26px}
.op-fab-count{
    position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;
    background:#1a1510;color:#efb554;border:2px solid #eda900;border-radius:20px;
    font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
    padding:0 5px;font-family:'Source Sans Pro',Arial,sans-serif;
}
.op-fab-count.op-empty-badge{display:none}

/* ---------- Toast-Meldung ---------- */
.op-toast{
    position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);
    background:#211d1a;border:1px solid #eda900;color:#ece6dc;
    padding:13px 24px;border-radius:4px;font-size:14px;z-index:99998;
    box-shadow:0 8px 26px rgba(0,0,0,.5);opacity:0;pointer-events:none;
    transition:opacity .3s,transform .3s;font-family:'Source Sans Pro',Arial,sans-serif;
}
.op-toast.op-show{opacity:1;transform:translateX(-50%) translateY(0)}
.op-toast.op-err{border-color:#d9776b}

/* ============================================================
   Bestellseiten (Warenkorb / Checkout / Bestätigung)
   ============================================================ */
.op-page{
    background:#181513;color:#ece6dc;min-height:100vh;
    font-family:'Source Sans Pro',Arial,sans-serif;
    padding:150px 22px 80px;
}
.op-container{max-width:1080px;margin:0 auto}
.op-hero-title{
    font-family:'Playfair Display',Georgia,serif;color:#efb554;
    font-size:clamp(30px,5vw,46px);text-align:center;margin:0 0 6px;
}
.op-hero-sub{text-align:center;color:#a99e8d;margin:0 0 44px;font-size:15px}

.op-card{
    background:#211d1a;border:1px solid #3a342c;border-radius:5px;padding:26px 28px;
}
.op-card + .op-card{margin-top:22px}
.op-card h2{
    font-family:'Playfair Display',Georgia,serif;color:#efb554;
    font-size:22px;margin:0 0 18px;
}

/* Tabelle */
.op-table{width:100%;border-collapse:collapse}
.op-table th{
    text-align:left;color:#a99e8d;font-weight:600;font-size:12px;
    text-transform:uppercase;letter-spacing:.6px;padding:0 10px 12px;
    border-bottom:1px solid #3a342c;
}
.op-table td{padding:14px 10px;border-bottom:1px solid #2a2520;vertical-align:middle}
.op-table tr:last-child td{border-bottom:0}
.op-dish{font-family:'Playfair Display',Georgia,serif;color:#e5cfbd;font-size:17px}
.op-variant-label{display:block;color:#a99e8d;font-size:13px;margin-top:2px}
.op-right{text-align:right}
.op-center{text-align:center}
.op-qty{
    width:62px;background:#181513;color:#ece6dc;border:1px solid #3a342c;
    border-radius:3px;padding:7px;text-align:center;font-family:inherit;font-size:14px;
}
.op-remove{color:#a99e8d;font-size:20px;text-decoration:none;line-height:1}
.op-remove:hover{color:#d9776b}

.op-total{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-top:18px;padding-top:16px;border-top:1px solid #3a342c;
    font-family:'Playfair Display',Georgia,serif;
}
.op-total span:first-child{color:#e5cfbd;font-size:18px}
.op-total span:last-child{color:#eda900;font-size:24px;font-weight:700}
.op-line{display:flex;justify-content:space-between;color:#a99e8d;padding:5px 0;font-size:14px}
.op-line span:last-child{color:#ece6dc}

/* Buttons */
.op-btn{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    border:1px solid #eda900;border-radius:3px;padding:13px 28px;
    font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    font-family:'Source Sans Pro',Arial,sans-serif;transition:.25s;text-decoration:none;
    background:#eda900;color:#1a1510;
}
.op-btn:hover{background:#efb554;border-color:#efb554}
.op-btn-ghost{background:transparent;color:#efb554}
.op-btn-ghost:hover{background:#3a342c;color:#efb554}
.op-btn-lg{padding:16px 38px;font-size:14px}
.op-btn-block{display:flex;width:100%;justify-content:center}
.op-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}

/* Formular */
.op-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.op-field{margin-bottom:16px}
.op-field label{display:block;color:#e5cfbd;font-size:14px;margin-bottom:6px;font-weight:600}
.op-field input,.op-field select,.op-field textarea{
    width:100%;background:#181513;color:#ece6dc;border:1px solid #3a342c;
    border-radius:3px;padding:11px 13px;font-family:inherit;font-size:15px;
}
.op-field input:focus,.op-field select:focus,.op-field textarea:focus{
    outline:0;border-color:#eda900;
}
.op-hint{color:#8a8170;font-size:13px;margin:5px 0 0}
.op-alert{padding:12px 16px;border-radius:4px;margin-bottom:18px;font-size:14px;line-height:1.5}
.op-alert-ok{background:#1e4620;color:#d4edda;border:1px solid #2e7d32}
.op-alert-err{background:#4a1f1f;color:#f5c6cb;border:1px solid #a94442}
.op-alert-err ul{margin:0;padding-left:18px}

.op-empty{text-align:center;padding:50px 20px;color:#a99e8d}
.op-empty p{margin:0 0 22px;font-size:16px}

@media(max-width:760px){
    .op-grid{grid-template-columns:1fr}
    .op-page{padding-top:120px}
    .op-table th:nth-child(3),.op-table td:nth-child(3){display:none}
}

/* ---------- Checkout: Zahlungsarten-Auswahl ---------- */
.op-pay-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 8px}
.op-pay-opt{
    display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
    border:1px solid rgba(255,255,255,0.12);border-radius:8px;cursor:pointer;
    background:rgba(255,255,255,0.02);
    transition:border-color .15s, background .15s;
}
.op-pay-opt:hover{border-color:rgba(229,207,189,0.5)}
.op-pay-opt input[type=radio]{margin-top:3px;accent-color:#e5cfbd}
.op-pay-opt:has(input:checked){border-color:#e5cfbd;background:rgba(229,207,189,0.06)}
.op-pay-opt-disabled{opacity:.55;cursor:not-allowed;background:rgba(255,255,255,0.01)}
.op-pay-opt-disabled:hover{border-color:rgba(255,255,255,0.12)}
.op-pay-body{display:flex;flex-direction:column;gap:2px;flex:1}
.op-pay-body strong{color:#ece6dc;font-weight:600}
.op-pay-body small{color:#9d958a;font-size:12.5px}
.op-pay-instructions{
    margin-top:10px;padding:10px 12px;border-radius:8px;
    background:rgba(229,207,189,0.08);color:#d8d1c5;
    font-size:13.5px;line-height:1.5;white-space:pre-wrap;
}

/* ---------- Warenkorb-Seite: neues Card-Layout ---------- */
.op-cart-container{max-width:760px}
.cart-warn{
    display:flex;align-items:flex-start;gap:10px;
    background:#fde68a;color:#5b4416;
    padding:14px 18px;border-radius:10px;margin:0 0 24px;
    font-size:15px;line-height:1.45;
    box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.cart-warn[hidden]{display:none}
.cart-warn svg{flex-shrink:0;width:22px;height:22px;color:#a16207;margin-top:1px}
.cart-warn strong{font-weight:700}

.cart-list{display:flex;flex-direction:column;gap:0;margin:0 0 24px}
.cart-item{
    background:transparent;
    padding:18px 4px;
    border-bottom:1px solid #2a2520;
    transition:opacity .2s;
}
.cart-item:last-child{border-bottom:0}
.cart-item-top{
    display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
}
.cart-item-info{flex:1 1 auto;min-width:0}
.cart-item-name{
    margin:0;font-family:'Source Sans Pro',Arial,sans-serif;font-weight:700;
    color:#ece6dc;font-size:18px;line-height:1.3;
}
.cart-item-variant{
    margin:6px 0 0;color:#a99e8d;font-size:14px;
}
.cart-item-price{
    flex-shrink:0;color:#efb554;font-size:17px;font-weight:600;
    font-family:'Source Sans Pro',Arial,sans-serif;
}
.cart-item-bottom{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    margin-top:14px;
}

/* Notiz hinzufügen Button */
.cart-note-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:#211d1a;color:#a99e8d;border:1px solid #3a342c;
    border-radius:999px;cursor:pointer;
    padding:8px 16px;font-size:13px;font-family:inherit;
    transition:color .15s, background .15s, border-color .15s;
    max-width:60%;
}
.cart-note-btn:hover{color:#efb554;border-color:#eda900}
.cart-note-btn svg{width:14px;height:14px;flex-shrink:0}
.cart-note-btn span{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Quantity-Pill (− qty +) */
.cart-qty{
    display:inline-flex;align-items:center;
    background:#211d1a;border:1px solid #3a342c;border-radius:999px;
    overflow:hidden;flex-shrink:0;
}
.cart-qty-btn{
    background:transparent;border:0;cursor:pointer;
    color:#ece6dc;padding:8px 14px;display:flex;align-items:center;justify-content:center;
    transition:color .15s, background .15s;
}
.cart-qty-btn:hover{color:#1a1510;background:#eda900}
.cart-qty-btn:hover svg{color:#1a1510}
.cart-qty-btn svg{width:16px;height:16px;display:block}
.cart-qty-dec:hover{color:#d9776b;background:rgba(217,119,107,0.12)}
.cart-qty-dec:hover svg{color:#d9776b}
.cart-qty-num{
    min-width:32px;text-align:center;font-weight:700;color:#ece6dc;font-size:15px;
    padding:0 4px;user-select:none;
}

/* Notiz-Edit-Bereich (toggles) */
.cart-note-edit{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.cart-note-edit[hidden]{display:none}
.cart-note-input{
    width:100%;background:#181513;color:#ece6dc;border:1px solid #3a342c;
    border-radius:6px;padding:10px 12px;font-family:inherit;font-size:14px;
    resize:vertical;min-height:60px;
}
.cart-note-input:focus{outline:0;border-color:#eda900}
.cart-note-actions{display:flex;gap:8px;justify-content:flex-end}
.cart-note-actions .op-btn{padding:8px 18px;font-size:12px}

.cart-summary{margin-top:12px}

@media (max-width:520px){
    .cart-item-top{gap:12px}
    .cart-item-name{font-size:16px}
    .cart-item-bottom{flex-wrap:wrap}
    .cart-note-btn{max-width:100%;flex:1 1 auto}
    .cart-warn{font-size:14px;padding:12px 14px}
}

/* ---------- Reservation: Gäste-Dropdown (passt zu mf-input Stil) ---------- */
.mf-guests-select{
    appearance:none !important;-webkit-appearance:none !important;-moz-appearance:none !important;
    cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23a99e8d' d='M3.5 6l4.5 4.5L12.5 6z'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:right 20px center !important;
    background-size:14px !important;
    padding-right:48px !important;
}
.mf-guests-select option{
    background:#181513;color:#ece6dc;
    padding:8px 12px;
}

/* ---------- Reservation: Zeit-Slot-Picker ---------- */
.op-time-wrapper{position:relative}
.op-time-wrapper .op-time{
    cursor:pointer;padding-right:42px;
}
.op-time-wrapper .op-time-icon{
    position:absolute;top:50%;right:14px;width:18px;height:18px;
    transform:translateY(-50%);color:#a99e8d;pointer-events:none;
}
.op-time-wrapper.is-open .op-time-icon{color:#eda900}
.op-time-panel{
    position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:100;
    background:#1c1814;border:1px solid #3a342c;border-radius:8px;
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    padding:14px;max-height:340px;overflow:auto;
}
.op-time-panel[hidden]{display:none}
.op-time-panel-inner{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(78px, 1fr));
    gap:8px;
}
.op-time-slot{
    background:#211d1a;color:#ece6dc;border:1px solid #3a342c;border-radius:6px;
    padding:8px 6px;font-size:13px;font-weight:600;font-family:inherit;
    cursor:pointer;transition:background .15s, border-color .15s, color .15s, transform .1s;
    text-align:center;
}
.op-time-slot:hover{background:#2a2520;border-color:#eda900;color:#efb554}
.op-time-slot.is-active{background:#eda900;color:#1a1510;border-color:#eda900}
.op-time-slot:active{transform:scale(.96)}
@media (max-width:480px){
    .op-time-panel-inner{grid-template-columns:repeat(auto-fill, minmax(70px, 1fr));gap:6px}
    .op-time-slot{padding:9px 4px;font-size:12.5px}
}

/* ---------- Mobile-Header: Logo links, Hamburger rechts, sticky ---------- */
@media (max-width:1024px){
    /* Header sticky am oberen Rand.
       WICHTIG: KEIN backdrop-filter hier! backdrop-filter erzeugt einen
       containing block für position:fixed-Nachfahren – das verschiebt das
       Off-Canvas-Menü um die Padding-Breite des Elternsection nach rechts. */
    .elementor-3499 .elementor-element-1cc5ee31{
        position:sticky;top:0;z-index:100;width:100%;
        background:#0a0a0a;  /* solider Hintergrund statt blur, da blur containing block erzwingt */
        border-bottom:1px solid rgba(229,207,189,0.18);
    }
    .elementor-3499 .elementor-element-1cc5ee31 > .elementor-container{
        min-height:64px;width:100%;max-width:100%;padding:0 16px;
        display:flex !important;align-items:center !important;
        justify-content:space-between !important;flex-wrap:nowrap !important;
    }
    /* Logo-Spalte: flexibel zentriert */
    .elementor-3499 .elementor-element-5396ec70{
        width:auto !important;flex:1 1 auto !important;
        margin:0 !important;padding:0 !important;
    }
    .elementor-3499 .elementor-element-5396ec70 .elementor-widget-wrap{
        align-items:center !important;justify-content:center !important;padding:0 !important;
    }
    .elementor-3499 .elementor-element-32bae47{text-align:center !important;padding:0 !important;margin:0 !important}
    .op-header-logo{max-height:70px !important;width:auto !important;display:inline-block}
    /* Hamburger-Spalte rechts, fixe Inhalt-Breite */
    .elementor-3499 .elementor-element-20eea808{
        width:auto !important;flex:0 0 auto !important;
        margin:0 !important;padding:0 !important;
    }
    .elementor-3499 .elementor-element-20eea808 .elementor-widget-wrap{
        justify-content:flex-end !important;padding:0 !important;
    }
}

/* ---------- Hamburger-Button rechtsbündig auf Phone, ohne Rahmen ---------- */
@media (max-width:767px){
    .elementor-3499 .elementor-element.elementor-element-2f8155eb button.elementskit-menu-hamburger{
        float:right;
        border-width:0px 0px 0px 0px;
    }
}

/* ---------- Anti-Overflow auf Mobile ---------- */
@media (max-width:768px){
    /* Nur html: verhindert horizontalen Scroll, ohne body/fixed-Elemente zu beeinträchtigen
       (Off-Canvas-Menü, Toast etc. nutzen position:fixed und sollen sichtbar bleiben) */
    html{overflow-x:hidden}
    .op-page,.op-container{max-width:100%}
    .op-grid{min-width:0}
    .op-card{min-width:0;max-width:100%}
    .elementor-3499 .elementor-section{min-width:0;max-width:100%}
    .elementor-3499 .elementor-container{min-width:0;max-width:100%}
}

/* ---------- Mobile Off-Canvas-Menü: full-height + slide-in von links ---------- */
@media (max-width:1024px){
    .elementskit-menu-container.elementskit-menu-offcanvas-elements{
        position:fixed !important;
        top:0 !important;left:-100% !important;
        width:85% !important;max-width:340px !important;
        height:100vh !important;height:100dvh !important;
        z-index:99999 !important;
        background:#1c1814 !important;
        padding:24px 20px !important;
        overflow-y:auto !important;
        transition:left .35s ease !important;
        /* Flex-column mit explizitem `order`: Identity-Panel (Logo) zuerst,
           Menü-Items danach. UL bekommt flex:0 0 auto, damit es nicht den
           Restplatz füllt und eine Lücke entsteht. */
        display:flex !important;flex-direction:column !important;
        justify-content:flex-start !important;
        align-items:stretch !important;gap:0 !important;
    }
    .elementskit-menu-container.elementskit-menu-offcanvas-elements > *{
        flex:0 0 auto !important;
    }
    .elementskit-menu-container.elementskit-menu-offcanvas-elements.active{
        left:0 !important;
        box-shadow:6px 0 26px rgba(0,0,0,.5) !important;
    }

    /* Identity-Panel (Logo + X) ZUERST visuell, dann Menü-Items */
    .elementskit-menu-container .elementskit-nav-identity-panel{
        order:-1 !important;
        display:block !important;width:100% !important;
        text-align:center !important;
        padding:0 0 18px 0 !important;margin:0 0 12px 0 !important;
        border-bottom:1px solid rgba(229,207,189,0.18) !important;
        position:static !important;
    }
    .elementskit-menu-container .elementskit-navbar-nav{order:1 !important}
    .elementskit-menu-container .elementskit-nav-identity-panel > *{
        float:none !important;margin:0 !important;
    }
    .elementskit-menu-container .elementskit-nav-logo{display:inline-block !important}
    .elementskit-menu-container .op-header-logo,
    .elementskit-menu-container .elementskit-nav-identity-panel img{
        max-height:70px !important;width:auto !important;display:inline-block !important;
    }

    /* X-Close: absolut oben rechts vom Menü, immer sichtbar */
    .elementskit-menu-container .elementskit-menu-close{
        position:absolute !important;top:12px !important;right:14px !important;
        background:transparent !important;border:0 !important;
        color:#ece6dc !important;font-size:26px !important;font-weight:300 !important;
        cursor:pointer !important;padding:6px 12px !important;line-height:1 !important;
        z-index:2;
    }
    .elementskit-menu-container .elementskit-menu-close:hover{color:#eda900 !important}

    /* Menü-Items vertikal, weiß auf dunkel */
    .elementskit-menu-container .elementskit-navbar-nav{
        display:block !important;
        list-style:none !important;padding:0 !important;margin:0 !important;
        width:100% !important;
    }
    .elementskit-menu-container .elementskit-navbar-nav > li{
        display:block !important;width:100% !important;
        border-bottom:1px solid rgba(229,207,189,0.12) !important;
        float:none !important;
    }
    .elementskit-menu-container .elementskit-navbar-nav > li > a{
        display:block !important;width:100% !important;
        padding:14px 4px !important;
        color:#ece6dc !important;font-size:16px !important;font-weight:500 !important;
        text-decoration:none !important;text-transform:none !important;
        background:transparent !important;
    }
    .elementskit-menu-container .elementskit-navbar-nav > li > a:hover,
    .elementskit-menu-container .elementskit-navbar-nav > li.active > a,
    .elementskit-menu-container .elementskit-navbar-nav > li.current-menu-item > a{
        color:#eda900 !important;background:transparent !important;
    }

    /* Sticky-Header runter im Stack: Menü muss darüber liegen */
    .elementor-3499 .elementor-element-1cc5ee31{z-index:50 !important}

    /* Halbtransparente Overlay-Schicht hinter dem Menü */
    .elementskit-menu-overlay{
        position:fixed !important;top:0 !important;left:0 !important;
        width:100% !important;height:100vh !important;height:100dvh !important;
        background:rgba(0,0,0,.55) !important;
        z-index:99998 !important;
        opacity:0;pointer-events:none;
        transition:opacity .25s ease !important;
    }
    .elementskit-menu-overlay.active,
    .elementskit-menu-container.active ~ .elementskit-menu-overlay{
        opacity:1 !important;pointer-events:auto !important;
    }
}

/* ---------- Mobile-Bottom-Bar (Schnellzugriff) ---------- */
.mb-bar{display:none}
@media (max-width:768px){
    .mb-bar{
        display:flex;position:fixed;left:0;right:0;bottom:0;z-index:999;
        background:rgba(10,10,10,0.94);backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        border-top:1px solid rgba(229,207,189,0.18);
        padding:6px 0 max(6px,env(safe-area-inset-bottom));
    }
    .mb-bar-item{
        flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
        padding:6px 4px;text-decoration:none;color:#cfc6b8;
        font-size:11px;line-height:1.2;text-align:center;
        transition:color .15s;position:relative;
    }
    .mb-bar-item:hover,.mb-bar-item:focus{color:#e5cfbd}
    .mb-bar-item.is-active{color:#e5cfbd}
    .mb-bar-item.is-active::before{
        content:"";position:absolute;top:-6px;left:25%;right:25%;
        height:2px;background:#e5cfbd;border-radius:2px;
    }
    .mb-icon{width:22px;height:22px;flex-shrink:0}
    .mb-bar-cart .mb-badge{
        position:absolute;top:2px;right:calc(50% - 24px);
        background:#e5cfbd;color:#0a0a0a;
        font-size:10px;font-weight:700;
        min-width:16px;height:16px;line-height:16px;
        border-radius:10px;padding:0 5px;text-align:center;
    }
    .mb-bar-cart .mb-badge.is-empty{display:none}
    /* Verstecken: floating cart + bottom-padding fürs Layout */
    .op-fab{display:none !important}
    body{padding-bottom:64px}
}

/* ---------- Speisekarte: Kategorie-Tabs (Sticky) ---------- */
.op-cat-tabs{
    position:sticky;top:0;z-index:50;
    background:rgba(10,10,10,0.94);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(229,207,189,0.18);
    margin:0 0 24px;
}
.op-cat-tabs-inner{
    display:flex;gap:4px;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;
    padding:10px 16px;
    max-width:1200px;margin:0 auto;
    scroll-behavior:smooth;
}
.op-cat-tabs-inner::-webkit-scrollbar{display:none}
/* Prev/Next-Pfeile am Rand der Tab-Leiste – nur sichtbar, wenn weiter scrollbar */
.op-cat-tabs-arrow{
    position:absolute;top:0;bottom:0;width:54px;z-index:2;
    display:flex;align-items:center;border:0;cursor:pointer;
    color:#e5cfbd;padding:0;
    opacity:0;pointer-events:none;transition:opacity .15s;
}
.op-cat-tabs-arrow.is-visible{opacity:1;pointer-events:auto}
/* reset.css setzt button:hover{background:#c36} – höhere Spezifität für Hover */
.op-cat-tabs-arrow,.op-cat-tabs-arrow:hover,.op-cat-tabs-arrow:focus{
    border:0;border-radius:0;
}
.op-cat-tabs-arrow:hover{color:#fff}
.op-cat-tabs-arrow svg{width:18px;height:18px}
/* an die innere max-width:1200px andocken; solider Block am Chevron, Fade nach innen,
   damit Tab-Text nicht durch das Symbol scheint (Tab-Bar-Farbe ≈ #0a0a0a) */
.op-cat-tabs-arrow-prev{
    left:max(0px, calc(50% - 600px));justify-content:flex-start;padding-left:8px;
    background:linear-gradient(to right, #0a0a0a 0, #0a0a0a 60%, rgba(10,10,10,0) 100%);
}
.op-cat-tabs-arrow-prev:hover{
    background:linear-gradient(to right, #0a0a0a 0, #0a0a0a 60%, rgba(10,10,10,0) 100%);
}
.op-cat-tabs-arrow-next{
    right:max(0px, calc(50% - 600px));justify-content:flex-end;padding-right:8px;
    background:linear-gradient(to left, #0a0a0a 0, #0a0a0a 60%, rgba(10,10,10,0) 100%);
}
.op-cat-tabs-arrow-next:hover{
    background:linear-gradient(to left, #0a0a0a 0, #0a0a0a 60%, rgba(10,10,10,0) 100%);
}
.op-cat-tab{
    flex-shrink:0;
    padding:8px 16px;
    border-radius:999px;
    color:#cfc6b8;
    text-decoration:none;font-size:14px;font-weight:500;
    white-space:nowrap;
    border:1px solid transparent;
    /* Sanfte cubic-bezier ease (Material „standard easing"), inkl. transform */
    transition:color .35s cubic-bezier(.4,0,.2,1),
               background .35s cubic-bezier(.4,0,.2,1),
               border-color .35s cubic-bezier(.4,0,.2,1),
               transform .25s cubic-bezier(.4,0,.2,1),
               box-shadow .35s cubic-bezier(.4,0,.2,1);
    transform:scale(1);
}
.op-cat-tab:hover{color:#e5cfbd;background:rgba(229,207,189,0.06)}
.op-cat-tab.is-active{
    color:#0a0a0a;background:#e5cfbd;
    border-color:#e5cfbd;font-weight:600;
    transform:scale(1.04);
    box-shadow:0 4px 12px rgba(229,207,189,.18);
}
/* Tab-Panels: nur das aktive sichtbar; Inhalt zentriert + lesbar begrenzen */
.op-cat-panel{display:none}
.op-cat-panel.is-active{display:block}
.op-cat-panel > .elementor-container{max-width:1200px;margin:0 auto}
/* Verfügbarkeits-Hinweis (z.B. „11:30–15:00, Mo–Fr") direkt unter Kategorie-Titel */
.op-cat-note{
    margin:-10px 0 18px;
    color:#a99e8d;font-size:13.5px;font-style:italic;letter-spacing:.3px;
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 12px;border-radius:4px;
    background:rgba(229,207,189,0.06);border-left:2px solid #eda900;
}
.op-cat-note::before{
    content:"\f017";font-family:"Font Awesome 5 Free","FontAwesome",sans-serif;
    font-weight:900;color:#eda900;font-style:normal;font-size:13px;
}
/* Ab 1024px: 2 Gerichte pro Reihe (Überschrift bleibt voll breit) */
@media (min-width:1024px){
    .op-cat-panel > .elementor-container > .elementor-column > .elementor-widget-wrap{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:50px;
        align-items:start;
    }
    .op-cat-panel > .elementor-container > .elementor-column > .elementor-widget-wrap > *:not(.elementor-inner-section){
        grid-column:1 / -1;
    }
    /* Gerichte-Reihe füllt nur ihre Grid-Zelle (verhindert Überlappung) */
    .op-cat-panel > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-inner-section,
    .op-cat-panel > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-inner-section > .elementor-container{
        max-width:100%;width:100%;min-width:0;
    }
}
@media (max-width:768px){
    .op-cat-tabs-inner{padding:8px 12px}
    .op-cat-tab{padding:6px 12px;font-size:13px}
}