/* imbiss.css — Pommes Paul
   Eigenes Seiten-Stylesheet. Ersetzt bistro.css vollstaendig.

   Gestaltungsregeln dieses Shops:
   - Keine Rundungen. Nirgends. Alles Kante.
   - Ueberschriften immer in Anton und in Versalien.
   - Warnstreifen (schwarz-gelb, 45 Grad) als Trenner zwischen
     hellen und dunklen Abschnitten. Ersetzt die Risskante.
   - Bestellnummern sind Teil der Gestaltung, nicht Beiwerk.
     Im Imbiss bestellt man "einmal die 17". */

/* ── WARNSTREIFEN ──
   Wiederkehrendes Trennelement. Als eigenes Element einsetzen:
   <div class="warnstreifen"></div>
   Der Streifen ist ein hart abgesetztes Muster, kein weicher
   Verlauf. Die Kanten muessen scharf bleiben. */
.warnstreifen {
  height: 16px;
  background: repeating-linear-gradient(
    45deg,
    var(--color-gelb) 0 16px,
    var(--color-ink) 16px 32px
  );
}

.warnstreifen--schmal { height: 10px; }

/* ── KOPFZEILE ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-ink);
  border-bottom: 3px solid var(--color-accent);
}

/* Die Kopfzeile ist IMMER einzeilig, in jeder Fensterbreite.
   Dafuer braucht es drei Dinge zusammen: nowrap am Container,
   min-width 0 an der Marke, damit sie ueberhaupt schrumpfen darf,
   und flex-shrink 0 an den Aktionen, damit die Knoepfe ihre
   Groesse behalten. Fehlt eines davon, bricht die Zeile um.

   ALLE DREI mit zwei Klassen. konto.css wird nach dieser Datei
   geladen und setzt dieselben Selektoren mit einer Klasse. Bei
   gleicher Spezifitaet gewinnt die spaetere Datei, und dann
   bricht die Kopfzeile wieder um. */
.nav .nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

.nav .nav__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex-shrink: 1;
}

/* Weder Logo noch Wortmarke duerfen schrumpfen oder abgeschnitten
   werden. Kein overflow hidden: das hat die Wortmarke frueher
   stillschweigend gekappt, statt das Platzproblem sichtbar zu
   machen. Wenn es eng wird, geht stattdessen die Schriftgroesse
   in den Media Queries weiter herunter. */
.nav .nav__logo-bild {
  display: block;
  width: 52px;
  height: auto;
  flex-shrink: 0;
}

.nav .nav__wortmarke {
  flex-shrink: 0;
}

/* Symbole in den Kopfzeilen-Knoepfen.
   Auf dem Desktop tragen die Knoepfe Text und brauchen keins.
   Auf Mobil wird der Text ausgeblendet, dann bleibt sonst ein
   leerer Knopf stehen.

   Der Selektor zielt auf .ic und nicht auf die Klasse im HTML:
   iconsEinsetzen() ersetzt den span per outerHTML, dabei geht
   jede dort gesetzte Klasse verloren. */
.nav .btn--sm .ic,
.hero-top__aktionen .btn .ic { display: none; }

.nav__wortmarke {
  font-family: var(--font-head);
  /* Gleiche Groesse wie die Wortmarke im Hero der Startseite */
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-on-dark);
  line-height: 1;
  white-space: nowrap;
}

.nav__wortmarke em { font-style: normal; color: var(--color-accent); }

.nav__zusatz {
  font-family: var(--font-cond);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gelb);
  white-space: nowrap;
}

/* Aktionsleiste, gleiche Machart wie im Hero der Startseite.
   align-items stretch zieht alle Elemente auf dieselbe Hoehe,
   display contents auf der Konto-Huelle sorgt dafuer, dass der
   Knopf darin selbst zum Flex-Element wird. */
