/* ============================================================
   styles.css — Bausteine des Systems "Chiostro"
   Farben und Schriften stehen in theme.css.

   Abschnitte:
     1  Grundlage und Barrierefreiheit
     2  Typografie
     3  Knöpfe
     4  Kennzeichnung (Allergene, vegetarisch, Schärfe)
     5  Speisenzeile und Kategorie
     6  Konfigurator (Optionsgruppen)
     7  DER PASS — das Signatur-Element
     8  Küchenbildschirm
   ============================================================ */

/* ---------- 1. Grundlage ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 112.5%;            /* 18px. Gehört an html, nie an body. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kalk);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: var(--s-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* [hidden] verliert gegen jede display-Regel einer Klasse. Ohne diese
   Zeile blendet ein Filter nichts aus, obwohl der Zähler stimmt —
   sieht aus wie ein JS-Fehler, ist aber CSS. Nicht entfernen. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--ocker);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.huelle {
  width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---------- 2. Typografie ---------- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

/* Schmal gestellt: das ist der gemalte Fliesen-Charakter der Schrift.
   Bei Fließtextgrößen wieder normal, sonst wird es eng zu lesen. */
h1, .anzeige {
  font-size: var(--s-2xl);
  font-variation-settings: "wdth" 80, "opsz" 48;
}
h2 { font-size: var(--s-xl); font-variation-settings: "wdth" 88, "opsz" 32; }
h3 { font-size: var(--s-l);  font-variation-settings: "wdth" 92, "opsz" 20; }

p { margin: 0 0 1em; hyphens: auto; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }
.recht { overflow-wrap: anywhere; }

.lead { font-size: var(--s-l); color: var(--tinte-leise); max-width: 46ch; }

/* Mono-Label: Kapitelmarken, Uhrzeiten, Kürzel. */
.marke {
  font-family: var(--f-mono);
  font-size: var(--s-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* Preise. Tabellenziffern, damit die Kommas in einer Spalte
   untereinander stehen. */
.preis {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tomate);
  white-space: nowrap;
}
.preis--klein { font-size: var(--s-s); font-weight: 500; }

/* ---------- 3. Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--tap);
  padding: 0.6em 1.3em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-text);
  font-size: var(--s-m);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease;
  /* Kein nowrap: "Zahlungspflichtig bestellen" ist bei 360px breiter
     als der Platz und sprengt sonst das Layout. */
  max-width: 100%;
  text-align: center;
}
.knopf:active { transform: translateY(1px); }

/* Der Bestellknopf. Die einzige rote Fläche der Seite. */
.knopf--bestellen {
  background: var(--tomate);
  border-color: var(--tomate);
  color: #fff;
  width: 100%;
}
.knopf--bestellen:hover { background: var(--tomate-tief); border-color: var(--tomate-tief); }

.knopf--haupt {
  background: var(--kobalt);
  border-color: var(--kobalt);
  color: var(--kalk);
}
.knopf--haupt:hover { background: var(--kobalt-tief); border-color: var(--kobalt-tief); }

.knopf--leise {
  background: transparent;
  border-color: var(--linie);
  color: var(--tinte);
}
.knopf--leise:hover { background: var(--teig); border-color: var(--tinte-leise); }

/* Mengenregler. 44px Tap-Ziel direkt dimensioniert — bei
   border-box hilft "klein plus padding" nicht, width deckelt. */
.menge { display: inline-flex; align-items: center; gap: 0; }
.menge__knopf {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--tinte);
  font-size: var(--s-l);
  cursor: pointer;
}
.menge__knopf:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.menge__knopf:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.menge__knopf:hover { background: var(--teig); }
.menge__wert {
  min-width: 2.6rem; height: var(--tap);
  display: grid; place-items: center;
  border-block: 1px solid var(--linie);
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------- 4. Kennzeichnung ---------- */

.kennzeichen { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

.kz {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.1em 0.5em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--s-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.kz--veg   { color: var(--olive); }
.kz--vegan { color: var(--olive); background: color-mix(in srgb, var(--olive) 10%, transparent); }
.kz--scharf { color: var(--tomate); }
.kz--tipp  { color: var(--ocker-tief); background: color-mix(in srgb, var(--ocker) 18%, transparent); border-color: var(--ocker); }

/* Allergenkürzel: Pflichtangabe, aber kein Blickfang. Klein,
   monospaced, in Klammern hinter der Beschreibung. */
.allergene {
  font-family: var(--f-mono);
  font-size: var(--s-xs);
  color: var(--tinte-leise);
  letter-spacing: 0.03em;
}

/* ---------- 5. Speisenzeile und Kategorie ---------- */

.kapitel { margin-block: clamp(2.5rem, 6vw, 4.5rem); }

.kapitel__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--kobalt);
  margin-bottom: 1.6rem;
}
.kapitel__kopf p { color: var(--tinte-leise); font-size: var(--s-s); flex: 1 1 18ch; margin: 0; }

/* Speisenliste als Spaltenfluss, NICHT als Grid: ein Grid richtet
   Reihen an der höchsten Zelle aus und lässt beim Filtern Löcher
   stehen. columns füllt gleichmäßig und verträgt ausgeblendete
   Einträge. */
.speisen { columns: 2; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 46rem) { .speisen { columns: 1; } }

.speise {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie);
}
.speise__kopf { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.speise__nr {
  font-family: var(--f-mono); font-size: var(--s-xs);
  color: var(--tinte-leise); font-weight: 500;
}
.speise__name {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 92, "opsz" 18;
  font-weight: 600; font-size: var(--s-m); line-height: 1.25;
}
/* Alle Elemente der zweiten Spalte bekommen grid-column, sonst
   rutscht das dritte Kind zurück in die schmale erste Spalte und
   wird dort dreimal so hoch. */
.speise__preis { grid-column: 2; grid-row: 1; align-self: baseline; }
.speise__text  { grid-column: 1; font-size: var(--s-s); color: var(--tinte-leise); line-height: 1.45; }
.speise__fuss  { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; margin-top: 0.25rem; }

.speise--aus { opacity: 0.5; }
.speise--aus .speise__preis { color: var(--tinte-leise); text-decoration: line-through; }

/* ---------- 6. Konfigurator ---------- */

.konf { border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--teig); }
.konf__gruppe { border-bottom: 1px solid var(--linie); padding: 1rem 1.2rem; }
.konf__gruppe:last-child { border-bottom: 0; }
.konf__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.konf__pflicht { color: var(--tomate); }

.wahl { display: flex; align-items: center; gap: 0.7rem; min-height: var(--tap); cursor: pointer; }
.wahl input { width: 1.15rem; height: 1.15rem; accent-color: var(--kobalt); flex: none; }
.wahl__name { flex: 1 1 auto; }
.wahl__auf { font-family: var(--f-mono); font-size: var(--s-s); color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.wahl input:checked ~ .wahl__name { font-weight: 600; }

/* ---------- 7. DER PASS ----------

   Das Signatur-Element. Der Pass ist die Durchreiche, an der Küche
   und Gastraum sich treffen. Hier ist er der Warenkorb als offener
   Bon — und nach dem Bezahlen wird aus demselben Element die
   Live-Verfolgung der Bestellung. Ein Element, zwei Leben.

   Kein zweites Effektelement auf der Seite.
   -------------------------------------------------------------- */

.pass {
  background: var(--kobalt);
  color: var(--kalk);
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--kobalt-hell) inset;
}

.pass__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--kobalt-tief);
}
.pass__titel {
  font-family: var(--f-mono); font-size: var(--s-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--kalk);
}
.pass__nummer {
  font-family: var(--f-mono); font-size: var(--s-xs);
  color: var(--kalk-leise); font-variant-numeric: tabular-nums;
}

.pass__bon { padding: 0.6rem 1.1rem; }

/* Die Bonzeile: Menge, Name, Führungspunkte, Preis. Die Punktlinie
   ist das, was den Warenkorb als Bon lesbar macht. */
.bonzeile {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto;
  align-items: baseline;
  gap: 0 0.5rem;
  padding: 0.42rem 0;
  font-size: var(--s-s);
}
.bonzeile__menge {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  color: var(--ocker); font-weight: 600;
}
.bonzeile__name { position: relative; overflow: hidden; }
.bonzeile__name::after {
  content: "";
  position: absolute; bottom: 0.28em; left: 0; right: 0;
  border-bottom: 1px dotted var(--kobalt-hell);
  /* Der Text schiebt die Punkte nach rechts: er liegt in einem
     span mit eigenem Hintergrund darüber. */
  z-index: 0;
}
.bonzeile__name span {
  position: relative; z-index: 1;
  background: var(--kobalt);
  padding-right: 0.4em;
}
.bonzeile__preis {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  color: var(--kalk); font-weight: 500;
}
/* Gewählte Optionen als eingerückte Unterzeilen */
.bonzeile__optionen {
  grid-column: 2 / -1;
  font-family: var(--f-mono); font-size: var(--s-xs);
  color: var(--kalk-leise); line-height: 1.5;
}

.pass__summe {
  display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px dashed var(--kobalt-hell);
  font-family: var(--f-mono); font-size: var(--s-s);
  font-variant-numeric: tabular-nums;
  color: var(--kalk-leise);
}
.pass__summe dt, .pass__summe dd { margin: 0; }
.pass__summe dd { text-align: right; }
.pass__summe .gesamt { color: var(--kalk); font-weight: 700; font-size: var(--s-l); }

.pass__fuss { padding: 0 1.1rem 1.1rem; }
.pass__checkout-aktionen { display: grid; gap: .55rem; }
.pass__checkout-aktionen a[hidden] { display: none; }
.pass__hinweis {
  font-size: var(--s-xs); color: var(--kalk-leise);
  margin-top: 0.7rem; text-align: center; line-height: 1.45;
}

/* --- Zweites Leben: die Live-Verfolgung --- */

.pass__weg { padding: 1.3rem 1.1rem 1.1rem; }

