/* grill.css — Bosporus Grill
   Eigenes Seiten-Stylesheet. Ersetzt index.css vollständig, damit
   der Shop nicht die Struktur der Pizzeria mitschleppt.
   Jede Sektion ist im Aufbau anders gelöst als dort. */

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

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

.nav__links { display: none; gap: var(--space-5); }

.nav__links a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
}

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

/* Sprungmarken nicht unter die Kopfzeile rutschen lassen */
.ueber,
.abschnitt,
.abschnitt--eng,
.zahlen,
.aktion,
[id] {
  scroll-margin-top: 90px;
}

/* ── KUNDENKONTO ──
   Ueberschriften und Bedienelemente in derselben Versalienschrift
   wie auf der Speisekarte. konto.css bleibt shop-neutral, deshalb
   stehen die Anpassungen hier. */
.konto-head__gruss,
.konto-panel__titel,
.konto-card__titel,
.auth-box__titel,
.stamp-card__titel,
.konto-modal__kopf h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.konto-tab {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.konto-tab--active { font-weight: 800; }

/* Kleinere Beschriftungen gesperrt und gedaempft, damit sie
   nicht mit den Titeln konkurrieren */
.konto-feld label,
.konto-card__label,
.address-card__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}

.konto-feld label span { text-transform: none; letter-spacing: 0; }

/* Artikelnamen in Favoriten und Listen.
   Hoehere Spezifitaet, weil konto.css spaeter geladen wird. */
.fav-card .fav-card__name,
.order-detail .order-item__name,
.konto-panel .fav-card__name {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ── STEMPELKARTE ──
   Gefuellte Stempel zeigen das Logo statt einer Farbflaeche.
   konto.css setzt background als Kurzform und wird spaeter
   geladen, deshalb hier mit hoeherer Spezifitaet. */
.stamp-card .stamp-grid .stamp-slot--filled {
  background-color: var(--color-bg-soft);
  background-image: url('../Bilder/logo.png');
  background-size: 76%;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--color-accent);
  color: transparent;
}

/* Auf der vollen Karte steht die Flaeche hell ohne Rand */
.stamp-card--voll .stamp-grid .stamp-slot--filled {
  background-color: var(--color-bg-soft);
  border-color: var(--color-bg-soft);
  color: transparent;
}

/* auth.js fuegt auf schmalen Bildschirmen einen eigenen Hamburger
   ein. Wir haben ueberall einen eigenen Menue-Knopf, sonst
   staenden zwei Menues nebeneinander. */
.nav__burger { display: none !important; }

/* ── MENUE ALS AUSKLAPPER ──
   Auf den Unterseiten steht Bestellen im Vordergrund. Die
   Seitenlinks liegen hinter einem Klick. */
.nav__inner { position: relative; }

.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.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  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-bg); }

.nav__menue-btn span { display: block; line-height: 1; }

/* Gilt nur auf den Unterseiten. Die Startseite hat ihre
   Navigation im Hero und bleibt unveraendert. */
.nav:not(.hero-nav) .nav__links {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  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 12px 32px rgba(26, 44, 46, 0.14);
  z-index: 200;
}

.nav:not(.hero-nav).nav--offen .nav__links { display: flex; }

.nav:not(.hero-nav) .nav__links a {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.nav:not(.hero-nav) .nav__links a:hover {
  background: var(--color-bg);
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .nav__menue-btn__text { display: none; }
  .nav__menue-btn { padding: 0.45rem 0.6rem; }
}

/* Auf schmalen Bildschirmen darf das Ausklappmenue nicht ueber
   den Rand hinauslaufen. */
@media (max-width: 480px) {
  .nav:not(.hero-nav) .nav__links {
    left: 0;
    right: 0;
    min-width: 0;
    width: auto;
    flex-basis: auto;
  }
}

/* Die Kopfzeile der Unterseiten bleibt einzeilig. Die
   Beschriftungen der Buttons verschwinden dafuer frueher,
   uebrig bleiben die Icon-Pillen. */
@media (max-width: 900px) {
  .nav:not(.hero-nav) .nav__inner { flex-wrap: nowrap; }
  .nav:not(.hero-nav) .btn__text,
  .nav:not(.hero-nav) .nav__konto-name { display: none; }
  .nav:not(.hero-nav) .nav__aktionen .btn { padding-inline: 0.5rem; gap: 0; }
  .nav:not(.hero-nav) .nav__konto { padding: 0.45rem; }
}

/* ── UMSCHALTER LIEFERUNG / ABHOLUNG ──
   Zwei Haelften ueber die volle Breite, beide Konditionen immer
   sichtbar. Der aktive Teil ist dunkel hinterlegt. */
.modus {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-soft);
}

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

.modus__option {
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-top: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font: inherit;
}

.modus__option:first-child { border-top: 0; }

@media (min-width: 560px) {
  .modus__option { border-top: 0; border-left: 1px solid var(--color-line); }
  .modus__option:first-child { border-left: 0; }
}

.modus__option:hover { background: var(--color-bg); }

/* Die Zustandsklasse kommt aus bestellen.js und heisst dort
   mode-card--active. Deshalb beide Selektoren. */
.modus__option--aktiv,
.modus .mode-card--active,
.modus__option--aktiv:hover,
.modus .mode-card--active:hover {
  background: var(--color-dark);
  color: var(--color-on-dark);
  border-color: var(--color-dark);
}

.modus__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.modus__name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.modus__preis {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-copper);
  white-space: nowrap;
}

.modus__sub {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  opacity: 0.75;
}

/* Auf schmalen Bildschirmen stehen die beiden als getrennte
   Karten untereinander, mit Abstand dazwischen. */
@media (max-width: 559px) {
  .modus {
    border: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    gap: var(--space-3);
  }

  .modus__option {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
  }
}

/* ── KOPFZEILE DER UNTERSEITEN ──
   Die Startseite hat ihre Navigation im Hero. Alle anderen Seiten
   nutzen diese Kopfzeile: links nur das Logo, rechts die Knoepfe.
   Kein Textmenue mehr.

   Das Logo ist eine breite Wortmarke, keine runde Bildmarke wie
   im Grundgeruest — deshalb wird es ueber die Breite gesetzt und
   nicht ueber eine feste Kantenlaenge. */
.nav__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav__logo-bild {
  display: block;
  width: clamp(150px, 20vw, 240px);
  height: auto;
  flex-shrink: 0;
}

