/* ==========================================================
   ANAAR — indischer Demoshop
   Wird NACH allen anderen Stylesheets geladen und legt das
   komplette Aussehen fest.

   Gestaltungsvorbild ist eine klassische indische
   Restaurantseite: heller Grund, viel Weissraum, alles mittig
   gesetzt, grosse kontrastreiche Serifenueberschriften, ein
   kraeftiges Rot als Signalfarbe und Gold als zweite Farbe.

   Regeln:
   - Farben: Rot (#E11B22) fuer Marke und Hauptaktion,
     Gold (#C8A45C) fuer Untertitel und Kicker,
     Anthrazit (#2B2B2B) fuer Ueberschriften,
     Grau (#6E6E6E) fuer Fliesstext, Weiss als Grundflaeche.
   - Schriften: Playfair Display fuer Ueberschriften,
     Lato fuer Fliesstext, Noto Sans Devanagari fuer die
     indische Schrift.
   - Form: eckig. Keine Rundungen, keine Boegen, keine
     gekappten Ecken.
   - Aufbau: Abschnitte wechseln zwischen mittig gesetztem Text
     und zweispaltigen Zeilen, bei denen Bild und Text die Seite
     tauschen.
   ========================================================== */

:root {
  /* ── FARBEN ── */
  --color-ink: #2B2B2B;          /* Anthrazit, Ueberschriften */
  --color-dark: #2B2B2B;
  --color-dark-2: #3A3A3A;
  --color-bg: #FFFFFF;           /* Grundflaeche */
  --color-bg-soft: #F5F3F0;      /* Kaesten und ruhige Baender */
  --color-accent: #D2600C;       /* Orange, Safranton */
  --color-accent-dk: #A84806;
  --color-on-accent: #FFFFFF;
  --color-gold: #C8A45C;         /* Gold, zweite Farbe */
  --color-chili: #C0392B;        /* Schaerfeskala, Rot */

  --color-on-dark: #FFFFFF;
  --color-on-dark-mu: #C9C6C2;
  --color-muted: #6E6E6E;
  --color-line: rgba(43, 43, 43, 0.14);
  --color-line-dark: rgba(255, 255, 255, 0.22);

  /* ── SCHRIFTEN ── */
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Lato', system-ui, sans-serif;

  /* Nur fuer den Namen. Yatra One setzt lateinische Buchstaben im
     Duktus der Devanagari-Schrift, mit der waagerechten Oberlinie.
     Sie wird ausschliesslich fuer die Wortmarke verwendet, fuer
     Fliesstext ist sie unlesbar. */
  --font-marke: 'Yatra One', 'Playfair Display', serif;

  --transition: 0.28s ease;
}

body {
  background: var(--color-bg);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-weight: 400;
}

body.dunkel { background: var(--color-bg); color: var(--color-muted); }

/* ── DEVANAGARI ──
   Steht klein und in Gold als Zusatz, nie als Ueberschrift. */
.dev {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 0.9rem;
  color: var(--color-gold);
}

/* ── TYPOGRAFIE ──
   Ueberschriften sind gross, schwarz und kontrastreich. Der
   Kicker darueber steht in Versalien mit weiter Sperrung, das
   ist das wiederkehrende Muster der Seite. */
.titel {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.15;
  color: var(--color-ink);
}

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

.kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.abschnitt__text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-muted);
}

.abschnitt__kopf { margin-bottom: var(--space-6); }

/* Mittig gesetzter Kopf, das Grundmuster der Startseite */
.kopf-mitte {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-7);
}

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

.abschnitt { padding-block: var(--space-8); }

.abschnitt--sand { background: var(--color-bg-soft); }

/* Orangefarbenes Band. Alles darauf wird weiss. Das Jali-Gitter,
   das durchbrochene Steingitter indischer Palaeste, gibt der
   Flaeche Struktur, ohne mit dem Text zu konkurrieren. Es kommt
   nur an dieser Stelle vor. */
.abschnitt--akzent {
  position: relative;
  background: var(--color-accent);
  overflow: hidden;
}

.abschnitt--akzent::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M36 0 72 36 36 72 0 36z'/%3E%3Cpath d='M36 18 54 36 36 54 18 36z'/%3E%3C/svg%3E");
  background-size: 72px 72px;
  background-repeat: repeat;
}