.nav .nav__aktionen {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.nav .nav__aktionen #nav-konto { display: contents; }

.nav .nav__konto {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 1rem;
  border: 2px solid var(--color-accent);
  border-radius: 0;
  background: var(--color-ink);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav .nav__konto,
.nav .nav__konto-name,
.nav .nav__konto-icon { color: var(--color-on-dark); }

.nav .nav__konto:hover { background: var(--color-accent); opacity: 1; }
.nav .nav__konto:hover .nav__konto-name,
.nav .nav__konto:hover .nav__konto-icon { color: var(--color-ink); }

/* Warenkorb auf der Bestellseite in derselben Form */
.nav .nav__aktionen .cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.9rem;
  border: 2px solid var(--color-accent);
  border-radius: 0;
  background: var(--color-ink);
  color: var(--color-on-dark);
  cursor: pointer;
  flex-shrink: 0;
}

.nav__aktionen .cart-btn:hover { background: var(--color-accent); }
.nav__aktionen .cart-btn:hover .ic { color: var(--color-ink); }
.nav__aktionen .cart-btn .ic { width: 22px; height: 22px; }

/* Der Zusatz neben der Wortmarke verschwindet schon frueh. Er ist
   das erste, was Platz kostet, und das unwichtigste in der Zeile. */
@media (max-width: 1100px) {
  .nav .nav__zusatz { display: none; }
}

@media (max-width: 900px) {
  .nav .nav__inner { gap: var(--space-3); }
  .nav .btn__text,
  .nav .nav__konto-name { display: none; }
  .nav .btn--sm .ic { display: block; }

  /* Ohne Text sind die Knoepfe Quadrate. Feste Groesse statt
     Innenabstaenden: der rechte Abstand stammt vom Pfeilblock,
     der hier ausgeblendet ist, und blaehte die Knoepfe sonst auf
     das Doppelte auf.

     align-self center ist noetig, weil die Leiste auf stretch
     steht. Ohne das werden die Quadrate auf die volle Zeilenhoehe
     gezogen und sind hohe schmale Rechtecke. */
  .nav .nav__aktionen .btn,
  .nav .nav__aktionen .cart-btn,
  .nav .nav__konto {
    width: 44px;
    height: 44px;
    align-self: center;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .nav .nav__aktionen .btn::after { display: none; }

  .nav .nav__wortmarke { font-size: 1.25rem; }
}

@media (max-width: 400px) {
  .nav .nav__wortmarke,
  .hero-marke__name { font-size: 1rem; }
  .nav .nav__logo-bild,
  .hero-marke__logo { width: 42px; }
}

/* Sprungmarken nicht unter die Kopfzeile schieben */
[id] { scroll-margin-top: 88px; }

/* ── TYPOGRAFIE ── */
.kicker {
  display: block;
  font-family: var(--font-cond);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.titel {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Kurzer, fetter Balken unter der Ueberschrift.
   Tritt an die Stelle der Zierlinie aus dem Bistro. */
.balken {
  width: 64px;
  height: 5px;
  background: var(--color-accent);
  margin-block: var(--space-4) var(--space-5);
}

.balken--gelb { background: var(--color-gelb); }
.balken--mitte { margin-inline: auto; }

/* ── ABSCHNITTE ── */
.abschnitt { padding-block: var(--space-8); }
.abschnitt--eng { padding-block: var(--space-7); }
.abschnitt__kopf { margin-bottom: var(--space-6); }
.abschnitt__kopf--mitte { text-align: center; }
.abschnitt__kopf--mitte .balken { margin-inline: auto; }

.abschnitt__text {
  color: var(--color-muted);
  line-height: 1.75;
  max-width: 62ch;
}

.abschnitt--dunkel {
  background: var(--color-dark);
  color: var(--color-on-dark);
}

.abschnitt--dunkel .titel { color: var(--color-on-dark); }
.abschnitt--dunkel .kicker { color: var(--color-gelb); }
.abschnitt--dunkel .abschnitt__text { color: var(--color-on-dark-mu); }

@media (max-width: 899px) {
  .abschnitt,
  .abschnitt--eng { padding-block: var(--space-6); }
  .abschnitt__kopf { margin-bottom: var(--space-5); }
}

/* ── BUTTONS ──
   Zweiteiler: links Text, rechts ein abgesetzter Block mit Pfeil.
   Sieht aus wie ein gestempeltes Ticket und macht die Richtung
   sofort klar.

   Der Pfeilblock ist ein ::after, damit im HTML nichts geaendert
   werden muss. Er ist absolut an die rechte Kante gesetzt und
   laeuft ueber die volle Innenhoehe. Als normales Flex-Element
   ginge das nicht: align-self stretch fuellt nur den Inhalts-
   bereich, die Innenabstaende des Knopfs blieben frei und der
   Block saesse als Kaestchen mittendrin. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.72rem 3.5rem 0.72rem 1.3rem;
  border-radius: 0;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition),
              color var(--transition), border-color var(--transition);
}

.btn::before { display: none; }

.btn::after {
  content: '\2192';
  position: absolute;
  /* Minus zwei Pixel, damit der Block den Rahmen des Knopfs
     ueberdeckt. Bei top/right/bottom auf null endet er innen an
     der Rahmenkante und laesst einen Streifen stehen. */
  top: -2px;
  bottom: -2px;
  right: -2px;
  width: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  line-height: 1;
  /* Der Pfeil sitzt in der Schrift unterhalb der Mitte des
     Zeilenkastens. Der Innenabstand unten schiebt ihn optisch
     auf die Mitte. */
  padding-bottom: 0.14em;
  -webkit-text-stroke: 0.7px currentColor;
  transition: background var(--transition), color var(--transition);
}

.btn:active { transform: translateY(2px); }

/* Farbstellung: der Koerper ist immer Teerschwarz, die Farbe
   sitzt nur im Rand und im Pfeilblock. Beim Ueberfahren fuellt
   sich der Koerper mit der Randfarbe und der Block dreht ins
   Dunkle.

   Orange steht fuer die Hauptaktion, Gelb fuer die zweite. Der
   schwarze Koerper haelt beide zusammen und sorgt dafuer, dass
   die Knoepfe auf hellem wie auf dunklem Grund gleich aussehen. */
.btn--primary {
  background: var(--color-ink);
  border-color: var(--color-accent);
  color: var(--color-on-dark);
}

.btn--primary::after {
  background: var(--color-accent);
  color: var(--color-ink);
}

.btn--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
  opacity: 1;
}

.btn--primary:hover::after {
  background: var(--color-ink);
  color: var(--color-accent);
}

/* Zweite Aktion in Gelb. btn--gelb, btn--outline und
   btn--outline-light sehen jetzt gleich aus, die drei Namen
   bleiben nur bestehen, damit im HTML nichts angefasst werden
   muss. */
.btn--gelb,
.btn--outline,
.btn--outline-light {
  background: var(--color-ink);
  border: 2px solid var(--color-gelb);
  color: var(--color-on-dark);
}

.btn--gelb::after,
.btn--outline::after,
.btn--outline-light::after {
  background: var(--color-gelb);
  color: var(--color-ink);
}

.btn--gelb:hover,
.btn--outline:hover,
.btn--outline-light:hover {
  background: var(--color-gelb);
  border-color: var(--color-gelb);
  color: var(--color-ink);
  opacity: 1;
}

.btn--gelb:hover::after,
.btn--outline:hover::after,
.btn--outline-light:hover::after {
  background: var(--color-ink);
  color: var(--color-gelb);
}

/* Ueber die volle Breite bleibt der Text mittig, der Block sitzt
   absolut an der Kante. */
.btn--full { justify-content: center; }

.btn .ic {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.btn--sm {
  font-size: 0.86rem;
  padding: 0.55rem 2.8rem 0.55rem 1rem;
}

.btn--sm::after { width: 2.2rem; }
.btn--sm .ic { width: 20px; height: 20px; }

/* Doppelter Klassenname, damit spaeter geladene Stylesheets den
   Innenabstand nicht ueberschreiben. konto.css wird nach diesem
   Stylesheet geladen; ohne die hoehere Spezifitaet fiel der
   rechte Innenabstand weg und der Text lief unter den Pfeilblock.
   Genau das war der abgeschnittene Text in der Kopfzeile. */
.btn.btn { padding: 0.72rem 3.5rem 0.72rem 1.3rem; }
.btn--sm.btn--sm { padding: 0.55rem 2.8rem 0.55rem 1rem; }

/* Wo der Text ausgeblendet ist, bleibt sonst nur Symbol und Pfeil
   nebeneinander stehen. Das ergibt keinen Sinn, also weg damit. */
@media (max-width: 900px) {
  .nav .btn--sm::after,
  .hero-top__aktionen .btn::after { display: none; }
  .nav .btn--sm,
  .hero-top__aktionen .btn { padding-inline: 0.6rem; }
}

/* ── HERO ──
   Links die Schlagzeile, rechts Anschlagtafel und Foto der Bude.
   Der Hero traegt kein Hintergrundbild, damit die Schlagzeile auf
   einer ruhigen Flaeche steht. */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  background: var(--color-ink);
}

.hero > * { position: relative; z-index: 2; }

/* Auch im Hero der Startseite gilt: immer einzeilig. */
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: nowrap;
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(242, 238, 228, 0.18);
}

.hero-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  line-height: 1;
  min-width: 0;
  flex-shrink: 1;
}