.nav__wortmarke {
  font-family: 'Reem Kufi', var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  white-space: nowrap;
}

.nav__wortmarke span { display: block; }

.nav__wortmarke span + span {
  font-size: 0.58em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .nav__logo-bild { width: 150px; }
  .nav__wortmarke { font-size: 1rem; }
  .nav__wortmarke span + span { display: none; }
}

@media (max-width: 480px) {
  .nav__logo-bild { width: 118px; }
  .nav__wortmarke { font-size: 0.9rem; }
}

/* Seitentitel auf den Unterseiten */
.seitenkopf {
  padding-block: var(--space-7) var(--space-5);
}

.seitenkopf__nr {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-copper);
  display: block;
  margin-bottom: var(--space-2);
}

.seitenkopf h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* ── HERO: Farbfläche links, randloses Bild rechts ──
   Kein durchlaufender Header. Die Navigation liegt oben rechts
   über dem Bild, das bis an die obere Bildschirmkante reicht. */
.hero {
  display: grid;
  grid-template-columns: 1fr;
}

.hero__panel {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  padding: var(--space-8) var(--container-pad-mobile) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82svh;
}

.hero__panel > * { position: relative; z-index: 1; }

/* Marke oben links, aus dem Fluss genommen, damit der Textblock
   in der Flaeche wirklich mittig sitzt. */
.hero__marke {
  position: absolute;
  top: var(--space-5);
  left: var(--container-pad-mobile);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__logo {
  display: block;
  width: 74px;
  max-width: 18vw;
}

.hero__wortmarke {
  font-family: 'Reem Kufi', var(--font-head);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.hero__wortmarke span { display: block; }
.hero__wortmarke span + span {
  font-size: 0.62em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-top: 2px;
}

/* Wasserzeichen als Pseudo-Element, damit es die Hoehe niemals
   beeinflussen kann und automatisch mittig auf dem Text sitzt. */
.hero__inhalt {
  position: relative;
  z-index: 1;
  max-width: 52ch;
}

.hero__inhalt::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(150%, 820px);
  aspect-ratio: 1;
  background-image: url('../Bilder/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.hero__inhalt > * { position: relative; z-index: 1; }

.hero__nummer {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.hero__title em {
  font-style: normal;
  display: block;
}

.hero__sub {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-muted);
  margin-bottom: var(--space-6);
  max-width: 46ch;
}

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

/* Rechte Spalte: Bild bis zur Oberkante */
.hero__bild {
  position: relative;
  min-height: 42svh;
  background-size: cover;
  background-position: center;
  background-color: var(--color-dark);
  order: -1;
}

/* Navigation liegt ueber dem Bild.
   Die Klasse nav bleibt fuer das Burger-Menue erhalten, ihre
   Flaechen- und Positionsregeln werden hier aber aufgehoben,
   sonst liegt ein weisser Streifen ueber dem Bild. */
.hero-nav.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  min-height: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-4) var(--container-pad-mobile);
}

.hero-nav.nav.scrolled {
  background: transparent;
  box-shadow: none;
}

/* Verlauf haengt am Bild, nicht an der Kopfzeile. Dadurch liegt
   die komplette Kopfzeile mit z-index 6 sicher darueber. */
.hero__bild::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  background: linear-gradient(to bottom, rgba(14,24,26,0.78) 0%, rgba(14,24,26,0.38) 55%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Alles in der Kopfzeile eigenstaendig positionieren, damit es
   zuverlaessig ueber dem Verlauf liegt. */
.hero-nav .nav__links,
.hero-nav .nav__aktionen,
.hero-nav .btn,
.hero-nav .nav__konto {
  position: relative;
  z-index: 2;
}

.hero-nav__links {
  display: none;
  gap: var(--space-5);
}

.hero-nav .nav__links a,
.hero-nav__links a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ffffff;
  opacity: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

/* Kein Farbwechsel beim Hover, nur ein feiner Unterstrich */
.hero-nav .nav__links a:hover,
.hero-nav__links a:hover {
  color: #ffffff;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.hero-nav__aktionen {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Konto-Button auf dem Bild hell umrandet */
.hero-nav .nav__konto {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}

.hero-nav .nav__konto:hover {
  color: var(--color-copper);
  border-color: var(--color-copper);
}

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

/* Icon faerbt sich beim Hover mit */
.hero-nav .nav__konto:hover .nav__konto-icon,
.hero-nav .nav__konto:hover .ic,
.hero-nav .nav__konto:hover svg {
  color: var(--color-copper);
  stroke: var(--color-copper);
}

/* Menue-Knopf im Hero: nur auf schmalen Bildschirmen, hell auf
   dem Bild und ganz links in der Leiste. */
.hero-nav .nav__menue-btn {
  display: none;
  position: relative;
  z-index: 2;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-nav .nav__menue-btn:hover {
  border-color: var(--color-copper);
  background: rgba(0, 0, 0, 0.22);
}

@media (max-width: 899px) {
  .hero-nav .nav__menue-btn {
    display: inline-flex;
    margin-right: auto;
  }

  /* Aufgeklappt erscheinen die Sektionen als helles Feld
     unter der Leiste. */
  .hero-nav.nav--offen .nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    /* orient.css setzt hier width 100%, dadurch wuerde das Feld
       rechts aus dem Bild laufen. */
    width: auto;
    flex-basis: auto;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    box-shadow: 0 14px 34px rgba(20, 32, 34, 0.3);
    z-index: 300;
  }

  .hero-nav.nav--offen .nav__links a {
    color: var(--color-ink);
    text-shadow: none;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .hero-nav.nav--offen .nav__links a:hover {
    color: var(--color-accent);
    background: var(--color-bg);
    text-decoration: none;
  }
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    height: 100svh;
    min-height: 600px;
    max-height: 900px;
  }
  /* Linker Innenabstand richtet sich nach der Inhaltsbreite der
     Seite, damit Hero-Text und Sektionen buendig stehen. */
  .hero__panel {
    min-height: 0;
    padding-block: var(--space-7);
    padding-right: var(--space-6);
    padding-left: max(var(--space-7), calc((100vw - var(--max-content-width)) / 2));
  }
  .hero__marke {
    top: var(--space-6);
    left: max(var(--space-7), calc((100vw - var(--max-content-width)) / 2));
  }
  .hero__logo { width: 84px; }
  .hero__bild { order: 0; min-height: 0; }
  .hero-nav { padding-inline: var(--space-6); }
  .hero-nav__links { display: flex; }
}

/* ── LAUFBAND ──
   Zwei identische Gruppen nebeneinander, die Animation verschiebt
   um genau eine Gruppenbreite. Dadurch entsteht keine Luecke. */
.ticker {
  background: var(--color-copper);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding-block: var(--space-5);
  border-block: 1px solid rgba(0,0,0,0.12);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-lauf 34s linear infinite;
}

.ticker__gruppe {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-right: var(--space-6);
  flex: 0 0 auto;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Lalezar', var(--font-head);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.ticker__punkt {
  opacity: 0.55;
  font-size: 0.8rem;
}

@keyframes ticker-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ── NUMMERIERTE BLÖCKE ──
   Dreispaltig, große Ziffern. Ersetzt die Bild-Text-Wechsel. */
.werte {
  padding-block: var(--space-8);
}

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

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

.wert {
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.wert__nr {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-line);
  margin-bottom: var(--space-3);
}

.wert__titel {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}

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

/* ── GROSSER BILDSTREIFEN ──
   Volle Breite, Text unten links, ohne Split. */
.streifen {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--color-dark);
}

.streifen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,44,46,0.92) 0%, rgba(26,44,46,0.15) 70%);
}