.weg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  position: relative;
}
/* Die Schiene liegt hinter den Stationen. */
.weg::before {
  content: "";
  position: absolute; top: 0.6rem; left: 12.5%; right: 12.5%;
  height: 2px; background: var(--kobalt-hell);
}
.weg__balken {
  position: absolute; top: 0.6rem; left: 12.5%;
  height: 2px; background: var(--ocker);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.station { position: relative; text-align: center; }
.station__punkt {
  width: 1.2rem; height: 1.2rem; margin: 0 auto 0.55rem;
  border-radius: 50%;
  background: var(--kobalt);
  border: 2px solid var(--kobalt-hell);
  position: relative; z-index: 1;
}
.station__name {
  font-family: var(--f-mono); font-size: var(--s-xs);
  letter-spacing: 0.06em; color: var(--kalk-leise); line-height: 1.3;
}
.station__zeit {
  font-family: var(--f-mono); font-size: var(--s-xs);
  font-variant-numeric: tabular-nums; color: var(--kobalt-hell);
  display: block; margin-top: 0.15rem;
}
.station--erledigt .station__punkt { background: var(--ocker); border-color: var(--ocker); }
.station--erledigt .station__name  { color: var(--kalk); }
.station--erledigt .station__zeit  { color: var(--kalk-leise); }

.station--jetzt .station__punkt { background: var(--ocker); border-color: var(--ocker); }
.station--jetzt .station__name  { color: var(--ocker); font-weight: 600; }
.station--jetzt .station__punkt::after {
  content: "";
  position: absolute; inset: -0.35rem;
  border-radius: 50%; border: 2px solid var(--ocker);
  animation: puls 2s ease-out infinite;
}
@keyframes puls {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.5);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .station--jetzt .station__punkt::after { animation: none; opacity: 0.5; transform: scale(1.1); }
}

.pass__zusage {
  text-align: center; margin-top: 1.4rem;
  padding-top: 1.1rem; border-top: 1px dashed var(--kobalt-hell);
}
.pass__zusage .zeit {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 82, "opsz" 40;
  font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 700;
  color: var(--kalk); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pass__zusage .was {
  font-family: var(--f-mono); font-size: var(--s-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kalk-leise); display: block; margin-top: 0.5rem;
}

/* ---------- 8. Küchenbildschirm ---------- */

.kueche {
  background: var(--k-grund);
  color: var(--k-text);
  border-radius: var(--radius-gross);
  padding: clamp(0.9rem, 2vw, 1.4rem);
}

.bon {
  background: var(--k-karte);
  border: 1px solid var(--k-linie);
  border-left: 5px solid var(--k-neu);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.bon--arbeit { border-left-color: var(--k-arbeit); }
.bon--fertig { border-left-color: var(--k-fertig); }

.bon__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
}
.bon__nr {
  font-family: var(--f-mono); font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.bon__art {
  font-family: var(--f-mono); font-size: var(--s-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.25em 0.7em; border-radius: 999px;
  background: var(--k-neu); color: var(--k-grund);
}
.bon--arbeit .bon__art { background: var(--k-arbeit); }
.bon--fertig .bon__art { background: var(--k-fertig); }

.bon__zeit {
  font-family: var(--f-mono); font-size: var(--s-s);
  color: var(--k-arbeit); font-variant-numeric: tabular-nums;
}

/* Größer als auf der Gastseite: das wird aus zwei Metern gelesen. */
.bon__posten { list-style: none; margin: 0 0 1rem; padding: 0; }
.bon__posten li {
  display: grid; grid-template-columns: 2.2rem 1fr;
  gap: 0.6rem; padding: 0.4rem 0;
  font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.35;
}
.bon__posten b {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  color: var(--k-arbeit); font-size: 1.05em;
}
.bon__posten em {
  display: block; font-style: normal;
  font-family: var(--f-mono); font-size: 0.78em;
  color: #97A8BC; line-height: 1.45; margin-top: 0.1rem;
}
.bon__notiz {
  background: color-mix(in srgb, var(--k-neu) 16%, transparent);
  border-left: 3px solid var(--k-neu);
  padding: 0.5rem 0.75rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--s-s); margin-bottom: 1rem;
}

/* Tap-Ziele in der Küche mindestens 56px: nasse Hände, Zeitdruck. */
.bon__aktionen { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.k-knopf {
  flex: 1 1 8rem; min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--k-linie); border-radius: var(--radius);
  background: transparent; color: var(--k-text);
  font-family: var(--f-text); font-size: var(--s-m); font-weight: 600;
  cursor: pointer;
}
.k-knopf--haupt { background: var(--k-fertig); border-color: var(--k-fertig); color: var(--k-grund); }
.k-knopf:hover { border-color: var(--k-text); }
.k-knopf--haupt:hover { background: #9FC790; border-color: #9FC790; }

/* ============================================================
   9  Gastseite: Kopf, Hero, Fuß
   ============================================================ */

.sprungmarke {
  position: fixed; left: 1rem; top: -5rem; z-index: 100;
  background: var(--kobalt); color: var(--kalk);
  padding: 0.7rem 1.1rem; border-radius: 0 0 var(--radius) 0;
}
.sprungmarke:focus { top: 0; }

.kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--kobalt); color: var(--kalk);
}
.kopf__innen {
  width: var(--breite); margin-inline: auto;
  padding: 0.6rem var(--rand);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
}
.kopf__marke { text-decoration: none; color: inherit; margin-right: auto; display: block; }
.kopf__logo { display: block; width: clamp(8.5rem, 28vw, 14rem); height: auto; object-fit: contain; object-position: left center; }
.kopf__logo--rund {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; object-fit: contain;
}
.kopf__name {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-variation-settings: "wdth" 82, "opsz" 24;
  font-size: 1.15rem; line-height: 1.1; letter-spacing: -0.01em;
}
.kopf__unter {
  display: block; font-family: var(--f-mono); font-size: var(--s-xs);
  color: var(--kalk-leise); letter-spacing: 0.05em;
}
.kopf__navi { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; align-items: center; }
/* Spezifität: .kopf__navi a schlägt .knopf--* — Farben hier deshalb
   bewusst gesetzt, sonst wird ein Knopf in der Navigation unlesbar. */
.kopf__navi a {
  color: var(--kalk); text-decoration: none;
  font-size: var(--s-s); font-weight: 600;
  min-height: var(--tap); display: inline-flex; align-items: center;
}
.kopf__navi a:hover, .kopf__navi a[aria-current="page"] { color: var(--ocker); }
.kopf__tel { font-family: var(--f-mono); font-weight: 500 !important; }
.kopf__meta { display: flex; align-items: center; gap: 1rem; }
.kopf__meta .kopf__tel {
  min-height: var(--tap); display: inline-flex; align-items: center;
  color: var(--kalk); text-decoration: none;
}
.kopf__tel--symbol {
  width: 36px; height: 36px; justify-content: center; border-radius: 50%;
  border: 1px solid rgba(228, 162, 58, .38); color: var(--notna-gold, var(--ocker));
}
.kopf__meta .kopf__tel--symbol { min-height: 36px; }
.kopf__tel--symbol svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.kopf__zustand {
  font-family: var(--f-mono); font-size: var(--s-xs);
  letter-spacing: 0.08em; color: var(--kalk-leise);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.kopf__zustand::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--tomate-hell);
}
.kopf__zustand--offen { color: var(--olive-hell); }
.kopf__zustand--offen::before { background: var(--olive-hell); }

.hero { background: var(--kobalt); color: var(--kalk); padding-block: clamp(3rem, 9vw, 6rem); }
.hero__marke { color: var(--ocker); margin-bottom: 1rem; }
.hero__titel {
  font-size: var(--s-2xl); font-family: var(--f-display); font-weight: 700;
  font-variation-settings: "wdth" 80, "opsz" 48;
  line-height: 0.98; letter-spacing: -0.025em; margin-bottom: 1.2rem;
}
.hero__lead { color: var(--kalk-leise); max-width: 44ch; }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero__knoepfe .knopf--bestellen { width: auto; }
.hero__knoepfe .knopf--leise { color: var(--kalk); border-color: var(--kobalt-hell); font-family: var(--f-mono); }
.hero__knoepfe .knopf--leise:hover { background: var(--kobalt-hell); border-color: var(--kobalt-hell); }
.hero__zustand {
  margin-top: 1.6rem; color: var(--kalk-leise); font-size: var(--s-s);
  display: flex; align-items: center; gap: 0.5rem;
}
.punkt { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tomate-hell); flex: none; }
.punkt--an { background: var(--olive-hell); }

.kapitel__kopf--hell { border-bottom-color: var(--ocker); }
.kapitel__mehr { margin-top: 2rem; }
/* NUR oberhalb des Umbruchs. Als freistehende Regel stuende sie im
   Stylesheet HINTER dem "@media (max-width: 46rem) { .speisen { columns: 1 } }"
   und wuerde es bei gleicher Spezifitaet aushebeln - die Karte blieb
   dann auf dem Handy zweispaltig und der Knopf sprengte die Spalte. */
@media (min-width: 46.01rem) { .speisen--vier { columns: 2; } }
@media (max-width: 46rem)    { .speisen--vier { columns: 1; } }

/* Ablauf: hier ist die Nummerierung echt — es ist eine Reihenfolge. */
.ablauf { background: var(--teig); padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.ablauf__liste {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem;
}
@media (max-width: 62rem) { .ablauf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .ablauf__liste { grid-template-columns: minmax(0, 1fr); } }
.ablauf__nr {
  display: block; font-family: var(--f-mono); font-size: var(--s-s);
  font-weight: 700; color: var(--tomate); margin-bottom: 0.5rem;
}
.ablauf__liste h3 { margin-bottom: 0.35rem; }
.ablauf__liste p { color: var(--tinte-leise); font-size: var(--s-s); }

/* Kein Raster: die Anzahl der Lieferzonen ist je Kunde anders, und
   ein Raster laesst dann Loecher in der letzten Reihe. Flex mit
   grow verteilt den Rest auf die vorhandenen Kacheln - da kann
   gar kein Loch entstehen. */
.zonen { display: flex; flex-wrap: wrap; gap: 1px;
         background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: hidden; }
.zone { flex: 1 1 min(15rem, 100%); background: var(--kalk); padding: 1rem 1.1rem; display: grid; gap: 0.15rem; align-content: start; }
.zone__plz { font-family: var(--f-mono); font-weight: 700; color: var(--kobalt); }
.zone__ort { font-weight: 600; }
.zone__wert { font-size: var(--s-s); color: var(--tinte-leise); font-family: var(--f-mono); line-height: 1.5; }
.zone__dauer { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ocker-tief); }

.fuss { background: var(--kobalt); color: var(--kalk); padding-block: clamp(2.5rem, 6vw, 4rem) 0; margin-top: 4rem; }
.fuss__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 52rem) { .fuss__raster { grid-template-columns: minmax(0, 1fr); } }
.fuss__titel { font-size: var(--s-l); color: var(--kalk); margin-bottom: 0.7rem; }
.fuss__zeile { color: var(--kalk-leise); font-size: var(--s-s); line-height: 1.7; }
.fuss__klein { font-size: var(--s-xs); }
.fuss a { color: var(--kalk); }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  justify-content: space-between; align-items: center;
  margin-top: 2.5rem; padding-block: 1.2rem;
  border-top: 1px solid var(--kobalt-hell);
  font-size: var(--s-xs); color: var(--kalk-leise);
}
.fuss__unten p { margin: 0; }
.fuss__unten nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }

