/*
 * Produktdialog — nur Struktur, wie die Karte. Keine Farben, keine
 * Schriften; das Erscheinungsbild kommt später.
 */

.bestelldialog {
  width: min(100% - 1rem, 36rem);
  max-height: calc(100% - 1rem);
  padding: 1rem;
}

/* Ein Modal muss sich vom Hintergrund abheben. Ohne Abdunklung ragt
   die Karte links und rechts unter dem Dialog hervor, und ihre
   Listenpunkte sehen aus wie leere Einträge im Dialog. */
.bestelldialog::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.bestelldialog-schliessen {
  float: right;
}

.dialog-titel {
  margin-top: 0;
}

.dialog-gruppe {
  margin: 1rem 0;
  padding: 0;
  border: 0;
}

.dialog-gruppe legend {
  font-weight: bold;
}

.dialog-regel {
  margin: 0.25rem 0;
  font-size: 0.875rem;
}

/* Eingabe, Name, Allergene, Preis — eine Zeile je Option, der Preis rechts. */
.dialog-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0 0.5rem;
  align-items: center;
  padding: 0.375rem 0;
}

/* Ausverkauft: ohne Eingabe, der Name steht, wo sonst der Name steht. */
.dialog-option-aus {
  grid-template-columns: minmax(0, 1fr) auto;
  opacity: 0.6;
}

.dialog-aus {
  font-size: 0.875rem;
  text-align: right;
}

/* Nur vor Ort ausgeschenkt (E-074): Die Zeile behält ihre Spalten —
   sonst stünde der Preis woanders als eine Zeile darüber. Sie ist nur
   blass und nicht anzufassen. */
.dialog-option-nurvorort { opacity: 0.55; }
.dialog-option-nurvorort input { cursor: not-allowed; }

.dialog-allergene {
  font-size: 0.75rem;
}

/* Der Aufpreis einer Zeile tritt zurück, bis die Zeile gewählt ist
 * (E-079). Eine Spalte mit fünfzehn gleich lauten Beträgen sagt nur,
 * dass alles etwas kostet. Steht nur das Gewählte kräftig da, liest
 * man auf einen Blick, was man zusammengestellt hat und was es
 * ausmacht. */
.dialog-aufpreis {
  text-align: right;
  white-space: nowrap;
  /* 0,65 und nicht weniger: Bei 0,45 sah es besser aus, lag aber bei
     2,8:1 — unter dem, was lesbar heißt. Einen Preis liest man, bevor
     man wählt; leiser darf er werden, unlesbar nicht. Jetzt 5,2:1
     gegen den Dialoggrund, das Gewählte in Rot liegt bei 5,4:1. */
  color: rgba(43, 21, 18, 0.65);
}

.dialog-option:has(input:checked) .dialog-aufpreis,
.dialog-option.gewaehlt .dialog-aufpreis,
.belegzeile:has(.belegplatz.belegt) .dialog-aufpreis {
  color: #BD2F27;
  font-weight: 600;
}

/* Ohne :has() bleibt es bei der leisen Spalte — lesbar, nur ohne die
 * Hervorhebung. Die Zählerzeilen bekommen ihre Klasse vom Skript und
 * sind davon nicht betroffen. */