.streifen__inhalt {
  position: relative;
  z-index: 1;
  padding: var(--space-7) var(--container-pad-mobile);
  color: var(--color-on-dark);
  max-width: 62ch;
}

.streifen__nr {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-copper);
  margin-bottom: var(--space-3);
  display: block;
}

.streifen__titel {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 2.8rem);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--space-3);
}

.streifen__text { opacity: 0.82; line-height: 1.8; }

@media (min-width: 900px) {
  .streifen { min-height: 520px; }
  .streifen__inhalt { padding: var(--space-8) var(--space-7); }
}

/* ── INDEXLISTE STATT KACHELN ── */
.index-liste {
  border-top: 1px solid var(--color-line);
}

.index-zeile {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-line);
  transition: background var(--transition), padding-inline var(--transition);
}

.index-zeile:hover {
  background: var(--color-bg-soft);
  padding-inline: var(--space-4);
}

.index-zeile__nr {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-copper);
}

.index-zeile__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  min-width: 0;
}

.index-zeile__meta {
  font-size: var(--text-sm);
  color: var(--color-muted);
  white-space: nowrap;
  display: none;
}

@media (min-width: 640px) {
  .index-zeile__meta { display: block; }
}

.index-zeile__pfeil {
  color: var(--color-accent);
  display: inline-flex;
  transition: transform var(--transition);
}

.index-zeile:hover .index-zeile__pfeil { transform: translateX(6px); }

/* iconsEinsetzen ersetzt den Span samt Klasse durch das SVG,
   uebrig bleibt nur .ic. Deshalb hier darauf zielen. */
.index-zeile .ic {
  color: var(--color-accent);
  transition: transform var(--transition);
}

.index-zeile:hover .ic { transform: translateX(6px); }

/* Auf Mobile gibt es kein Hover, das Zeichen hat dort keine
   Funktion und wird ausgeblendet. */
@media (max-width: 640px) {
  .index-zeile .ic,
  .index-zeile__pfeil { display: none; }
  .index-zeile { grid-template-columns: auto 1fr; }
}

/* ── GUTSCHEINKARTEN ── */
.gutschein-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

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

.gutschein {
  position: relative;
  background: var(--color-bg-soft);
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  overflow: hidden;
}

.gutschein--dunkel {
  background: var(--color-dark);
  border-color: var(--color-copper);
  color: var(--color-on-dark);
}

/* Perforation an den Seiten, wie bei einem abtrennbaren Coupon */
.gutschein::before,
.gutschein::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-bg);
  transform: translateY(-50%);
}

.gutschein::before { left: -14px; }
.gutschein::after  { right: -14px; }

.gutschein__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-bottom: var(--space-3);
  display: block;
}

.gutschein__titel {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: var(--space-3);
}

.gutschein__text {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: 1.6;
}

.gutschein--dunkel .gutschein__text { color: rgba(245,239,227,0.75); }

.gutschein__code {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  border-top: 1px dashed var(--color-line);
  padding-top: var(--space-3);
}

/* ── BEWERTUNGEN: drei feste Karten ── */
.stimmen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

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

.stimme {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}

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

.stimme__text {
  line-height: 1.8;
  margin-bottom: var(--space-4);
  flex: 1;
}

.stimme__autor {
  font-size: var(--text-sm);
  color: var(--color-muted);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
}

/* ── STIMMEN ──
   Ein grosses Zitat auf dunklem Grund, das von selbst wechselt.
   Der Balken zeigt an, wann der naechste Wechsel kommt. */
.stimmen {
  position: relative;
  background: var(--color-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  overflow: hidden;
}

.stimmen__zeichen {
  position: absolute;
  top: 1.2rem;
  right: 1.8rem;
  font-family: Georgia, serif;
  font-size: 11rem;
  line-height: 0.7;
  color: rgba(184, 115, 51, 0.26);
  pointer-events: none;
  user-select: none;
}

.stimmen__buehne {
  position: relative;
  min-height: 12rem;
}

@media (min-width: 700px) {
  .stimmen__buehne { min-height: 10rem; }
}

.stimme-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  animation: stimme-zyklus 15s infinite;
}

.stimme-slide:nth-child(2) { animation-delay: 5s; }
.stimme-slide:nth-child(3) { animation-delay: 10s; }

@keyframes stimme-zyklus {
  0%   { opacity: 0; transform: translateY(10px); }
  3%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  35%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(10px); }
}

.stimme-slide__sterne {
  color: var(--color-saffron);
  letter-spacing: 0.12em;
  margin-bottom: var(--space-3);
}

.stimme-slide__text {
  font-family: 'Reem Kufi', var(--font-head);
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  color: var(--color-on-dark);
  max-width: 46ch;
}

.stimme-slide__autor {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-top: var(--space-4);
}

.stimmen__balken {
  height: 3px;
  background: rgba(245, 239, 227, 0.18);
  border-radius: 2px;
  margin-top: var(--space-7);
  overflow: hidden;
}

