/* ============================================================
   bistro.css — Gestaltung des Dinervio-Themes „Bistro“

   Wird NACH styles.css geladen (views/gast/theme/kopf-zusatz.ejs)
   und löst dort die Notna-Festwerte ab: schwarzer Kopf, goldene
   Haarlinien, Beigeflächen, Großbuchstaben-Knöpfe. Farben und
   Schriften kommen aus theme.css — hier steht nur Form und Rhythmus.

   Charakter: Speisekarte eines feinen Bistros. Weiß und Creme,
   Haarlinien statt Schatten, Serif-Überschriften, gesperrte
   Kapitälchen-Marken, Führungspunkte zwischen Name und Preis,
   Bordeaux als einziger kräftiger Ton.

   Abschnitte:
     1  Grund, Typografie, Knöpfe
     2  Kopfzeile (hell, Emblem mittig) und Bewertungsleiste
     3  Speisekarte
     4  Konfigurator, Pass, Kasse
     5  Konto, Bestätigung, Rückmeldung
     6  Fuß
     7  Startseite
     8  Gift-Card-Kasse
   ============================================================ */

/* ---------- 1. Grund, Typografie, Knöpfe ---------- */

body:not(.notna-homepage):not(.a-koerper) { background: var(--papier); }

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-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  font-variation-settings: normal;
  line-height: 1.1;
}
body:not(.notna-homepage):not(.a-koerper) h1 { line-height: 1.02; }
body:not(.notna-homepage):not(.a-koerper) .marke {
  color: var(--akzent);
  font-family: var(--f-text);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.lead { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; color: var(--leise); }
/* Nur klassenlose Fließtextlinks im Inhalt. */
main p a:not([class]),
main dd a:not([class]) { color: var(--akzent-tief); }
/* Zifferncodes bleiben in einer Monoschrift lesbar. */
.konto-code-feld { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; letter-spacing: .2em; }
/* Preise in der Serif mit proportionalen Ziffern — wie auf einer gedruckten Karte. */
.preis, .pass__summe, .pass-leiste__summe, .karte__preis, .wahlkachel__preis,
.konto-gutschein__saldo, .konto-bestellung__positionspreis, .gift__karte [data-gutschein-vorschau],
.bonzeile__preis, .konto-detail__gesamt dd {
  font-family: var(--f-display);
  font-variant-numeric: lining-nums proportional-nums;
  font-weight: 500;
}
.menge__wert, .wahl__auf, .pass__nummer, .bonzeile__menge, .pass__zusage .zeit, .station__zeit,
.konto-zahl, .konto-karte__nr, .zeitliste dd, .konto-zeile__haupt time {
  font-variant-numeric: lining-nums proportional-nums;
}

.knopf {
  border-radius: var(--radius);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-inline: 1.5rem;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 80ms ease;
}
.knopf--haupt { background: var(--dunkel); border-color: var(--dunkel); color: var(--akzent-kontrast); }
.knopf--haupt:hover { background: var(--akzent); border-color: var(--akzent); }
.knopf--bestellen { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-kontrast); }
.knopf--bestellen:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
.knopf--leise { border-color: var(--linie-stark); background: transparent; color: var(--tinte); }
.knopf--leise:hover { background: var(--papier-hoch); border-color: var(--tinte); }

/* ---------- 2. Kopfzeile ---------- */

