/* ==========================================================================
   Berliner Döner Regensburg
   Farben stammen aus dem Logo (Tomatenrot, grünes Blatt, Konturschrift)
   und von der Hausfassade am Neupfarrplatz (Altrosa).

   Radius-System: Buttons = Pille, Medien und Karten = 14px. Sonst nichts.
   ========================================================================== */

:root {
  --ink:        #1b1d22;
  --ink-soft:   #585c66;
  --ink-faint:  #8d919b;

  --paper:      #f4f4f2;
  --surface:    #ffffff;
  --line:       #e0e0dc;

  --tomato:     #d2384a;
  --tomato-ink: #a8202f;
  --leaf:       #3f8f55;

  --rose:       #9e5b57;
  --rose-deep:  #7f4745;

  --radius:     14px;
  --shadow:     0 1px 2px rgba(27, 29, 34, .04),
                0 12px 32px -12px rgba(27, 29, 34, .14);

  --wrap:       1180px;
  --ease:       cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #ecebe7;
    --ink-soft:  #a9ada0;
    --ink-faint: #7d8178;

    --paper:     #141416;
    --surface:   #1c1d20;
    --line:      #2e3034;

    --tomato:     #e8535f;
    --tomato-ink: #f0747d;

    --rose:      #8a4f4c;
    --rose-deep: #6e3f3e;

    --shadow:    0 1px 2px rgba(0, 0, 0, .3),
                 0 12px 32px -12px rgba(0, 0, 0, .6);
  }
}

/* ---------------------------------------------------------------- Reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--tomato);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------------------------- Typografie -- */

.h2 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0 0 20px;
}
.h2--invert { color: #fff; }

.lead {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 0 16px;
}

/* z-index 1: alles nach dem Hero muss über dem klebenden Hero laufen. */
.section, .footer {
  position: relative;
  z-index: 1;
  background: var(--paper);
}
.section { padding: clamp(68px, 9vw, 120px) 0; }

/* --------------------------------------------------------------- Button -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease);
}
.btn--sm { padding: 10px 20px; font-size: .875rem; }

.btn--solid { background: var(--tomato); color: #fff; }
.btn--solid:hover { background: var(--tomato-ink); }

.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--light { background: #fff; color: var(--rose-deep); }
.btn--light:hover { background: #f1e9e8; }

.btn--outline-light { border-color: rgba(255, 255, 255, .75); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--rose-deep); }

.btn:active { transform: translateY(1px) scale(.985); }

/* ------------------------------------------------------------------ Nav -- */

/* Über dem dunklen Hero transparent mit hellem Text, ab dem ersten Scrollen
   legt sie sich auf die Seitenfarbe. Das hält den Einstieg ruhig. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: #fff;
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              color .3s var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  color: var(--ink);
}

@supports not (backdrop-filter: blur(1px)) {
  .nav.is-stuck { background: var(--paper); }
}

.nav__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 12px 20px;
  min-height: 72px;
  display: flex; align-items: center; gap: 28px;
}

/* Schmale Versalien wie auf dem Ladenschild, das Ö bleibt tomatenrot. */
.brand {
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1rem;
  font-stretch: 86%;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
  flex: none;
}
.brand__o { color: var(--tomato); }
.nav.is-stuck .brand__o { color: var(--tomato); }

.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a {
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  color: currentColor;
  opacity: .72;
  padding: 6px 0;
  position: relative;
  transition: opacity .18s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--tomato);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-active { opacity: 1; }
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: 12px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; cursor: pointer; color: inherit;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ----------------------------------------------------------------- Hero -- */

/* Dunkler Vollbild-Einstieg. Er bleibt stehen, während das Faktenband
   darüber schiebt. Drei Ebenen, von hinten nach vorn:
   hero__bg (abgedunkeltes Foto), hero__content (Wortmarke und Text),
   hero__card (helle Bildkarte, die beim Scrollen nach innen zuläuft). */
/* Die Sektion ist höher als der Bildschirm. Darin klebt die Bühne oben fest,
   solange der Hero läuft. Dieser Scrollweg ist die Strecke der Animation. */
.hero {
  position: relative;
  z-index: 0;
  height: 165vh;
  background: #0d0d10;
  color: #fff;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 11, .88) 0%, rgba(8, 8, 11, .66) 40%, rgba(8, 8, 11, .92) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  padding: 96px 20px 48px;
}

/* Wortmarke: BERLINER links, DÖNER nach rechts versetzt, wie auf dem Schild. */
.wordmark {
  display: flex;
  flex-direction: column;
  margin: 0 0 28px;
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(3rem, 12.4vw, 10.5rem);
  line-height: .9; /* tiefer gesetzt kollidieren die Ö-Punkte mit der Zeile darüber */
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.wordmark__a { color: #f6f1e7; }
.wordmark__b { color: var(--tomato); align-self: flex-end; }
.wordmark__o { color: inherit; }

.hero__lines { position: relative; max-width: 42rem; }

.hero__claim {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.hero__meta {
  margin: 0 0 28px;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Die helle Karte. Startet unsichtbar und randlos, läuft dann zu. */
.hero__card {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 2% 0 2%);
}
.hero__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* ---------------------------------------------------------------- Fakten -- */

/* Dunkles Band mit rotem Zahlenakzent. Liegt über dem Hero und bildet
   den harten Schnitt zwischen hellem Einstieg und der Bildszene. */
.facts {
  position: relative;
  z-index: 1;
  background: #1b1d22;
  color: #f4f4f2;
  padding: clamp(36px, 5vw, 56px) 0;
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.fact {
  display: flex; flex-direction: column; gap: 3px;
  padding-left: 18px;
  border-left: 2px solid rgba(244, 244, 242, .16);
}
.fact__big {
  font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.4rem);
  font-weight: 900; letter-spacing: -.035em; line-height: 1.05;
  color: #e8535f;
}
.fact__small { font-size: .85rem; color: rgba(244, 244, 242, .64); }

/* ------------------------------------------------------------ Zoom-Szene -- */

/* Vollbild-Moment: das Foto fährt beim Scrollen aus dem Zoom heraus und
   gibt die Aussage frei. Höhe > 100vh, damit es Scrollweg zum Animieren gibt. */
.scene {
  position: relative;
  z-index: 1;
  height: 210vh;
  background: #121216;
}

.scene__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.scene__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(1.05);
}

.scene__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, .62) 0%, rgba(10, 10, 12, .34) 42%, rgba(10, 10, 12, .78) 100%);
}

