/* bistro.css — Café Marlene
   Eigenes Seiten-Stylesheet. Ersetzt grill.css vollständig.
   Aufbau angelehnt an die Cappu-Referenz: Kicker über jeder
   Überschrift, Zierlinie darunter, abwechselnde Bild-Text-Blöcke,
   drei Kategoriekacheln, Reservierung, dreispaltige Fußzeile. */

/* ── KOPFZEILE ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
}

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

/* Marke mit Wortmarke in Fraunces */
.nav__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Logo links neben der Wortmarke, wie im Hero der Startseite */
.nav__logo-bild {
  display: block;
  width: 38px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .nav__logo-bild { width: 30px; }
}

.nav__wortmarke {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.5rem;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  line-height: 1;
  white-space: nowrap;
}

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

.nav__zusatz {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .nav__wortmarke { font-size: 1.2rem; }
  .nav__zusatz { display: none; }
}

/* Menue als Ausklapper */
.nav__menue-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition), background var(--transition);
}

.nav__menue-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-rose-hell);
}

.nav__links {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  flex-direction: column;
  gap: 0;
  min-width: 230px;
  padding: var(--space-2);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(46, 38, 32, 0.14);
  z-index: 200;
}

.nav.nav--offen .nav__links { display: flex; }

.nav__links a {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.nav__links a:hover {
  background: var(--color-rose-hell);
  color: var(--color-accent);
  opacity: 1;
}

/* auth.js wuerde einen eigenen Hamburger einsetzen */
.nav__burger { display: none !important; }

@media (max-width: 900px) {
  .nav__inner { flex-wrap: nowrap; }
  .nav .btn__text,
  .nav .nav__konto-name { display: none; }
  .nav .nav__aktionen .btn { padding-inline: 0.5rem; gap: 0; }
  .nav .nav__konto { padding: 0.45rem; }
  .nav__menue-btn__text { display: none; }
  .nav__menue-btn { padding: 0.45rem 0.62rem; }

  /* Einzeiler erzwingen. konto.css wird nach diesem Stylesheet
     geladen und setzt dort eigene Werte auf .nav__inner, deshalb
     hier zwei Klassen statt einer. Sonst bricht die Kopfzeile auf
     konto.html und reservieren.html in zwei Zeilen um, waehrend
     sie auf bestellen.html einzeilig bleibt.

     min-width 0 ist noetig, damit die Marke ueberhaupt schrumpfen
     darf. Flex-Elemente gehen sonst nie unter ihre Inhaltsbreite,
     und die Aktionen werden in die naechste Zeile gedrueckt. */
  .nav .nav__inner {
    flex-wrap: nowrap;
    gap: var(--space-3);
  }

  .nav .nav__marke {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }

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

  .nav .nav__wortmarke { font-size: 1.05rem; }
  .nav .nav__logo-bild { width: 28px; }
}

@media (max-width: 400px) {
  .nav .nav__wortmarke { font-size: 0.95rem; }
  .nav .nav__logo-bild { width: 24px; }
  .nav .nav__inner { gap: var(--space-2); }
}

@media (max-width: 480px) {
  .nav__links { left: 0; right: 0; min-width: 0; width: auto; }
}

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

/* ── KICKER UND ZIERLINIE ──
   Das wiederkehrende Muster der Referenz: kleine Vorzeile,
   grosse Ueberschrift, darunter eine feine Bohnenlinie. */
.kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.titel {
  font-family: var(--font-head);
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* Zierlinie mit Raute in der Mitte */
.zierlinie {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-4) var(--space-5);
}

.zierlinie::before,
.zierlinie::after {
  content: '';
  height: 1px;
  width: 34px;
  background: var(--color-rose);
}

.zierlinie span {
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.zierlinie--mitte { justify-content: center; }
.zierlinie--mitte::before,
.zierlinie--mitte::after { width: 54px; }

/* ── 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__text {
  color: var(--color-muted);
  line-height: 1.8;
  max-width: 62ch;
}

.abschnitt__kopf--mitte .abschnitt__text { margin-inline: auto; }

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

/* ── HERO ──
   Kopfbereich liegt im Hero: links Telefon, mittig die Marke,
   rechts die Aktionen, darunter die Menuepunkte. Inhalt mittig.
   Unten schliesst eine gerissene Papierkante ab. */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-color: var(--color-dark);
  padding-bottom: 48px;
}

/* Leichte Abdunklung, damit Schrift auf jedem Motiv sitzt */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(32, 25, 21, 0.34);
  pointer-events: none;
}

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