.zeitliste { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.2rem; margin: 0; font-size: var(--s-s); }
.zeitliste dt { color: var(--kalk-leise); }
.zeitliste dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.zeitliste--zu { color: var(--kalk-leise); }

/* ============================================================
   10  Speisekarte: Kopf, Filter, Legende
   ============================================================ */

.karte-kopf { padding-block: clamp(2rem, 5vw, 3.2rem) 0; }
.karte-kopf h1 { margin-block: 0.3rem 1.5rem; }

/* Negative Ränder: sonst erzeugt der Scrollcontainer bei 320 px
   Dokumentüberlauf, weil die Hülle bereits Innenabstand hat. */
.filterleiste {
  display: flex; gap: 0.5rem; overflow-x: auto;
  margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand);
  padding-block: 0.2rem 0.6rem;
  scrollbar-width: thin;
}
.chip {
  flex: none; min-height: var(--tap); padding: 0.4rem 1.1rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: transparent; color: var(--tinte);
  font-family: var(--f-mono); font-size: var(--s-xs);
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.chip:hover { border-color: var(--kobalt); }
.chip[aria-pressed="true"] { background: var(--kobalt); border-color: var(--kobalt); color: var(--kalk); }
.filter-zahl { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--tinte-leise); min-height: 1.2em; margin: 0.3rem 0 0; }

.kapitelnavi-rahmen {
  --kapitelnavi-hoehe: 3.65rem;
  position: sticky; top: var(--kopf-sticky-hoehe, 5.75rem); z-index: 29;
  width: 100%; border-bottom: 1px solid var(--notna-line);
  background: color-mix(in srgb, var(--notna-paper) 94%, transparent);
  box-shadow: 0 8px 24px rgba(23, 20, 15, .08);
  backdrop-filter: blur(14px);
}
.kapitelnavi {
  display: flex; flex-wrap: nowrap; gap: .45rem; overflow-x: auto;
  margin-inline: auto; padding-block: .55rem;
  scroll-padding-inline: var(--rand); scrollbar-width: none;
  overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
}
.kapitelnavi::-webkit-scrollbar { display: none; }
.kapitelnavi a {
  flex: none; min-height: 2.55rem; padding: .5rem .9rem;
  display: inline-flex; align-items: center;
  border: 1px solid transparent; border-radius: 999px;
  color: var(--notna-muted); text-decoration: none; white-space: nowrap;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.kapitelnavi a:hover { color: var(--notna-red); border-color: var(--notna-line); }
.kapitelnavi a[aria-current="location"] {
  color: #fff; background: var(--notna-red); border-color: var(--notna-red);
}
.kapitelnavi a:focus-visible { outline: 3px solid var(--notna-gold); outline-offset: 2px; }

.kapitel { scroll-margin-top: calc(var(--kopf-sticky-hoehe, 5.75rem) + var(--kapitelnavi-hoehe) + 1rem); }

@media (max-width: 72rem) {
  .kapitelnavi-rahmen { top: var(--kopf-sticky-hoehe, 3.75rem); }
}
@media (max-width: 46rem) {
  .kapitelnavi-rahmen { top: var(--kopf-sticky-hoehe, 5.65rem); }
  .kapitelnavi { padding-block: .45rem; }
  .kapitelnavi a { min-height: 2.5rem; padding-inline: .78rem; font-size: .67rem; }
  .kapitel__kopf h2 { font-size: clamp(2rem, 10vw, 2.6rem); overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .kapitelnavi a { transition: none; }
}

.speise__legen {
  margin-left: auto; min-height: 40px; padding: 0.3rem 0.9rem;
  border: 1px solid var(--kobalt); border-radius: 999px;
  background: transparent; color: var(--kobalt);
  font-family: var(--f-text); font-size: var(--s-s); font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.speise__legen:hover { background: var(--kobalt); color: var(--kalk); }

.legende-block { background: var(--teig); padding-block: clamp(2.5rem, 6vw, 4rem); margin-top: 3rem; }
.legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.8rem; }
@media (max-width: 40rem) { .legende { grid-template-columns: minmax(0, 1fr); } }
.legende__titel { font-size: var(--s-m); margin-bottom: 0.6rem; }
.legende__zeile { font-size: var(--s-xs); color: var(--tinte-leise); padding: 0.12rem 0; }
.legende__zeile b { font-family: var(--f-mono); color: var(--tinte); font-weight: 600; margin-right: 0.3em; }

/* ============================================================
   11  Der Pass als Leiste
   ============================================================ */

.pass-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: stretch;
  pointer-events: none;
}
.pass-leiste > * { pointer-events: auto; }

.pass-leiste__griff {
  order: 2;
  display: flex; align-items: center; gap: 0.9rem;
  width: min(30rem, 100%); margin-inline: auto;
  min-height: 3.6rem; padding: 0.6rem 1.1rem;
  border: 0; border-radius: var(--radius-gross) var(--radius-gross) 0 0;
  background: var(--tomate); color: #fff; cursor: pointer;
  font-family: var(--f-text); font-size: var(--s-m); font-weight: 600;
  box-shadow: 0 -6px 24px rgba(20, 40, 74, 0.28);
}
.pass-leiste__griff:hover { background: var(--tomate-tief); }
.pass-leiste__anzahl {
  min-width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, 0.22);
  font-family: var(--f-mono); font-weight: 700; font-size: var(--s-s);
}
.pass-leiste__wort { margin-right: auto; }
.pass-leiste__summe { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 700; }

.pass-tafel {
  order: 1;
  width: min(30rem, 100%); margin-inline: auto;
  max-height: min(70vh, 34rem); overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(20, 40, 74, 0.35);
  border-radius: var(--radius-gross) var(--radius-gross) 0 0;
}
.pass-tafel .pass { border-radius: var(--radius-gross) var(--radius-gross) 0 0; }
.pass__zu {
  background: transparent; border: 0; color: var(--kalk-leise);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  width: var(--tap); height: var(--tap); display: grid; place-items: center;
}
.pass__zu:hover { color: var(--kalk); }
body.pass-offen { overflow: hidden; }

/* Vier Spalten: Menge, Name, Preis, Regler. Die Optionszeile darf
   NUR bis Spalte 3 laufen - sonst belegt sie auch die vierte, und
   die Mengenknoepfe rutschen in die naechste Zeile. Klassischer Fall
   von "mehr Kinder als Spalten". */
.bonzeile--bedienbar { grid-template-columns: 1.9rem 1fr auto auto; }
.bonzeile--bedienbar .bonzeile__optionen { grid-column: 2 / 4; }
.bonzeile__regler {
  grid-column: 4; grid-row: 1;
  display: inline-flex; gap: 0.2rem; margin-left: 0.6rem; align-self: center;
}
.bonzeile__knopf {
  width: 1.9rem; height: 1.9rem; border-radius: var(--radius);
  border: 1px solid var(--kobalt-hell); background: transparent;
  color: var(--kalk); cursor: pointer; font-size: var(--s-m); line-height: 1;
}
.bonzeile__knopf:hover { background: var(--kobalt-hell); }
.pass__summe__klein { font-size: var(--s-xs) !important; opacity: 0.85; }

/* Die Stationen richten sich nach der Anzahl — Lieferung hat andere
   als Abholung. */
.weg { grid-template-columns: repeat(var(--stationen, 4), minmax(0, 1fr)); }
.pass--fest { position: static; }

/* ============================================================
   12  Konfigurator-Dialog
   ============================================================ */

.konf-dialog {
  border: 0; padding: 0; border-radius: var(--radius-gross);
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(88vh, 46rem);
  background: var(--kalk); color: var(--tinte);
  box-shadow: 0 20px 60px rgba(20, 40, 74, 0.4);
}
.konf-dialog::backdrop { background: rgba(20, 40, 74, 0.55); }
.konf-dialog__form { display: flex; flex-direction: column; max-height: inherit; }
.konf-dialog__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem; background: var(--kobalt); color: var(--kalk);
}
.konf-dialog__kopf h2 { font-size: var(--s-l); color: var(--kalk); }
.konf-dialog__inhalt { overflow-y: auto; padding: 0; }
.konf-dialog__inhalt .konf__gruppe { border: 0; border-bottom: 1px solid var(--linie); margin: 0; padding: 1rem 1.2rem; }
.konf-dialog__inhalt legend { padding: 0; font-weight: 600; }
.konf-dialog__fuss { border-top: 1px solid var(--linie); padding: 1rem 1.2rem; background: var(--teig); }
.konf-hinweis { display: block; margin-bottom: 0.9rem; }
.konf-hinweis .marke { display: block; margin-bottom: 0.3rem; }
.konf-hinweis input {
  width: 100%; min-height: var(--tap); padding: 0.5rem 0.7rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  font-family: var(--f-text); font-size: var(--s-m); background: var(--kalk);
}
.konf-dialog__aktionen { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.konf-dialog__aktionen .knopf { flex: 1 1 12rem; }

/* ============================================================
   13  Kasse
   ============================================================ */

.kasse { padding-block: clamp(2rem, 5vw, 3.2rem); padding-bottom: 8rem; }
.kasse h1 { margin-block: 0.3rem 2rem; }
.kasse__leer { padding: 3rem 0; }
.kasse__leer .lead { margin-bottom: 1.5rem; }
.kasse__form { display: grid; gap: 1.6rem; max-width: 48rem; }

.feldblock { border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.2rem 1.3rem; margin: 0; background: var(--kalk); }
.feldblock__titel { font-family: var(--f-display); font-weight: 700; font-size: var(--s-l);
                    font-variation-settings: "wdth" 92, "opsz" 20; padding: 0 0 0.9rem; }

.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
@media (max-width: 34rem) { .felder { grid-template-columns: minmax(0, 1fr); } }
.feld { display: grid; gap: 0.3rem; }
.feld--breit { grid-column: 1 / -1; }
.feld > span { font-size: var(--s-s); font-weight: 600; }
.feld__optional { font-weight: 400; color: var(--tinte-leise); font-size: var(--s-xs); }
.feld input, .feld select {
  width: 100%; min-height: var(--tap); padding: 0.5rem 0.7rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  font-family: var(--f-text); font-size: var(--s-m);
  background: var(--kalk); color: var(--tinte);
}
.feld input:focus, .feld select:focus { border-color: var(--kobalt); }
.feld--fehler { border-color: var(--tomate) !important; background: color-mix(in srgb, var(--tomate) 6%, var(--kalk)); }
.feld__meldung { font-size: var(--s-s); margin: 0.7rem 0 0; min-height: 1.2em; }
.feld__meldung--gut { color: var(--olive); }
.feld__meldung--fehler { color: var(--tomate); }

.wahlkacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
@media (max-width: 34rem) { .wahlkacheln { grid-template-columns: minmax(0, 1fr); } }
.wahlkachel { position: relative; display: block; cursor: pointer; }
.wahlkachel input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahlkachel__inhalt {
  display: grid; gap: 0.2rem; min-height: 100%;
  padding: 0.9rem 1rem;
  border: 2px solid var(--linie); border-radius: var(--radius);
  background: var(--kalk); transition: border-color 140ms ease, background-color 140ms ease;
}
.wahlkachel__inhalt strong { font-size: var(--s-m); }
.wahlkachel__inhalt span { font-size: var(--s-s); color: var(--tinte-leise); }
.wahlkachel__preis { font-family: var(--f-mono); font-size: var(--s-xs) !important; color: var(--ocker-tief) !important; }
.wahlkachel input:checked + .wahlkachel__inhalt { border-color: var(--kobalt); background: var(--teig); }
.wahlkachel input:focus-visible + .wahlkachel__inhalt { outline: 3px solid var(--ocker); outline-offset: 2px; }
.wahlkachel--aus { opacity: 0.55; cursor: not-allowed; }

.zonen-hilfe { margin-top: 0.9rem; font-size: var(--s-s); }
.zonen-hilfe summary { cursor: pointer; color: var(--tinte-leise); min-height: var(--tap); display: flex; align-items: center; }
.zonen-hilfe ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--tinte-leise); line-height: 1.7; }
.zonen-hilfe b { font-family: var(--f-mono); color: var(--tinte); }