.stimmen__balken i {
  display: block;
  height: 100%;
  background: var(--color-copper);
  animation: stimmen-fortschritt 5s linear infinite;
}

@keyframes stimmen-fortschritt {
  from { width: 0; }
  to   { width: 100%; }
}

/* Ohne Bewegung: alle Zitate untereinander sichtbar */
@media (prefers-reduced-motion: reduce) {
  .stimmen__buehne { min-height: 0; }
  .stimme-slide {
    position: static;
    opacity: 1;
    transform: none;
    animation: none;
    margin-bottom: var(--space-5);
  }
  .stimmen__balken { display: none; }
}

/* ── ABSCHNITTSKOPF ── */
.kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--color-ink);
}

.kopf h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.kopf__nr {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-copper);
  display: block;
  margin-bottom: var(--space-2);
}

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

/* Auf Mobile bekommen alle Sektionen denselben Innenabstand.
   Da sich die Abstaende zweier Sektionen addieren, ergibt das
   durchgehend denselben Zwischenraum. */
@media (max-width: 899px) {
  .abschnitt,
  .abschnitt--eng,
  .ueber,
  .zahlen {
    padding-block: var(--space-6);
  }

  .ueber { gap: var(--space-6); }

  /* Der Werbebanner braucht keinen zusaetzlichen Abstand, die
     Sektion darueber bringt ihn bereits mit. */
  .aktion { margin-top: 0; }

  .aktion__inner { padding-block: var(--space-6); }

  .kopf { margin-bottom: var(--space-5); }
}

/* ── KONTAKT ──
   Vier Kacheln nebeneinander, Karte darunter über volle Breite.
   Die erste Kachel ist dunkel und setzt den Akzent. */
.kontakt-kacheln {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

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

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

.kontakt-kachel {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: background var(--transition), border-color var(--transition);
}

/* Beim Ueberfahren wird die Kachel dunkel, Schrift und Icon hell */
.kontakt-kachel:hover,
.kontakt-kachel:focus-within {
  background: var(--color-dark);
  border-color: var(--color-dark);
}

.kontakt-kachel__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.kontakt-kachel__kopf .ic {
  width: 26px;
  height: 26px;
  stroke-width: 1.3;
  color: var(--color-accent);
  transition: color var(--transition);
}

.kontakt-kachel:hover .ic,
.kontakt-kachel:focus-within .ic { color: var(--color-copper); }

.kontakt-kachel__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--transition);
}

.kontakt-kachel:hover .kontakt-kachel__label,
.kontakt-kachel:focus-within .kontakt-kachel__label { color: var(--color-copper); }

/* Farbe explizit setzen, base.css faerbt Absaetze sonst dunkel */
.kontakt-kachel__wert {
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  transition: color var(--transition);
}

.kontakt-kachel__wert a { color: inherit; }

.kontakt-kachel:hover .kontakt-kachel__wert,
.kontakt-kachel:focus-within .kontakt-kachel__wert { color: var(--color-on-dark); }

.kontakt-karte {
  min-height: 440px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-line);
}

.kontakt-karte iframe { width: 100%; height: 100%; min-height: 440px; border: 0; display: block; }

/* Auf Mobile werden die vier Kacheln zum Wisch-Slider.
   Die naechste Kachel schaut am Rand hervor, dazu ein feiner
   Fortschrittsbalken statt eines Texthinweises. */
@media (max-width: 899px) {
  .kontakt-kacheln {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-copper) var(--color-line);
    padding-bottom: var(--space-3);
    margin-inline: calc(var(--container-pad-mobile) * -1);
    padding-inline: var(--container-pad-mobile);
    scroll-padding-inline: var(--container-pad-mobile);
  }

  .kontakt-kachel {
    flex: 0 0 74%;
    scroll-snap-align: start;
  }

  /* Balken sichtbar lassen, er zeigt an, dass es weitergeht */
  .kontakt-kacheln::-webkit-scrollbar { height: 4px; }
  .kontakt-kacheln::-webkit-scrollbar-track {
    background: var(--color-line);
    border-radius: 2px;
  }
  .kontakt-kacheln::-webkit-scrollbar-thumb {
    background: var(--color-copper);
    border-radius: 2px;
  }

  /* Ohne Hover keine Farbumkehr, sonst bleibt eine Kachel
     nach dem Antippen dunkel stehen. */
  .kontakt-kachel:hover,
  .kontakt-kachel:focus-within {
    background: var(--color-bg-soft);
    border-color: var(--color-line);
  }
  .kontakt-kachel:hover .kontakt-kachel__wert,
  .kontakt-kachel:focus-within .kontakt-kachel__wert { color: var(--color-ink); }
  .kontakt-kachel:hover .kontakt-kachel__label,
  .kontakt-kachel:focus-within .kontakt-kachel__label { color: var(--color-muted); }
  .kontakt-kachel:hover .ic,
  .kontakt-kachel:focus-within .ic { color: var(--color-accent); }
}

/* ── SPEISEKARTE ALS PREISLISTE ── */
.karte-abschnitt { margin-bottom: var(--space-7); }

.karte-abschnitt__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  border-bottom: 3px solid var(--color-ink);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

.karte-abschnitt__nr {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--color-copper);
}

.karte-abschnitt__titel {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--text-2xl);
  text-transform: uppercase;
}

.gericht {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  min-width: 0;
}

.gericht__bild {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
}

.gericht__body { min-width: 0; }

.gericht__zeile {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.gericht__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Punktlinie zwischen Name und Preis, wie auf einer Wandkarte */
.gericht__linie {
  flex: 1;
  border-bottom: 1px dotted var(--color-line);
  transform: translateY(-3px);
  min-width: 12px;
}

.gericht__preis {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-accent);
  white-space: nowrap;
}

.gericht__desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: 2px;
  line-height: 1.5;
}

.gericht__aktion { display: flex; align-items: center; }

@media (max-width: 560px) {
  .gericht { grid-template-columns: 48px 1fr; row-gap: var(--space-3); }
  .gericht__bild { width: 48px; height: 48px; }
  .gericht__aktion { grid-column: 2; justify-content: flex-start; }
}

/* ── SERVICE ──
   Bild links, vier Kacheln rechts. Der Fließtext erscheint erst
   beim Überfahren. Auf Mobile gibt es kein Hover, dort steht der
   Text deshalb dauerhaft. */
.service {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .service { grid-template-columns: 0.82fr 1.18fr; }
}