/* Obere Leiste, dreigeteilt */
.hero-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5) var(--space-3);
}

.hero-top__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hero-top__tel:hover { color: var(--color-rose); opacity: 1; }

.hero-top__tel-kreis {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-top__tel-kreis .ic { width: 20px; height: 20px; }

/* Marke mittig, Logo links daneben */
.hero-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  text-align: left;
  line-height: 1;
}

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

@media (max-width: 899px) {
  .hero-marke { gap: var(--space-3); }
  .hero-marke__logo { width: 52px; }
}

.hero-marke__zusatz {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: lowercase;
  color: var(--color-rose);
  margin-bottom: var(--space-2);
}

.hero-marke__name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -0.02em;
  color: #fff;
}

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

/* Aktionen rechts */
.hero-top__aktionen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Konto-Knopf im Hero. Die Kopfzeile liegt dort auf dem Foto,
   deshalb Symbol und Name in vollem Weiss statt in Ink. Auf den
   Unterseiten bleibt es dunkel, dort ist die Kopfzeile hell.
   Das Symbol traegt in konto.css eine eigene Farbe, es braucht
   deshalb einen eigenen Selektor und wird nicht mitvererbt. */
.hero-top__aktionen .nav__konto,
.hero-top__aktionen .nav__konto:hover {
  color: #fff;
  opacity: 1;
}

.hero-top__aktionen .nav__konto-name,
.hero-top__aktionen .nav__konto-icon {
  color: #fff;
  transition: color var(--transition);
}

.hero-top__aktionen .nav__konto:hover .nav__konto-icon {
  color: var(--color-accent);
}

/* Menuepunkte unter der Marke */
.hero-menue {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
}

.hero-menue a {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.hero-menue a:hover { color: var(--color-rose); opacity: 1; }

@media (max-width: 899px) {
  .hero-menue { display: none; }
  .hero-top__tel span:not(.hero-top__tel-kreis) { display: none; }
  .hero-marke__zusatz { font-size: 0.6rem; letter-spacing: 0.24em; }

  /* Zwei Zeilen statt einer: oben Telefon und Marke, darunter die
     drei Aktionen. In einer Zeile war das auf einem Telefon nicht
     unterzubringen und lief seitlich aus dem Fenster.

     Die beiden aeusseren Spalten sind gleich breit. Dadurch sitzt
     die Marke mittig im Fenster und nicht nur mittig im Restplatz
     neben dem Telefonknopf. Die dritte Spalte bleibt leer und ist
     nur Gegengewicht. */
  .hero-top {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "tel marke leer"
      "aktionen aktionen aktionen";
    row-gap: var(--space-4);
  }

  .hero-top__tel { grid-area: tel; justify-self: start; }
  .hero-marke { grid-area: marke; }

  .hero-top__aktionen {
    grid-area: aktionen;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-top__aktionen .btn { padding-inline: 0.7rem; }

  /* Beide Handlungsaufrufe gleich breit untereinander. Nebeneinander
     waren sie unterschiedlich lang, weil der Text die Breite bestimmt. */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 330px);
    margin-inline: auto;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__actions .btn:has(.ic) { padding: 9px; }
}

/* Mittiger Inhalt */
.hero__inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: var(--container-pad-mobile);
  padding-block: var(--space-7);
  color: var(--color-on-dark);
}

.hero__kicker {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.9vw, 1.32rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-rose);
  margin-bottom: var(--space-5);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.hero__titel {
  font-family: var(--font-head);
  font-weight: 600;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-size: clamp(2.9rem, 8.4vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--space-7);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* Groessere Buttons im Hero */
.hero__actions .btn {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
}

.hero__actions .btn:has(.ic) { padding: 9px 30px 9px 9px; }
.hero__actions .btn .ic { width: 40px; height: 40px; padding: 9px; }

/* ── BUTTONS: versetzte zweite Ebene ──
   Hinter jedem Button liegt eine Flaeche in hellem Rosé, um
   6px versetzt. Beim Überfahren faehrt sie heran.

   WICHTIG: kein isolation: isolate. Das erzeugt einen eigenen
   Stapelkontext, dann liegt das Pseudo-Element mit z-index -1
   UEBER dem Hintergrund des Buttons statt dahinter. */
.btn {
  position: relative;
  border-radius: 999px;
  overflow: visible;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--color-rose);
  transform: translate(6px, 6px);
  transition: transform var(--transition);
  z-index: -1;
  pointer-events: none;
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translate(0, 0);
}