.hero-marke__logo {
  display: block;
  width: 52px;
  height: auto;
  flex-shrink: 0;
}

.hero-marke__name {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.hero-marke__name em { font-style: normal; color: var(--color-accent); }

/* Zusatz neben der Wortmarke, wie in der Kopfzeile der Unterseiten */
.hero-marke__zusatz {
  font-family: var(--font-cond);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gelb);
  white-space: nowrap;
}

@media (max-width: 899px) {
  .hero-marke__zusatz { display: none; }
}

.hero-top__aktionen {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Konto-Knopf sieht aus wie die Knoepfe daneben und ist genauso
   hoch.

   auth.js schreibt den Knopf in das span mit der id nav-konto.
   Ohne display contents waere dieses span das Flex-Element, es
   wuerde auf volle Hoehe gezogen und der Knopf darin bliebe klein.
   Mit display contents faellt das span aus dem Layout und der
   Knopf wird selbst zum Flex-Element. */
.hero-top__aktionen #nav-konto { display: contents; }

.hero-top__aktionen .nav__konto {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 1rem;
  border: 2px solid var(--color-accent);
  border-radius: 0;
  background: var(--color-ink);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-top__aktionen .nav__konto:hover {
  background: var(--color-accent);
  opacity: 1;
}

.hero-top__aktionen .nav__konto,
.hero-top__aktionen .nav__konto-name,
.hero-top__aktionen .nav__konto-icon { color: var(--color-on-dark); }
.hero-top__aktionen .nav__konto:hover .nav__konto-icon { color: var(--color-ink); }
.hero-top__aktionen .nav__konto:hover .nav__konto-name { color: var(--color-ink); }

/* Mittiger Inhalt, linksbuendig gesetzt */
.hero__inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-8);
  max-width: var(--max-content-width);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

@media (min-width: 1024px) {
  .hero__inhalt { padding-inline: var(--container-pad-desktop); }
}

.hero__kicker {
  font-family: var(--font-cond);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gelb);
  margin-bottom: var(--space-4);
}

.hero__titel {
  font-family: var(--font-head);
  /* Groesse ist an der laengsten Zeile ausgerichtet: "Satt wirste
     hier" braucht in Anton etwa das 6,7-fache der Schriftgroesse
     an Breite. Bei 1140px Fensterbreite bleiben der linken Spalte
     rund 700px, daraus ergibt sich die Obergrenze. Groesser und
     die Zeile bricht um. */
  font-size: clamp(2.6rem, 7.4vw, 5.9rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin-bottom: var(--space-5);
}

.hero__titel em { font-style: normal; color: var(--color-accent); }

.hero__text {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--color-on-dark-mu);
  max-width: 44ch;
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Zwei Spalten: links die Schlagzeile, rechts die Anschlagtafel.
   Ohne Hintergrundfoto darf der Hero ruhig dichter belegt sein. */
.hero__spalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__spalten {
    /* Feste Breite rechts statt Anteil. Die rechte Spalte braucht
       nur so viel Platz wie Foto und Tafel, der Rest gehoert der
       Schlagzeile. Der Abstand ist bewusst knapp, jeder Pixel hier
       fehlt der Schlagzeile. */
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: var(--space-7);
  }
}

/* ── RECHTE SPALTE: TAFEL AUF DEM FOTO ──
   Reihenfolge im HTML: erst die Tafel, dann das Foto. Das Foto
   wird per negativem Aussenabstand nach oben gezogen und rutscht
   damit unter die Tafel. So ueberlappt die Tafel die OBERE Kante
   des Bildes.

   Die Tafel sitzt buendig am rechten Rand, das Foto ragt links
   darunter hervor. Bewusst unsymmetrisch. */
.hero-rechts { position: relative; }

.hero-rechts__foto {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border: 1px solid var(--color-accent);
  background: var(--color-dark-2);
}

