/* ==========================================================================
   NAMI – Online bestellen (bestellen.php)
   Ergänzung zu css/style.css. Nutzt dieselben Design-Tokens (:root dort).
   Aufbau: mobile-first, Zusatzspalten erst ab großen Breiten.
   ========================================================================== */

/* Die Bestellseite hat keinen Hero – der Kopf ist deshalb von Anfang an dunkel */
.page-order .site-header {
  background: rgba(16, 13, 8, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

/* Navigationspunkt „Online bestellen" als dezenter Akzent */
.main-nav .nav-order { color: var(--gold-soft); }
.main-nav .nav-order::after { background: var(--gold-soft); }

/* ---------- Kopfbereich ---------- */
.ob-head {
  padding-top: calc(var(--header-h) + clamp(1.6rem, 5vw, 3rem));
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
  background: radial-gradient(72% 80% at 15% 0%, rgba(200, 162, 76, 0.10), transparent 62%);
}
.ob-head h1 { font-size: clamp(2rem, 5.4vw, 3rem); margin-bottom: 0.3em; }
.ob-lead { color: var(--ink-muted); max-width: 52ch; }

/* ---------- Bezahlung vor Ort ----------
   Zweimal auf der Seite: oben im Kopf und direkt über dem Bestellknopf.
   Welche Arten erscheinen, steuert das Backend. Es geht weiterhin um
   Zahlung im Restaurant – online wird nichts bezahlt. */
.ob-pay-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  margin: 1rem 0 0; padding: 0.7rem 0.95rem;
  border: 1px solid var(--gold-dim); border-radius: var(--radius-sm);
  background: rgba(200, 162, 76, 0.07);
}
.ob-pay-lead {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.ob-pay-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem;
}
.ob-pay-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.65rem; border-radius: 999px;
  border: 1px solid rgba(200, 162, 76, 0.28); background: rgba(0, 0, 0, 0.38);
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.ob-pay-item svg { flex: none; color: var(--gold); }

/* Im Backend abgeschaltet: bleibt sichtbar, tritt aber deutlich zurück.
   Erkennbar an drei Dingen zugleich – blasse Farbe, durchgestrichener Name
   und der ausgeschriebene Zusatz. Die Farbe allein würde niemandem
   genügen, der sie nicht unterscheiden kann. */
.ob-pay-item--off {
  border-color: rgba(180, 168, 143, 0.22);
  background: rgba(0, 0, 0, 0.22);
  color: var(--ink-muted);
  font-weight: 500;
}
.ob-pay-item--off svg { color: var(--ink-muted); opacity: 0.6; }
.ob-pay-item--off .ob-pay-name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(180, 168, 143, 0.75);
}
.ob-pay-off {
  font-size: 0.72rem; font-weight: 600; color: var(--ink-muted);
  padding-left: 0.1rem;
}

/* Über dem Knopf: letzte Erinnerung, deshalb dichter am Knopf als am
   Formular darüber. Die Kassenspalte ist nur rund 300 px breit – dort
   würde die volle Größe drei Zeilen brauchen und den Knopf nach unten
   drücken, also etwas gedrängter als oben. */
.ob-pay-row--submit {
  margin: 0.9rem 0 0.1rem;
  padding: 0.55rem 0.7rem;
  gap: 0.35rem 0.6rem;
}
.ob-pay-row--submit .ob-pay-lead { font-size: 0.7rem; letter-spacing: 0.08em; }
.ob-pay-row--submit .ob-pay-item { padding: 0.22rem 0.5rem; font-size: 0.82rem; gap: 0.3rem; }
.ob-pay-row--submit .ob-pay-item svg { width: 15px; height: 15px; }

/* ---------- Aktionen: Ankündigung oben ----------
   Eine Zeile im Kasten „Auf einen Blick“, kein eigener Kasten mehr. Die
   echten Beträge stehen später im Warenkorb. */
.ob-promo-top {
  display: grid; gap: 0.45rem; align-content: center;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
}
.ob-promo-item {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--ink);
}
.ob-promo-badge {
  flex: none; min-width: 3.6rem; padding: 0.24rem 0.55rem;
  border-radius: 999px; background: var(--gold); color: #1a1409;
  font-size: 0.78rem; font-weight: 700; text-align: center; white-space: nowrap;
}
.ob-promo-item strong { color: var(--gold-soft); }

/* ---------- Gewinnaktion: Zähler auf der Bestellseite ----------
   Der Balken ist Zugabe, der Satz darüber trägt die Information. Deshalb
   steht die Zahl im Text und nicht nur in der Balkenlänge – sonst müsste
   man sie schätzen. */
.ob-promo-item--award { align-items: flex-start; }
.ob-award-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.4rem; }
.ob-award-line { margin: 0; }
.ob-award-bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(200, 162, 76, 0.16);
}
.ob-award-bar > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
}
/* Kein Flex-Layout: Es machte aus <strong> und dem Text eigene Elemente
   mit Abstand dazwischen - und damit eine Luecke vor dem Komma. */
.ob-award-count { margin: 0; font-size: 0.84rem; color: var(--ink-muted); }
.ob-award-count strong { color: var(--gold-soft); }
.ob-award-raw { margin-left: 0.5rem; font-size: 0.78rem; color: var(--ink-muted); opacity: 0.75; }

/* ---------- Gewinn auf der Bestätigungsseite ----------
   Bewusst kräftiger als der Rest der Seite: Das ist die eine Nachricht,
   die der Gast auf keinen Fall überlesen darf. */
.ob-win {
  margin: 0 0 1.4rem; padding: 1.1rem 1.2rem;
  text-align: left; border-radius: var(--radius);
  background: rgba(200, 162, 76, 0.12);
  border: 1px solid var(--gold); border-left-width: 4px;
}
.ob-win-head {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem;
  font-family: var(--font-display); font-size: 1.18rem; color: var(--gold-soft);
}
.ob-win-head svg { flex: none; color: var(--gold); }
.ob-win-text { margin: 0 0 0.5rem; font-size: 0.95rem; }
.ob-win-text strong { color: var(--gold-soft); }
.ob-win-note { margin: 0; font-size: 0.84rem; color: var(--ink-muted); }
.ob-pay-row--submit .ob-pay-off { font-size: 0.68rem; }

.ob-pay-row--confirm { margin: 0.6rem auto 0; max-width: 30rem; justify-content: center; }

/* ---------- Auf einen Blick: Heute, Abholung, Bezahlung, Aktion ----------
   Ein Kasten statt vier. Vorher: vier Blöcke untereinander, 482 px auf dem
   Handy und 269 px auf dem Desktop, bevor die erste Speise kam.

   Handy und Tablet: Zeilen. „Heute“ und „Abholung“ mit schmaler
   Beschriftung links, damit die Werte bündig untereinander stehen.
   Ab 1080 px: zwei Zeilen mit Spalten – links, was man wissen muss (Heute,
   Bezahlung), rechts, was es ergänzt (Öffnungszeit, Adresse, Aktion).

   Trennlinien statt Abstände: Vier Inhalte in einem Rahmen brauchen eine
   Grenze zwischen sich, sonst liest man sie als einen Absatz. */
.ob-info {
  --ob-lbl: 5.2rem;
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: 1.4rem 0 0;
  border: 1px solid var(--gold-dim); border-radius: var(--radius);
  background: rgba(200, 162, 76, 0.07);
  overflow: hidden;
}

/* Der Zustand färbt den ganzen Kasten mit. js/bestellen.js setzt die Klasse
   nur an .ob-today, deshalb :has(). Ohne :has() bleibt der Kasten golden –
   Punkt und Text sagen den Zustand trotzdem. */
.ob-info:has(> .ob-today--spaet) { background: rgba(200, 162, 76, 0.11); }
.ob-info:has(> .ob-today--zu)    { border-color: var(--line); background: var(--bg-raise); }

.ob-today {
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.8rem 1rem;
}
.ob-today-dot {
  flex: none; width: 0.66rem; height: 0.66rem; margin-top: 0.34rem;
  border-radius: 50%; background: #6cbf85;
  box-shadow: 0 0 0 3px rgba(108, 191, 133, 0.16);
}
.ob-today-text { min-width: 0; flex: 1 1 16rem; }
.ob-today-main {
  margin: 0; max-width: none;
  font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--ink);
}
.ob-today-main b { color: var(--gold-soft); white-space: nowrap; }
.ob-today-sub {
  margin: 0.2rem 0 0; max-width: none;
  font-size: 0.85rem; line-height: 1.5; color: var(--ink-muted);
}
.ob-today-sub b { color: var(--gold-soft); white-space: nowrap; }
.ob-today-sub a { color: var(--gold-soft); }
.ob-today-left { color: var(--gold-soft); font-weight: 600; }
.ob-today-left[hidden] { display: none; }