/* Fuellfarben explizit setzen, damit nichts durchscheint */
.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

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

/* Zweite Variante in Creme mit dunkler Kontur. Mokka war dem
   Braunton des Hero-Fotos zu aehnlich, Creme hebt sich auf
   jedem Untergrund ab. */
.btn--outline,
.btn--outline-light {
  background: var(--color-bg-soft);
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink);
}

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

/* Icon im hellen Kreis, hier explizit, damit es nicht von
   orient.css abhaengt. */
.btn .ic {
  width: 34px;
  height: 34px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-bg-soft);
  color: var(--color-accent);
  position: relative;
  z-index: 1;
}

.btn--outline .ic,
.btn--outline-light .ic {
  background: var(--color-ink);
  color: var(--color-bg-soft);
}

.btn--outline:hover .ic,
.btn--outline-light:hover .ic {
  background: var(--color-bg-soft);
  color: var(--color-ink);
}

.btn--sm .ic { width: 28px; height: 28px; padding: 6px; }

/* Kleine Buttons mit geringerem Versatz */
.btn--sm::before { transform: translate(4px, 4px); }

/* Auf dunklem Grund eine hellere zweite Ebene */
.hero .btn::before,
.aktion .btn::before,
.footer .btn::before {
  background: rgba(240, 220, 214, 0.5);
}

/* In Listen und Karten ohne zweite Ebene, dort waeren es zu viele */
.menu-card .btn::before,
.cart-item .btn::before,
.cart-sidebar .btn::before,
.cart-drawer .btn::before,
.konto-panel .btn--sm::before,
.modus .btn::before {
  display: none;
}

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

/* ── GERISSENE PAPIERKANTE ──
   Flach und feinzackig wie echtes Papier. Die Hoehe muss niedrig
   bleiben, sonst wird die feine Zackung hochgezogen und plump. */
.riss {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 44px;
  z-index: 3;
  pointer-events: none;
  display: block;
}

.riss path { fill: var(--color-bg); }

@media (max-width: 700px) {
  .riss { height: 26px; }
  .hero { padding-bottom: 30px; }
}

/* ── ÖFFNUNGSZEITEN-BAND ── */
.band {
  background: var(--color-mokka);
  color: var(--color-on-dark);
  padding-block: var(--space-5);
}

.band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  text-align: center;
}

.band__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.band__item .ic { color: var(--color-rose); }

.band__trenner {
  width: 6px;
  height: 6px;
  background: var(--color-rose);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .band__trenner { display: none; }
  .band__inner { flex-direction: column; gap: var(--space-3); }
}

/* ── TAGESZEITEN ──
   Drei abwechselnde Bild-Text-Blöcke für Frühstück, Lunch
   und After-Work. */
.zeit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-7);
}

/* Freigestelltes Deko-Bild, ragt über den Inhaltsbereich hinaus
   und wird vom Bildschirmrand angeschnitten. Der Text soll
   frei bleiben, deshalb weit nach rechts und tiefer gesetzt. */
