/*
 * Speisekarte — nur Struktur.
 *
 * Keine Farben, keine Schriften, keine Bilder. Das Erscheinungsbild
 * kommt später und setzt auf diese Klassen auf. Was hier steht, ist
 * das, was die Karte am Handy lesbar macht: Breite, Abstände, drei
 * Preisspalten nebeneinander.
 */

/* Die Karte bringt ihre eigenen Farben mit (unten im Abschnitt
   „Erscheinungsbild"). Deshalb steht hier light statt „light dark" —
   und es steht auf .karte, nicht auf :root: Auf dem Onepager ist die
   Karte ein Abschnitt in einer roten Seite, nicht die Seite selbst. */
.karte {
  color-scheme: light;
}

.karte {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1rem;
  line-height: 1.4;
}

.karte-inhalt ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0;
  list-style: none;
}

.karte-produkte {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Name links, Preise rechts — Kopfzeile und Produkte teilen das Raster. */
.karte-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.75rem;
  align-items: start;
}

/* Am Handy braucht der Name die volle Breite. Darunter Zutaten und
   Hinweise links, die Preise rechts in ihren Spalten, und der Schalter
   für die Kennzeichnung wieder über die ganze Breite. */
.karte-produkt {
  grid-template-areas:
    "titel titel"
    "text  preise"
    "info  info";
  padding: 0.75rem 0;
  border-top: 1px solid;
}

/* Ein einzelner Preis passt neben den Namen — drei nicht mehr, dann
   gilt wieder die gestapelte Anordnung von oben (E-144). */
.karte-kategorie:not(.karte-kategorie--groessen) .karte-produkt:not(.karte-produkt--preisreihe) {
  grid-template-areas:
    "titel preise"
    "text  text"
    "info  info";
}

.karte-produkt-titel {
  grid-area: titel;
  margin: 0;
  font-size: 1rem;
}

.karte-produkt-text {
  grid-area: text;
}

.karte-produkt .karte-preise {
  grid-area: preise;
}

.karte-produkt p {
  margin: 0.25rem 0 0;
}

.karte-preise {
  display: grid;
  grid-auto-flow: column;
  /* Feste Spalten, damit die Preise unter ihrer Größenzeile stehen —
     die Kopfzeile benutzt dieselbe Klasse. Breiter als früher, weil
     die Taste Polster und Rand trägt (E-097). */
  grid-auto-columns: 5.6rem;
  gap: 0 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
  white-space: nowrap;
}

.karte-groessen {
  font-size: 0.875rem;
}

/* Steht die Größe über der Spalte, muss sie nicht an jedem Preis stehen.
   Für Vorleseprogramme bleibt sie da. */