/* ---- Angaben: Öffnungszeit, Adresse, Bezahlarten ---- */
.ob-info-facts {
  display: grid; gap: 0.5rem;
  padding: 0.7rem 1rem 0.8rem;
  border-top: 1px solid var(--line);
}
.ob-fact {
  display: grid; grid-template-columns: var(--ob-lbl) minmax(0, 1fr);
  align-items: baseline; gap: 0.1rem 0.7rem;
  margin: 0; max-width: none;
}
.ob-fact-lbl,
.ob-info .ob-pay-lead {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.3;
  text-transform: uppercase; color: var(--ink-muted);
}
.ob-fact-val { font-size: 0.88rem; line-height: 1.4; color: var(--ink); }

/* Die Bezahlzeile kommt aus bestellen_pay_row() und steht noch zweimal
   woanders auf der Seite – deshalb nur hier im Kasten umgestaltet, nicht an
   der Zeile selbst.

   Auf dem Handy steht die Beschriftung über den Knöpfen, erst ab 520 px
   links daneben wie bei „Heute“ und „Abholung“. Gemessen: Links daneben
   blieben auf 390 px nur rund 220 px für die Knöpfe, sie brachen dreimal
   um, und die Zeile wurde höher statt niedriger (92 → 106 px). */
.ob-info .ob-pay-row {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: baseline; gap: 0.3rem 0.7rem;
  margin: 0; padding: 0.1rem 0 0;
  border: 0; border-radius: 0; background: none;
}
@media (min-width: 520px) {
  .ob-info .ob-pay-row { grid-template-columns: var(--ob-lbl) minmax(0, 1fr); padding-top: 0; }
}
.ob-info .ob-pay-list { gap: 0.3rem 0.35rem; }

/* Sicherheitsnetz: Kein Knopf wird breiter als der Kasten. „PayPal aktuell
   nicht verfügbar“ ist der längste und ragte auf 360 px hinaus – der
   Kasten schnitt ihn ab, ohne dass es auffiel. Jetzt darf der Zusatz im
   Knopf umbrechen; der Radius ist so gewählt, dass ein einzeiliger Knopf
   weiter wie eine Pille aussieht und ein zweizeiliger nicht wie ein Ei. */
.ob-info .ob-pay-item {
  max-width: 100%;
  padding: 0.2rem 0.52rem; font-size: 0.83rem; gap: 0.05rem 0.3rem;
  border-radius: 0.85rem;
}
.ob-info .ob-pay-item--off { flex-wrap: wrap; white-space: normal; }
.ob-info .ob-pay-item svg { width: 15px; height: 15px; }
.ob-info .ob-pay-off { font-size: 0.68rem; }

@media (min-width: 900px) {
  .ob-info {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.42fr) minmax(0, 0.58fr);
  }
  /* Die Angaben verteilen sich einzeln auf das Raster. Der Behälter ist
     ein schlichtes div ohne Rolle – display: contents nimmt ihm also nichts,
     was ein Vorleseprogramm bräuchte. */
  .ob-info-facts { display: contents; }

  .ob-today { grid-column: 1; grid-row: 1; padding: 0.85rem 1.1rem; }

  .ob-fact {
    grid-row: 1;
    display: flex; flex-direction: column; justify-content: center; gap: 0.15rem;
    padding: 0.7rem 1.1rem;
    border-left: 1px solid var(--line);
  }
  .ob-fact--hours { grid-column: 2; }
  .ob-fact--where { grid-column: 3; }
  /* Ruhetag: keine Öffnungszeit, dann nimmt die Adresse beide Spalten */
  .ob-fact--where:first-child { grid-column: 2 / 4; }

  /* Breit genug für Beschriftung und Knöpfe in einer Zeile. Passt es
     einmal nicht, rutschen die Knöpfe unter die Beschriftung. */
  .ob-info .ob-pay-row {
    grid-column: 1; grid-row: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem;
    padding: 0.6rem 1.1rem;
    border-top: 1px solid var(--line);
  }
  .ob-promo-top {
    grid-column: 2 / 4; grid-row: 2;
    padding: 0.6rem 1.1rem;
    border-left: 1px solid var(--line);
  }

  .ob-info--ohne-aktion .ob-pay-row,
  .ob-info--aktion-breit .ob-pay-row { grid-column: 1 / -1; }
  .ob-info--aktion-breit .ob-promo-top { grid-column: 1 / -1; grid-row: 3; border-left: 0; }
}

/* Küche läuft noch, das Bestellsystem nimmt für heute aber nichts mehr an */
.ob-today--spaet .ob-today-dot {
  background: var(--gold); box-shadow: 0 0 0 3px rgba(200, 162, 76, 0.18);
}
/* Geschlossen oder pausiert */
.ob-today--zu .ob-today-dot {
  background: #8a7f68; box-shadow: 0 0 0 3px rgba(138, 127, 104, 0.16);
}

@media (prefers-reduced-motion: no-preference) {
  .ob-today--auf .ob-today-dot { animation: ob-puls 2.4s ease-in-out infinite; }
  @keyframes ob-puls {
    0%, 100% { box-shadow: 0 0 0 3px rgba(108, 191, 133, 0.16); }
    50%      { box-shadow: 0 0 0 6px rgba(108, 191, 133, 0.05); }
  }
}