.zeit__deko {
  position: absolute;
  right: -22vw;
  top: 20%;
  width: min(31vw, 400px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  /* Drehung setzt js/deko.js beim Scrollen. transform-origin bleibt
     die Bildmitte, damit die Tasse sich um sich selbst dreht und
     nicht wegwandert. */
  transform-origin: 50% 50%;
  will-change: transform;
}

.zeit__deko--links {
  right: auto;
  left: -22vw;
}

/* Verhindert die waagerechte Scrollleiste durch die Deko */
html { overflow-x: hidden; }

@media (max-width: 1100px) {
  .zeit__deko { display: none; }
}

/* Das Cocktailglas ist deutlich hochformatiger als die Kaffeetasse
   und haengt deshalb bei top: 20% unten aus der Sektion heraus.
   Hier eigener Wert, damit nur dieses Bild hoeher sitzt. Weiter
   als etwa -70px sollte es nicht nach oben, sonst ragt es sichtbar
   in das dunkle Lunch-Band darueber. */
#afterwork .zeit__deko { top: -20px; }

/* Mehr Luft zwischen After-Work und dem Werbebanner, damit die
   dunkle Flaeche nicht direkt an den Textblock stoesst. */
#afterwork { padding-bottom: 8rem; }

@media (max-width: 899px) {
  #afterwork { padding-bottom: 5rem; }
}

/* Der Fruehstuecksblock braucht Luft zur Risskante des Hero.
   Vorher stand hier .zeit:first-of-type. Diese Regel griff nie:
   im body ist die erste <section> der Hero, nicht der Fruehstuecks-
   block. Im Band wiederum haette sie gegriffen, wurde dort aber
   von .zeit-band .zeit { padding-block: 0 } wieder ueberschrieben,
   gleiche Spezifitaet und weiter unten im Stylesheet.
   Deshalb jetzt direkt ueber die ID. */
#fruehstueck { padding-top: 8rem; }

@media (max-width: 899px) {
  #fruehstueck { padding-top: 4rem; }
}

@media (min-width: 900px) {
  .zeit { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .zeit--gedreht .zeit__bild { order: 2; }
  .zeit--gedreht .zeit__text { order: 1; }
}

/* Auf schmalen Schirmen stehen Bild und Text untereinander.
   Linksbuendiger Text unter einem mittigen Bild wirkt dort
   verrutscht, deshalb der ganze Block mittig. */
@media (max-width: 899px) {
  .zeit__text { text-align: center; }
  .zeit__text .zierlinie { justify-content: center; }
  .zeit__text p { margin-inline: auto; }
}

.zeit__bild {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--color-line);
  border-radius: var(--radius-md);
}

.zeit__text p {
  color: var(--color-muted);
  line-height: 1.85;
  margin-bottom: var(--space-5);
}

/* Dunkle Variante mit Risskante oben und unten.
   Die Sektion laeuft randlos durch, der Inhalt bleibt in der
   Inhaltsbreite. */
.zeit-band {
  position: relative;
  background: var(--color-mokka);
  padding-block: 7rem;
  margin-block: var(--space-7);
}

.zeit-band .zeit {
  padding-block: 0;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

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

/* Auf schmalen Schirmen deutlich weniger Luft. 7rem oben und
   unten sind auf einem Handy fast ein halber Bildschirm. */
@media (max-width: 899px) {
  .zeit-band { padding-block: 4rem; margin-block: var(--space-6); }
}

.zeit-band .titel,
.zeit-band .zeit__text p {
  color: var(--color-on-dark);
}

.zeit-band .zeit__text p { opacity: 0.86; }

/* Zierlinie im hellen Ton */
.zeit-band .zierlinie::before,
.zeit-band .zierlinie::after { background: rgba(247, 243, 238, 0.45); }
.zeit-band .zierlinie span { background: var(--color-rose); }

/* Risskante oben, gespiegelt */
.riss--oben {
  top: -1px;
  bottom: auto;
  transform: scaleY(-1);
}

/* ── KATEGORIEKACHELN ── */
.kategorien {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .kategorien { grid-template-columns: 1fr 1fr; }
}

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

/* Auf schmalen Schirmen als Wisch-Slider. Vier Kacheln
   untereinander sind sonst fast drei Bildschirmlaengen.
   Die negativen Aussenabstaende heben die Innenabstaende des
   Containers auf, damit der Slider bis an den Bildschirmrand
   laeuft und die naechste Kachel angeschnitten sichtbar bleibt.
   Das ist der Hinweis, dass es dort weitergeht. */
@media (max-width: 899px) {
  .kategorien {
    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);
  }

  .kategorie {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }

  .kategorien::-webkit-scrollbar { height: 4px; }
  .kategorien::-webkit-scrollbar-track { background: var(--color-line); border-radius: 2px; }
  .kategorien::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 2px; }
}

.kategorie {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: transform var(--transition), box-shadow var(--transition);
  display: block;
}

