/* Via Veneto · Der Abend in Gängen
   Welt: Schwarzweißfilm, Rom 1960. Farbe gibt es nur, wo belichtet wurde
   (der Blitz des Besuchers) und ab dem Holzofen.
   Schrift und Farbe aus dem 21st.dev-Thema „Amber Retro" (serafimcloud):
   Instrument Serif + Manrope, Akzent #f97015. Das Orange ist zugleich das
   Orange des Via-Veneto-Logos. JetBrains Mono aus dem Thema ist nicht
   übernommen: auf dieser Seite gibt es nichts, was eine Monospace trägt. */

:root {
  --sc-canvas:     #0d0b09;
  --sc-surface:    #17130f;
  --sc-ink:        #f1ece4;
  --sc-ink-soft:   #b3a99c;
  --sc-accent:     #f97015;
  --sc-accent-ink: #140c06;
  --sc-font-display: "Instrument Serif", "Times New Roman", serif;
  --sc-font-text:    "Manrope", system-ui, sans-serif;

  --papier: #f4efe6;          /* der weiße Rand eines Pressefotos */
  --film:   #1c1814;          /* Filmträger des Streifens */
  --tinte:  #d9cfae;          /* Randbeschriftung, blasse Laborfarbe */
  --streifen: 78px;           /* Höhe des festen Filmstreifens */
  --sw: grayscale(1) contrast(1.12) brightness(0.96);
  --entwickeln: 620ms cubic-bezier(.22,1,.36,1);
}