.karte-kategorie--groessen .karte-preis-groesse {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.karte-preis-groesse {
  margin-right: 0.25rem;
}

.karte-kennzeichnung {
  grid-area: info;
  margin-top: 0.25rem;
}

.karte-kennzeichnung summary {
  cursor: pointer;
}

.karte-kennzeichnung ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

.karte-hinweis {
  font-style: italic;
}

.karte-produkt--ausverkauft .karte-preise {
  text-decoration: line-through;
}

/* Merkmale: ausgeschrieben hinter dem Namen, klar getrennt von den
   hochgestellten Allergenkürzeln (E-050). */
.karte-merkmal {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.1em 0.5em;
  border: 1px solid currentColor;
  border-radius: 1em;
  font-size: 0.75rem;
  font-weight: 400;
  vertical-align: middle;
  white-space: nowrap;
}

.karte-legende {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
  font-size: 0.875rem;
}

.karte-legende h2 { font-size: 1rem; }

/* Das Zeichen für vegetarisch steht hinter dem Namen, optisch zur
   Versalhöhe zentriert (E-056). Solange keine Datei hinterlegt ist,
   steht dort der Wortlaut — dann greift .karte-merkmal. */
.karte-symbol {
  display: inline-block;
  width: auto;
  height: 0.9em;
  margin-left: 0.4em;
  vertical-align: -0.1em;
}

/* Die Kürzelgruppe darf nicht umbrechen: Wenn der Name zu lang wird,
   bricht der Name, die Kürzel bleiben zusammen (E-056). Das S sieht aus
   wie die übrigen — wer es sucht, findet es über die Legende. */
.karte-kuerzel {
  margin-left: 0.3em;
  font-size: 0.7em;
  font-weight: 400;
  white-space: nowrap;
}

.karte-kuerzel abbr {
  text-decoration: none;
  border: 0;
}

.karte-legende-symbole {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
}

.karte-legende-symbole dt { margin: 0; }
.karte-legende-symbole dd { margin: 0; }
.karte-legende-symbole .karte-merkmal { margin-left: 0; }
.karte-legende-symbole .karte-symbol { margin-left: 0; height: 1.2em; }

/* Ein fortlaufender Block, durch Mittelpunkte getrennt. Ein Eintrag
   darf nicht mitten im Wort umbrechen — zwischen den Einträgen schon. */
.karte-legende-kuerzel {
  margin: 0 0 0.75rem;
}

.karte-legende-eintrag { white-space: nowrap; }

.karte-legende-hinweis,
.karte-fussnote { margin: 0 0 0.5rem; }

/* Vorgeschriebene Bezeichnungen stehen am Namen, Pflichthinweise als
   Satz darunter (E-052). Beides ist Pflicht, nicht Zierde. */
.karte-bezeichnung {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.75rem;
  font-weight: 400;
  font-style: italic;
  vertical-align: middle;
}

.karte-pflichthinweis {
  margin: 0.25rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ===================================================================
 * Das Erscheinungsbild (E-062).
 *
 * Bis hierher stand nur Struktur. Was folgt, ist der Satz der
 * gedruckten Karte: cremefarbener Grund, kursive Serifen über den
 * Abschnitten, Punktführung zwischen Name und Preis.
 *
 * Die Farben stehen als Variablen an dieser einen Stelle. Solange die
 * Bestellstrecke eigenständig ist, müssen sie mit den Panel-Farben
 * übereinstimmen — siehe docs/theme-update.md, Abschnitt 4a.
 * =================================================================== */

/* Der Grund geht bis an den Rand, die Karte selbst bleibt lesbar
   schmal. Auf dem Onepager trägt ihn .blatt, auf der eigenen Seite
   .karte-seite. */
.blatt {
  background: #FAF6EC;
  padding: clamp(2.4rem, 6vw, 3.6rem) 0 clamp(2.6rem, 7vw, 4.5rem);
}

.blatt .karte {
  padding-left: var(--rand, 1.15rem);
  padding-right: var(--rand, 1.15rem);
}

/* Die Theme-Seite setzt Überschriften kursiv in der Serifenschrift und
   färbt sie creme. Auf der Karte gilt das nur für die Abschnitte — ein
   Gerichtename ist Lauftext, kein Titel. */
.karte .karte-produkt-titel,
.karte .karte-legende h2 {
  font-family: inherit;
  font-style: normal;
  letter-spacing: 0;
  color: var(--tinte);
}

.karte {
  --rot: #BD2F27;
  --rot-dunkel: #8E231D;
  --rot-tief: #6E1A15;
  --creme-hell: #FAF6EC;
  --tinte: #2B1512;
  --tinte-leise: #6B4A42;
  --gruen: #4C8A3F;
  /* Dieselbe Farbe eine Stufe tiefer, für kleine Schrift: #4C8A3F
     kommt auf Creme auf 3,87:1 und reicht als Rand, nicht als Text
     in 12 px. Dieser Ton kommt auf 5,4:1 (E-111). */
  --gruen-tief: #36703A;

  max-width: 68rem;
  padding: 0;
  background: var(--creme-hell);
  color: var(--tinte);
  line-height: 1.55;
}

/* Die eigenständige Seite trägt den Grund bis an den Rand. Auf dem
   Onepager tut das der Abschnitt, deshalb steht es nicht auf body. */
.karte-seite {
  margin: 0;
  /* Hier als Wert, nicht als Variable: Die Variablen stehen auf
     .karte, und body ist kein Nachfahre davon. */
  background: #FAF6EC;
}

/* Auf der eigenen Seite braucht die Karte ihren Seitenabstand selbst —
   im Onepager gibt ihn .blatt. */
.karte-seite .karte {
  padding-left: clamp(1.15rem, 5vw, 3rem);
  padding-right: clamp(1.15rem, 5vw, 3rem);
  padding-top: clamp(1.4rem, 4vw, 2.4rem);
  padding-bottom: clamp(2rem, 6vw, 3.5rem);
}

.karte h1,
.karte h2 {
  font-family: fraunces-variable, Georgia, serif;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  color: var(--rot);
  letter-spacing: -0.005em;
}

.karte h2 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); margin: 0 0 0.3rem; }