.kategorie:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(46, 38, 32, 0.1);
  opacity: 1;
}

/* Runder Bildkreis über dem Namen. Nimmt wahlweise ein Icon
   oder ein Foto auf, das als Hintergrund gesetzt wird. */
.kategorie__kreis {
  width: 150px;
  height: 150px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-rose-hell);
  background-size: cover;
  background-position: center;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), transform var(--transition);
}

.kategorie:hover .kategorie__kreis {
  background-color: var(--color-rose);
  transform: scale(1.04);
}

.kategorie__kreis .ic { width: 56px; height: 56px; }

@media (max-width: 999px) {
  .kategorie__kreis { width: 170px; height: 170px; }
}

.kategorie__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.kategorie__text {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.7;
}

/* ── WERBEBANNER ── */
.aktion {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--color-dark);
}

/* Parallax: das Bild bleibt beim Scrollen stehen, der Inhalt
   wandert darüber. Nur auf Zeigegeraeten, iOS Safari kann
   background-attachment fixed nicht und wuerde springen. */
@media (min-width: 900px) and (hover: hover) {
  .aktion {
    background-attachment: fixed;
    background-size: cover;
  }
}

.aktion::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(32, 25, 21, 0.72);
}

.aktion__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding: var(--space-8) var(--container-pad-mobile);
  text-align: center;
  color: var(--color-on-dark);
}

.aktion__kicker {
  font-family: var(--font-body);
  font-size: clamp(0.86rem, 1.4vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-rose);
  margin-bottom: var(--space-4);
}

.aktion__titel {
  font-family: var(--font-head);
  font-weight: 600;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.1;
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
}

.aktion__text {
  color: var(--color-on-dark);
  opacity: 0.86;
  line-height: 1.7;
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* ── BEWERTUNGEN ──
   Dunkles Mokka-Band mit Risskante oben und unten, wie beim Lunch.
   Links traegt die grosse Zahl den Blick, rechts stehen die Zitate
   als Liste ohne Kartenrahmen. Bewusst kein Kastenwerk: drei gleich
   schwere Kacheln nebeneinander hatten keine Hierarchie. */
.stimmen-band {
  position: relative;
  background: var(--color-mokka);
  padding-block: 7rem;
}

.stimmen-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

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

@media (min-width: 900px) {
  .stimmen-inner {
    grid-template-columns: 0.85fr 1.3fr;
    gap: var(--space-8);
    align-items: start;
  }
}

/* Linke Spalte: die Zahl ist der Blickfang der Sektion */
.bewertung__zahl {
  font-family: var(--font-head);
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: clamp(5rem, 11vw, 8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-on-dark);
}

.bewertung__sterne {
  color: var(--color-gold);
  letter-spacing: 0.14em;
  font-size: 1.15rem;
  margin-block: var(--space-3) var(--space-3);
}

.bewertung__text {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-on-dark);
  opacity: 0.72;
}

/* Kicker und Zierlinie im hellen Ton, base.css faerbt sonst dunkel.
   Der Kicker steht hier groesser als sonst, weil er in dieser
   Sektion die Rolle der Ueberschrift uebernimmt. */
.stimmen-band .kicker {
  color: var(--color-rose);
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  margin-bottom: var(--space-4);
}
.stimmen-band .zierlinie { margin-block: var(--space-5) 0; }
.stimmen-band .zierlinie::before,
.stimmen-band .zierlinie::after { background: rgba(247, 243, 238, 0.4); }
.stimmen-band .zierlinie span { background: var(--color-rose); }

/* Rechte Spalte: Zitate als Liste, getrennt durch feine Punktlinien */
.stimmen { display: grid; }

.stimme {
  position: relative;
  padding-block: var(--space-5);
  padding-left: var(--space-5);
  border-bottom: 1px dotted rgba(247, 243, 238, 0.22);
  transition: opacity 0.6s ease;
}

/* Markierungsstrich links, faehrt beim aktiven Zitat auf */
.stimme::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-rose);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s ease;
  pointer-events: none;
}

/* Abdunkeln nur, wenn js/stimmen.js laeuft. Ohne das Skript
   stehen alle drei Zitate normal lesbar da. */
