/*! © 2026 Bemuar Technology (Resmuar). Alle Rechte vorbehalten. Urheberrechtlich geschützt (§§ 2, 69a UrhG): Vervielfältigung, Weitergabe und Nachbau ohne schriftliche Zustimmung nicht gestattet. https://resmuar.de/impressum */
/* ============================================================================================
   DIE KARTE — das Blatt der Speisekarte (D-161, 22.09.2026)

   Der Betreiber: «speise karte tasarimini bastan sonra yeniden tasarlamani istiyorum … özel bir
   tasarim … yazi tipi renkler vs cok güzel bir tasarim.» Und aus früheren Runden die Regel, nach
   der er urteilt: nicht die Farbe, die KOMPOSITION (D-145). Also ist dieses Blatt kein Anstrich
   über der alten Karte, sondern eine andere Ordnung der Seite:

     · ein Deckel wie der Umschlag einer gedruckten Karte — links das Kartenwort gross, die
       eigenen Worte der Küche, ein INHALTSVERZEICHNIS der Rubriken mit Zahl; rechts die
       Gerichtfotos als eine Tafel, nicht als dunkles Band mit weisser Schrift darüber
     · Rubriken als nummerierte Kapitel mit Haarlinie und Zählung («01 Vorspeisen · 8 Gerichte»)
     · die Gerichtzeile wie eine gesetzte Karte: Name, Punktlinie, Preis auf einer Zeile, die
       Beschreibung darunter, das Foto als Tafel rechts, der Warenkorb-Knopf in der Hausfarbe an
       der Ecke des Fotos — das Muster, das ein Gast von jeder Bestell-App kennt
     · KEINE Kästen, KEINE Kartenraster, kein Messing: Papier, Tinte, Haarlinien, EIN Akzent

   ⛔ WARUM EIN EIGENES BLATT UND NICHT site.css. Der Kontor-Block besitzt site.css von seiner ersten
      Regel bis zum Ende (LayoutKontorTest liest es so); eine allgemeine Regel dahinter ist ein
      Testfehler. Und die Karte ist EINE Seite: ein Blatt, das nur sie lädt, kostet die anderen
      Seiten nichts. `speisekarte.blade.php` schiebt es über `@push('head')` NACH brand.css.

   ⚠️ ALLES UNTER `.page-menu`, und das ist die ganze Mechanik. Der Body trägt die Klasse nur auf
      der Speisekarte (layout.blade.php). Mit ihr schlägt jede Regel hier die gleich lange des
      Grundblatts und der Aufbauten (Ofen setzt `.layout-ofen .mdish__photo` — gleiche Stärke,
      dieses Blatt kommt später), und `/bestellen`, das dieselben Rubrik-Klassen schreibt, bleibt
      unberührt.

   ⚠️ DIE VERTRÄGE DES GRUNDBLATTS BLEIBEN DORT STEHEN und werden hier nur überstimmt, nie
      gelöscht: `.mdish__add { display: none }` bis cart.js läuft, `.page-menu .site-header
      { position: static }`, `.page-laden .abholband { scroll-margin-top }`, die 44-px-Ziele.
      Die Tests dafür lesen site.css; sie sehen dieses Blatt nicht und müssen es nicht.

   ⚠️ SCHRIFT UND FARBE KOMMEN VOM HAUS. `--serif`/`--sans` setzt der Aufbau (Bühne: Noto Serif
      Display + Schibsted Grotesk, Kontor: Archivo, Tatami: Schibsted), die Hausfarbe brand.css,
      Papier und Tinte das Thema und die Nacht. Dieses Blatt legt fest, WIE damit gesetzt wird —
      Grössen, Gewichte, Ziffern, Linien — nicht WOMIT. So ist die Karte auf jedem Haus dessen
      Karte und trotzdem überall dieselbe Karte.

   ⚠️ KEIN `opacity: 0` OHNE SKRIPT (BewegungTest-Regel, hier freiwillig gehalten), keine
      handgeschriebenen SVG (ZeichensatzTest), jede neue Klasse steht in DesignSystemTests Liste.
   ============================================================================================ */

.page-menu {
    /* Fliessend wie --wrap (tokens.css, 27.09.2026): 1280px fest liess auf 1920er-Schirmen je
       Seite ~310px Leere. Unter ~1730px unverändert 1280px; darüber wächst das Blatt bis 1480px
       (bei 1920: ~1420). Die Gerichtzeile trägt das: Name, Punktlinie, Preis — die Punktlinie
       nimmt die Mehrbreite auf, wie auf einer gedruckten Karte. */
    --ka-breite: clamp(1280px, 74vw, 1480px);
    --ka-rand: clamp(18px, 4vw, 48px);
    --ka-serif: var(--serif);
    --ka-sans: var(--sans);
    /* Die Tafel eines Gerichts: 96 px in zwei Spalten, 120 px in der einen Spalte (Tablet hochkant,
       schmaler Schreibtisch; Regeln unter 7), 92 px auf dem Telefon. 10.10.2026: vorher überall
       96 — in einer 750 px breiten Tabletspalte eine Briefmarke neben drei Zeilen Text. */
    --ka-foto: 96px;
    --ka-pad: clamp(16px, 1.8vw, 22px);
    --ka-r: 14px;
    --ka-r-gross: 22px;
    --ka-kurve: cubic-bezier(.16, .84, .3, 1);
    /* Die Kapitel-Linie: eine Stufe kräftiger als die Haarlinie zwischen Gerichten. */
    --ka-kapitel: color-mix(in oklab, var(--text) 80%, transparent);
}

/* ⛔ KEINE PUNKTLINIEN MEHR (10.10.2026). Die Zeile «Name · · · · Preis» stand seit D-161 auf der
      Karte; seit dem 25.09. (D-170) steht die Punktlinie auf der Liste der Formen, die der
      Betreiber nirgends mehr sehen will — und gemessen am Tablet (820 px, zwei Spalten) brach der
      Name dreimal um, und die Punkte füllten den Rest der ersten Zeile mit Rauschen. Der Preis
      steht jetzt rechts am Rand, der Name links, und dazwischen ist Papier. `.mdish__lead` und
      `.ka-inhalt__lead` bleiben im Markup (Verträge der Tests), tragen aber nichts mehr. */

/* ── 0 · Grund ──────────────────────────────────────────────────────────────────────────────── */

/* Die Karte darf breiter sein als das Grundmass (1080): zwei Gerichtspalten neben einem
   Register brauchen den Platz. Nur unter <main> — die Kopfzeile und der Fuss bleiben, wie ihr
   Aufbau sie setzt. */
.page-menu main .wrap { max-width: var(--ka-breite); padding: 0 var(--ka-rand); }
.page-menu main { overflow-x: clip; }

.page-menu .mdish__name,
.page-menu .mcat__title,
.page-menu .hero__title { hyphens: manual; }

/* ── 1 · Der Ladenkopf (nur mit aktivem Bestellen) ─────────────────────────────────────────── */

.page-menu .ladenkopf {
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
            backdrop-filter: saturate(1.2) blur(14px);
    border-bottom: 1px solid var(--line-soft);
}
.page-menu .ladenkopf__inner { gap: 14px; padding-top: 8px; padding-bottom: 8px; }
/* Keine Platte, kein Rahmen: das Zeichen steht frei im Ladenkopf (04.10.2026, siehe site.css). */
.page-menu .ladenkopf__mark {
    height: 36px; padding: 0; border-radius: 0;
    background: none; box-shadow: none; border: 0;
}
.page-menu .ladenkopf .ladenkopf__name {
    font: 600 .92rem/1.2 var(--ka-sans); letter-spacing: .01em; margin: 0;
}
.page-menu .ladenkopf__meta { font: 400 .8rem/1.35 var(--ka-sans); margin-top: 2px; }
.page-menu .ladenstatus { font-weight: 600; }


/* ⚠️ NACH DEM PUNKT, NICHT DAVOR: `…--zu::before` und `…::before` sind gleich spezifisch, die
      spätere Regel gewinnt. Stünde das hier oben, färbte `currentColor` den Punkt zurück. */
.page-menu .ladenstatus--zu { color: var(--text); }
.page-menu .ladenstatus--zu::before { background: var(--wine); }
.page-menu .ladenkopf__info {
    min-height: 44px; border-radius: 999px; padding: 0 14px;
    border-color: var(--line); background: transparent; color: var(--text);
    font: 500 .86rem var(--ka-sans);
}
.page-menu .ladenkopf__info:hover { border-color: var(--text); color: var(--text); }
.page-menu .ladenkopf__tel { border-radius: 999px; font-weight: 600; box-shadow: none; }

/* ── 2 · Der Deckel ────────────────────────────────────────────────────────────────────────── */

/* Das Grundblatt zeichnet hier ein dunkles Fotoband mit weisser Schrift und zwei Schleiern. Das
   wird alles abgeschaltet: der Deckel steht auf Papier, die Schrift ist Tinte, das Foto ist eine
   Tafel mit eigener Kante. */
.page-menu .menu-hero {
    display: block; min-height: 0; overflow: visible; isolation: auto;
    padding: clamp(22px, 3.2vw, 44px) 0 clamp(26px, 3.4vw, 48px);
    background: none; color: var(--text);
}
.page-menu .menu-hero::after { content: none; }
.page-menu .menu-hero :focus-visible {
    outline-color: var(--accent);
    box-shadow: 0 0 0 5px color-mix(in oklab, var(--bg) 70%, transparent);
}

.page-menu .ka-deckel {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 3vw, 40px); align-items: end;
}
.page-menu .ka-deckel__text {
    display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(12px, 1.4vw, 18px);
    min-width: 0;
}
.page-menu .menu-hero .eyebrow { margin: 0; color: var(--muted); }
/* Das Beiwort des Hauses in seiner Farbe — die eine Stelle im Deckel, an der die Hausfarbe als
   Wort steht; `--accent-ink` ist dafür je Haus tief genug gemischt (App\Site\Kontrast). */
.page-menu .menu-hero .accent-script { color: var(--accent-ink); text-shadow: none; }
.page-menu .hero__title {
    margin: 0;
    font-family: var(--ka-serif); font-weight: 400;
    font-size: clamp(3.1rem, 8.4vw, 6.6rem); line-height: .94; letter-spacing: -.028em;
    color: var(--text); text-shadow: none; text-wrap: balance;
}
.page-menu .menu-lede {
    margin: 0; max-width: 34em; text-align: left;
    font: 400 clamp(1rem, .96rem + .3vw, 1.14rem)/1.55 var(--ka-sans); color: var(--muted);
}