@media (min-width: 900px) {
  .hero-rechts .tafel-info {
    position: relative;
    z-index: 1;
    background: var(--color-ink);
    /* Versetzt statt buendig: die Tafel ragt rechts ueber die
       Bildkante hinaus, links bleibt ein breiterer Streifen Foto.
       Genau dieser Versatz macht es unsymmetrisch. */
    margin-left: 64px;
    margin-right: -28px;
  }

  /* Wie weit das Foto unter die Tafel rutscht. Bewusst nur eine
     Handbreit, es soll sich beruehren und nicht verdecken. */
  .hero-rechts__foto { margin-top: -24px; }
}

/* Pulsschlag. Sehr kleiner Ausschlag, sonst wirkt es wie ein
   Werbebanner statt wie ein Hinweis. Der Ursprung liegt rechts,
   damit die Tafel beim Wachsen nicht ueber das Foto wandert. */
@keyframes tafel-puls {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

.hero-rechts .tafel-info {
  transform-origin: 70% center;
  animation: tafel-puls 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-rechts .tafel-info { animation: none; }
}

@media (max-width: 899px) {
  /* Auf schmalen Schirmen schrumpft die Tafel auf ein kleines
     Schild zusammen: nur noch der orange Statusbalken, ohne
     Rahmen und ohne die drei Zeilen darunter. Die stehen weiter
     unten ohnehin in der Fusszeile.

     Der negative Aussenabstand rechts schiebt das Schild ueber die
     Bildkante hinaus, das Foto rutscht per negativem Abstand nach
     oben darunter. */
  .hero-rechts .tafel-info {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin-left: auto;
    margin-right: 22%;
    border: none;
    padding: 0;
    background: transparent;
  }

  .hero-rechts .tafel-info__zeile { display: none; }

  .hero-rechts .tafel-info__status {
    margin: 0;
    padding: 0.5rem 1.1rem;
  }

  .hero-rechts .tafel-info__status-text { font-size: 1rem; }

  .hero-rechts__foto { margin-top: -18px; }
}

/* ── ANSCHLAGTAFEL ──
   Rahmen, oben ein Statusbalken, darunter drei Zeilen.
   Der Balken sitzt buendig auf der Rahmenkante, deshalb die
   negativen Aussenabstaende in Hoehe des Innenabstands. */
.tafel-info {
  border: 1px solid var(--color-accent);
  padding: var(--space-5);
}

.tafel-info__status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: var(--space-3) var(--space-4);
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
}

/* Geschlossen: gedeckt statt Signalfarbe */
.tafel-info__status--zu {
  background: var(--color-beton);
  color: var(--color-on-dark);
}

.tafel-info__status-text {
  font-family: var(--font-head);
  font-size: 1.15rem;
  text-transform: uppercase;
  line-height: 1.1;
}

.tafel-info__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line-dark);
}

.tafel-info__zeile:last-child { border-bottom: none; padding-bottom: 0; }

.tafel-info__label {
  font-family: var(--font-cond);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-dark-mu);
}

.tafel-info__wert {
  font-family: var(--font-head);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--color-on-dark);
  white-space: nowrap;
}

.tafel-info__wert--gelb { color: var(--color-gelb); }

@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero-top { gap: var(--space-3); }
  .hero-marke__name { font-size: 1.25rem; }
  .hero-marke__logo { width: 52px; }
  .hero-top__aktionen .btn__text,
  .hero-top__aktionen .nav__konto-name { display: none; }
  .hero-top__aktionen .btn .ic { display: block; }

  /* Gleiche Quadrate wie in der Kopfzeile der Unterseiten */
  .hero-top__aktionen .btn,
  .hero-top__aktionen .nav__konto {
    width: 44px;
    height: 44px;
    align-self: center;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .hero-top__aktionen .btn::after { display: none; }
  .hero__inhalt { padding-block: var(--space-7); }

  /* Beide Handlungsaufrufe gleich breit, nicht ueber die ganze
     Zeile, und mittig in der Sektion. */
  .hero__actions { justify-content: center; }

  .hero__actions .btn {
    flex: 1 1 100%;
    max-width: 300px;
    margin-inline: auto;
  }
}

/* Freigestelltes Motiv am linken Bildschirmrand, ausserhalb des
   Inhaltsbereichs von 1140 Pixeln. Gleiche Machart wie die
   Deko-Motive im Bistro.

   Es erscheint erst ab 1500 Pixeln Fensterbreite. Darunter ist
   links vom Inhalt kein Platz, und das Motiv wuerde ueber die
   Kacheln laufen. Das Bild braucht einen transparenten
   Hintergrund, sonst sieht man ein Rechteck. */
#schicht { position: relative; overflow: hidden; }

.schicht-deko { display: none; }

@media (min-width: 1500px) {
  .schicht-deko {
    display: block;
    position: absolute;
    left: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    width: 210px;
    height: auto;
    pointer-events: none;
  }
}

/* ── SCHICHTPLAN ──
   Tritt an die Stelle der Tageszeiten. Drei breite Streifen
   untereinander, Bild und Text nebeneinander, die Bildseite
   wechselt von Zeile zu Zeile.

   Alle Textbloecke stehen auf Teerschwarz. Beim Ueberfahren
   kippt der Block auf Papierweiss um, Schrift und Grund tauschen
   also die Rolle. Der Zeitstempel bleibt orange, weil er auf
   beiden Untergruenden traegt. */
.schicht {
  display: grid;
  gap: var(--space-8);
}

.schicht__reihe {
  display: grid;
  grid-template-columns: 1fr;
  border: 2px solid var(--color-accent);
}

@media (min-width: 820px) {
  .schicht__reihe { grid-template-columns: 340px 1fr; }

  /* Gedreht: Text links, Bild rechts. Die Reihenfolge im HTML
     bleibt gleich, nur die Darstellung dreht sich. */
  .schicht__reihe--gedreht { grid-template-columns: 1fr 340px; }
  .schicht__reihe--gedreht .schicht__bild { order: 2; }
  .schicht__reihe--gedreht .schicht__inhalt { order: 1; }
}