.scene__inner {
  position: relative;
  width: 100%; max-width: var(--wrap);
  padding: 0 20px;
  text-align: center;
  color: #fff;
}

.scene__h {
  font-size: clamp(2.3rem, 1rem + 4.4vw, 4.4rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.04em;
  margin: 0 0 16px;
  padding-bottom: 2px;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .5);
}
.scene__p {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
  font-weight: 600;
  color: rgba(255, 255, 255, .86);
}

/* ------------------------------------------------------- Split (Fleisch) -- */

.split__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.points { list-style: none; margin: 28px 0 0; padding: 0; }
.points li {
  display: grid;
  grid-template-columns: minmax(170px, 15rem) 1fr;
  gap: 8px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.points li:last-child { border-bottom: 1px solid var(--line); }
.points__k { font-weight: 700; }
.points__v { color: var(--ink-soft); font-size: .95rem; }

/* ---------------------------------------------------------------- Karte -- */

.menu { background: var(--surface); }

.menu__grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.menu__aside { position: sticky; top: 104px; }
.menu__photo { margin-top: 28px; }
.menu__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.group + .group { margin-top: 44px; }
.group__h {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tomato);
  margin: 0 0 6px;
}

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name price" "desc price";
  column-gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.list__n { grid-area: name; font-weight: 700; }
.list__d { grid-area: desc; font-size: .9rem; color: var(--ink-soft); }
.list__p {
  grid-area: price; align-self: center;
  font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.list__p::after { content: " €"; font-weight: 600; color: var(--ink-soft); }

.menu__note { margin-top: 26px; font-size: .85rem; color: var(--ink-faint); }

/* -------------------------------------------------------------- Galerie -- */

/* Leicht ins Tomatenrot getönter Grund, damit zwischen Karte und Kontakt
   nicht drei helle Flächen hintereinander stehen. */
.gallery { background: color-mix(in srgb, var(--tomato) 8%, var(--paper)); }

.gallery__h { margin-bottom: 32px; }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.gallery__wide { grid-column: 1 / -1; }
.gallery__grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform .5s var(--ease);
}
.gallery__wide img { aspect-ratio: 16 / 9; }
.gallery__grid figure:not(.gallery__wide) img { aspect-ratio: 4 / 5; }
.gallery__grid figure { overflow: hidden; border-radius: var(--radius); }
@media (prefers-reduced-motion: no-preference) {
  .gallery__grid figure:hover img { transform: scale(1.04); }
}