.kasse__abschluss { border: 1px solid var(--kobalt); border-radius: var(--radius-gross); padding: 1.3rem; background: var(--teig); }
.pass__summe--hell { color: var(--tinte-leise); border-top: 0; padding: 0 0 1rem; }
.pass__summe--hell .gesamt { color: var(--tinte); }
.kasse__fehler {
  background: color-mix(in srgb, var(--tomate) 12%, transparent);
  border-left: 3px solid var(--tomate); color: var(--tomate);
  padding: 0.7rem 0.9rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 1rem; font-size: var(--s-s); font-weight: 600;
}
.kasse__recht { font-size: var(--s-xs); color: var(--tinte-leise); margin: 1rem 0 0; line-height: 1.6; }

/* ============================================================
   14  Bestätigung und Rückmeldung
   ============================================================ */

.bestaetigung { padding-block: clamp(2rem, 5vw, 3.5rem); padding-bottom: 7rem; }
.bestaetigung__raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 56rem) { .bestaetigung__raster { grid-template-columns: minmax(0, 1fr); } }
.bestaetigung__titel { margin-block: 0.3rem 0.8rem; }
.bestaetigung .lead { margin-bottom: 1.8rem; }
.bestaetigung__seite h2 { margin-bottom: 1rem; }
.schritte { counter-reset: schritt; list-style: none; margin: 0 0 1.8rem; padding: 0; }
.schritte li { position: relative; padding: 0 0 0.9rem 2rem; font-size: var(--s-s); color: var(--tinte-leise); line-height: 1.6; }
.schritte li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: 0.05em;
  font-family: var(--f-mono); font-weight: 700; color: var(--tomate); font-size: var(--s-s);
}
.schritte b { color: var(--tinte); }
.notiz-block { margin-top: 1.8rem; padding: 1rem 1.1rem; background: var(--teig); border-radius: var(--radius-gross); }
.notiz-block__link { font-family: var(--f-mono); font-size: var(--s-s); word-break: break-all; margin: 0.3rem 0 0.5rem; }

.rueckmeldung {
  position: fixed; left: 50%; bottom: 5.2rem; transform: translate(-50%, 1rem);
  z-index: 45; max-width: min(26rem, calc(100vw - 2rem));
  background: var(--kobalt-tief); color: var(--kalk);
  padding: 0.75rem 1.1rem; border-radius: var(--radius);
  font-size: var(--s-s); font-weight: 600; text-align: center;
  box-shadow: 0 8px 30px rgba(20, 40, 74, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.rueckmeldung--sichtbar { opacity: 1; transform: translate(-50%, 0); }
.rueckmeldung--warnung { background: var(--tomate); }

/* ============================================================
   15  Bewegung: Scroll-Reveal
   ============================================================

   Klasse "reveal" ans Element, JS staffelt den Versatz. Das ist der
   Qualitätsboden, kein Effekt — "Der Pass" bleibt das einzige
   Signatur-Element der Seite.
   ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s cubic-bezier(.2,.6,.2,1), transform .65s cubic-bezier(.2,.6,.2,1);
}
.reveal.sichtbar { opacity: 1; transform: none; }

/* Ohne JavaScript darf nichts unsichtbar bleiben. Die Klasse "hat-js"
   setzt das Skript selbst — fehlt sie, ist alles sofort da. */
html:not(.hat-js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   16  Majolika-Kacheln
   ============================================================ */

.kachel-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Der Musterteppich liegt HINTER dem Inhalt und darf nie klickbar sein. */
.hero__grund,
.kueche-band__grund {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.hero__grund svg,
.kueche-band__grund svg { display: block; width: 100%; height: 100%; }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; }
.hero__innen {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 60rem) {
  .hero__innen { grid-template-columns: minmax(0, 1fr); }
}

/* Der Text braucht einen ruhigen Grund, sonst konkurriert das Muster
   mit der Schrift. Ein weicher Verlauf statt einer harten Fläche. */
.hero__text { position: relative; }
.hero__text::before {
  content: "";
  position: absolute; inset: -3rem -4rem;
  background: radial-gradient(ellipse at 30% 50%,
    var(--kobalt) 0%, var(--kobalt) 42%, transparent 78%);
  z-index: -1;
}

/* ---------- Die Kachelwand ---------- */

.hero__wand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: clamp(.5rem, 1.4vw, .9rem);
}
/* Drei Fliesen, versetzt gesetzt: die große links über zwei Reihen,
   zwei kleinere rechts. Ein volles Raster ohne Loch. */
.fliese--1 { grid-column: 1; grid-row: 1 / 3; }
.fliese--2 { grid-column: 2; grid-row: 1 / 2; }
.fliese--3 { grid-column: 2; grid-row: 2 / 4; }

.fliese {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--kalk);
  box-shadow: 0 8px 30px rgba(10, 22, 44, .32);
  transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease;
}
.fliese--1 { aspect-ratio: 1 / 1.25; }
.fliese--3 { aspect-ratio: 1 / 1.15; }

.fliese:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(10, 22, 44, .42); }
@media (prefers-reduced-motion: reduce) { .fliese:hover { transform: none; } }

.fliese img,
.fliese__muster { position: absolute; inset: 0; width: 100%; height: 100%; }
.fliese img { object-fit: cover; }

/* Das Schild: wie auf einer bemalten Fliese. Liegt über Muster wie Foto,
   deshalb der abdunkelnde Verlauf — sonst wäre es auf hellem Foto weg. */
.fliese__schild {
  position: absolute; inset: auto 0 0 0;
  display: grid; gap: .1rem;
  padding: 2.4rem .85rem .8rem;
  background: linear-gradient(to top, rgba(20, 40, 74, .92) 12%, transparent 100%);
  color: var(--kalk);
}
.fliese__name {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 88, "opsz" 20;
  font-weight: 700; font-size: var(--s-m); line-height: 1.15;
}
.fliese__preis {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--s-s); font-weight: 600; color: var(--ocker);
}

/* ---------- Band "Aus der Küche" ---------- */

.kueche-band {
  position: relative; overflow: hidden;
  background: var(--kobalt); color: var(--kalk);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
.kueche-band__innen {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 56rem) { .kueche-band__innen { grid-template-columns: minmax(0, 1fr); } }
.kueche-band h2 { color: var(--kalk); margin-bottom: .8rem; }
.kueche-band .lead { color: var(--kalk-leise); }
.kueche-band__marke { color: var(--ocker); margin-bottom: .8rem; }

/* Vier Zahlen, zwei Spalten — das Raster geht immer auf. */
.zahlenband {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 0;
  background: var(--kobalt-hell);
  border: 1px solid var(--kobalt-hell); border-radius: var(--radius-gross);
  overflow: hidden;
}
.zahlenband > div { background: var(--kobalt-tief); padding: 1.1rem 1.2rem; }
.zahlenband dt {
  font-family: var(--f-mono); font-size: var(--s-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--kalk-leise);
  margin-bottom: .2rem;
}
.zahlenband dd {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 80, "opsz" 40;
  font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1;
  color: var(--ocker); font-variant-numeric: tabular-nums;
}

/* ---------- Bild in der Speisenzeile ---------- */

.speise__bild {
  grid-column: 2; grid-row: 1 / span 3;
  width: 5.5rem; height: 5.5rem;
  border-radius: var(--radius); overflow: hidden;
  background: var(--teig);
  align-self: start;
}
.speise__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mit Bild wandert der Preis unter den Namen statt in die Bildspalte. */
.speise--mit-bild { grid-template-columns: 1fr auto 5.5rem; }
.speise--mit-bild .speise__preis { grid-column: 2; }
.speise--mit-bild .speise__bild { grid-column: 3; }
@media (max-width: 30rem) {
  .speise__bild { width: 4rem; height: 4rem; }
  .speise--mit-bild { grid-template-columns: 1fr auto 4rem; }
}

/* ============================================================
   17  Kundenkonto
   ============================================================ */

.konto-schmal { max-width: 40rem; }
.konto-schmal h1 { margin-block: .3rem 1rem; }
.konto-schmal .lead { margin-bottom: 2rem; }

.konto-form { margin-block: 1.6rem 1rem; max-width: 26rem; }
.konto-form .knopf { width: 100%; }

/* Ein Zifferncode wird abgetippt oder eingefügt — weit gesperrt und
   in Mono, damit man beim Vergleichen nicht verrutscht. */
.konto-code-feld {
  font-family: var(--f-mono) !important;
  font-size: 1.5rem !important;
  letter-spacing: .38em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.konto-notcode {
  background: color-mix(in srgb, var(--ocker) 16%, transparent);
  border-left: 4px solid var(--ocker);
  padding: .9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--s-s); line-height: 1.6;
}
.konto-notcode__zahl {
  display: block; margin: .4rem 0 .2rem;
  font-family: var(--f-mono); font-size: 1.8rem; font-weight: 700;
  letter-spacing: .28em; color: var(--tomate);
}

.konto-trenner { border: 0; border-top: 1px solid var(--linie); margin: 3rem 0 2rem; }

.konto-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  justify-content: space-between; margin-block: .3rem 1.6rem;
}
.konto-kopf h1 { margin: 0; }
.konto-kopf form { margin: 0; }