html { background: var(--sc-canvas); }
body { background: var(--sc-canvas); color: var(--sc-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: fixed; left: 1rem; top: 1rem; z-index: 60;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: .6rem 1rem; font-weight: 700; text-decoration: none;
  transform: translateY(-160%); pointer-events: none;
}
.sprung:focus-visible { transform: none; pointer-events: auto; }

:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.sc-display { font-weight: 400; letter-spacing: -0.012em; line-height: 1.02; }
.gang-titel { font-style: italic; }

/* ---------- 1 · Vorspann ---------- */
/* Höhe eines Breitbild-Balkens (2,39:1 = Breite / 2,39, also halbe Resthöhe 50vh - 21vw). */
.vorspann { --balken: max(0px, 50vh - 21vw); background: var(--sc-canvas); overflow: hidden; }
.leinwand {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 100%;
  /* Breitbild 2,39:1, das mit dem Scrollen auf den ganzen Schirm wächst */
  --auf: clamp(0, calc(var(--sc-p, 0) * 1.9), 1);   /* ganz offen bei p ≈ 0,53 */
  clip-path: inset(calc((1 - var(--auf)) * var(--balken)) calc((1 - var(--auf)) * 6vw));
  transform: translateY(-50%);
}
.leinwand img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* Der Saal ist ein sehr helles Foto. Solange die Titelkarte steht, bleibt es
   gedimmt wie ein Film unter dem Vorspann; es hellt erst mit dem Aufziehen auf. */
.leinwand { --hell: clamp(0, calc((var(--sc-p, 0) - 0.34) * 4), 1); }
.leinwand img.sw { filter: grayscale(1) contrast(1.12) brightness(calc(0.3 + var(--hell) * 0.64)); transition: none; }
.lamellen { position: absolute; inset: 0; display: flex; pointer-events: none; }
.lamellen i {
  flex: 1; background: var(--sc-canvas); transform-origin: bottom;
  animation: lamelle 1000ms cubic-bezier(.76,0,.24,1) both;
}
.lamellen i:nth-child(1) { animation-delay: 500ms; }
.lamellen i:nth-child(2) { animation-delay: 600ms; }
.lamellen i:nth-child(3) { animation-delay: 700ms; }
.lamellen i:nth-child(4) { animation-delay: 800ms; }
.lamellen i:nth-child(5) { animation-delay: 900ms; }
.lamellen i:nth-child(6) { animation-delay: 1000ms; }
.lamellen i:nth-child(7) { animation-delay: 1100ms; }
@keyframes lamelle { from { transform: scaleY(1); } to { transform: scaleY(0); } }

.titel {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  padding-bottom: var(--streifen); pointer-events: none;
}
.titel > * { margin: 0; }
.titel__vor, .titel__nach {
  font: italic 400 var(--sc-t-lg)/1.2 var(--sc-font-display); color: var(--sc-ink);
  text-shadow: 0 1px 12px rgba(0,0,0,.85);
}
.titel__vor { transform: translateY(calc(-1 * var(--balken) - 1.4rem)); }
.titel__nach { transform: translateY(calc(var(--balken) - 3.2rem)); color: var(--sc-ink); font-size: var(--sc-t-base); }
.titel__name {
  font: 400 clamp(4rem, 2rem + 11vw, 12rem)/.9 var(--sc-font-display);
  letter-spacing: -0.035em; color: var(--papier);
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.untertitel .sc-lede { max-width: 30ch; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.2; }

/* ---------- 2 · Antipasti (Bahn) ---------- */
/* Breit: der Einstieg steht links auf eigenem Grund, die Abzüge beginnen rechts
   davon und ziehen beim Scrollen dahinter vorbei. Schmal: oben der Einstieg,
   darunter die Bahn. */
.bahn-buehne { --vorn: min(34rem, 40vw); display: flex; align-items: center; padding-bottom: var(--streifen); }
.bahn {
  display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 6rem);
  padding-inline: calc(var(--vorn) + 2 * var(--sc-gutter) + 2rem) 20vw; width: max-content;
}
.bahn__vorn {
  position: absolute; z-index: 2; left: 0; top: 0; bottom: var(--streifen);
  width: calc(var(--vorn) + 2 * var(--sc-gutter)); padding-inline: var(--sc-gutter);
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(90deg, var(--sc-canvas) calc(100% - 3rem), transparent);
}
.bahn__vorn > * + * { margin-top: 1.25rem; }
.abzug--gross { width: min(40rem, 70vw); flex: none; transform: rotate(-1.6deg); }
.abzug--schief { width: min(26rem, 56vw); flex: none; transform: rotate(2.2deg) translateY(-6vh); }
.abzug--tief { width: min(24rem, 52vw); flex: none; transform: rotate(-.8deg) translateY(8vh); }

.karte-kurz { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.karte-kurz li {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid rgba(241,236,228,.14);
}
.karte-kurz li > span:first-child { color: var(--sc-ink); }
.karte-kurz li > span:last-child { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.karte-kurz small { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); margin-top: .15rem; }

/* ---------- 3 · Primi ---------- */
.primi {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(2rem, 5vw, 6rem); padding: 5vh var(--sc-gutter) calc(var(--streifen) + 5vh);
}
.abzug--primi { transform: rotate(1.4deg); max-width: 34rem; justify-self: end; width: 100%; }
.primi__text { position: relative; min-height: 60vh; display: grid; align-content: center; }
.primi__text > * { grid-area: 1 / 1; }
.spruch { margin: 0; }
.spruch .sc-display { font-style: italic; max-width: 14ch; }
.primi__nach > * + * { margin-top: 1.4rem; }
.primi__nach .sc-lede { max-width: 32ch; }

/* ---------- 4 · Schwelle ---------- */
.schwelle {
  position: relative; min-height: 46vh; display: grid; place-items: center;
  background: #080706; overflow: hidden;
}
.glut {
  position: absolute; left: 50%; bottom: -16vh; width: 70vmin; height: 40vmin;
  translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(249,112,21,.34), rgba(249,112,21,.08) 60%, transparent);
  animation: glut 3.6s ease-in-out infinite alternate;
}
@keyframes glut { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
.schwelle__satz {
  position: relative; margin: 0;
  font: italic 400 var(--sc-t-2xl)/1.1 var(--sc-font-display); color: var(--sc-ink);
}

/* ---------- 5 · Il forno (Peak) ---------- */
.forno { overflow: hidden; background: #080706; }
.ofen {
  /* Die Ofenöffnung liegt im Foto bei 50 % / 66 %. Mit `cover` bleibt sie auf
     jedem Seitenverhältnis dort (quer: 66–67 %, hoch: genau), also sitzt die
     Maske in Elementkoordinaten richtig genug. */
  position: absolute; inset: 0;
  --brand: clamp(0, calc((var(--sc-p, 0) - 0.06) * 1.9), 1);   /* Feuer ab p 0,06, ganzer Schirm bei p ≈ 0,58 */
}
.ofen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ofen__sw { filter: var(--sw) brightness(.8); }
.ofen__farbe {
  -webkit-mask-image: radial-gradient(circle at 50% 66%, #000 calc(var(--brand) * 95%), transparent calc(var(--brand) * 95% + 14%));
          mask-image: radial-gradient(circle at 50% 66%, #000 calc(var(--brand) * 95%), transparent calc(var(--brand) * 95% + 14%));
  filter: saturate(1.15) contrast(1.04);
}
.forno__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.8) 30%, transparent 46%),
    linear-gradient(0deg, rgba(8,7,6,.7), transparent 30%);
}
.forno__titel {
  position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -60%;
  max-width: 9ch; margin: 0; color: var(--papier); font-style: italic;
}
.forno__karte {
  position: absolute; inset: 0; pointer-events: none;
}
.forno__karte .karte-kurz {
  position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -50%;
  width: min(24rem, 34vw); pointer-events: auto;
}
/* Die Pizza kommt direkt aus der Ofenöffnung (Feuer bei 50 % / 66 % des Bildes). */
.pizza {
  position: absolute; left: 50%; top: 58%; translate: -50% -50%;
  margin: 0; width: clamp(12rem, 26vw, 24rem); aspect-ratio: 1;
  clip-path: circle(46.5% at 50% 50%);
}
.pizza img { width: 100%; height: 100%; object-fit: cover; object-position: 51.3% 49.3%; }
.karte-kurz--hell li { border-color: rgba(241,236,228,.22); }

/* ---------- 6 · Secondi ---------- */
.secondi__raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 7rem); align-items: center;
}
.abzug--secondi { transform: rotate(-1.2deg); }
.hinweis { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 40ch; }