.karte-kategorie { padding-top: clamp(1.8rem, 4vw, 2.6rem); }
.karte-kategorie-beschreibung {
  color: var(--tinte-leise);
  max-width: 56ch;
  margin: 0.45rem 0 1.4rem;
  font-size: 0.96rem;
}

/* Die Kategorienleiste läuft mit und markiert, wo man ist. */
.karte-inhalt {
  position: sticky;
  top: 0;
  /* Auf dem Onepager fährt oben eine Leiste herein; die Reiter
     gehören darunter, nicht dahinter. */
  top: var(--reiter-oben, 0px);
  z-index: 40;
  background: var(--creme-hell);
  border-bottom: 1px solid rgba(43, 21, 18, 0.14);
}

.karte-inhalt ul {
  display: flex;
  gap: 0.3rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  /* Beim Umschalten rückt der gewählte Reiter in die Mitte; ein
     angetippter soll nicht halb unter dem Verlauf hängen bleiben. */
  scroll-padding: 0 3.2rem;
}

.karte-inhalt ul::-webkit-scrollbar { display: none; }

/* ---- Was seitlich im Off liegt (E-109) --------------------------

   Die Leiste läuft über den Rand hinaus, und vorher deutete nichts
   darauf hin: „Fingerfood" stand rechts außerhalb des Bildes, und im
   Test suchte man es im Scrollen der Seite statt in der Leiste.

   Jetzt steht an der Kante, wo etwas verschwindet, ein Verlauf ins
   Nichts und ein Winkel darin — und der Winkel ist ein Knopf, der
   weiterschiebt. Er entsteht erst im Skript: Ohne Skript scrollt die
   Leiste zwar auch, aber ein Pfeil, der nichts tut, wäre schlimmer
   als keiner.

   Beide Kanten, nicht nur die rechte: Wer einmal gewischt hat, soll
   sehen, dass hinter ihm auch noch etwas liegt. */
.karte-inhalt-pfeil {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3.2rem;
  display: grid;
  align-items: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--rot);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.karte-inhalt-pfeil[data-richtung="links"] {
  left: 0;
  justify-items: start;
  padding-left: 0.15rem;
  background: linear-gradient(to right, var(--creme-hell) 40%, rgba(250, 246, 236, 0));
}

.karte-inhalt-pfeil[data-richtung="rechts"] {
  right: 0;
  justify-items: end;
  padding-right: 0.15rem;
  background: linear-gradient(to left, var(--creme-hell) 40%, rgba(250, 246, 236, 0));
}

/* Der Winkel, aus zwei Kanten eines gedrehten Quadrats. */
.karte-inhalt-pfeil::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
}

.karte-inhalt-pfeil[data-richtung="links"]::after { transform: rotate(135deg); }
.karte-inhalt-pfeil[data-richtung="rechts"]::after { transform: rotate(-45deg); }

.karte-inhalt[data-links="ja"] .karte-inhalt-pfeil[data-richtung="links"],
.karte-inhalt[data-rechts="ja"] .karte-inhalt-pfeil[data-richtung="rechts"] {
  opacity: 1;
  pointer-events: auto;
}

.karte-inhalt-pfeil:focus-visible { outline: 3px solid var(--rot); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .karte-inhalt-pfeil { transition: none; }
}

/* Die Reiter sind Tasten, keine Fußnote (E-109).

   Im Test fand niemand das Fingerfood. Der Grund war nicht die
   Überschrift im Abschnitt, sondern diese Leiste: Sie schaltet die
   Rubriken um — immer nur eine ist zu sehen —, sah aber aus wie eine
   Brotkrumenspur. Wer sie nicht als Bedienung erkennt, sucht die
   übrigen Gänge durch Scrollen, und findet sie nie. */