.konto-zahlen {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem;
  padding: 1.2rem 1.4rem; margin-bottom: 2.5rem;
  background: var(--teig); border-radius: var(--radius-gross);
}
.konto-zahlen > div { display: grid; gap: .1rem; }
.konto-zahl {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 700; line-height: 1.1;
}
.konto-wort {
  font-family: var(--f-mono); font-size: var(--s-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise);
}

.konto-titel { margin-block: 2.5rem 1.1rem; }

.konto-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: 1rem; align-items: start;
}
.konto-karte {
  border: 1px solid var(--linie); border-left: 4px solid var(--linie);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  background: var(--kalk);
}
.konto-karte--laeuft { border-left-color: var(--ocker); background: var(--teig); }
.konto-karte--storniert { opacity: .6; }
.konto-karte__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; margin-bottom: .3rem;
}
.konto-karte__nr {
  font-family: var(--f-mono); font-weight: 700; font-size: var(--s-m);
  font-variant-numeric: tabular-nums;
}
.konto-karte__status {
  font-family: var(--f-mono); font-size: var(--s-xs);
  letter-spacing: .06em; color: var(--ocker-tief);
  padding: .1em .55em; border: 1px solid var(--ocker); border-radius: 999px;
  white-space: nowrap;
}
.konto-karte--storniert .konto-karte__status { color: var(--tomate); border-color: var(--tomate); }
.konto-karte__zeile { font-size: var(--s-s); color: var(--tinte-leise); margin: 0 0 .9rem; }
.konto-karte__fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding-top: .8rem; border-top: 1px solid var(--linie);
}
.konto-karte__fuss .preis { margin-right: auto; }
.konto-karte__fuss .knopf { min-height: 40px; padding: .35rem .9rem; font-size: var(--s-s); width: auto; }

.konto-leer { color: var(--tinte-leise); padding: 1.5rem 0; }

.konto-daten { background: var(--teig); border-radius: var(--radius-gross); padding: 1.2rem 1.4rem; }
.konto-daten dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.4rem; margin: 0 0 1rem; }
.konto-daten dt { color: var(--tinte-leise); font-size: var(--s-s); }
.konto-daten dd { margin: 0; font-size: var(--s-s); }
.konto-daten .mono { font-family: var(--f-mono); }
@media (max-width: 32rem) {
  .konto-daten dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .konto-daten dd { margin-bottom: .6rem; }
}

/* ============================================================
   18  Design-Durchgang: Typografie, Karten, Glut
   ============================================================ */

/* ---------- Hero: die Aussage beherrscht den Bildschirm ---------- */

.hero { padding-block: clamp(3rem, 9vw, 7rem); }

.hero__titel {
  font-size: var(--s-3xl);
  font-variation-settings: "wdth" 76, "opsz" 60;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
/* Die zweite Zeile trägt die Hitze. Ocker statt Kalk — das ist der
   einzige Ort, an dem die Akzentfarbe groß auftritt. */
.hero__titel .glut { color: var(--ocker); display: block; }

.hero__lead { font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); max-width: 38ch; }
.hero__marke { margin-bottom: 1.4rem; }

/* Ohne Fotos war der Ueberhang nach rechts ein netter Bruch. Mit
   Fotos zerschneidet er die Gerichte mittendrin und sieht kaputt aus
   statt gewollt. Die Wand bleibt jetzt vollstaendig sichtbar - sie
   bekommt stattdessen mehr Breite. */
@media (min-width: 60rem) {
  .hero__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}

/* ---------- Gerichtkarten ---------- */

.karten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
}
@media (max-width: 68rem) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .karten { grid-template-columns: minmax(0, 1fr); } }

.karte {
  display: flex; flex-direction: column;
  background: var(--kalk);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.karte:hover {
  transform: translateY(-3px);
  border-color: var(--kobalt);
  box-shadow: 0 12px 32px rgba(20, 40, 74, .16);
}
@media (prefers-reduced-motion: reduce) { .karte:hover { transform: none; } }
.karte--aus { opacity: .6; }

.karte__flaeche {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  background: var(--teig);
  border-bottom: 1px solid var(--linie);
}
.karte__flaeche img,
.karte__muster { position: absolute; inset: 0; width: 100%; height: 100%; }
.karte__flaeche img { object-fit: cover; }

/* Der Preis sitzt auf der Fläche, nicht unter dem Namen: er ist das
   Zweite, was man ansieht, nicht das Letzte. */
.karte__preis {
  position: absolute; right: .6rem; bottom: .6rem;
  background: var(--tomate); color: #fff;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: var(--s-s);
  padding: .28em .6em; border-radius: var(--radius);
  box-shadow: 0 3px 12px rgba(20, 40, 74, .3);
}

.karte__text { display: flex; flex-direction: column; flex: 1; padding: .9rem 1rem 1rem; gap: .35rem; }

/* PayPal-Rückkehr: eigenständige Bestätigungsfläche statt zweckentfremdeter Produktkarte. */
.paypal-rueckkehr { max-width: 42rem; padding-block: clamp(2rem, 8vw, 4rem); }
.paypal-abschluss {
  display: grid; gap: 1rem; padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--kalk); box-shadow: var(--notna-shadow);
}
.paypal-abschluss > * { margin-block: 0; }
.paypal-abschluss .marke { color: var(--tinte); }
.paypal-abschluss form { margin-top: .5rem; }
.karte__name {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 86, "opsz" 22;
  font-weight: 700; font-size: 1.1rem; line-height: 1.12; margin: 0;
}
.karte__zeile {
  font-size: var(--s-s); color: var(--tinte-leise); line-height: 1.45;
  margin: 0;
  /* Zwei Zeilen reichen. Ungekappt reissen unterschiedlich lange
     Beschreibungen die Kartenhoehen auseinander. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.karte__fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: auto; padding-top: .8rem;
}
.karte__fuss .kennzeichen { margin-right: auto; }
.karte__legen {
  min-height: 40px; padding: .3rem 1rem;
  border: 1px solid var(--kobalt); border-radius: 999px;
  background: transparent; color: var(--kobalt);
  font-family: var(--f-text); font-size: var(--s-s); font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.karte__legen:hover { background: var(--kobalt); color: var(--kalk); }

/* ---------- Der Ofen: hier darf es heiß werden ---------- */

.ofen {
  position: relative; overflow: hidden;
  background: var(--kobalt-tief); color: var(--kalk);
  padding-block: clamp(3.5rem, 10vw, 7rem);
  margin-block: clamp(3rem, 7vw, 5rem);
}
/* Die Glut. Ein Verlauf aus der unteren Mitte, wie das Licht aus der
   Ofenöffnung. Liegt über dem Kachelmuster, unter dem Text. */
.ofen__glut {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 118%, rgba(217, 164, 65, .55) 0%,
      rgba(192, 57, 46, .28) 38%, transparent 72%);
}
.ofen__innen { position: relative; z-index: 1; text-align: center; }
.ofen__marke { color: var(--ocker); margin-bottom: 1.2rem; }
.ofen__titel {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 78, "opsz" 48;
  font-weight: 700; font-size: var(--s-2xl); line-height: .98;
  letter-spacing: -0.03em; color: var(--kalk); margin-bottom: 1.2rem;
}
.ofen__lead { color: var(--kalk-leise); max-width: 52ch; margin-inline: auto; }

/* Die drei Zahlen sind der Kern der Aussage - also gross, in Ocker,
   ohne Kasten. Drei Spalten, geht immer auf. */
.glutzahlen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (max-width: 40rem) { .glutzahlen { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } }
.glutzahl { display: grid; gap: .2rem; }
.glutzahl__wert {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 76, "opsz" 60;
  font-weight: 700; font-size: clamp(3rem, 10vw, 5.4rem); line-height: .85;
  color: var(--ocker); font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.glutzahl__wort {
  font-family: var(--f-mono); font-size: var(--s-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--kalk-leise);
}

/* ---------- Kapitelköpfe mit mehr Gewicht ---------- */

.kapitel__kopf h2 {
  font-variation-settings: "wdth" 82, "opsz" 40;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.8rem);
  letter-spacing: -0.025em;
}

/* Das Feuerbild hinter dem Ofen-Abschnitt. Stark abgedunkelt und
   entsaettigt: es soll Stimmung tragen, nicht mit dem Text um
   Aufmerksamkeit kaempfen. Der Glut-Verlauf liegt darueber und
   holt die Waerme wieder herein. */
.ofen__bild {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .38;
  filter: saturate(.8) brightness(.62);
}
.ofen { background: var(--kobalt-tief); }

/* ============================================================
   19  NOTNA FUSION — PUBLIC COMMERCE

   Editorial Indian warmth for menu, configurator, Der Pass,
   checkout, order status and guest accounts. All selectors sit on
   the existing markup: routes, IDs and data hooks stay untouched.
   ============================================================ */

/* ---------- Commerce shell ---------- */
body:not(.notna-homepage):not(.a-koerper) {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 8%, rgba(228, 162, 58, .12), transparent 22rem),
    radial-gradient(circle at 92% 32%, rgba(163, 56, 33, .07), transparent 28rem),
    var(--notna-paper);
}
body:not(.notna-homepage):not(.a-koerper) main { min-height: 58vh; }
body:not(.notna-homepage):not(.a-koerper) a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
body:not(.notna-homepage):not(.a-koerper) h1,
body:not(.notna-homepage):not(.a-koerper) h2,
body:not(.notna-homepage):not(.a-koerper) h3,
body:not(.notna-homepage):not(.a-koerper) h4 {
  font-weight: 400;
  letter-spacing: -.025em;
  font-variation-settings: normal;
}
body:not(.notna-homepage):not(.a-koerper) h1 { line-height: .93; }