body:not(.notna-homepage):not(.a-koerper) .kopf {
  background: rgba(255, 255, 255, .94);
  color: var(--tinte);
  border-bottom: 1px solid var(--linie);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Die zweite, feine Linie unter dem Kopf: das Doppellineal der Speisekarte. */
body:not(.notna-homepage):not(.a-koerper) .kopf::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--linie);
  pointer-events: none;
}
body:not(.notna-homepage):not(.a-koerper) .kopf__innen { padding-block: .65rem; }
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: .16em;
  font-size: .68rem;
  font-weight: 600;
}
body:not(.notna-homepage):not(.a-koerper) .kopf__navi a { color: var(--tinte); position: relative; }
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(--akzent); }
body:not(.notna-homepage):not(.a-koerper) .kopf__navi a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px; background: var(--akzent);
}
.kopf__meta .kopf__tel { color: var(--tinte); }
.kopf__tel--symbol { border-color: var(--linie-stark); color: var(--tinte); background: transparent; }
.kopf__tel--symbol:hover { border-color: var(--akzent); color: var(--akzent); }
.kopf__zustand { color: var(--leise); font-weight: 600 !important; }
.kopf__zustand::before { background: #b5473f; }
.kopf__zustand--offen { color: var(--salbei); }
.kopf__zustand--offen::before { background: var(--salbei); box-shadow: 0 0 0 3px var(--salbei-hell); }
body:not(.notna-homepage):not(.a-koerper) .kopf__logo--rund { width: 3.3rem; height: 3.3rem; border-radius: 50%; }
.sprungmarke { background: var(--akzent); color: var(--akzent-kontrast); }

/* Breite Fenster: Emblem in der Mitte, Navigation links, Kontakt rechts. */
@media (min-width: 72.01rem) {
  body:not(.notna-homepage):not(.a-koerper) .kopf__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
  body:not(.notna-homepage):not(.a-koerper) .kopf__marke { grid-column: 2; grid-row: 1; margin: 0; }
  body:not(.notna-homepage):not(.a-koerper) .kopf__navi { grid-column: 1; grid-row: 1; gap: .2rem 1.6rem; }
  body:not(.notna-homepage):not(.a-koerper) .kopf__meta { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (max-width: 72rem) {
  body:not(.notna-homepage):not(.a-koerper) .kopf__meta .kopf__zustand { font-size: .58rem; letter-spacing: .1em; }
  body:not(.notna-homepage):not(.a-koerper) .kopf__navi a { font-size: .62rem; letter-spacing: .12em; }
}
@media (max-width: 46rem) {
  body:not(.notna-homepage):not(.a-koerper) .kopf__navi { border-top: 1px solid var(--linie); margin-top: .35rem; padding-top: .1rem; }
  body:not(.notna-homepage):not(.a-koerper) .kopf__navi a[aria-current="page"]::after { bottom: .35rem; left: 25%; right: 25%; }
}
@media (max-width: 34rem) {
  body:not(.notna-homepage):not(.a-koerper) .kopf__navi a { font-size: .58rem; letter-spacing: .1em; }
}

/* Bewertungsleiste über dem Kopf (Startseite) */
:is(.notna-homepage, .start-neutral-seite) .notna-bewertungsleiste {
  background: var(--akzent);
  border-bottom: 0;
}
:is(.notna-homepage, .start-neutral-seite) .notna-bewertungsleiste__link {
  color: var(--akzent-kontrast);
  font: 600 .7rem/1.3 var(--f-text);
  letter-spacing: .1em;
  text-transform: uppercase;
}
:is(.notna-homepage, .start-neutral-seite) .notna-bewertungsleiste__link:hover { background: var(--akzent-tief); }
:is(.notna-homepage, .start-neutral-seite) .notna-bewertungsleiste__sterne,
:is(.notna-homepage, .start-neutral-seite) .notna-bewertungsleiste__pfeil { color: #f1d9a6; }
:is(.notna-homepage, .start-neutral-seite) .notna-bewertungsleiste__zu { color: rgba(253, 249, 243, .75); }
:is(.notna-homepage, .start-neutral-seite) .notna-bewertungsleiste__link:focus-visible,
:is(.notna-homepage, .start-neutral-seite) .notna-bewertungsleiste__zu:focus-visible { outline-color: #fff; }

.demo-hinweis { background: var(--creme); color: var(--tinte); border-bottom: 1px solid var(--linie); }

/* ---------- 3. Speisekarte ---------- */

.karte-kopf {
  color: var(--tinte);
  text-align: center;
  padding-block: clamp(2.6rem, 7vw, 5rem) clamp(1.4rem, 4vw, 2.2rem);
  background: var(--papier);
}
.karte-kopf::after { background: var(--linie); }
.karte-kopf h1 { text-shadow: none; margin-block: .5rem 1.4rem; font-size: var(--s-2xl); }
body:not(.notna-homepage):not(.a-koerper) .karte-kopf .marke { color: var(--akzent); text-shadow: none; }
.karte-kopf .filter-zahl { color: var(--leise); font-family: var(--f-display); font-style: italic; }
.filterleiste { justify-content: center; }
.chip {
  border-color: var(--linie-stark);
  background: transparent;
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
}
.chip:hover { border-color: var(--akzent); color: var(--akzent-tief); }
.chip[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-kontrast); }
@media (max-width: 46rem) {
  .karte-kopf { background: var(--papier); }
  .filterleiste { justify-content: flex-start; }
}

.kapitelnavi-rahmen { background: rgba(252, 250, 246, .94); box-shadow: none; border-bottom: 1px solid var(--linie); }
.kapitelnavi { border-top-color: transparent; }
.kapitelnavi a {
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--leise); border-color: transparent; border-radius: 0;
}
.kapitelnavi a:hover { color: var(--akzent-tief); border-color: transparent; }
.kapitelnavi a[aria-current="location"] {
  background: transparent; color: var(--akzent);
  border-color: transparent; border-bottom-color: var(--akzent);
}

.kapitel { margin-block: clamp(2.6rem, 6vw, 4.5rem); }
/* Kapitelkopf mittig, darunter ein kurzer Bordeaux-Strich mit Raute. */
.kapitel__kopf {
  display: grid; justify-items: center; text-align: center;
  border-bottom: 0; padding-bottom: 0; margin-bottom: 1.4rem;
}
.kapitel__kopf h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); }
.kapitel__kopf h2::after {
  content: "";
  display: block; width: 3.2rem; height: 1px; margin: .9rem auto 0;
  background: linear-gradient(90deg, transparent, var(--akzent) 25%, var(--akzent) 75%, transparent);
}
.kapitel__kopf p { font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--leise); max-width: 52ch; flex: none; margin-top: .6rem; }
.kapitel__kopf--hell { border-bottom: 0; }
/* Gerichte als Zeilen einer gedruckten Karte: nur eine Haarlinie darunter, kein Kasten. */
.speise {
  padding: 1.05rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie);
  box-shadow: none;
  border-radius: 0;
  transition: none;
}
.speise:hover { border-color: var(--linie-stark); box-shadow: none; transform: none; }
.speise__name { font-size: 1.08rem; font-weight: 500; letter-spacing: 0; font-variation-settings: normal; }
.speise__nr { color: var(--leise); font-weight: 500; letter-spacing: .04em; font-family: var(--f-display); font-style: italic; }
.speise__preis { color: var(--tinte); font-size: 1.02rem; }
.speise__altpreis { color: var(--leise); }
.speise__text { font-size: .86rem; }
.speise__bild { border-radius: 50% 50% 4px 4px / 36% 36% 4px 4px; background: var(--creme); }
.speise__legen,
.karte__legen {
  border-color: var(--linie-stark);
  color: var(--akzent-tief);
  background: transparent;
  border-radius: var(--radius);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.speise__legen:hover,
.karte__legen:hover { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-kontrast); }
.kz { font-size: .64rem; letter-spacing: .06em; font-weight: 700; text-transform: uppercase; border-radius: 2px; }
.kz--tipp { color: var(--akzent-tief); background: var(--akzent-hell); border-color: color-mix(in srgb, var(--akzent) 35%, transparent); }
.kz--beliebt { color: var(--akzent-tief); border-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.kz--veg, .kz--vegan { color: var(--salbei); }
.kz--vegan { background: var(--salbei-hell); }
.legende-block { background: var(--creme); border-block: 1px solid var(--linie); }
.legende-block .kapitel__kopf { border-bottom-color: var(--linie); }
.legende__titel { font-family: var(--f-text); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); }