/* ---------- 7 · Dolci ---------- */
.dolci {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center;
  gap: clamp(2rem, 6vw, 7rem); padding: 5vh var(--sc-gutter) calc(var(--streifen) + 5vh);
  background: radial-gradient(ellipse at 30% 50%, #1d1712, var(--sc-canvas) 70%);
}
.abzug--dolci { transform: rotate(-2deg); max-width: 32rem; justify-self: end; width: 100%; order: 2; }
.dolci__text .gang-titel { margin: 0 0 clamp(1.5rem, 4vh, 3rem); }
.dolci__zeilen { position: relative; display: grid; align-items: start; min-height: 9rem; }
.dolci__zeilen .sc-lede { grid-area: 1 / 1; max-width: 26ch; margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.2; }
.preis { display: block; margin-top: .5rem; font: 500 var(--sc-t-base)/1 var(--sc-font-text); color: var(--sc-accent); }

/* ---------- 8 · Il locale ---------- */
.locale__raster {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.locale__bilder { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.lb { margin: 0; overflow: hidden; border-radius: 2px; }
.lb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb--saal { grid-column: 1 / 5; aspect-ratio: 4 / 3; }
.lb--terrasse { grid-column: 3 / 7; aspect-ratio: 16 / 9; margin-top: -18%; box-shadow: 0 0 0 10px var(--sc-canvas); }
.lb--fassade { grid-column: 1 / 5; aspect-ratio: 21 / 9; }
.auskunft { margin: .8rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
.auskunft dt {
  font: italic 400 var(--sc-t-lg)/1 var(--sc-font-display); color: var(--sc-accent); margin-bottom: .45rem;
}
.auskunft dd { margin: 0; color: var(--sc-ink); line-height: 1.5; }
.auskunft a, .leiselink, .fine a:not(.knopf), .fuss a, .critica__hinweis a { color: inherit; text-decoration-color: rgba(249,112,21,.7); text-underline-offset: .2em; }
.auskunft a:hover, .leiselink:hover, .critica__hinweis a:hover { color: var(--sc-accent); }

/* Der Palazzo aus dem Logo steht hinter der Terrasse, wie auf der Bestandsseite:
   rechts neben dem Saal ragt er auf, den Sockel verdeckt das Terrassenfoto. */
.locale__bilder .lb { position: relative; z-index: 1; }
.palazzo {
  grid-column: 5 / 7; grid-row: 1; align-self: end; justify-self: end;   /* bündig mit der Terrasse, links darf er hinter den Saal */
  width: 118%; max-width: none; height: auto; margin-bottom: -4%;
  position: relative; z-index: 0; pointer-events: none;
}

/* ---------- 7b · Il film ---------- */
.film__raster {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.film__nachweis { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.leinwand-film { margin: 0; }
.leinwand-film__rahmen {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  /* Leinwand im dunklen Saal: ein warmer Lichtschein um das Bild */
  box-shadow: 0 0 0 1px rgba(241,236,228,.08), 0 30px 90px -24px rgba(249,112,21,.22);
}
.leinwand-film__video {
  display: block; width: 100%; height: 100%; object-fit: cover; background: #000;
  filter: var(--sw); transition: filter 1400ms ease-out;
}
.laeuft .leinwand-film__video { filter: none; }
.leinwand-film__start {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem;
  border: 0; padding: 0; cursor: pointer; color: var(--papier);
  background: radial-gradient(ellipse at center, rgba(8,7,6,.15), rgba(8,7,6,.62));
  font: italic 400 var(--sc-t-2xl)/1 var(--sc-font-display);
  text-shadow: 0 2px 18px rgba(0,0,0,.7);
}
.leinwand-film__start[hidden] { display: none; }
.start__kreis {
  position: relative; width: 78px; height: 78px; border-radius: 50%;
  background: var(--sc-accent); transition: transform 160ms ease-out;
}
.start__kreis::after {
  content: ""; position: absolute; left: 55%; top: 50%; translate: -50% -50%;
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--sc-accent-ink);
}
.leinwand-film__start:hover .start__kreis { transform: scale(1.06); }

/* ---------- 8b · La critica ---------- */
/* Stimmen von Google als Zeitungsausschnitte: dasselbe Papier wie der Rand der
   Pressefotos. `rotate` statt `transform`, weil das Einblenden transform setzt. */
.critica__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2.5rem; margin-bottom: clamp(2rem, 6vh, 4rem);
}
.critica__kopf .gang-titel { margin: 0; }
.critica__note { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.critica__zahl { font: 400 clamp(3rem, 2rem + 3vw, 4.5rem)/1 var(--sc-font-display); color: var(--papier); }
.critica__quelle { color: var(--sc-ink-soft); }
.sterne {
  --anteil: 100%;
  font-size: 1.3rem; line-height: 1; white-space: nowrap;
  background: linear-gradient(90deg, var(--sc-accent) var(--anteil), rgba(241,236,228,.22) var(--anteil));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sterne--50 { --anteil: 100%; }
.sterne--44 { --anteil: 88%; }
.sterne--40 { --anteil: 80%; }
.ausschnitte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start;
}
.ausschnitt {
  background: var(--papier); color: #1d1813;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  box-shadow: 0 22px 44px -22px rgba(0,0,0,.8);
}
.ausschnitt:nth-child(1) { rotate: -1.2deg; }
.ausschnitt:nth-child(2) { rotate: .9deg; translate: 0 1.6rem; }
.ausschnitt:nth-child(3) { rotate: -.5deg; }
.ausschnitt blockquote { margin: 0; }
.ausschnitt blockquote p {
  margin: 0; font: italic 400 var(--sc-t-lg)/1.3 var(--sc-font-display);
}
.ausschnitt__von {
  margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem;
  font-size: var(--sc-t-sm); color: #5b5046;
}
.ausschnitt .sterne { font-size: 1rem; background-image: linear-gradient(90deg, #d45a0a var(--anteil), rgba(29,24,19,.18) var(--anteil)); }
.critica__hinweis { margin: clamp(2.5rem, 6vh, 4rem) 0 0; max-width: 62ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* ---------- 9 · Fine ---------- */
.fine {
  display: grid; background: var(--sc-canvas); overflow: hidden;
}
/* „Fine" ist die Endkarte eines italienischen Films. Als Wasserzeichen ist sie
   Dekoration, darum Pseudo-Inhalt ohne Textknoten und ohne Vorlesetext. */
.fine::before {
  content: "Fine" / "";
  position: absolute; left: 50%; top: 42%; translate: -50% -50%; margin: 0;
  font: italic 400 clamp(8rem, 30vw, 26rem)/1 var(--sc-font-display);
  color: #1d1914; letter-spacing: -0.04em; pointer-events: none; user-select: none;
}
.fine__inhalt {
  position: relative; align-self: center; justify-self: center; text-align: center;
  width: min(64rem, 100% - 2 * var(--sc-gutter)); display: grid; justify-items: center; gap: clamp(1.2rem, 3vh, 2rem);
}
.fine__inhalt h2 { margin: 0; font-style: italic; }
.abend {
  list-style: none; margin: 0; padding: 18px 14px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%;
  background:
    radial-gradient(circle, var(--sc-canvas) 4px, transparent 4.5px) 0 5px / 24px 14px repeat-x,
    radial-gradient(circle, var(--sc-canvas) 4px, transparent 4.5px) 0 calc(100% - 5px) / 24px 14px repeat-x,
    var(--film);
  border-radius: 3px;
}
.abend a {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px;
  background: #0f0d0b; box-shadow: inset 0 0 0 1px #3a332b; text-decoration: none;
}
.abend__name {
  position: absolute; inset: auto 0 0 0; padding: .3rem .5rem;
  font: italic 400 var(--sc-t-base)/1.1 var(--sc-font-display); color: var(--tinte); text-align: left;
  background: linear-gradient(0deg, rgba(10,8,6,.85), transparent);
}
.fine__zeile { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); }
.fine__zahl { color: var(--sc-ink); }
.fine__handlung { display: grid; justify-items: center; gap: .8rem; }
.fine__handlung p { margin: 0; color: var(--sc-ink-soft); }
.fuss {
  position: relative; padding: 1.2rem var(--sc-gutter) calc(1.2rem + env(safe-area-inset-bottom));
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-align: center;
  border-top: 1px solid rgba(241,236,228,.1);
}
.fuss p { margin: .2rem 0; }
.fuss__entwurf { opacity: .85; }

/* ---------- schmal ---------- */
@media (max-width: 860px) {
  :root { --streifen: 72px; }
  .streifen { gap: .6rem; padding-inline: .6rem; }
  .streifen__rand { left: .6rem; }
  .streifen__rahmen a { width: 60px; height: 42px; }
  /* Schmal läuft der Untertitel über die ganze Breite: Band statt Ecke. */
  .akt-vorspann .sc-scrim {
    background: linear-gradient(0deg, rgba(13,11,9,.94) 0%, rgba(13,11,9,.86) 32%, rgba(13,11,9,0) 58%);
  }
  .streifen__rahmen {
    padding-top: 17px;
    /* Der Streifen läuft unter dem Knopf weiter: weich auslaufen statt hart schneiden. */
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
            mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .untertitel .sc-lede { text-shadow: 0 1px 14px rgba(0,0,0,.9); }
  .rahmen__name { font-size: 10.5px; }
  .streifen__knopf { padding-inline: .8rem; min-height: 44px; }
  .bahn-buehne { flex-direction: column; align-items: stretch; justify-content: center; gap: 1.5rem; }
  .bahn__vorn { position: static; width: auto; background: none; justify-content: flex-start; }
  .bahn__vorn .karte-kurz li:nth-child(n+4) { display: none; }
  .bahn { padding-inline: var(--sc-gutter) 20vw; }
  .titel__name { font-size: clamp(3.4rem, 17vw, 6rem); }
  .titel__vor { transform: translateY(-5.5rem); }
  .titel__nach { transform: translateY(1.2rem); max-width: 22ch; justify-self: center; }
  .untertitel .sc-lede { font-size: var(--sc-t-lg); }
  .abzug--gross { width: 78vw; }
  .abzug--schief, .abzug--tief { width: 62vw; transform: none; }
  .primi, .dolci { grid-template-columns: 1fr; align-content: center; gap: 1.5rem; }
  .abzug--primi, .abzug--dolci { max-width: 17rem; justify-self: start; order: 0; }
  .primi__text, .dolci__zeilen { min-height: 38vh; }
  .spruch .sc-display { font-size: var(--sc-t-2xl); }
  .forno__scrim { background: linear-gradient(0deg, rgba(8,7,6,.94) 0%, rgba(8,7,6,.7) 55%, rgba(8,7,6,.25) 100%); }
  .forno__titel { top: auto; bottom: calc(var(--streifen) + 3rem); translate: none; }
  .forno__karte .karte-kurz { top: auto; bottom: calc(var(--streifen) + 1.2rem); translate: none; right: var(--sc-gutter); width: auto; }
  .forno__karte .karte-kurz li { padding: .4rem 0; }
  .pizza { width: 10rem; top: 30%; }
  .secondi__raster, .locale__raster, .film__raster { grid-template-columns: 1fr; }
  .ausschnitte { grid-template-columns: 1fr; gap: 1.4rem; }
  .ausschnitt:nth-child(n) { rotate: none; translate: none; }
  .ausschnitt:nth-child(odd) { rotate: -.6deg; }
  .ausschnitt:nth-child(even) { rotate: .5deg; }
  .start__kreis { width: 64px; height: 64px; }
  .auskunft { grid-template-columns: 1fr; }
  .abend { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 16px 8px; }
  .abend__name { font-size: 11px; padding: .2rem .3rem; }
}

/* ---------- niedrig (Telefon quer) ----------
   Unter 500 px Höhe passen Bild, Satz und Liste nicht mehr übereinander: der
   Streifen wird schmaler, Bildunterschriften fallen weg, Bilder werden kleiner. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --streifen: 58px; }
  .streifen__rahmen a { height: 34px; width: 50px; }
  .streifen__rahmen { padding-top: 14px; }
  .abzug figcaption { display: none; }
  .titel__vor { transform: translateY(-3.6rem); }
  .titel__nach { transform: translateY(.6rem); }
  .titel__name { font-size: clamp(2.8rem, 9vw, 4.5rem); }
  .primi, .dolci { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding-block: 1rem calc(var(--streifen) + .5rem); gap: 1.5rem; }
  .abzug--primi, .abzug--dolci { max-width: 13rem; }
  .primi__text, .dolci__zeilen { min-height: 0; }
  .spruch .sc-display { font-size: var(--sc-t-xl); }
  .primi__nach .sc-lede, .dolci__zeilen .sc-lede { font-size: var(--sc-t-base); }
  .primi__nach .karte-kurz li { padding: .2rem 0; }
  .dolci__text .gang-titel { margin-bottom: .6rem; font-size: var(--sc-t-xl); }
  /* justify-content zurück auf Anfang: die Schmal-Regel zentriert, und die 1570 px
     breite Bahn stand dann 418 px links aus dem Bild, der Carpaccio hinter dem Text. */
  .bahn-buehne { --vorn: 28vw; flex-direction: row; align-items: center; justify-content: flex-start; }
  .bahn__vorn { position: absolute; width: calc(var(--vorn) + 2 * var(--sc-gutter)); background: linear-gradient(90deg, var(--sc-canvas) calc(100% - 2rem), transparent); }
  .bahn__vorn .gang-titel { font-size: var(--sc-t-xl); }
  .bahn__vorn .sc-body { font-size: var(--sc-t-sm); }
  .bahn__vorn .karte-kurz { display: none; }
  .bahn { padding-inline: calc(var(--vorn) + 2 * var(--sc-gutter) + 12rem) 20vw; }
  .abzug--gross { width: 22rem; }
  .abzug--schief, .abzug--tief { width: 16rem; }
  .fine__inhalt { gap: .5rem; }
  .fine__inhalt h2 { font-size: var(--sc-t-xl); }
  .abend { padding: 12px 8px; max-width: 32rem; }
  .knopf--gross { min-height: 44px; padding-block: .6rem; }
  /* Quer ist Platz nebeneinander: Film und Ort wieder zweispaltig, sonst liegt
     die Leinwand unter dem Rand und der Saal füllt den ganzen Schirm. */
  .film__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.5rem; }
  .film__text .gang-titel, .locale__text .gang-titel, .critica .gang-titel { font-size: var(--sc-t-xl); }
  .locale__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
  .ausschnitte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .ausschnitt { padding: 1rem; }
  .ausschnitt blockquote p { font-size: var(--sc-t-base); }
  .critica__kopf { margin-bottom: 1.5rem; }
}

/* Mit dem Finger: Links, die allein auf einer Zeile stehen (Route, Telefon,
   E-Mail, Speisekarte, alle Bewertungen), bekommen eine Fläche von gut 44 px. */
@media (pointer: coarse) {
  .auskunft a, .leiselink, .critica__hinweis a { display: inline-block; padding-block: .6rem; }
}

/* Tastaturfokus nie unter dem festen Streifen. */
main a, main button { scroll-margin-block-end: calc(var(--streifen) + 1rem); }

/* Vor dem Mount haben gepinnte Bühnen keine Höhe; dann läge jedes Bild „im
   Bild" und `loading="lazy"` lüde alles sofort. */
[data-sc-stage] { min-height: 100svh; }

@media (prefers-reduced-motion: reduce) {
  .korn { animation: none; }
  .glut { animation: none; }
  .lamellen { display: none; }
  .blitz { display: none; }
  .streifen { transition: none; }
  .rahmen__bild img, .abend__bild img { transition: none; transform: none; }
  .leinwand-film__video, .start__kreis { transition: none; }
}