.stimmen--rotiert .stimme { opacity: 0.45; }
.stimmen--rotiert .stimme--aktiv { opacity: 1; }
.stimme--aktiv::before { transform: scaleY(1); }

.stimme:first-child { padding-top: 0; }

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

.stimme__text {
  line-height: 1.85;
  color: var(--color-on-dark);
  opacity: 0.9;
  margin-bottom: var(--space-3);
}

.stimme__autor {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-rose);
}

@media (max-width: 899px) {
  .stimmen-band { padding-block: 5rem; }
  .bewertung { text-align: center; }
  .bewertung__sterne { font-size: 1rem; }
  .stimmen-band .zierlinie { justify-content: center; }

  /* Zitate als Wisch-Slider statt untereinander. Die Trennung
     uebernimmt eine Linie links am Zitat, quer statt laengs.

     Das Abdunkeln der inaktiven Zitate wird hier abgeschaltet.
     Es ergibt nur Sinn, wenn alle drei gleichzeitig zu sehen
     sind. Im Slider steht immer nur eines im Bild, und das waere
     dann womoeglich das abgedunkelte. js/stimmen.js laeuft weiter,
     setzt aber nur noch wirkungslose Klassen. */
  .stimmen {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-5);
    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-4);
    scrollbar-width: thin;
    scrollbar-color: var(--color-rose) rgba(247, 243, 238, 0.16);
  }

  .stimme {
    flex: 0 0 82%;
    scroll-snap-align: start;
    padding-block: 0;
    padding-left: var(--space-4);
    border-bottom: none;
    border-left: 2px solid rgba(247, 243, 238, 0.25);
  }

  .stimme::before { display: none; }

  .stimmen--rotiert .stimme,
  .stimmen--rotiert .stimme--aktiv { opacity: 1; }

  .stimmen::-webkit-scrollbar { height: 4px; }
  .stimmen::-webkit-scrollbar-track { background: rgba(247, 243, 238, 0.16); border-radius: 2px; }
  .stimmen::-webkit-scrollbar-thumb { background: var(--color-rose); border-radius: 2px; }
}

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

   Die Spezifitaet mit drei Klassen ist noetig, weil konto.css
   nach diesem Stylesheet geladen wird und dort .stamp-slot--filled
   sowie .stamp-card--voll .stamp-slot--filled stehen. */
.stamp-card .stamp-grid .stamp-slot--filled {
  background-color: var(--color-rose-hell);
  background-image: url('../Bilder/logo.webp');
  background-size: 66%;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--color-accent);
}

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

/* Volle Karte steht auf Altrosa, dort braucht der Stempel
   einen hellen Grund, damit das Logo nicht darin untergeht. */
.stamp-card--voll .stamp-grid .stamp-slot--filled {
  background-color: var(--color-bg-soft);
  border-color: var(--color-bg-soft);
}

/* ── KONTAKT ──
   Randlose Karte ueber die volle Breite, darauf schwebt links die
   Infokarte. Die Karte ist damit Flaeche statt Kasten neben dem
   Text, und die Sektion bekommt einen Handlungsaufruf. */
.kontakt-bereich {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  background: var(--color-line);
}