.gallery__note { margin-top: 24px; font-size: .95rem; color: var(--ink-soft); }
.gallery__note a { color: var(--tomato); font-weight: 700; }

/* ---------------------------------------------------------- Bewertungen -- */

/* Dunkles Band zwischen heller Galerie und rosa Kontaktblock. Zwei Reihen
   laufen beim Scrollen gegeneinander, das erzeugt Bewegung ohne Dauerschleife. */
.reviews {
  position: relative;
  z-index: 1;
  background: #1b1d22;
  color: #f4f4f2;
  padding: clamp(68px, 9vw, 110px) 0 clamp(56px, 7vw, 88px);
  overflow: hidden;
}

.reviews__head { margin-bottom: 38px; }
.reviews__score {
  margin: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 1rem; font-weight: 600;
  color: rgba(244, 244, 242, .72);
}
.reviews__stars { color: var(--tomato); letter-spacing: .1em; font-size: 1.05rem; }

.reviews__rails { display: grid; gap: 18px; }

.rail {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}
/* Ohne Scroll-Animation beginnt die zweite Reihe versetzt, damit die
   beiden Zeilen nicht deckungsgleich stehen. */
.rail--b { transform: translateX(-14%); }

.rev {
  flex: none;
  width: clamp(250px, 25vw, 330px);
  padding: 24px 24px 22px;
  border: 1px solid rgba(244, 244, 242, .14);
  border-radius: var(--radius);
  background: rgba(244, 244, 242, .045);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.rev:hover { border-color: rgba(244, 244, 242, .3); background: rgba(244, 244, 242, .08); }

.rev__q {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.012em;
}
.rev__n {
  margin: 0;
  font-size: .85rem;
  color: rgba(244, 244, 242, .55);
}

.reviews__foot { margin-top: 40px; }

/* -------------------------------------------------------------- Kontakt -- */

.contact { background: var(--rose); color: #fff; }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.contact__block { margin-bottom: 26px; }
.contact__k {
  font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 6px;
}
.contact__v { margin: 0; font-size: 1.1rem; font-weight: 600; }
.contact__v a { text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, .45); }
.contact__v a:hover { border-bottom-color: #fff; }

.hours { border-collapse: collapse; width: 100%; max-width: 360px; }
.hours th, .hours td {
  text-align: left; font-weight: 600;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: .95rem;
}
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { color: #fff; font-weight: 800; }
.hours tr:not(.is-today) th, .hours tr:not(.is-today) td { color: rgba(255, 255, 255, .78); }

.contact__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.contact__map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 48px -20px rgba(0, 0, 0, .55);
  background: var(--rose-deep);
}
.contact__map iframe {
  display: block; width: 100%; height: 100%;
  min-height: 460px; border: 0;
}

/* --------------------------------------------------------------- Footer -- */

.footer {
  background: #1b1d22;
  color: #f4f4f2; /* feste Werte: im Dark Mode kippen --ink und --paper */
  padding: 40px 0;
}
.footer__grid {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: center; justify-content: space-between;
}
.footer__brand { margin: 0; font-weight: 800; letter-spacing: -.02em; }
.footer__small { margin: 2px 0 0; font-size: .9rem; opacity: .66; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a {
  text-decoration: none; font-size: .9rem; font-weight: 600; opacity: .78;
  transition: opacity .18s var(--ease);
}
.footer__links a:hover { opacity: 1; }

@media (prefers-color-scheme: dark) {
  .footer { background: #0d0d0f; }
}

/* ------------------------------------------------------- Scroll-Reveal -- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ------------------------------------------- Scrollgesteuerte Animation --

   Native CSS-Scroll-Timelines, kein Scroll-Listener und keine Library.
   Browser ohne Unterstützung (derzeit Safari, Firefox) sehen die Seite
   vollständig, nur ohne Zoomfahrt. Das ist der gewollte Fallback.
   -------------------------------------------------------------------- */

/* Die Bildkarte blendet auf und läuft horizontal wie vertikal nach innen zu. */
@keyframes heroCard {
  0%   { opacity: 0; clip-path: inset(0 2% 0 2% round 0); }
  26%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(10% 29% 16% 29% round 18px); }
}

/* Hintergrund zieht leicht nach, damit die Karte sich davon abhebt. */
@keyframes heroBg {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

/* Die beiden Wörter wachsen und fahren diagonal auseinander. */
@keyframes wordA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-15%, -7%, 0) scale(1.4); }
}
@keyframes wordB {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(15%, 7%, 0) scale(1.4); }
}