.schicht__bild {
  display: block;
  width: 100%;
  height: 100%;
  /* Bestimmt zusammen mit der Textlaenge die Hoehe der Zeile.
     Das Bildformat selbst spielt keine Rolle, es wird ueber
     object-fit auf die Box zugeschnitten. */
  min-height: 190px;
  object-fit: cover;
  background: var(--color-beton);
}

@media (max-width: 819px) {
  /* Auf schmalen Schirmen als Wisch-Slider. Drei Zeilen
     untereinander sind sonst drei Bildschirmlaengen.

     Das Bild steht im Format 4:3, genau dem Format der Dateien.
     Damit deckt sich der Ausschnitt mit dem Bild und es wird
     nichts abgeschnitten. Bei 16:10 fehlten oben und unten
     Streifen. */
  .schicht {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-4);
    margin-inline: calc(var(--container-pad-mobile) * -1);
    padding-inline: var(--container-pad-mobile);
    scroll-padding-inline: var(--container-pad-mobile);
    padding-bottom: var(--space-3);
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-line-dark);
  }

  .schicht__reihe {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  /* Kein Wachsen im Slider, das ragt sonst ueber die Kante des
     scrollenden Kastens und wird abgeschnitten. Zwei Klassen,
     weil die Hover-Regel im Stylesheet weiter unten steht. */
  .schicht .schicht__reihe:hover { transform: none; }

  /* height auto ist hier entscheidend. Die Grundregel setzt
     height 100 Prozent, und weil sich im Slider alle Zeilen auf
     dieselbe Hoehe ziehen, wurde das Bild so hoch wie die
     laengste Karte. object-fit cover hat dann seitlich alles
     weggeschnitten, das Bild wirkte stark herangezoomt. */
  .schicht__bild {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    align-self: start;
  }
}

/* Beim Ueberfahren waechst die ganze Zeile ein Stueck. Der
   Farbwechsel von Schwarz auf Weiss war auf der jetzt durchgehend
   dunklen Seite zu grell. */
.schicht__reihe {
  transform-origin: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.schicht__reihe:hover {
  transform: scale(1.015);
  border-color: var(--color-gelb);
}

@media (prefers-reduced-motion: reduce) {
  .schicht__reihe { transition: none; }
  .schicht__reihe:hover { transform: none; }
}

.schicht__inhalt {
  background: var(--color-ink);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: default;
}

.schicht__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.schicht__zeit {
  font-family: var(--font-head);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--color-accent);
}

.schicht__name {
  font-family: var(--font-cond);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-dark-mu);
}

.schicht__titel {
  font-family: var(--font-head);
  font-size: 1.6rem;
  text-transform: uppercase;
  /* Anton laeuft sehr eng. In Versalien und bei dieser Groesse
     kleben die Buchstaben sonst aneinander. */
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--color-on-dark);
  margin-bottom: var(--space-3);
}

.schicht__text {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-on-dark-mu);
  max-width: 58ch;
}

@media (prefers-reduced-motion: reduce) {
  .schicht__inhalt,
  .schicht__inhalt * { transition: none; }
}

/* ── KARTE ALS TAFEL ──
   Bestellnummer, Name, Punktlinie, Preis. So haengt es ueber
   jeder Theke. Bewusst ohne Bildkacheln. */
.tafel {
  background: var(--color-dark-2);
  padding-block: var(--space-8);
}

.tafel__kopf { margin-bottom: var(--space-6); }
.tafel .titel { color: var(--color-on-dark); }
.tafel .kicker { color: var(--color-gelb); }

/* Reiterleiste ueber der Karte. Die Gruppen werden von
   js/tafel.js umgeschaltet. Laeuft das Skript nicht, stehen alle
   Gruppen untereinander und die Reiter sind wirkungslos, die
   Karte bleibt also lesbar. */
.tafel-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.tafel-reiter__btn {
  font-family: var(--font-cond);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.65rem 1.2rem;
  border: 2px solid var(--color-line-dark);
  border-radius: 0;
  background: transparent;
  color: var(--color-on-dark-mu);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.tafel-reiter__btn:hover {
  border-color: var(--color-gelb);
  color: var(--color-gelb);
}

.tafel-reiter__btn--aktiv,
.tafel-reiter__btn--aktiv:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.tafel-reiter__btn:focus-visible {
  outline: 2px solid var(--color-gelb);
  outline-offset: 2px;
}

@media (max-width: 599px) {
  /* Auf schmalen Schirmen als waagerechte Leiste zum Wischen,
     sonst brechen vier Reiter in drei Zeilen um. */
  .tafel-reiter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--container-pad-mobile) * -1);
    padding-inline: var(--container-pad-mobile);
    scrollbar-width: none;
  }
  .tafel-reiter::-webkit-scrollbar { display: none; }
}

/* Sichtbar ist immer genau eine Gruppe. Die Klasse setzt
   js/tafel.js beim Umschalten, die erste Gruppe traegt sie
   bereits im HTML. */
.tafel__gruppe { display: none; }
.tafel__gruppe--aktiv { display: block; }

.tafel__aktion { margin-top: var(--space-6); }

@media (max-width: 599px) {
  .tafel__aktion { display: flex; justify-content: center; }
}

.tafel__gruppe-name {
  font-family: var(--font-head);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin-bottom: var(--space-2);
}

.tafel__gruppe .balken { margin-block: 0 var(--space-4); }

.gericht {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line-dark);
}

.gericht:last-child { border-bottom: none; }

/* Bild links. Die Bestellnummer bleibt im Markup, wird aber
   ausgeblendet: neben dem Bild waren es zwei Erkennungsmerkmale
   nebeneinander. Zum Zurueckholen genuegt es, die Regel mit
   display none zu entfernen. */
