/* =====================================================================
   orderio · Redesign-Layer 1 — Produktliste + Kategorien
   Lädt NACH der bestehenden style.css, überschreibt gezielt.
   NUR auf der Testseite (demotest.orderio.de) aktiv.
   Rollback: <link> in includes/header.php entfernen.
   1rem = 10px · Akzent bleibt --primary_color (pro Shop steuerbar)
   ===================================================================== */

:root{
  --rd-card: 16px;
  --rd-lg: 20px;
  --rd-ink: #17150f;
  --rd-muted: #8a857d;
  --rd-line: #efece6;
  /* WICHTIG: --primary_color wird pro Shop in includes/header.php (:root)
     aus der DB ($settings["primary_color"]) injiziert und steht VOR diesem
     Stylesheet. Hier bewusst NICHT definieren, sonst würde beim Live-Gang
     jede Shop-Farbe überschrieben. Jeder Shop nutzt so seine eigene Farbe. */
}

/* ---------- Kategorie-Sektion: Cover-Bild mit Titel-Overlay ---------- */
.menu-list-item .food-list-item-header{
  position: relative;
  margin-bottom: 1.8rem;
}
.menu-list-item .food-list-item-header .cover-image{
  height: 15rem;
  border-radius: var(--rd-lg);
  overflow: hidden;
  background: #2a2622;                /* Fallback, falls Kategorie kein Bild hat */
}
@media (max-width: 767px){
  .menu-list-item .food-list-item-header .cover-image{ height: 12.5rem; }
}
.menu-list-item .food-list-item-header .cover-image::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.12) 55%, rgba(0,0,0,0));
}
.menu-list-item .food-list-item-header .menu-title{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: transparent;
  color: #fff;
  padding: 1.6rem 2rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.menu-list-item .food-list-item-header .menu-title .small{
  color: rgba(255,255,255,.9);
  font-weight: 400;
  margin-top: .4rem !important;
}

/* ---------- Produktkarte ---------- */
.menu-list-item .food-list-item-collapse{ margin-bottom: 1.2rem; }
.menu-list-item .food-list-item-collapse .menu-header{
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-card);
  box-shadow: 0 2px 10px rgba(30,25,20,.045);
  padding: 1.7rem 1.9rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.menu-list-item .food-list-item-collapse .menu-header:hover{
  background: #fff;
  box-shadow: 0 8px 22px rgba(30,25,20,.10);
  transform: translateY(-1px);
}

/* Name, Beschreibung, "Wahl aus:" */
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .t{
  font-size: 1.6rem; font-weight: 600; color: var(--rd-ink); margin-bottom: .4rem;
}
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .t a{
  font-size: 1.1rem; color: var(--rd-muted);
  border: 1px solid var(--rd-line); padding: .2rem .8rem;
  border-radius: 999px; margin-left: .8rem !important;
}
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .v{
  font-size: 1.3rem; color: var(--rd-muted); margin-bottom: .8rem; line-height: 1.5;
}
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .s{
  font-size: 1.2rem; color: var(--rd-muted); font-style: italic;
}

/* Preis */
.prd-price .p-last{ font-size: 1.7rem; font-weight: 600; color: var(--primary_color); }
.prd-price .p-first{ font-size: 1.3rem; color: var(--rd-muted); }

/* Produktbild: großer Kreis -> kompaktes abgerundetes Rechteck */
.menu-list-item .food-list-item-collapse .menu-header figure,
.menu-list-item .food-list-item-collapse .menu-header figure.figure-rect{
  width: 9.5rem; height: 9.5rem; border-radius: 14px; margin-left: auto;
}
.menu-list-item .food-list-item-collapse .menu-header figure img,
.menu-list-item .food-list-item-collapse .menu-header figure.figure-rect img{
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
}
@media (max-width: 767px){
  .menu-list-item .food-list-item-collapse .menu-header figure,
  .menu-list-item .food-list-item-collapse .menu-header figure.figure-rect{
    width: 8rem; height: 8rem;
  }
}

/* Add-Button: eckiger Eck-Button -> schwebender runder Button */
.menu-list-item .food-list-item-collapse .menu-header .prd-add-button{
  right: 1.4rem; top: auto; bottom: 1.4rem;
  width: 4rem; height: 4rem; border-radius: 50%;
  border: none; background: var(--primary_color); color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
  font-size: 1.6rem;
}
.menu-list-item .food-list-item-collapse .menu-header[aria-expanded="true"] .prd-add-button{
  background: #3a3631;
}

/* =====================================================================
   Redesign-Layer 1b — Header-Hero, Bewertung, Buttons, Kategorie-Chips
   ===================================================================== */

/* ---------- Hero-Bild ---------- */
.header-bg{ height: 22rem; }
@media (max-width: 767px){ .header-bg{ height: 14rem; } }
.header-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.22));
}

/* ---------- Logo (abgerundetes Quadrat) ---------- */
.rest-logo{
  width: 10.5rem; height: 10.5rem; margin: -5rem auto 0;
  border-radius: 20px;
  border: 3px solid #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
}
@media (max-width: 991px){
  .rest-logo{ width: 9rem; height: 9rem; margin: -4.5rem auto 0; }
}

/* ---------- Name + Bewertung ---------- */
.rest-info-title{ font-size: 2.4rem; font-weight: 700; color: var(--rd-ink); }
.rest-review .rating-info{ color: var(--rd-muted); font-weight: 500; }

/* ---------- Info- + Angebots-Button: minimal & neutral ---------- */
.rest-user-menu{ padding-top: 2rem; gap: 10px; }
.rest-user-menu .btn{
  width: 4.2rem; height: 4.2rem; border-radius: 50% !important;
  border: none !important;
  background: #f4f1ec; color: #17150f; font-size: 1.6rem;
  transition: filter .15s ease;
}
.rest-user-menu .btn:hover{ filter: brightness(.95); }
.rest-user-menu .btn:nth-child(2){
  border: none !important; border-radius: 50% !important;
  background: #f4f1ec; color: #17150f;
}

/* ---------- Suche (Icon -> runder Button) ---------- */
.menu-list .search-drop > a{
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: #f4f1ec; color: #6b665e; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; margin-right: 1.2rem;
}
.menu-list .search-drop .search-content form input{ border-radius: 999px; }

/* ---------- Sticky Kategorie-Leiste + Chips als Pills ---------- */
.menu-list-nav{
  background-color: #fff;
  border-bottom: 1px solid var(--rd-line);
  padding: 1.1rem 0;
  margin-bottom: 2rem;
}
.menu-list-nav ul{ gap: 8px; align-items: center; }
.menu-list-nav ul li a{
  padding: .9rem 1.6rem !important;
  border-radius: 999px;
  background-color: #f4f1ec !important;
  color: #6b665e !important;
  font-size: 1.35rem; font-weight: 500 !important;
}
.menu-list-nav ul li:first-child a{ padding-left: 1.6rem !important; }
.menu-list-nav ul li a.active{
  background-color: #17150f !important;
  color: #fff !important;
}
@media (hover: hover) and (pointer: fine){
  .menu-list-nav ul li a:hover{
    background-color: #17150f !important;
    color: #fff !important;
  }
}

/* ---------- Anzeigen-Banner (Header-Ankündigungen) ---------- */
.header-top-bar{
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  border-radius: 0 0 14px 14px;
  font-size: 1.5rem; font-weight: 600;
}
.header-top-bar .top-bar-slider{ color: var(--rd-ink); padding: 1.3rem 1.6rem; }

/* =====================================================================
   Redesign-Layer 2 — News-Ticker, Hero-Buttons, Bestseller-Überschrift
   ===================================================================== */