.service__bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  background-color: var(--color-dark);
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-6) var(--space-5);
}

.service__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,32,34,0.88) 0%, rgba(20,32,34,0.15) 65%);
}

.service__bild-inhalt {
  position: relative;
  z-index: 1;
  color: var(--color-on-dark);
}

.service__bild-titel {
  font-family: 'Lalezar', var(--font-head);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-bottom: var(--space-4);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* Kacheln füllen die Hoehe des Bildes aus */
.service__kacheln {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

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

@media (min-width: 900px) {
  .service__kacheln { grid-template-rows: 1fr 1fr; }
}

.service-kachel {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background var(--transition);
}

.service-kachel:hover,
.service-kachel:focus-within {
  background: var(--color-bg-soft);
}

.service-kachel__nr {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-copper);
}

.service-kachel__titel {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.2;
  margin-top: var(--space-2);
}

.service-kachel__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
  margin-top: var(--space-2);
}

/* Hover-Aufklappen nur dort, wo es ein Hover gibt */
@media (hover: hover) and (min-width: 900px) {
  .service-kachel__text {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
  }
  .service-kachel:hover .service-kachel__text,
  .service-kachel:focus-within .service-kachel__text {
    max-height: 8rem;
    opacity: 1;
    margin-top: var(--space-2);
  }
}

/* Hinweis auf den Slider, nur auf Mobile sichtbar.
   Die Grundregel muss vor der Media Query stehen. */
.slider-hinweis { display: none; }

/* Auf Mobile werden die Kacheln zum Wisch-Slider.
   Die naechste Karte schaut am Rand hervor, damit erkennbar ist,
   dass es weitergeht. */
@media (max-width: 899px) {
  .service__kacheln {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: var(--space-3);
    /* randlos scrollen, Inhalt bleibt trotzdem eingerueckt */
    margin-inline: calc(var(--container-pad-mobile) * -1);
    padding-inline: var(--container-pad-mobile);
    scroll-padding-inline: var(--container-pad-mobile);
  }

  .service-kachel {
    flex: 0 0 78%;
    scroll-snap-align: start;
    background: var(--color-bg-soft);
  }

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

  .slider-hinweis {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-copper);
    margin-top: var(--space-2);
  }

  .slider-hinweis::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-line);
  }
}

/* ── ÜBER UNS ──
   Zwei überlappende Bilder links, Text rechts. Bewusst asymmetrisch
   und damit anders als die 50/50-Splits der anderen Shops. */
.ueber {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8) var(--space-7);
  align-items: center;
  padding-block: var(--space-8);
}

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

.ueber__bilder {
  position: relative;
  padding-bottom: var(--space-6);
  padding-right: var(--space-6);
}

.ueber__bild-gross {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: var(--color-line);
  border-radius: var(--radius-md);
}

.ueber__bild-klein {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: var(--color-line);
  border: 10px solid var(--color-bg);
  border-radius: var(--radius-md);
}

/* Störer mit der Jahreszahl */
.ueber__stoerer {
  position: absolute;
  top: var(--space-5);
  left: calc(var(--space-5) * -1);
  background: var(--color-copper);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  transform: rotate(-4deg);
  font-family: 'Lalezar', var(--font-head);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  z-index: 2;
}

.ueber__stoerer small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ueber__text h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.ueber__lead {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.ueber__text p {
  color: var(--color-muted);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

/* Zitat mit Kupferbalken */
.ueber__zitat {
  border-left: 3px solid var(--color-copper);
  padding-left: var(--space-4);
  margin-block: var(--space-5);
}

.ueber__zitat p {
  font-family: 'Reem Kufi', var(--font-head);
  font-size: var(--text-xl);
  line-height: 1.5;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.ueber__zitat cite {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── KENNZAHLEN ── */
.zahlen {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding-block: var(--space-7);
}

.zahlen__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: center;
}

/* Senkrechte Trenner zwischen den drei Werten */
.zahlen__grid > * + * {
  border-left: 1px solid rgba(245, 239, 227, 0.28);
}

.zahl__wert {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--color-copper);
  font-variant-numeric: tabular-nums;
}

.zahl__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: var(--space-2);
}

/* ── WERBEBANNER ──
   Band laeuft randlos durch, der Inhalt sitzt in der
   Inhaltsbreite von 1140px. */
.aktion {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--color-dark);
  margin-top: var(--space-8);
}

.aktion::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14,24,26,0.92) 0%, rgba(14,24,26,0.72) 45%, rgba(14,24,26,0.35) 100%);
}

.aktion__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding: var(--space-7) var(--container-pad-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  color: var(--color-on-dark);
}

@media (min-width: 900px) {
  .aktion__inner { padding-inline: var(--space-6); }
}

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

/* Titel und Preisschild nebeneinander */
.aktion__titelzeile {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.aktion__titel {
  font-family: 'Lalezar', var(--font-head);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  /* h2 erbt sonst die dunkle Textfarbe aus base.css */
  color: var(--color-on-dark);
}

.aktion__text {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-on-dark);
  opacity: 0.85;
  max-width: 46ch;
  margin-bottom: var(--space-5);
}

/* Schraeger Preisstoerer mit leichtem Wackeln und Lichtreflex */
.aktion__preis {
  position: relative;
  overflow: hidden;
  background: var(--color-copper);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  transform: rotate(-3deg);
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: stoerer-wackeln 3.6s ease-in-out infinite;
}

@keyframes stoerer-wackeln {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50%      { transform: rotate(-1deg) scale(1.03); }
}

/* Lichtreflex wandert alle paar Sekunden schraeg darueber */
.aktion__preis::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -70%;
  width: 45%;
  height: 140%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: stoerer-glanz 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes stoerer-glanz {
  0%, 62%  { left: -70%; }
  88%, 100% { left: 130%; }
}

.aktion__preis > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .aktion__preis { animation: none; }
  .aktion__preis::before { animation: none; opacity: 0; }
}

.aktion__preis b {
  display: block;
  font-family: 'Lalezar', var(--font-head);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1;
}

.aktion__preis span {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ── GALERIE-STREIFEN ── */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

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

.galerie__bild {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  transition: transform var(--transition);
}

.galerie__bild:hover { transform: scale(1.02); }

/* ── TEAM ── */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

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

.team-karte {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.team-karte__bild {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: var(--color-line);
}

.team-karte__body { padding: var(--space-4); }

.team-karte__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-lg);
  text-transform: uppercase;
}