/* ---------- 4. Konfigurator, Pass, Kasse ---------- */

.konf-dialog {
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--papier-hoch);
  box-shadow: 0 28px 90px rgba(26, 22, 20, .3);
}
.konf-dialog::backdrop { background: rgba(38, 34, 32, .5); }
.konf-dialog__kopf {
  background: var(--papier-hoch);
  color: var(--tinte);
  border-bottom: 1px solid var(--linie);
}
.konf-dialog__kopf h2 { color: var(--tinte); font-size: clamp(1.3rem, 3.5vw, 1.7rem); font-weight: 500; }
.konf-dialog__kopf .pass__zu { color: var(--leise); }
.konf-dialog__kopf .pass__zu:hover { color: var(--tinte); }
.konf-dialog__inhalt .konf__gruppe { border-bottom-color: var(--linie); }
.konf__kopf legend { font-family: var(--f-display); font-size: 1.1rem; font-weight: 500; }
.konf__pflicht { color: var(--akzent); }
.wahl:hover { background: var(--akzent-hell); }
.wahl input { accent-color: var(--akzent); }
.konf-dialog__fuss { background: var(--creme); border-top-color: var(--linie); }
.konf-hinweis input,
.feld input,
.feld select,
.feld textarea { border-radius: var(--radius); border-color: var(--linie-stark); background: var(--papier-hoch); }
.konf-hinweis input:focus,
.feld input:focus,
.feld select:focus,
.feld textarea:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); outline: none; }
.feld > span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.menge__knopf { border-color: var(--linie-stark); background: var(--papier-hoch); border-radius: 50%; }
.menge__knopf:hover { background: var(--akzent-hell); border-color: var(--akzent); }