/* News-Ticker: zwei Anzeigen, durchgehend rechts -> links */
.rd-ticker{ background:#17150f; overflow:hidden; white-space:nowrap; }
.rd-ticker-row{ display:inline-flex; align-items:center; animation: rdmarq 26s linear infinite; }
.rd-ticker-item{ display:inline-flex; align-items:center; gap:.8rem; color:#fff; font-size:1.3rem; font-weight:500; padding:1rem 2.8rem; }
.rd-dot{ width:.6rem; height:.6rem; border-radius:50%; background:var(--primary_color); flex:0 0 auto; }
@keyframes rdmarq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Action-Buttons (Info + Angebote) rund & frosted auf dem Hero */
.header-bg .rd-hero-actions{ position:absolute; top:1.4rem; right:1.6rem; z-index:6; display:flex; gap:1rem; padding:0; }
.header-bg .rd-hero-actions .btn{
  width:4.2rem; height:4.2rem; border-radius:50% !important; border:none !important;
  background:rgba(255,255,255,.94); color:#17150f; font-size:1.6rem;
  box-shadow:0 4px 12px rgba(0,0,0,.20);
}

/* Bestseller-Überschrift: voller Farbbalken -> clean */
.menu-section-title.rd-section-title{
  background:transparent !important; color:var(--rd-ink) !important;
  padding:0 0 1.2rem 0 !important; margin:0 0 .4rem 0 !important;
  font-size:2rem; font-weight:700;
}

/* Info / Angebote als sichtbare Pills (im Content, rechts neben dem Namen) */
.rd-actions{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:flex-end; }
.rd-act{
  display:inline-flex; align-items:center; gap:.6rem; line-height:1;
  border:1px solid var(--rd-line); background:#fff; color:#17150f;
  font-size:1.3rem; font-weight:600; padding:1rem 1.5rem; border-radius:999px; cursor:pointer;
  transition:.15s ease;
}
.rd-act i{ font-size:1.5rem; }
.rd-act:hover{ background:#f7f4ef; }
.rd-act-accent{ border-color:transparent; background:var(--primary_color); color:#fff; }
.rd-act-accent:hover{ filter:brightness(.96); }
@media (max-width: 575px){ .rd-act span{ display:none; } .rd-act{ padding:1rem; } }

/* Lieferung / Abholung — Segment-Switch in der Top-Bar */
.header-address-button .rd-switch{
  display:inline-flex; background:rgba(255,255,255,.22); border-radius:999px; padding:4px; gap:3px;
}
.header-address-button .rd-switch .rd-seg{
  display:inline-flex; align-items:center; gap:.6rem; line-height:1; white-space:nowrap;
  border:none; background:transparent; color:#fff; font-size:1.3rem; font-weight:600;
  padding:.8rem 1.7rem; border-radius:999px; cursor:pointer; transition:.15s ease;
}
.header-address-button .rd-switch .rd-seg.on{
  background:#fff; color:var(--primary_color); box-shadow:0 2px 8px rgba(0,0,0,.16);
}

/* =====================================================================
   Redesign-Layer 3 — Lieferando-Richtung: Top-Bar entfärben, Mode-Switch,
   Kategorie-Pills, Informationen-Link
   ===================================================================== */

/* Oranges Top-Band -> clean weiß, Account-Icons dunkel */
#header{ background:#fff !important; border-bottom:1px solid var(--rd-line); box-shadow:none; }
#header .header-user-menu .btn{
  background:#f4f1ec; color:#17150f; border:none !important; border-radius:50% !important;
  width:4.2rem; height:4.2rem;
}

/* Lieferung/Abholung — Segment-Switch neben dem Namen (wie Lieferando) */
.rd-modeswitch{ display:inline-flex; background:#f3f0ea; border-radius:999px; padding:4px; gap:3px; }
.rd-modeswitch .rd-seg{
  display:inline-flex; align-items:center; gap:.6rem; line-height:1; white-space:nowrap;
  border:none; background:transparent; color:#7c766c; font-size:1.3rem; font-weight:600;
  padding:.85rem 1.7rem; border-radius:999px; cursor:pointer; transition:.15s ease;
}
.rd-modeswitch .rd-seg.on{ background:#fff; color:#17150f; box-shadow:0 2px 8px rgba(0,0,0,.12); }

/* Informationen-Link */
.rd-infolink{ display:inline-flex; align-items:center; gap:.5rem; color:var(--primary_color); font-size:1.3rem; font-weight:600; margin-top:.7rem; }
.rd-infolink:hover{ text-decoration:underline; }

/* Kategorie-Nav: Pills im Infos-Stil (weiß + Rahmen), aktiv dunkel */
.menu-list-nav ul li a{ background-color:#fff !important; border:1px solid var(--rd-line); }
.menu-list-nav ul li a.active{ background-color:#17150f !important; color:#fff !important; border-color:#17150f; }

/* =====================================================================
   Redesign-Layer 4 — Uber-Richtung: Top-Band raus, Hero kompakt/rund,
   Account auf Hero, Angebots-Banner, 2-Spalten-Produkte, Kategorie-Switch-Look
   ===================================================================== */

/* Weißes Top-Band auf der Shop-Seite komplett entfernen */
.home-page #header{ display:none !important; }

/* Hero kompakt & abgerundet (Uber-Stil) */
.header-bg{ height:18rem; margin:1.4rem 1.4rem 0; border-radius:22px; overflow:hidden; }
@media (max-width:767px){ .header-bg{ height:15rem; margin:1rem 1rem 0; border-radius:18px; } }

/* Account-Icons auf dem Hero (oben rechts) */
.rd-hero-account{ position:absolute; top:1.2rem; right:1.2rem; z-index:6; display:flex; gap:.8rem; }
.rd-hero-account .rd-acc{
  position:relative; width:4rem; height:4rem; border-radius:50%; border:none;
  background:rgba(255,255,255,.94); color:#17150f; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.rd-hero-account .rd-acc-badge{ position:absolute; top:-4px; right:-4px; background:var(--primary_color); color:#fff; font-size:1rem; min-width:1.7rem; height:1.7rem; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 .4rem; }

/* Angebots-Banner */
.rd-offer-wrap{ margin-top:1.6rem; }
.rd-offer{ display:flex; align-items:center; gap:1.2rem; background:#fff4ef; border:1px solid #ffd9c9; border-radius:16px; padding:1.3rem 1.6rem; cursor:pointer; transition:.15s ease; }
.rd-offer:hover{ background:#ffeee6; }
.rd-offer > i{ color:var(--primary_color); font-size:2rem; }
.rd-offer-txt{ display:flex; flex-direction:column; flex:1; }
.rd-offer-t{ font-size:1.5rem; font-weight:700; color:#17150f; }
.rd-offer-s{ font-size:1.2rem; color:var(--rd-muted); }
.rd-offer-arrow{ color:var(--rd-muted); font-size:1.4rem; }

/* Produkte 2-spaltig im Web (Optionen klappen INNERHALB der Karte auf) */
@media (min-width:768px){
  .menu-list-item .food-list-item{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-items:start; }
  .menu-list-item .food-list-item > .food-list-item-header{ grid-column:1 / -1; }
  .menu-list-item .food-list-item-collapse{ margin-bottom:0 !important; }
}

/* Kategorie-Menü im Switch-Look: voll abgerundeter Track + runde aktive Pille */
.menu-list-nav ul{ background:#f3f0ea; border-radius:999px; padding:5px 6px; gap:3px; }
.menu-list-nav ul li a{ background-color:transparent !important; border:none !important; color:#7c766c !important; padding:.8rem 1.7rem !important; font-weight:600 !important; border-radius:999px !important; }
.menu-list-nav ul li a.active{ background-color:#fff !important; color:#17150f !important; box-shadow:0 2px 8px rgba(0,0,0,.12) !important; border:none !important; border-radius:999px !important; }
.menu-list-nav ul li:first-child a{ padding-left:1.7rem !important; }

/* =====================================================================
   Redesign-Layer 5 — Kompakter (Lieferando/Uber), Mobile-Feinschliff
   ===================================================================== */

/* Hero kompakter */
.header-bg{ height:15rem; margin:1.2rem 1.2rem 0; border-radius:20px; }
@media (max-width:767px){ .header-bg{ height:11.5rem; margin:.8rem .8rem 0; border-radius:16px; } }

/* Logo kompakter */
.rest-logo{ width:8.5rem; height:8.5rem; margin:-4rem auto 0; border-radius:16px; }
@media (max-width:991px){ .rest-logo{ width:7rem; height:7rem; margin:-3.4rem auto 0; } }

/* Identity-Bereich enger */
.rest-info{ padding:.5rem 0; }
.rest-info-title{ font-size:2.1rem; }
@media (max-width:767px){ .rest-info-title{ font-size:1.9rem; } }
.rest-header .row.mt-3.mb-5{ margin-top:.7rem !important; margin-bottom:1rem !important; }

/* Ticker schlanker */
.rd-ticker-item{ padding:.8rem 2.4rem; font-size:1.25rem; }

/* Offer-Banner kompakter */
.rd-offer-wrap{ margin-top:1.1rem; }
.rd-offer{ padding:1rem 1.4rem; }
.rd-offer-t{ font-size:1.4rem; }

/* Kategorie-Nav enger */
.menu-list-nav{ padding:.8rem 0; margin-bottom:1.4rem; }

/* Kategorie-Cover kompakter */
.menu-list-item .food-list-item-header .cover-image{ height:13rem; }
@media (max-width:767px){ .menu-list-item .food-list-item-header .cover-image{ height:9.5rem; } }
.menu-list-item .food-list-item-header .menu-title{ font-size:1.9rem; padding:1.2rem 1.6rem; }

/* Produktzeilen kompakter (v.a. Mobil: leichter, enger, wie in der App) */
.menu-list-item .food-list-item-collapse .menu-header{ padding:1.3rem 1.6rem; }
.menu-list-item .food-list-item-collapse{ margin-bottom:1rem; }
@media (max-width:767px){
  .menu-list-item .food-list-item-collapse .menu-header{ padding:1.1rem 1.2rem; box-shadow:none; border-radius:12px; }
  .menu-list-item .food-list-item-collapse{ margin-bottom:.7rem; }
  .menu-list-item .food-list-item-collapse .menu-header figure,
  .menu-list-item .food-list-item-collapse .menu-header figure.figure-rect{ width:7rem; height:7rem; }
  .menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .t{ font-size:1.5rem; }
}

/* =====================================================================
   Redesign-Layer 6 — Mobile-Produktzeile: Text links / Bild rechts
   (statt gestapelt) — kompakt wie Uber/orderio-App
   ===================================================================== */
.menu-list-item .food-list-item-collapse .menu-header .row{
  display:flex; flex-wrap:nowrap; align-items:flex-start; margin:0;
}
.menu-list-item .food-list-item-collapse .menu-header .row > [class*="col-lg-9"]{
  flex:1 1 auto; max-width:none; padding-left:0; padding-right:1rem;
}
.menu-list-item .food-list-item-collapse .menu-header .row > [class*="col-lg-3"]{
  flex:0 0 auto; width:auto; padding-right:0; padding-left:0;
}

/* =====================================================================
   Redesign-Layer 7 — Header/Identity auf Mobil kompakter
   ===================================================================== */
@media (max-width:767px){
  .rest-info{ padding:.2rem 0; }
  .rest-info-title{ font-size:1.8rem; margin-bottom:.2rem; }
  .rd-infolink{ margin-top:.2rem; font-size:1.2rem; }
  .rest-header .row.mt-3.mb-5{ margin-top:.3rem !important; margin-bottom:.5rem !important; }
  .rd-modeswitch{ margin-top:.5rem; }
  .rd-modeswitch .rd-seg{ padding:.7rem 1.4rem; font-size:1.2rem; }
  .rest-logo{ width:6.4rem; height:6.4rem; margin:-3.2rem auto 0; }
}

/* =====================================================================
   Redesign-Layer 8 — Einheitliche Rundung, helleres Menü-Grau,
   gleich große Karten, Bestseller-Navigation (Pfeile außen, Punkte Mitte)
   ===================================================================== */

/* Einheitliche Rundung 16px überall (Hero, Cover, Produkt, Bestseller, Offer) */
.header-bg{ border-radius:16px; }
.menu-list-item .food-list-item-header .cover-image{ border-radius:16px; }
.menu-list-item .food-list-item-collapse .menu-header{ border-radius:16px; }
.product-card{ border-radius:16px !important; }
.rd-offer{ border-radius:16px; }

/* Kategorie-Menü: an Karten angepasst (16px Track), helleres modernes Grau */
.menu-list-nav ul{ background:#f1f1f3 !important; border-radius:16px !important; padding:5px !important; }
.menu-list-nav ul li a{ border-radius:10px !important; }
.menu-list-nav ul li a.active{ border-radius:10px !important; }

/* Produktkarten gleich groß (auch ohne Bild/Info) */
@media (min-width:768px){
  .menu-list-item .food-list-item{ align-items:stretch; }
  .menu-list-item .food-list-item-collapse{ height:100%; }
  .menu-list-item .food-list-item-collapse .menu-header{ height:100%; }
}
.menu-list-item .food-list-item-collapse .menu-header{ min-height:12.5rem; }
@media (max-width:767px){ .menu-list-item .food-list-item-collapse .menu-header{ min-height:0; } }

/* Bestseller: Pfeil links · Punkte Mitte · Pfeil rechts */
.swiper-navigation-container{ display:flex !important; justify-content:space-between !important; align-items:center !important; gap:1rem; margin-top:0 !important; }
#bestseller-swiper .swiper-pagination{ position:static !important; flex:1; text-align:center; margin:0 !important; }

/* =====================================================================
   Redesign-Layer 9 — Produkt-Optionen-Modal an Design anpassen
   ===================================================================== */
#product-options-modal .modal-dialog{ max-width:480px; }
#product-options-modal .modal-content{ border:none !important; border-radius:18px; overflow:hidden; }
#product-options-modal .modal-header{ background:#fff !important; border-bottom:1px solid var(--rd-line) !important; padding:1.4rem 1.8rem; }
#product-options-modal .modal-header .modal-title{ color:var(--rd-ink) !important; font-weight:700; font-size:1.8rem; }
#product-options-modal .modal-header .close,
#product-options-modal .modal-header .close span{ color:var(--rd-ink) !important; opacity:1; }
#product-options-modal .modal-body{ background:#fff !important; padding:1.8rem !important; }
#product-options-modal [data-action="add-to-cart"]{ background:var(--primary_color) !important; border:none !important; color:#fff !important; border-radius:12px !important; font-weight:600; }

/* =====================================================================
   Redesign-Layer 10 — Desktop-Layout: Warenkorb an Inhalt rücken,
   Hero auf Blockbreite (Inhalt 1154 + Warenkorb 344 = 1498px, zentriert)
   ===================================================================== */
@media (min-width:992px){
  .cart-modal{ right: max(0px, calc((100% - 1498px) / 2)) !important; }
  .header-bg{ max-width:1498px; margin-left:auto !important; margin-right:auto !important; }
}

/* =====================================================================
   Redesign-Layer 11 — Warenkorb-Redesign (ans neue Design angepasst)
   ===================================================================== */
/* Sidebar/Modal-Container */
@media (min-width:992px){
  .cart-modal{ border:1px solid var(--rd-line); border-radius:18px; box-shadow:0 8px 30px rgba(30,25,20,.08) !important; overflow:hidden; }
}
/* Titel */
.cart-modal-content .cart-title{ font-size:1.9rem; font-weight:700; color:var(--rd-ink); text-align:left; padding:1.8rem 1.8rem 1.4rem; border-bottom:1px solid var(--rd-line); }
/* Produktliste */
.cart-modal-content .cart-prd-list{ padding:.4rem 1.6rem; }
.cart-modal-content .cart-prd-list .prd-item{ padding:1.4rem 0; border-bottom:1px solid var(--rd-line); }
.cart-modal-content .cart-prd-list .prd-item .prd-quantity{ font-size:1.4rem; font-weight:700; color:var(--primary_color); }
.cart-modal-content .cart-prd-list .prd-item .prd-name{ width:auto; flex:1 1 auto; font-size:1.4rem; font-weight:500; color:var(--rd-ink); padding:0 1rem; }
.cart-modal-content .cart-prd-list .prd-item .prd-qty > a{ width:2.8rem; height:2.8rem; border-radius:8px; border:1px solid var(--rd-line); color:var(--rd-ink); }
.cart-modal-content .cart-prd-list .prd-item .prd-price{ font-size:1.4rem; font-weight:600; color:var(--rd-ink); }
.cart-modal-content .cart-prd-list .prd-item .prd-edit,
.cart-modal-content .cart-prd-list .prd-item .prd-edit a,
.cart-modal-content .cart-prd-list .prd-item .prd-delete a{ color:var(--rd-muted); }
/* Preise */
.cart-modal-content .cart-price-list{ padding:1.2rem 1.8rem; }
.cart-modal-content .cart-price-list .cart-prc-item{ font-size:1.4rem; color:var(--rd-muted); margin-bottom:.8rem; }
.cart-modal-content .cart-price-list .cart-prc-item.prc-bold{ color:var(--rd-ink); font-weight:700; font-size:1.7rem; }
.cart-modal-content .cart-price-list .cart-prc-item.prc-bold .v{ color:var(--rd-ink); }
/* Unten + Bestellen-Button */
.cart-modal-content .cart-bottom{ padding:1.4rem 1.8rem 1.8rem; border-top:1px solid var(--rd-line); }
.cart-modal-content .cart-bottom .cart-description{ font-size:1.25rem; color:var(--rd-muted); }
.cart-modal-content .cart-bottom .btn{ width:100%; background:var(--primary_color) !important; border:none !important; color:#fff !important; border-radius:14px !important; height:5rem; font-size:1.6rem; font-weight:600; box-shadow:0 6px 16px color-mix(in srgb, var(--primary_color) 30%, transparent); }
.cart-modal-content .cart-bottom .btn.disabled{ opacity:.45; box-shadow:none; }
/* Mobile Warenkorb-Button (fixed unten) als runder Akzent-Balken */
.cart-btn-container{ padding:0 1.2rem; bottom:1.2rem; }
.cart-btn-container .cart-btn{ background:var(--primary_color) !important; color:#fff !important; border-radius:14px !important; box-shadow:0 8px 22px color-mix(in srgb, var(--primary_color) 34%, transparent); height:5.4rem; font-weight:600; }
.cart-btn-container .cart-btn .cart-button-icon .cart-qty-num{ background:#fff !important; color:var(--primary_color) !important; }

/* =====================================================================
   Redesign-Layer 12 — Footer-Clash fixen: Warenkorb als kompakte Karte,
   Footer hell statt oliv
   ===================================================================== */
/* Warenkorb (Desktop): nur Inhaltshöhe als Karte, darunter klick-durchlässig */
@media (min-width:992px){
  .cart-modal{ background:transparent !important; pointer-events:none; border:none !important; box-shadow:none !important; }
  .cart-modal-content{
    background:#fff !important; pointer-events:auto;
    border:1px solid var(--rd-line); border-radius:18px;
    box-shadow:0 8px 30px rgba(30,25,20,.10);
  }
}
/* Footer: oliv -> hell, passend zum Design */
#footer{ background:#f1f1f3 !important; border-top:1px solid var(--rd-line); }
#footer, #footer p, #footer h5, #footer .footer-heading-white{ color:#17150f !important; }
#footer .footer-nav ul li a{ color:#3a3631 !important; }
#footer .footer-nav ul li a:hover{ color:#000 !important; }
#footer .social-icons a, #footer .social a, #footer i{ color:#3a3631 !important; }
#footer a[href*="orderio"]{ color:var(--primary_color) !important; }

/* App-Badges: aus dem Warenkorb raus, klein zentriert in den Footer */
.cart-modal .apps-desktop{ display:none !important; }
.rd-footer-apps{ display:flex; gap:1rem; justify-content:center; margin:1.4rem 0 .6rem; }
.rd-footer-apps img{ height:3.4rem; width:auto; }

/* =====================================================================
   Redesign-Layer 13 — Footer-Schrift lesbar, Profil-Icon in Akzent,
   alle Popups ans Design, Bild-Handling (jpg/png)
   ===================================================================== */
/* (1) Footer-Schrift lesbar (Copyright nutzte weißes --text_color) */
#footer .copyright, #footer .copyright a{ color:#3a3631 !important; }
#footer .copyright a[href*="orderio"]{ color:var(--primary_color) !important; }
#footer .footer-heading-white{ color:#17150f !important; }

/* (7) Profil-/Account-Icon in Button-/Akzentfarbe */
.rd-hero-account .rd-acc{ color:var(--primary_color); }

/* (3) Alle Popups (custom-modal + user-popup) ans Design */
.custom-modal .modal-content,
.user-popup .modal-content,
#notification .modal-content{ border:none !important; border-radius:18px !important; overflow:hidden; }
.modal-header.bg-secondary{ background:#fff !important; border-bottom:1px solid var(--rd-line) !important; padding:1.4rem 1.8rem; }
.modal-header.bg-secondary .modal-title,
.modal-header.bg-secondary .modal-title.white{ color:var(--rd-ink) !important; font-weight:700; font-size:1.8rem; }
.modal-header.bg-secondary .close,
.modal-header.bg-secondary .close.white,
.modal-header.bg-secondary .close span{ color:var(--rd-ink) !important; opacity:1; }
.custom-modal .modal-body{ background:#fff !important; }
.custom-modal .btn.b-btn-secondary,
.custom-modal #setGelAl{ background:var(--primary_color) !important; color:#fff !important; border-radius:12px !important; border:none !important; }

/* (6) Produktbilder jpg/png sauber: cover + neutrale Fläche für transparente PNGs */
.menu-list-item .food-list-item-collapse .menu-header figure,
.menu-list-item .food-list-item-collapse .menu-header figure.figure-rect{ background:#f3f0ea; }

/* (3b) Modal-Header generell für ALLE custom-modals (auch #address ohne bg-secondary) */
.custom-modal .modal-header{ background:#fff !important; border-bottom:1px solid var(--rd-line) !important; padding:1.4rem 1.8rem; }
.custom-modal .modal-header .modal-title{ color:var(--rd-ink) !important; font-weight:700; font-size:1.8rem; }
.custom-modal .modal-header .close,
.custom-modal .modal-header .close span{ color:var(--rd-ink) !important; opacity:1; text-shadow:none; }

/* =====================================================================
   Redesign-Layer 14 — Produkt-Popup neu: größer, Bild groß oben,
   Extras-Gruppen ordentlich, klare Bottom-Bar
   ===================================================================== */
#product-options-modal .modal-dialog{ max-width:520px; }
#product-options-modal .modal-content{ border-radius:20px !important; }
#product-options-modal .modal-body{ padding:0 !important; max-height:82vh; overflow-y:auto; }

/* Großes Produktbild oben (jpg/png sauber) */
.rd-modal-hero{ width:100%; height:210px; background:#f3f0ea; overflow:hidden; }
.rd-modal-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Inhalt-Padding (modal-body hat jetzt 0) */
#product-options-modal .modal-body > .form-group{ padding:1.8rem 2rem; margin:0; }
#product-options-modal h3.font-weight-bold{ font-size:2.2rem; font-weight:700; color:var(--rd-ink); margin:0 0 1.2rem; }

/* Varianten-/Options-Selects */
#product-options-modal .product-variants-select,
#product-options-modal .extra_selection select,
#product-options-modal select.form-control,
#rdMenuModal .product-variants-select,
#rdMenuModal .extra_selection select,
#rdMenuModal select.form-control{ border:1px solid var(--rd-line) !important; border-radius:12px !important; height:4.8rem; font-size:1.4rem; padding:0 1.4rem; background:#fff; color:var(--rd-ink); }

/* Gruppen-Überschriften */
#product-options-modal .extras-group-header,
#rdMenuModal .extras-group-header{ font-size:1.5rem; font-weight:700; color:var(--rd-ink); margin:1.8rem 0 .9rem; }

/* Option-Zeilen: Checkbox + Name + Preis als saubere Karte */
#product-options-modal .form-multi-group,
#rdMenuModal .form-multi-group{ display:flex; flex-direction:column; gap:.6rem; }
#product-options-modal .b-form-element.b-checkbox,
#rdMenuModal .b-form-element.b-checkbox{ display:flex; align-items:center; gap:1.1rem; padding:1.1rem 1.3rem; border:1px solid var(--rd-line); border-radius:12px; margin:0; }
#product-options-modal .b-form-element.b-checkbox label,
#rdMenuModal .b-form-element.b-checkbox label{ margin:0; flex:1; font-size:1.4rem; color:var(--rd-ink); cursor:pointer; }
#product-options-modal .b-form-element.b-checkbox input,
#rdMenuModal .b-form-element.b-checkbox input{ width:2rem; height:2rem; accent-color:var(--primary_color); flex:0 0 auto; }

/* Bottom-Bar: Menge + Add-Button, sticky unten */
#product-options-modal .form-group.mb-0{ padding:0 !important; }
#product-options-modal .form-group-buttons{ display:flex; align-items:center; gap:1.2rem; padding:1.4rem 2rem !important; border-top:1px solid var(--rd-line); position:sticky; bottom:0; background:#fff; margin:0; }
#product-options-modal .form-group-buttons .qty{ border:1px solid var(--rd-line) !important; border-radius:12px !important; height:4.8rem; }
#product-options-modal .form-group-buttons .btn.b-btn-secondary,
#product-options-modal [data-action="add-to-cart"]{ flex:1; height:4.8rem; background:var(--primary_color) !important; color:#fff !important; border:none !important; border-radius:14px !important; font-weight:600; font-size:1.6rem; }

/* =====================================================================
   Redesign-Layer 15 — Produkt-Popup im Uber-Eats-Stil:
   Bild links groß · Inhalt rechts · flache Optionszeilen · schwebender Close
   ===================================================================== */
#product-options-modal .modal-dialog{ max-width:880px !important; }
#product-options-modal .modal-content{ border-radius:20px !important; overflow:hidden; position:relative; }

/* Header -> schwebender Close-Button oben rechts */
#product-options-modal .modal-header{ position:absolute !important; top:0; right:0; z-index:6; background:transparent !important; border:none !important; padding:1.2rem 1.4rem !important; }
#product-options-modal .modal-header .modal-title{ display:none !important; }
#product-options-modal .modal-header .close{ background:rgba(255,255,255,.94) !important; border-radius:50% !important; width:3.6rem; height:3.6rem; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.16); margin:0; opacity:1; }

/* Body zweispaltig */
#product-options-modal .modal-body{ padding:0 !important; display:flex !important; max-height:86vh; overflow:hidden; }
.rd-modal-hero{ flex:0 0 44% !important; width:auto !important; height:auto !important; min-height:440px; background:#f3f0ea; overflow:hidden; }
.rd-modal-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.rd-modal-right{ flex:1 1 auto; min-width:0; overflow-y:auto; display:flex; flex-direction:column; }
.rd-modal-right > .form-group{ padding:2.4rem 2.4rem 1rem; margin:0; }
.rd-modal-right > .form-group.mb-0{ margin-top:auto; padding:0; }
#product-options-modal h3.font-weight-bold{ font-size:2.4rem; margin:.4rem 0 1.4rem; }

/* Optionen: flache Zeilen, Auswahl rechts (statt umrandeter Kästchen) */
#product-options-modal .form-multi-group,
#rdMenuModal .form-multi-group{ gap:0 !important; }
#product-options-modal .b-form-element.b-checkbox,
#rdMenuModal .b-form-element.b-checkbox{ flex-direction:row-reverse !important; justify-content:space-between !important; align-items:center; border:none !important; border-bottom:1px solid var(--rd-line) !important; border-radius:0 !important; padding:1.3rem 0 !important; }
#product-options-modal .b-form-element.b-checkbox label,
#rdMenuModal .b-form-element.b-checkbox label{ flex:1; padding-right:1.2rem; }

/* Bottom-Bar sticky unten */
#product-options-modal .form-group-buttons{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--rd-line); padding:1.4rem 2.4rem !important; }

/* Mobil: gestapelt (Bild oben), fast Vollbild */
@media (max-width:767px){
  #product-options-modal .modal-dialog{ max-width:100% !important; margin:.4rem; }
  #product-options-modal .modal-body{ flex-direction:column; max-height:92vh; overflow-y:auto; }
  .rd-modal-hero{ flex:none !important; min-height:0; height:200px; }
  .rd-modal-right{ overflow:visible; }
}

/* =====================================================================
   Redesign-Layer 16 — Produkt-Popup EINSPALTIG (Lieferando-Stil, moderner),
   überschreibt die Zwei-Spalten aus Layer 15
   ===================================================================== */
#product-options-modal .modal-dialog{ max-width:560px !important; }
#product-options-modal .modal-body{ display:block !important; padding:0 !important; max-height:88vh; overflow-y:auto; }

/* Bild oben (voll breit) */
.rd-modal-hero{ flex:none !important; width:100% !important; height:240px !important; min-height:0 !important; background:#f3f0ea; overflow:hidden; }
.rd-modal-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Inhalt darunter, voll breit */
.rd-modal-right{ display:block !important; overflow:visible !important; }
.rd-modal-right > .form-group{ padding:1.8rem 2rem 1rem !important; margin:0; }
.rd-modal-right > .form-group.mb-0{ padding:0 !important; margin:0; }
#product-options-modal h3.font-weight-bold{ font-size:2.2rem; margin:.2rem 0 1.2rem; }
/* ohne Bild: Name nicht unter dem Close-Button */
.rd-noimg .rd-modal-right > .form-group:first-child{ padding-top:3rem !important; }

/* Options-Zeilen: flach, Checkbox LINKS (wie Lieferando), Trennlinie */
#product-options-modal .form-multi-group,
#rdMenuModal .form-multi-group{ gap:0 !important; }
#product-options-modal .b-form-element.b-checkbox,
#rdMenuModal .b-form-element.b-checkbox{ flex-direction:row !important; justify-content:flex-start !important; align-items:center; gap:1.2rem; border:none !important; border-bottom:1px solid var(--rd-line) !important; border-radius:0 !important; padding:1.3rem .2rem !important; }
#product-options-modal .b-form-element.b-checkbox label,
#rdMenuModal .b-form-element.b-checkbox label{ flex:1; padding-right:0; }

/* Gruppen-Header etwas Luft */
#product-options-modal .extras-group-header,
#rdMenuModal .extras-group-header{ margin:2rem 0 .4rem; padding-top:1.4rem; border-top:1px solid var(--rd-line); }
#product-options-modal .extras-group-header:first-of-type,
#rdMenuModal .extras-group-header:first-of-type{ border-top:none; padding-top:0; margin-top:.6rem; }

/* Bottom-Bar sticky */
#product-options-modal .form-group-buttons{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--rd-line); padding:1.4rem 2rem !important; }

@media (max-width:767px){
  #product-options-modal .modal-dialog{ max-width:100% !important; margin:.4rem; }
  .rd-modal-hero{ height:200px !important; }
}

/* =====================================================================
   Redesign-Layer 17 — Popup-Feinschliff: Beschreibung, volle Breite,
   Auswahl rechts, Kreise (Pflicht) / Kästchen (optional)
   ===================================================================== */
/* Produktbeschreibung unter dem Namen */
.rd-modal-desc{ font-size:1.35rem; color:var(--rd-muted); line-height:1.5; margin:-.4rem 0 1.2rem; }

/* Extras: volle Breite, Name links, Kästchen rechts */
#product-options-modal .b-form-element.b-checkbox,
#rdMenuModal .b-form-element.b-checkbox{ width:100% !important; flex-direction:row-reverse !important; justify-content:space-between !important; gap:1.2rem; }
#product-options-modal .b-form-element.b-checkbox label,
#rdMenuModal .b-form-element.b-checkbox label{ flex:1 1 auto; text-align:left; padding:0; font-size:1.4rem; }
#product-options-modal .b-form-element.b-checkbox input[type=checkbox],
#rdMenuModal .b-form-element.b-checkbox input[type=checkbox]{ width:2.2rem; height:2.2rem; border-radius:6px; accent-color:var(--primary_color); flex:0 0 auto; cursor:pointer; }

/* Gruppen-Kopf + Badge */
.rd-group-head{ display:flex; align-items:center; justify-content:space-between; margin:1.4rem 0 .2rem; font-size:1.5rem; font-weight:700; color:var(--rd-ink); }
.rd-badge{ font-size:1.1rem; font-weight:600; padding:.3rem .9rem; border-radius:999px; background:#f1f1f3; color:#6b665e; }

/* Pflicht-Variante als Radio-Kreise (rechts) */
.rd-variant-radios{ margin-bottom:.4rem; }
.rd-radio-row{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:1.3rem .2rem; border-bottom:1px solid var(--rd-line); cursor:pointer; margin:0; }
.rd-radio-input{ position:absolute; opacity:0; width:0; height:0; }
.rd-radio-text{ flex:1; font-size:1.4rem; color:var(--rd-ink); }
.rd-radio-dot{ width:2.2rem; height:2.2rem; border:2px solid var(--rd-line); border-radius:50%; flex:0 0 auto; position:relative; }
.rd-radio-input:checked ~ .rd-radio-dot{ border-color:var(--primary_color); }
.rd-radio-input:checked ~ .rd-radio-dot::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--primary_color); }

/* =====================================================================
   Redesign-Layer 18 — Auswahl LINKS (Kreise + Kästchen einheitlich),
   Popup-Texte/Überschriften einheitlich im Ink (kein Petrol/Teal)
   ===================================================================== */
/* Kästchen (Extras): Kontrolle links, Name rechts */
#product-options-modal .b-form-element.b-checkbox,
#rdMenuModal .b-form-element.b-checkbox{ flex-direction:row !important; justify-content:flex-start !important; gap:1.1rem; }
#product-options-modal .b-form-element.b-checkbox label,
#rdMenuModal .b-form-element.b-checkbox label{ color:var(--rd-ink); flex:1; }

/* Kreise (Pflicht): Kontrolle links */
.rd-radio-row{ justify-content:flex-start !important; gap:1.1rem; }
.rd-radio-text{ flex:1; }

/* Alle Popup-Texte/Überschriften einheitlich (Poppins/Ink, kein Petrol) */
#product-options-modal .modal-body{ color:var(--rd-ink); }
#product-options-modal label,
#product-options-modal .extras-group-header,
#product-options-modal .extra_selection label,
#product-options-modal .rd-group-head,
#rdMenuModal label,
#rdMenuModal .extras-group-header,
#rdMenuModal .extra_selection label{ color:var(--rd-ink) !important; }
#product-options-modal .extras-group-header,
.rd-group-head,
#rdMenuModal .extras-group-header{ font-size:1.5rem; font-weight:700; }

/* =====================================================================
   Redesign-Layer 19 — Menge + Betrag-Button fix am unteren Popup-Rand
   ===================================================================== */
#product-options-modal .modal-content{ display:flex !important; flex-direction:column; max-height:90vh; }
#product-options-modal .modal-body{ flex:1 1 auto; overflow-y:auto; max-height:none !important; }
.rd-modal-footer{ flex:0 0 auto; border-top:1px solid var(--rd-line); background:#fff; padding:1.4rem 2rem; }
.rd-modal-footer .form-group-buttons{ display:flex !important; align-items:center; gap:1.2rem; margin:0 !important; padding:0 !important; border:none !important; position:static !important; }
@media (max-width:767px){
  #product-options-modal .modal-content{ max-height:94vh; }
}

/* =====================================================================
   Redesign-Layer 20 — Fuß-Leiste robust am Modal-Boden (absolut)
   (überschreibt das Flex-Muster aus Layer 19)
   ===================================================================== */
#product-options-modal .modal-content{ display:block !important; position:relative; max-height:90vh; overflow:hidden; }
#product-options-modal .modal-body{ display:block !important; overflow-y:auto; max-height:90vh; padding-bottom:9rem !important; flex:none !important; }
.rd-modal-footer{ position:absolute !important; left:0; right:0; bottom:0; flex:none; background:#fff; border-top:1px solid var(--rd-line); padding:1.4rem 2rem; }
@media (max-width:767px){
  #product-options-modal .modal-content, #product-options-modal .modal-body{ max-height:94vh; }
}

/* =====================================================================
   Redesign-Layer 21 — Popup scrollbar FIX: Flex-Spalte + min-height:0
   (Body scrollt, Fuß-Leiste bleibt unten) — ersetzt das absolute Muster
   ===================================================================== */
#product-options-modal .modal-content{ display:flex !important; flex-direction:column; max-height:90vh; overflow:hidden; position:relative; }
#product-options-modal .modal-body{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; max-height:none !important; padding-bottom:0 !important; display:block !important; }
.rd-modal-footer{ position:static !important; flex:0 0 auto; border-top:1px solid var(--rd-line); background:#fff; padding:1.4rem 2rem; }
@media (max-width:767px){
  #product-options-modal .modal-content{ max-height:94vh; }
}

/* =====================================================================
   Redesign-Layer 22 — Ticker nahtlos, Rabatt-Karten, Bestseller-Pfeile,
   Kategorie-Menü moderner, Lieferung/Abholung-Switch klarer
   ===================================================================== */
/* (1) Ticker: voll breit, links startend, nahtlose Endlosschleife */
.rd-ticker{ display:block; }
.rd-ticker-row{ display:flex !important; width:max-content; align-items:center; animation: rdmarq 40s linear infinite; }
@keyframes rdmarq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* (4) Rabatt: mehrere kompakte Karten (kein breiter Banner, kein "Mehr Angebote") */
.rd-offers{ display:flex; gap:1rem; flex-wrap:wrap; }
.rd-offer-card{ display:inline-flex; align-items:center; gap:.9rem; background:#fff4ef; border:1px solid #ffd9c9; border-radius:14px; padding:1rem 1.4rem; font-size:1.35rem; font-weight:600; color:#17150f; cursor:pointer; transition:.15s; }
.rd-offer-card i{ color:var(--primary_color); font-size:1.7rem; }
.rd-offer-card:hover{ background:#ffeee6; }
@media (max-width:767px){ .rd-offers{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:.4rem; } .rd-offer-card{ flex:0 0 auto; } }

/* (5) Bestseller: mehr Abstand, Pfeile in Akzentfarbe, kein Überlapp */
#menu_bestsellers{ margin-bottom:3rem; }
.swiper-navigation-container{ margin-top:1.4rem !important; padding-bottom:1.2rem; }
#bestseller-swiper .swiper-button-prev,
#bestseller-swiper .swiper-button-next{ background-color:var(--primary_color) !important; color:#fff !important; }
#bestseller-swiper .swiper-pagination-bullet-active{ background-color:var(--primary_color) !important; }

/* (2) Kategorie-Menü moderner: weiße sticky Leiste, aktive Kategorie dunkel gefüllt */
.menu-list-nav{ background:#fff !important; box-shadow:0 2px 12px rgba(0,0,0,.05); border-bottom:none !important; }
.menu-list-nav ul{ background:transparent !important; padding:.4rem 0 !important; gap:.7rem; }
.menu-list-nav ul li a{ background-color:#f4f1ec !important; color:#6b665e !important; border-radius:999px !important; padding:.95rem 1.8rem !important; font-weight:600 !important; box-shadow:none !important; transition:.15s; }
.menu-list-nav ul li a.active{ background-color:#17150f !important; color:#fff !important; }

/* (6) Lieferung/Abholung-Switch klarer */
.rd-modeswitch{ background:#f3f0ea; padding:5px; }
.rd-modeswitch .rd-seg{ padding:1rem 2rem; font-size:1.35rem; }
.rd-modeswitch .rd-seg i{ font-size:1.5rem; }
.rd-modeswitch .rd-seg.on{ background:#fff; color:var(--primary_color); box-shadow:0 2px 10px rgba(0,0,0,.14); }

/* (7) Fly-to-Cart-Animation */
.rd-fly{ position:fixed; width:24px; height:24px; border-radius:50%; background:var(--primary_color); z-index:99999; pointer-events:none; transition:transform .65s cubic-bezier(.4,0,.2,1), opacity .65s; box-shadow:0 6px 16px color-mix(in srgb, var(--primary_color) 50%, transparent); }

/* Lieferung-Modus: Abholung-Option im Adress-Dropdown ausblenden */
#address select.rd-delivery-mode optgroup[label="Abholung"],
#address select.rd-delivery-mode option[value="0"]{ display:none; }

/* =====================================================================
   Redesign-Layer 23 — PNG ohne Rahmen, Popup-Bild fix, Akzent-Aktiv,
   Mobile-App-Sheet-Popup, bessere Fly-Animation
   ===================================================================== */
/* (5) Karten-Bilder: nur mit Hintergrund (jpg=figure-rect) Fläche+Rahmen; PNG transparent ohne Rahmen */
.menu-list-item .food-list-item-collapse .menu-header figure{ background:transparent !important; }
.menu-list-item .food-list-item-collapse .menu-header figure img{ object-fit:contain !important; }
.menu-list-item .food-list-item-collapse .menu-header figure.figure-rect{ background:#f3f0ea !important; }
.menu-list-item .food-list-item-collapse .menu-header figure.figure-rect img{ object-fit:cover !important; }

/* (5) Popup-Bild: PNG -> contain (nicht abschneiden) */
.rd-modal-hero{ height:220px; }
.rd-modal-hero.rd-hero-png{ height:200px; background:#f3f0ea; }
.rd-modal-hero.rd-hero-png img{ object-fit:contain !important; padding:1.6rem; }

/* (6) Moderne Akzentfarbe für aktives Menü + Switch */
.menu-list-nav ul li a.active{ background-color:var(--primary_color) !important; color:#fff !important; }
.rd-modeswitch .rd-seg.on{ background:var(--primary_color) !important; color:#fff !important; box-shadow:none !important; }

/* (2) Fly-to-Cart v2: Produktbild fliegt + Warenkorb-Bounce */
.rd-fly{ width:48px !important; height:48px !important; border-radius:14px; transition:transform .6s cubic-bezier(.34,.2,.2,1), opacity .55s ease-in !important; box-shadow:0 8px 22px rgba(0,0,0,.28); }
.rd-fly.rd-fly-img{ background:#fff center/cover no-repeat; }
@keyframes rdCartBounce{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.22)} }
.rd-cart-bounce{ animation:rdCartBounce .42s; }

/* (4) Produkt-Popup als App-Sheet auf Mobil (von unten, volle Breite, oben rund) */
@media (max-width:767px){
  #product-options-modal .modal-dialog{ margin:0 !important; max-width:100% !important; position:fixed !important; left:0; right:0; bottom:0; top:auto; min-height:0; }
  #product-options-modal .modal-content{ border-radius:22px 22px 0 0 !important; max-height:92vh; }
  .rd-modal-footer{ padding-bottom:calc(1.4rem + env(safe-area-inset-bottom)); }
  .rd-modal-hero{ height:190px; }
}

/* =====================================================================
   Redesign-Layer 24 — Performance, Bestseller-Karten gleich (mobil),
   "Wahl aus" entfernen, Bestseller-Navigation sauber
   ===================================================================== */
/* Ticker GPU-kompositiert -> flüssig, weniger CPU */
.rd-ticker-row{ will-change:transform; transform:translateZ(0); }

/* "Wahl aus: ..." raus (nur Beschreibung bleibt) */
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .s,
.product-card-options-information{ display:none !important; }

/* Bestseller-Karten alle gleich groß (auch mobil) */
#bestseller-swiper .swiper-wrapper{ align-items:stretch; }
#bestseller-swiper .swiper-slide{ height:auto; display:flex; }
#bestseller-swiper .product-card{ height:100% !important; display:flex; flex-direction:column; }
#bestseller-swiper .product-card .product-card-body{ flex:1 1 auto; }

/* Bestseller-Navigation: Pfeile außen, Punkte Mitte, kein Überlapp */
.swiper-navigation-container{ display:flex !important; align-items:center; justify-content:space-between; position:static !important; margin-top:1.6rem !important; gap:1rem; }
#bestseller-swiper .swiper-button-prev, #bestseller-swiper .swiper-button-next{ position:static !important; margin:0 !important; flex:0 0 auto; }
#bestseller-swiper .swiper-pagination{ position:static !important; flex:1 1 auto; text-align:center; margin:0 !important; }

/* =====================================================================
   Redesign-Layer 25 — Mobil: „rechts abgeschnitten" beheben
   (Hero .header-bg hat width:100% + Seitenränder -> 8px Überstand)
   ===================================================================== */
@media (max-width:767px){
  /* Einzige echte Overflow-Ursache war der Hero: CDN gibt ihm width:100%,
     plus margin:.8rem links/rechts -> 8px Überstand. Breite an die Ränder anpassen. */
  .header-bg{ width:auto !important; max-width:calc(100% - 1.6rem) !important; box-sizing:border-box; }
}

/* =====================================================================
   Redesign-Layer 26 — Produkt-Popup als ECHTES App-Bottom-Sheet (mobil)
   Behebt: Close-X wird hinter iOS-URL-Leiste geschoben/abgeschnitten.
   Lösung: Höhe an dynamischen Viewport (dvh) + feste Top-Bar mit
   Drag-Handle & immer sichtbarem X (nicht mehr absolut/schwebend).
   ===================================================================== */
@media (max-width:767px){
  /* Sheet kommt von unten, volle Breite */
  #product-options-modal .modal-dialog{
    position:fixed !important; left:0; right:0; bottom:0; top:auto !important;
    margin:0 !important; max-width:100% !important; min-height:0 !important;
  }
  /* Höhe = sichtbarer Viewport (dvh respektiert ein-/ausfahrende URL-Leiste) */
  #product-options-modal .modal-content{
    display:flex !important; flex-direction:column;
    max-height:90vh;            /* Fallback ältere Browser */
    max-height:90dvh;           /* iOS/Android: nie hinter URL-Leiste/Notch */
    border-radius:22px 22px 0 0 !important; overflow:hidden; position:relative;
    box-shadow:0 -8px 30px rgba(0,0,0,.18);
  }
  /* Top-Bar: feste Flex-Zeile ganz oben (NICHT absolut) -> X immer sichtbar */
  #product-options-modal .modal-header{
    position:relative !important; top:auto !important; right:auto !important;
    order:-1; flex:0 0 auto;
    display:flex !important; align-items:center; justify-content:flex-end;
    padding:1.7rem 1.4rem .7rem !important;
    background:#fff !important; border:none !important; z-index:6;
  }
  /* Drag-Handle (Grabber) mittig */
  #product-options-modal .modal-header::before{
    content:""; position:absolute; top:.8rem; left:50%; transform:translateX(-50%);
    width:4rem; height:.45rem; border-radius:999px; background:#dcd8d0;
  }
  #product-options-modal .modal-header .modal-title{ display:none !important; }
  /* X klar auf weiß: dezenter Kreis, dunkles Icon, großes Tap-Ziel */
  #product-options-modal .modal-header .close,
  #product-options-modal .modal-header .close span{
    position:relative !important; margin:0 !important; opacity:1 !important;
    color:#17150f !important; text-shadow:none !important; font-size:2.2rem; line-height:1;
  }
  #product-options-modal .modal-header .close{
    width:3.6rem; height:3.6rem; border-radius:50% !important; background:#f3f0ea !important;
    display:flex !important; align-items:center; justify-content:center; box-shadow:none !important;
  }
  /* Body scrollt zwischen Bar und Fuß-Leiste. flex-grow:0 -> Body = Inhaltshöhe
     (kein Auffüllen/keine Lücke); schrumpft+scrollt nur, wenn Content > Sheet. */
  #product-options-modal .modal-body{
    flex:0 1 auto !important; min-height:0 !important; overflow-y:auto !important;
    display:block !important; -webkit-overflow-scrolling:touch;
  }
  /* Bild als runde Karte unter der Bar (nicht mehr randlos oben) */
  .rd-modal-hero{ height:180px !important; margin:.2rem 1.4rem 0 !important; border-radius:16px !important; }
  .rd-modal-hero.rd-hero-png{ height:170px !important; }
  /* Fuß-Leiste fix unten inkl. Safe-Area */
  .rd-modal-footer{
    flex:0 0 auto; position:static !important;
    padding:1.2rem 1.6rem calc(1.2rem + env(safe-area-inset-bottom)) !important;
    border-top:1px solid var(--rd-line); background:#fff;
  }
}

/* =====================================================================
   Redesign-Layer 27 — Bewertung komplett aus dem Frontend entfernt
   (Funktion wird nicht genutzt; Sicherheitsnetz gegen Restmarkup)
   ===================================================================== */
.rest-review, .rating-stars, .rating-info, .review-list, .review-rating,
.rest-review-content, .order-reviews, .review-number,
[data-selector="rating-stars"], [data-selector="rating-review"]{ display:none !important; }

/* =====================================================================
   Redesign-Layer 28 — Alle Aktions-Modals als App-Bottom-Sheet (mobil)
   (Adresse, Login, Registrierung, Profil, Bestellungen, Adressen …)
   Konsistent mit dem Produkt-Popup. Desktop bleibt zentriert.
   ===================================================================== */
@media (max-width:767px){
  .custom-modal:not(#product-options-modal) .modal-dialog,
  .user-popup .modal-dialog{
    position:fixed !important; left:0; right:0; bottom:0; top:auto !important;
    margin:0 !important; max-width:100% !important; min-height:0 !important;
  }
  .custom-modal:not(#product-options-modal) .modal-content,
  .user-popup .modal-content{
    display:flex !important; flex-direction:column;
    max-height:92vh; max-height:92dvh;
    border-radius:22px 22px 0 0 !important; overflow:hidden; border:none !important;
    box-shadow:0 -8px 30px rgba(0,0,0,.18);
  }
  /* Top-Bar mit Drag-Handle; Titel links, Close rechts */
  .custom-modal:not(#product-options-modal) .modal-header,
  .user-popup .modal-header{
    position:relative !important; flex:0 0 auto; order:-1;
    padding:2rem 1.8rem 1.2rem !important; background:#fff !important;
    border-bottom:1px solid var(--rd-line) !important;
  }
  .custom-modal:not(#product-options-modal) .modal-header::before,
  .user-popup .modal-header::before{
    content:""; position:absolute; top:.7rem; left:50%; transform:translateX(-50%);
    width:4rem; height:.45rem; border-radius:999px; background:#dcd8d0;
  }
  .custom-modal:not(#product-options-modal) .modal-header .close,
  .user-popup .modal-header .close{
    position:static !important; width:3.4rem; height:3.4rem; border-radius:50% !important;
    background:#f3f0ea !important; display:flex; align-items:center; justify-content:center;
    color:#17150f !important; opacity:1; font-size:2rem; box-shadow:none !important; margin:0 !important;
  }
  /* Scrollbarer Body inkl. Safe-Area */
  .custom-modal:not(#product-options-modal) .modal-body,
  .custom-modal .rest-modal-body,
  .user-popup .modal-body{
    flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(1.6rem + env(safe-area-inset-bottom)) !important;
  }
}

/* =====================================================================
   Redesign-Layer 29 — Adress-Popups: Buttons + dezenter Untertitel
   ===================================================================== */
#address .b-btn, #addressCordinate .b-btn{
  width:100%; height:5rem; border-radius:14px !important;
  font-weight:600; font-size:1.6rem; margin-top:1rem;
}
/* "Ich möchte abholen" = sekundär (Outline), damit "Bestätigen" führt
   (zwei IDs schlagen die frühere Regel .custom-modal #setGelAl) */
#addressCordinate #setGelAl, #address #setGelAl{
  background:#fff !important; color:var(--primary_color) !important;
  border:1.5px solid var(--primary_color) !important; box-shadow:none !important;
}
/* Standort-/PLZ-Eingabe sauber */
#address .modal-body select, #addressCordinate #coordinateInput{
  height:5rem; border-radius:14px !important; border:1.5px solid var(--rd-line) !important;
  font-size:1.5rem; padding:0 1.4rem; color:var(--rd-ink);
}
/* Untertitel/Hinweistext dezent statt Petrol */
#address .modal-body, #addressCordinate .modal-body{ color:var(--rd-ink); }
#address .modal-body p, #addressCordinate .modal-body p,
#address .modal-body .text-muted, #addressCordinate .modal-body .text-muted{ color:var(--rd-muted) !important; }

/* =====================================================================
   Redesign-Layer 30 — Formulare in Modals: Inputs, Labels, Buttons
   (Login, Registrierung, Support, Profil, Adressen …)
   ===================================================================== */
.custom-modal .form-control{
  height:5rem; border-radius:14px !important; border:1.5px solid var(--rd-line) !important;
  font-size:1.5rem; padding:0 1.4rem; color:var(--rd-ink); background:#fff;
}
.custom-modal textarea.form-control{ height:auto; min-height:10rem; padding:1.2rem 1.4rem; }
.custom-modal .modal-body label,
.custom-modal label{ color:var(--rd-ink) !important; font-weight:600; font-size:1.4rem; margin-bottom:.6rem; }
/* Primär-Buttons solide & einheitlich (Login, Registrieren, Bestätigen …) */
.custom-modal .b-btn,
.custom-modal .b-btn-secondary,
.custom-modal .b-btn-primary{
  background:var(--primary_color) !important; color:#fff !important; border:none !important;
  border-radius:14px !important; font-weight:600; min-height:5rem; font-size:1.6rem;
  box-shadow:0 6px 16px color-mix(in srgb, var(--primary_color) 28%, transparent);
}
.custom-modal .b-btn-lg{ width:100%; }
/* Akzent-Links (Passwort vergessen, Wechsel Login/Registrieren) */
.custom-modal a[onclick*="resetPassword"],
.custom-modal .modal-body a:not(.btn):not([class*="b-btn"]){ color:var(--primary_color) !important; font-weight:600; }
/* Social-Login Buttons (falls aktiv) */
.custom-modal .btn-google, .custom-modal .btn-facebook{
  border-radius:14px !important; height:5rem; display:flex; align-items:center; justify-content:center;
  gap:1rem; font-weight:600; font-size:1.5rem; border:1.5px solid var(--rd-line) !important;
}

/* Registrierungs-Zustimmungstext dezent */
.rd-consent{ font-size:1.25rem; color:var(--rd-muted); line-height:1.5; margin-top:.2rem; }

/* =====================================================================
   Redesign-Layer 31 — Benutzer-Menü (#userMenu) Buttons markenkonform
   ===================================================================== */
.user-popup .btn-login, .user-popup .btn-register{
  height:5rem; border-radius:14px !important; font-weight:600; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
}
.user-popup .btn-login{ background:var(--primary_color) !important; color:#fff !important; border:none !important; }
/* "Account erstellen" = sekundär (kein Grün) */
.user-popup .btn-register{
  background:#fff !important; color:var(--primary_color) !important;
  border:1.5px solid var(--primary_color) !important;
}

/* =====================================================================
   Redesign-Layer 32 — Modal-Textfarben normalisieren (kein Petrol)
   ===================================================================== */
.custom-modal .modal-body,
.custom-modal .rest-modal-body,
.user-popup .modal-body{ color:var(--rd-ink); }
.custom-modal .modal-body .text-muted,
.custom-modal .modal-body small,
.custom-modal .modal-body .empty,
.custom-modal .modal-body p:only-child{ color:var(--rd-muted) !important; }
.custom-modal .modal-title{ color:var(--rd-ink) !important; }

/* =====================================================================
   Redesign-Layer 33 — SweetAlert2 (Bestätigungen/Fehler) ans Redesign
   ===================================================================== */
.swal2-popup{ border-radius:22px !important; padding:2.6rem 2rem 2.2rem !important; }
.swal2-title{ font-size:2.2rem !important; font-weight:700 !important; color:var(--rd-ink) !important; }
.swal2-html-container, .swal2-content{ font-size:1.5rem !important; color:var(--rd-muted) !important; line-height:1.5 !important; }
.swal2-actions{ gap:1rem !important; margin-top:1.8rem !important; }
.swal2-styled{ border-radius:14px !important; font-weight:600 !important; font-size:1.55rem !important; padding:1.15rem 2.4rem !important; box-shadow:none !important; margin:0 !important; }
.swal2-styled:focus{ box-shadow:none !important; }
.swal2-confirm{ background:var(--primary_color) !important; color:#fff !important; }
.swal2-cancel{ background:#f3f0ea !important; color:var(--rd-ink) !important; }
/* Icons semantisch + markenkonform */
.swal2-icon.swal2-info, .swal2-icon.swal2-question{ border-color:var(--primary_color) !important; color:var(--primary_color) !important; }
.swal2-icon.swal2-warning{ border-color:#f5a623 !important; color:#f5a623 !important; }
.swal2-icon.swal2-error{ border-color:#e5484d !important; }
.swal2-icon.swal2-error .swal2-x-mark-line-left, .swal2-icon.swal2-error .swal2-x-mark-line-right{ background-color:#e5484d !important; }
.swal2-icon.swal2-success{ border-color:#3aa76d !important; }
.swal2-icon.swal2-success [class^='swal2-success-line']{ background-color:#3aa76d !important; }
.swal2-icon.swal2-success .swal2-success-ring{ border-color:rgba(58,167,109,.3) !important; }
@media (max-width:767px){ .swal2-popup{ width:90% !important; } }

/* =====================================================================
   Redesign-Layer 34 — Checkout-Seite (zahlung.php / .payment-page)
   ===================================================================== */
.payment-page .payment-header h1{ font-size:2.6rem; font-weight:700; color:var(--rd-ink); margin-bottom:.6rem; }
.payment-page .payment-form-title{ font-size:1.8rem; font-weight:700; color:var(--rd-ink) !important; margin:2.4rem 0 1.2rem; padding-top:1.4rem; border-top:1px solid var(--rd-line); }
.payment-page .payment-form > .row:first-child .payment-form-title{ border-top:none; padding-top:0; margin-top:1rem; }
/* Inputs/Selects rund & einheitlich */
.payment-page .form-control{ height:5rem; border-radius:14px !important; border:1.5px solid var(--rd-line) !important; font-size:1.5rem; padding:0 1.4rem; color:var(--rd-ink); background:#fff; }
.payment-page textarea.form-control, .payment-page .form-control.h-auto{ height:auto; min-height:9rem; padding:1.2rem 1.4rem; }
.payment-page label{ color:var(--rd-ink); font-weight:600; font-size:1.4rem; margin-bottom:.6rem; }
/* Zahlart-Karten als App-Kacheln, Auswahl im Akzent */
.image-checkbox-groups ul{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; list-style:none; padding:0; margin:0; }
.image-checkbox-groups li{ margin:0; }
.image-checkbox-groups .b-img-checkbox{ position:relative; height:100%; }
.image-checkbox-groups .b-img-checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.image-checkbox-groups .b-img-checkbox label{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; border:1.5px solid var(--rd-line); border-radius:16px; padding:1.8rem 1rem; cursor:pointer; min-height:12rem; height:100%; transition:.15s; margin:0; background:#fff; }
.image-checkbox-groups .b-img-checkbox label img{ height:4rem !important; width:auto; object-fit:contain; margin:0 !important; }
.image-checkbox-groups .b-img-checkbox label span{ font-size:1.4rem; font-weight:600; color:var(--rd-ink); }
.image-checkbox-groups .b-img-checkbox input:checked + label{ border-color:var(--primary_color); background:#fff4ef; box-shadow:0 0 0 1.5px var(--primary_color) inset; }
/* Buttons: Gutschein + Bestellen im Akzent */
.payment-page .checkCouponCode, .payment-page .removeCouponCode{ background:var(--primary_color) !important; color:#fff !important; border:none !important; border-radius:14px !important; font-weight:600; height:5rem; width:100%; display:flex; align-items:center; justify-content:center; }
.payment-page .b-btn, .payment-page .b-btn-secondary{ background:var(--primary_color) !important; color:#fff !important; border:none !important; border-radius:14px !important; font-weight:600; }
.payment-page .b-btn-lg{ width:100%; min-height:5.6rem; font-size:1.7rem; box-shadow:0 8px 20px color-mix(in srgb, var(--primary_color) 30%, transparent); }
.payment-page .payment-bottom > p, .payment-page .payment-bottom .form-group p{ font-size:1.3rem; color:var(--rd-muted); line-height:1.6; }
.payment-page .payment-bottom a, .payment-page #couponAcc a span, .payment-page a{ color:var(--primary_color); }
/* Gutschein-Akkordeon-Trigger */
.payment-page #couponAcc > a{ display:inline-flex; font-weight:600; margin-bottom:1rem; }
@media (max-width:767px){
  .payment-page{ padding-bottom:9rem; }
  .payment-page .payment-header h1{ font-size:2.2rem; }
}

/* =====================================================================
   Redesign-Layer 35 — Cookie-Consent (#cookieModal) ans Redesign
   ===================================================================== */
#cookieModal .modal-content{ border-radius:20px !important; border:none !important; }
#cookieModal h5{ font-size:2rem; font-weight:700; color:var(--rd-ink); }
#cookieModal .modal-body, #cookieModal p{ color:var(--rd-muted); font-size:1.4rem; line-height:1.6; }
#cookieModal .btn{ border-radius:14px !important; font-weight:600; min-height:5rem; font-size:1.5rem; }
#cookieModal .btn-primary{ background:var(--primary_color) !important; border-color:var(--primary_color) !important; color:#fff !important; box-shadow:none !important; }
#cookieModal .btn-secondary{ background:#f3f0ea !important; border:none !important; color:var(--rd-ink) !important; }
#cookieModal .showDetails{ color:var(--primary_color) !important; font-weight:600; }
@media (max-width:767px){
  #cookieModal .modal-dialog{ position:fixed !important; bottom:0; left:0; right:0; top:auto !important; margin:0 !important; max-width:100% !important; }
  #cookieModal .modal-content{ border-radius:20px 20px 0 0 !important; }
  #cookieModal .btn{ width:100%; }
}

/* =====================================================================
   Redesign-Layer 36 — Warenkorb-Adress-Hinweis + Zahlart-Kacheln härten
   ===================================================================== */
/* Hinweis "Lieferadresse fehlt" deutlich */
.cart-modal .cart-bottom .cart-description.rd-addr-warning{ color:#e5484d !important; font-weight:600; }

/* Zahlart-LEISTEN (Zeilen statt Kacheln) — Icon links, Name, Auswahl-Kreis rechts */
.payment-page .image-checkbox-groups ul{ display:flex !important; flex-direction:column !important; gap:1rem !important; list-style:none !important; padding:0 !important; margin:0 !important; }
.payment-page .image-checkbox-groups li{ float:none !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; display:block !important; }
.payment-page .image-checkbox-groups .b-img-checkbox{ position:relative !important; margin:0 !important; }
.payment-page .image-checkbox-groups .b-img-checkbox input{ position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; margin:0 !important; }
.payment-page .image-checkbox-groups .b-img-checkbox label{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:1.4rem !important; width:100% !important; box-sizing:border-box !important; border:1.5px solid var(--rd-line) !important; border-radius:16px !important; padding:1.5rem 1.6rem !important; min-height:6.6rem !important; margin:0 !important; background:#fff !important; cursor:pointer; transition:.15s; }
/* Icon in fester Slot-Breite (Namen bündig), linksbündig */
.payment-page .image-checkbox-groups .b-img-checkbox label img{ position:static !important; flex:0 0 5.6rem !important; width:5.6rem !important; height:3rem !important; max-width:5.6rem !important; object-fit:contain !important; object-position:left center !important; margin:0 !important; display:block !important; }
/* Name */
.payment-page .image-checkbox-groups .b-img-checkbox label span{ position:static !important; width:auto !important; top:auto !important; left:auto !important; flex:1 1 auto !important; text-align:left !important; font-size:1.55rem !important; font-weight:600 !important; color:var(--rd-ink) !important; line-height:1.2; }
/* Auswahl-Indikator rechts (Kreis -> Haken im Akzent) */
.payment-page .image-checkbox-groups .b-img-checkbox label::after{ content:"" !important; flex:0 0 auto !important; width:2.4rem; height:2.4rem; border-radius:50%; border:2px solid var(--rd-line); margin-left:auto; background-position:center; background-repeat:no-repeat; background-size:1.3rem; transition:.15s; }
.payment-page .image-checkbox-groups .b-img-checkbox input:checked + label{ border-color:var(--primary_color) !important; background:#fff7f3 !important; }
.payment-page .image-checkbox-groups .b-img-checkbox input:checked + label::after{ border-color:var(--primary_color); background-color:var(--primary_color); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* =====================================================================
   Redesign-Layer 37 — Zurück-Pfeil: vorhandenen Header-Pfeil nutzen
   (schlicht, klein, ohne Kreis, oben ganz links in der Kopfleiste)
   ===================================================================== */
#header .header-back-button{ display:flex; align-items:center; }
#header .header-back-button a{ display:inline-flex; align-items:center; justify-content:center; width:3.4rem; height:3.4rem; margin-left:-.6rem; color:var(--rd-ink) !important; background:transparent !important; border:none !important; text-decoration:none; }
#header .header-back-button a i{ font-size:1.9rem; font-weight:700; }

/* =====================================================================
   Redesign-Layer 38 — Feinschliff: Hero-Stack, Warenkorb-Zeilen,
   einheitliches Schließen-X, Extras-Kästchen wie Pflicht-Kreise
   ===================================================================== */

/* (7) Hero mobil: Name volle Breite, Switch darunter (nie nebeneinander) */
@media (max-width:767px){
  .rest-header .row > [class*="col"]{ flex:0 0 100% !important; max-width:100% !important; }
  .rest-header .rd-modeswitch{ display:flex !important; width:100%; }
  .rest-header .rd-modeswitch .rd-seg{ flex:1 1 0; justify-content:center; }
  .rest-info-title{ white-space:normal; }
}

/* (8) Warenkorb-Zeilen: Name kürzt mit "…", Icons bleiben fix (kein Versatz) */
.cart-modal .prd-item{ align-items:center; }
.cart-modal .prd-item .prd-name{ flex:1 1 0 !important; min-width:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-modal .prd-item .prd-price{ flex:0 0 auto !important; white-space:nowrap; }
.cart-modal .prd-item .prd-qty,
.cart-modal .prd-item .prd-edit,
.cart-modal .prd-item .prd-delete{ flex:0 0 auto !important; }

/* (10) EINHEITLICHES Schließen-X für alle Modals (gleich groß, rund, nicht verzerrt) */
.modal .modal-header .close,
.cart-modal .cart-modal-content > .close,
.cart-modal .cart-inner-content > .close,
#cart > .close, #cart .cart-modal-content > .close{
  width:3.6rem !important; height:3.6rem !important; min-width:3.6rem !important; flex:0 0 auto;
  border-radius:50% !important; background:#f3f0ea !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; margin:0 !important; opacity:1 !important; box-shadow:none !important;
  font-size:0 !important; line-height:1 !important; text-shadow:none !important; border:none !important;
}
.modal .modal-header .close span,
.cart-modal .close span{ font-size:2.3rem !important; line-height:1 !important; color:var(--rd-ink) !important; font-weight:400 !important; display:block !important; width:auto !important; height:auto !important; }

/* (12) Extras-Kästchen wie Pflicht-Kreise — native Box verstecken, eigener Kasten via label::before
   (rendert zuverlässig in allen Browsern, anders als appearance:none) */
#product-options-modal .b-form-element.b-checkbox input[type=checkbox],
#rdMenuModal .b-form-element.b-checkbox input[type=checkbox]{
  position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; margin:0 !important; pointer-events:none;
}
#product-options-modal .b-form-element.b-checkbox label,
#rdMenuModal .b-form-element.b-checkbox label{
  display:flex !important; align-items:center !important; gap:1.1rem !important; cursor:pointer; position:relative;
}
#product-options-modal .b-form-element.b-checkbox label::before,
#rdMenuModal .b-form-element.b-checkbox label::before{
  content:""; flex:0 0 auto; width:2.2rem; height:2.2rem; box-sizing:border-box;
  border:2px solid var(--rd-line); border-radius:7px; background:#fff; transition:.15s;
}
#product-options-modal .b-form-element.b-checkbox input[type=checkbox]:checked + label::before,
#rdMenuModal .b-form-element.b-checkbox input[type=checkbox]:checked + label::before{
  border-color:var(--primary_color); background-color:var(--primary_color);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position:center; background-repeat:no-repeat; background-size:1.4rem;
}

/* =====================================================================
   Redesign-Layer 39 — (9) Karten gleich hoch + Add-Button höher (Safari-Bar)
   ===================================================================== */
@media (max-width:767px){
  /* Menü-Karten einheitliche Mindesthöhe (mit/ohne Bild gleich) */
  .menu-list-item .food-list-item-collapse .menu-header{ min-height:10.4rem !important; }
  /* Bild im Flow (NICHT absolut!) + vertikal zentriert; Text reserviert seinen Platz daneben */
  .menu-list-item .food-list-item-collapse .menu-header .row{ align-items:center !important; }
  .menu-list-item .food-list-item-collapse .menu-header figure,
  .menu-list-item .food-list-item-collapse .menu-header figure.figure-rect{ position:relative !important; margin:0 !important; }
  .menu-list-item .food-list-item-collapse .menu-header figure img{ object-position:center !important; }
  /* + Button etwas höher als der untere Rand, untere rechte Ecke */
  .menu-list-item .food-list-item-collapse .menu-header .prd-add-button{ top:auto !important; bottom:1.9rem !important; transform:none !important; }
  /* Genug Platz unten: letzte Karten + Buttons scrollen über die fixe Warenkorb-Leiste + Safari-Adressleiste */
  main{ padding-bottom:12rem !important; }
}

/* =====================================================================
   Redesign-Layer 40 — Google Places Autocomplete-Dropdown über dem Modal
   (sonst sind die Vorschläge nicht klickbar -> "hakt")
   ===================================================================== */
.pac-container{ z-index:100000 !important; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.18); border:none; margin-top:.4rem; font-family:inherit; }
.pac-item{ padding:1rem 1.2rem; font-size:1.4rem; cursor:pointer; border-top:1px solid var(--rd-line); }
.pac-item:first-child{ border-top:none; }
.pac-item-query{ font-size:1.4rem; }

/* =====================================================================
   Redesign-Layer 41 — Hausnummer-Feld (erscheint bei fehlender Nummer)
   ===================================================================== */
.rd-doornum{ margin-top:1.2rem; }
.rd-doornum-label{ display:block; font-weight:600; font-size:1.4rem; color:var(--rd-ink); margin-bottom:.6rem; }
#addressCordinate #doorNumber{ height:5rem; border-radius:14px !important; border:1.5px solid var(--primary_color) !important; font-size:1.5rem; padding:0 1.4rem; color:var(--rd-ink); width:100%; }
.rd-doornum-hint{ display:block; font-size:1.2rem; color:var(--primary_color); margin-top:.6rem; font-weight:500; }

/* Adress-Fehlermeldung (theme1.js Validierung) sichtbar */
#addressCordinate .rd-addr-error{ color:#e5484d; font-weight:600; font-size:1.35rem; margin:1rem 0 0; }

/* =====================================================================
   Redesign-Layer 42 — Cart-X nur mobil (Desktop = feste Seitenleiste, kein X)
   ===================================================================== */
@media (min-width:768px){
  .cart-modal .cart-modal-content > .close,
  .cart-modal .cart-inner-content > .close,
  #cart > .close, #cart .cart-modal-content > .close{ display:none !important; }
}

/* =====================================================================
   Redesign-Layer 43 — Google-Adresssuche: Pin-Icon überlappt Text nicht mehr
   ===================================================================== */
#addressCordinate .form-group-icon.icon-left,
#address .form-group-icon.icon-left{ position:relative; }
#addressCordinate .form-group-icon.icon-left > i,
#address .form-group-icon.icon-left > i{
  position:absolute !important; left:1.5rem; top:50%; transform:translateY(-50%);
  color:var(--rd-muted); font-size:1.6rem; z-index:2; pointer-events:none; margin:0;
}
#addressCordinate #coordinateInput,
#addressCordinate .form-group-icon.icon-left .form-control,
#address .form-group-icon.icon-left .form-control{ padding-left:4.4rem !important; }

/* =====================================================================
   Redesign-Layer 44 — Zahlart-Leisten: Logos größer, Name zentriert,
   Stripe-Sub-Icons (Visa/MC/Apple Pay/Google Pay/Klarna)
   ===================================================================== */
/* Logos etwas größer */
.payment-page .image-checkbox-groups .b-img-checkbox label img{ flex:0 0 6.4rem !important; width:6.4rem !important; height:3.6rem !important; max-width:6.4rem !important; }
/* Name mittig */
.payment-page .image-checkbox-groups .b-img-checkbox label span{ text-align:center !important; }
/* Sub-Icons unter Stripe (womit man zahlen kann) */
.payment-page .image-checkbox-groups li{ display:flex; flex-direction:column; }
.payment-page .image-checkbox-groups .rd-pay-methods{ display:flex; align-items:center; justify-content:center; gap:1.1rem; flex-wrap:wrap; padding:.9rem 1.6rem .2rem; }
.payment-page .image-checkbox-groups .rd-pay-methods img{ height:2.2rem; width:auto; }

/* =====================================================================
   Redesign-Layer 45 — Fly-to-Cart v3 (professionell, WAAPI-Bogen)
   Bild fliegt im Bogen, Warenkorb federt mit Overshoot, Badge poppt.
   WAAPI steuert transform/opacity -> hier keine transition (Konflikt).
   ===================================================================== */
.rd-fly{ width:58px !important; height:58px !important; border-radius:16px; transition:none !important; box-shadow:0 14px 30px rgba(0,0,0,.30), 0 4px 10px rgba(0,0,0,.18); will-change:transform,opacity; transform-origin:center; }
.rd-fly.rd-fly-img{ background:#fff center/cover no-repeat; border:2px solid #fff; }
.rd-fly.rd-fly-dot{ background:var(--primary_color); border-radius:50%; box-shadow:0 10px 24px color-mix(in srgb, var(--primary_color) 50%, transparent); }

@keyframes rdCartBounce{ 0%{transform:scale(1)} 28%{transform:scale(.86)} 55%{transform:scale(1.2)} 75%{transform:scale(.96)} 100%{transform:scale(1)} }
.rd-cart-bounce{ animation:rdCartBounce .52s cubic-bezier(.34,1.56,.64,1); }

@keyframes rdBadgePop{ 0%{transform:scale(1)} 35%{transform:scale(1.55)} 70%{transform:scale(.9)} 100%{transform:scale(1)} }
.rd-badge-pop{ animation:rdBadgePop .48s cubic-bezier(.34,1.56,.64,1); }

@media (prefers-reduced-motion: reduce){
  .rd-cart-bounce, .rd-badge-pop{ animation:none; }
}

/* =====================================================================
   Redesign-Layer 46 — Stripe-Sub-Icons INNERHALB der Zahlart-Leiste
   (unter dem Namen, zentriert; Layer-44-Spaltenlayout wird ersetzt)
   ===================================================================== */
/* Layer 44 hatte li auf flex-column gesetzt, um Icons darunter zu hängen -> zurück auf normalen Listeneintrag */
.payment-page .image-checkbox-groups li{ display:block !important; flex-direction:initial !important; }
/* Name-Span darf zur Spalte werden (Name oben, Icon-Reihe darunter) */
.payment-page .image-checkbox-groups .b-img-checkbox label span{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; }
/* Icon-Reihe: kompakt, zentriert, gehört sichtbar zur Stripe-Leiste.
   Höhere Spezifität + !important, weil die Mini-Icons jetzt INNERHALB von
   .b-img-checkbox label liegen und sonst die große label-img-Regel (Layer 44) greift. */
.payment-page .image-checkbox-groups .b-img-checkbox label .rd-pay-methods{ display:flex; flex-direction:row !important; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; padding:0; margin:.2rem 0 0; width:100%; align-self:stretch; }
.payment-page .image-checkbox-groups .b-img-checkbox label .rd-pay-methods img{ flex:0 0 auto !important; width:auto !important; height:2.2rem !important; display:block; border-radius:.4rem; }
@media (max-width:767px){
  .payment-page .image-checkbox-groups .b-img-checkbox label .rd-pay-methods{ gap:.55rem; }
  .payment-page .image-checkbox-groups .b-img-checkbox label .rd-pay-methods img{ height:1.9rem !important; }
}

/* =====================================================================
   Redesign-Layer 47 — Zahlarten NEU: 2-Spalten-Grid (Web), kompakt,
   je Box nur EIN zentriertes Element. Ersetzt Reihen-Layer 36/44/46.
   ===================================================================== */
/* Grid: 2 nebeneinander (Web), 1 Spalte mobil */
.payment-page .image-checkbox-groups ul{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:1.1rem !important; flex-direction:initial !important; list-style:none !important; padding:0 !important; margin:0 !important; }
.payment-page .image-checkbox-groups li{ display:block !important; width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; }
@media (max-width:767px){
  .payment-page .image-checkbox-groups ul{ grid-template-columns:1fr !important; }
}
/* Box: kompakt + zentriert, kein Zeilen-Layout */
.payment-page .image-checkbox-groups .b-img-checkbox{ position:relative !important; height:100% !important; margin:0 !important; }
.payment-page .image-checkbox-groups .b-img-checkbox label{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; gap:0 !important; width:100% !important; height:100% !important; min-height:6.6rem !important; box-sizing:border-box !important; padding:1.3rem 1.2rem !important; border:1.5px solid var(--rd-line) !important; border-radius:14px !important; background:#fff !important; cursor:pointer; transition:.15s; text-align:center !important; }
.payment-page .image-checkbox-groups .b-img-checkbox input:checked + label{ border-color:var(--primary_color) !important; background:#fff7f3 !important; box-shadow:0 0 0 1.5px var(--primary_color) inset !important; }
/* Auswahl-Punkt entfernen — der Rahmen zeigt die Auswahl */
.payment-page .image-checkbox-groups .b-img-checkbox label::after{ display:none !important; content:none !important; }
/* Text (Barzahlung / Auf Rechnung / EC): zentriert, kein Icon */
.payment-page .image-checkbox-groups .b-img-checkbox label span{ flex:0 1 auto !important; width:auto !important; max-width:100% !important; text-align:center !important; font-size:1.55rem !important; font-weight:600 !important; color:var(--rd-ink) !important; line-height:1.25; display:block !important; }
/* Logo (PayPal / Klarna): zentriert, einheitliche Höhe */
.payment-page .image-checkbox-groups .b-img-checkbox label img{ flex:0 0 auto !important; width:auto !important; max-width:70% !important; height:2.8rem !important; object-fit:contain !important; object-position:center !important; margin:0 auto !important; display:block !important; }
/* Stripe-Box: nur die 5 Brand-Icons, einheitliche Höhe, nebeneinander zentral */
.payment-page .image-checkbox-groups .b-img-checkbox label .rd-pay-methods{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; gap:.7rem !important; width:100% !important; margin:0 !important; padding:0 !important; }
.payment-page .image-checkbox-groups .b-img-checkbox label .rd-pay-methods img{ flex:0 0 auto !important; width:auto !important; max-width:none !important; height:2.3rem !important; margin:0 !important; border-radius:.4rem; }
@media (max-width:767px){
  .payment-page .image-checkbox-groups .b-img-checkbox label .rd-pay-methods img{ height:2.1rem !important; }
  .payment-page .image-checkbox-groups .b-img-checkbox label .rd-pay-methods{ gap:.6rem !important; }
}

/* =====================================================================
   Redesign-Layer 48 — Produktkarten: Beschreibung clampen (…),
   gleiche Kartenhöhe auf Web UND Mobil. Volltext im Produkt-Popup.
   ===================================================================== */
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .v{
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
  min-height:3.9rem; max-height:3.9rem; /* immer 2 Zeilen reservieren -> alle Karten gleich hoch */
}
/* Bestseller-Karten-Beschreibung ebenso clampen */
.product-card-shortdesc{ display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; min-height:3.6rem; }
/* Gleiche Höhe auch mobil (Web hatte schon min-height:12.5rem + grid-stretch) */
@media (max-width:767px){
  .menu-list-item .food-list-item-collapse .menu-header{ min-height:12.5rem !important; }
}

/* =====================================================================
   Redesign-Layer 49 — Einheitliche Bottom-Sheets (mobil): Produkt-Popup
   UND Warenkorb immer gleich (feste Höhe, von unten, fixer Kopf+Fuß,
   einheitliches X). Behebt "mal von unten, mal nicht" + verrutschen.
   Plus: PayPal/Logos in den Zahlart-Boxen größer.
   ===================================================================== */

/* ---- Produkt-Popup: Inhalt umarmen + unten andocken (nie abgeschnitten, nie Lücke).
       Footer sitzt direkt nach dem Inhalt; bei zu viel Inhalt scrollt nur der Body.
       WICHTIG: das Dialog ist display:flex/align-items:center mit fixer Höhe ->
       streckt den Content. Auf Block/auto stellen, dann hugt der Content. ---- */
@media (max-width:767px){
  #product-options-modal .modal-dialog{
    display:block !important; align-items:initial !important;
    height:auto !important; min-height:0 !important;
  }
  /* Bootstrap-Zentrier-Pseudo (height:100vh) raus -> sonst wird das Dialog 90vh hoch */
  #product-options-modal .modal-dialog-centered::before,
  #product-options-modal .modal-dialog::before{ display:none !important; content:none !important; height:0 !important; }
  #product-options-modal .modal-content{
    height:auto !important; max-height:88dvh !important;
  }
  /* Body NICHT wachsen lassen (sonst füllt er die Höhe -> Lücke vor dem Footer).
     Longhand, weil Layer-26 'flex:1 1 auto !important' sonst gewinnt.
     flex-grow:0 = Inhaltshöhe; flex-shrink:1 = schrumpft+scrollt nur wenn nötig. */
  #product-options-modal .modal-body{ flex-grow:0 !important; flex-shrink:1 !important; flex-basis:auto !important; }
}

/* ---- Warenkorb als FESTES Bottom-Sheet (wie das Produkt-Popup) ---- */
@media (max-width:991px){
  #cart.cart-modal{ background:rgba(0,0,0,.4) !important; }
  #cart .cart-modal-content{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:100% !important; margin:0 !important;
    height:auto !important; max-height:88dvh !important;
    background:#fff !important; pointer-events:auto !important;
    display:flex !important; flex-direction:column !important;
    border-radius:22px 22px 0 0 !important; overflow:hidden !important;
    box-shadow:0 -8px 30px rgba(0,0,0,.18) !important;
    padding:2.8rem 0 0 0 !important;
  }
  /* Drag-Handle mittig oben */
  #cart .cart-modal-content::before{
    content:""; position:absolute; top:.9rem; left:50%; transform:translateX(-50%);
    width:4rem; height:.45rem; border-radius:999px; background:#dcd8d0; z-index:5;
  }
  /* Einheitliches X: oben rechts, gleicher Abstand wie Produkt-Popup (nicht am äußersten Rand) */
  #cart .cart-modal-content > .close{
    display:flex !important; position:absolute !important; top:1.5rem !important; right:1.6rem !important; left:auto !important;
    width:3.6rem !important; height:3.6rem !important; z-index:6;
  }
  /* Kopf (Titel) fix oben */
  #cart .cart-modal-content .cart-title{ flex:0 0 auto !important; }
  /* Produktliste scrollt (zwischen Kopf und Fuß) */
  #cart .cart-modal-content .cart-prd-list{ flex:0 1 auto !important; min-height:0 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
  /* Summen + Bestellen unten fix */
  #cart .cart-modal-content .cart-price-list,
  #cart .cart-modal-content .cart-bottom{ flex:0 0 auto !important; }
}

/* ---- PayPal/Logos in den Zahlart-Boxen größer + einheitlich ---- */
.payment-page .image-checkbox-groups .b-img-checkbox label img{ height:3.6rem !important; max-width:80% !important; }
@media (max-width:767px){
  .payment-page .image-checkbox-groups .b-img-checkbox label img{ height:3.4rem !important; }
}

/* =====================================================================
   Redesign-Layer 50 — Zahlart-Logos definitiv größer + einheitlich.
   Höhere Spezifität (.b-form-element.b-img-checkbox) schlägt die
   alten height-Regeln (Layer 36 3rem / 44 / 47) zuverlässig.
   ===================================================================== */
.payment-page .image-checkbox-groups .b-form-element.b-img-checkbox label > img{
  height:3.4rem !important; max-height:none !important; max-width:80% !important; width:auto !important;
  object-fit:contain !important; object-position:center !important; margin:0 auto !important;
}
@media (max-width:767px){
  .payment-page .image-checkbox-groups .b-form-element.b-img-checkbox label > img{ height:3.2rem !important; }
}

/* =====================================================================
   Redesign-Layer 51 — Zahlart-Feinschliff + Produktname-Clamp
   ===================================================================== */
/* Trenner | zwischen den Stripe-Icons */
.payment-page .image-checkbox-groups .rd-pay-methods .rd-pay-sep{
  flex:0 0 auto; width:1px; height:1.9rem; background:#d3cfc7; display:inline-block; align-self:center; margin:0;
}
/* Text-Boxen (Barzahlung / EC ...) sauber mittig, etwas mehr Luft */
.payment-page .image-checkbox-groups .b-form-element.b-img-checkbox label{
  align-items:center !important; justify-content:center !important; text-align:center !important;
}
.payment-page .image-checkbox-groups .b-form-element.b-img-checkbox label span{
  width:100% !important; align-self:center !important; line-height:1.3 !important;
}

/* ---- Produktname: lange Namen kürzen mit "…" (Layout bleibt fix) ---- */
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .t{
  display:flex !important; align-items:center; gap:.8rem; flex-wrap:nowrap; min-width:0;
}
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .t .rd-prd-name{
  flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top .t .productinfo{
  flex:0 0 auto; white-space:nowrap; margin-left:0 !important;
}
/* Bestseller-Karten-Name ebenso einzeilig kürzen */
.product-card-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Layer 51b — Text-Spalte begrenzen, damit lange Namen kürzen statt überlaufen */
.menu-list-item .food-list-item-collapse .menu-header .row > [class*="col-lg-9"]{ flex:1 1 0 !important; min-width:0 !important; max-width:100% !important; }
.menu-list-item .food-list-item-collapse .menu-header-container,
.menu-list-item .food-list-item-collapse .menu-header-container .menu-header-top{ min-width:0 !important; max-width:100% !important; }

/* === Unterkategorien (Sub-Kategorien) v37 === */
.menu-nav .nav-link.rd-subnav, .nav-link.rd-subnav{ padding-left:26px !important; font-size:.9em; opacity:.82; position:relative; }
.nav-link.rd-subnav::before{ content:"\21B3"; position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.7; }
.menu-list-item.rd-sub-cat .menu-title{ font-size:.92em; }
.menu-list-item.rd-sub-cat .food-list-item-header{ padding-top:6px; }
.rd-sub-arrow{ display:inline-block; margin-right:6px; opacity:.7; }

/* === Redesign-Fix 2026-06-30: Kategorie-Beschreibung unter Banner + Padding + Top-Bar z-index === */
.rd-cat-desc{ display:none !important; }
/* Kategorie-Beschreibung: dezent im Bild unter dem Namen, 1 Zeile, Fade ins Transparente, Klick -> Popup */
.menu-list-item .food-list-item-header .menu-title .rd-cat-sub{ display:block; max-width:100%; margin-top:.4rem; font-size:1.4rem; font-weight:400; line-height:1.3; color:rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; cursor:pointer; -webkit-mask-image:linear-gradient(to right,#000 78%,transparent 100%); mask-image:linear-gradient(to right,#000 78%,transparent 100%); }
@media (max-width:767px){ .menu-list-item .food-list-item-header .menu-title .rd-cat-sub{ font-size:1.25rem; } }
.menu-list-item .food-list-item-header .menu-title .small{ display:none !important; }
.menu-list-nav{ z-index:30 !important; }  /* Leiste über Inhalt (Produktinfo-Labels malen sonst drüber) */
@media (min-width:992px){ .cart-modal{ z-index:50 !important; } }  /* Warenkorb-Sidebar über der Leiste -> kein weißer Streifen */
.header-top-bar{ position:relative; z-index:1001; }

/* SweetAlert-Popup: dunkler Overlay (Seite bleibt sichtbar abgedunkelt, nicht weiß) */
.swal2-container.swal2-backdrop-show, .swal2-container{ background:rgba(0,0,0,.55) !important; }
/* Extras pro Gruppe einklappen: versteckte Items + "weitere anzeigen"-Link, alten globalen showMore unterdrücken */
#product-options-modal .rd-xh{ display:none !important; }
#product-options-modal .showMore{ display:none !important; }
#product-options-modal .rd-xmore{ margin:.2rem 0 1.2rem; padding-left:.2rem; }
#product-options-modal .rd-xmore a{ color:var(--primary_color,#c14f40); font-weight:600; font-size:1.4rem; text-decoration:none; cursor:pointer; }
#product-options-modal .product-variant-extras-container, #product-options-modal .extras-container{ height:auto !important; overflow:visible !important; }
/* Warenkorb-Notizfeld ans Design: runder, weicher, Fokus im Akzent */
.prd-note{ margin-top:.6rem; }
.prd-note label{ display:block; font-size:1.3rem; font-weight:600; color:var(--rd-ink,#2a2622); margin-bottom:.45rem; }
.prd-note textarea, textarea[data-selector="note"]{ border:1px solid var(--rd-line,#e7e3db) !important; border-radius:14px !important; padding:1rem 1.2rem !important; font-size:1.4rem !important; line-height:1.4; background:#faf8f5 !important; box-shadow:none !important; resize:vertical; width:100%; }
.prd-note textarea:focus, textarea[data-selector="note"]:focus{ border-color:var(--primary_color,#c14f40) !important; background:#fff !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary_color,#c14f40) 16%, transparent) !important; outline:none !important; }
/* Produkt-Labels: farbige Icon-Kreise (jedes Label eigene Farbe). Auf Bild=Overlay, ohne Bild=rechts. Halal=creme+braunes Zeichen. Tooltip Hover/Tap. */
.rd-prd-labels{ display:flex; flex-wrap:wrap; gap:.4rem; z-index:3; }
.menu-list-item figure.responsive{ position:relative; }
.menu-list-item figure.responsive .rd-prd-labels{ position:absolute; top:.5rem; left:.5rem; right:.5rem; margin:0; }
.menu-header-top > .rd-prd-labels{ margin:0 0 .55rem; }
.rd-prd-label{ display:inline-flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; min-width:2.3rem; border-radius:50%; background:var(--lc); color:#fff; cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,.22); }
.rd-prd-label i{ font-size:1.1rem; }
.rd-prd-label .rd-lbl-svg{ width:82%; height:82%; display:block; }
.rd-prd-label.rd-label-halal{ background:#f4ede1; color:var(--lc); border:1.5px solid var(--lc); box-shadow:0 1px 5px rgba(0,0,0,.18); }
.rd-prd-tip{ position:fixed; z-index:99999; background:#17150f; color:#fff; font-size:1.2rem; font-weight:600; padding:.45rem .9rem; border-radius:8px; pointer-events:none; white-space:nowrap; transform:translate(-50%,-118%); box-shadow:0 4px 14px rgba(0,0,0,.22); }
@media (max-width:767px){ .rd-prd-label{ width:2rem; height:2rem; min-width:2rem; } .rd-prd-label i{ font-size:.95rem; } }
.rd-noimg-labels{ display:flex; justify-content:flex-end; padding-top:.3rem; } .rd-noimg-labels .rd-prd-labels{ justify-content:flex-end; }

/* =====================================================================
   Layer 40 — Warenkorb-Notiz-Label: Alt-CSS (style.css) positioniert es
   position:absolute;top:-10px (altes Notch-Label) und ist spezifischer
   als der Redesign-Block-Label-Stil -> Label schwebte über die Feldkante
   und wurde abgeschnitten. Zurück in den normalen Fluss.
   ===================================================================== */
.cart-modal-content .cart-prd-list .prd-item .prd-note label{
  position:static !important; top:auto !important; left:auto !important;
  padding:0 !important; background:transparent !important;
}
.cart-modal-content .cart-prd-list .prd-item .prd-note{ padding-top:0 !important; }


/* =====================================================================
   Layer 41 — Kundenkonto: Punkte & Treue (additiv, Slice 1)
   ===================================================================== */
.rd-loyalty .rd-loy-load, .rd-loyalty .rd-loy-empty{ text-align:center; color:#6b665e; padding:2rem 0; font-size:1.4rem; }
.rd-loy-cockpit{ background:#f4f1ec; border-radius:18px; padding:2.2rem 1.6rem; text-align:center; margin-bottom:1.8rem; }
.rd-loy-points{ font-size:4.2rem; font-weight:800; line-height:1; color:#17150f; }
.rd-loy-points span{ display:block; font-size:1.2rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8c7766; margin-top:.4rem; }
.rd-loy-euro{ font-size:1.8rem; font-weight:700; color:var(--primary_color,#c14f40); margin-top:1rem; }
.rd-loy-rule{ font-size:1.25rem; color:#6b665e; margin-top:.6rem; }
.rd-loy-hist-title{ font-size:1.4rem; font-weight:700; color:#17150f; margin:0 0 1rem; }
.rd-loy-hist{ list-style:none; margin:0; padding:0; }
.rd-loy-hist li{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--rd-line,#e7e3db); }
.rd-loy-hist li:last-child{ border-bottom:none; }
.rd-loy-h-l{ display:flex; flex-direction:column; gap:.15rem; }
.rd-loy-h-r{ font-size:1.4rem; font-weight:600; color:#17150f; }
.rd-loy-h-s{ font-size:1.2rem; color:#6b665e; }
.rd-loy-h-d{ font-size:1.15rem; color:#9a938a; }
.rd-loy-h-p{ font-size:1.7rem; font-weight:800; white-space:nowrap; }
.rd-loy-h-p.pos{ color:#2e7d32; }
.rd-loy-h-p.neg{ color:#c14f40; }


/* Rabatt-Button: Gueltigkeit (Tag/Zeit) als dezente 2. Zeile */
.rd-offer-card .rd-oc-txt{ display:inline-flex; flex-direction:column; line-height:1.25; text-align:left; }
.rd-offer-card .rd-oc-valid{ font-size:1.1rem; font-weight:500; color:var(--rd-muted); margin-top:.1rem; white-space:nowrap; }


/* Betriebsurlaub: Banner + Bestellen gesperrt */
.rd-vac-wrap{ margin-top:1.4rem; }
.rd-vac{ display:flex; gap:1.3rem; align-items:flex-start; padding:1.6rem 1.8rem; border-radius:16px; background:color-mix(in srgb, var(--primary_color) 9%, #fff); border:1px solid color-mix(in srgb, var(--primary_color) 26%, #efece6); }
.rd-vac > i{ color:var(--primary_color); font-size:2.4rem; margin-top:.1rem; flex:0 0 auto; }
.rd-vac-txt strong{ font-size:1.7rem; color:#17150f; display:block; }
.rd-vac-msg{ font-size:1.45rem; color:#17150f; margin-top:.4rem; line-height:1.45; }
.rd-vac-back{ font-size:1.3rem; color:var(--rd-muted); margin-top:.6rem; }
html.rd-vacation .product-card-add-to-cart-btn,
html.rd-vacation .prd-add-button,
html.rd-vacation [data-action="add-to-cart"],
html.rd-vacation .cart-btn-container,
html.rd-vacation #product-options-modal .form-group-buttons{ display:none !important; }


/* Shop-Info (Kurzinfo) direkt unter Name/Informationen */
.rest-info .rd-shopinfo{ font-size:1.35rem; color:var(--rd-muted); margin-top:.6rem; line-height:1.45; }
.rest-info .rd-shopinfo p{ margin:0; }