.karte-inhalt a {
  display: block;
  padding: 0.6rem 0.95rem;
  text-decoration: none;
  color: var(--tinte);
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: 999px;
}

.karte-inhalt a:hover { color: var(--rot); border-color: rgba(189, 47, 39, 0.3); }

/* Die laufende Rubrik ist gefüllt, nicht unterstrichen: Ein Strich
   unter dem Wort ist eine Markierung, eine gefüllte Fläche ist eine
   Antwort auf „wo bin ich". */
.karte-inhalt a[aria-current="true"] {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--creme-hell);
}

.karte-inhalt a[aria-current="true"]:hover { color: var(--creme-hell); }

/* Ab dieser Breite stehen Name und Preise auf einer Zeile. Darunter
   bleibt es beim Umbruch aus der Struktur oben.

   Ohne Punktführung dazwischen (E-099): Die gedruckte Karte braucht
   sie, weil dort nichts anderes die Zeile zusammenhält. Hier halten
   sie drei Dinge — die Preise stehen in festen Spalten unter ihrer
   Größenzeile, jeder Preis ist eine umrandete Taste, und zwischen
   den Gerichten liegt ein roter Strich. Die Punkte waren das vierte
   Hilfsmittel für eine Aufgabe, die schon erledigt war. */
@media (min-width: 700px) {
  .karte-kategorie--groessen .karte-produkt {
    grid-template-areas:
      "titel preise"
      "text  text"
      "info  info";
  }

  .karte-produkt-titel { display: flex; align-items: baseline; gap: 0.5rem; }
}

/* Die Trennlinien sind rot, nicht grau (E-099). Grau war die Farbe
   von nichts — eine Linie, die nur da war, weil Tabellen Linien
   haben. Rot ist die Farbe des Hauses, und damit wird aus dem
   Strich eine Ansage: hier endet ein Gericht, hier fängt das
   nächste an. */
.karte-zeile { border-color: rgba(189, 47, 39, 0.22); }
.karte-groessen {
  font-weight: 700;
  color: var(--tinte-leise);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(189, 47, 39, 0.4);
}

/* Im roten Kasten dieselbe Zeile, nur andersherum getönt (E-109). */
.karte-wunsch .karte-groessen {
  color: rgba(241, 233, 209, 0.78);
  border-bottom-color: rgba(241, 233, 209, 0.35);
  margin-bottom: 0.2rem;
}

/* Die Überschrift über der Liste (E-109). Sie steht neben dem Kasten
   der Wunschpizza und muss ihm standhalten, ohne mit der Überschrift
   der Kategorie zu konkurrieren: dieselbe Schrift, eine Stufe
   kleiner.

   Sie sitzt in derselben Zeile wie die Maße (E-110). Allein stand sie
   dicht unter dem Kasten und weit über der Liste, die sie
   überschreibt — sie schwebte zwischen beidem. Neben den Maßen
   gehört sie sichtbar zu dem, was darunter kommt. */
.karte-vorschlaege {
  font-family: fraunces-variable, Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem);
  line-height: 1.05;
  color: var(--rot);
  margin: 0;
}

/* Beide auf eine Grundlinie, und oben Luft: Die Zeile beginnt etwas
   Neues und soll nicht am Kasten kleben. */
.karte-groessen:has(.karte-vorschlaege) {
  align-items: baseline;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}

.karte-produkt-titel { font-weight: 600; }
.karte-preise { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--rot); }
.karte-zutaten { color: var(--tinte-leise); font-size: 0.92rem; max-width: 58ch; }
.karte-kuerzel, .karte-bezeichnung { color: var(--tinte-leise); }
/* Grün, und zwar nur hier (E-111).

   Das Blueprint des Merkmals trennt zwei Formen: Ein Symbol „ist ein
   Angebot und darf sichtbar sein", ein Kürzel ist eine sachliche
   Pflichtangabe und „läuft still mit". Diese Plakette ist die
   Symbolform ohne hinterlegte Grafik — also ein Angebot. „vegetarisch"
   ist eine gute Nachricht, keine Warnung.

   Die Kürzel bleiben grau, auch das „S" für Schweinefleisch: Eine
   Pflichtangabe einzufärben hieße, sie zu bewerten. */