/* Der Pass */
.pass-leiste::before { background: rgba(38, 34, 32, .45); }
.pass-leiste__griff {
  background: var(--akzent);
  color: var(--akzent-kontrast);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 -12px 40px rgba(26, 22, 20, .2);
}
.pass-leiste__griff:hover { background: var(--akzent-tief); }
.pass-leiste__anzahl { background: rgba(253, 249, 243, .2); color: var(--akzent-kontrast); }
.pass-leiste__summe { font-size: 1rem; letter-spacing: 0; text-transform: none; }
.pass-tafel { box-shadow: 0 -24px 70px rgba(26, 22, 20, .3); }
.pass { background: var(--papier-hoch); border-color: var(--linie); box-shadow: none; }
.pass__kopf { background: var(--akzent); border-bottom: 0; }
.pass__titel { color: var(--akzent-kontrast); letter-spacing: .22em; font-family: var(--f-text); }
.pass__nummer { color: rgba(253, 249, 243, .8); }
.pass__zu { color: rgba(253, 249, 243, .8); }
.pass__zu:hover { color: #fff; }
.bonzeile { border-bottom-color: var(--linie); }
.bonzeile__menge { color: var(--akzent); }
.bonzeile__name::after { border-bottom-color: var(--linie-stark); }
.bonzeile__name span { background: var(--papier-hoch); }
.bonzeile__preis { color: var(--tinte); }
.bonzeile__optionen { color: var(--leise); }
.bonzeile__knopf { border-color: var(--linie-stark); background: var(--papier-hoch); color: var(--tinte); border-radius: 50%; }
.bonzeile__knopf:hover { background: var(--akzent-hell); border-color: var(--akzent); }
.pass__summe { color: var(--leise); border-top-color: var(--linie); }
.pass__summe .gesamt { color: var(--tinte); font-weight: 500; font-size: 1.35rem; }
.pass__hinweis { color: var(--leise); }

/* Live-Verfolgung: dunkles Bordeaux statt Schwarz */
.pass__weg { background: var(--akzent-tief); color: var(--akzent-kontrast); }
.weg::before { background: rgba(253, 249, 243, .22); }
.weg__balken { background: #f1d9a6; }
.station__punkt { background: var(--akzent-tief); border-color: rgba(253, 249, 243, .4); }
.station__name { color: rgba(253, 249, 243, .72); }
.station__zeit { color: rgba(253, 249, 243, .55); }
.station--erledigt .station__punkt,
.station--jetzt .station__punkt { background: #f1d9a6; border-color: #f1d9a6; }
.station--erledigt .station__name { color: var(--akzent-kontrast); }
.station--jetzt .station__name { color: #f1d9a6; }
.station--jetzt .station__punkt::after { border-color: #f1d9a6; }
.pass__zusage { border-top-color: rgba(253, 249, 243, .2); }
.pass__zusage .zeit { color: var(--akzent-kontrast); font-weight: 700; }
.pass__zusage .was { color: rgba(253, 249, 243, .72); }

/* Kasse */
.kasse { padding-block: clamp(2.2rem, 6vw, 4.5rem); padding-bottom: 8rem; }
.kasse h1 { font-size: var(--s-2xl); }
.feldblock {
  border-color: var(--linie);
  background: var(--papier-hoch);
  box-shadow: none;
  border-radius: var(--radius-gross);
}
/* Die Legende sitzt im Kasten statt auf dem Rahmen. */
.feldblock__titel {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0 0 .9rem;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0;
}
.feldblock > legend + * { clear: both; }
.wahlkachel__inhalt { border: 1px solid var(--linie-stark); border-radius: var(--radius-gross); background: var(--papier-hoch); }
.wahlkachel__inhalt strong { font-family: var(--f-display); font-size: 1.12rem; font-weight: 500; }
.wahlkachel input:checked + .wahlkachel__inhalt {
  border-color: var(--akzent);
  background: var(--akzent-hell);
  box-shadow: 0 0 0 1px var(--akzent);
}
.wahlkachel input:focus-visible + .wahlkachel__inhalt { outline-color: var(--akzent); }
.wahlkachel__preis { color: var(--akzent-tief) !important; }
.kasse__abschluss { border-color: var(--linie); background: var(--papier-hoch); box-shadow: var(--notna-shadow); border-radius: var(--radius-gross); }
.pass__summe--hell { color: var(--leise); }
.pass__summe--hell .gesamt { color: var(--tinte); }
.kasse__fehler { border-left-color: var(--akzent); color: var(--akzent-tief); background: var(--akzent-hell); border-radius: 0 var(--radius) var(--radius) 0; }
.giftcard-zahlung__oder { color: var(--leise); }
#gutschein-entfernen { color: var(--akzent-tief); }
.adressvorschlaege { background: var(--papier-hoch); border-color: var(--linie-stark); box-shadow: 0 12px 28px rgba(26, 22, 20, .14); }
.adressvorschlaege li[aria-selected="true"], .adressvorschlaege li:hover { background: var(--akzent-hell); }

/* ---------- 5. Konto, Bestätigung, Rückmeldung ---------- */

.bestaetigung__seite { border-top: 2px solid var(--akzent); background: var(--papier-hoch); border-radius: 0 0 var(--radius-gross) var(--radius-gross); }
.schritte li::before { color: var(--akzent); font-family: var(--f-display); font-style: italic; }
.notiz-block { background: var(--creme); border: 1px solid var(--linie); }
.zahlungsabbruch { border-left-color: var(--akzent); background: var(--akzent-hell); }
.konto-form { background: var(--papier-hoch); border-color: var(--linie); box-shadow: none; border-radius: var(--radius-gross); }
.konto-zahlen,
.konto-daten { background: var(--creme); border-color: var(--linie); }
.konto-zahl { color: var(--akzent-tief); font-family: var(--f-display); }
.konto-erfolg { border-left-color: var(--salbei); background: var(--salbei-hell); }
.konto-gutschein { border-color: var(--linie); border-top-color: var(--akzent); background: var(--papier-hoch); box-shadow: none; }
.konto-gutschein--leer { border-top-color: var(--leise); }
.konto-gutschein__saldo { color: var(--akzent-tief); }
.konto-gutschein__codefehler { color: var(--akzent-tief); }
.konto-karte { border-color: var(--linie); border-top-color: var(--dunkel); background: var(--papier-hoch); box-shadow: none; }
.konto-karte--laeuft { border-top-color: var(--akzent); background: var(--akzent-hell); }
.konto-karte__nr { font-weight: 500; font-size: 1.2rem; font-family: var(--f-display); }
.konto-karte__status { color: var(--akzent-tief); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.konto-notcode { border-left-color: var(--akzent); background: var(--akzent-hell); }
.konto-notcode__zahl { color: var(--akzent-tief); }
.konto-loeschen { border-color: var(--linie); background: var(--papier-hoch); }
.rueckmeldung { background: var(--dunkel); border: 0; border-radius: var(--radius); color: var(--akzent-kontrast); box-shadow: 0 8px 30px rgba(26, 22, 20, .3); }
.rueckmeldung--warnung { background: var(--akzent); }

.konto-einleitung { color: var(--leise); }
.konto-profil > summary { border-color: var(--linie); background: var(--papier-hoch); box-shadow: none; }
.konto-profil__avatar { background: var(--akzent); font-weight: 500; font-family: var(--f-display); }
.konto-profil__identitaet small { color: var(--leise); }
.konto-profil__menue { border-color: var(--linie); background: var(--papier-hoch); box-shadow: 0 18px 55px rgba(26, 22, 20, .14); }
.konto-profil__menue dt { color: var(--leise); }
.konto-profil__link { color: var(--tinte); }
.konto-profil__link:hover { background: var(--creme); }
.konto-profil__abmelden { color: var(--akzent-tief); }
.konto-sprungnavigation a { border-color: var(--linie-stark); color: var(--tinte); }
.konto-sprungnavigation a:hover { border-color: var(--akzent); color: var(--akzent-tief); }
.konto-bestellung { border-color: var(--linie); border-left-color: var(--dunkel); background: var(--papier-hoch); box-shadow: none; }
.konto-bestellung--laeuft { border-left-color: var(--akzent); background: var(--akzent-hell); }
.konto-bestellung--storniert { border-left-color: var(--leise); }
.konto-bestellung__kopf p { color: var(--leise); }
.konto-bestellung__nummer { font-weight: 500; font-family: var(--f-display); }
.konto-bestellung__positionen li { border-bottom-color: var(--linie); }
.konto-bestellung__menge { color: var(--akzent-tief); }
.konto-bestellung__gericht small { color: var(--leise); }
.konto-bestellung__details > summary { color: var(--akzent-tief); }
.konto-aktionsmenue > summary { border-color: var(--linie-stark); }
.konto-aktionsmenue[open] > summary { background: var(--dunkel); color: var(--akzent-kontrast); }
.konto-aktionsmenue > div { border-color: var(--linie); background: var(--papier-hoch); box-shadow: 0 16px 42px rgba(26, 22, 20, .14); }
.konto-aktionsmenue a,
.konto-aktionsmenue button { color: var(--tinte); }
.konto-aktionsmenue a:hover,
.konto-aktionsmenue button:hover { background: var(--creme); }
.konto-gutschein > summary small { color: var(--leise); }
.konto-gutschein > summary strong { color: var(--akzent-tief); }
.konto-gutschein__details { border-top-color: var(--linie); }
.konto-gutschein--gekauft { border-top-color: var(--dunkel); }
.konto-zurueck { color: var(--akzent-tief); }
.konto-einstellungskarte { border-color: var(--linie); background: var(--papier-hoch); box-shadow: none; }
.konto-einstellungskarte--gefahr { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
.konto-einstellungskarte__icon { background: var(--creme); color: var(--akzent-tief); }
.konto-einstellungskarte__aktuell { background: var(--creme); }
.konto-sicherheitshinweis { border-left-color: var(--akzent); background: var(--akzent-hell); color: var(--tinte); }
.konto-entwicklungs-code { border-color: var(--akzent); }
.knopf--gefahr { background: var(--akzent); border-color: var(--akzent); }
.knopf--gefahr:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
.konto-leiste { border-bottom-color: var(--linie); }
.konto-leiste__marke { color: var(--akzent); letter-spacing: .2em; }
.konto-menueknopf { border-color: var(--linie-stark); background: var(--papier-hoch); color: var(--tinte); }
.konto-menueknopf:hover { border-color: var(--akzent); }
.konto-menueknopf__avatar { background: var(--akzent); }
.konto-menue__hintergrund { background: rgba(38, 34, 32, .45); }
.konto-menue__tafel { background: var(--papier); box-shadow: -20px 0 55px rgba(26, 22, 20, .16); }
.konto-menue__kopf { border-bottom-color: var(--linie); }
.konto-menue__zu { color: var(--tinte); }
.konto-menue__liste a { color: var(--tinte); }
.konto-menue__liste a:hover { background: var(--creme); }
.konto-menue__liste a[aria-current="page"] { background: var(--akzent); color: var(--akzent-kontrast); }
.konto-menue__abmelden { border-top-color: var(--linie); }
.konto-begruessung .konto-einleitung a,
.konto-mehr { color: var(--akzent-tief); }
.konto-aktuell__karte { border-color: var(--linie); border-left-color: var(--akzent); background: var(--akzent-hell); color: var(--tinte); }
.konto-aktuell__karte span:last-child { color: var(--leise); }
.konto-zeile { border-color: var(--linie); border-left-color: var(--linie); background: var(--papier-hoch); color: var(--tinte); }
a.konto-zeile:hover,
.konto-zeile > summary:hover { border-color: var(--akzent); }
.konto-zeile--laeuft { border-left-color: var(--akzent); background: var(--akzent-hell); }
.konto-zeile__info { color: var(--leise); }
.konto-zeile__pfeil { color: var(--leise); }
.konto-start { border: 1px dashed var(--linie-stark); background: var(--papier-hoch); }
.konto-kacheln a { border-color: var(--linie); background: var(--papier-hoch); color: var(--tinte); }
.konto-kacheln a:hover { border-color: var(--akzent); }
.konto-kacheln a strong { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; }
.konto-kacheln span { color: var(--leise); }
.konto-blaettern a { color: var(--akzent-tief); }
.konto-detail { border-color: var(--linie); border-top-color: var(--dunkel); background: var(--papier-hoch); }
.konto-detail--laeuft { border-top-color: var(--akzent); }
.konto-detail--storniert { border-top-color: var(--leise); }
.konto-detail__kopf p,
.konto-detail__titel,
.konto-detail__summen dt { color: var(--leise); }
.konto-detail__gesamt { border-top-color: var(--linie); }
.konto-detail__gesamt dt { color: var(--tinte); }
.gutschein-zustellung div { border-bottom-color: var(--linie); }
.gutschein-zustellung dt { color: var(--leise); }
.konto-trenner { border: 0; border-top: 1px solid var(--linie); }

/* ---------- 6. Fuß: hell und ruhig, mit Doppellineal ---------- */

.fuss {
  background: var(--creme);
  color: var(--tinte);
  border-top: 1px solid var(--linie-stark);
  box-shadow: inset 0 4px 0 var(--creme), inset 0 5px 0 var(--linie);
  padding-top: clamp(3rem, 7vw, 4.6rem);
}
.fuss__titel { font-weight: 500; color: var(--tinte); font-size: 1.25rem; }
h3.fuss__titel {
  font-family: var(--f-text); font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--akzent);
}
.fuss__zeile, .zeitliste dt, .zeitliste--zu { color: var(--leise); }
.fuss .zeitliste dd { color: var(--tinte); }
.fuss a { color: var(--tinte); }
.fuss a:hover { color: var(--akzent); }
.fuss__unten { border-top-color: var(--linie-stark); color: var(--leise); }
.fuss__unten nav a { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }

/* ---------- 7. Startseite ---------- */

.start-neutral-seite main { min-height: 0; }

/* Kapitälchen-Marke mit Haarlinien links und rechts */
.bk {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin: 0 0 .9rem;
}
.bk::before, .bk::after { content: ""; width: 2.2rem; height: 1px; background: var(--linie-stark); }
.bk--links { justify-content: flex-start; }
.bk--links::before { display: none; }

/* Hero: Aussage links, Foto im Bogen rechts */
.bh {
  position: relative;
  padding-block: clamp(2.6rem, 7vw, 6rem) clamp(2.6rem, 7vw, 5.5rem);
  background: var(--papier);
}
.bh__innen {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.bh__text { display: grid; gap: 1.2rem; align-content: center; justify-items: start; }
.bh__text h1 { font-size: var(--s-3xl); line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.bh__lead {
  font-family: var(--f-display); font-style: italic;
  color: var(--leise); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  max-width: 40ch; line-height: 1.5; margin: 0;
}
.bh__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }
.bh__knoepfe .knopf { width: auto; }
.bh__fakten {
  list-style: none; margin: .6rem 0 0; padding: .75rem 0 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  border-top: 1px solid var(--linie);
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--leise);
}
.bh__fakten li { display: inline-flex; align-items: center; gap: .5rem; }
.bh__fakten svg { width: 1rem; height: 1rem; fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bh__fakten .punkt { width: .5rem; height: .5rem; border-radius: 50%; }
.bh__fakten .punkt--an { background: var(--salbei); box-shadow: 0 0 0 3px var(--salbei-hell); }
.bh__fakten .punkt--aus { background: #b5473f; }

/* Der Bogen: Fenster eines Pariser Cafés */
.bh__bild {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 30rem;
  margin-inline: auto;
  width: 100%;
  border-radius: 50% 50% 6px 6px / 40% 40% 6px 6px;
  overflow: hidden;
  background: var(--creme);
  outline: 1px solid var(--linie);
}
.bh__rahmen {
  position: relative;
  padding: .7rem;
}
.bh__rahmen::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  border-radius: 50% 50% 10px 10px / 40% 40% 10px 10px;
  pointer-events: none;
}
.bh__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh__bild svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bh__schild {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: grid; gap: .1rem; justify-items: center; text-align: center;
  padding: .7rem 1.2rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .95);
  color: var(--tinte);
  text-decoration: none;
  max-width: calc(100% - 2.2rem);
  box-shadow: 0 10px 30px rgba(26, 22, 20, .12);
}
.bh__schild b { font-family: var(--f-display); font-size: 1.1rem; font-weight: 500; line-height: 1.2; }
.bh__schild span { font-family: var(--f-display); font-size: 1rem; color: var(--akzent-tief); font-variant-numeric: lining-nums proportional-nums; }
.bh__schild small { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--leise); margin-top: .2rem; }

@media (max-width: 60rem) {
  .bh { padding-top: clamp(1.6rem, 5vw, 3rem); }
  .bh__innen { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .bh__rahmen { order: -1; max-width: 22rem; margin-inline: auto; width: 100%; }
  .bh__text { justify-items: center; text-align: center; }
  .bh__text h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
  .bh__knoepfe { justify-content: center; }
  .bh__fakten { justify-content: center; width: 100%; }
  .bk--links { justify-content: center; }
  .bk--links::before { display: block; }
}

/* Abschnitte der Startseite */
.ba { padding-block: clamp(2.6rem, 6vw, 5rem); }
.ba--creme { background: var(--creme); border-block: 1px solid var(--linie); }
.ba--linie { border-top: 1px solid var(--linie); }
.ba__kopf {
  display: grid; justify-items: center; text-align: center;
  margin-bottom: clamp(1.4rem, 3.5vw, 2.4rem);
}
.ba__kopf h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); margin: 0; }
.ba__kopf p { color: var(--leise); margin: .5rem 0 0; max-width: 52ch; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; }
.ba__mehr {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.4rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--akzent-tief); text-decoration: none; min-height: var(--tap);
  border-bottom: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
}
.ba__mehr:hover { color: var(--akzent); border-bottom-color: var(--akzent); }
.ba__fuss { display: flex; justify-content: center; }

/* Gerichtkarten: Foto mit Haarlinie, Name in der Serif, Preis als Etikett */
.karte { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.karte:hover { transform: none; border-color: transparent; box-shadow: none; }
.karte__flaeche { background: var(--creme); border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; transition: border-color .2s ease; }
.karte:hover .karte__flaeche { border-color: var(--linie-stark); }
.karte__flaeche--ohne-bild {
  aspect-ratio: 4 / 3;
  background: var(--creme);
}
.karte__platzhalter { width: 3rem; height: 3rem; stroke: var(--akzent); opacity: .45; }
.karte__preis {
  right: .7rem; bottom: .7rem;
  background: rgba(255, 255, 255, .96); color: var(--akzent-tief);
  font-size: .95rem; font-weight: 500;
  border: 1px solid var(--linie); border-radius: 2px;
  box-shadow: none; padding: .3em .7em;
}
.karte__name { font-size: 1.15rem; font-weight: 500; letter-spacing: 0; font-variation-settings: normal; line-height: 1.2; }
.karte__zeile { color: var(--leise); font-size: .84rem; }
.karte__text { padding: .95rem .15rem .3rem; gap: .35rem; }
.karte__fuss { border-top: 1px solid var(--linie); padding-top: .7rem; }
@media (max-width: 34rem) {
  .speise { padding: 1rem 0; }
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem .85rem; }
  .karte__text { padding: .7rem 0 .1rem; }
  .karte__name { font-size: 1rem; }
  .karte__zeile { display: none; }
  .karte__fuss .kennzeichen { display: none; }
  .karte__legen { width: 100%; }
}

/* Kapitelliste als gedruckte Karte: Name … Anzahl */
.bl {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 56rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem clamp(2rem, 6vw, 5rem);
}
.bl a {
  display: flex; align-items: baseline; gap: .6rem;
  min-height: 3.2rem; padding: .7rem 0;
  color: var(--tinte); text-decoration: none;
  font-family: var(--f-display); font-size: 1.15rem; font-weight: 500;
  border-bottom: 0;
}
.bl a:hover .bl__name { color: var(--akzent); }
.bl__name { flex: none; max-width: 70%; }
.bl__punkte { flex: 1 1 auto; border-bottom: 1px dotted var(--linie-stark); transform: translateY(-.3em); min-width: 1.5rem; }
.bl__zahl { flex: none; font-family: var(--f-text); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); white-space: nowrap; }
@media (max-width: 46rem) { .bl { grid-template-columns: minmax(0, 1fr); } }

/* Ablauf: drei Schritte mit römischen Ziffern, Haarlinien dazwischen */
.bs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  counter-reset: bs;
}
.bs li {
  position: relative; padding: .4rem clamp(1rem, 3vw, 2.4rem) .6rem;
  display: grid; gap: .5rem; align-content: start; justify-items: center; text-align: center;
  border-left: 1px solid var(--linie);
}
.bs li:first-child { border-left: 0; }
.bs li::before {
  counter-increment: bs; content: counter(bs, upper-roman);
  font-family: var(--f-display); font-style: italic; font-size: 2.2rem; font-weight: 400; color: var(--akzent);
  line-height: 1;
}
.bs h3 { font-size: 1.25rem; font-weight: 500; margin-top: .2rem; }
.bs p { color: var(--leise); font-size: .88rem; line-height: 1.6; margin: 0; max-width: 30ch; }
.bs svg { width: 2rem; height: 2rem; fill: none; stroke: var(--tinte); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
@media (max-width: 46rem) {
  .bs { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .bs li { border-left: 0; border-top: 1px solid var(--linie); padding-top: 1.4rem; }
  .bs li:first-child { border-top: 0; padding-top: 0; }
}

/* Gutschein: Karte in Creme mit Doppelrahmen */
.gift {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center;
}
.gift__karte {
  position: relative; aspect-ratio: 1.6; border-radius: var(--radius-gross); overflow: hidden;
  background: var(--creme);
  border: 1px solid var(--linie-stark);
  color: var(--tinte); padding: 1.6rem 1.7rem;
  display: grid; grid-template-rows: auto 1fr auto; box-shadow: var(--notna-shadow);
}
.gift__karte::after {
  content: ""; position: absolute; inset: .55rem;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  border-radius: 3px; pointer-events: none;
}
.gift__karte img { width: 3rem; height: 3rem; border-radius: 50%; }
.gift__karte small { display: block; color: var(--akzent); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; margin-top: .6rem; }
.gift__karte strong { display: block; font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.05; }
.gift__karte [data-gutschein-vorschau] { font-family: var(--f-display); font-style: italic; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; color: var(--akzent); align-self: end; justify-self: end; }
.gift__form { display: grid; gap: 1rem; }
.gift__form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gift__form legend { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--leise); margin-bottom: .6rem; padding: 0; }
.gift__werte { display: flex; flex-wrap: wrap; gap: .5rem; }
.gift__werte label { position: relative; }
.gift__werte input { position: absolute; opacity: 0; width: 0; height: 0; }
.gift__werte span {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: .4rem 1.1rem;
  border: 1px solid var(--linie-stark); border-radius: 999px; background: transparent;
  font-family: var(--f-display); font-weight: 500; font-size: 1rem; cursor: pointer;
  font-variant-numeric: lining-nums proportional-nums;
}
.gift__werte input:checked + span { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-kontrast); }
.gift__werte input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }
.gift__eigen { display: grid; gap: .3rem; max-width: 16rem; }
.gift__eigen span { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.gift__eigen input { min-height: var(--tap); padding: .5rem .7rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); font: inherit; background: var(--papier-hoch); }
.gift__eigen[hidden] { display: none; }
.gift__form .knopf { justify-self: start; }
.gift__status { min-height: 1.3em; font-size: var(--s-s); font-weight: 600; color: var(--akzent-tief); margin: 0; }
.gift__text { font-size: .92rem; color: var(--leise); margin: .4rem 0 0; }
.gift__form h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
@media (max-width: 52rem) {
  .gift { grid-template-columns: minmax(0, 1fr); }
  .gift__karte { aspect-ratio: 1.7; max-width: 30rem; }
  .gift__form .knopf { justify-self: stretch; width: 100%; }
}