body:not(.notna-homepage):not(.a-koerper) .kopf {
  background: rgba(8, 6, 4, .97);
  border-bottom: 1px solid rgba(228, 162, 58, .42);
  box-shadow: 0 8px 30px rgba(8, 6, 4, .16);
}
body:not(.notna-homepage):not(.a-koerper) .kopf__innen { padding-block: .72rem; }
body:not(.notna-homepage):not(.a-koerper) .kopf__name {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  font-weight: 400;
  letter-spacing: .01em;
  font-variation-settings: normal;
}
body:not(.notna-homepage):not(.a-koerper) .kopf__unter,
body:not(.notna-homepage):not(.a-koerper) .kopf__navi a,
body:not(.notna-homepage):not(.a-koerper) .kopf__zustand {
  font-family: var(--f-text);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .64rem;
}
body:not(.notna-homepage):not(.a-koerper) .kopf__navi a:hover,
body:not(.notna-homepage):not(.a-koerper) .kopf__navi a[aria-current="page"] { color: var(--notna-gold); }

body:not(.notna-homepage):not(.a-koerper) .marke {
  color: var(--notna-red);
  font-family: var(--f-text);
  font-weight: 700;
  letter-spacing: .2em;
}
body:not(.notna-homepage):not(.a-koerper) .lead { line-height: 1.75; }

.knopf {
  border-radius: 999px;
  font-family: var(--f-text);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding-inline: 1.55rem;
}
.knopf--haupt { background: var(--notna-dark); border-color: var(--notna-dark); color: var(--notna-paper); }
.knopf--haupt:hover { background: var(--notna-red); border-color: var(--notna-red); }
.knopf--bestellen { background: var(--notna-red); border-color: var(--notna-red); }
.knopf--bestellen:hover { background: var(--notna-red-deep); border-color: var(--notna-red-deep); }
.knopf--leise { border-color: var(--notna-line); }
.knopf--leise:hover { background: var(--notna-paper-raised); border-color: var(--notna-ink); }