.karte-merkmal { color: var(--gruen-tief); border-color: var(--gruen); }

/* Die Wunschpizza steht über ihrer Kategorie, nicht darin: Sie ist
   kein Gericht, sondern eine Einladung. Als einzige Fläche mit Kante
   statt Schatten, und als einziger Verlauf nach oben heller. */
.karte-wunsch {
  margin: 0 0 1.8rem;
  padding: clamp(1.3rem, 4vw, 1.9rem);
  border-radius: 8px;
  background: linear-gradient(152deg, #C8372E, var(--rot-dunkel));
  color: var(--creme-hell);
  box-shadow: 0 2px 0 var(--rot-tief);
}

/* Nur die Überschrift des Kastens — der Gerichtename darin ist
   ebenfalls ein h3 und bleibt Lauftext. */
.karte-wunsch > h3 {
  font-family: fraunces-variable, Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.45rem, 1.2rem + 1.3vw, 2rem);
  line-height: 1.02;
  margin: 0;
}

.karte-wunsch .karte-wunsch-text { margin: 0.4rem 0 0.9rem; max-width: 48ch; opacity: 0.88; }
.karte-wunsch .karte-produkt { border-top: 0; padding-bottom: 0; }
.karte-wunsch .karte-preise { color: var(--creme-hell); }
.karte-wunsch .karte-kuerzel,
.karte-wunsch .karte-zutaten { color: rgba(241, 233, 209, 0.75); }

/* Im roten Kasten bleibt die Plakette creme: Grün auf Rot ist weder
   zu lesen noch schön (E-111). */
.karte-wunsch .karte-merkmal {
  color: var(--creme-hell);
  border-color: rgba(241, 233, 209, 0.55);
}

.karte-abschluss { margin: 2.2rem 0 0; text-align: center; }
.karte-abschluss a {
  color: var(--rot);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.karte-abschluss a:hover { background: var(--rot); color: var(--creme-hell); }

/* Auf dem Onepager liegt über der Seite die Kopfleiste. Ihre Höhe
   meldet sie selbst als --kopf-hoehe (E-139); der Wert dahinter ist
   nur der Rückfall für den Fall ohne Skript. Geraten war er um acht
   Pixel zu groß, und durch den Spalt lief die Karte. */
.blatt { --reiter-oben: var(--kopf-hoehe, calc(env(safe-area-inset-top, 0px) + 3.6rem)); }

/* Die Preise sind die Links (E-062). Auf der eigenen Seite sind es
   keine — dort führt „Auswählen" weiter.

   Sie sind Tasten mit Rand ringsum, nicht Text mit feiner Unterkante
   (E-097). Vorher waren sie 25 px hoch, ohne Polster, am Schreibtisch
   ohne Lücke zum nächsten Preis — unter dem Mindestmaß von 28 px, und
   zwei Preise teilten sich eine Kante. Dass man tippen kann, sagt
   jetzt die Form: eine Umrandung ist ein Schalter, eine rote Zahl ist
   eine rote Zahl. Damit braucht es auch keinen erklärenden Satz mehr
   über der Karte (E-083). */
a.karte-preis-betrag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: var(--rot);
  text-decoration: none;
  border: 2px solid rgba(189, 47, 39, 0.28);
  border-radius: 999px;
  padding: 0.32rem 0.6rem;
}

/* Im Link trägt der Abstand die Lücke, nicht der Rand der Größe. */
a.karte-preis-betrag .karte-preis-groesse { margin-right: 0; }

a.karte-preis-betrag:hover {
  background: var(--rot);
  color: var(--creme-hell);
  border-color: var(--rot);
}

/* Die Größe ist auch im gefüllten Zustand leise, aber lesbar — die
   eigene Farbe aus der Getränkespalte wäre auf Rot nicht mehr da. */
a.karte-preis-betrag .karte-preis-groesse { color: inherit; opacity: 0.72; }

.karte-wunsch a.karte-preis-betrag { color: var(--creme-hell); border-color: rgba(241, 233, 209, 0.45); }
.karte-wunsch a.karte-preis-betrag:hover { background: var(--creme-hell); color: var(--rot); border-color: var(--creme-hell); }