/* Das Inhaltsverzeichnis: Nummer, Rubrik, Punktlinie, Zahl — wie auf der ersten Seite einer
   gebundenen Karte. Zwei Spalten, ab 1024px; darunter trägt das klebende Register dieselben
   Sprünge, und der Deckel bleibt kurz. */
.page-menu .ka-inhalt {
    display: none;
    margin-top: clamp(6px, 1vw, 12px); padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}
.page-menu .ka-inhalt ol {
    list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px;
    counter-reset: ka-inhalt;
}
.page-menu .ka-inhalt li { break-inside: avoid; counter-increment: ka-inhalt; }
/* Eine Zeile je Rubrik: die Nummer klein, der Name, rechts die Zahl der Gerichte — Haarlinie
   darunter, wie die Seiten eines Registers. Kein Kreis um die Nummer, keine Punkte dazwischen. */
.page-menu .ka-inhalt a {
    display: flex; align-items: baseline; gap: 12px; min-width: 0;
    padding: 7px 0; color: var(--text); text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
    font: 500 .9rem/1.3 var(--ka-sans);
    transition: color var(--t-fast);
}
.page-menu .ka-inhalt a::before {
    /* Die Nummer ist Schmuck: `/ ""` nimmt sie aus dem Linknamen (vorgelesen wird «Vorspeisen 8»,
       nicht «null eins Vorspeisen 8»). Die Zeile davor hält ältere Browser, die die Form nicht kennen. */
    content: counter(ka-inhalt, decimal-leading-zero);
    content: counter(ka-inhalt, decimal-leading-zero) / "";
    flex: 0 0 1.6em; font-size: .75rem; color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.page-menu .ka-inhalt a:hover { color: var(--accent-ink); }
.page-menu .ka-inhalt a:hover .ka-inhalt__zahl { color: var(--accent-ink); }

.page-menu .ka-inhalt__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.page-menu .ka-inhalt__lead { display: none; }
.page-menu .ka-inhalt__zahl { flex: 0 0 auto; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Die Tafel: die Diashow aus den Gerichtfotos (site.js blendet, ohne Skript steht das erste)
   oder, hat kein Gericht ein Bild, das Hausfoto vom <body>. */
.page-menu .ka-deckel__bild {
    position: relative; order: -1; min-width: 0;
    aspect-ratio: 16 / 10; border-radius: var(--ka-r-gross); overflow: hidden;
    background: var(--hero-photo, none) center 45% / cover no-repeat, var(--surface);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text) 8%, transparent);
}
.page-menu .menuhero__stage { position: absolute; inset: 0; z-index: 0; }
.page-menu .menuhero__slide { border-radius: 0; }

/* Tag/Nacht auf der Tafel: Glas über dem Foto. Ohne Tafel steht der Knopf rechts oben im Deckel,
   als ruhiger Ring auf Papier. */