/* ---------- Menu and category rhythm ---------- */
.karte-kopf {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.2rem, 8vw, 6.5rem) clamp(2.2rem, 5vw, 4rem);
  color: var(--notna-paper);
  background:
    radial-gradient(circle at 82% 15%, rgba(163, 56, 33, .42), transparent 32rem),
    var(--notna-dark);
}
.karte-kopf::after {
  content: "✦";
  position: absolute;
  right: max(var(--rand), calc((100vw - 76rem) / 2));
  top: 50%;
  color: var(--notna-gold);
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  opacity: .18;
  transform: translateY(-50%);
  pointer-events: none;
}
.karte-kopf h1 { position: relative; z-index: 1; font-size: var(--s-2xl); margin-block: .45rem 2rem; }
.karte-kopf .marke { color: var(--notna-gold); }
.filterleiste,
.kapitelnavi { position: relative; z-index: 1; }
.chip {
  border-color: rgba(243, 239, 230, .3);
  color: var(--notna-paper);
  font-family: var(--f-text);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.chip:hover { border-color: var(--notna-gold); }
.chip[aria-pressed="true"] { background: var(--notna-gold); border-color: var(--notna-gold); color: var(--notna-dark); }
.karte-kopf .filter-zahl { color: var(--notna-gold); }
.karte-kopf .kapitelnavi { border-top-color: rgba(243, 239, 230, .18); }
.karte-kopf .kapitelnavi a { color: #c9bcaa; }
.karte-kopf .kapitelnavi a:hover { color: var(--notna-gold); }

.kapitel { margin-block: clamp(3.5rem, 8vw, 6.5rem); }
.kapitel__kopf { border-bottom: 1px solid var(--notna-line); padding-bottom: 1.15rem; margin-bottom: 1.4rem; }
.kapitel__kopf h2 { font-size: clamp(2.3rem, 4.7vw, 4.2rem); font-variation-settings: normal; font-weight: 400; }
.kapitel__kopf p { max-width: 44ch; line-height: 1.65; }
.speisen { columns: initial; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.speise {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--notna-line);
  border-radius: var(--radius-gross);
  background: color-mix(in srgb, var(--notna-paper-raised) 78%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.speise:hover { border-color: color-mix(in srgb, var(--notna-red) 48%, var(--notna-line)); box-shadow: var(--notna-shadow); transform: translateY(-2px); }
.speise__name { font-family: var(--f-display); font-size: 1.35rem; font-weight: 400; font-variation-settings: normal; }
.speise__nr { color: var(--notna-red); font-weight: 700; letter-spacing: .08em; }
.speise__text { line-height: 1.6; }
.speise__preis { color: var(--notna-red); font-weight: 700; }
.speise__bild { width: 6.4rem; height: 6.4rem; border-radius: 48% 48% 6px 6px / 34% 34% 6px 6px; background: var(--teig); }
.speise--mit-bild { grid-template-columns: minmax(0, 1fr) auto 6.4rem; }
.speise__legen,
.karte__legen {
  min-height: var(--tap);
  border-color: var(--notna-red);
  border-radius: 999px;
  color: var(--notna-red);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.speise__legen:hover,
.karte__legen:hover { background: var(--notna-red); border-color: var(--notna-red); color: #fff; }
.kz { font-family: var(--f-text); font-size: .63rem; letter-spacing: .06em; }
.legende-block { background: #e8ddcc; border-block: 1px solid var(--notna-line); }
.legende-block .kapitel__kopf { border-bottom-color: var(--notna-red); }

/* ---------- Configurator ---------- */
.konf-dialog {
  border: 1px solid rgba(228, 162, 58, .4);
  border-radius: 22px;
  background: var(--notna-paper);
  box-shadow: 0 28px 90px rgba(8, 6, 4, .48);
}
.konf-dialog::backdrop { background: rgba(8, 6, 4, .72); backdrop-filter: blur(3px); }
.konf-dialog__kopf { padding: 1.25rem 1.35rem; background: var(--notna-dark); border-bottom: 1px solid rgba(228, 162, 58, .38); }
.konf-dialog__kopf h2 { font-family: var(--f-display); font-size: clamp(1.55rem, 4vw, 2.1rem); font-weight: 400; }
.konf-dialog__inhalt .konf__gruppe { padding: 1.2rem 1.35rem; border-bottom-color: var(--notna-line); }
.konf__kopf legend { font-family: var(--f-display); font-size: 1.2rem; }
.konf__pflicht { color: var(--notna-red); }
.wahl { border-radius: 10px; padding-inline: .45rem; }
.wahl:hover { background: rgba(228, 162, 58, .1); }
.wahl input { accent-color: var(--notna-red); }
.konf-dialog__fuss { background: #e9dfd0; border-top-color: var(--notna-line); }
.konf-hinweis input,
.feld input,
.feld select {
  border-radius: 8px;
  border-color: var(--notna-line);
  background: var(--notna-paper-raised);
}
.konf-hinweis input:focus,
.feld input:focus,
.feld select:focus { border-color: var(--notna-red); }
.menge__knopf { border-color: var(--notna-line); background: var(--notna-paper-raised); }
.menge__knopf:hover { background: var(--notna-gold); }

/* ---------- Der Pass: sticky bar + receipt bottom sheet ---------- */
.pass-leiste::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(8, 6, 4, .68);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
body.pass-offen .pass-leiste::before { opacity: 1; pointer-events: auto; }
body.pass-offen { overflow: hidden; }
.pass-leiste__griff,
.pass-tafel { position: relative; z-index: 1; width: min(38rem, 100%); }
.pass-leiste__griff {
  min-height: 4rem;
  border-radius: 16px 16px 0 0;
  background: var(--notna-gold);
  color: var(--notna-dark);
  box-shadow: 0 -12px 40px rgba(8, 6, 4, .28);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pass-leiste__griff:hover { background: #efb34d; }
.pass-leiste__anzahl { min-width: 2rem; background: var(--notna-dark); color: var(--notna-paper); }
.pass-leiste__summe { font-weight: 700; letter-spacing: .02em; }
.pass-tafel { max-height: min(78vh, 42rem); border-radius: 22px 22px 0 0; box-shadow: 0 -24px 70px rgba(8, 6, 4, .44); }
.pass-tafel .pass { border-radius: 22px 22px 0 0; }
.pass {
  color: var(--notna-ink);
  background: var(--notna-paper-raised);
  border: 1px solid var(--notna-line);
  box-shadow: none;
}
.pass__kopf { padding: .9rem 1.2rem; background: var(--notna-dark); border-bottom: 1px solid rgba(228, 162, 58, .42); }
.pass__titel { color: var(--notna-paper); letter-spacing: .2em; }
.pass__nummer { color: var(--notna-gold); }
.pass__zu { color: #c9bcaa; }
.pass__zu:hover { color: var(--notna-gold); }
.pass__bon { padding: .85rem 1.2rem; }
.bonzeile { padding: .65rem 0; border-bottom: 1px solid color-mix(in srgb, var(--notna-line) 65%, transparent); }
.bonzeile:last-child { border-bottom: 0; }
.bonzeile__menge { color: var(--notna-red); font-weight: 700; }
.bonzeile__name { font-weight: 600; }
.bonzeile__name::after { border-bottom-color: var(--notna-line); }
.bonzeile__name span { background: var(--notna-paper-raised); }
.bonzeile__preis { color: var(--notna-ink); font-weight: 700; }
.bonzeile__optionen { color: var(--notna-muted); padding-top: .18rem; }
.bonzeile__regler { gap: .35rem; }
.bonzeile__knopf {
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--notna-line);
  border-radius: 50%;
  background: var(--notna-paper);
  color: var(--notna-ink);
  font-size: 1.2rem;
}
.bonzeile__knopf:hover { background: var(--notna-gold); border-color: var(--notna-gold); }
.pass__summe { padding: 1rem 1.2rem; color: var(--notna-muted); border-top-color: var(--notna-line); }
.pass__summe .gesamt { color: var(--notna-ink); font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; }
.pass__fuss { padding: 0 1.2rem 1.2rem; }
.pass__hinweis { color: var(--notna-muted); }

/* Status version of Der Pass. */
.pass--fest { overflow: hidden; box-shadow: var(--notna-shadow); }
.pass__weg { background: #15110d; color: var(--notna-paper); }
.weg::before { background: #4b4136; }
.weg__balken { background: var(--notna-gold); }
.station__punkt { background: #15110d; border-color: #66594a; }
.station__name { color: #ad9f8d; }
.station__zeit { color: #80715e; }
.station--erledigt .station__punkt,
.station--jetzt .station__punkt { background: var(--notna-gold); border-color: var(--notna-gold); }
.station--erledigt .station__name { color: var(--notna-paper); }
.station--jetzt .station__name { color: var(--notna-gold); }
.station--jetzt .station__punkt::after { border-color: var(--notna-gold); }
.pass__zusage { border-top-color: #4b4136; }
.pass__zusage .zeit { color: var(--notna-paper); font-family: var(--f-display); font-weight: 400; font-variation-settings: normal; }
.pass__zusage .was { color: #ad9f8d; }

/* ---------- Checkout ---------- */
.kasse { padding-block: clamp(3rem, 7vw, 6rem); }
.kasse h1 { font-size: var(--s-2xl); }
.kasse__form { max-width: 58rem; gap: 1.1rem; }
.feldblock {
  border-color: var(--notna-line);
  border-radius: var(--radius-gross);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: rgba(255, 250, 240, .76);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.feldblock__titel { font-family: var(--f-display); font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 400; font-variation-settings: normal; }
.wahlkachel__inhalt { border: 1px solid var(--notna-line); border-radius: 12px; background: var(--notna-paper-raised); padding: 1rem 1.1rem; }
.wahlkachel__inhalt strong { font-family: var(--f-display); font-size: 1.22rem; font-weight: 400; }
.wahlkachel input:checked + .wahlkachel__inhalt { border-color: var(--notna-red); background: color-mix(in srgb, var(--notna-red) 7%, var(--notna-paper-raised)); box-shadow: 0 0 0 1px var(--notna-red); }
.wahlkachel input:focus-visible + .wahlkachel__inhalt { outline-color: var(--notna-gold); }
.wahlkachel__preis { color: var(--notna-red) !important; }
.kasse__abschluss { border-color: rgba(228, 162, 58, .7); background: #e8dcc9; box-shadow: var(--notna-shadow); }
.pass__summe--hell { background: transparent; color: var(--notna-muted); }
.pass__summe--hell .gesamt { color: var(--notna-ink); }
.kasse__fehler { border-left-color: var(--notna-red); color: var(--notna-red-deep); background: rgba(163,56,33,.1); }

.feldblock__hinweis { color: var(--notna-muted); font-size: var(--s-s); margin-bottom: .9rem; }
.giftcard-zahlung__oder {
  margin: .75rem 0; color: var(--notna-muted); font-size: var(--s-xs);
  font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase;
}
.giftcard-zahlung__eingabe {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .65rem; align-items: end;
}
.giftcard-zahlung__eingabe .feld { min-width: 0; }
#gutschein-anwenden,
#gutschein-entfernen { min-height: 44px; }
#gutschein-entfernen {
  border: 0; background: transparent; color: var(--notna-red);
  font: inherit; font-size: var(--s-s); font-weight: 700;
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
#gutschein-status { margin-top: .75rem; min-height: 1.5em; }

@media (max-width: 700px) {
  .giftcard-zahlung__eingabe { grid-template-columns: minmax(0, 1fr); }
  #gutschein-anwenden,
  #gutschein-entfernen { width: 100%; }
}

/* ---------- Order status, device orders and account ---------- */
.bestaetigung { padding-block: clamp(3rem, 7vw, 6rem); }
.bestaetigung__raster { gap: clamp(2rem, 6vw, 5rem); }
.bestaetigung__titel { font-size: var(--s-2xl); }
.bestaetigung__seite {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-top: 2px solid var(--notna-gold);
  background: rgba(255, 250, 240, .64);
}
.schritte li::before { color: var(--notna-red); }
.notiz-block { background: #e8ddcc; border: 1px solid var(--notna-line); }
.zahlungsabbruch { margin-top: 1.4rem; padding: 1rem 1.1rem; border-left: 3px solid var(--notna-red); background: rgba(163,56,33,.08); }
.zahlungsabbruch p { margin: 0 0 .8rem; font-size: var(--s-s); }
.zahlungsabbruch form { margin: 0; display: grid; gap: .75rem; }
.zahlungsabbruch__bestaetigung { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--s-s); font-weight: 700; cursor: pointer; }
.zahlungsabbruch__bestaetigung input { width: 1.15rem; height: 1.15rem; margin-top: .12rem; flex: 0 0 auto; accent-color: var(--notna-red); }
.zahlungsabbruch .knopf { min-height: 44px; }
.konto-schmal { max-width: 44rem; }
.konto-form { max-width: 31rem; padding: clamp(1.1rem, 3vw, 1.6rem); background: rgba(255,250,240,.72); border: 1px solid var(--notna-line); border-radius: var(--radius-gross); }
.konto-zahlen,
.konto-daten { background: #e8ddcc; border: 1px solid var(--notna-line); }
.konto-zahl { color: var(--notna-red); }
.konto-abschnitt { margin-block: clamp(2.2rem, 6vw, 4.5rem); }
.konto-abschnitt__kopf { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.konto-erfolg { padding: .85rem 1rem; border-left: 3px solid var(--olive); background: rgba(79,112,66,.1); }
.konto-gutschein-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .8rem; max-width: 48rem; margin: 1rem 0 1.4rem; }
.konto-gutschein-form .knopf { min-height: 44px; }
.konto-gutschein-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.konto-gutschein { min-width: 0; padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--notna-line); border-top: 3px solid var(--notna-gold); border-radius: var(--radius-gross); background: rgba(255,250,240,.82); box-shadow: 0 10px 30px rgba(31,21,11,.06); }
.konto-gutschein--leer { border-top-color: var(--notna-muted); }
.konto-gutschein header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.konto-gutschein__referenz { display: block; font-family: var(--f-mono); font-size: var(--s-s); font-weight: 700; }
.konto-gutschein__status { display: inline-block; margin-top: .35rem; color: var(--notna-muted); font-size: var(--s-xs); }
.konto-gutschein__saldo-label { display: block; color: var(--notna-muted); font-size: var(--s-xs); text-align: right; }
.konto-gutschein__saldo { display: block; color: var(--notna-red); font-family: var(--f-mono); font-size: clamp(1.35rem, 4vw, 1.8rem); white-space: nowrap; }
.konto-gutschein__fakten { display: grid; gap: .45rem; margin: 1rem 0; }
.konto-gutschein__fakten div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--notna-line); }
.konto-gutschein__fakten dt { color: var(--notna-muted); }
.konto-gutschein__fakten dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.konto-gutschein__verlauf { margin-top: 1rem; }
.konto-gutschein__verlauf summary { cursor: pointer; font-weight: 700; }
.konto-gutschein__verlauf ul { display: grid; gap: .55rem; padding: .7rem 0 0; list-style: none; }
.konto-gutschein__verlauf li { display: flex; justify-content: space-between; gap: 1rem; }
.konto-gutschein__codefehler { color: var(--notna-red-deep); font-size: var(--s-s); }
.konto-karte { border: 1px solid var(--notna-line); border-top: 3px solid var(--notna-dark); border-left-width: 1px; border-radius: var(--radius-gross); padding: 1.2rem; background: rgba(255,250,240,.78); box-shadow: 0 10px 30px rgba(31,21,11,.06); }
.konto-karte--laeuft { border-top-color: var(--notna-gold); background: #fff7e9; }
.konto-karte__nr { font-family: var(--f-display); font-size: 1.35rem; font-weight: 400; }
.konto-karte__status { color: var(--notna-red); border-color: color-mix(in srgb, var(--notna-red) 45%, transparent); }
.konto-notcode { border-left-color: var(--notna-gold); background: rgba(228,162,58,.13); }
.konto-loeschen { max-width: 44rem; margin-top: 2rem; padding: 1rem 1.1rem; border: 1px solid var(--notna-line); background: rgba(255,250,240,.62); }
.konto-loeschen summary { cursor: pointer; font-weight: 700; }
.konto-loeschen form { display: grid; gap: .8rem; margin-top: 1rem; }
.konto-loeschen .knopf { min-height: 44px; justify-self: start; }
.rueckmeldung { background: var(--notna-dark); border: 1px solid rgba(228,162,58,.45); border-radius: 999px; }
.rueckmeldung--warnung { background: var(--notna-red); }

@media (max-width: 700px) {
  .konto-gutschein-form { grid-template-columns: minmax(0, 1fr); }
  .konto-gutschein-form .knopf,
  .konto-loeschen .knopf { width: 100%; justify-self: stretch; }
  .konto-gutschein header { align-items: stretch; }
  .konto-gutschein__saldo-label,
  .konto-gutschein__saldo { text-align: right; }
}

/* ---------- Footer ---------- */
.fuss { background: var(--notna-dark); border-top: 1px solid rgba(228,162,58,.38); }
.fuss__titel { font-family: var(--f-display); font-weight: 400; }
.fuss__unten { border-top-color: rgba(228,162,58,.24); }

@media (max-width: 72rem) {
  body:not(.notna-homepage):not(.a-koerper) .kopf__innen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marke navi meta";
    gap: .25rem clamp(.5rem, 2.5vw, .85rem);
    padding-block: .5rem;
  }
  body:not(.notna-homepage):not(.a-koerper) .kopf__marke {
    grid-area: marke; margin-right: 0; min-width: 0; align-self: center;
  }
  body:not(.notna-homepage):not(.a-koerper) .kopf__logo {
    width: clamp(7.2rem, 34vw, 10.75rem);
  }
  body:not(.notna-homepage):not(.a-koerper) .kopf__logo--rund {
    width: 48px; height: 48px;
  }
  body:not(.notna-homepage):not(.a-koerper) .kopf__meta {
    grid-area: meta; display: inline-flex; justify-content: flex-end; align-items: center; gap: .4rem;
    min-width: max-content;
  }
  body:not(.notna-homepage):not(.a-koerper) .kopf__meta .kopf__zustand {
    font-size: .56rem; letter-spacing: .08em; white-space: nowrap;
  }
  body:not(.notna-homepage):not(.a-koerper) .kopf__navi {
    grid-area: navi; width: 100%; display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem;
  }
  body:not(.notna-homepage):not(.a-koerper) .kopf__navi a {
    min-height: 34px; justify-content: center; text-align: center; line-height: 1.15;
  }
}

@media (max-width: 46rem) {
  body:not(.notna-homepage):not(.a-koerper) .kopf__innen {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marke meta" "navi navi";
  }
  body:not(.notna-homepage):not(.a-koerper) .kopf__logo--rund {
    width: 44px; height: 44px;
  }
  .speisen { grid-template-columns: minmax(0, 1fr); }
  .karte-kopf::after { right: -1rem; }
  .pass-tafel { max-height: min(82vh, 42rem); }
}

@media (max-width: 34rem) {
  body:not(.notna-homepage):not(.a-koerper) .kopf__innen { gap: .2rem .5rem; }
  body:not(.notna-homepage):not(.a-koerper) .kopf__unter { display: none; }
  body:not(.notna-homepage):not(.a-koerper) .kopf__navi a { font-size: .58rem; }
  .speise { padding: 1rem; }
  .speise__bild { width: 4.6rem; height: 4.6rem; }
  .speise--mit-bild { grid-template-columns: minmax(0, 1fr) auto 4.6rem; }
  .bonzeile--bedienbar { grid-template-columns: 1.55rem minmax(0, 1fr) auto; }
  .bonzeile--bedienbar .bonzeile__optionen { grid-column: 2 / 4; }
  .bonzeile__regler { grid-column: 2 / 4; grid-row: auto; margin: .55rem 0 0; }
  .pass-leiste__griff { border-radius: 12px 12px 0 0; }
}

/* ---------- Mein Notna: Dashboard und Profil ---------- */
.konto-seite > .huelle { max-width: 70rem; }
.konto-dashboard-kopf {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.konto-einleitung { max-width: 48rem; margin-top: .7rem; color: var(--notna-muted); }
.konto-navigation-fehler { margin-block: 1rem; }

.konto-profil { position: relative; flex: 0 1 21rem; z-index: 8; }
.konto-profil > summary {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  min-height: 54px;
  padding: .45rem .65rem;
  border: 1px solid var(--notna-line);
  border-radius: 999px;
  background: rgba(255,250,240,.9);
  box-shadow: 0 8px 24px rgba(31,21,11,.08);
  cursor: pointer;
  list-style: none;
}
.konto-profil > summary::-webkit-details-marker,
.konto-aktionsmenue > summary::-webkit-details-marker,
.konto-gutschein > summary::-webkit-details-marker { display: none; }
.konto-profil__avatar {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  color: #fff;
  background: var(--notna-red);
  font-family: var(--f-display);
  font-size: 1.3rem;
}
.konto-profil__identitaet { display: grid; min-width: 0; line-height: 1.25; }
.konto-profil__identitaet strong,
.konto-profil__identitaet small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-profil__identitaet small { color: var(--notna-muted); }
.konto-profil__pfeil { font-size: 1.35rem; transition: transform .18s ease; }
.konto-profil[open] .konto-profil__pfeil { transform: rotate(180deg); }
.konto-profil__menue {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  width: min(22rem, calc(100vw - 2 * var(--rand)));
  padding: .65rem;
  border: 1px solid var(--notna-line);
  border-radius: 16px;
  background: var(--notna-paper-raised);
  box-shadow: 0 18px 55px rgba(31,21,11,.2);
}
.konto-profil__menue dl { display: grid; gap: .45rem; margin: .25rem .45rem .65rem; }
.konto-profil__menue dl div { min-width: 0; }
.konto-profil__menue dt { color: var(--notna-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.konto-profil__menue dd { margin: 0; overflow-wrap: anywhere; }
.konto-profil__link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--notna-ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.konto-profil__link:hover { background: #eadfce; }
.konto-profil__abmelden { color: var(--notna-red-deep); }

.konto-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; overflow: hidden; }
.konto-zahlen > div { padding: 1rem; }
.konto-sprungnavigation {
  display: flex;
  gap: .45rem;
  margin: 1rem 0 2rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.konto-sprungnavigation a {
  flex: none;
  min-height: 42px;
  padding: .55rem 1rem;
  border: 1px solid var(--notna-line);
  border-radius: 999px;
  color: var(--notna-ink);
  font-size: var(--s-s);
  font-weight: 700;
  text-decoration: none;
}
.konto-sprungnavigation a:hover { border-color: var(--notna-red); color: var(--notna-red); }

.konto-bestellungen { display: grid; gap: 1rem; }
.konto-bestellung {
  min-width: 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--notna-line);
  border-left: 4px solid var(--notna-dark);
  border-radius: 16px;
  background: rgba(255,250,240,.86);
  box-shadow: 0 10px 30px rgba(31,21,11,.06);
}
.konto-bestellung--laeuft { border-left-color: var(--notna-gold); background: #fff7e9; }
.konto-bestellung--storniert { border-left-color: var(--notna-muted); opacity: .8; }
.konto-bestellung__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.konto-bestellung__kopf p { margin: .25rem 0 0; color: var(--notna-muted); font-size: var(--s-s); }
.konto-bestellung__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.konto-bestellung__nummer { font-family: var(--f-display); font-size: 1.4rem; }
.konto-bestellung__positionen { display: grid; gap: .6rem; padding: 0; margin: 1.1rem 0; list-style: none; }
.konto-bestellung__positionen li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: start;
  padding-bottom: .6rem;
  border-bottom: 1px dotted var(--notna-line);
}
.konto-bestellung__menge { color: var(--notna-red); font-family: var(--f-mono); font-weight: 700; }
.konto-bestellung__gericht { display: grid; min-width: 0; }
.konto-bestellung__gericht small { color: var(--notna-muted); line-height: 1.4; }
.konto-bestellung__positionspreis { font-family: var(--f-mono); font-size: var(--s-s); white-space: nowrap; }
.konto-bestellung__fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .8rem; }
.konto-bestellung__details { margin-top: .4rem; }
.konto-bestellung__details > summary { min-height: 44px; display: inline-flex; align-items: center; color: var(--notna-red); font-weight: 700; cursor: pointer; }
.konto-bestellung__details dl { display: grid; gap: .35rem; max-width: 28rem; margin: .3rem 0 .5rem; }
.konto-bestellung__details dl div { display: flex; justify-content: space-between; gap: 1rem; }
.konto-bestellung__details dd { margin: 0; text-align: right; }

.konto-aktionsmenue { position: relative; flex: none; }
.konto-aktionsmenue > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--notna-line);
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  list-style: none;
}
.konto-aktionsmenue[open] > summary { background: var(--notna-dark); color: #fff; }
.konto-aktionsmenue > div {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 6;
  display: grid;
  width: 13.5rem;
  padding: .4rem;
  border: 1px solid var(--notna-line);
  border-radius: 12px;
  background: var(--notna-paper-raised);
  box-shadow: 0 16px 42px rgba(31,21,11,.2);
}
.konto-aktionsmenue a,
.konto-aktionsmenue button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--notna-ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.konto-aktionsmenue a:hover,
.konto-aktionsmenue button:hover { background: #eadfce; }

.konto-gutschein { padding: 0; overflow: visible; }
.konto-gutschein > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.5rem;
  align-items: center;
  gap: .8rem;
  min-height: 82px;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}
.konto-gutschein > summary > span { min-width: 0; }
.konto-gutschein > summary > span:nth-child(2) { text-align: right; }
.konto-gutschein > summary small { display: block; color: var(--notna-muted); }
.konto-gutschein > summary strong { color: var(--notna-red); font-family: var(--f-mono); white-space: nowrap; }
.konto-gutschein__oeffnen { font-size: 1.8rem; transition: transform .18s ease; }
.konto-gutschein[open] .konto-gutschein__oeffnen { transform: rotate(90deg); }
.konto-gutschein__details { padding: 0 1.15rem 1.15rem; border-top: 1px solid var(--notna-line); }
.konto-gutschein__details > h4 { margin-top: 1rem; }
.konto-gutschein__verlauf h3 { margin-top: 1.2rem; font-size: 1.15rem; }
.konto-gutschein--gekauft { border-top-color: var(--notna-dark); }
.konto-gekaufte-gutscheine { margin-top: clamp(2rem, 5vw, 3.5rem); }
.konto-gekaufte-gutscheine > h3 { margin-bottom: .45rem; }

.konto-zurueck { display: inline-flex; margin-bottom: 1.2rem; color: var(--notna-red); font-weight: 700; }
.konto-einstellungen__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.konto-einstellungskarte {
  min-width: 0;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid var(--notna-line);
  border-radius: 16px;
  background: rgba(255,250,240,.84);
  box-shadow: 0 10px 30px rgba(31,21,11,.05);
}
.konto-einstellungskarte--breit { grid-column: 1 / -1; }
.konto-einstellungskarte--gefahr { border-color: color-mix(in srgb, var(--notna-red) 45%, var(--notna-line)); }
.konto-einstellungskarte__kopf { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.konto-einstellungskarte__kopf .marke { margin: 0 0 .15rem; }
.konto-einstellungskarte__kopf h2 { font-size: 1.65rem; }
.konto-einstellungskarte__icon { display: grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #eadfce; color: var(--notna-red-deep); font-weight: 800; }
.konto-einstellungskarte form { display: grid; gap: .8rem; }
.konto-einstellungskarte form .knopf { justify-self: start; }
.konto-einstellungskarte__aktuell { padding: .7rem .8rem; border-radius: 8px; background: #eadfce; overflow-wrap: anywhere; }
.konto-einstellungskarte address { font-style: normal; font-size: 1.08rem; }
.konto-sicherheitshinweis { padding: .8rem .9rem; border-left: 4px solid var(--notna-gold); border-radius: 8px; background: #fff4d8; color: var(--notna-ink); }
.konto-entwicklungs-code { padding: .7rem; border: 1px dashed var(--notna-gold); }
.knopf--gefahr { background: var(--notna-red); border-color: var(--notna-red); color: #fff; }
.knopf--gefahr:hover { background: var(--notna-red-deep); border-color: var(--notna-red-deep); }

@media (max-width: 640px) {
  .konto-dashboard-kopf { display: grid; }
  .konto-profil { width: 100%; max-width: none; }
  .konto-profil__menue { position: static; width: 100%; margin-top: .5rem; }
  .konto-zahlen { grid-template-columns: minmax(0, 1fr); }
  .konto-zahlen > div { border-right: 0; border-bottom: 1px solid var(--notna-line); }
  .konto-zahlen > div:last-child { border-bottom: 0; }
  .konto-bestellung__positionen li { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .konto-bestellung__positionspreis { grid-column: 2; }
  .konto-aktionsmenue > div { right: 0; width: min(15rem, calc(100vw - 3rem)); }
  .konto-gutschein > summary { grid-template-columns: minmax(0, 1fr) auto 1rem; padding-inline: .9rem; }
  .konto-gutschein__details { padding-inline: .9rem; }
  .konto-einstellungen__raster { grid-template-columns: minmax(0, 1fr); }
  .konto-einstellungskarte--breit { grid-column: auto; }
  .konto-einstellungskarte form .knopf { width: 100%; justify-self: stretch; }
}