/* Im Onepager wird gelesen. Der Weg zum Bestellen sind die Preise und
   der Verweis am Ende, nicht ein „Auswählen" an jedem Gericht. */
.blatt .karte-aktion { display: none; }

/* Am Handy rücken die Preise zusammen, statt in festen Spalten zu
   stehen: Drei Spalten à 4,25 rem plus Innenabstand der Preislinks
   schieben die Zeile sonst über den Rand hinaus. */
@media (max-width: 699px) {
  .karte-preise {
    grid-auto-columns: auto;
    gap: 0 0.55rem;
    justify-content: end;
  }

  /* Enger, aber nicht randlos: Die Taste bleibt eine Taste. */
  a.karte-preis-betrag { padding-left: 0.45rem; padding-right: 0.45rem; }
}

/* Die Reiter laufen seitlich, sie brechen nicht um — sonst steht über
   der Karte ein dreizeiliger Block, der mitscrollt. */
.karte-inhalt ul { flex-wrap: nowrap; }

/* Bei Getränken ist der Name der Weg weiter: Welches Gebinde geliefert
   wird, entscheidet sich im nächsten Schritt (E-064). Er war mit 18 px
   das kleinste Ziel der ganzen Karte (E-097).

   Das Polster steht nur senkrecht und der Name bleibt inline: So
   wächst die Trefferfläche über die Zeile hinaus, ohne den Umbruch zu
   ändern — ein inline-block würde lange Namen nicht mehr brechen. Die
   Unterstreichung liegt nicht mehr auf dem Rand, sondern am Text, denn
   der Rand wäre mit dem Polster nach unten weggewandert. */
.karte-name {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: rgba(189, 47, 39, 0.5);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding: 0.55rem 0.1rem;
}

.karte-name:hover {
  background: var(--rot);
  color: var(--creme-hell);
  text-decoration-color: currentColor;
}

/* Ohne Größenspalten tragen die Preise ihre Bezeichnung mit — „0,33 l
   3,30 €" passt in keine 4,25-rem-Spalte. Dort richtet sich die Breite
   nach dem Inhalt. */
.karte-kategorie:not(.karte-kategorie--groessen) .karte-preise {
  grid-auto-columns: auto;
  gap: 0 1.1rem;
}

.karte-kategorie:not(.karte-kategorie--groessen) .karte-preis-groesse {
  color: var(--tinte-leise);
  font-weight: 400;
}

/* Ein Gang blendet ein, statt zu erscheinen. Die Animation läuft
   genau einmal, wenn der Abschnitt aus display:none kommt. */
@media (prefers-reduced-motion: no-preference) {
  .karte-kategorie { animation: karte-ein 0.3s ease both; }
}