.abschnitt--akzent > * { position: relative; }

.abschnitt--akzent .titel,
.abschnitt--akzent .abschnitt__text { color: #fff; }

.abschnitt--akzent .kicker { color: #fff; opacity: 0.85; }

.abschnitt--akzent .btn--outline,
.abschnitt--akzent .btn--outline-light {
  background: #fff;
  border-color: #fff;
  color: var(--color-ink);
}

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

.abschnitt--akzent .btn--outline:hover,
.abschnitt--akzent .btn--outline-light:hover {
  border-color: var(--color-ink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(43, 43, 43, 0.25);
}

/* ── KNOEPFE ──
   Eckig, Versalien, weite Sperrung. Drei Arten: Orange fuer die
   Hauptaktion, Anthrazit fuer dunkle Flaechen, Hellgrau fuer die
   ruhigen Aktionen in den Abschnitten.

   Beim Ueberfahren laeuft ein dunklerer Ton von links ueber den
   Knopf, der Knopf hebt sich leicht und der Pfeil wandert nach
   rechts. Der Wisch liegt als Pseudoelement hinter dem Text,
   deshalb braucht der Knopf isolation und z-index. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1rem 2rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Der Pfeil steht als eigenes Zeichen, damit er sich bewegen
   kann. Er wird per Markup gesetzt, nicht automatisch. */
.btn__pfeil {
  display: inline-block;
  transition: transform var(--transition);
}

.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: scaleX(1); }
.btn:hover .btn__pfeil { transform: translateX(5px); }

.btn--sm { padding: 0.75rem 1.3rem; font-size: 0.72rem; }

/* Hauptaktion: gefuellt in Orange, Wisch in dunklerem Orange */
.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

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

.btn--primary:hover {
  border-color: var(--color-accent-dk);
  color: #fff;
  opacity: 1;
  box-shadow: 0 8px 22px rgba(168, 72, 6, 0.35);
}

/* Anthrazit, auf dunklen Flaechen */
.btn--dark {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}

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

.btn--dark:hover { border-color: var(--color-accent); color: #fff; opacity: 1; }

/* Hellgrau, die ruhige Aktion in den Abschnitten. Der Wisch
   faerbt sie orange. */
.btn--outline,
.btn--outline-light {
  background: var(--color-bg-soft);
  border-color: var(--color-bg-soft);
  color: var(--color-ink);
}

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

.btn--outline:hover,
.btn--outline-light:hover {
  border-color: var(--color-accent);
  color: #fff;
  opacity: 1;
  box-shadow: 0 8px 22px rgba(168, 72, 6, 0.25);
}

/* Wer Bewegung reduziert haben moechte, bekommt nur den
   Farbwechsel ohne Wisch und ohne Anheben. */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .btn__pfeil { transition: none; }
  .btn:hover { transform: none; }
  .btn:hover .btn__pfeil { transform: none; }
}

/* ── KOPFZEILE ──
   Weiss, Logo links, Navigation rechts, roter Knopf ganz aussen. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-line);
}

.nav .nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: nowrap;
  min-height: 84px;
}

.nav .nav__marke {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* ── MARKE ──
   Das Logo enthaelt den Schriftzug bereits. Die Wortmarke
   daneben entfaellt deshalb, sie stuende sonst doppelt. */
.nav__logo-bild { display: block; width: 150px; height: auto; }

.nav__wortmarke { display: none; }

/* js/auth.js legt in setupSeite() ein eigenes Burger-Menue an. Das
   schaltet .nav--offen und damit .nav__links — in diesem Shop
   liegen die Knoepfe aber in .menue-panel, das js/menue.js baut.
   Der Knopf aus auth.js bewirkt also nichts und stand als zweiter,
   schwarzer Burger daneben. Ausgeblendet statt entfernt, weil
   auth.js in allen acht Shops dieselbe Datei ist. */
.nav .nav__burger { display: none; }

/* ── KOPFZEILE AUF SCHMALEN SCHIRMEN ──
   js/menue.js haengt beim Laden alle Knoepfe samt Konto-Kasten in
   ein Klappfeld und baut einen Burger dazu. Die zugehoerigen
   Regeln fehlten bisher komplett, deshalb standen die Knoepfe
   ungeordnet uebereinander und der Burger war unsichtbar.

   Die Klassennamen kommen aus menue.js: .menue-btn fuer den
   Knopf, .menue-panel fuer das Feld, .menue-panel--offen fuer den
   aufgeklappten Zustand. */
@media (max-width: 900px) {
  .nav .nav__inner {
    position: relative;
    gap: var(--space-3);
    min-height: 64px;
  }

  .nav__logo-bild { width: 104px; }

  .menue-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .menue-btn__strich {
    display: block;
    width: 24px;
    height: 2px;
    margin-inline: auto;
    background: var(--color-accent);
  }

  /* Das Feld haengt unter der Kopfzeile am rechten Rand, also
     unter dem Burger. Nicht ganz die volle Breite: rechts
     schliesst es mit dem Textrand ab, links bleibt ein Rest der
     Seite sichtbar. */
  .menue-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 60;
    width: 68%;
    min-width: 210px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-4);
    background: #fff;
    border: 1px solid var(--color-accent);
  }

  .menue-panel--offen { display: flex; }

  .menue-panel .nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .menue-panel .btn,
  .menue-panel .nav__konto {
    width: 100%;
    justify-content: center;
  }
}