.kontakt-bereich__karte {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Google blendet oben links eine Ortskarte ein, die von der
   Risskante angeschnitten wurde. Das iframe wird deshalb um den
   Betrag KARTENVERSATZ nach oben geschoben und um genau denselben
   Betrag hoeher gemacht. Die Ortskarte wandert damit aus dem
   sichtbaren Bereich heraus, die untere Kante bleibt buendig.
   Das ist wichtig: Logo und Nutzungsbedingungen von Google sitzen
   unten und duerfen nicht weggeschnitten werden. */
.kontakt-bereich__karte iframe {
  position: absolute;
  left: 0;
  top: -80px;
  width: 100%;
  height: calc(100% + 80px);
  border: 0;
  display: block;
}

.kontakt-bereich__inner {
  width: 100%;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

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

/* WICHTIG: Hintergrund und z-index gehoeren auf dieses Element,
   nicht auf eine Huelle darum. z-index 1 macht die Infokarte zum
   Stapelkontext, dann liegt das ::before der Buttons mit z-index -1
   ueber diesem Hintergrund. Sitzt der Hintergrund stattdessen auf
   einem Kind der Huelle, verschwindet die versetzte zweite Ebene
   der Buttons dahinter. */
.kontakt-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: 0 18px 44px rgba(46, 38, 32, 0.18);
}

.kontakt-panel .titel { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.kontakt-panel .zierlinie { margin-block: var(--space-3) var(--space-4); }

.kontakt-panel .kontakt__zeile { margin-bottom: var(--space-4); }

.kontakt-panel .kontakt__zeile:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.kontakt-panel .btn { margin-top: var(--space-5); }

/* Auf schmalen Schirmen kein Ueberlagern: Karte oben, Infokarte
   darunter, leicht darueber geschoben. */
@media (max-width: 899px) {
  .kontakt-bereich {
    display: block;
    min-height: 0;
  }
  .kontakt-bereich__karte {
    position: relative;
    inset: auto;
    height: 300px;
  }
  .kontakt-bereich__inner { padding-bottom: var(--space-7); }
  .kontakt-panel {
    width: 100%;
    margin-top: calc(var(--space-6) * -1);
  }
}

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

.kontakt__zeile .ic {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
}

.kontakt__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

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

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

/* ── SPEISEKARTE ── */
.menu-section__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.01em;
}

.menu-card__name {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
}

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

/* ── FUSSZEILE ──
   Marke gross und mittig, eine feine Linie laeuft links und rechts
   durch. Darunter zwei Bloecke mit Symbol, Ueberschrift und
   Zierlinie, getrennt durch einen senkrechten Strich. */
.footer {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
}

.footer-marke {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

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

.footer-marke__linie {
  flex: 1;
  height: 1px;
  background: rgba(216, 175, 166, 0.35);
}

.footer-marke__mitte {
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.footer-marke__logo {
  display: block;
  width: 104px;
  height: auto;
  margin: 0 auto var(--space-3);
}

.footer-marke__name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-size: clamp(2rem, 4vw, 2.9rem);
  letter-spacing: -0.02em;
  color: var(--color-on-dark);
}

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

.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  text-align: center;
}

@media (min-width: 820px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 0; }
  .footer-block + .footer-block {
    border-left: 1px solid rgba(247, 243, 238, 0.14);
  }
  .footer-block { padding-inline: var(--space-7); }
}

/* iconsEinsetzen() ersetzt das innere span per outerHTML, dabei
   geht dessen Klasse verloren. Deshalb sitzt die Klasse auf der
   Huelle und das CSS zielt auf .ic darin. */
.footer-block__icon .ic {
  width: 34px;
  height: 34px;
  color: var(--color-rose);
  margin-bottom: var(--space-4);
}

.footer-block__titel {
  font-family: var(--font-head);
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--color-on-dark);
}

.footer-block .zierlinie { margin-block: var(--space-3) var(--space-5); }

.footer-block__adresse {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-on-dark);
  margin-block: var(--space-5);
}

/* Zeiten gestapelt statt in zwei Spalten: im mittigen Satz wirkt
   das Auseinanderziehen unruhig. */
.footer-block .footer__zeit {
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-4);
}

.footer-block .footer__zeit:last-child { margin-bottom: 0; }
.footer-block .footer__zeit b { font-size: 1.05rem; opacity: 1; }

.footer .zierlinie { margin-block: var(--space-3) var(--space-4); }
.footer .zierlinie::before,
.footer .zierlinie::after { background: rgba(216, 175, 166, 0.45); }
.footer .zierlinie span { background: var(--color-rose); }

@media (max-width: 819px) {
  .footer .zierlinie { justify-content: center; }
}

.footer__text {
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-on-dark);
  opacity: 0.82;
}

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

.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);
  opacity: 0.82;
  border-bottom: 1px dotted rgba(247, 243, 238, 0.2);
  padding-bottom: var(--space-2);
}

@media (max-width: 819px) {
  .footer__zeit { justify-content: center; gap: var(--space-3); }
}

.footer__zeit b { font-weight: 600; }

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

.footer__links a {
  font-size: var(--text-sm);
  color: var(--color-on-dark);
  opacity: 0.6;
}

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

.footer__divider {
  border-top: 1px solid rgba(247, 243, 238, 0.14);
  margin-block: var(--space-6) var(--space-5);
}

.footer__copy {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-on-dark);
  opacity: 0.45;
}