.team-karte__rolle {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-block: var(--space-1) var(--space-2);
}

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

/* ── ANFRAGEFORMULAR ── */
.anfrage {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
}

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

@media (min-width: 640px) {
  .anfrage__grid { grid-template-columns: 1fr 1fr; }
  .anfrage__voll { grid-column: 1 / -1; }
}

/* ── FOOTER-BILDERSTREIFEN ── */
.footer-streifen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

@media (min-width: 760px) {
  .footer-streifen { grid-template-columns: repeat(6, 1fr); }
}

.footer-streifen__bild {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: var(--color-line);
  filter: grayscale(0.3);
  transition: filter var(--transition);
}

.footer-streifen__bild:hover { filter: grayscale(0); }

/* ── BILDERBAND ÜBER DEM FOOTER ──
   Laeuft dauerhaft nach links. Zwei identische Gruppen sorgen
   fuer den nahtlosen Uebergang, die Animation verschiebt um
   genau eine Gruppenbreite. */
.bilderband {
  overflow: hidden;
  background: var(--color-bg);
}

.bilderband__track {
  display: flex;
  width: max-content;
  animation: bilderband-lauf 60s linear infinite;
}

.bilderband:hover .bilderband__track {
  animation-play-state: paused;
}

.bilderband__gruppe {
  display: flex;
  gap: 4px;
  padding-right: 4px;
  flex: 0 0 auto;
}

.bilderband__bild {
  width: 300px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  background-color: var(--color-line);
  filter: grayscale(0.25);
  transition: filter var(--transition), transform var(--transition);
}

.bilderband__bild:hover {
  filter: grayscale(0);
  transform: scale(1.03);
}

@media (max-width: 700px) {
  .bilderband__bild { width: 200px; }
}

@keyframes bilderband-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ── FOOTER ──
   Heller Grund wie die Seite, Logo wie in der Kopfzeile. */