.gericht__bild {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  align-self: center;
  object-fit: cover;
  border: 1px solid var(--color-line-dark);
  background: var(--color-dark-2);
}

.gericht__nr { display: none; }

.gericht__mitte { flex: 1; min-width: 0; }

.gericht__name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--color-on-dark);
  line-height: 1.15;
  margin-bottom: var(--space-1);
}

.gericht__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-on-dark-mu);
}

/* Punktlinie zwischen Name und Preis. Sie sitzt auf der
   Grundlinie und wird deshalb ein Stueck angehoben. */
.gericht__punkte {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--color-line-dark);
  transform: translateY(-0.3rem);
}

.gericht__preis {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--color-gelb);
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .gericht__punkte { display: none; }
  .gericht { gap: var(--space-3); }
  .gericht__bild { width: 64px; height: 64px; }
}

/* ── DIE BUDE, Zahlenwand ──
   Ersetzt den ueblichen Ueber-uns-Absatz. Vier Zahlen und ein
   Zitat im Emailleschild, dazu rechts oben ein altes Foto. */

/* Ueberschrift links, Foto rechts auf derselben Hoehe */
.bude-kopf {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-6);
}

@media (min-width: 900px) {
  .bude-kopf { grid-template-columns: 1fr 320px; }
}

.bude-kopf .abschnitt__kopf { margin-bottom: 0; }

/* Leicht schief, wie ein an die Wand gepinntes Foto. Zwei Grad
   reichen: mehr wirkt gebastelt statt beilaeufig. Beim Ueberfahren
   richtet es sich auf. */
.bude-foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 7px solid var(--color-on-dark);
  background: var(--color-beton);
  transform: rotate(-2.2deg);
  transition: transform 0.25s ease;
}

.bude-foto:hover { transform: rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .bude-foto { transform: none; transition: none; }
}

.zahlenwand {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 720px) {
  .zahlenwand { grid-template-columns: repeat(4, 1fr); }
}

.zahl {
  border: 2px solid var(--color-line-dark);
  padding: var(--space-5) var(--space-4);
  transition: border-color var(--transition);
}

.zahl:hover { border-color: var(--color-gelb); }

.zahl__wert {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--color-gelb);
}

.zahl__label {
  font-family: var(--font-cond);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-on-dark-mu);
  margin-top: var(--space-2);
}

/* Das Emailleschild mit dem Zitat ist entfernt.
   js/schreibmaschine.js wird von keiner Seite mehr geladen und
   kann geloescht werden. */

/* ── WERBEBANNER ──
   Zwei Haelften: links das Taxi als Bildflaeche, rechts der Text.
   Der freigestellte Teller liegt absolut auf der Naht zwischen
   beiden und verklammert sie.

   Der Banner steht bewusst nicht ueber die volle Breite, sondern
   im Inhaltsbereich. */
/* Der Banner gehoert optisch zu den vier Kacheln darueber und
   steht deshalb dicht darunter statt mit vollem Abschnitts-
   abstand dazwischen. */
#bude { padding-bottom: var(--space-6); }
.banner-abschnitt { padding-top: 0; }

.banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border: 2px solid var(--color-accent);
  background: var(--color-ink);
  transform-origin: center;
  animation: banner-puls 3.6s ease-in-out infinite;
}

/* Sehr kleiner Ausschlag. Der Banner ist gross, alles darueber
   wirkt wie ein zuckendes Werbebanner statt wie ein Hinweis. */
@keyframes banner-puls {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; }
}

@keyframes banner-puls-klein {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}

@media (max-width: 819px) {
  /* Kleinerer Ausschlag ueber eine eigene Animation. Drei Prozent
     sind bei der schmalen Inhaltsbreite mehr, als der Innenabstand
     des Containers auffangen kann, und der Banner stiesse an den
     Bildschirmrand.

     Keyframes lassen sich nicht in eine Media Query schachteln,
     deshalb zwei getrennte Animationen. */
  .banner { animation-name: banner-puls-klein; }
}

@media (min-width: 820px) {
  .banner { grid-template-columns: 0.9fr 1.1fr; }
}

.banner__bild {
  background-color: var(--color-dark-2);
  background-image: url('../Bilder/taxi_banner.webp');
  background-size: cover;
  background-position: center;
  min-height: 220px;
}

.banner__text {
  background: var(--color-ink);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

@media (min-width: 820px) {
  /* Platz fuer den Teller, der von links hereinragt */
  .banner__text { padding-left: 5.5rem; }
}

.banner__kicker {
  font-family: var(--font-cond);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-gelb);
  margin-bottom: var(--space-3);
}

.banner__titel {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin-bottom: var(--space-3);
}

.banner__titel em { font-style: normal; color: var(--color-accent); }

.banner__sub {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-on-dark-mu);
  max-width: 42ch;
  margin-bottom: var(--space-5);
}

/* Der Teller. Der Rand in der Grundfarbe setzt ihn vom Foto ab,
   sonst verschwimmt der freigestellte Rand mit dem Hintergrund. */
.banner__teller {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: contain;
}

@media (min-width: 820px) {
  .banner__teller {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 190px;
    height: 190px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
}

@media (max-width: 819px) {
  /* Untereinander: Foto oben, Text darunter. Der Teller liegt
     links auf der Naht zwischen beiden, also genau auf der
     Unterkante des Fotos.

     Die 220px sind die Hoehe von .banner__bild. Wenn du die dort
     aenderst, muss dieser Wert mit. */
  .banner__teller {
    position: absolute;
    top: 220px;
    left: -12px;
    transform: translateY(-50%);
    width: 112px;
    height: 112px;
    margin: 0;
    z-index: 1;
  }

  .banner__text { align-items: center; text-align: center; }
  .banner__sub { margin-inline: auto; }
}

/* ── STIMMEN ──
   Zettel an der Wand, wie sie hinter jeder Theke haengen.
   Leicht schief, beim Ueberfahren richten sie sich gerade. Nimmt
   das Motiv des schiefen Fotos aus dem Bude-Abschnitt auf. */
.stimmen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 820px) {
  .stimmen { grid-template-columns: repeat(3, 1fr); }
}