.nav .nav__aktionen {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
  flex-shrink: 0;
}

/* Textlinks in der Kopfzeile, im selben Orange wie die
   Hauptaktion, aber ohne Flaeche. */
.nav__link {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.nav__link:hover { color: var(--color-accent-dk); opacity: 1; }

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

/* Der Konto-Knopf wird von js/auth.js erzeugt und traegt eigene
   Klassen. Damit er wie die uebrigen CTAs aussieht, bekommt er
   hier die Masse von .btn--sm, statt das shop-neutrale Skript zu
   aendern. Das Personensymbol bleibt aus, der Vorname genuegt.

   line-height und border-radius stehen ausdruecklich hier: aus
   konto.css kaeme sonst eine Rundung von 8px, und ohne die feste
   Zeilenhoehe waere der Knopf rund 8px hoeher als der CTA daneben.

   display: inline beim Namen nimmt die Regel aus orient.css
   zurueck, die ihn auf schmalen Schirmen ausblendet — ohne Symbol
   waere der Knopf dort sonst leer. */
.nav .nav__konto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 0;
  padding: 0.75rem 1.3rem;
  min-height: 0;
  border: 1px solid var(--color-accent);
  border-radius: 0;
  background: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--transition), border-color var(--transition);
}

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

.nav .nav__konto-name { display: inline; }

.nav .nav__konto-icon { display: none; }

.nav .nav__konto:hover {
  background: var(--color-accent-dk);
  border-color: var(--color-accent-dk);
}

.nav .nav__konto:hover .nav__konto-name { color: var(--color-on-dark); opacity: 1; }

.nav .cart-btn {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  min-height: 0;
  padding: 0.4rem;
}

.nav .cart-btn:hover { color: var(--color-accent); background: transparent; }

/* ── HERO ──
   Formatfuellendes Foto, darauf mittig Kicker, Name, Untertitel
   und Knopf. Das Foto ist hell, deshalb steht der Text dunkel
   und braucht keinen Verlauf. */