/* nur für Screenreader */
.ob-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Meldungen ---------- */
.ob-msg {
  border-radius: var(--radius-sm); padding: 0.9rem 1.1rem;
  margin: 0 0 1.4rem; font-size: 0.93rem;
}
.ob-msg p { margin: 0 0 0.35rem; max-width: none; }
.ob-msg p:last-child { margin-bottom: 0; }
.ob-msg ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.ob-msg li + li { margin-top: 0.25rem; }
.ob-msg a { color: var(--gold-soft); }
.ob-msg--err { background: rgba(200, 54, 44, 0.13); border: 1px solid rgba(200, 54, 44, 0.42); color: #f0b0a5; }
.ob-msg--warn { background: rgba(200, 162, 76, 0.11); border: 1px solid var(--gold-dim); color: var(--gold-soft); }
.ob-tech { font-size: 0.8rem; color: #6f6553; }
.ob-empty { padding-bottom: var(--space-section); color: var(--ink-muted); }
.ob-empty a { color: var(--gold-soft); }

/* ---------- Spalten: Speisen + Warenkorb ---------- */
.ob-cols {
  display: grid; gap: 2rem;
  /* minmax(0,…) statt 1fr: sonst wächst die Spalte auf die Breite ihres
     breitesten Kindes (Filter-Leiste) und die Seite scrollt seitlich */
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(3rem, 8vw, 5rem);
}
.ob-main, .ob-side, .ob-catnav { min-width: 0; }

/* Das Seitenmenü gibt es nur auf dem Desktop – auf dem Handy übernimmt
   die waagerechte Chip-Leiste. */
.ob-catnav { display: none; }

@media (min-width: 1080px) {
  /* Kein align-items:start! Die Spalten müssen die volle Zeilenhöhe behalten,
     sonst haben die klebenden Elemente darin keinen Spielraum zum Mitlaufen. */
  .ob-cols { grid-template-columns: 12.25rem minmax(0, 1fr) 20.5rem; gap: 1.75rem; }
  .ob-side-inner {
    position: sticky; top: calc(var(--header-h) + 1rem);
    /* Ist das Kassenformular offen, wird die Spalte höher als der Bildschirm –
       dann scrollt sie für sich, statt aus dem Blick zu wandern. */
    max-height: calc(100vh - var(--header-h) - 2rem);
    overflow-y: auto; scrollbar-width: thin;
    padding-right: 0.2rem; margin-right: -0.2rem;
  }

  /* Schmale Laptops: Menü, Speisen und Warenkorb müssen sich 1040 px teilen.
     Damit für zwei Speisenspalten genug übrig bleibt, rückt der Warenkorb
     hier enger zusammen – 292 px reichen für Liste und Formular. */
  @media (max-width: 1199px) {
    .ob-cols { grid-template-columns: 12.25rem minmax(0, 1fr) 18.25rem; gap: 1.4rem; }
  }

  .ob-catnav { display: block; }
  .ob-catnav-inner {
    position: sticky; top: calc(var(--header-h) + 1rem);
    /* 19 Kategorien sind höher als mancher Bildschirm – dann scrollt die
       Spalte für sich, statt aus dem Blick zu wandern. */
    max-height: calc(100vh - var(--header-h) - 2rem);
    overflow-y: auto; scrollbar-width: thin;
  }

}

/* ---------- Seitenmenü Kategorien ---------- */
/* Oberkategorie – bündelt die Einträge darunter (siehe SHOP_CAT_GROUPS) */
.ob-catnav-group {
  margin: 0.9rem 0 0.3rem;
  padding: 0 0.55rem 0.28rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold-soft); opacity: 0.72;
}
/* Die erste Überschrift schließt oben mit der Suchleiste ab. */
.ob-catnav-group:first-child { margin-top: 0; }

.ob-catnav-list { list-style: none; margin: 0; padding: 0; }
.ob-catnav-list a {
  display: flex; align-items: center; gap: 0.4rem;
  /* Eng gesetzt, damit die 19 Kategorien mit den Überschriften zusammen
     auch auf einem 1080p-Bildschirm ohne Scrollen ins Menü passen. */
  padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
  color: var(--ink-muted); text-decoration: none;
  font-size: 0.85rem; line-height: 1.25;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.ob-catnav-list a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.ob-catnav-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ob-catnav-list a.is-here {
  color: var(--gold-soft); font-weight: 600;
  border-left-color: var(--gold); background: rgba(200, 162, 76, 0.1);
}
/* Bei aktiver Suche: Kategorien ohne Treffer treten zurück */
.ob-catnav-list a.is-empty { opacity: 0.32; }
.ob-catnav-n {
  margin-left: auto; font-size: 0.72rem; opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* ---------- Beliebte Gerichte ----------
   Auf dem Handy eine Reihe zum Schieben, ab Tablet ein Raster.
   Bewusst kompakt: Die Reihe ist eine Abkürzung, kein zweites Menü. */
/* Eigener Rahmen, damit die Empfehlungen als Block gelesen werden und
   nicht als erste Kategorie. Bewusst leise: derselbe Radius und dieselbe
   Goldkante wie überall, nur mit einem Hauch Farbe in der oberen Ecke. */
.ob-pop {
  margin: 0 0 1.6rem;
  padding: clamp(0.85rem, 2.4vw, 1.2rem);
  border: 1px solid var(--gold-dim); border-radius: var(--radius);
  background:
    radial-gradient(125% 105% at 0% 0%, rgba(200, 162, 76, 0.13), transparent 62%),
    var(--bg-raise);
}
.ob-pop[hidden] { display: none; }

.ob-pop-head {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 0.1rem 0.55rem; margin-bottom: 0.85rem;
}
.ob-pop-ico { grid-row: span 2; align-self: start; margin-top: 0.15rem; color: var(--gold); }
.ob-pop-title {
  margin: 0; font-size: clamp(1.05rem, 2.6vw, 1.25rem); line-height: 1.2;
  color: var(--ink);
}
.ob-pop-sub {
  margin: 0; max-width: none;
  font-size: 0.8rem; line-height: 1.4; color: var(--ink-muted);
}
.ob-pop-list {
  list-style: none; margin: 0; padding: 0 0 0.3rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 8.5rem;
  gap: 0.6rem;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  margin-inline: -0.2rem; padding-inline: 0.2rem;
}
.ob-pop-list::-webkit-scrollbar { display: none; }
/* Ab hier ein Raster aus zwei Reihen à drei. Sechs nebeneinander wären
   verlockend, aber die mittlere Spalte ist neben Menü und Warenkorb nur
   rund 630 px breit – die Namen würden auf 95 px Kacheln zerbrechen. */
@media (min-width: 560px) {
  .ob-pop-list {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible; margin-inline: 0; padding-inline: 0;
  }
}

/* Dunkler als der Rahmen, sonst verschwinden die Kacheln darin */
.ob-pop-card {
  position: relative; scroll-snap-align: start;
  border: 1px solid rgba(200, 162, 76, 0.18); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.42); overflow: hidden;
  transition: border-color 0.2s;
}
.ob-pop-card:hover { border-color: var(--gold-dim); }

/* Der Knopf ist die ganze Kachel – so ist das Ziel groß genug. */
.ob-pop-open {
  display: grid; width: 100%; gap: 0.1rem;
  padding: 0 0 0.55rem; border: 0; background: none;
  font: inherit; text-align: left; color: inherit; cursor: pointer;
}
.ob-pop-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ob-pop-media {
  display: block; aspect-ratio: 4 / 3; background: #0d0c0a;
  margin-bottom: 0.45rem;
}
/* Breitere Kacheln bekommen ein flacheres Bild. Bei 4:3 wäre die
   Empfehlungsreihe auf dem Tablet allein 700 px hoch, bevor die
   Speisekarte überhaupt anfängt. */
@media (min-width: 560px) { .ob-pop-media { aspect-ratio: 16 / 9; } }
.ob-pop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-pop-media .ob-noimg { color: #4d4638; }
.ob-pop-name {
  padding-inline: 0.55rem;
  font-size: 0.8rem; line-height: 1.25; color: var(--ink);
  /* style.css bricht global auch mitten im Wort um – hier stört das:
     „Hausgema/chte" liest sich wie ein Fehler. */
  overflow-wrap: normal;
  /* Zwei Zeilen reichen; „Ramen Onsen-Ei & Hühnerfleisch" bricht sonst
     die Kachelhöhe auseinander. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Zwei Zeilen Platz auch bei kurzen Namen – sonst steht der Preis in
     jeder Kachel auf einer anderen Höhe. */
  min-height: 2.5em;
}
.ob-pop-open .ob-pop-price {
  padding-inline: 0.55rem;
  font-size: 0.86rem; font-weight: 700; color: var(--gold-soft);
}

/* Plus-Knopf in der Ecke des Bildes */
.ob-pop-add {
  position: absolute; right: 0.35rem; top: 0.35rem;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--gold-dim); border-radius: 999px;
  background: rgba(10, 9, 7, 0.82); color: var(--gold-soft);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.ob-pop-add:hover { background: var(--gold); border-color: var(--gold); color: #1a1409; }
.ob-pop-add[hidden] { display: none; }
.ob-step--pop {
  position: absolute; right: 0.35rem; top: 0.35rem;
  background: rgba(10, 9, 7, 0.92); transform: scale(0.82);
  transform-origin: right top;
}

/* ---------- Suche + Kategorie-Filter ---------- */
.ob-filter {
  position: sticky; top: var(--header-h); z-index: 30;
  margin-bottom: 1.4rem; padding-block: 0.6rem;
  background: linear-gradient(180deg, #000 72%, transparent);
}

.ob-search {
  position: relative;
  display: flex; align-items: center;
  margin-bottom: 0.55rem;
}
/* Suche und – auf dem Desktop – der Knopf „Vegetarisch" nebeneinander */
.ob-suchzeile { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
.ob-suchzeile > .ob-search { flex: 1; min-width: 0; margin-bottom: 0; }
.ob-search-ico {
  position: absolute; left: 0.85rem;
  color: var(--ink-muted); pointer-events: none;
}
.ob-search-input {
  width: 100%; min-height: 46px;
  padding: 0.6rem 2.6rem 0.6rem 2.5rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raise); color: var(--ink);
  font: inherit; font-size: 0.95rem;
  -webkit-appearance: none; appearance: none;
}
.ob-search-input::placeholder { color: var(--ink-muted); }
.ob-search-input:focus-visible {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200, 162, 76, 0.28);
}
/* Das native X von Safari/Chrome stört neben unserem eigenen Knopf */
.ob-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ob-search-clear {
  position: absolute; right: 0.45rem;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-muted);
  cursor: pointer;
}
.ob-search-clear:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
/* display:grid würde hidden sonst überstimmen */
.ob-search-clear[hidden] { display: none; }

.ob-hits {
  margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--ink-muted);
}
/* Leiste + Aufklapp-Knopf nebeneinander */
.ob-filter-row { position: relative; display: flex; align-items: center; gap: 0.4rem; }

.ob-filter-scroll {
  display: flex; gap: 0.45rem;
  min-width: 0; flex: 1;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.2rem;
  /* Der aktive Chip wird beim Rollen mittig gefahren; ohne scroll-padding
     klebte er sonst am Rand. */
  scroll-padding-inline: 25%;
  /* Chips dürfen am Rand nicht abgeschnitten wirken */
  margin-inline: -0.2rem; padding-inline: 0.2rem;
  /* Weicher Ausblender links und rechts: Angeschnittene Chips sehen damit
     nicht abgeschnitten aus, sondern nach „hier geht es weiter". */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 0.9rem,
                                       #000 calc(100% - 0.9rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 0.9rem,
                                       #000 calc(100% - 0.9rem), transparent 100%);
}
.ob-filter-scroll::-webkit-scrollbar { display: none; }

/* Knopf: klappt alle Kategorien auf einmal auf. 44 px im Quadrat und fest
   am rechten Rand – er rollt nicht mit weg, sonst müsste man ihn suchen. */
.ob-cats-more {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raise); color: var(--gold-soft);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.ob-cats-more[hidden] { display: none; }
.ob-cats-more:hover { border-color: var(--gold-dim); color: var(--ink); }
.ob-cats-more[aria-expanded="true"] {
  border-color: var(--gold); color: var(--gold-soft);
  background: rgba(200, 162, 76, 0.16);
}

/* Auf dem Desktop übernimmt das Seitenmenü – die Chip-Leiste wäre doppelt
   gemoppelt. Muss nach den Regeln oben stehen, sonst gewinnt display:flex. */
@media (min-width: 1080px) {
  .ob-filter-row { display: none; }
}

/* Die Chips sind <a href="#cat-…">, keine Knöpfe mehr: Sie springen zur
   Kategorie, statt die Karte auf eine zu verkürzen. Ohne JavaScript
   springt der Browser von selbst – ein Filter konnte das nie. */
.ob-chip {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center;
  /* 44 px ist Daumenmaß – hier wird oft und im Gehen getippt. */
  min-height: 44px; padding: 0.55rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raise); color: var(--ink-muted);
  font: inherit; font-size: 0.84rem; font-weight: 600;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.ob-chip:hover { color: var(--ink); border-color: var(--gold-dim); }
/* Der Ring nach innen: Die Leiste ist ein Rollbereich mit Ausblender an den
   Rändern – ein Ring außerhalb des Chips würde dort abgeschnitten. */
.ob-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* „Sie sind hier" – gesetzt beim Scrollen, nicht beim Tippen. Deshalb
   heißt die Klasse is-here und nicht is-active. */
.ob-chip.is-here {
  border-color: var(--gold); color: var(--gold-soft);
  background: rgba(200, 162, 76, 0.14);
}
/* Beim Suchen treten Kategorien ohne Treffer zurück, statt zu verschwinden.
   Verschwänden sie, änderte die Leiste bei jedem Buchstaben ihre Breite –
   und man verlöre die Orientierung. */
.ob-chip.is-empty { opacity: 0.32; }

/* ---------- Vegetarisch ----------
   Grün statt Gold: Es ist eine Eigenschaft des Gerichts und kein Weg durch
   die Karte. Dieselbe Farbe hat das Blatt am Namen – so gehören Schalter
   und Zeichen sichtbar zusammen. */
.ob-veg-ico { width: 1em; height: 1em; flex: none; color: #8fc98f; }

/* Erster Chip der Leiste, mit einem Strich abgesetzt: Er filtert, die
   Kategorien danach springen. */
.ob-chip--veg { position: relative; gap: 0.45rem; margin-right: 0.45rem; }
.ob-chip--veg::after {
  content: ""; position: absolute; top: 28%; bottom: 28%; right: calc(-0.45rem - 1px);
  width: 1px; background: var(--line);
}
/* Knopf neben der Suche – nur auf dem Desktop, dort fehlt die Leiste. */
.ob-vegknopf {
  flex: none; display: none; align-items: center; gap: 0.45rem;
  min-height: 46px; padding: 0.55rem 1.1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raise); color: var(--ink-muted);
  font: inherit; font-size: 0.9rem; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
@media (min-width: 1080px) { .ob-vegknopf { display: inline-flex; } }
.ob-vegknopf:hover { color: var(--ink); border-color: var(--gold-dim); }
.ob-vegknopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* An: nicht nur grüner, auch heller und gefüllt – wer Grün nicht
   unterscheidet, sieht den Unterschied trotzdem. */
.ob-chip--veg.is-on,
.ob-vegknopf.is-on {
  border-color: #6f9f6f; color: #d6f0d6;
  background: rgba(95, 143, 95, 0.22);
}
.ob-chip--veg.is-on .ob-veg-ico,
.ob-vegknopf.is-on .ob-veg-ico { color: #b6e3b6; }

/* Trefferzeile und „Alle Gerichte zeigen" nebeneinander */
.ob-hits-zeile { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.9rem; }
.ob-veg-aus {
  margin: 0.3rem 0 0; padding: 0.4rem 0; min-height: 36px;
  border: 0; background: none; color: var(--gold-soft);
  font: inherit; font-size: 0.82rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ob-veg-aus:hover { color: var(--ink); }
.ob-veg-aus:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Was „vegetarisch" heißt – über der Karte, solange der Filter läuft. */
.ob-veg-hinweis {
  display: flex; align-items: flex-start; gap: 0.6rem;
  max-width: none; margin: -0.4rem 0 1.4rem; padding: 0.75rem 0.95rem;
  border: 1px solid rgba(95, 143, 95, 0.45); border-radius: var(--radius);
  background: rgba(95, 143, 95, 0.08);
  font-size: 0.86rem; line-height: 1.5; color: var(--ink-muted);
}
.ob-veg-hinweis .ob-veg-ico { width: 1.05rem; height: 1.05rem; margin-top: 0.15em; }

/* Das Blatt hinter dem Preis – in der Karte ein Glied der Preiszeile
   (Abstand über deren gap), in der großen Ansicht Text im Preisabsatz. */
.ob-veg { display: inline-flex; align-self: center; vertical-align: -0.12em; }
.ob-veg .ob-veg-ico { width: 1.05em; height: 1.05em; }

/* [hidden] verliert gegen jede Klassenregel mit display */
.ob-chip--veg[hidden],
.ob-vegknopf[hidden],
.ob-veg-aus[hidden],
.ob-veg-hinweis[hidden] { display: none; }

/* ---------- Alle Kategorien auf einmal ----------
   Fällt unter der Leiste heraus. Absolut statt fest positioniert: So hängt
   die Liste an der Leiste und wandert beim Rollen nicht davon. */
.ob-catlist {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
  display: flex; flex-direction: column;
  /* Großzügig: Alle Oberkategorien sollen ohne Rollen hineinpassen – genau
     das ist der Sinn der Liste. Den wirklichen Deckel setzt
     js/bestellen.js aus dem Platz, der unter der Leiste frei ist. */
  max-height: min(70vh, 34rem);
  max-height: min(70dvh, 34rem);
  padding: 0.5rem 0.9rem 0.9rem;
  border: 1px solid var(--line); border-top: 0;
  border-bottom-color: var(--gold-dim);
  border-radius: 0 0 var(--radius) var(--radius);
  background: #14110b;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
/* display:flex würde hidden sonst überstimmen */
.ob-catlist[hidden] { display: none; }

.ob-catlist-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}

.ob-catlist-h {
  margin: 0.8rem 0 0.35rem;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold-soft); opacity: 0.8;
}
.ob-catlist-h:first-child { margin-top: 0.2rem; }

.ob-catlist-ul {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem;
  margin: 0; padding: 0; list-style: none;
}
/* Eine Spalte, sobald es eng wird: Zwei Spalten mit „Alkoholfreie Getränke"
   darin ergeben zwei Zeilen Text je Kachel und ein unruhiges Raster. */
@media (max-width: 359px) { .ob-catlist-ul { grid-template-columns: 1fr; } }

.ob-catlist-ul a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  min-height: 46px;                    /* Daumenmaß, hier großzügiger */
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-raise); color: var(--ink);
  font-size: 0.86rem; font-weight: 600; line-height: 1.25;
  text-decoration: none;
}
.ob-catlist-ul a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ob-catlist-ul a b {
  flex: none; color: var(--ink-muted);
  font-size: 0.76rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ob-catlist-ul a.is-here {
  border-color: var(--gold); background: rgba(200, 162, 76, 0.14);
  color: var(--gold-soft);
}
.ob-catlist-ul a.is-here b { color: var(--gold); }

/* Der zweite Weg hinaus. Der erste ist ein Tipp auf eine Kategorie, der
   dritte ein Tipp daneben, der vierte Escape – bei einer Fläche, die den
   halben Bildschirm einnimmt, ist ein sichtbarer Knopf trotzdem Pflicht. */
.ob-catlist-close {
  flex: none; margin-top: 0.6rem; min-height: 44px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-muted);
  font: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer;
}
.ob-catlist-close:hover { color: var(--ink); border-color: var(--gold-dim); }
.ob-catlist-close:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.ob-catschirm {
  position: fixed; inset: 0; z-index: 29;   /* unter der Leiste (30) */
  background: rgba(8, 7, 4, 0.55);
}
.ob-catschirm[hidden] { display: none; }

/* Ab 1080 px führt das Seitenmenü; Leiste, Liste und Schirm gehören dort nicht
   auf den Schirm. Der Knopf ist dann ohnehin verborgen – diese Regel ist der
   Gürtel zum Hosenträger, falls das Fenster mit offener Liste breiter wird. */
@media (min-width: 1080px) {
  .ob-catlist, .ob-catschirm { display: none; }
}

/* ---------- Speisen ---------- */
.ob-group + .ob-group { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.ob-group[hidden] { display: none; }
/* .ob-dish ist ein Grid – hidden allein würde nicht greifen. */
.ob-dish[hidden] { display: none; }
.ob-group-title {
  font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 0 0 0.9rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid rgba(200, 162, 76, 0.22);
  /* Sprungziel der Kategorie-Links: Abstand, damit die klebende
     Suchleiste die Überschrift nicht verdeckt. Den genauen Wert misst
     js/bestellen.js an der Leiste selbst und legt ihn als --ob-jump ab –
     dieselbe Linie entscheidet dort, welcher Eintrag im Menü leuchtet.
     Der Wert hier greift, solange kein JavaScript läuft. */
  scroll-margin-top: var(--ob-jump, calc(var(--header-h) + 5.5rem));
}

/* Mehrere Karten nebeneinander – das kürzt die Scrollstrecke deutlich.
   Wie viele passen, hängt daran, wie breit der Speisenbereich gerade ist:
     bis  599 px  eine   (Handy)
     ab   600 px  zwei
     ab   900 px  drei   – solange die ganze Breite den Speisen gehört
     ab  1080 px  eine   – jetzt stehen links das Kategoriemenü und rechts
                           der Warenkorb, es bleiben nur ~460 px
     ab  1200 px  zwei   – ab hier sind die Karten wieder ~290 px breit.
   Gemessen: zwei zu schmale Spalten bringen nichts, weil die Karten dann
   höher werden – bei 1080 px wäre die Seite mit zwei Spalten sogar länger
   als mit einer. */
.ob-dishes { display: grid; gap: 0.7rem; }
@media (min-width: 600px) { .ob-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ob-dishes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ob-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ob-dish {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  grid-template-areas: "media body" "media act";
  gap: 0.15rem 0.85rem;
  align-content: start;
  padding: 0.7rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s;
}
.ob-dish:hover { border-color: var(--gold-dim); }
.ob-dish[hidden] { display: none; }
.ob-dish.is-out { opacity: 0.62; }

/* Getränke: kein Bildplatz, also auch keine Spalte dafür. */
.ob-dish--nomedia {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "body" "act";
}
/* „Angebot" / „Ausverkauft" sitzen sonst im Bild – ohne Bild stehen sie
   als normale Zeile unter dem Namen. */
.ob-dish-tags {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin: 0.25rem 0 0.35rem;
}
.ob-dish--nomedia .ob-tag { position: static; }

.ob-dish-media {
  grid-area: media; align-self: start; position: relative;
  width: 5.25rem; aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm); overflow: hidden; background: #0d0c0a;
}
.ob-dish-media img { width: 100%; height: 100%; object-fit: cover; }

/* Schmale Karten: Sobald mehrere nebeneinander stehen, bleibt für den Text
   wenig übrig. Das Bild schrumpft dann mit, und der Knopf bekommt eine
   eigene Zeile über die volle Kartenbreite – sonst quetscht sich
   „In den Warenkorb" in 100 px. Getränke haben ohnehin kein Bild. */
@media (min-width: 600px) {
  .ob-dish:not(.ob-dish--nomedia) {
    grid-template-columns: clamp(3.5rem, 24%, 5.25rem) minmax(0, 1fr);
    grid-template-areas: "media body" "act act";
  }
  .ob-dish-media { width: 100%; }
  .ob-dish-act { margin-top: 0.6rem; }
  /* Nebeneinander sind die Karten gleich hoch. Ohne das hier stünde der
     Knopf bei jeder Karte auf einer anderen Höhe – je nachdem, wie lang
     die Beschreibung ist. */
  .ob-dish { align-content: space-between; }
  /* „In den Warenkorb" braucht rund 165 px. In der schmalsten Karte
     (~197 px) bliebe es zwei Zeilen hoch – enger gesetzt passt es. */
  .ob-dish-act .ob-add { width: 100%; justify-content: center; padding-inline: 0.6rem; }
}
.ob-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: #4d4638; }
.ob-noimg svg { width: 40%; height: 40%; }

.ob-tag {
  position: absolute; left: 0.25rem; top: 0.25rem;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.18rem 0.4rem; border-radius: 999px;
}
.ob-tag--sale { background: var(--gold); color: #1a1409; }
.ob-tag--out { background: rgba(10, 9, 7, 0.88); color: var(--gold-soft); border: 1px solid var(--gold-dim); }

.ob-dish-body { grid-area: body; min-width: 0; }
.ob-dish-name { font-size: 1rem; line-height: 1.25; margin: 0 0 0.15rem; color: var(--ink); }

/* Der Name ist zugleich der Knopf für die große Ansicht. Ohne JavaScript
   sieht und verhält er sich wie normaler Text – deshalb hängt der
   Hinweis (Zeiger, Hover) an der Klasse, die das Skript setzt. */
.ob-dish-open {
  display: inline; margin: 0; padding: 0;
  border: 0; background: none; font: inherit; color: inherit;
  text-align: left; cursor: text;
}
.ob-dish-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.has-dishmodal .ob-dish { cursor: pointer; }
.has-dishmodal .ob-dish-open { cursor: pointer; }
.has-dishmodal .ob-dish:hover .ob-dish-open { color: var(--gold-soft); }
.ob-dish-desc {
  margin: 0 0 0.3rem; max-width: none;
  font-size: 0.82rem; line-height: 1.45; color: var(--ink-muted);
}
.ob-dish-price { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.ob-price-now { font-weight: 700; color: var(--gold-soft); font-size: 0.98rem; }
.ob-price-old { color: #7d735f; font-size: 0.82rem; }

.ob-dish-act { grid-area: act; margin-top: 0.5rem; }
.ob-out-txt {
  margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-soft);
}

/* Hinzufügen-Button + Mengensteuerung */
.ob-add {
  display: inline-flex; align-items: center; gap: 0.45rem;
  /* Waagerecht knapp gehalten: „In den Warenkorb" braucht sonst auf einem
     360-px-Handy zwei Zeilen. */
  min-height: 44px; padding: 0.5rem 0.7rem;
  border: 1px solid var(--gold-dim); border-radius: var(--radius-sm);
  background: rgba(200, 162, 76, 0.08); color: var(--gold-soft);
  font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.ob-add:hover { background: var(--gold); border-color: var(--gold); color: #1a1409; }
.ob-add-plus { font-size: 1.1rem; line-height: 1; }

.ob-step {
  display: inline-flex; align-items: center; gap: 0.2rem;
  border: 1px solid var(--gold-dim); border-radius: var(--radius-sm);
  background: rgba(200, 162, 76, 0.08); overflow: hidden;
}
.ob-step[hidden] { display: none; }
.ob-step-btn {
  min-width: 44px; min-height: 44px;
  border: 0; background: transparent; color: var(--gold-soft);
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.ob-step-btn:hover { background: rgba(200, 162, 76, 0.18); color: var(--ink); }
.ob-step-qty {
  min-width: 2ch; text-align: center;
  font-weight: 700; font-size: 0.98rem; color: var(--ink);
}

/* ---------- Allergene ---------- */
.ob-legend {
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raise);
}
.ob-legend > summary {
  min-height: 48px; padding: 0.85rem 1.1rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
  cursor: pointer; list-style: none;
}
.ob-legend > summary::-webkit-details-marker { display: none; }
.ob-legend > summary::after {
  content: ""; margin-left: auto;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--gold-soft); border-bottom: 2px solid var(--gold-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}
.ob-legend[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ob-legend-intro,
.ob-legend-note { margin: 0 1.1rem 0.8rem; font-size: 0.85rem; color: var(--ink-muted); }
.ob-legend-veg {
  display: flex; align-items: flex-start; gap: 0.5rem;
  max-width: none; margin: 0 1.1rem 0.8rem; font-size: 0.85rem; color: var(--ink-muted);
}
.ob-legend-veg .ob-veg-ico { margin-top: 0.2em; }
.ob-legend-list {
  display: grid; gap: 0.25rem 1.4rem;
  margin: 0 1.1rem 1rem; padding: 0; list-style: none;
  font-size: 0.84rem; color: var(--ink-muted);
}
@media (min-width: 620px) { .ob-legend-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob-legend-list b { color: var(--gold-soft); margin-right: 0.35rem; }

/* ---------- Warenkorb ---------- */
.ob-side-title {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 1.15rem; margin: 0;
}
.ob-side-title svg { flex: none; color: var(--gold); }

.ob-cart, .ob-checkout {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ob-checkout { margin-top: 1rem; padding: 1.1rem; }
.ob-checkout[hidden] { display: none; }

/* Kopfzeile = Schalter zum Auf- und Zuklappen.
   Bewusst ruhig gehalten: die laute Farbe gehört dem CTA „Zur Kasse". */
.ob-cart-bar {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; min-height: 56px; padding: 0.75rem 1.1rem;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.ob-cart-bar:hover { background: rgba(200, 162, 76, 0.06); }
.ob-cart-ico { position: relative; display: grid; place-items: center; flex: none; color: var(--gold); }
.ob-cart-count {
  position: absolute; top: -0.45rem; right: -0.55rem;
  display: grid; place-items: center;
  min-width: 1.15rem; height: 1.15rem; padding-inline: 0.28rem;
  border-radius: 999px; background: var(--gold); color: #1a1409;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
}
.ob-cart-count[hidden] { display: none; }
.ob-cart-label { flex: 1; font-weight: 600; font-size: 0.95rem; }
.ob-cart-total { font-size: 1.05rem; color: var(--gold-soft); white-space: nowrap; }
.ob-cart-chev { display: grid; place-items: center; flex: none; color: var(--ink-muted); transition: transform 0.22s; }
.ob-cart[data-open="false"] .ob-cart-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ob-cart-chev { transition: none; } }

.ob-cart-body { padding: 0 1.1rem 1.1rem; }
.ob-cart-body[hidden] { display: none; }

.ob-cart-empty { margin: 0; font-size: 0.88rem; color: var(--ink-muted); }
.ob-cart-empty strong { color: var(--gold-soft); }

.ob-cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ob-cart-list:empty { display: none; }

.ob-to-checkout { width: 100%; margin-top: 0.9rem; }
.ob-to-checkout[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.ob-incl-note { margin: 0.55rem 0 0; font-size: 0.74rem; color: #8a7f68; text-align: center; max-width: none; }

.ob-checkout-head {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.9rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(200, 162, 76, 0.22);
}
.ob-checkout-back {
  padding: 0.3rem 0; min-height: 44px;
  background: none; border: 0; color: var(--ink-muted);
  font: inherit; font-size: 0.8rem; text-decoration: underline; cursor: pointer;
}
.ob-checkout-back:hover { color: var(--gold-soft); }
.ob-cart-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.6rem; align-items: center;
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--line);
}
.ob-cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ob-cart-name { font-size: 0.88rem; color: var(--ink); overflow-wrap: anywhere; }
.ob-cart-line { font-size: 0.88rem; font-weight: 700; color: var(--gold-soft); white-space: nowrap; }
.ob-cart-note {
  grid-column: 1 / -1;
  font-size: 0.78rem; line-height: 1.35; color: var(--gold-soft);
  overflow-wrap: anywhere;
}

/* ---------- Sonderwunsch je Position ----------
   Das Feld steht offen, damit man es überhaupt bemerkt. Es soll aber
   nicht mit Preis und Mengenwahl konkurrieren: gestrichelter Rand,
   kleine Schrift. Sobald etwas drinsteht, wird es golden – dann ist es
   eine Angabe und keine Einladung mehr. */
.ob-cart-wish { grid-column: 1 / -1; margin-top: 0.15rem; }
.ob-wish-input {
  width: 100%; min-height: 36px; padding: 0.3rem 0.55rem;
  border: 1px dashed rgba(200, 162, 76, 0.34); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.28); color: var(--ink);
  font: inherit; font-size: 0.78rem; line-height: 1.35;
}
.ob-wish-input::placeholder { color: #7d7360; }
.ob-wish-input:hover { border-color: rgba(200, 162, 76, 0.5); }
.ob-wish-input:focus-visible {
  outline: none;
  border-style: solid; border-color: var(--gold);
  background: #0b0906;
}
.ob-cart-wish.has-note .ob-wish-input {
  border-style: solid; border-color: var(--gold-dim);
  background: rgba(200, 162, 76, 0.09); color: var(--gold-soft);
}
.ob-cart-ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; }
.ob-cart-ctrl .ob-step { transform: scale(0.86); transform-origin: left center; }
.ob-cart-unit { font-size: 0.76rem; color: #8a7f68; }
.ob-cart-del {
  margin-left: auto; min-height: 36px; padding: 0.3rem 0.5rem;
  border: 0; background: none; color: #8a7f68;
  font: inherit; font-size: 0.76rem; text-decoration: underline; cursor: pointer;
}
.ob-cart-del:hover { color: #e08a7d; }

.ob-hint { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--ink-muted); }
.ob-hint.is-short { color: #e08a7d; }

/* ---------- Nachfrage im Warenkorb (Extra-Sojasoße) ----------
   Dieselbe Formensprache wie die Gratisspeise: Gestrichelt ist ein Angebot,
   keine Pflicht und kein Fehler. Text links, Knöpfe rechts; wird es eng,
   rutschen die Knöpfe unter den Text statt den Namen zu zerquetschen. Beide
   Knöpfe sind volle 44 px hoch – „Nein, danke" ist ebenso ernst gemeint. */
.ob-extra {
  margin: 0.7rem 0 0; padding: 0.55rem 0.7rem;
  border: 1px dashed var(--gold-dim); border-radius: var(--radius-sm);
  background: rgba(200, 162, 76, 0.05);
}
.ob-extra[hidden], .ob-extra-frage[hidden], .ob-extra-drin[hidden] { display: none; }
.ob-extra.is-drin { border-style: solid; }
.ob-extra--abschluss { margin: 0.1rem 0 0.9rem; }

.ob-extra-frage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; }
.ob-extra-text {
  flex: 1 1 10rem; margin: 0; max-width: none;
  font-size: 0.8rem; line-height: 1.4; color: var(--ink-muted);
}
.ob-extra-text strong { display: block; font-size: 0.88rem; color: var(--ink); font-weight: 700; }
.ob-extra-info { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.ob-extra-knoepfe { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ob-extra-ja, .ob-extra-nein {
  min-height: 44px; padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.ob-extra-ja {
  border: 1px solid var(--gold); background: var(--gold); color: #1a1409;
}
.ob-extra-ja:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.ob-extra-nein {
  border: 1px solid var(--line); background: transparent; color: var(--ink-muted);
}
.ob-extra-nein:hover { border-color: var(--gold-dim); color: var(--ink); }
.ob-extra-ja:focus-visible, .ob-extra-nein:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Nach dem Ja (nur im Abschluss): Haken, Name, Menge */
.ob-extra-drin { display: flex; align-items: center; gap: 0.7rem; }
.ob-extra-drin .ob-extra-text { display: flex; align-items: flex-start; gap: 0.45rem; }
.ob-extra-drin .ob-extra-text strong { display: inline; }
/* „je 1,00 €" als eigene Zeile unter dem Namen – im Fluss brach es auf
   390 px zwischen „je" und dem Betrag um. */
.ob-extra-drin .ob-extra-info { display: block; white-space: nowrap; }
.ob-extra-haken { flex: none; margin-top: 0.15rem; color: var(--gold); }
.ob-extra-drin .ob-step { flex: none; }

/* Die Zeile, die „Hinzufügen" eben angelegt hat, leuchtet kurz auf –
   der Kasten darunter ist im selben Moment verschwunden. */
@media (prefers-reduced-motion: no-preference) {
  .ob-cart-item.is-neu { animation: ob-neu 1.6s ease-out; }
  @keyframes ob-neu {
    0%, 30% { background: rgba(200, 162, 76, 0.16); }
    100%    { background: transparent; }
  }
}
.ob-cart-item.is-neu { border-radius: var(--radius-sm); }

/* Große Ansicht: „Extra Sojasoße dazu +1,00 €" */
.ob-modal-extra {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 44px; margin: 0.7rem 0 0; padding: 0.35rem 0.7rem;
  border: 1px dashed var(--gold-dim); border-radius: var(--radius-sm);
  background: rgba(200, 162, 76, 0.05);
  font-size: 0.86rem; color: var(--ink-muted); cursor: pointer;
}
.ob-modal-extra[hidden] { display: none; }
.ob-modal-extra b { color: var(--ink); }
.ob-modal-extra input {
  flex: none; width: 20px; height: 20px;
  accent-color: var(--gold); cursor: pointer;
}
.ob-modal-extra input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ob-modal-extra:has(input:checked) { border-style: solid; border-color: var(--gold); }
.ob-modal-extra-preis { white-space: nowrap; color: var(--gold-soft); font-weight: 600; }

/* ---------- Gratisspeise im Warenkorb ----------
   Zwei Zustände im selben Kasten: Unterhalb der Schwelle steht, wie viel
   noch fehlt – darüber die Frage mit Ankreuzfeld. Gestrichelt, solange es
   eine Aussicht ist; durchgezogen, sobald sie angenommen wurde. So ist der
   Unterschied auch ohne Farbe zu sehen. */
.ob-gift {
  margin: 0.7rem 0 0; padding: 0.55rem 0.7rem;
  border: 1px dashed var(--gold-dim); border-radius: var(--radius-sm);
  background: rgba(200, 162, 76, 0.05);
}
.ob-gift[hidden], .ob-gift-progress[hidden], .ob-gift-offer[hidden] { display: none; }
.ob-gift.is-taken {
  border-style: solid; border-color: var(--gold);
  background: rgba(200, 162, 76, 0.12);
}

.ob-gift-progress { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--gold-soft); }

.ob-gift-label {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 44px;                  /* volle Tippfläche, auch am Handy */
  cursor: pointer;
}
.ob-gift-label input {
  flex: none; width: 20px; height: 20px;
  accent-color: var(--gold); cursor: pointer;
}
.ob-gift-label input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ob-gift-text { font-size: 0.82rem; line-height: 1.4; color: var(--ink-muted); }
.ob-gift-text strong { color: var(--gold-soft); }
.ob-gift-text b { color: var(--ink); font-weight: 700; }

/* ---------- Summen mit Rabatt ----------
   Erscheint nur, wenn es etwas abzuziehen gibt: Sonst stünde hier eine
   einzelne Zeile „Summe", die schon oben in der Leiste steht. */
.ob-sums { margin: 0.7rem 0 0; display: grid; gap: 0.25rem; font-size: 0.84rem; }
.ob-sums[hidden] { display: none; }
.ob-sums > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; }
.ob-sums dt { color: var(--ink-muted); }
.ob-sums dd { margin: 0; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ob-sums-discount dt, .ob-sums-discount dd { color: var(--gold-soft); font-weight: 600; }
.ob-sums-total {
  margin-top: 0.2rem; padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}
.ob-sums-total dt { color: var(--ink); font-weight: 700; }
.ob-sums-total dd { color: var(--gold-soft); font-weight: 700; font-size: 1rem; }

/* ---------- Warenkorb auf dem Handy: läuft unten mit ---------- */
@media (max-width: 1079px) {
  .ob-cart {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 0;
    background: rgba(16, 14, 10, 0.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top-color: var(--gold-dim);
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.55);
  }
  /* Leerer Warenkorb verdeckt nichts */
  .ob-cart.is-empty { display: none; }

  /* Andocken, auch wenn der Browser unten Seite zeigt.

     Auf dem iPhone fährt beim Scrollen die Werkzeugleiste des Browsers weg.
     Die Seite läuft dann bis an den Bildschirmrand, `bottom: 0` endet aber
     über dem Streifen des Home-Balkens – die Leiste schwebte, und darunter
     scrollten die Gerichte durch (gemeldet am 13.09.2026 aus Chrome auf iOS).

     Deshalb läuft der Hintergrund der Leiste nach unten über ihren Rand
     hinaus. Wo nichts ist – Android, Desktop, eingeblendete Werkzeugleiste –,
     liegt die Verlängerung außerhalb des Bildschirms und stört nicht. Die
     Schrift bleibt über dem Home-Balken, wo sie hingehört.

     Bewusst NICHT über viewport-fit=cover wie auf der Tischseite: Das gilt
     für die ganze Seite und schiebt im Querformat Kopfzeile und Inhalte
     unter die Kamera-Aussparung. Die Verlängerung ist auf diese eine Leiste
     beschränkt.

     Tippt jemand in den Streifen, trifft er die Leiste und nicht das Gericht,
     das man darunter nicht mehr sieht. */
  .ob-cart::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%;
    height: 30vh; background: #100e0a;
  }

  .ob-cart-bar { border-radius: var(--radius) var(--radius) 0 0; }
  .ob-cart-body {
    max-height: min(56vh, 26rem); overflow-y: auto;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    padding-top: 0.9rem;
  }
  /* Platz, damit die Leiste keine Inhalte verdeckt */
  body.has-cart { padding-bottom: 5rem; }
  /* … auch nicht den Absenden-Button am Ende des Formulars */
  body.has-cart .ob-checkout { padding-bottom: 4.5rem; }

  /* Beim Tippen im Formular weicht die Leiste, damit sie mit der
     Bildschirmtastatur nicht das aktive Feld verdeckt. */
  body.is-typing .ob-cart { transform: translateY(110%); }
  .ob-cart { transition: transform 0.2s ease; }
  @media (prefers-reduced-motion: reduce) { .ob-cart { transition: none; } }
}

@media (min-width: 1080px) {
  .ob-cart-body { border-top: 1px solid rgba(200, 162, 76, 0.18); padding-top: 0.9rem; }
}

/* ---------- Kasse ---------- */
/* minmax(0,1fr) statt der Vorgabe auto: Sonst nimmt sich die Zeile die
   Mindestbreite ihres breitesten Kindes – und das ist die Abholzeit-Auswahl
   mit Einträgen wie „Donnerstag, 6. August – 14:30". Die Felder ragten
   dadurch in der Warenkorbspalte über den Rand hinaus. */
.ob-form { display: grid; gap: 0.85rem; grid-template-columns: minmax(0, 1fr); }
.ob-field { margin: 0; max-width: none; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ob-field label {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ob-req { color: var(--gold); }
.ob-opt { text-transform: none; letter-spacing: 0; color: #7d735f; font-weight: 400; }
.ob-field input, .ob-field select, .ob-field textarea {
  width: 100%; padding: 0.7rem 0.8rem; min-height: 48px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #0d0c0a; color: var(--ink);
  font: inherit; font-size: 0.95rem;
}
.ob-field textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.ob-field input::placeholder, .ob-field textarea::placeholder { color: #7d735f; }
.ob-field input:focus-visible, .ob-field select:focus-visible, .ob-field textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
.ob-field input:user-invalid, .ob-field select:user-invalid { border-color: rgba(224, 138, 125, 0.7); }

/* Die Abholzeit ist ein Wunsch, keine Zusage. Der Hinweis steht direkt unter
   dem Feld und deutlicher als ein graues Kleingedrucktes – wer das erst an
   der Theke erfährt, ist zu Recht verärgert. Das negative margin-top hebt
   den Rasterabstand halb auf, damit der Kasten zum Feld darüber gehört. */
.ob-pickup-note {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: -0.45rem 0 0; padding: 0.5rem 0.65rem;
  border: 1px solid var(--gold-dim); border-radius: var(--radius-sm);
  background: rgba(200, 162, 76, 0.07);
  font-size: 0.78rem; line-height: 1.45; color: var(--ink-muted);
}
.ob-pickup-note svg { flex: none; margin-top: 0.1rem; color: var(--gold); }
.ob-pickup-note strong { color: var(--gold-soft); }

.ob-check { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.2rem 0 0; max-width: none; }
.ob-check input {
  flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.15rem;
  accent-color: var(--gold);
}
.ob-check label { font-size: 0.79rem; line-height: 1.5; color: var(--ink-muted); }
.ob-check a { color: var(--gold-soft); }

/* Abhol-Erinnerung direkt über dem Absenden-Knopf */
.ob-pickup {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin-top: 0.4rem; padding: 0.85rem 0.95rem;
  background: rgba(200, 162, 76, 0.08);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm);
}
.ob-pickup-ico { flex: none; color: var(--gold); margin-top: 0.1rem; }
.ob-pickup-txt { min-width: 0; }
.ob-pickup-txt strong {
  display: block; font-size: 0.88rem; color: var(--ink); margin-bottom: 0.25rem;
}
.ob-pickup-when {
  margin: 0 0 0.3rem; max-width: none;
  font-size: 0.95rem; font-weight: 700; color: var(--gold-soft);
}
.ob-pickup-when:not(.is-set) { font-weight: 400; font-size: 0.82rem; color: var(--ink-muted); }
.ob-pickup-where {
  margin: 0; max-width: none;
  font-size: 0.78rem; line-height: 1.5; color: var(--ink-muted);
}

.ob-submit { width: 100%; margin-top: 0.3rem; }
.ob-submit[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ob-note { margin: 0; font-size: 0.76rem; line-height: 1.5; color: #8a7f68; max-width: none; }

/* ---------- Bestätigung ---------- */
.ob-confirm-wrap { display: grid; justify-items: center; }
.ob-confirm {
  width: min(100%, 34rem); text-align: center;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius); padding: clamp(1.4rem, 5vw, 2.4rem);
}
.ob-confirm h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.ob-confirm .kicker { justify-content: center; }
.ob-confirm .kicker::after { content: ""; width: 2rem; height: 1px; background: var(--gold-dim); }
.ob-done {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem;
  border-radius: 50%; background: rgba(200, 162, 76, 0.14);
  border: 1px solid var(--gold-dim); color: var(--gold);
}
.ob-done svg { width: 1.6rem; height: 1.6rem; }
.ob-confirm-lead { color: var(--ink-muted); margin: 0 auto 1.6rem; max-width: 40ch; }

.ob-facts {
  display: grid; gap: 0.6rem; margin: 0 0 1.4rem; padding: 1rem;
  background: #0d0c0a; border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-align: left;
}
.ob-facts > div { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ob-facts dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.ob-facts dd { margin: 0; font-weight: 600; text-align: right; }
.ob-orderno { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-soft); letter-spacing: 0.04em; }

.ob-summary { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; }
.ob-summary th, .ob-summary td { padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.ob-summary td { text-align: right; white-space: nowrap; color: var(--ink); }
.ob-summary tfoot th, .ob-summary tfoot td {
  border-bottom: 0; border-top: 1px solid rgba(200, 162, 76, 0.3);
  padding-top: 0.7rem; font-weight: 700; font-size: 1.02rem; color: var(--gold-soft);
}
.ob-qty { color: var(--gold-soft); font-weight: 700; }

/* Zwischensumme und Rabatt stehen über dem Gesamtbetrag, treten aber
   zurück – hervorgehoben bleibt das, was zu zahlen ist. Die Trennlinie
   des Fußes rutscht dabei nach oben an die Zwischensumme. */
.ob-summary tfoot .ob-sum-sub th, .ob-summary tfoot .ob-sum-sub td,
.ob-summary tfoot .ob-sum-discount th, .ob-summary tfoot .ob-sum-discount td {
  padding-top: 0.25rem; padding-bottom: 0.25rem;
  font-size: 0.86rem; font-weight: 400; color: var(--ink-muted);
}
.ob-summary tfoot .ob-sum-sub th, .ob-summary tfoot .ob-sum-sub td { padding-top: 0.7rem; }
.ob-summary tfoot .ob-sum-discount th, .ob-summary tfoot .ob-sum-discount td {
  border-top: 0; color: var(--gold-soft); font-weight: 600;
}
.ob-summary tfoot .ob-sum-discount + tr th, .ob-summary tfoot .ob-sum-discount + tr td {
  border-top: 0; padding-top: 0.35rem;
}

/* Gratiszeile: „geschenkt" steht ausgeschrieben da, damit es nicht nur an
   der 0,00 € hängt. */
.ob-gift-tag {
  display: inline-block; margin-left: 0.4rem; padding: 0.02rem 0.45rem;
  border: 1px solid var(--gold-dim); border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-soft);
}
.ob-sum-gift td { color: var(--gold-soft); }

/* Mehrwertsteuer-Ausweis */
.ob-incl { font-size: 0.72rem; font-weight: 400; color: var(--ink-muted); white-space: nowrap; }
.ob-vat { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.78rem; margin-top: 0.7rem; }
.ob-vat caption {
  text-align: left; color: #8a7f68; font-size: 0.74rem;
  padding-bottom: 0.35rem; letter-spacing: 0.04em;
}
.ob-vat th, .ob-vat td { padding: 0.22rem 0; font-weight: 400; color: var(--ink-muted); }
.ob-vat th { white-space: nowrap; }
.ob-vat-net { text-align: left; padding-left: 0.7rem !important; color: #7d735f !important; }
.ob-vat td:last-child { text-align: right; white-space: nowrap; color: var(--ink); }

.ob-confirm-note, .ob-confirm-mail { font-size: 0.86rem; color: var(--ink-muted); margin: 1rem 0 0; }
.ob-pay { margin: 1.2rem 0 0; font-size: 0.92rem; color: var(--ink); }
.ob-confirm-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1.6rem; }
.ob-confirm-actions .btn { flex: 1 1 12rem; }
.ob-address { margin: 1.4rem 0 0; font-size: 0.78rem; color: #7d735f; }

.ob-footer-meta { margin-top: 0; border-top: 0; }
.ob-footer-meta a { color: var(--ink-muted); }
.ob-footer-meta a:hover { color: var(--gold-soft); }

/* ---------- Große Ansicht mit Sonderwunsch ----------
   Natives <dialog>: Fokusfalle, Esc und der Rest kommen vom Browser.
   Ohne showModal()-Unterstützung wird es nie geöffnet. */
.ob-modal {
  width: min(100% - 1.5rem, 29rem);
  max-height: min(88vh, 44rem);
  margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raise); color: var(--ink);
  overflow: hidden;
}
.ob-modal[open] { display: flex; flex-direction: column; }
.ob-modal::backdrop { background: rgba(0, 0, 0, 0.74); }
.ob-modal-inner { min-height: 0; overflow-y: auto; scrollbar-width: thin; }

.ob-modal-x {
  position: absolute; right: 0.6rem; top: 0.6rem; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(10, 9, 7, 0.82); color: var(--ink);
  cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.ob-modal-x:hover { border-color: var(--gold-dim); color: var(--gold-soft); }

.ob-modal-media { aspect-ratio: 16 / 10; background: #0d0c0a; }
.ob-modal-media[hidden] { display: none; }
.ob-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-modal-media .ob-noimg { color: #4d4638; }

.ob-modal-body { padding: 1.05rem 1.1rem 1.2rem; }
.ob-modal-name {
  margin: 0 0 0.3rem; font-size: 1.22rem; line-height: 1.2; color: var(--ink);
}
.ob-modal-desc {
  margin: 0 0 0.5rem; max-width: none;
  font-size: 0.86rem; line-height: 1.5; color: var(--ink-muted);
}
.ob-modal-desc[hidden] { display: none; }
.ob-modal-price {
  margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; color: var(--gold-soft);
}

.ob-modal-lbl {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ob-modal-lbl[hidden], .ob-modal-note[hidden], .ob-modal-count[hidden], .ob-modal-hint[hidden] { display: none; }
.ob-modal-opt { text-transform: none; letter-spacing: 0; color: #7d735f; font-weight: 400; }
.ob-modal-note {
  width: 100%; min-height: 4.2rem; padding: 0.7rem 0.8rem; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #0d0c0a; color: var(--ink);
  font: inherit; font-size: 0.95rem; line-height: 1.5;
}
.ob-modal-note::placeholder { color: #7d735f; }
.ob-modal-note:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ob-modal-count {
  margin: 0.25rem 0 0; text-align: right;
  font-size: 0.72rem; color: #7d735f; font-variant-numeric: tabular-nums;
}
.ob-modal-hint {
  margin: 0.5rem 0 0; max-width: none;
  font-size: 0.76rem; line-height: 1.5; color: var(--ink-muted);
}
.ob-modal-hint a { color: var(--gold-soft); }
/* Telefonnummern nie umbrechen – auch nicht zwischen Nummer und dem
   Anruf-Symbol, das manche Browser dahinter setzen. */
.ob-tel { white-space: nowrap; }

.ob-modal-foot {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 1.1rem;
}
.ob-modal-foot[hidden] { display: none; }
.ob-modal-add { flex: 1; justify-content: center; min-width: 12rem; }

@media (prefers-reduced-motion: no-preference) {
  .ob-modal[open] { animation: ob-modal-in 0.18s ease-out; }
  @keyframes ob-modal-in {
    from { opacity: 0; transform: translateY(0.6rem); }
    to   { opacity: 1; transform: none; }
  }
}