.bon {
  position: relative;
  background: var(--color-bg-soft);
  border: none;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

/* Jeder Zettel haengt ein bisschen anders. Die Werte bleiben
   klein, mehr wirkt gebastelt. */
.bon:nth-child(1) { transform: rotate(-1.8deg); }
.bon:nth-child(2) { transform: rotate(1.4deg); margin-top: var(--space-4); }
.bon:nth-child(3) { transform: rotate(-1.1deg); }

.bon:hover { transform: rotate(0deg); }

/* Reisszwecke oben mittig */
.bon__pin {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  margin: 0 auto var(--space-4);
}

.bon__sterne {
  color: var(--color-gelb);
  letter-spacing: 0.16em;
  margin-bottom: var(--space-3);
}

.bon__text {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-ink);
  flex: 1;
  margin-bottom: var(--space-4);
}

.bon__autor {
  font-family: var(--font-cond);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-top: 2px dashed var(--color-line);
  padding-top: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .bon,
  .bon:nth-child(1),
  .bon:nth-child(2),
  .bon:nth-child(3) { transform: none; transition: none; }
}

@media (max-width: 819px) {
  /* Im Wisch-Slider bleiben die Zettel gerade. Gedrehte Elemente
     in einem waagerecht scrollenden Kasten ragen sonst ueber die
     Kante und werden abgeschnitten. */
  .stimmen {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-4);
    margin-inline: calc(var(--container-pad-mobile) * -1);
    padding-inline: var(--container-pad-mobile);
    scroll-padding-inline: var(--container-pad-mobile);
    padding-bottom: var(--space-3);
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-line-dark);
  }
  .bon {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .bon:nth-child(1),
  .bon:nth-child(2),
  .bon:nth-child(3) { transform: none; margin-top: 0; }
}

/* ── KONTAKT ── */
.kontakt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .kontakt { grid-template-columns: 1fr 1.2fr; }
}

.kontakt__zeile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line-dark);
}

.kontakt__zeile:last-child { border-bottom: none; }
.kontakt__zeile .ic { width: 22px; height: 22px; color: var(--color-accent); }

.kontakt__label {
  display: block;
  font-family: var(--font-cond);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-dark-mu);
  margin-bottom: var(--space-1);
}

.kontakt__wert {
  color: var(--color-on-dark);
  line-height: 1.7;
}

.kontakt__wert a { color: inherit; }
.kontakt__wert a:hover { color: var(--color-gelb); }

.kontakt__karte {
  min-height: 340px;
  border: 2px solid var(--color-line-dark);
  overflow: hidden;
}

.kontakt__karte iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}

/* ── SPEISEKARTE, Bestellseite ──
   Die geteilten Regeln aus bestellen.css bleiben, hier nur die
   Anpassungen an die Schriften dieses Shops. */