.dialog-zaehler {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Ohne Skript zählt das Feld selbst. */
.dialog-zaehler .zaehlfeld {
  width: 3rem;
  text-align: center;
}

/* Mit Knöpfen verschwindet das Feld, und der Knopf wird die Fläche —
   dieselbe Sprache wie bei der Belegung (E-072, E-078). */
[data-knoepfe] .zaehlfeld {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Minus, Zahl, Plus — zwei runde Knöpfe und die Menge dazwischen
   (E-078). Die Form kennt jeder; sie braucht keine Erklärung. */
.dialog-zaehler .zaehlknopf {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid rgba(43, 21, 18, 0.25);
  border-radius: 999px;
  background: none;
  color: #2B1512;
  cursor: pointer;
}

.dialog-zaehler .zaehlknopf:hover:not(:disabled) {
  border-color: #BD2F27;
  background: rgba(189, 47, 39, 0.1);
  color: #BD2F27;
}

/* Am Anschlag: sichtbar fertig. Entweder ist diese Wahl ausgereizt
   oder die ganze Gruppe — dann lässt sich das Plus nicht mehr
   drücken, statt den Gast erst beim Preis abzuweisen. */
.dialog-zaehler .zaehlknopf:disabled {
  cursor: default;
  opacity: 0.3;
}

.dialog-zaehler .zaehlknopf svg { width: 0.85rem; height: 0.85rem; }

/* Die Zahl steht immer da, auch die Null: Sie zeigt, was die Knöpfe
   tun, bevor jemand sie gedrückt hat (E-073). */
.zaehlzahl {
  min-width: 1.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: 0.5;
}

.dialog-zaehler.gewaehlt .zaehlzahl {
  opacity: 1;
  font-weight: 700;
  color: #BD2F27;
}

.dialog-voll {
  margin-left: 0.4rem;
  color: #BD2F27;
  font-weight: 600;
}

/* Steht der Preis noch nicht fest, sagt der Fuß das in Worten statt
   mit einem Strich, der wie ein Fehler aussieht (E-078). */
[data-gueltig="nein"] .dialog-preis strong {
  font-weight: 600;
  font-size: 1rem;
  color: var(--tinte-leise, #6B4A42);
}

.dialog-hinweis:empty {
  display: none;
}

.dialog-hinweis {
  margin: 0.25rem 0;
  font-weight: bold;
}

.dialog-sonderwunsch {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.dialog-sonderwunsch textarea {
  width: 100%;
  box-sizing: border-box;
}

.dialog-preis {
  font-size: 1.125rem;
}

.dialog-fertig {
  min-height: 2.75rem;
  padding: 0 1.5rem;
}

[data-belegung][hidden] {
  display: none;
}

.dialog-pfand {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-left: auto;
  padding-right: 0.5rem;
}

/* Der Dialog geht jetzt auch über der Website auf, nicht nur über der
   eigenen Karte (E-068). Dort gilt creme auf rot — hier gilt wieder,
   was auf der Karte gilt, sonst stünde die Überschrift hell auf hell. */
.bestelldialog {
  background: #FAF6EC;
  color: #2B1512;
}

.bestelldialog h1,
.bestelldialog h2 {
  color: #BD2F27;
  font-family: fraunces-variable, Georgia, serif;
  font-style: italic;
  font-weight: 900;
  line-height: 1.05;
}

.bestelldialog a { color: #BD2F27; }

/* Ein Kreuz statt eines Systemknopfes (E-069). Groß genug für den
   Daumen, auch wenn das Zeichen darin klein ist. */
.bestelldialog-schliessen {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(43, 21, 18, 0.07);
  color: #6B4A42;
  cursor: pointer;
}

.bestelldialog-schliessen:hover { background: rgba(43, 21, 18, 0.14); color: #2B1512; }
.bestelldialog-schliessen svg { width: 1.1rem; height: 1.1rem; }

/* Der Dialog liegt über der Seite, nicht in ihr (E-077).
 *
 * „position: relative" war nur dafür gedacht, dem Kreuz oben rechts
 * einen Bezug zu geben — es hat aber die Lage des Modals selbst
 * überschrieben, und zwar still: Eigene Regeln schlagen die des
 * Browsers, ganz gleich wie genau sie sind. Der Dialog hing dann an
 * seiner Stelle im Dokument statt am Bild. Deshalb sprang die Seite
 * beim Öffnen an den Anfang — der Browser rückte den Dialog ins Bild,
 * und der stand weit oben.
 *
 * Fest und mittig, wie ein Modal gehört. Bezug für das Kreuz ist es
 * weiterhin. */
.bestelldialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
}

/* Die Überschrift darf nicht unter das Kreuz laufen. */
.bestelldialog h1 { padding-right: 3rem; }

/* Ein Schalter statt einer Liste mit einer einzigen Zeile (E-069).
   Ein Ankreuzfeld bleibt es darunter — ohne CSS und für
   Vorleseprogramme ist es genau das. */
.dialog-schalter {
  appearance: none;
  flex: none;
  width: 2.75rem;
  height: 1.55rem;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(43, 21, 18, 0.22);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dialog-schalter::after {
  content: "";
  position: absolute;
  top: 0.17rem;
  left: 0.17rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.15s ease;
}

.dialog-schalter:checked { background: #BD2F27; }
.dialog-schalter:checked::after { transform: translateX(1.2rem); }

@media (prefers-reduced-motion: reduce) {
  .dialog-schalter, .dialog-schalter::after { transition: none; }
}

/* Der Knopf, der die Wahl in den Warenkorb legt, trägt die Form der
   übrigen Knopfe der Website. */
.bestelldialog button[type="submit"] {
  padding: 0.62rem 1.3rem;
  border: 2px solid #BD2F27;
  border-radius: 999px;
  background: #BD2F27;
  color: #FAF6EC;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bestelldialog button[type="submit"]:hover { background: #8E231D; border-color: #8E231D; }

/* ===================================================================
 * Links · Ganz · Rechts (E-072)
 *
 * Ohne Skript stehen hier drei Zahlenfelder nebeneinander, und die
 * Pizza lässt sich genauso belegen. Mit Skript werden daraus Knöpfe,
 * die beim Tippen hochzählen — das Feld bleibt darunter die Wahrheit.
 * =================================================================== */

/* Ein Raster, kein Flieskasten: Die Spalten stehen fest, damit nichts
   wandert, wenn eine Zutat belegt wird (E-073). */
.belegzeile {
  display: grid;
  grid-template-columns: 1fr auto 1.7rem 4.6rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(43, 21, 18, 0.08);
}

.belegname { min-width: 0; }
.belegplaetze { display: flex; gap: 0.3rem; }
.belegleerenplatz { width: 1.7rem; }

.belegplatz {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.belegzeile .dialog-aufpreis { text-align: right; font-size: 0.9rem; }

/* Mit Knöpfen: das Feld verschwindet, das Wort wird die Fläche. */
[data-knoepfe] .belegfeld {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

[data-knoepfe] .belegplatz {
  cursor: pointer;
  border: 1px solid rgba(43, 21, 18, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.86rem;
  line-height: 1;
  user-select: none;
}

[data-knoepfe] .belegplatz:hover { border-color: #BD2F27; color: #BD2F27; }

[data-knoepfe] .belegplatz.belegt {
  background: #BD2F27;
  border-color: #BD2F27;
  color: #FAF6EC;
  font-weight: 700;
}

/* Die Zahl steht immer da, auch die Null: Sie zeigt, was der Knopf
   tut, bevor jemand ihn gedrückt hat (E-073). */
[data-knoepfe] .belegzahl {
  margin-left: 0.35rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

[data-knoepfe] .belegplatz.belegt .belegzahl { opacity: 1; }

/* Ohne Skript zählt das Feld selbst — dann wäre die Zahl daneben
   doppelt. */
.belegzahl { display: none; }
[data-knoepfe] .belegzahl { display: inline; }

.belegleeren {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(43, 21, 18, 0.08);
  color: #6B4A42;
  cursor: pointer;
}

.belegleeren:hover { background: rgba(189, 47, 39, 0.15); color: #BD2F27; }
.belegleeren svg { width: 0.8rem; height: 0.8rem; }

@media (max-width: 520px) {
  .belegzeile {
    grid-template-columns: 1fr 1.7rem;
    row-gap: 0.25rem;
  }

  .belegname { grid-column: 1 / -1; }
  .belegzeile .dialog-aufpreis { grid-column: 2; grid-row: 2; text-align: right; }
  .belegleerenplatz, .belegleeren { grid-column: 2; grid-row: 3; }
  .belegplaetze { grid-column: 1; grid-row: 2 / 4; align-items: center; }
}

/* Summe und Knopf bleiben unten stehen (E-073). Im Overlay klebt der
   Fuß am unteren Rand; auf der eigenen Seite steht er einfach dort,
   wo er hingehört. */
.bestelldialog .dialog-fuss {
  position: sticky;
  bottom: -1rem;
  margin: 0 -1rem -1rem;
  padding: 0.7rem 1rem 1rem;
  background: #FAF6EC;
  border-top: 1px solid rgba(43, 21, 18, 0.14);
  box-shadow: 0 -8px 14px rgba(250, 246, 236, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.bestelldialog .dialog-preis { margin: 0; font-size: 1.05rem; }
.bestelldialog .dialog-preis strong { font-size: 1.2rem; }
.bestelldialog .dialog-knoepfe { display: flex; gap: 0.5rem; margin: 0; }

/* Am Handy ist nebeneinander kein Nebeneinander mehr: Summe und Knopf
   brechen um und standen dann beide linksbündig untereinander — zwei
   verschieden breite Blöcke an einer Kante, die nichts zusammenhält.
   Untereinander auf einer Mittelachse ist es eine Spalte (E-138). */
@media (max-width: 30rem) {
  .bestelldialog .dialog-fuss {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .bestelldialog .dialog-knoepfe { justify-content: center; }
}

/* Die kleine Pizza im Knopf: gefüllt ist, worauf die Zutat kommt. */
.belegpizza {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  vertical-align: -0.08em;
}

[data-knoepfe] .belegplatz { gap: 0.28rem; }

/* ------------------------------------------------------------------
   Der schwebende Warenkorb (E-075)

   Er erscheint, sobald etwas im Korb liegt, und bleibt dann stehen —
   auf der Startseite wie auf der Speisekarte. Vorher stand am Ende der
   Karte ein Link, den niemand sah, der oben eine Pizza anklickte.

   Am Handy trägt ihn die feste Leiste unten. Wo es eine gibt, tritt er
   zurück, statt sie zu überdecken. */
.warenkorbschwebend {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  /* Gold, nicht Rot: Oben steht er auf dem roten Kopf der Seite, unten
     auf dem hellen Grund — Gold hebt sich von beidem ab. Es ist
     dieselbe Farbe wie das Warenkorbfeld in der Leiste am Handy. */
  background: #D9A441;
  color: #2B1512;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(43, 21, 18, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.warenkorbschwebend:hover,
.warenkorbschwebend:focus-visible {
  color: #2B1512;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(43, 21, 18, 0.34);
}

.warenkorbschwebend svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* Die Zahl sitzt im Knopf wie eine Marke, damit sie auch dann zu lesen
   ist, wenn das Wort auf schmalen Geräten wegfällt. */
.warenkorbschwebend .warenkorbzahl {
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: #2B1512;
  color: #FAF6EC;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Wo die feste Leiste unten steht, bleibt der schwebende Knopf weg —
   zwei Warenkörbe übereinander sind einer zu viel. */
@media (max-width: 759px) {
  body:has(.leiste) .warenkorbschwebend { display: none; }
}

@media (max-width: 400px) {
  .warenkorbschwebend .warenkorbwort { display: none; }
}

/* Dass etwas hineingelegt wurde, soll man sehen — der Knopf nickt
   einmal. Wer keine Bewegung mag, bekommt sie nicht. */
@keyframes warenkorb-nickt {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.warenkorbschwebend.nickt,
.warenkorbknopf.nickt { animation: warenkorb-nickt 0.42s ease; }

@media (prefers-reduced-motion: reduce) {
  .warenkorbschwebend { transition: none; }
  .warenkorbschwebend.nickt,
  .warenkorbknopf.nickt { animation: none; }
}

/* Der Hinweis im Fuß des Dialogs, wenn gerade nichts geht (E-137).
   Leise und über dem Preis: Er soll gelesen werden, bevor der Daumen
   den Knopf trifft, und trotzdem nichts verstellen. */
.dialog-zu {
  flex: 1 0 100%;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #b3261e;
  font-weight: 600;
}