.hero {
  position: relative;
  min-height: 100vh;
  /* svh statt vh, weil Safari auf dem Telefon die Flaeche unter
     der Adressleiste mitzaehlt. Der Hero springt sonst beim
     Scrollen. Die vh-Zeile darueber bleibt als Rueckfall fuer
     aeltere Browser stehen. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-8);
  background-color: var(--color-bg-soft);
  background-size: cover;
  background-position: center;
}

/* Der Inhalt wandert beim Scrollen nach oben und blendet aus.
   js/heroblende.js setzt dafuer opacity und transform. */
.hero__inhalt { will-change: opacity, transform; }

.hero__kicker {
  display: block;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

/* Im Hero steht das Logo gross als Bild, deshalb keine
   Textueberschrift. */
.hero__logo {
  display: block;
  width: min(80vw, 420px);
  height: auto;
  margin: 0 auto var(--space-5);
}

.hero__sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  color: var(--color-gold);
  margin-bottom: var(--space-6);
}

/* ── UEBER UNS ──
   Text links, rechts zwei hochformatige Bilder, die gegeneinander
   versetzt stehen. Beim Ueberfahren wachsen sie leicht und legen
   sich ueber das Nachbarbild.

   Der Versatz kommt aus einem Aussenabstand am ersten Bild, nicht
   aus einer Verschiebung. So bleibt der Platzbedarf richtig und
   die Sektion wird nicht zu hoch. */
.ueber {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

/* Auf dem Telefon stehen Kicker und Ueberschrift mittig, der
   Fliesstext darunter bleibt linksbuendig — zentrierte Absaetze
   mit vier Zeilen lesen sich schlecht. */
@media (max-width: 899px) {
  .ueber .kicker,
  .ueber .titel { text-align: center; }
}

@media (min-width: 900px) {
  /* Die Bildspalte ist breiter als die Textspalte, damit die
     beiden Bilder gross stehen. Der Text vertraegt das, weil er
     mit rund 48 Zeichen je Zeile noch gut lesbar bleibt. */
  .ueber { grid-template-columns: 44% 1fr; gap: var(--space-7); }
}

.ueber__bilder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: start;
}

.ueber__bild {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--color-bg-soft);
  box-shadow: 0 10px 30px rgba(43, 43, 43, 0.1);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

/* Das erste Bild steht tiefer, dadurch der Versatz. */
.ueber__bild:first-child { margin-top: var(--space-7); }

.ueber__bild:hover {
  transform: scale(1.07);
  box-shadow: 0 18px 50px rgba(43, 43, 43, 0.18);
  z-index: 2;
}

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

/* ── BILD-REIHE ──
   Drei Bilder nebeneinander. Bleibt fuer andere Seiten
   verfuegbar, auf der Startseite steht jetzt die Sektion
   darueber. */
.bild-reihe {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

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

.bild-reihe img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-bg-soft);
}

/* ── WECHSELZEILEN ──
   Bild und Text nebeneinander, in jeder zweiten Zeile
   getauscht. Das ist der Hauptbaustein der Startseite. */
.zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-8);
}