/* Besuch: Adresse, Zeiten, Lieferung — drei Spalten mit Haarlinien */
.bv {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
}
.bv > div {
  padding: .2rem clamp(1rem, 3vw, 2.4rem) .4rem;
  border-left: 1px solid var(--linie);
  display: grid; gap: .7rem; align-content: start;
}
.bv > div:first-child { border-left: 0; padding-left: 0; }
.bv h3 {
  font-family: var(--f-text); font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--akzent);
}
.bv p { margin: 0; color: var(--leise); font-size: .92rem; line-height: 1.65; }
.bv p b { color: var(--tinte); font-weight: 500; font-family: var(--f-display); font-size: 1.1rem; }
.bv .zeitliste { font-size: .92rem; }
.bv .zeitliste dt { color: var(--leise); }
.bv .zeitliste dd { color: var(--tinte); }
.bv .zeitliste--zu { color: var(--leise); font-style: italic; }
.bv a { color: var(--tinte); font-weight: 500; }
.bv a:hover { color: var(--akzent); }
@media (max-width: 52rem) {
  .bv { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .bv > div { border-left: 0; border-top: 1px solid var(--linie); padding: 1.4rem 0 0; }
  .bv > div:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- 8. Gift-Card-Kasse (service-commerce.css) ---------- */

.gift-checkout__kopf .kicker,
.gift-checkout__formular .kicker {
  margin: 0 0 .3rem; color: var(--akzent);
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.gift-checkout__kopf h1 { font: 500 clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem)/1.05 var(--f-display); letter-spacing: 0; }
.gift-checkout__formular h2 { font: 500 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.15 var(--f-display); letter-spacing: 0; margin: .2rem 0 1.2rem; }
.gift-checkout__karte {
  border: 1px solid var(--linie-stark); border-radius: var(--radius-gross); color: var(--tinte);
  background: var(--creme);
  box-shadow: var(--notna-shadow);
}
.gift-checkout__ornament { border-color: color-mix(in srgb, var(--akzent) 45%, transparent); border-radius: 3px; }
.gift-checkout__karte small { color: var(--akzent); font-weight: 700; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; }
.gift-checkout__karte > strong { font: 500 clamp(2.2rem, 5vw, 3.4rem)/1.05 var(--f-display); letter-spacing: 0; }
.gift-checkout__karte > span { color: var(--akzent); font: italic 500 1.8rem/1 var(--f-display); font-variant-numeric: lining-nums proportional-nums; }
.gift-checkout__karte p { color: var(--leise); font-size: var(--s-s); }
.gift-checkout__formular section,
.leerer-korb { border-radius: var(--radius-gross); background: var(--papier-hoch); border-color: var(--linie); box-shadow: none; }
.gift-checkout__formular .feld > span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.gift-checkout__formular input,
.gift-checkout__formular textarea { border-radius: var(--radius); background: var(--papier-hoch); border-color: var(--linie-stark); }
.gift-checkout__formular input:focus,
.gift-checkout__formular textarea:focus { border-color: var(--akzent); outline: 3px solid var(--akzent-hell); }
.gift-checkout__zustellung span,
.gift-checkout__zahlung > span { border-radius: var(--radius-gross); background: var(--papier-hoch); border-color: var(--linie-stark); }
.gift-checkout__zustellung input:checked + span,
.gift-checkout__zahlung input:checked + span { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); background: var(--akzent-hell); }
.gift-checkout__zustellung input:focus-visible + span,
.gift-checkout__zahlung input:focus-visible + span { outline: 3px solid var(--akzent); }
.gift-checkout__wahrheit { border-left-color: var(--akzent); background: var(--akzent-hell); border-radius: 0 var(--radius) var(--radius) 0; }
.formular-fehler { border-left-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent-tief); border-radius: 0 var(--radius) var(--radius) 0; }