@keyframes karte-ein {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

/* Wohin ein Reiter springt: unter die Leiste, nicht darunter weg.
   Die Leiste klebt oben; ohne diesen Abstand verschwände die
   Überschrift des Gangs hinter ihr. */
.karte-kategorie { scroll-margin-top: calc(var(--reiter-oben, 0px) + 3.4rem); }

/* Und für ein einzelnes Gericht: Der Rückweg aus dem Warenkorb und aus
   dem Produktdialog zeigt auf „#produkt-…". Ohne diesen Abstand läge
   die Zeile unter der Reiterleiste — man käme an und sähe sie nicht. */
.karte-produkt { scroll-margin-top: calc(var(--reiter-oben, 0px) + 3.8rem); }

/* Dasselbe für die Karte als Ganzes: Alle Bestellknöpfe zeigen auf
   „#karte" (E-076). Hier zählt nur die Kopfleiste — die Reiterleiste
   steht innerhalb der Karte und kommt erst darunter. */
#karte { scroll-margin-top: calc(var(--reiter-oben, 0px) + 1rem); }

/* Der Weg von oben bis zur Karte sind mehrere Bildschirme. Ein Klick
   auf „Bestellen" soll dorthin gleiten, nicht knallen — und nur auf
   Seiten, die die Karte auch tragen. Wer Bewegung reduziert haben
   will, bekommt sie nicht. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.blatt) { scroll-behavior: smooth; }
}

/* Der Weg in die nächste Kategorie, am Ende der aktuellen (E-140).
   Breit und mittig: Es ist der einzige Knopf weit und breit, und der
   Daumen soll ihn nicht suchen. */
.karte-weiter {
  margin: 2rem 0 0.5rem;
  text-align: center;
}

.karte-weiter-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.4rem;
  border: 2px solid var(--rot, #BD2F27);
  border-radius: 999px;
  background: transparent;
  color: var(--rot, #BD2F27);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.karte-weiter-knopf::after {
  content: '→';
  font-weight: 400;
}

.karte-weiter-knopf:hover,
.karte-weiter-knopf:focus-visible {
  background: var(--rot, #BD2F27);
  color: var(--creme-hell, #FAF6EC);
}

/* ---- Was es nur vor Ort gibt (E-144) ----------------------------- */

/* Grau und ohne Knopfkante: „gibt es, aber nicht zum Mitnehmen". Grau
   ist dafür die allgemein verstandene Farbe; weil Farbe allein nicht
   reicht, steht die Begründung zusätzlich unsichtbar im Text und
   sichtbar im Fenster, das ein Tipp öffnet. Ein Wort neben jeden Preis
   zu schreiben ginge am Handy nicht auf — drei Preise mit „nur vor
   Ort" sind eine Zeile zu breit. */
/* Dieselbe Taste wie nebenan, nur in Grau: Die Zeile bleibt ruhig,
   weil alle Preise gleich gebaut sind — der Unterschied ist die
   Farbe, nicht die Form. Geometrie deshalb wie bei a.karte-preis-
   betrag; wer die dort ändert, ändert sie hier mit. */
.karte-preis-vorort {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  border: 2px solid rgba(43, 21, 18, 0.3);
  border-radius: 999px;
  padding: 0.32rem 0.6rem;
  /* Dieselbe Grundfarbe wie der Rand, nur kräftiger: Das Braun von
     --tinte-leise stand neben dem neutralen Rand wie eine zweite
     Farbe. So ist die Taste aus einem Guss — und mit 4,6:1 gegen den
     cremefarbenen Grund bleibt der Preis lesbar. */
  color: rgba(43, 21, 18, 0.62);
  cursor: help;
}

.karte-preis-vorort .karte-preis-groesse { margin-right: 0; color: inherit; opacity: 0.72; }

/* Drei Tasten nebeneinander passen am Handy nicht in eine Zeile. Bei
   den Getränken dürfen sie deshalb umbrechen — dort steht keine
   Größenzeile darüber, unter der sie ausgerichtet bleiben müssten.
   Bei den Pizzen bleibt das Raster, sonst stünde der Preis nicht
   mehr unter seiner Größe. */
.karte-kategorie:not(.karte-kategorie--groessen) .karte-produkt--preisreihe .karte-preise {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.karte-preis-vorort:hover,
.karte-preis-vorort:focus-visible {
  border-color: rgba(43, 21, 18, 0.45);
}

/* Für Vorleseprogramme, nicht für das Auge. */
.karte-nurlesbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vororthinweis {
  max-width: min(26rem, calc(100vw - 2rem));
  border: 0;
  border-radius: 12px;
  padding: clamp(1.3rem, 5vw, 1.8rem);
  background: var(--creme-hell, #FAF6EC);
  color: var(--tinte, #2B1512);
  box-shadow: 0 12px 40px rgba(43, 21, 18, 0.35);
  text-align: center;
}

.vororthinweis::backdrop { background: rgba(43, 21, 18, 0.55); }
.vororthinweis h2 { margin: 0 0 0.6rem; font-size: 1.3rem; color: var(--rot, #BD2F27); }
.vororthinweis p { margin: 0; }
.vororthinweis form { margin: 1.1rem 0 0; display: flex; justify-content: center; }

.vororthinweis button {
  min-height: 2.75rem;
  padding: 0 1.4rem;
  border: 2px solid var(--rot, #BD2F27);
  border-radius: 999px;
  background: var(--rot, #BD2F27);
  color: var(--creme-hell, #FAF6EC);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}