@media (min-width: 900px) {
  .zeile { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  /* Jede zweite Zeile dreht die Reihenfolge um. Das Bild steht
     im Markup immer zuerst, hier wandert es nach rechts. */
  .zeile--gedreht .zeile__bild { order: 2; }
}

.zeile__bild {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Einfliegen beim Scrollen. Den Startzustand setzt
   js/einfliegen.js ueber die Klasse kat-flug am Abschnitt, damit
   die Bilder ohne Skript sichtbar bleiben.

   Das Bild kommt von der Seite herein, auf der es steht: in der
   normalen Zeile von links, in der gedrehten von rechts. */
.kat-flug .zeile__bild {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kat-flug .zeile--gedreht .zeile__bild { transform: translateX(70px); }

.kat-flug .zeile__bild.ist-da { opacity: 1; transform: none; }

.zeile__titel {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.zeile__text {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

/* ── SCHAERFESKALA ──
   Drei Chilis, die gefuellten in Rot. Koerper als laenglicher
   Tropfen, Stiel als Pseudoelement, das den Hintergrund erbt. */
.schaerfe { display: inline-flex; gap: 5px; align-items: center; }

.schaerfe__schote {
  position: relative;
  width: 8px;
  height: 17px;
  border-radius: 50% 50% 45% 45% / 22% 22% 78% 78%;
  transform: rotate(10deg);
  background: rgba(43, 43, 43, 0.16);
}

.schaerfe__schote::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 2px;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(-28deg);
}

.schaerfe__schote--an { background: var(--color-chili); }

/* ── LAUFBAND ──
   Die Kategorien laufen endlos von rechts nach links durch das
   orangefarbene Band.

   Der Trick sind zwei identische Spuren hintereinander. Die
   erste laeuft um ihre volle Breite nach links, in dem Moment
   steht die zweite genau an deren Ausgangsposition. Der Sprung
   zurueck ist deshalb nicht zu sehen.

   Die Maske an den Seiten laesst die Namen weich auslaufen,
   statt sie hart abzuschneiden. */
.laufband {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.laufband__spur {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-shrink: 0;
  padding-right: var(--space-6);
  white-space: nowrap;
  animation: laufband-zieht 34s linear infinite;
}

.laufband__wort {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: #fff;
}

/* Kleine Raute zwischen den Woertern */
.laufband__punkt {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(45deg);
}

@keyframes laufband-zieht {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Ohne Bewegung steht das Band still. Sichtbar bleibt die erste
   Spur, das reicht als Aufzaehlung. */
@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; }
}

/* ── ZWEI SPALTEN ──
   Bewertungen und Oeffnungszeiten in einer Sektion: links ein
   Foto, rechts zwei Karten, die darueber liegen.

   Die Zitatkarte greift mit einem negativen Aussenabstand ins
   Bild hinein, das orangefarbene Kaestchen mit den Zeiten sitzt
   darunter und leicht versetzt. Die z-index-Werte sorgen dafuer,
   dass die Zeiten oben liegen.

   Auf Mobil stehen die drei Teile untereinander, das Kaestchen
   bleibt aber versetzt und ragt in die Karte darueber. */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 900px) {
  .duo { grid-template-columns: 1.15fr 0.85fr; gap: 0; }
}

.duo__bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Karte von Google. Als iframe eingebunden, damit sie sich
   verschieben und zoomen laesst. */
.duo__map {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

/* Weisse Karte mit duennem orangefarbenem Rahmen */
.duo__karte {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--color-accent);
  padding: var(--space-6);
}

@media (min-width: 900px) {
  /* Die beiden Kacheln sind gegeneinander versetzt: die
     Zitatkarte greift ins Bild, das Kaestchen darunter ist von
     links weiter eingeruecht und schliesst rechts nicht mit ihr
     ab. */
  .duo__karte { margin-left: -80px; margin-right: 40px; }
}

/* Orangefarbenes Kaestchen mit den Zeiten. Bewusst klein
   gehalten: es fasst die Woche in vier Zeilen zusammen, statt
   jeden Tag einzeln aufzuzaehlen. */
.duo__zeiten {
  position: relative;
  z-index: 3;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 14px 40px rgba(168, 72, 6, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Beim Ueberfahren waechst das Kaestchen leicht und der Schatten
   wird tiefer. */
.duo__zeiten:hover {
  transform: scale(1.05);
  box-shadow: 0 22px 60px rgba(168, 72, 6, 0.42);
}

@media (min-width: 900px) {
  .duo__zeiten {
    margin: -28px -30px 0 90px;
    /* Ursprung oben rechts, damit das Kaestchen beim Wachsen
       nicht weiter ueber den rechten Rand hinauswandert. */
    transform-origin: top right;
  }
}

/* Auf dem Telefon derselbe Gedanke in kleinerem Maszstab: die
   Bewertungskarte sitzt schmaler am linken Rand, das Kaestchen am
   rechten, und es ragt nur noch acht Pixel in die Karte. Bei
   32px Innenabstand der Karte bleibt der Text damit frei. Der
   negative Abstand muss die Luecke des Rasters mit aufheben,
   deshalb die Rechnung. */
@media (max-width: 899px) {
  .duo__karte {
    width: 94%;
    margin-right: auto;
  }

  .duo__zeiten {
    width: 86%;
    margin-top: calc(-1 * var(--space-5) - 8px);
    margin-left: auto;
    margin-right: 0;
    transform-origin: top right;
  }
}

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

/* In der Karte ist das Anfuehrungszeichen fehl am Platz, dort
   steht das Zitat ohnehin fuer sich. */
.duo .zitate::before { display: none; }
.duo .zitate { text-align: left; }
.duo .zitate__bahn { max-width: none; }

/* Die Kennzahl steht in der Karte unter dem Zitat, abgesetzt
   durch eine Linie. */
.duo__kennzahl {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

/* ── BEWERTUNGEN ──
   Ein grosses Zitat statt dreier kleiner. Die drei Zitate liegen
   in derselben Rasterzelle und damit uebereinander, sichtbar ist
   eines. Sie wechseln auf Zeit, wie im Hero die Sektionen.

   Das riesige Anfuehrungszeichen im Hintergrund ist ein
   Pseudoelement, also kein Bild und kein zusaetzliches Markup. */
.zitate {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.zitate::before {
  content: '”';
  position: absolute;
  top: -0.42em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 20rem;
  line-height: 1;
  color: rgba(210, 96, 12, 0.1);
  pointer-events: none;
}

.zitate__inhalt { position: relative; }

.zitate__kennzahl {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.zitate__zahl {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--color-ink);
}

.zitate__sterne {
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--color-accent);
}

.zitate__anzahl {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* Die drei Zitate uebereinander in einer Rasterzelle. Die Zelle
   ist so hoch wie das laengste Zitat, dadurch springt beim
   Wechseln nichts. */
.zitate__bahn {
  display: grid;
  max-width: 760px;
  margin-inline: auto;
}

.zitat {
  grid-area: 1 / 1;
  opacity: 0;
  animation: zitat-wechselt 18s ease-in-out infinite;
}

/* Drei Zitate, 18 Sekunden Umlauf, also 6 Sekunden je Zitat. */
.zitat:nth-of-type(1) { animation-delay: 0s; }
.zitat:nth-of-type(2) { animation-delay: 6s; }
.zitat:nth-of-type(3) { animation-delay: 12s; }

@keyframes zitat-wechselt {
  0%        { opacity: 0; transform: translateY(8px); }
  4%, 30%   { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-8px); }
}

.zitat__text {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.zitat__autor {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Standanzeige, laeuft im selben Takt wie die Zitate. */
.zitate__punkte {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: var(--space-6);
  position: relative;
}

.zitate__punkte span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(43, 43, 43, 0.18);
  animation: zitat-marke 18s ease-in-out infinite;
}

.zitate__punkte span:nth-child(1) { animation-delay: 0s; }
.zitate__punkte span:nth-child(2) { animation-delay: 6s; }
.zitate__punkte span:nth-child(3) { animation-delay: 12s; }

@keyframes zitat-marke {
  0%, 32%   { background: var(--color-accent); }
  33%, 100% { background: rgba(43, 43, 43, 0.18); }
}

/* Ohne Bewegung stehen alle drei Zitate untereinander. */
@media (prefers-reduced-motion: reduce) {
  .zitate__bahn { display: grid; gap: var(--space-6); }
  .zitat { grid-area: auto; opacity: 1; animation: none; }
  .zitate__punkte { display: none; }
}

/* ── BEWERTUNGEN, alte Kartenfassung ──
   Bleibt fuer andere Seiten verfuegbar. */
.bewertung {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) { .bewertung { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.stimme {
  background: var(--color-bg-soft);
  padding: var(--space-6);
}

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

.stimme__text {
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.stimme__autor {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Weisse Schrift im orangefarbenen Kaestchen, alles eine Spur
   kleiner als sonst. */
.duo__zeiten .jetzt,
.duo__zeiten .jetzt em { color: #fff; }
.duo__zeiten .jetzt { font-size: 1.3rem; margin-bottom: var(--space-2); }
.duo__zeiten .jetzt__rest { color: rgba(255, 255, 255, 0.7); margin-bottom: var(--space-4); }

.duo__zeiten .woche__tag {
  padding: 0.35rem 0;
  border-bottom: none;
}

.duo__zeiten .woche__name,
.duo__zeiten .woche__zeit {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-family: var(--font-body);
}

.duo__zeiten .adresse { color: rgba(255, 255, 255, 0.85); font-size: 0.88rem; }
.duo__zeiten .adresse a { color: #fff; }
.duo__zeiten .route { color: #fff; font-size: 0.7rem; }

/* ── OEFFNUNGSZEITEN ── */
.zeiten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 900px) { .zeiten { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

.jetzt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

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

.jetzt__rest {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-6);
}

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

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

.woche__name { font-size: 1rem; color: var(--color-muted); }

.woche__zeit {
  font-family: var(--font-head);
  font-size: 1.2rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.woche__tag--heute { background: var(--color-bg-soft); }
.woche__tag--heute .woche__name { color: var(--color-ink); }
.woche__tag--heute .woche__zeit { color: var(--color-accent); }

.adresse { font-size: 1rem; line-height: 1.9; color: var(--color-muted); margin-bottom: var(--space-5); }
.adresse a { color: var(--color-ink); }
.adresse a:hover { color: var(--color-accent); }

.route {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── FUSSZEILE ──
   Hell und ruhig, wie die uebrigen Flaechen. Die orangefarbene
   Linie darueber setzt die Kante, die der weisse Grund sonst
   nicht hergibt. Sie sitzt bewusst nicht direkt an der Sektion
   darueber, sondern mit Abstand.

   Aufbau: die Rufnummer steht als Blickfang oben, weil der
   Anruf beim Restaurant die haeufigste Handlung ist. Darunter
   eine einzeilige Leiste mit Adresse und Zeiten zwischen zwei
   duennen Linien. Ganz unten die Wortmarke links, Rechtslinks
   und Copyright rechts. */
.footer {
  background: #fff;
  color: var(--color-muted);
  padding-block: var(--space-7) var(--space-5);
  text-align: center;
  border-top: 1px solid var(--color-accent);
  margin-top: var(--space-8);
}

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

/* Rufnummer. Playfair, damit sie wie eine Ueberschrift wirkt
   und nicht wie ein Datenfeld. */
.footer__tel {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.2;
  color: var(--color-accent);
}

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

.footer__ruf-text {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--color-muted);
  margin-top: var(--space-2);
}

/* Leiste mit Adresse und Zeiten, zwei Zeilen. Die Trennpunkte
   kommen aus ::after, damit im Umbruch kein Punkt allein
   stehenbleibt. */
.footer__leiste {
  max-width: 780px;
  margin: var(--space-6) auto 0;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  font-size: 0.95rem;
  color: var(--color-ink);
}

.footer__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  line-height: 1.9;
}

.footer__zeile--zeiten { color: var(--color-muted); }

.footer__zeile span::after {
  content: "·";
  margin-left: var(--space-4);
  color: var(--color-accent);
}

.footer__zeile span:last-child::after { content: none; }

.footer__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-6);
  text-align: left;
}

.footer-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-marke__logo { display: block; width: 150px; height: auto; }

.footer-marke__name { display: none; }

.footer__abbinder { margin-left: auto; text-align: right; }

.footer__text { font-size: 0.95rem; line-height: 1.9; color: var(--color-muted); }
.footer__text a { color: var(--color-ink); }
.footer__text a:hover { color: var(--color-accent); }

.footer__links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer__links a {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

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

.footer__copy {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 0.7;
  margin-top: var(--space-3);
}

/* Unter 760 px steht alles mittig untereinander, sonst kippt
   die untere Zeile. */
@media (max-width: 759px) {
  .footer__unten { flex-direction: column; align-items: center; text-align: center; }
  .footer__abbinder { margin-left: 0; text-align: center; }
  .footer__links { justify-content: center; }
}

/* ── DEMO-BANNER ──
   Steht auf jeder Seite als erstes Element, noch vor der
   Kopfzeile. Weiss mit orangefarbener Schrift und einer duennen
   Linie darunter, damit er sich von der ebenfalls weissen
   Kopfzeile abgrenzt. */
.demo-banner {
  background: #fff;
  color: var(--color-accent);
  font-size: 0.8rem;
  border-bottom: 1px solid var(--color-accent);
}

.demo-banner a {
  color: var(--color-accent);
  text-decoration: underline;
}

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

/* ── STEMPELKARTE ──
   Statt des Hakens aus dem shop-neutralen js/konto.js traegt ein
   gefuelltes Feld das Logo. Der Haken wird ausgeblendet, das Logo
   kommt als Hintergrundbild. Deshalb wird das Feld hell statt
   orange, sonst verschwindet die dunkelrote Wortmarke darin. */
.stamp-slot--filled {
  background-color: #fff;
  background-image: url('../Bilder/logo.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74%;
  border: 2px solid var(--color-accent);
}

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

/* Bei voller Karte ist der Kartengrund selbst orange, das helle
   Feld passt dort unveraendert. */
.stamp-card--voll .stamp-slot--filled {
  background-color: #fff;
  border-color: #fff;
}