@keyframes heroExit {
  0%   { opacity: 1; transform: translateY(0); }
  40%  { opacity: 0; transform: translateY(-28px); }
  100% { opacity: 0; transform: translateY(-28px); }
}

/* Bewertungen: die beiden Reihen ziehen in entgegengesetzte Richtungen. */
@keyframes railLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-28%); }
}
@keyframes railRight {
  from { transform: translateX(-28%); }
  to   { transform: translateX(0); }
}

@keyframes sceneZoom {
  from { transform: scale(1.34); }
  to   { transform: scale(1); }
}

@keyframes sceneText {
  0%   { opacity: 0; transform: translateY(34px); }
  38%  { opacity: 1; transform: translateY(0); }
  82%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-26px); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 961px) {

    /* Hero: an der Seitenposition aufgehängt, nicht an einer View-Timeline.
       Eine View-Timeline läuft bei einem Element, das ganz oben im Dokument
       beginnt, bereits am Anfang auf ihrem Endwert. Genau 65vh, weil der Hero
       165vh hoch ist und die Bühne 100vh davon oben klebt: die Bewegung ist
       fertig, sobald die Bühne weiterscrollt. */
    .hero__bg img,
    .hero__card,
    .wordmark__a,
    .wordmark__b,
    .hero__lines {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 65vh;
    }

    .hero__bg img   { animation-name: heroBg; }
    .hero__card     { animation-name: heroCard; }
    .wordmark__a    { animation-name: wordA; }
    .wordmark__b    { animation-name: wordB; }
    .hero__lines    { animation-name: heroExit; }

    /* Bewertungen: Timeline auf der Sektion. Hier passt view(), weil der
       Abschnitt mitten im Dokument liegt und sauber durchs Bild wandert. */
    .reviews { view-timeline-name: --rev; view-timeline-axis: block; }

    .rail {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --rev;
      animation-range: cover 0% cover 100%;
    }
    .rail--a { animation-name: railLeft; }
    .rail--b { animation-name: railRight; }

    /* Szene: eigene View-Timeline, die Kinder beziehen sich darauf. */
    .scene { view-timeline-name: --scene; view-timeline-axis: block; }

    .scene__img {
      animation: sceneZoom linear both;
      animation-timeline: --scene;
      animation-range: contain 0% contain 100%;
    }
    .scene__inner {
      animation: sceneText linear both;
      animation-timeline: --scene;
      animation-range: contain 0% contain 100%;
    }
  }
}

/* ------------------------------------------------------------ Responsiv -- */

@media (max-width: 960px) {
  /* Ohne Scroll-Animation zeigt der Hero nur das Vollbild, die Karte entfällt. */
  .hero { height: auto; }
  .hero__stage { position: static; height: 100dvh; }
  .hero__card { display: none; }
  .hero__content { padding-top: 84px; }
  .wordmark { font-size: clamp(2.8rem, 13.5vw, 5.5rem); }

  .scene { height: auto; }
  .scene__sticky { position: static; height: 76vh; min-height: 440px; }
  .scene__img { transform: none; }

  .split__grid,
  .menu__grid,
  .contact__grid { grid-template-columns: 1fr; }

  /* Unterhalb der Animationsgrenze laufen die Reihen nicht von selbst.
     Damit nichts unerreichbar abgeschnitten ist, werden sie wischbar. */
  .reviews__rails { gap: 14px; }
  .rail {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: 20px;
    scrollbar-width: none;
    transform: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rev { scroll-snap-align: center; width: min(78vw, 310px); }

  .split__media { max-width: 420px; }
  .menu__aside { position: static; }
  .menu__photo { max-width: 420px; }

  .facts__grid { grid-template-columns: repeat(2, 1fr); }

  .contact__map iframe { min-height: 320px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .nav__inner { gap: 14px; }

  .nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 6px 20px 16px;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a::after { display: none; }

  .burger { display: flex; }
  .nav__right { margin-left: auto; }

  .points li { grid-template-columns: 1fr; gap: 4px; }

  .list li {
    grid-template-areas: "name price" "desc desc";
    row-gap: 3px;
  }
  .list__p { align-self: start; }

  .gallery__grid { grid-template-columns: 1fr; }
  .gallery__grid figure:not(.gallery__wide) img { aspect-ratio: 4 / 3; }

  .footer__grid { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .facts__grid { grid-template-columns: 1fr; gap: 16px; }
  .hero__cta .btn, .contact__cta .btn { flex: 1 1 auto; }
}