.page-menu .menu-hero .theme-toggle {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    border: 1px solid var(--line); background: var(--bg); color: var(--text);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.page-menu .menu-hero .theme-toggle:hover { border-color: var(--text); }
.page-menu .ka-deckel__bild .theme-toggle {
    top: 14px; right: 14px;
    border-color: rgba(255, 255, 255, .34);
    background: rgba(12, 14, 16, .38); color: #FFFFFF;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-menu .ka-deckel__bild .theme-toggle:hover { border-color: #FFFFFF; }

/* Auf dem Telefon steht die Tafel ÜBER dem Titel und ist flach (21/9): der Titel liest sich dort
   besser auf Papier als auf einem 390 px schmalen Foto. */
@media (max-width: 599.9px) {
    .page-menu .ka-deckel__bild { aspect-ratio: 21 / 9; }
}

/* Das Inhaltsverzeichnis steht unter dem Fotoband (Blade), wird aber seit D-230 nicht mehr gezeigt:
   die Rubriken trägt die Leiste der Kapseln unter der Suche (Abschnitt 13). */

/* ── 3 · Das Abholband (nur mit aktivem Bestellen) ─────────────────────────────────────────── */

/* Kein Kasten: eine Randnotiz mit einem Strich in der Hausfarbe. Was sie sagt, steht in
   speisekarte.blade.php; die Klassen sind die des Grundblatts (Verträge). */
.page-menu .abholband {
    display: grid; gap: 4px;
    margin: 0; padding: 12px 0;
    border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
}
.page-menu .abholband__was { flex-wrap: nowrap; align-items: flex-start; font: 400 .96rem/1.5 var(--ka-sans); color: var(--text); }
.page-menu .abholband__was > span { min-width: 0; }
.page-menu .abholband__ic { margin-top: 3px; }
.page-menu .abholband__was b { font-weight: 600; }
.page-menu .abholband__ic { color: var(--accent-ink); }
.page-menu .abholband__hinweis { margin: 0; font: 400 .86rem/1.5 var(--ka-sans); color: var(--muted); }
.page-menu .abholband__hinweis b { color: var(--text); font-weight: 600; }
.page-menu .menu-order { margin: 0; }

/* ── 4 · «Am beliebtesten» (nur mit aktivem Bestellen) ─────────────────────────────────────── */

.page-menu .beliebt { margin: clamp(30px, 4vw, 52px) 0 0; }
.page-menu .beliebt__kopf {
    align-items: baseline; gap: 6px 16px;
    margin-bottom: clamp(14px, 1.6vw, 20px); padding-bottom: 12px;
    border-bottom: 1px solid var(--ka-kapitel);
}
.page-menu .beliebt .beliebt__titel {
    margin: 0; font-family: var(--ka-serif); font-weight: 400;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem); line-height: 1.05; letter-spacing: -.015em;
}
.page-menu .beliebt__quelle {
    margin-left: auto; font: 500 .78rem/1.4 var(--ka-sans); color: var(--muted);
}
.page-menu .beliebt__spur { gap: clamp(12px, 1.6vw, 22px); padding-bottom: 4px; }
.page-menu .beliebtkarte__bild { overflow: hidden; border-radius: var(--ka-r); }
.page-menu .beliebtkarte__foto { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
.page-menu .beliebtkarte__rang {
    left: 10px; top: 10px;
    font: 600 .75rem/1 var(--ka-sans);
    padding: 8px 10px 7px; border-radius: 999px;
    background: color-mix(in oklab, var(--bg) 86%, transparent); color: var(--text);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: none;
}
.page-menu .beliebtkarte__name {
    margin-top: 10px; font-family: var(--ka-serif); font-weight: 500;
    font-size: 1rem; line-height: 1.3;
}
.page-menu .beliebtkarte__fuss { min-height: 0; margin: 2px 0 0; }
/* ⚠️ KEINE Tabellenziffern in Schibsted: «10 , 90 €» stand mit Luft um das Komma (gemessen 10.10.). */
.page-menu .beliebtkarte__preis {
    font: 500 .9rem/1.4 var(--ka-sans); color: var(--muted);
    font-variant-numeric: normal;
}
.page-menu .beliebtkarte__link:hover .beliebtkarte__foto { box-shadow: none; }
.page-menu .beliebtkarte__link:hover .beliebtkarte__name { color: var(--accent-ink); }

/* Die Listenform (nicht jedes der vier hat ein Foto): Rang, Name, Preis — ab 861px in zwei
   Spalten, sonst standen vier Zeilen quer über 1300 px Papier mit nichts dazwischen. */
.page-menu .beliebt__liste { gap: 0 clamp(32px, 4.5vw, 72px); }
@media (min-width: 861px) {
    .page-menu .beliebt__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Der Preis am Fuss der Kachel, auch wenn ein Name zwei Zeilen hat (das Grundblatt will es so;
       `margin: 2px 0 0` oben hatte es überstimmt — vier Preise, einer 21 px tiefer, gemessen 10.10.). */
    .page-menu .beliebtkarte__fuss { margin-top: auto; }
}
.page-menu .beliebtzeile__link {
    grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 12px;
    padding: 12px 2px; border-radius: 0; background: transparent;
    border-bottom: 1px solid var(--line-soft);
}
.page-menu .beliebtzeile__link:hover { background: transparent; color: var(--accent-ink); }
.page-menu .beliebtzeile__rang { font: 500 .75rem var(--ka-sans); color: var(--muted); }   /* D-209: nichts unter 12 px */
.page-menu .beliebtzeile__name { font-family: var(--ka-serif); font-weight: 500; font-size: 1.02rem; }
.page-menu .beliebtzeile__preis { font: 500 .92rem var(--ka-sans); color: var(--text); font-variant-numeric: normal; }

/* ── 5 · Die Werkzeuge: Suche · Ernährung · Allergene ──────────────────────────────────────── */

/* Eine Zeile zwischen zwei Haarlinien — kein Kasten mit Goldkante. Ohne menu.js blendet das
   Grundblatt `.m-bar` aus (`html:not(.has-menufilter)`), und mit ihr den Allergenfilter, der
   jetzt in der Zeile steht: ohne Skript filtert er nichts, also ist er ohne Skript nicht da. */
.page-menu .menu-tools {
    margin-top: clamp(22px, 3vw, 40px); padding: 6px 0;
    border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.page-menu .m-bar { gap: 4px 12px; }
.page-menu .iconbtn2 {
    border-color: var(--line); background: transparent; color: var(--text);
}
.page-menu .iconbtn2:hover { border-color: var(--text); color: var(--text); }
.page-menu .searchbox.is-open .searchbox__input {
    padding: 10px 6px; margin-left: 6px;
    border: 0; border-bottom: 1px solid var(--text); border-radius: 0;
    background: transparent; font: 400 1rem var(--ka-sans);
}
.page-menu .searchbox.is-open .searchbox__input:focus { border-color: var(--accent); box-shadow: none; }

/* Ernährung: Worte mit einem Strich darunter, keine Pillen in einer Pille. */
.page-menu .m-diet { padding: 0; gap: 0; border: 0; border-radius: 0; background: transparent; }
.page-menu .m-diet .chip {
    position: relative; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    font: 500 .88rem/1 var(--ka-sans); color: var(--muted);
}
.page-menu .m-diet .chip::before { content: none; }
.page-menu .m-diet .chip::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px;
    background: var(--accent); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center; transition: transform var(--t);
}
.page-menu .m-diet .chip:hover { color: var(--text); }
.page-menu .m-diet .chip.is-active {
    background: transparent; border-color: transparent; box-shadow: none;
    color: var(--text); font-weight: 600;
}
.page-menu .m-diet .chip.is-active::after { transform: scaleX(1); }

/* Allergene: rechts in der Zeile, ein Wort mit Blatt; geöffnet nimmt er die ganze Breite. */
.page-menu .m-allergen { flex: 0 0 auto; margin-left: auto; border: 0; padding: 0; }
.page-menu .m-allergen[open] {
    flex: 1 1 100%; margin: 4px 0 0; padding-top: 4px;
    border-top: 1px solid var(--line-soft);
}
.page-menu .m-allergen__toggle {
    min-height: 44px; padding: 0 4px; gap: 8px;
    font: 500 .88rem/1 var(--ka-sans); color: var(--text);
}
.page-menu .m-allergen__toggle:hover,
.page-menu .m-allergen[open] .m-allergen__toggle { color: var(--accent-ink); }
.page-menu .m-allergen__mark { color: var(--enamel); }
.page-menu .m-allergen__body { padding: 4px 0 12px; }
.page-menu .ex-grp__hd { color: var(--muted); font-size: .75rem; }
.page-menu .ex-chip {
    border-color: var(--line); background: transparent; color: var(--text);
    font: 400 .84rem var(--ka-sans);
}
.page-menu .ex-chip:hover { border-color: var(--text); }
.page-menu .ex-chip:has(.m-ex:checked) {
    color: var(--accent-ink); border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.page-menu .m-allergen__body .muted { font-size: .82rem; }

/* ── 6 · Das Register (die klebende Rubrikenleiste) ────────────────────────────────────────── */

.page-menu .catbar {
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
            backdrop-filter: saturate(1.2) blur(12px);
    border-bottom: 1px solid var(--line-soft);
}
.page-menu .catbar__inner { gap: 0; }
.page-menu .catbar__seam { display: none; }
.page-menu .catnav { gap: 0; }
.page-menu a.chip--cat {
    padding: 17px 13px 15px;
    font: 600 .8125rem/1 var(--ka-sans);
    color: var(--muted);
}
.page-menu a.chip--cat::before,
.page-menu a.chip--cat + a.chip--cat::before { content: none; }
.page-menu a.chip--cat:hover { color: var(--text); }
.page-menu a.chip--cat.is-active { color: var(--text); }
.page-menu a.chip--cat::after {
    left: 13px; right: 13px; bottom: 0; height: 2px; background: var(--accent); border-radius: 0;
}

@media (min-width: 861px) {
    /* Ohne Bestellen: alle Rubriken auf einmal, in Zeilen. */
    .page-menu .catnav { gap: 0 2px; padding: 0; }
    .page-menu a.chip--cat { padding: 15px 11px 13px; font-size: .75rem; }

    /* Mit Bestellen: das Register senkrecht in der Seitenspalte — nummeriert, mit einem Strich in
       der Hausfarbe an der Rubrik, in der man gerade liest. */
    .page-menu .laden__seite .catbar { border: 0; background: none; }
    .page-menu .laden__seite .catnav { counter-reset: ka-rubrik; gap: 0; }
    .page-menu .laden__seite a.chip--cat {
        display: flex; align-items: baseline; gap: 10px;
        padding: 9px 12px 9px 14px; border-left: 2px solid transparent; border-radius: 0;
        font: 500 .9rem/1.35 var(--ka-sans); letter-spacing: 0; text-transform: none;
        white-space: normal; overflow-wrap: anywhere;
        color: var(--muted); counter-increment: ka-rubrik;
        transition: color var(--t-fast), border-color var(--t-fast);
    }
    .page-menu .laden__seite a.chip--cat::before {
        content: none;
        position: static; display: inline; width: auto; height: auto; transform: none; background: none;
        flex: 0 0 auto; white-space: nowrap;
        font-size: .64rem; color: var(--muted);
        font-variant-numeric: tabular-nums;
    }
    .page-menu .laden__seite a.chip--cat + a.chip--cat::before {
        content: none; display: inline;
    }
    .page-menu .laden__seite a.chip--cat::after { display: none; }
    .page-menu .laden__seite a.chip--cat:hover { background: transparent; color: var(--text); }
    .page-menu .laden__seite a.chip--cat.is-active {
        background: transparent; border-left-color: var(--accent);
        color: var(--text); font-weight: 600;
    }
    /* Die Zahl der Gerichte rechts in der Seitenspalte — dieselbe Auskunft wie im Inhaltsverzeichnis
       des Deckels, hier für den, der schon liest. Im waagrechten Register (Telefon, Tablet) steht
       sie nicht: dort zählt jedes Pixel Breite. */
    .page-menu .laden__seite .chip__zahl {
        display: inline; margin-left: auto; padding-left: 10px;
        /* Als Flex-Kind nie schrumpfen, nie umbrechen: «12» stand bei «Überbackene Spezialitäten» als
           «1 / 2» in zwei Zeilen (gemessen live 10.10., Akropolis 1440 px). */
        flex: 0 0 auto; white-space: nowrap;
        font-size: .75rem; font-weight: 500; color: var(--muted);
        font-variant-numeric: tabular-nums;
    }
    /* 232 statt 216: mit der Zahl rechts brach «Suppen & Schmorgerichte» um (gemessen 10.10.). */
    .page-menu .laden__raster { grid-template-columns: 232px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
}
.page-menu .chip__zahl { display: none; }

/* ── 7 · Rubriken und Gerichte ─────────────────────────────────────────────────────────────── */

.page-menu .mcat { padding: clamp(30px, 4.2vw, 56px) 0 clamp(6px, 1vw, 14px); }
.page-menu.page-laden .mcat { padding-top: clamp(30px, 4.2vw, 56px); }

/* Der Kopf einer Rubrik: Nummer klein und gesperrt, der Name gross und ohne Fett, rechts die
   Zählung, darunter die Kapitel-Linie. Kein Goldbalken (Grundblatt) — der ist abgeschaltet. */
.page-menu .mcat__kopf {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px;
    padding-bottom: 12px; margin-bottom: 2px;
    border-bottom: 1px solid var(--ka-kapitel);
}
.page-menu .mcat__title {
    margin: 0; padding: 0; position: static;
    font-family: var(--ka-serif); font-weight: 400;
    font-size: clamp(1.7rem, 2.7vw, 2.4rem); line-height: 1.04; letter-spacing: -.018em;
    text-transform: none; color: var(--text);
}
.page-menu .mcat__title::after { content: none; }

.page-menu .mcat__icon { font-size: .72em; margin-right: .3em; vertical-align: .08em; }
.page-menu .mcat__zahl {
    margin-left: auto; font: 500 .75rem/1.4 var(--ka-sans); color: var(--muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Zwei Spalten, wo sie hinpassen — die Rubrik fragt ihre Spalte (Container), nicht den Schirm. */
.page-menu .mcat__grid {
    display: grid; grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(32px, 4.5vw, 72px); row-gap: 0;
}
.page-menu .laden__karte .mcat__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
    .page-menu .mcat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ⚠️ ZWEI SPALTEN AB 720 PX SPALTENBREITE — ABER DIE FORM DER ZEILE WECHSELT ERST BEI 880 (10.10.2026).
      Gemessen am Tablet (820 px): zwei Spalten zu je ~350 px in der KARTENZEILE (Name neben Preis)
      brachen den Namen dreimal um; eine Spalte mit 120-px-Tafel liess unter jedem Preis 55 px leer
      und halbierte die Dichte. Zwei Spalten in der STAPELFORM (Name über die Breite, Preis unten)
      tragen 350 px: das ist die Form jeder Bestell-App am Tablet. Die Kartenzeile kommt erst, wenn
      eine Spalte ≥ 430 px hat (Container ≥ 880, siehe die Schalter unter «zwei Formen»). */
@container (min-width: 720px) {
    .page-menu .laden__karte .mcat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 719.9px) {
    .page-menu .laden__karte .mcat__grid { grid-template-columns: minmax(0, 1fr); }
    .page-menu .laden__karte .mdish { --ka-foto: 120px; }
}
/* Ohne Bestellen gibt es keinen Container: dieselbe 120-px-Tafel für die eine Spalte unter 861 px. */
@media (max-width: 860px) {
    .page-menu .mdish { --ka-foto: 120px; }
}

/*
 * DIE GERICHTZEILE HAT ZWEI FORMEN, UND DIE SPALTENZAHL ENTSCHEIDET (10.10.2026).
 *
 *   · ZWEI SPALTEN (Schreibtisch): Name links, Preis rechts am Rand, Beschreibung darunter — die
 *     Zeile einer gesetzten Karte. Die Spalte ist ~500 px breit, der Name hat Platz.
 *   · EINE SPALTE (Telefon, Tablet, schmaler Schreibtisch): der Name über die ganze Textbreite,
 *     die Beschreibung, UNTEN der Preis mit den Zeichen daneben, rechts die Tafel mit dem Knopf —
 *     die Zeile jeder Bestell-App, die ein Gast kennt.
 *
 * ⛔ VORHER GALT DIE KARTENZEILE ÜBERALL. Gemessen bei 390 px neben einer 86-px-Tafel: «Gebratene /
 *    Auberginen mit / Walnüssen» in drei Zeilen, der Preis rechts oben an der ersten, dazwischen
 *    Punkte — der Name hatte noch 110 px Breite. Auf dem Tablet (820 px, eine Spalte) stand der
 *    Preis 500 px vom Namen entfernt am anderen Ende der Zeile.
 *
 * WIE: `.mdish__head` wird in der Stapelform zu `display: contents`, und seine Kinder (Name, Preis,
 *    der absolute Knopf) werden Zellen des Körpers — das Markup bleibt, was die Tests lesen. Die
 *    Form wählt nicht ein Breakpoint, sondern dieselbe Frage wie das Raster: `--ka-kopf` & Co.
 *    stehen in der Stapelform als Vorgabe und werden GENAU DORT umgestellt, wo das Raster
 *    breit genug für die Kartenzeile wird (Container ≥ 880 px mit Bestellen, Fenster ≥ 1040 px ohne;
 *    Spalte ≥ 430 px). Zwei Stellen,
 *    ein Schalter, keine zweite Abschrift der Regeln.
 *
 *    FÜR JEDE ZEILE, MIT UND OHNE TAFEL. Der erste Entwurf stapelte nur Zeilen mit Foto; in einer
 *    Rubrik mit vier Fotos auf 178 Gerichten (Tatami-Laborhaus) sprang der Preis dann von Zeile zu
 *    Zeile zwischen rechts oben und links unten. Ohne Tafel sitzt der Knopf, der sonst auf der
 *    Tafel liegt, am Ende der Preiszeile (dritte Spalte des Körpers). Die Körperzeilen sind
 *    durchnummeriert, damit eine fehlende Beschreibung (oder fehlende Grössen) keine Lücke lässt:
 *    eine leere `auto`-Zeile ist 0 px hoch. Die Preisspalte ist `fit-content(70%)`: eine Füllmenge
 *    mit Listen- und Aktionspreis («Flasche 0,75 l 24,90 € 19,90 €») bricht um, statt die Zeichen
 *    daneben auf 40 px zu quetschen.
 */
.page-menu .mdish .mdish__head { display: var(--ka-kopf, contents); }
.page-menu .mdish .mdish__body {
    display: var(--ka-koerper, grid); grid-template-columns: fit-content(70%) minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto; row-gap: 0; column-gap: 10px;
    align-items: baseline;
}
.page-menu .mdish .mdish__lead { display: var(--ka-strich, none); }
/* ⚠️ AUCH DIE ZELLEN SIND SCHALTBAR: in der Kartenzeile ist `.mdish__head` selbst das Raster
      (Name · Abstand · Preis), und eine feste `grid-area` des Namens über alle Spalten hätte dort
      den Preis in die zweite Zeile gedrückt — gemessen am Ofen-Haus (10.10.). */
.page-menu .mdish .mdish__name { grid-area: var(--ka-zelle-name, 1 / 1 / 2 / -1); }
.page-menu .mdish .mdish__desc { grid-area: var(--ka-zelle-rest, 2 / 1 / 3 / -1); }
.page-menu .mdish .mdish__groessen { grid-area: var(--ka-zelle-rest, 3 / 1 / 4 / -1); }
.page-menu .mdish .mdish__price {
    grid-area: var(--ka-zelle-preis, 4 / 1 / 5 / 2); white-space: var(--ka-preis-umbruch, normal);
    margin-top: var(--ka-preis-oben, 8px); text-align: var(--ka-preis-lage, left);
    font-weight: var(--ka-preis-gewicht, 600);
}
.page-menu .mdish .mdish__tags { grid-area: var(--ka-zelle-tags, 4 / 2 / 5 / 3); }
/* Ohne Tafel: der Knopf am Ende der Preiszeile (Stapel) bzw. in der Kopfzeile (Kartenzeile, Regel unter 8). */
.has-cart .page-menu .mdish:not(:has(.mdish__photo:not(.ph-tile))) .mdish__body .mdish__add {
    grid-area: var(--ka-zelle-knopf, 4 / 3 / 5 / 4); align-self: center;
    margin: var(--ka-knopf-rand, 4px 0 0);
}
/* Der Schalter auf die Kartenzeile — gesetzt am Raster, gelesen in der Zeile. */
@media (min-width: 1040px) {
    .page-menu .wrap > .mcat .mcat__grid {
        --ka-kopf: grid; --ka-koerper: block; --ka-strich: block;
        --ka-preis-oben: 0; --ka-preis-lage: right; --ka-preis-gewicht: 500;
        --ka-zelle-name: auto; --ka-zelle-rest: auto; --ka-zelle-preis: auto; --ka-zelle-tags: auto;
        --ka-zelle-knopf: auto; --ka-knopf-rand: -8px 0 -8px 4px; --ka-preis-umbruch: nowrap;
    }
}
@container (min-width: 880px) {
    .page-menu .laden__karte .mcat__grid {
        --ka-kopf: grid; --ka-koerper: block; --ka-strich: block;
        --ka-preis-oben: 0; --ka-preis-lage: right; --ka-preis-gewicht: 500;
        --ka-zelle-name: auto; --ka-zelle-rest: auto; --ka-zelle-preis: auto; --ka-zelle-tags: auto;
        --ka-zelle-knopf: auto; --ka-knopf-rand: -8px 0 -8px 4px; --ka-preis-umbruch: nowrap;
    }
}

/* Die Gerichtzeile. Text links, Foto rechts. */
.page-menu .mdish {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text foto";
    column-gap: clamp(14px, 2vw, 22px); align-items: start;
    padding: var(--ka-pad) 0 calc(var(--ka-pad) + 8px);
    border-bottom: 1px solid var(--line-soft);
    min-width: 0;
}
.page-menu .mdish__body { grid-area: text; min-width: 0; flex: none; }
.page-menu .mdish__photo {
    grid-area: foto;
    width: var(--ka-foto); height: var(--ka-foto);
    border-radius: var(--ka-r); object-fit: cover; box-shadow: none; rotate: none;
}
/* ⛔ KEIN MONOGRAMM AUF DER KARTE. Das Grundblatt setzt für ein Gericht ohne Bild eine Kachel mit
      seinem Anfangsbuchstaben, «damit die Zeilen fluchten». Gemessen am Tatami-Laborhaus (178
      Gerichte, vier Fotos): elf Buchstabenkacheln je Rubrik, die Bilder behaupten, die es nicht
      gibt — genau die «vier grossen Buchstaben», die schon einmal aus dem Beliebt-Streifen
      geflogen sind. Das Bild steht, wo es eins gibt; sonst steht die Zeile als Text über die
      ganze Breite. Die Kachel bleibt im Markup (dishthumb, MenuTest), nur nicht auf dem Blatt. */
.page-menu .mdish__photo.ph-tile { display: none; }
/* DAS ZEICHEN DES HAUSES DAGEGEN STEHT (D-229, 10.10.2026): der Betreiber will auf jedem Gericht ohne
   Foto ein Bild — die Glocke oder was der Wirt gewählt hat, darunter der Name des Restaurants. Es sitzt
   auf derselben Tafel rechts wie ein Foto, also fragen die Regeln «Zeile ohne Bild» unten nicht mehr nach
   `img.mdish__photo`, sondern nach einer Tafel, die kein Monogramm ist:
   `:not(:has(.mdish__photo:not(.ph-tile)))`. Der «+» liegt unten rechts auf der Tafel; mit Knopf rückt
   der Inhalt nach oben (in Tafelgrösse gerechnet: ein Prozent-Polster bezöge sich auf die ganze Zeile). */
.page-menu .mdish__photo.platzhalter { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.has-cart .page-menu .mdish:has(.mdish__add) .mdish__photo.platzhalter { padding-bottom: calc(var(--ka-foto) * .22); }
/* Ohne Tafel eine Spalte — und eine eigene Zeile für das Aktions-Etikett ÜBER dem Text: vorher teilte
   es sich die Zelle «text» mit dem Körper und lag auf den ersten Buchstaben des Namens (D-216, gemessen
   10.10. im Headless-Render: Etikett 30–80 px, Name ab 30 px, dieselbe Ecke). */
.page-menu .mdish:not(:has(.mdish__photo:not(.ph-tile))) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "etikett" "text"; }

/* Das Foto einer Zeile öffnet sich in gross (foto-schau.js): die Lupe als Zeiger, der Fokusring, wenn die
   Tastatur das Foto trifft. Das Monogramm (ein <span>) bleibt, was es ist: ausgeblendet. */
.page-menu img.mdish__photo[role="button"], .page-menu img.beliebtkarte__foto[role="button"] { cursor: zoom-in; }
.page-menu img.mdish__photo:focus-visible, .page-menu img.beliebtkarte__foto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Das Fenster für ein Gerichtfoto in gross (<dialog>): dunkel, das Foto so gross wie der Schirm erlaubt.
   Unter `.page-menu` steht es nicht, weil ein geöffnetes <dialog> in der obersten Schicht liegt. */
.foto-schau {
    width: 100vw;
    max-width: none;
    height: 100svh;
    max-height: none;
    margin: 0;
    padding: clamp(56px, 8vh, 88px) clamp(16px, 6vw, 96px);
    border: 0;
    background: #0B0C0E;
    color: #F2F3F5;
}
.foto-schau::backdrop { background: rgba(5, 5, 6, .92); }
.foto-schau[open] { display: flex; align-items: center; justify-content: center; }
/* ⚠️ DIE FIGUR BRAUCHT EINE BREITE: ohne sie schrumpft sie im Flex-Fenster auf null, die prozentuale
      Höchstbreite des Bildes rechnet gegen null, und das Fenster geht auf, ohne Bild (gemessen am
      Kontor-Fenster, 01.10.2026). */
.foto-schau__figur {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.foto-schau__foto { display: block; min-height: 0; max-width: 100%; max-height: calc(100% - 40px); width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.foto-schau__text { font-size: .95rem; color: #A7ABB0; text-align: center; }
.foto-schau__knopf {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(242, 243, 245, .4);
    border-radius: 50%;
    background: transparent;
    color: #F2F3F5;
    cursor: pointer;
}
.foto-schau__zu { top: 16px; right: 16px; }
.foto-schau__zurueck { left: 16px; top: 50%; margin-top: -24px; }
.foto-schau__vor { right: 16px; top: 50%; margin-top: -24px; }
@media (hover: hover) {
    .foto-schau__knopf:hover { background: #F2F3F5; color: #0B0C0E; }
}
.foto-schau__knopf:focus-visible { outline: 2px solid #F2F3F5; outline-offset: 3px; }

.page-menu .mdish__head {
    display: grid; grid-template-columns: minmax(0, max-content) minmax(18px, 1fr) auto;
    align-items: baseline; column-gap: 10px;
}
.page-menu .mdish__name {
    min-width: 0; margin: 0;
    font-family: var(--ka-serif); font-weight: 500;
    font-size: 1.14rem; line-height: 1.28; letter-spacing: -.006em; text-transform: none;
    color: var(--text); text-wrap: pretty;
}
/* Der Abstandhalter zwischen Name und Preis: Papier, keine Punkte (siehe Kopf des Blatts). */
.page-menu .mdish__lead {
    display: block; min-width: 18px; height: 0;
    position: static; opacity: 1; border: 0;
}
.page-menu .mdish__price {
    margin: 0; text-align: right; white-space: nowrap;
    font-family: var(--ka-serif); font-weight: 500; font-size: 1.06rem; line-height: 1.28;
    color: var(--text); font-variant-numeric: lining-nums tabular-nums;
}
/* «ab 15,90 €»: das Wort klein und leise, die Zahl wie jeder Preis. */
.page-menu .mdish__ab { font: 400 .78em/1 var(--ka-sans); color: var(--muted); margin-right: .15em; }
/* Eine Füllmenge an einem Einzelpreis («0,3 l 2,50 €») bleibt im Preisfeld, die Menge leise. */
.page-menu .mdish__price > .mdish__var { font-variant-numeric: normal; }
.page-menu .mdish__groesse { font-weight: 400; color: var(--muted); font-family: var(--ka-sans); font-size: .88em; }
/* Die Grössen mit Preisen unter der Beschreibung — eine Zeile, Punkte dazwischen. Vorher standen
   sie als Spalte im Preisfeld, je Zeile ein eigener Knopf; der Betreiber (23.09.2026) wollte die
   Wahl im Dialog und die Karte ruhig. */
.page-menu .mdish__groessen {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 2px;
    margin: 6px 0 0; font: 500 .86rem/1.5 var(--ka-sans); color: var(--text);
    font-variant-numeric: normal;
}
.page-menu .mdish__groessen .mdish__var { white-space: nowrap; }
.page-menu .mdish__groessen .mdish__var + .mdish__var::before {
    content: "·"; margin: 0 .55em; color: var(--muted); font-weight: 400;
}
/* Die unsichtbaren Zeilen der übrigen Grössen (cart.js liest sie, niemand sieht sie). */
.page-menu .mdish__zeile { display: none; }

.page-menu .mdish__desc {
    margin: 4px 0 0; font: 400 .9rem/1.5 var(--ka-sans); color: var(--muted);
}
.page-menu .mdish__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; }
.page-menu .mdish__tags:empty { display: none; }
.page-menu .badges { display: contents; }
.page-menu .badge {
    font: 600 .75rem/1 var(--ka-sans);
    display: inline-flex; align-items: center; gap: .3em;
}
.page-menu .badge--vegan { color: var(--enamel); }
.page-menu .badge--vegetarian { color: var(--enamel); }
.page-menu .badge--halal { color: var(--text); }
.page-menu .codes {
    font: 500 .75rem/1 var(--ka-sans); color: var(--muted);
    border: 0; padding: 0; border-radius: 0; background: transparent;
}
.page-menu .codes--add { font-style: normal; opacity: .8; }
.page-menu .soldout {
    margin: 0; padding: 5px 7px 4px; border-radius: 4px;
    font: 600 .75rem/1 var(--ka-sans);
    background: transparent; border: 1px dashed var(--line); color: var(--muted);
}
.page-menu .mdish.is-soldout { opacity: .52; }
.page-menu .dish-icons { margin: 0; gap: 4px; }
.page-menu .dish-icon { font-size: .95rem; }

/* ── 8 · Der Warenkorb an der Zeile und die Leiste ─────────────────────────────────────────── */

/* Der Knopf: ein Kreis in der Hausfarbe an der unteren Ecke des Fotos — 44 px wie im Grundblatt
   («tapped one-handed by somebody holding a phone over a table»), mit einem Rand in Papier, damit
   er auf jedem Bild steht. `.has-cart` setzt cart.js auf <html>; bis dahin bleibt er unsichtbar
   (site.css). In einer Rubrik ohne Tafel steht er rechts unten in der Zeile. */
.has-cart .page-menu .mdish__add {
    position: absolute; z-index: 2;
    /* -26 statt -22 und unten 8 px mehr Zeile (siehe .mdish): bei 16 px Rand stand der Ring des
       Knopfs 2 px auf der Haarlinie der nächsten Zeile (gemessen 10.10., Tablet und Telefon). */
    right: -2px; bottom: auto; top: calc(var(--ka-pad) + var(--ka-foto) - 26px);
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    margin: 0; padding: 0; gap: 1px;
    border: 3px solid var(--bg); border-radius: 999px;
    background: var(--accent); color: var(--on-accent);
    font: 600 1.02rem/1 var(--ka-sans); font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--text) 55%, transparent);
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.has-cart .page-menu .mdish__add:hover { background: var(--accent-strong); color: var(--on-accent); border-color: var(--bg); }
.has-cart .page-menu .mdish__add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.has-cart .page-menu .mdish:not(:has(.mdish__photo:not(.ph-tile))) .mdish__head { grid-template-columns: minmax(0, max-content) minmax(18px, 1fr) auto auto; }
.has-cart .page-menu .mdish:not(:has(.mdish__photo:not(.ph-tile))) .mdish__add {
    position: static; align-self: center;
    margin: -8px 0 -8px 4px; border-width: 0; box-shadow: none;
}
.page-menu .mdish__add-plus { font-size: 1.1em; line-height: 1; }
.page-menu .mdish__add-qty { font-weight: 600; font-size: .92em; }

/* Die Leiste auf dem Breitbild (auf dem Telefon trägt die Daumenleiste den Korb): eine
   schwebende Kapsel in der Mitte statt eines Bands über die ganze Breite. */
.page-menu .cartbar {
    left: 50%; right: auto; bottom: 18px; transform: translateX(-50%);
    width: min(720px, calc(100% - 32px));
    padding: 10px 10px 10px 22px;
    border: 1px solid var(--line-soft); border-radius: 999px;
    background: color-mix(in oklab, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-xl);
}
.page-menu .cartbar__inner { max-width: none; padding: 0; gap: 14px; }
.page-menu .cartbar__count { font: 500 .92rem var(--ka-sans); }
.page-menu .cartbar__sum { color: var(--text); font-weight: 600; }
.page-menu .cartbar .cartbar__go { border-radius: 999px; }

/* Der Optionsdialog: die Grössengruppe als Reihe von Kapseln — der Kreis des Radios bleibt für
   die Tastatur da, ist aber unsichtbar; die gewählte Kapsel trägt die Hausfarbe. Die übrigen
   Gruppen («Fleisch wählen», «Extras») bleiben, wie das Grundblatt sie setzt. */
.page-menu .pdgroup__reihe { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.page-menu .pdopt--groesse {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
    font: 500 .92rem/1 var(--ka-sans); color: var(--text);
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.page-menu .pdopt--groesse .pdopt__input {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; opacity: .01; overflow: hidden;
}
.page-menu .pdopt--groesse .pdopt__text { flex: 0 0 auto; }
.page-menu .pdopt--groesse .pdopt__price { color: var(--muted); font-variant-numeric: normal; }
.page-menu .pdopt--groesse:hover { border-color: var(--text); }
.page-menu .pdopt--groesse:has(.pdopt__input:checked) {
    border-color: var(--accent); background: var(--accent); color: var(--on-accent);
}
.page-menu .pdopt--groesse:has(.pdopt__input:checked) .pdopt__price { color: var(--on-accent); }
.page-menu .pdopt--groesse:has(.pdopt__input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Der Fuss des Dialogs: Wort und Summe bleiben auf EINER Zeile, auch auf 390 px («15,90 €» brach um). */
.page-menu .proddialog__hinzu { flex-wrap: nowrap; gap: 10px; }
.page-menu .proddialog__total { white-space: nowrap; }

/* ── 9 · Die Legende ───────────────────────────────────────────────────────────────────────── */

.page-menu .legend {
    margin-top: clamp(40px, 6vw, 80px);
    padding: clamp(22px, 3vw, 36px) 0 clamp(40px, 6vw, 72px);
    border-top: 1px solid var(--ka-kapitel);
}
.page-menu .legend__grid { padding: 0; gap: 24px 48px; }
.page-menu .legend__grid h4 {
    margin: 0 0 10px; font: 500 .75rem/1.4 var(--ka-sans); color: var(--muted);
}
.page-menu .legend__grp { margin: 0; }
.page-menu .legend__grp > ul { margin: 0; padding: 0; border: 0; columns: 2; column-gap: 28px; }
.page-menu .legend__grid ul { font: 400 .84rem/1.5 var(--ka-sans); color: var(--muted); }
.page-menu .legend__grid li { display: flex; gap: 8px; break-inside: avoid; margin-bottom: 3px; }
.page-menu .legend__grid b { flex: 0 0 1.7em; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-menu .legend > .muted { margin: 20px 0 0; max-width: 62em; font: 400 .9rem/1.55 var(--ka-sans); }
.page-menu .legend > .muted + .muted { margin-top: 6px; }
.page-menu .m-halal-note { max-width: 62em; margin: clamp(24px, 3vw, 40px) 0 0; font-size: .9rem; }

/* ── 10 · Leer ─────────────────────────────────────────────────────────────────────────────── */

.page-menu .m-empty { padding: clamp(40px, 6vw, 72px) 0; font-family: var(--ka-serif); font-style: normal; font-size: 1.08rem; }

/* ── 11 · Telefon ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .page-menu .laden__raster { display: block; }
}
@media (max-width: 560px) {
    .page-menu, .page-menu .mdish, .page-menu .laden__karte .mdish { --ka-foto: 92px; --ka-pad: 16px; --ka-r: 12px; --ka-r-gross: 16px; }
    .page-menu .menu-hero { padding-top: 14px; }
    .page-menu .hero__title { font-size: clamp(2.9rem, 15vw, 4rem); }
    .page-menu .ka-deckel { gap: 18px; }
    .page-menu .abholband { padding-left: 16px; padding: 12px 0; }
    .page-menu .mdish { column-gap: 14px; padding: var(--ka-pad) 0 calc(var(--ka-pad) + 8px); }
    .page-menu .mdish__name { font-size: 1.08rem; }

    /* «Am beliebtesten»: zwei Kacheln je Bildschirm (46 %) statt anderthalb (62 %) und ein
       quadratisches Bild: 90 px weniger Deckel, das erste Gericht der Karte rückt über den Falz.
       Der Name höchstens zwei Zeilen — eine dritte stünde unter dem Falz der nächsten Kachel. */
    .page-menu .beliebt__spur { grid-auto-columns: 46%; gap: 12px; }
    .page-menu .beliebtkarte__foto { aspect-ratio: 1 / 1; }
    .page-menu .beliebtkarte__name {
        font-size: .95rem; margin-top: 8px;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    }
    .page-menu .legend__grp > ul { columns: 1; }
    .page-menu .menu-tools { padding: 4px 0; }
    .page-menu .m-diet .chip { padding: 0 10px; font-size: .84rem; }
    .page-menu .m-allergen { margin-left: 0; flex: 1 1 100%; }
    .page-menu .m-allergen[open] { margin-top: 0; border-top: 0; }
    .page-menu a.chip--cat { padding: 16px 12px 14px; }
    .page-menu .ladenkopf__mark,
    :root[data-theme="dark"] .page-menu .ladenkopf__mark--dunkel { display: none; }
    .page-menu .ladenkopf .ladenkopf__name { font-size: .88rem; }

    /*
     * ⛔ AUF DEM TELEFON FÄNGT DIE KARTE MIT ESSEN AN — GEMESSEN, NICHT GEAHNT (24.09.2026).
     *    Bei 390 × 844 stand die erste Gerichtkachel auf y = 836. Sichtbar sind 772 (die
     *    Daumenleiste nimmt 72), das Gericht lag also unter dem Falz, und davor lagen:
     *    Seitenkopf 120 · Ladenkopf 59 · Deckel 423 (davon Tafel 221) · Abholband 113.
     *    Der Gast, der am Tisch den Kachelcode scannt, sah damit KEIN EINZIGES GERICHT, ohne
     *    zu wischen — auf der Seite, für die dieses Produkt gebaut ist.
     *
     * ⚠️ DER DECKEL BLEIBT EIN DECKEL. Er hört nur auf, der ganze erste Bildschirm zu sein:
     *    die Tafel wird flacher (16/10 → 21/9, gemessen 221 px → 153 px), und «Am beliebtesten»
     *    rückt mit Rand und Fuge näher an seine Kacheln. Zusammen rund 88 px, gemessen — genug,
     *    dass die erste Kachel über dem Falz beginnt. Auf dem Rechner ändert sich nichts.
     */
    .page-menu .ka-deckel__bild { aspect-ratio: 21 / 9; }
    .page-menu .beliebt { margin-top: 20px; }
    .page-menu .beliebt__kopf { margin-bottom: 10px; padding-bottom: 8px; }

    /*
     * ⚠️ UND DIE KACHELN VOR DIE RANDNOTIZ. Das Abholband ist 113 px hoch und stand zwischen
     *    Deckel und erster Kachel; wo abgeholt wird, liest man, NACHDEM man gesehen hat, was es
     *    gibt. Nur auf dem Telefon und nur im Bild: die Reihenfolge im Quelltext bleibt, ein
     *    Vorlese-Programm hört die Abholung weiterhin vor der Liste. `order: 3` als Vorgabe für
     *    alle Kinder, damit die beiden Ausnahmen nach vorne rücken statt ans Ende.
     */
    .page-menu main > .wrap { display: flex; flex-direction: column; }
    .page-menu main > .wrap > * { order: 3; }
    .page-menu main > .wrap > .beliebt { order: 1; }
    .page-menu main > .wrap > .abholband { order: 2; }
}

/* ── 12 · Bewegung ─────────────────────────────────────────────────────────────────────────── */

/* Eine Rubrik kommt beim Hereinscrollen die letzten Pixel herauf (Scroll-Timeline, kein Skript);
   die Tafel eines Gerichts antwortet dem Zeiger mit einer Spur Grösse. Beides nur ohne den
   Wunsch nach weniger Bewegung, beides ohne `opacity: 0`. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .page-menu .mcat {
            animation: ka-ankunft linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 26%;
        }
    }
    .page-menu .mdish__photo { transition: transform .55s var(--ka-kurve); }
    .page-menu .mdish:hover .mdish__photo { transform: scale(1.035); }
    .page-menu .beliebtkarte__foto { transition: transform .6s var(--ka-kurve); }
    .page-menu .beliebtkarte__link:hover .beliebtkarte__foto { transform: scale(1.03); }
    .has-cart .page-menu .mdish__add:hover { transform: scale(1.06); }
}
@keyframes ka-ankunft {
    from { opacity: .3; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .page-menu .m-diet .chip::after,
    .page-menu .ka-inhalt a,
    .page-menu .laden__seite a.chip--cat { transition: none; }
}

/* ═══ Das Aktions-Etikett (D-216) ══════════════════════════════════════════════════════════
   Der runde Aufkleber auf der Ecke des Fotos, und die durchgestrichene Zahl daneben.

   ⛔ ES SITZT IN DERSELBEN RASTERZELLE WIE DAS FOTO (`grid-area: foto`) und nicht absolut
      positioniert. Absolut hiesse, die Lage des Fotos ein zweites Mal zu beschreiben — und sie
      ändert sich: `.mdish` ist mal zweispaltig, mal einspaltig, und die Aufbauten (Ofen, Tatami)
      verschieben das Bild. In der Zelle folgt das Etikett dem Foto, wohin es auch geht.

   ⛔ OHNE FOTO KEIN AUFKLEBER, SONDERN EINE PILLE. Das Grundblatt blendet die Buchstabenkachel
      aus und schaltet die Zeile einspaltig (siehe oben); ein Kreis hinge dann im Leeren. Die
      Aussage trägt in diesem Fall der durchgestrichene Preis, und das Etikett wird zu einer
      flachen Marke neben dem Namen.

   ⚠️ NUR CSS, KEINE BEWEGUNG. Kein Aufblättern, kein Puls, kein Schatten mit Versatz: die
      Vorlage des Betreibers zeigt einen Aufkleber mit umgeschlagener Ecke, und genau dieser
      Effekt ist der, der auf einem Telefon als Erstes billig aussieht. Rund, flach, lesbar. */

.page-menu .mdish { --ak-rot: #c0392b; }

.aktion-etikett {
    grid-area: foto;
    place-self: start end;
    z-index: 2;
    margin: -6px -6px 0 0;
    display: grid; place-items: center; align-content: center;
    min-width: 46px; min-height: 46px; padding: 4px 6px;
    border-radius: 999px;
    background: var(--ak-rot, #c0392b);
    color: #fff;
    /* Ein Ring in der Blattfarbe trennt den Kreis vom Foto, ohne Schlagschatten. */
    box-shadow: 0 0 0 2px var(--paper, #fff);
    text-align: center;
    pointer-events: none;
}

/* Die Akzentfarbe des Hauses — für die ruhigen Aufbauten, in denen Signalrot ein Fleck wäre. */
.aktion-etikett--haus { background: var(--accent); }

.aktion-etikett__zahl {
    font-weight: 700;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 1.1;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Das Wort des Hauses, klein unter der Zahl. Zwei Zeilen sind das Höchste, was in einen Kreis
   passt, der neben einem 84-px-Foto nicht grösser werden darf als das Foto selbst. */
.aktion-etikett__wort {
    font-size: 8px;
    line-height: 1.15;
    letter-spacing: .06em;
    text-transform: uppercase;
    max-width: 8ch;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Ohne Foto: flache Marke neben dem Namen statt eines Kreises im Nichts. */
.page-menu .mdish:not(:has(.mdish__photo:not(.ph-tile))) .aktion-etikett {
    grid-area: etikett;
    place-self: start start;
    margin: 0 0 6px;
    min-width: 0; min-height: 0;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: none;
}
.page-menu .mdish:not(:has(.mdish__photo:not(.ph-tile))) .aktion-etikett__wort { display: none; }

/* Der alte Preis. Gedämpft und kleiner, damit der Blick auf dem neuen landet — aber lesbar,
   weil er die Grundlage der Aussage ist (§ 11 PAngV: der Bezugspreis muss erkennbar sein). */
.page-menu .mdish__liste {
    margin-right: .35em;
    color: var(--ink-weak, #6b7280);
    font-weight: 400;
    font-size: .88em;
    text-decoration-thickness: 1px;
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   13 · DIE KARTE WIE EINE BESTELL-APP (D-230, 10.10.2026)

   Betreiber mit vier Aufnahmen von Lieferando (Burger King): «böyle yapmanı istiyorum, aynısı
   değil ama referans al … arka plan rengini de mat koyu gri yap». Übernommen ist die FORM:
     · ein mattes, neutrales Dunkelgrau als Grund (kein Blauschwarz, kein Braun), Karten eine
       Stufe heller, Linien als Weiss mit wenig Deckkraft;
     · oben ein breites Fotoband ohne Schrift darauf, darunter Titel und Worte der Küche;
     · die Suche als lange Kapsel, die Rubriken als Kapseln in EINER Reihe, die gewählte weiss;
     · jedes Gericht eine Karte: Name fett, Preis darunter, Beschreibung, das Foto rechts, der
       «+» als Ring auf der oberen Ecke des Fotos; zwei Karten nebeneinander, wo Platz ist;
     · «Am beliebtesten» als waagrechte Karten (Foto links, Name und Preis rechts).
   Dieser Abschnitt steht am Ende und überstimmt die Abschnitte 2, 4–8 dort, wo die Form sich
   ändert; die Verträge (Klassen, Markup der Zeile, Reihenfolge) bleiben.

   ⚠️ DAS GRAU GILT NUR IM DUNKEL. Die Speisekarte öffnet seit D-230 dunkel (layout.blade.php);
      schaltet der Gast auf hell, steht die Karte auf Papier — dieselben Formen, helle Flächen.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] body.page-menu {
    --bg: #1C1C1E;
    --surface: #2A2A2D;
    --plate: #2A2A2D;
    --text: #F3F3F4;
    --muted: #A5A6AA;
    --line: rgba(255, 255, 255, .14);
    --line-soft: rgba(255, 255, 255, .08);
    --ka-kapitel: rgba(255, 255, 255, .22);
    background: var(--bg);
}
.page-menu { --ka-karte: var(--surface); --ka-kapsel: color-mix(in oklab, var(--text) 9%, transparent); --ka-plus: var(--accent); }
/* Der «+»-Ring im Grau: die Hausfarbe, zur Hälfte mit Weiss gemischt. Ein dunkles Blau (Akropolis) stand
   sonst kaum sichtbar auf #2A2A2D (gemessen live, 10.10.2026). Gefüllt (mit Menge) bleibt es die Hausfarbe. */
:root[data-theme="dark"] body.page-menu { --ka-plus: color-mix(in oklab, var(--accent) 50%, #FFFFFF); }

/* ── 13.1 Das Fotoband: über die ganze Breite, ohne Schrift darauf ───────────────────────── */
@media (min-width: 600px) {
    .page-menu .ka-deckel--bild { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.2vw, 28px); }
    .page-menu .ka-deckel--bild .ka-deckel__bild {
        order: -1; aspect-ratio: auto; height: clamp(260px, 30vw, 440px); min-height: 0;
        border-radius: 18px; box-shadow: none;
    }
}
.page-menu .ka-inhalt { display: none; }
.page-menu .menu-hero { padding-bottom: clamp(10px, 1.4vw, 18px); }
.page-menu .hero__title {
    font-family: var(--ka-sans); font-weight: 800;
    font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.05; letter-spacing: -.02em;
}
.page-menu .menu-lede { font-size: .98rem; max-width: 52em; }

/* ── 13.2 Suche als lange Kapsel, darunter Ernährung und Allergene ──────────────────────── */
.page-menu .menu-tools { border: 0; padding: 0; margin-top: clamp(14px, 2vw, 24px); }
.page-menu .m-bar { gap: 10px 8px; }
.page-menu .searchbox { flex: 1 1 100%; order: -1; position: relative; }
.page-menu .searchbox .searchbox__btn {
    position: absolute; left: 6px; top: 50%; translate: 0 -50%; z-index: 1;
    border: 0; background: transparent; color: var(--accent);
}
.page-menu .searchbox .searchbox__input,
.page-menu .searchbox.is-open .searchbox__input {
    flex: 1 1 auto; width: 100%; opacity: 1; margin: 0;
    min-height: 54px; padding: 0 22px 0 54px;
    border: 1px solid var(--line); border-radius: 999px;
    background: transparent; color: var(--text); font: 400 1rem var(--ka-sans);
}
.page-menu .searchbox .searchbox__input:focus { border-color: var(--accent); box-shadow: none; }

/* ── 13.3 Die Rubriken: Kapseln in einer Reihe, klebend, auch am Schreibtisch ─────────────── */
@media (min-width: 861px) {
    .page-menu .laden__raster { display: block; }
    .page-menu .laden__raster .laden__seite {
        display: block; position: sticky; top: var(--ladenkopf-h, 0px); z-index: 30;
        max-height: none; overflow: visible;
    }
    .page-menu .laden__raster .laden__seite .catbar {
        position: static; background: color-mix(in oklab, var(--bg) 94%, transparent);
        -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px);
        border-bottom: 1px solid var(--line-soft);
    }
    .page-menu .laden__raster .laden__seite .catbar__inner { display: flex; }
    .page-menu .laden__raster .laden__seite .catnav {
        flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    }
    .page-menu .laden__raster .laden__seite a.chip--cat { display: inline-flex; border-left: 0; }
    .page-menu .laden__raster .laden__seite .chip__zahl { display: none; }
}
.page-menu .catbar { padding: 10px 0; }
/* Nur rechts ausblenden: links schnitt der Verlauf die gewählte erste Kapsel an (gemessen 10.10., Telefon). */
.page-menu .catnav { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
.page-menu .catnav { gap: 6px; }
.page-menu a.chip--cat,
.page-menu .laden__raster .laden__seite a.chip--cat {
    display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border: 0; border-radius: 999px; background: transparent;
    font: 700 .9rem/1 var(--ka-sans); letter-spacing: 0; text-transform: none; white-space: nowrap;
    color: var(--text);
}
.page-menu a.chip--cat::before,
.page-menu a.chip--cat::after,
.page-menu .laden__raster .laden__seite a.chip--cat::before,
.page-menu .laden__raster .laden__seite a.chip--cat::after { content: none; display: none; }
.page-menu a.chip--cat:hover { background: var(--ka-kapsel); color: var(--text); }
.page-menu a.chip--cat.is-active,
.page-menu .laden__raster .laden__seite a.chip--cat.is-active {
    background: var(--text); color: var(--bg); font-weight: 700; border-left: 0;
}

/* ── 13.4 Rubrikkopf und Karten ──────────────────────────────────────────────────────────── */
.page-menu .mcat, .page-menu.page-laden .mcat { padding: clamp(26px, 3vw, 40px) 0 0; }
.page-menu .mcat__kopf { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.page-menu .mcat__title { font-family: var(--ka-sans); font-weight: 800; font-size: clamp(1.45rem, 2.2vw, 1.85rem); letter-spacing: -.01em; }
.page-menu .mcat__grid, .page-menu .laden__karte .mcat__grid { gap: 14px; }

/* Jede Zeile eine Karte, und immer in der Stapelform: Name, Preis, Beschreibung, Grössen, Zeichen. */
.page-menu .mcat__grid .mdish {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text foto";
    column-gap: 16px; align-items: start;
    padding: 16px; border: 0; border-radius: 14px; background: var(--ka-karte);
}
.page-menu .mcat__grid .mdish:not(:has(.mdish__photo:not(.ph-tile))) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "etikett" "text"; }
.page-menu .mcat__grid .mdish .mdish__head { display: contents; }
.page-menu .mcat__grid .mdish .mdish__lead { display: none; }
.page-menu .mcat__grid .mdish .mdish__body {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0; align-items: start;
}
.page-menu .mcat__grid .mdish .mdish__name { grid-area: 1 / 1; font: 700 1.04rem/1.3 var(--ka-sans); letter-spacing: 0; }
.page-menu .mcat__grid .mdish .mdish__price {
    grid-area: 2 / 1; margin: 4px 0 0; text-align: left; white-space: normal;
    font: 500 .96rem/1.35 var(--ka-sans); color: var(--text); font-variant-numeric: normal;
}
.page-menu .mcat__grid .mdish .mdish__desc { grid-area: 3 / 1; margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
.page-menu .mcat__grid .mdish .mdish__groessen { grid-area: 4 / 1; }
.page-menu .mcat__grid .mdish .mdish__tags { grid-area: 5 / 1; margin-top: 10px; }
.page-menu .mcat__grid .mdish .mdish__photo { width: 148px; height: 112px; border-radius: 12px; }

/* Der «+»: ein Ring mit dem Zeichen in der Hausfarbe, auf der oberen rechten Ecke des Fotos — ohne
   Foto oben rechts in der Karte. Mit Menge füllt er sich. */
/* ⚠️ DIE LANGE KETTE IST NÖTIG: die Zeile ohne Foto setzt den Knopf mit
      `.mdish:not(:has(.mdish__photo:not(.ph-tile))) .mdish__body .mdish__add` (0,7,0) statisch in
      die Preiszeile; dieser Wähler muss beide Fälle mit (0,8,0) übertreffen. */
.has-cart .page-menu .mcat__grid .mdish:is(:has(.mdish__photo:not(.ph-tile)), :not(:has(.mdish__photo:not(.ph-tile)))) .mdish__body .mdish__add {
    position: absolute; z-index: 2; inset: 8px 8px auto auto;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
    border: 1.5px solid var(--ka-plus); border-radius: 999px;
    background: var(--ka-karte); color: var(--ka-plus); box-shadow: none;
    font: 600 1.15rem/1 var(--ka-sans);
}
.has-cart .page-menu .mcat__grid .mdish:is(:has(.mdish__photo:not(.ph-tile)), :not(:has(.mdish__photo:not(.ph-tile)))) .mdish__body .mdish__add:has(.mdish__add-qty:not(:empty)),
.has-cart .page-menu .mcat__grid .mdish:is(:has(.mdish__photo:not(.ph-tile)), :not(:has(.mdish__photo:not(.ph-tile)))) .mdish__body .mdish__add:hover { background: var(--accent); color: var(--on-accent); }
.has-cart .page-menu .mcat__grid .mdish:not(:has(.mdish__photo:not(.ph-tile))) .mdish__body { padding-right: 52px; }
.has-cart .page-menu .mcat__grid .mdish:has(.mdish__add) .mdish__photo.platzhalter { padding-bottom: 0; }

.page-menu .mcat__grid .mdish.is-soldout { opacity: .55; }

@media (max-width: 560px) {
    .page-menu .mcat__grid .mdish { padding: 14px; column-gap: 12px; }
    .page-menu .mcat__grid .mdish .mdish__photo { width: 112px; height: 96px; }
    .page-menu .mcat__grid .mdish .mdish__name { font-size: 1rem; }
}

/* ── 13.5 «Am beliebtesten»: waagrechte Karten ───────────────────────────────────────────── */
.page-menu .beliebt__kopf { border-bottom: 0; padding-bottom: 0; }
.page-menu .beliebt .beliebt__titel { font-family: var(--ka-sans); font-weight: 800; font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
.page-menu .beliebt__spur { grid-auto-columns: minmax(300px, calc((100% - 28px) / 3)); gap: 14px; }
/* Das Grundblatt stellt den Streifen ab 861 px als Raster aus vier gleich breiten Spalten (`flex-direction:
   column` an der Karte). Für die waagrechte Karte: drei Spalten, die Karte ein Raster. */
@media (min-width: 861px) {
    .page-menu .beliebt__spur {
        grid-auto-flow: column; grid-template-columns: none;
        grid-auto-columns: calc((100% - 28px) / 3); overflow-x: auto; scroll-snap-type: x mandatory;
    }
    .page-menu .beliebtkarte { display: grid; scroll-snap-align: start; }
}
.page-menu .beliebtkarte {
    position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 14px;
    padding: 14px; border-radius: 14px; background: var(--ka-karte);
}
.page-menu .beliebtkarte__link { display: contents; }
.page-menu .beliebtkarte__bild { grid-row: 1 / 3; grid-column: 1; border-radius: 12px; }
.page-menu .beliebtkarte__foto { width: 130px; height: 100px; aspect-ratio: auto; }
.page-menu .beliebtkarte__name { grid-column: 2; align-self: start; margin: 2px 0 0; font: 700 1rem/1.3 var(--ka-sans); color: var(--text); }
.page-menu .beliebtkarte__fuss { grid-column: 2; align-self: start; margin: 6px 0 0; }
.page-menu .beliebtkarte__preis { color: var(--text); font: 500 .95rem var(--ka-sans); }
.page-menu .beliebtkarte__rang { left: 6px; top: 6px; padding: 6px 8px 5px; }
@media (max-width: 560px) {
    .page-menu .beliebt__spur { grid-auto-columns: 86%; }
    .page-menu .beliebtkarte { grid-template-columns: 104px minmax(0, 1fr); }
    .page-menu .beliebtkarte__foto { width: 104px; height: 88px; }
}

.page-menu .legend { border-top-color: var(--line-soft); }

/* ── 13.7 Der Ladenkopf unter dem Abholband (D-230) ────────────────────────────────────────
   Er klebt auf der Speisekarte nicht mehr; oben klebt die Leiste der Rubriken, und zwar ganz
   oben (`--ladenkopf-h: 0`). Er steht als Karte im Blatt: dieselbe Fläche wie die Gerichte. */
body.page-menu.page-laden { --ladenkopf-h: 0px; --laden-sprung: 72px; }
.page-menu .ladenkopf {
    position: static; z-index: auto;
    margin: 6px 0 0; border: 0; border-radius: 14px;
    background: var(--ka-karte);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.page-menu .ladenkopf .ladenkopf__inner { max-width: none; padding: 12px 16px; min-height: 0; }

/* ── 13.8 Abholen oder liefern, und was es kostet (D-232, 11.10.2026) ────────────────────────
   Nach Lieferando: eine Kapsel mit zwei Hälften (Zeichen, Wort, Zeit), die gewählte dunkler mit
   Rand; daneben die Fakten mit Zeichen, durch Punkte getrennt. Im Ladenkopf unter Marke und Status. */
.page-menu .bestellwahl {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
    padding: 0 16px 14px;
}
.page-menu .bestellwahl__wahl {
    display: inline-flex; gap: 4px; padding: 4px;
    border-radius: 999px; background: color-mix(in oklab, var(--text) 10%, transparent);
}
.page-menu .bestellwahl__knopf {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 6px 22px 6px 16px;
    border: 1px solid transparent; border-radius: 999px;
    background: transparent; color: var(--text); cursor: pointer; text-align: left;
    font: inherit;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.page-menu .bestellwahl__knopf[aria-pressed="true"] {
    background: var(--bg); border-color: color-mix(in oklab, var(--text) 22%, transparent);
}
.page-menu .bestellwahl__knopf:focus-visible { outline: 2px solid var(--ka-plus, var(--accent)); outline-offset: 2px; }
.page-menu .bestellwahl__ic { flex: 0 0 auto; color: var(--ka-plus, var(--accent)); }
.page-menu .bestellwahl__text { display: grid; line-height: 1.2; }
.page-menu .bestellwahl__wort { font: 700 .95rem/1.2 var(--ka-sans); }
.page-menu .bestellwahl__zeit { font: 500 .8rem/1.3 var(--ka-sans); color: var(--muted); }
/* Ohne cart.js tun die Knöpfe nichts — dann sind sie nicht bedienbar, die Zeiten bleiben lesbar. */
html:not(.has-cart) .page-menu .bestellwahl__knopf { pointer-events: none; cursor: default; }

.page-menu .bestellwahl__fakten {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0;
    font: 500 .9rem/1.4 var(--ka-sans); color: var(--text);
}
.page-menu .bestellwahl__fakt { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 561px) {
    .page-menu .bestellwahl__fakt + .bestellwahl__fakt::before {
        content: "•"; margin: 0 10px; color: var(--muted);
    }
}
.page-menu .bestellwahl__fakt--leise { color: var(--muted); font-weight: 400; font-size: .82rem; }
.page-menu .bestellwahl__fic { color: var(--muted); }

@media (max-width: 560px) {
    .page-menu .bestellwahl { padding: 0 12px 12px; gap: 10px; }
    .page-menu .bestellwahl__wahl { display: flex; width: 100%; }
    .page-menu .bestellwahl__knopf { flex: 1 1 0; justify-content: center; padding: 6px 10px; }
    .page-menu .bestellwahl__fakten { font-size: .85rem; gap: 6px 16px; }
}

/* ── 13.9 Die Karte des Hauses, nicht die einer Bestell-App (D-237, 11.10.2026) ───────────────
   Betreiber nach D-230: «aynı Lieferando gibi yapmışsın, çok benziyor … biraz değişiklik yapalım mı».
   Das Gerüst bleibt (Karten, Suche, Wahl Abholung/Lieferung); was nach Lieferando aussah, waren
   die Kennzeichen: fette Grotesk überall, die weisse Kapsel als gewählte Rubrik, der dünne
   «+»-Ring oben auf dem Foto. Jetzt trägt die Karte die Schrift des Hauses (`--serif`, auf der
   Bühne Fraunces) für Titel, Rubriken, Namen und Preise, die Hausfarbe an Preis, Strich und
   Knopf — und der «+» ist ein gefülltes Feld unten am Foto. */

/* Titel und Rubriken in der Serif des Hauses, ohne Fett; unter der Rubrik eine Haarlinie. */
.page-menu .hero__title {
    font-family: var(--ka-serif); font-weight: 400;
    font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.025em;
}
.page-menu .mcat__kopf {
    padding-bottom: 12px; margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.page-menu .mcat__title {
    font-family: var(--ka-serif); font-weight: 400;
    font-size: clamp(1.75rem, 2.8vw, 2.4rem); letter-spacing: -.015em;
}
.page-menu .beliebt .beliebt__titel { font-family: var(--ka-serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }

/* Name und Preis in der Serif; der Preis in der Hausfarbe (im Dunkel aufgehellt, `--ka-plus`). */
.page-menu .mcat__grid .mdish .mdish__name,
.page-menu .beliebtkarte__name {
    font-family: var(--ka-serif); font-weight: 500; font-size: 1.14rem; letter-spacing: -.005em;
}
.page-menu .mcat__grid .mdish .mdish__price,
.page-menu .beliebtkarte__preis {
    font-family: var(--ka-serif); font-weight: 500; font-size: 1.06rem;
    color: var(--ka-plus, var(--accent-ink));
}
.page-menu .mcat__grid .mdish .mdish__price .mdish__ab { color: var(--muted); }
:root:not([data-theme="dark"]) .page-menu { --ka-plus: var(--accent-ink); }

/* Die Rubriken: Wort mit Strich in der Hausfarbe statt der weissen Kapsel. */
.page-menu a.chip--cat,
.page-menu .laden__raster .laden__seite a.chip--cat {
    border-radius: 0; padding: 0 14px; color: var(--muted); font-weight: 600;
}
.page-menu a.chip--cat:hover { background: transparent; color: var(--text); }
.page-menu a.chip--cat.is-active,
.page-menu .laden__raster .laden__seite a.chip--cat.is-active {
    background: transparent; color: var(--text);
    box-shadow: inset 0 -2px 0 var(--ka-plus, var(--accent));
}

/* Das Foto quadratisch und etwas grösser; der «+» ein gefülltes Feld in der Hausfarbe an der
   unteren rechten Ecke des Fotos — ohne Foto unten rechts in der Karte. */
.page-menu .mcat__grid .mdish { --ka-bild: 128px; }
.page-menu .mcat__grid .mdish .mdish__photo { width: var(--ka-bild); height: var(--ka-bild); border-radius: 12px; }
.has-cart .page-menu .mcat__grid .mdish:is(:has(.mdish__photo:not(.ph-tile)), :not(:has(.mdish__photo:not(.ph-tile)))) .mdish__body .mdish__add {
    inset: calc(16px + var(--ka-bild) - 38px) 10px auto auto;
    width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: var(--accent); color: var(--on-accent);
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6);
    font-size: 1.3rem;
}
.has-cart .page-menu .mcat__grid .mdish:not(:has(.mdish__photo:not(.ph-tile))) .mdish__body .mdish__add {
    inset: auto 12px 12px auto;
}
.has-cart .page-menu .mcat__grid .mdish:is(:has(.mdish__photo:not(.ph-tile)), :not(:has(.mdish__photo:not(.ph-tile)))) .mdish__body .mdish__add:hover {
    background: var(--accent-strong); color: var(--on-accent);
}
.has-cart .page-menu .mcat__grid .mdish:not(:has(.mdish__photo:not(.ph-tile))) .mdish__body { padding-right: 0; padding-bottom: 36px; }

@media (max-width: 560px) {
    .page-menu .mcat__grid .mdish { --ka-bild: 108px; }
    .page-menu .mcat__grid .mdish .mdish__name { font-size: 1.06rem; }
    .has-cart .page-menu .mcat__grid .mdish:is(:has(.mdish__photo:not(.ph-tile)), :not(:has(.mdish__photo:not(.ph-tile)))) .mdish__body .mdish__add {
        inset: calc(14px + var(--ka-bild) - 38px) 8px auto auto;
    }
}
/* Das Zeichen ohne Foto (D-229): mit Knopf rückt sein Inhalt über das Feld, sonst stünde der «+» auf dem
   Namen des Hauses (gemessen 11.10. am Tatami-Haus, «Ghien Temp…»). */
.has-cart .page-menu .mcat__grid .mdish:has(.mdish__add) .mdish__photo.platzhalter { padding-bottom: 40px; }

/* ── 13.10 Ruhiger Kopf am Telefon und überall (D-237, 11.10.2026) ──────────────────────────
   Betreiber mit zwei Aufnahmen vom Telefon (Akropolis): «Speisekarte altındaki uzun yazıyı ya kısalt
   ya da kaldır» und zum Bestellblock «çok karışık, yazıları kısalt, mobilde düzgün dursunlar».
     · Die Worte der Küche unter dem Titel: höchstens zwei Zeilen (der volle Text bleibt im Dokument,
       Vorleser lesen ihn ganz).
     · Das Abholband verschwindet, wenn das Skript läuft: was es sagt, steht jetzt im Ladenkopf (Zeit
       in der Wahl Abholung/Lieferung, Adresse in «Details», der Weg über den «+»). Läuft gerade ein
       Annahmestopp, bleibt sein Satz stehen — das ist eine Auskunft, die sonst nirgends steht.
     · Im Ladenkopf am Telefon: kein zweites «Bestellen & abholen» über der Wahl, und der Status
       bricht um statt mit «öffnet…» abgeschnitten zu werden. */
.page-menu .menu-lede {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.has-cart .page-menu .abholband__was,
.has-cart .page-menu .menu-order--js { display: none; }
.has-cart .page-menu .abholband:not(:has(.abholband__hinweis:not(.menu-order))) { display: none; }

@media (max-width: 560px) {
    .page-menu .ladenkopf .ladenkopf__name { display: none; }
    .page-menu .ladenkopf__meta { white-space: normal; overflow: visible; font-size: .85rem; line-height: 1.35; }
    .page-menu .ladenkopf .ladenkopf__inner { gap: 10px; padding: 12px; }
    .page-menu .bestellwahl__knopf { min-height: 50px; padding: 6px 8px; gap: 8px; }
    .page-menu .bestellwahl__wort { font-size: .9rem; }
    .page-menu .bestellwahl__zeit { font-size: .75rem; }
}

/* ── 13.11 Die Wahl ändert die Zeile darunter (D-238, 11.10.2026) ────────────────────────────
   «Abholung»: Adresse und «ohne Mindestbestellwert». «Lieferung»: Mindestwert, Gebühr und die
   Postleitzahl, die sofort antwortet. Nur mit Skript (`.has-cart`) wird umgeschaltet; ohne Skript
   stehen beide Zeilen da und das Feld fehlt. */
.has-cart .page-menu .bestellwahl[data-art="abholung"] .bestellwahl__fakten--lieferung,
.has-cart .page-menu .bestellwahl[data-art="abholung"] .bestellwahl__plz,
.has-cart .page-menu .bestellwahl[data-art="lieferung"] .bestellwahl__fakten--abholung { display: none; }
html:not(.has-cart) .page-menu .bestellwahl__plz { display: none; }

.page-menu .bestellwahl__plz {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0;
    flex: 1 1 100%;
}
.page-menu .bestellwahl__plzfeld {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 999px; background: transparent;
}
.page-menu .bestellwahl__plzfeld:focus-within { border-color: var(--ka-plus, var(--accent)); }
.page-menu .bestellwahl__plzfeld input {
    width: 15ch; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
    font: 500 .92rem/1.2 var(--ka-sans); letter-spacing: .02em;
}
.page-menu .bestellwahl__plzfeld input::placeholder { color: var(--muted); letter-spacing: 0; }
.page-menu .bestellwahl__plznote { font: 500 .88rem/1.4 var(--ka-sans); color: var(--muted); }
.page-menu .bestellwahl__plznote.is-ja { color: var(--enamel); }
.page-menu .bestellwahl__plznote.is-nein { color: var(--wine); }
.page-menu .bestellwahl__fakten--abholung .bestellwahl__fakt + .bestellwahl__fakt::before { content: none; }
.page-menu .bestellwahl__fakten--abholung { gap: 6px 18px; }

@media (max-width: 560px) {
    .page-menu .bestellwahl__plzfeld { flex: 1 1 100%; }
    .page-menu .bestellwahl__plzfeld input { width: 100%; }
}