.footer {
  background: var(--color-bg);
  color: var(--color-ink);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

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

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

/* Marke wie im Hero: Zeichen und Schriftzug nebeneinander */
.footer__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.footer__logo {
  display: block;
  width: 62px;
  flex-shrink: 0;
}

.footer__wortmarke {
  font-family: 'Reem Kufi', var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.footer__wortmarke span { display: block; }

.footer__wortmarke span + span {
  font-size: 0.6em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-top: 2px;
}

.footer__claim {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.footer__contact {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-ink);
}

.footer__contact a { color: var(--color-ink); }
.footer__contact a:hover { color: var(--color-accent); }

.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }

.footer__links a {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

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

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

.footer__copy {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ── FILIALWAHL ──
   Die Maske baut js/filiale.js und haengt sie an den body. Beim
   ersten Betreten der Bestellseite laesst sie sich nicht
   schliessen — vor dem ersten Artikel muss feststehen, wohin die
   Bestellung geht. Spaeter oeffnet der Schalter in der Kopfzeile
   dieselbe Maske, dann mit Abbrechen. */
.filialwahl {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.82);
}

/* Haelt die Seite hinter der Maske still. */
body.hat-maske { overflow: hidden; }

.filialwahl__fenster {
  width: min(100%, 560px);
  padding: var(--space-6);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-accent);
  text-align: center;
}

.filialwahl__kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.filialwahl__titel {
  font-size: var(--text-3xl);
  margin-top: var(--space-2);
}

.filialwahl__text {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

.filialwahl__karten {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

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

.filialwahl__karte {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.filialwahl__karte:hover,
.filialwahl__karte:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-blut-dk);
  outline: none;
}

.filialwahl__name {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.filialwahl__adresse { color: var(--color-ink); font-size: var(--text-sm); line-height: 1.5; }
.filialwahl__zeiten { color: var(--color-muted); font-size: var(--text-xs); }

.filialwahl__abbrechen {
  margin-top: var(--space-5);
  background: none;
  border: none;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.filialwahl__abbrechen:hover { color: var(--color-accent); }

/* Schalter in der Kopfzeile */
.filiale-schalter {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 0.35rem 0.7rem;
  background: none;
  border: 1px solid var(--color-line);
  cursor: pointer;
  line-height: 1.1;
  transition: border-color var(--transition);
}

.filiale-schalter:hover { border-color: var(--color-accent); }

.filiale-schalter__label {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.filiale-schalter__name {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

/* Auf schmalen Schirmen nimmt js/menue.js die Knoepfe in das
   Klappfeld. Dort darf der Schalter die volle Breite haben. */
@media (max-width: 900px) {
  .filiale-schalter { width: 100%; }
}

/* ── HERO DÖNER POINT ──
   Ein formatfuellendes Bild, alles mittig darauf. Loest den alten
   zweispaltigen Hero des Bosporus Grill ab; dessen Regeln unter
   .hero stehen noch im Stylesheet und greifen ins Leere, weil das
   Markup jetzt .hero-dp heisst. Sie gehoeren beim naechsten
   Aufraeumen entfernt. */
.hero-dp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding-block: var(--space-5) var(--space-8);
  background-color: var(--color-dark);
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
}

/* Dunkler Schleier ueber dem Foto. Ohne ihn haengt die Lesbarkeit
   am Zufall des Bildes, und das Bild wird noch getauscht. */
.hero-dp::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 42%,
    rgba(0, 0, 0, 0.82) 100%);
}

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

/* Kopfzeile: Konto links, Logo mittig, Knoepfe rechts. Die
   aeusseren Spalten sind gleich breit, damit das Logo wirklich
   in der Mitte steht und nicht neben der Mitte. */
.hero-dp__kopf {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

.hero-dp__kopf-links { justify-self: start; }

.hero-dp__kopf-rechts {
  justify-self: end;
  display: flex;
  gap: var(--space-2);
}

.hero-dp__marke img {
  display: block;
  width: clamp(210px, 26vw, 400px);
  height: auto;
}

/* Der Konto-Knopf kommt aus js/auth.js und ist fuer helle
   Kopfzeilen gebaut. Hier bekommt er dasselbe Format wie die
   beiden CTAs daneben: rote Pille, weisse Schrift, schwarzes
   Icon, Masse von .btn--sm. */
.hero-dp .nav__konto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  min-height: 36px;
  border: 2px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

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

.hero-dp .nav__konto .ic,
.hero-dp .nav__konto svg {
  width: 18px;
  height: 18px;
  color: #fff;
  stroke: #fff;
}

.hero-dp .nav__konto-name { color: var(--color-on-dark); }

.hero-dp__menue {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}

.hero-dp__menue a {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}

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

/* margin-block: auto schiebt den Mittelteil in die verbleibende
   Hoehe und haelt ihn dort mittig, egal wie hoch der Kopf wird. */
.hero-dp__mitte { margin-block: auto; padding-top: var(--space-7); }

.hero-dp__orte {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero-dp__titel {
  font-size: clamp(2.3rem, 7vw, 5.4rem);
  color: #fff;
  margin-top: var(--space-4);
}

/* Die Trennstriche sind duenner und rot, damit die drei Begriffe
   als Gruppe lesbar bleiben. */
.hero-dp__titel span {
  color: var(--color-accent);
  font-weight: 500;
  margin-inline: 0.15em;
}

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

@media (max-width: 760px) {
  .hero-dp__kopf {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-3);
  }

  .hero-dp__marke { order: 1; }
  .hero-dp__kopf-links { order: 2; justify-self: center; }

  /* Reservieren und Bestellen sind auf dem Telefon doppelt: sie
     stehen mittig im Hero ohnehin gross da. In der Kopfzeile
     draengen sie nur Logo und Konto zusammen. */
  .hero-dp__kopf-rechts { display: none; }

  .hero-dp__menue { gap: var(--space-2) var(--space-4); }
  .hero-dp__menue a { font-size: 0.72rem; }
}

/* ── ÜBER UNS: BILDER ──
   Abgerundet und beim Zeigen leicht groesser. overflow: hidden am
   Rahmen, damit das Hintergrundbild beim Wachsen nicht ueber die
   Rundung hinauslaeuft — die Bilder liegen als background-image
   auf den Elementen, nicht als img. */
.ueber__bild-gross,
.ueber__bild-klein {
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.ueber__bild-gross:hover,
.ueber__bild-klein:hover {
  transform: scale(1.04);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
}

/* ── KATEGORIEKACHELN ──
   Helle Kachel mit rotem Rand, freigestelltem Gerichtbild und
   roter Beschriftung darunter. Bewusst hell auf dem schwarzen
   Grund, damit die freigestellten Bilder ohne Kante sitzen. */
/* Immer drei Kacheln nebeneinander, also zwei Reihen zu drei.
   Feste Spaltenzahl statt auto-fit, damit die Aufteilung nicht je
   nach Fensterbreite zwischen zwei und vier springt. Auf dem
   Tablet zwei, auf dem Telefon eine. */
.kat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 620px) {
  .kat-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ── KATEGORIEKACHELN ──
   Name in Rot ueber der Kachel, darunter der Rahmen mit dem
   freigestellten Gerichtbild. Kein heller Grund mehr: die Bilder
   haben einen Alphakanal und stehen direkt auf Schwarz. */
.kat-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
  transition: transform 0.3s ease;
}

.kat-kachel:hover { transform: translateY(-6px); opacity: 1; }

.kat-kachel__titel {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Der Rahmen umschliesst das Foto jetzt randlos. overflow: hidden
   schneidet das Bild auf die Rundung zu. */
.kat-kachel__rahmen {
  display: block;
  overflow: hidden;
  border: 2px solid var(--color-accent);
  border-radius: 20px;
  transition: box-shadow 0.3s ease;
}

.kat-kachel:hover .kat-kachel__rahmen {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
}

.kat-kachel__bild {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.kat-kachel:hover .kat-kachel__bild { transform: scale(1.05); }

/* ── ANSPRUCH MIT SLIDER ──
   Links der Text, rechts drei Karten uebereinander gestapelt, von
   denen immer genau eine sichtbar ist. Gestapelt statt
   nebeneinander geschoben: so bleibt die Hoehe ruhig und nichts
   laeuft seitlich aus dem Layout. js/vorteile.js schaltet. */
.vorteile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

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

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

.vorteile__text h2 { margin-bottom: var(--space-4); }
.vorteile__text p { color: var(--color-muted); margin-bottom: var(--space-4); }
.vorteile__text .btn { margin-top: var(--space-2); }

.vorteile__slider { display: flex; flex-direction: column; gap: var(--space-5); }

/* Ohne JavaScript stehen die drei Karten schlicht untereinander
   und sind alle lesbar. Erst wenn js/vorteile.js laeuft, setzt es
   die Klasse --js an die Buehne, stapelt sie uebereinander und
   blendet bis auf eine alle aus. So verschwindet die Sektion nie
   ganz, auch nicht bei blockierten Modulen. */
.vorteile__buehne {
  display: grid;
  gap: var(--space-4);
}

.vorteile__buehne--js {
  gap: 0;
  min-height: 260px;
}

.vorteil {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 2px solid var(--color-accent);
  border-radius: 20px;
}

/* Alle Karten liegen im selben Rasterfeld uebereinander. Die
   Buehne ist damit so hoch wie die laengste Karte und springt
   beim Wechsel nicht. */
.vorteile__buehne--js .vorteil {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.vorteile__buehne--js .vorteil--aktiv {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* iconsEinsetzen() ersetzt das <span data-icon> vollstaendig durch
   das SVG. Die Klasse vorteil__icon ueberlebt das nicht, deshalb
   wird hier das SVG innerhalb der Karte angesprochen. */
.vorteil .ic {
  width: 46px;
  height: 46px;
  stroke-width: 1.1;
  color: var(--color-accent);
}

.vorteil__titel {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: var(--text-xl);
  text-transform: uppercase;
  color: var(--color-ink);
}

.vorteil__text { color: var(--color-muted); }

/* Steuerung: Pfeil, Punkte, Pfeil. Die Pfeile stehen im HTML auf
   hidden und werden von js/vorteile.js sichtbar gemacht — ohne
   Schaltung haetten sie keine Funktion. */
.vorteile__steuerung,
.stimmen__steuerung {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.stimmen__steuerung { margin-top: var(--space-5); }

.vorteile__pfeil,
.stimmen__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: none;
  color: var(--color-accent);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.vorteile__pfeil:hover,
.stimmen__pfeil:hover {
  background: var(--color-accent);
  color: #fff;
}

.vorteile__punkte {
  display: none;
  gap: var(--space-2);
}

.vorteile__buehne--js ~ .vorteile__steuerung .vorteile__punkte { display: flex; }

.vorteile__punkt {
  width: 34px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--color-line);
  cursor: pointer;
  transition: background var(--transition);
}

.vorteile__punkt--aktiv { background: var(--color-accent); }
.vorteile__punkt:hover { background: var(--color-accent-dk); }

/* ── AKTIONSBAND ──
   Schraeg laufendes Band ueber einem Foto, darunter das Angebot.
   Bewusst flacher als der alte Werbebanner.

   Das Band nutzt die .ticker-Mechanik aus diesem Stylesheet: zwei
   identische Gruppen, die Animation verschiebt um genau eine
   Gruppenbreite, dadurch entsteht keine Luecke. Hier nur in Rot
   mit weisser Schrift und um drei Grad gekippt. */
.aktion-dp {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-8) var(--space-7);
  background-color: var(--color-bg-soft);
  background-size: cover;
  background-position: center;
}

/* Dunkler Verlauf nach rechts, damit der Text auf jedem Foto
   steht. Links bleibt das Bild offen. */
.aktion-dp::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.82) 100%);
}

.aktion-dp > * { position: relative; z-index: 1; }

/* Breiter als die Sektion und gekippt, damit an den Ecken keine
   Luecke entsteht. overflow: hidden an der Sektion schneidet den
   Ueberstand ab. */
.ticker--schraeg {
  position: absolute;
  top: 34px;
  left: -4%;
  width: 108%;
  transform: rotate(-3deg);
  z-index: 2;
  background: var(--color-accent);
  border-block: none;
  padding-block: var(--space-3);
}

.ticker--schraeg .ticker__item {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.02em;
  color: #fff;
}

.ticker--schraeg .ticker__gruppe { gap: var(--space-7); padding-right: var(--space-7); }

.aktion-dp__inhalt {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-7);
}

/* Ab Tablet steht der Text rechts, links bleibt das Foto frei. */
@media (min-width: 760px) {
  .aktion-dp__inhalt { grid-template-columns: 1fr 1fr; }
  .aktion-dp__text { grid-column: 2; }
}

.aktion-dp__titel {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: #fff;
}

/* Der rote Kasten mit dem Preis. */
.aktion-dp__preis {
  display: inline-block;
  margin-top: var(--space-4);
  padding: 0.6rem 1.2rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 10px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  line-height: 1.1;
}

.aktion-dp__sub {
  max-width: 46ch;
  margin-top: var(--space-4);
  color: rgba(255, 255, 255, 0.82);
}

.aktion-dp .btn { margin-top: var(--space-5); }

/* ── KUNDENSTIMMEN ──
   Linksbuendig, eine Stimme nach der anderen, Punkte darunter.
   Derselbe Stapelaufbau wie beim Vorteile-Slider: ohne JavaScript
   stehen alle Stimmen untereinander, erst js/vorteile.js setzt
   die Klasse --js und blendet bis auf eine alle aus.

   Achtung: .stimmen und .stimme gab es in diesem Stylesheet schon
   aus zwei aelteren Bausteinen des Grundgeruests, beide mit
   Kasten, Rahmen und Rundung. Die Werte werden hier ausdruecklich
   zurueckgesetzt, sonst sitzt das Zitat in einer grauen Kachel in
   einem schwarzen Kasten. */
.stimmen__meta {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-2);
}

.stimmen__stern { color: var(--color-accent); }

.stimmen {
  margin-top: var(--space-6);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

.stimmen__buehne {
  display: grid;
  gap: var(--space-5);
  min-height: 0;
}

.stimmen__buehne--js { gap: 0; min-height: 190px; }

.stimme {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.stimmen__buehne--js .stimme {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.stimmen__buehne--js .stimme--aktiv { opacity: 1; visibility: visible; }

.stimme__sterne {
  color: var(--color-accent);
  font-size: 1.15rem;
  letter-spacing: 0.24em;
  line-height: 1;
  margin-bottom: 0;
}

.stimme__text {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-ink);
  max-width: 60ch;
}

.stimme__autor {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.stimmen__punkte {
  display: none;
  gap: var(--space-2);
}

.stimmen__buehne--js ~ .stimmen__steuerung .stimmen__punkte { display: flex; }

.stimmen__punkt {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-line);
  cursor: pointer;
  transition: background var(--transition);
}

.stimmen__punkt--aktiv { background: var(--color-accent); }
.stimmen__punkt:hover { background: var(--color-accent-dk); }

/* ── STANDORTE ──
   Links zwei Karten, rechts die Google-Karte. Die aktive Karte
   traegt den roten Rand. Ohne JavaScript stehen beide Karten da
   und die Google-Karte zeigt Neuss — lesbar, nur nicht
   umschaltbar. */
.standorte {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 900px) {
  .standorte { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.standorte__wahl {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.standort {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-bg-soft);
  border: 2px solid var(--color-line);
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.standort:hover { border-color: var(--color-accent); }

.standort--aktiv {
  border-color: var(--color-accent);
  background: rgba(225, 31, 28, 0.10);
}

.standort__stadt {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: var(--text-xl);
  text-transform: uppercase;
  color: var(--color-ink);
}

.standort__adresse {
  color: var(--color-ink);
  line-height: 1.6;
}

.standort__zeile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.standort__zeile .ic {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.standorte__karte {
  overflow: hidden;
  border: 2px solid var(--color-accent);
  border-radius: 20px;
  min-height: 340px;
}

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

/* Das Bilderband steht auf dunklem Grund, der Graufilter aus dem
   Grundgeruest wuerde es dort matt machen. */
.bilderband__bild { filter: none; }

/* Filialwahl ueber dem Umschalter. Bewusst ohne Kasten: nur
   Beschriftung und Auswahl, mittig. Der Pfeil wird selbst
   gezeichnet, weil das Standardfeld je nach System anders
   aussieht. */
.filialzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.filialzeile label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.filialzeile__wahl {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding: 0 1.4rem 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  text-transform: uppercase;
  color: var(--color-accent);
  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23E11F1C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px 8px;
}

.filialzeile__wahl:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* Das Ausklappfenster selbst zeichnet das System. Auf dunklem
   Grund sieht helle Schrift auf hellem Feld sonst schlecht aus. */
.filialzeile__wahl option {
  background: var(--color-bg-soft);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
}

/* deploy trigger */