.menu-section__title,
.menu-card__name {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.cat-link {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── DUNKLE UNTERSEITEN ──
   Konto, Anmelden, Kasse und Danke laufen auf den geteilten
   Stylesheets konto.css und checkout.css. Die sind shop-neutral
   und duerfen nicht angefasst werden.

   Statt jede einzelne Regel zu ueberschreiben, drehen wir die
   Farbtokens innerhalb des Inhaltsbereichs um. Alle Regeln der
   geteilten Dateien loesen dadurch automatisch dunkle Werte auf.
   Ausgeloest wird das ueber die Klasse dunkel am body.

   ACHTUNG: --color-ink ist hier die TEXTFARBE. Kopfzeile und
   Fusszeile liegen ausserhalb dieser Selektoren, sonst wuerden
   sie mit umkippen. */
body.dunkel {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

body.dunkel main,
body.dunkel .konto-head,
body.dunkel .konto-tabs,
body.dunkel .konto-modal,
body.dunkel .auth-wrap,
body.dunkel .checkout-steps,
body.dunkel .checkout-layout,
body.dunkel .danke-main {
  --color-bg: #14120F;
  --color-bg-soft: #1C1A16;
  --color-ink: #F2EEE4;
  --color-line: #3D392F;
  --color-muted: #8E887A;
  --color-rose-hell: #2A2620;
}

/* Alle Kaesten bekommen den orangen Rahmen und die harte Kante */
body.dunkel .konto-card,
body.dunkel .auth-box,
body.dunkel .konto-modal__box,
body.dunkel .form-section,
body.dunkel .checkout-summary,
body.dunkel .danke-info,
body.dunkel .stamp-card {
  background: var(--color-dark-2);
  border: 2px solid var(--color-accent);
  border-radius: 0;
  box-shadow: none;
}

/* Ueberschriften in der Hausschrift */
body.dunkel .konto-head__gruss,
body.dunkel .konto-panel__titel,
body.dunkel .konto-card__titel,
body.dunkel .auth-box__titel,
body.dunkel .form-section__title,
body.dunkel .checkout-summary__title,
body.dunkel .danke-main h1 {
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}

/* Reiter im Konto */
body.dunkel .konto-tabs { border-bottom: 1px solid var(--color-line-dark); }
body.dunkel .konto-tab { color: var(--color-on-dark-mu); font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
body.dunkel .konto-tab:hover { color: var(--color-on-dark); }
body.dunkel .konto-tab--active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* Eingabefelder: nur eine Linie unten, wie auf der
   Reservierungsseite. */
body.dunkel .konto-feld input,
body.dunkel .konto-feld select,
body.dunkel .konto-feld textarea,
body.dunkel .form-field input,
body.dunkel .form-field select,
body.dunkel .form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-line-dark);
  border-radius: 0;
  color: var(--color-on-dark);
}

body.dunkel .konto-feld input:focus,
body.dunkel .konto-feld select:focus,
body.dunkel .konto-feld textarea:focus,
body.dunkel .form-field input:focus,
body.dunkel .form-field select:focus,
body.dunkel .form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

body.dunkel select option { background: var(--color-dark-2); color: var(--color-on-dark); }

/* Das Kalendersymbol im Datumsfeld zeichnet der Browser selbst
   und laesst sich nicht einfaerben. Der Filter dreht das dunkle
   Standardsymbol ins Orange. Die Werte sind angenaehert, eine
   exakte Farbangabe gibt es dafuer nicht. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(44%) sepia(88%) saturate(2400%) hue-rotate(348deg) brightness(94%) contrast(94%);
  cursor: pointer;
}

/* Knoepfe in Formularfeldern sollen nicht ueber die ganze Spalte
   laufen. konto.css setzt die Felder auf stretch, deshalb hier
   beides: justify-self fuer Raster, align-self fuer Flex. */
.konto-feld .btn,
.form-field .btn {
  justify-self: start;
  align-self: flex-start;
  width: auto;
}

/* Zahlungsarten und Fortschritt */
body.dunkel .payment-option {
  background: transparent;
  border: 2px solid var(--color-line-dark);
  border-radius: 0;
}

body.dunkel .step__nr {
  background: var(--color-dark-2);
  border: 2px solid var(--color-line-dark);
  border-radius: 0;
  color: var(--color-on-dark-mu);
}

body.dunkel .step--active .step__nr {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

body.dunkel .badge--dark {
  background: var(--color-accent);
  color: #14120F;
  border-radius: 0;
}

body.dunkel .danke-icon { color: var(--color-accent); }

/* Elemente, die bewusst dunkel auf Orange oder als dunkler
   Koerper stehen, brauchen die Tokens in ihrer urspruenglichen
   Bedeutung zurueck. Sie bekommen sie deshalb in ihrem eigenen
   Geltungsbereich noch einmal gesetzt.

   Ohne das faerbt sich der Knopfkoerper mit der umgedrehten
   Variable ein und wird cremefarben, waehrend die Schrift
   ebenfalls creme bleibt. Genau dann sieht man gar nichts mehr. */
body.dunkel .btn,
body.dunkel .stamp-hint__zahl,
body.dunkel .step__nr,
body.dunkel .badge--dark {
  --color-ink: #14120F;
  --color-on-dark: #F2EEE4;
}

/* ── STEMPELKARTE ──
   Ein eingeloester Stempel zeigt das Logo statt eines Hakens.
   Bewusst hier und nicht in konto.js: die Kontodateien sind
   shop-neutral. Der Haken bleibt im Markup und wird ausgeblendet.

   Drei Klassen im Selektor, weil konto.css nach diesem Stylesheet
   geladen wird. */
.stamp-card .stamp-grid .stamp-slot--filled {
  background-color: var(--color-dark-2);
  background-image: url('../Bilder/logo.webp');
  background-size: 68%;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--color-accent);
  border-radius: 0;
}

.stamp-card .stamp-grid .stamp-slot--filled svg { display: none; }

.stamp-card .stamp-grid .stamp-slot {
  border-radius: 0;
  border-color: var(--color-line-dark);
}

.stamp-hint {
  border-color: var(--color-accent);
  border-radius: 0;
  color: var(--color-on-dark);
}

.stamp-hint__zahl {
  font-family: var(--font-head);
  background: var(--color-accent);
  color: var(--color-ink);
  border-radius: 0;
}

/* ── DEMO-BANNER ──
   Die Zeile mit dem Demo-Hinweis kommt aus auth.js und wird in
   konto.css hell gestaltet. Diese Datei wird nach imbiss.css
   geladen, deshalb der doppelte Klassenname. */
.demo-banner.demo-banner {
  background: var(--color-dark-2);
  color: var(--color-on-dark);
  border-bottom: 1px solid var(--color-line-dark);
}

.demo-banner.demo-banner a {
  color: var(--color-gelb);
}

.demo-banner.demo-banner a:hover {
  color: var(--color-accent);
}

/* ── FUSSZEILE ── */
.footer {
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding-top: var(--space-7);
  padding-bottom: var(--space-5);
}

.footer-marke {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line-dark);
}

.footer-marke:hover { opacity: 1; }

.footer-marke__logo {
  display: block;
  width: 56px;
  height: auto;
  flex-shrink: 0;
}

.footer-marke__name {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  color: var(--color-on-dark);
  line-height: 1;
}

.footer-marke__name em { font-style: normal; color: var(--color-accent); }

.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 820px) {
  .footer__cols { grid-template-columns: 1.2fr 1fr 1fr; }
}

.footer__kicker {
  font-family: var(--font-cond);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.footer__text {
  font-size: var(--text-sm);
  line-height: 1.85;
  color: var(--color-on-dark-mu);
}

.footer__text a { color: var(--color-on-dark); }
.footer__text a:hover { color: var(--color-gelb); }

.footer__zeiten {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.footer__zeit {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-on-dark-mu);
  border-bottom: 1px dotted var(--color-line-dark);
  padding-bottom: var(--space-2);
}

.footer__zeit b { color: var(--color-on-dark); font-weight: 600; }

.footer__links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

.footer__links a {
  font-family: var(--font-cond);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark-mu);
}

.footer__links a:hover { color: var(--color-gelb); opacity: 1; }

.footer__divider {
  border: none;
  border-top: 1px solid var(--color-line-dark);
  margin-block: var(--space-5) var(--space-4);
}

.footer__copy {
  font-family: var(--font-cond);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-dark-mu);
  opacity: 0.7;
}