/* Enoteca 1918 · „Pieza a pieza“ · Stand 07.11.2026
   Regeln: kein scroll-behavior:smooth (ScrollTrigger), ein Mechanismus je Eigenschaft,
   Hover nur in @media (hover:hover), Bodoni am Handy mit opsz 11 / wght 500. */

@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/bodoni-moda-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/bodoni-moda-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(../fonts/bodoni-moda-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(../fonts/bodoni-moda-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --crema: #F6F1EA;
  --pietra: #ECDDD3;
  --porcellana: #F0F1F2;     /* Hintergrund der Aufbau-Filme */
  --rosso: #7E1527;
  --rosso-tief: #5E0E1C;
  --corallo: #E2533A;
  --nero: #13100E;
  --nero-2: #1F1916;
  --ambra: #E7A54A;
  --oliva: #4F5A2F;
  --tinte: #241C18;
  --tinte-2: #5A4C45;
  --hell-2: #CFC3B8;
  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --rand: clamp(16px, 4.2vw, 64px);
  --kopf-h: 68px;
  --fuehrung: 1.55;
  --vh: 1svh;
  /* große Viewport-Höhe für vollflächige Bühnen (iOS: Leiste eingeklappt) und der Unterschied zur kleinen */
  --lvh: 1lvh;
  --leiste: calc(100 * var(--lvh) - 100 * var(--vh));
}
@supports not (height: 1lvh) { :root { --lvh: 1vh; --leiste: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--crema); overflow-x: clip; }
body { margin: 0; background: var(--crema); color: var(--tinte); font: 400 17px/var(--fuehrung) var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--nero); color: var(--crema); border-radius: 8px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--corallo); outline-offset: 3px; }

/* ---------- Typo-Bausteine ---------- */
.kicker { font: 500 13px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--rosso); }
.titel { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 7.2vw, 120px); line-height: .98; letter-spacing: -.02em;
  font-optical-sizing: auto; margin-top: .18em; }
.titel em, .hero__claim { font-style: italic; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 26px;
  border-radius: 999px; background: var(--rosso); color: var(--crema); text-decoration: none;
  font: 500 15px/1 var(--sans); letter-spacing: .06em; border: 1.5px solid var(--rosso); transition: background-color .25s, color .25s, border-color .25s; }
.knopf--klein { min-height: 40px; padding: 0 18px; font-size: 14px; }
.knopf--hohl { background: transparent; color: var(--rosso); }
.knopf--ambra { background: var(--ambra); border-color: var(--ambra); color: var(--nero); }
@media (hover: hover) {
  .knopf:hover { background: var(--rosso-tief); border-color: var(--rosso-tief); }
  .knopf--hohl:hover { background: var(--rosso); color: var(--crema); }
  .knopf--ambra:hover { background: #F2BD6B; border-color: #F2BD6B; }
}

/* ---------- Logo (PNG als Maske, färbbar) ---------- */
.logo { display: block; width: 132px; height: 40px; background: currentColor;
  -webkit-mask: url(../bilder/logo-enoteca.png) left center / contain no-repeat; mask: url(../bilder/logo-enoteca.png) left center / contain no-repeat; }
.logo-club { display: block; width: min(260px, 70%); aspect-ratio: 615 / 512; background: url(../bilder/logo-club.png) left center / contain no-repeat; }

/* ---------- Kopfleiste ---------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--kopf-h); padding: 0 var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--tinte);
  transition: background-color .35s, color .35s, box-shadow .35s; }
.kopf.ist-unterwegs { background: rgba(246, 241, 234, .94); box-shadow: 0 1px 0 rgba(36, 28, 24, .08); }
.kopf.ist-nacht { color: var(--crema); }
.kopf.ist-nacht.ist-unterwegs { background: rgba(19, 16, 14, .92); box-shadow: 0 1px 0 rgba(246, 241, 234, .08); }
.kopf.ist-nacht .knopf--klein { background: var(--ambra); border-color: var(--ambra); color: var(--nero); }
.kopf__logo { color: inherit; display: block; }
.kopf__nav { display: flex; gap: clamp(18px, 2.4vw, 40px); }
.kopf__nav a { text-decoration: none; font: 500 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 10px 0; }
.kopf__rechts { display: flex; align-items: center; gap: 18px; }
.sprachen { display: flex; gap: 2px; font: 500 13px/1 var(--sans); letter-spacing: .12em; }
.sprachen a, .sprachen span { padding: 8px 6px; text-decoration: none; opacity: .55; }
.sprachen [aria-current] { opacity: 1; }
@media (hover: hover) { .kopf__nav a:hover, .sprachen a:hover { opacity: 1; color: var(--corallo); } }
.kopf__menue { display: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; padding: 10px; cursor: pointer; }
.kopf__menue span { display: block; height: 1.5px; background: currentColor; margin: 7px 0; transition: transform .3s; }
.kopf__menue[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.kopf__menue[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.menue { position: fixed; inset: 0; z-index: 45; background: var(--crema); padding: calc(var(--kopf-h) + 32px) var(--rand) 40px;
  display: flex; flex-direction: column; justify-content: space-between; }
.menue__nav { display: flex; flex-direction: column; gap: 6px; }
.menue__nav a { font: 500 44px/1.15 var(--serif); text-decoration: none; }
.sprachen--menue { font-size: 16px; }

/* ---------- 1 · Hero ---------- */
.hero { position: relative; height: calc(300 * var(--vh)); }
.hero__buehne { position: sticky; top: 0; height: calc(100 * var(--lvh)); overflow: hidden; background: var(--crema); }
.hero__film { position: absolute; inset: 0; z-index: 1; clip-path: circle(var(--r, 24vmin) at var(--x, 50%) var(--y, 50%)); }
.hero__medium { position: absolute; left: 50%; top: 50%; width: 100vmax; height: 100vmax; margin: -50vmax 0 0 -50vmax; }
.hero__medium img, .hero__medium video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
.hero__medium video { opacity: 0; transition: opacity .6s; }
.hero__medium.spielt video { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero__medium img, .hero__medium video { animation: teller 140s linear infinite; }
}
@keyframes teller { from { transform: scale(1.3) rotate(0deg); } to { transform: scale(1.3) rotate(360deg); } }
.hero__inhalt { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--kopf-h) + 2vh) var(--rand) calc(8vh + var(--leiste)); text-align: center; pointer-events: none; }
.hero__inhalt a { pointer-events: auto; }
.hero__kicker { margin-bottom: 2.2vh; }
.hero__wort { --o: min(50 * var(--vh), 33vw); display: flex; align-items: center; justify-content: center; gap: .08em;
  font: 500 calc((100vw - 2 * var(--rand) - var(--o)) / 5.4) / .8 var(--serif); letter-spacing: -.01em; color: var(--rosso);
  margin: 0; white-space: nowrap; }
.hero__o { flex: 0 0 auto; width: var(--o); height: var(--o); border-radius: 50%; }
.hero__teil { display: inline-block; position: relative; }
.hero__jahr { position: absolute; right: -.82em; top: 50%; transform: translateY(-50%) rotate(90deg); font: 500 .17em/1 var(--sans);
  letter-spacing: .32em; color: var(--tinte); }
.hero__claim { font: italic 500 clamp(26px, 3.1vw, 52px)/1.1 var(--serif); margin-top: 3.4vh; color: var(--tinte); }
.hero__sub { max-width: 38em; margin-top: 1.4vh; color: var(--tinte-2); font-size: clamp(15px, 1.1vw, 18px); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 3vh; }
.hero__hinweis { position: absolute; z-index: 2; left: 50%; bottom: calc(22px + var(--leiste)); transform: translateX(-50%); font: 500 12px/1 var(--sans);
  letter-spacing: .3em; text-transform: uppercase; color: var(--tinte-2); }

/* ---------- 2 · Geschichte ---------- */
.hist { position: relative; z-index: 3; margin-top: calc(-100 * var(--vh)); background: var(--crema); border-radius: 36px 36px 0 0;
  box-shadow: 0 -30px 60px rgba(19, 16, 14, .18); overflow-x: clip; }
.hist__kopf { max-width: 1400px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) var(--rand) clamp(40px, 7vh, 80px); }
/* Vollflächige Reise: dieselbe Küste wird von 1918 bis heute zu Palma */
.hist__reise { position: relative; height: calc(380 * var(--vh)); }
.hist__buehne { position: sticky; top: 0; height: calc(100 * var(--lvh)); overflow: hidden; background: #2A241F; color: var(--crema); }
.hist__ruhe, .hist__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hist__canvas { opacity: 0; transition: opacity .5s; }
.hist__reise.hat-film .hist__canvas { opacity: 1; }
.hist__schleier { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(19, 16, 14, .9) 0%, rgba(19, 16, 14, .5) 36%, rgba(19, 16, 14, 0) 62%),
              linear-gradient(to right, rgba(19, 16, 14, .3), rgba(19, 16, 14, 0) 45%),
              linear-gradient(to left, rgba(19, 16, 14, .35), rgba(19, 16, 14, 0) 40%); }
/* Drei Jahreszahlen übereinander: im Morph fliegt die alte an der Kamera vorbei, die neue kommt aus der Tiefe (Scroll-Zeitleiste) */
.hist__jahr { position: absolute; left: var(--rand); bottom: calc(clamp(20px, 5vh, 64px) + var(--leiste)); display: grid; pointer-events: none;
  font: 500 clamp(110px, 17vw, 330px)/1 var(--serif); letter-spacing: -.035em; color: var(--crema); text-shadow: 0 2px 40px rgba(19, 16, 14, .35); }
.hist__jz { grid-area: 1 / 1; display: block; line-height: 1; transform-origin: 32% 58%; }
.js-szene .hist__jz + .hist__jz { opacity: 0; }
.hist__canvas { transform-origin: 50% 46%; }
.hist__schritte { position: absolute; right: var(--rand); bottom: calc(clamp(40px, 10vh, 120px) + var(--leiste)); width: min(32em, 38vw); min-height: 12em; }
.hist__schritt { transition: opacity .6s, transform .6s; }
.js-szene .hist__schritt { position: absolute; inset: auto 0 0 0; opacity: 0; transform: translateY(16px); }
.js-szene .hist__schritt.ist-aktiv { opacity: 1; transform: none; }
.hist__marke { font: 500 13px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--hell-2); }
.hist__j { color: var(--ambra); margin-right: .6em; }
.hist__text { font: 400 clamp(20px, 1.6vw, 27px)/1.45 var(--serif); margin-top: .7em; color: var(--crema); }
.hist__heute { max-width: 1400px; margin: 0 auto; padding: clamp(80px, 13vh, 150px) var(--rand) clamp(80px, 14vh, 160px);
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; align-items: center; }
.hist__heute .hist__marke { color: var(--tinte-2); }
.hist__heute .hist__j { color: var(--rosso); }
.hist__bild { max-width: 460px; aspect-ratio: 4 / 5; }
.hist__zitat { margin-top: 24px; }
.hist__zitat p { font: italic 500 clamp(34px, 4.2vw, 70px)/1.08 var(--serif); color: var(--rosso); letter-spacing: -.01em; }
.hist__zitat footer { margin-top: 14px; display: flex; flex-direction: column; font-size: 15px; color: var(--tinte-2); }
.hist__zitat strong { color: var(--tinte); font-weight: 500; }

/* Bogen (Fenster eines Ortes) */
.bogen { border-radius: 999px 999px 18px 18px; overflow: hidden; background: var(--pietra); }
.bogen img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 3 · Pieza a pieza ---------- */
.carta { background: var(--porcellana); position: relative; z-index: 3; }
.carta__kopf { max-width: 1400px; margin: 0 auto; padding: clamp(90px, 14vh, 170px) var(--rand) 4vh; }
.carta__intro { max-width: 36em; margin-top: 24px; font: 400 clamp(19px, 1.5vw, 24px)/1.5 var(--serif); color: var(--tinte-2); }
.gericht { position: relative; height: calc(270 * var(--vh)); overflow-x: clip; }
.gericht__buehne { position: sticky; top: 0; height: calc(100 * var(--vh)); max-width: 1560px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 3vw; padding: calc(var(--kopf-h) + 1vh) var(--rand) 3vh; }
.gericht--rechts .gericht__buehne { grid-template-columns: .7fr 1.3fr; }
.gericht--rechts .gericht__bild { order: 2; }
/* Riesiges Wort hinter dem Teller (Umriss, nur Kulisse) */
.gericht__riese { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; user-select: none;
  font: 500 clamp(120px, 21vw, 400px)/.8 var(--serif); letter-spacing: -.045em; white-space: nowrap;
  color: rgba(126, 21, 39, .075); justify-items: start; padding-left: 1vw; }
.gericht--rechts .gericht__riese { justify-items: end; padding: 0 1vw 0 0; }
.gericht__bild, .gericht__text { position: relative; z-index: 1; }
.gericht__bild { position: relative; width: min(92 * var(--vh), 100%); aspect-ratio: 1; justify-self: center;
  -webkit-mask: radial-gradient(closest-side, #000 74%, transparent 100%); mask: radial-gradient(closest-side, #000 74%, transparent 100%); }
.gericht__ruhe, .gericht__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gericht__canvas { opacity: 0; transition: opacity .4s; }
.gericht.hat-film .gericht__canvas { opacity: 1; }
.gericht__note { font: 500 12px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--corallo); }
.gericht__name { font: 500 clamp(40px, 5vw, 84px)/1 var(--serif); letter-spacing: -.015em; margin-top: 14px; color: var(--tinte); }
.gericht__desc { font: italic 400 clamp(19px, 1.6vw, 26px)/1.35 var(--serif); color: var(--tinte-2); margin-top: 10px; }
.gericht__teile { margin-top: clamp(22px, 4vh, 40px); display: flex; flex-direction: column; gap: 2px; }
.gericht__teile li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid rgba(36, 28, 24, .12);
  font: 400 clamp(16px, 1.2vw, 19px)/1.35 var(--sans); color: var(--tinte); opacity: .3; transform: translateX(-6px);
  transition: opacity .45s, transform .45s; }
.gericht__teile li::before { content: ''; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; border: 1.5px solid var(--rosso); transition: background-color .45s; }
.gericht__teile li.ist-da { opacity: 1; transform: none; }
.gericht__teile li.ist-da::before { background: var(--rosso); }
.carta__mehr { text-align: center; padding: 4vh var(--rand) clamp(90px, 14vh, 160px); }

/* ---------- 4 · Fuoco: Wort → Feuer → Tomahawk ---------- */
.brasa { position: relative; background: var(--nero); color: var(--crema); }
.brasa .kicker { color: var(--ambra); }
.brasa .titel { color: var(--crema); }
.brasa__tor { position: relative; height: calc(270 * var(--vh)); }
.brasa__buehne { position: sticky; top: 0; height: calc(100 * var(--lvh)); overflow: hidden; background: var(--nero); }
.brasa__feuer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
/* Fläche mit dem Wort als Loch – nur mit Skript (sonst bliebe die Bühne schwarz) */
.brasa__maske { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.js-szene .brasa__maske { display: block; }
.brasa__nacht { fill: var(--nero); }
.brasa__buehne::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--schleier, 0);
  background: linear-gradient(to top, rgba(19, 16, 14, .9) 0%, rgba(19, 16, 14, .45) 40%, rgba(19, 16, 14, 0) 70%),
              linear-gradient(to right, rgba(19, 16, 14, .55), rgba(19, 16, 14, 0) 55%); }
.brasa__kopf { position: absolute; z-index: 2; left: var(--rand); bottom: calc(clamp(36px, 9vh, 110px) + var(--leiste)); max-width: min(46em, 74vw); }
.brasa__intro { margin-top: 18px; font: 400 clamp(19px, 1.5vw, 24px)/1.5 var(--serif); color: var(--hell-2); max-width: 32em; }
.brasa__hinweis { position: absolute; z-index: 2; left: 50%; bottom: calc(22px + var(--leiste)); transform: translateX(-50%); font: 500 12px/1 var(--sans);
  letter-spacing: .3em; text-transform: uppercase; color: var(--hell-2); }
.brasa__aufbau { position: relative; height: calc(260 * var(--vh)); }
.brasa__aufbau-buehne { position: sticky; top: 0; height: calc(100 * var(--vh)); max-width: 1560px; margin: 0 auto; display: grid;
  grid-template-columns: 1.25fr .75fr; gap: 4vw; align-items: center; padding: calc(var(--kopf-h) + 1vh) var(--rand) 3vh; }
.brasa__bild { position: relative; width: min(90 * var(--vh), 100%); aspect-ratio: 1; justify-self: center;
  -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%); mask: radial-gradient(closest-side, #000 72%, transparent 100%); }
.brasa__ruhe, .brasa__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brasa__canvas { opacity: 0; transition: opacity .4s; }
.brasa__aufbau.hat-film .brasa__canvas { opacity: 1; }
.brasa__karte .gericht__note { color: var(--ambra); }
.brasa__gerichte { margin-top: 16px; display: flex; flex-direction: column; }
.brasa__gerichte li { padding: clamp(12px, 2vh, 20px) 0; border-top: 1px solid rgba(246, 241, 234, .14); transition: opacity .5s, transform .5s; }
.js-szene .brasa__gerichte li { opacity: .22; transform: translateX(-8px); }
.js-szene .brasa__gerichte li.ist-da { opacity: 1; transform: none; }
.brasa__gerichte h3 { font: 500 clamp(28px, 2.9vw, 50px)/1.02 var(--serif); letter-spacing: -.012em; }
.brasa__gerichte p { margin-top: 6px; color: var(--hell-2); font-size: clamp(15px, 1.1vw, 18px); }
.brasa__finale { position: relative; height: calc(100 * var(--vh)); overflow: hidden; background: var(--nero); }
.brasa__finale-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brasa__finale::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(19, 16, 14, .8), rgba(19, 16, 14, 0) 50%); }
.brasa__finale-text { position: absolute; z-index: 1; left: var(--rand); right: var(--rand); bottom: clamp(28px, 7vh, 84px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; }
.brasa__finale-name { font: 500 clamp(76px, 13vw, 250px)/.85 var(--serif); letter-spacing: -.04em; color: var(--crema); }

/* ---------- 5 · Wein: Guss vollflächig ---------- */
.vino { position: relative; background: var(--nero); color: var(--crema); }
.vino .kicker { color: var(--ambra); }
.vino .titel { color: var(--crema); }
.vino__reise { position: relative; height: calc(240 * var(--vh)); }
.vino__buehne { position: sticky; top: 0; height: calc(100 * var(--lvh)); overflow: hidden; }
.vino__ruhe, .vino__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.vino__canvas { opacity: 0; transition: opacity .5s; }
.vino__reise.hat-film .vino__canvas { opacity: 1; }
.vino__schleier { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(10, 8, 7, .9) 0%, rgba(10, 8, 7, .6) 32%, rgba(10, 8, 7, 0) 58%); }
.vino__text { position: absolute; inset: 0 auto 0 var(--rand); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: min(34em, 44vw); padding-top: var(--kopf-h); }
.vino__text p:not(.kicker) { font: 400 clamp(19px, 1.5vw, 24px)/1.55 var(--serif); color: var(--hell-2); margin: 26px 0 30px; max-width: 30em; }

/* ---------- 5 · Club ---------- */
.club { background: var(--nero); color: var(--crema); position: relative; }
.club .kicker { color: var(--ambra); }
.club__strasse { height: calc(190 * var(--vh)); position: relative; }
.club__strasse-buehne { position: sticky; top: 0; height: calc(100 * var(--vh)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: var(--kopf-h) var(--rand) 4vh; overflow: hidden; }
.club__strasse .titel { color: var(--crema); }
.hausnummer { perspective: 900px; margin-bottom: 4vh; }
.hausnummer__dreh { position: relative; width: clamp(150px, 22vh, 230px); aspect-ratio: 4 / 5; transform-style: preserve-3d; }
.hausnummer__seite { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px 999px 14px 14px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; font: 500 clamp(110px, 16vh, 170px)/1 var(--serif); }
.hausnummer__seite--vorn { background: var(--crema); color: var(--rosso); box-shadow: inset 0 0 0 6px var(--pietra); }
.hausnummer__seite--hinten { background: var(--nero-2); color: var(--ambra); transform: rotateY(180deg); box-shadow: inset 0 0 0 6px rgba(231, 165, 74, .35); }
.club__inhalt { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center; max-width: 1400px; margin: 0 auto;
  padding: 4vh var(--rand) clamp(80px, 12vh, 140px); }
.club__bild { aspect-ratio: 4 / 5; background: var(--nero-2); }
.club__sub { font: italic 500 clamp(22px, 2vw, 32px)/1.2 var(--serif); color: var(--ambra); margin-top: 18px; }
.club__text > p:not(.club__sub) { color: var(--hell-2); font-size: clamp(17px, 1.2vw, 19px); margin-top: 18px; max-width: 32em; }
.club__h3 { font: 500 12px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--hell-2); margin-top: 34px; }
.club__cocktails { margin: 14px 0 32px; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.club__cocktails li { font: italic 500 clamp(22px, 2vw, 32px)/1.3 var(--serif); }
.club__bar { position: relative; height: calc(100 * var(--vh)); overflow: hidden; background: var(--nero); }
.club__bar-ruhe, .club__bar-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.club__bar-film { opacity: 0; transition: opacity .8s; }
.club__bar-film.spielt { opacity: 1; }
.club__bar::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(19, 16, 14, .88) 0%, rgba(19, 16, 14, .3) 42%, rgba(19, 16, 14, 0) 65%); }
.club__nacht { position: absolute; z-index: 1; left: var(--rand); right: var(--rand); bottom: clamp(28px, 8vh, 90px); }
.club__abende { display: flex; flex-wrap: wrap; gap: 4px clamp(22px, 4vw, 64px); }
.club__abende li { font: italic 500 clamp(26px, 3.2vw, 56px)/1.15 var(--serif); color: var(--crema); }
.club__abende li:first-child { color: var(--ambra); }

/* ---------- 6 · Catering ---------- */
.cat { background: var(--crema); position: relative; }
.cat .kicker { color: var(--oliva); }
.cat__kopf { max-width: 1400px; margin: 0 auto; padding: clamp(90px, 14vh, 170px) var(--rand) 2vh; }
.cat__intro { max-width: 34em; margin-top: 24px; font: 400 clamp(19px, 1.5vw, 24px)/1.5 var(--serif); color: var(--tinte-2); }
.cat__reise { height: calc(420 * var(--vh)); position: relative; }
.cat__buehne { position: sticky; top: 0; height: calc(100 * var(--vh)); max-width: 1400px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr auto; gap: 6vw; align-items: center; padding: calc(var(--kopf-h) + 2vh) var(--rand) 3vh; }
.cat__bogen { position: relative; height: calc(94 * var(--vh) - var(--kopf-h)); aspect-ratio: 9 / 16; border-radius: 999px 999px 22px 22px;
  overflow: hidden; background: var(--pietra); order: 2; }
.cat__ruhe, .cat__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat__canvas { opacity: 0; transition: opacity .4s; }
.cat__reise.hat-film .cat__canvas { opacity: 1; }
.cat__stationen { display: flex; flex-direction: column; gap: clamp(14px, 3vh, 34px); }
.cat__station { opacity: .3; transition: opacity .5s; max-width: 30em; }
.cat__station h3 { font: 500 clamp(44px, 7vw, 132px)/.95 var(--serif); letter-spacing: -.015em; transition: color .5s; }
.cat__station p { font-size: clamp(16px, 1.15vw, 19px); color: var(--tinte-2); margin-top: 8px; max-height: 0; overflow: hidden;
  opacity: 0; transition: max-height .6s, opacity .5s; }
.cat__station.ist-aktiv { opacity: 1; }
.cat__station.ist-aktiv h3 { color: var(--oliva); }
.cat__station.ist-aktiv p { max-height: 8em; opacity: 1; }
.cat__galerie { max-width: 1400px; margin: 0 auto; padding: 8vh var(--rand) 0; display: grid; grid-template-columns: 1.3fr 1fr .8fr;
  gap: 2vw; align-items: end; }
.cat__galerie figure { overflow: hidden; border-radius: 18px; }
.cat__galerie img { width: 100%; height: 100%; object-fit: cover; }
.cat__cta { text-align: center; padding: 7vh var(--rand) clamp(90px, 14vh, 160px); }

/* ---------- 7 · Reservieren ---------- */
.res { position: relative; overflow: hidden; background: var(--nero); padding: clamp(110px, 18vh, 200px) var(--rand) clamp(90px, 14vh, 170px); }
.res__grund { position: absolute; inset: 0; }
.res__grund img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
@media (prefers-reduced-motion: no-preference) { .res__grund img { animation: atem 26s ease-in-out infinite alternate; } }
@keyframes atem { from { transform: scale(1.04); } to { transform: scale(1.16); } }
.res__grund::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19, 16, 14, .62), rgba(19, 16, 14, .4) 45%, rgba(19, 16, 14, .7)); }
.res__kopf, .res__karten { position: relative; z-index: 1; }
.res .kicker { color: var(--ambra); }
.res .titel { color: var(--crema); font-size: clamp(54px, 9vw, 160px); }
.res__kopf { max-width: 1400px; margin: 0 auto; }
.res__karten { max-width: 1400px; margin: 6vh auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; }
.res__karte { position: relative; background: var(--crema); border-radius: 28px; padding: clamp(28px, 4vw, 56px); overflow: hidden; }
.res__karte--nacht { background: var(--nero); color: var(--crema); }
.res__nr { position: absolute; right: clamp(20px, 3vw, 44px); top: 6px; font: 500 clamp(110px, 12vw, 200px)/1 var(--serif); color: var(--pietra); }
.res__karte--nacht .res__nr { color: var(--nero-2); }
.res__karte h3 { position: relative; font: 500 clamp(34px, 3.4vw, 56px)/1 var(--serif); }
.res__adr { position: relative; margin-top: 10px; color: var(--tinte-2); }
.res__karte--nacht .res__adr { color: var(--hell-2); }
.res__zeiten { position: relative; margin: 24px 0 30px; display: flex; flex-direction: column; gap: 6px; }
.res__zeiten li { padding-bottom: 6px; border-bottom: 1px solid rgba(36, 28, 24, .1); }
.res__karte--nacht .res__zeiten li { border-color: rgba(246, 241, 234, .12); }
.res__knoepfe { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.res__karte--nacht .knopf--hohl { color: var(--crema); border-color: rgba(246, 241, 234, .5); }
@media (hover: hover) { .res__karte--nacht .knopf--hohl:hover { background: var(--crema); color: var(--nero); border-color: var(--crema); } }

/* ---------- Fuß ---------- */
.fuss { background: var(--nero); color: var(--hell-2); padding: 70px var(--rand) 50px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 14px; font-size: 15px; }
.logo--fuss { color: var(--crema); width: 190px; height: 58px; -webkit-mask-position: center; mask-position: center; }
.fuss__claim { font: italic 500 22px/1.2 var(--serif); color: var(--crema); }
.fuss a { text-decoration: none; }
@media (hover: hover) { .fuss a:hover { color: var(--ambra); } }
.fuss__copy { opacity: .6; font-size: 13px; margin-top: 10px; }

/* ---------- Handy und schmale Fenster (auch quer mit wenig Höhe) ---------- */
@media (max-width: 899px), (max-height: 560px) and (max-width: 1100px) {
  :root { --kopf-h: 60px; }
  body { font-size: 16px; }
  .titel, .gericht__name, .cat__station h3, .hist__jahr, .hero__wort, .res__karte h3, .hausnummer__seite, .menue__nav a,
  .gericht__riese, .brasa__gerichte h3, .brasa__finale-name, .club__abende li, .hist__zitat p, .ort__name, .cph__unter-name,
  .mare__wort, .mare__gerichte h3 {
    font-variation-settings: 'opsz' 11; font-weight: 500; }
  .kopf__nav, .kopf .sprachen { display: none; }
  .kopf__menue { display: block; }
  .kopf__rechts { gap: 6px; }
  .logo { width: 112px; height: 34px; }

  .hero__inhalt { padding-bottom: calc(5vh + var(--leiste)); }
  .hero__wort { --o: min(68vw, 38 * var(--vh)); flex-wrap: wrap; font-size: min(24vw, 13.5 * var(--vh)); width: 100%; row-gap: 0; }
  .hero__teil--a { width: 100%; text-align: left; margin-bottom: -.12em; }
  .hero__teil--b { width: 100%; text-align: right; margin-top: -.12em; }
  .hero__jahr { right: auto; left: -.15em; top: auto; bottom: -.55em; transform: none; font-size: .16em; }
  .hero__claim { margin-top: 2.4vh; }
  .hero__sub { font-size: 15px; }
  .hero__kicker { margin-bottom: 1vh; font-size: 11px; }
  .hero__cta .knopf { min-height: 46px; padding: 0 20px; }

  .hist { border-radius: 26px 26px 0 0; }
  .hist__reise { height: calc(320 * var(--vh)); }
  .hist__schleier { background: linear-gradient(to top, rgba(19, 16, 14, .9) 0%, rgba(19, 16, 14, .5) 40%, rgba(19, 16, 14, 0) 64%),
    linear-gradient(to bottom, rgba(19, 16, 14, .72) 0%, rgba(19, 16, 14, .5) 26%, rgba(19, 16, 14, 0) 44%); }
  /* Höhe begrenzt: am Handy quer liefe die Zahl sonst durch die Schritt-Marke */
  .hist__jahr { top: calc(var(--kopf-h) + 2vh); bottom: auto; font-size: min(27vw, calc(30 * var(--vh))); }
  .hist__schritte { left: var(--rand); right: var(--rand); width: auto; bottom: calc(5vh + var(--leiste)); }
  .hist__text { font-size: 18px; }
  .hist__heute { grid-template-columns: 1fr; gap: 5vh; }
  .hist__bild { width: 80%; margin: 0 auto; }
  .hist__zitat p { font-size: clamp(28px, 8.4vw, 42px); }

  .gericht__riese { font-size: 20vw; place-items: start center; padding-top: calc(var(--kopf-h) + 20 * var(--vh)); }
  .brasa__tor { height: calc(240 * var(--vh)); }
  .brasa__kopf { right: var(--rand); max-width: none; bottom: calc(6vh + var(--leiste)); }
  .brasa__intro { font-size: 17px; }
  .brasa__aufbau { height: calc(250 * var(--vh)); }
  .brasa__aufbau-buehne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 1vh; }
  .brasa__bild { width: min(100%, 44 * var(--vh)); }
  .brasa__gerichte { margin-top: 8px; }
  .brasa__gerichte li { padding: 7px 0; }
  .brasa__gerichte h3 { font-size: clamp(21px, 6.2vw, 30px); }
  .brasa__gerichte p { font-size: 14px; margin-top: 2px; }
  .brasa__finale-name { font-size: min(22vw, calc((100vw - 2 * var(--rand)) / 4.9)); }
  .vino__reise { height: calc(220 * var(--vh)); }
  .vino__schleier { background: linear-gradient(to top, rgba(10, 8, 7, .92) 0%, rgba(10, 8, 7, .6) 42%, rgba(10, 8, 7, 0) 68%); }
  .vino__text { inset: auto var(--rand) calc(5vh + var(--leiste)) var(--rand); max-width: none; padding-top: 0; }
  .vino__text p:not(.kicker) { font-size: 16.5px; margin: 14px 0 18px; }
  .club__bar { height: calc(86 * var(--vh)); }
  .club__abende li { font-size: clamp(22px, 6.4vw, 30px); }
  .res .titel { font-size: clamp(46px, 13vw, 70px); }

  .gericht { height: calc(240 * var(--vh)); }
  .gericht__buehne, .gericht--rechts .gericht__buehne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 1vh;
    padding-top: calc(var(--kopf-h) + 1vh); }
  .gericht--rechts .gericht__bild { order: 0; }
  .gericht__bild { width: min(100%, 50 * var(--vh)); }
  .gericht__name { font-size: clamp(30px, 8.6vw, 44px); margin-top: 6px; }
  .gericht__desc { font-size: 17px; margin-top: 4px; }
  .gericht__teile { margin-top: 12px; }
  .gericht__teile li { padding: 6px 0 6px 24px; font-size: 15px; }

  .club__inhalt { grid-template-columns: 1fr; gap: 6vh; }
  .club__bild { max-width: 440px; width: 86%; margin: 0 auto; }

  .cat__reise { height: calc(380 * var(--vh)); }
  .cat__buehne { grid-template-columns: 1fr; grid-template-rows: 1fr auto; justify-items: center; gap: 2vh; padding-bottom: 2vh; }
  .cat__bogen { order: 0; height: calc(60 * var(--vh)); }
  .cat__stationen { position: relative; width: 100%; min-height: 9.5em; }
  .cat__station { position: absolute; inset: 0 0 auto 0; opacity: 0; transition: opacity .45s; text-align: center; margin: 0 auto; }
  .cat__station.ist-aktiv { opacity: 1; }
  .cat__station h3 { font-size: clamp(34px, 10vw, 48px); }
  .cat__station p { max-height: none; opacity: 1; font-size: 15px; }
  .cat__galerie { grid-template-columns: 1fr 1fr; }
  .cat__galerie figure:first-child { grid-column: 1 / -1; }

  .res__karten { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .hist__reise, .vino__reise, .brasa__tor, .brasa__aufbau { height: auto; }
  .hist__buehne, .vino__buehne, .brasa__buehne, .brasa__aufbau-buehne { position: relative; height: auto; min-height: calc(100 * var(--vh)); }
  .hist__schritte { position: relative; inset: auto; width: auto; padding: 46vh var(--rand) 6vh; display: flex; flex-direction: column; gap: 4vh; }
  .hist__schritt { position: relative; }
  .hist__jahr { display: none; }
  .brasa__maske, .brasa__hinweis { display: none; }
  .brasa__buehne { --schleier: 1; }
  .brasa__gerichte li { opacity: 1; transform: none; }
  .vino__text { position: relative; inset: auto; min-height: calc(100 * var(--vh)); padding: 12vh var(--rand); max-width: 40em; }
  .hero { height: calc(100 * var(--vh)); }
  .hist { margin-top: 0; }
  .gericht, .cat__reise, .club__strasse { height: auto; }
  .gericht__buehne, .cat__buehne, .club__strasse-buehne { position: relative; height: auto; min-height: calc(100 * var(--vh)); }
  .gericht__teile li, .hist__schritt, .cat__station { opacity: 1; transform: none; }
  .cat__station p { max-height: none; opacity: 1; }
  .cat__station { position: relative; }
  .hausnummer__dreh { transform: rotateY(180deg); }
}

/* =========================================================
   Catering-Seite
   ========================================================= */
.seite-catering .kopf { background: rgba(246, 241, 234, .94); }
.abschnitt-kopf { max-width: 1400px; margin: 0 auto clamp(30px, 6vh, 64px); }
.seite-catering .kicker { color: var(--oliva); }
/* Auftakt: Bogenfenster → volle Szene (Ränder und Radius als Variablen, nur der Scroll setzt sie) */
.cph { position: relative; height: calc(230 * var(--vh)); }
.cph__buehne { position: sticky; top: 0; height: calc(100 * var(--lvh)); overflow: hidden; display: grid; grid-template-columns: 1fr auto;
  gap: 6vw; align-items: center; padding: calc(var(--kopf-h) + 4vh) max(var(--rand), calc((100vw - 1400px) / 2)) 6vh; }
.cph__text { position: relative; z-index: 2; }
.cph__intro { max-width: 32em; margin-top: 24px; font: 400 clamp(19px, 1.5vw, 24px)/1.5 var(--serif); color: var(--tinte-2); }
.cph__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cph__fenster { height: calc(82 * var(--vh) - var(--kopf-h)); aspect-ratio: 9 / 16; }
.cph__film { position: absolute; inset: 0; z-index: 1; background: var(--nero);
  clip-path: inset(var(--t, 12vh) var(--r, 6vw) var(--b, 6vh) var(--l, 62%) round var(--rad, 999px) var(--rad, 999px) var(--rad2, 22px) var(--rad2, 22px)); }
.cph__video { width: 100%; height: 100%; object-fit: cover; }
.cph__film::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--schleier, 0);
  background: linear-gradient(to top, rgba(19, 16, 14, .8), rgba(19, 16, 14, 0) 55%); }
.cph__unter { position: absolute; z-index: 3; left: var(--rand); right: var(--rand); bottom: calc(clamp(28px, 7vh, 84px) + var(--leiste)); color: var(--crema); opacity: 0; }
.cph__unter-name { display: block; font: 500 clamp(54px, 8.6vw, 168px)/.9 var(--serif); letter-spacing: -.035em; }
.cph__unter-gaeste { display: block; margin-top: 14px; font: 500 13px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ambra); }

/* Orte: Fahrt quer (Desktop), Stapel (Handy) */
.orte { position: relative; background: var(--nero); color: var(--crema); }
.orte__reise { position: relative; height: calc(420 * var(--vh)); }
.orte__buehne { position: sticky; top: 0; height: calc(100 * var(--vh)); overflow: hidden; }
.orte__spur { display: flex; width: 400%; height: 100%; }
.ort { position: relative; flex: 0 0 25%; height: 100%; overflow: hidden; }
.ort--film .ort__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ort--film::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(19, 16, 14, .84) 0%, rgba(19, 16, 14, .25) 46%, rgba(19, 16, 14, 0) 68%),
              linear-gradient(to bottom, rgba(19, 16, 14, .62), rgba(19, 16, 14, 0) 34%); }
.ort__text { position: absolute; z-index: 1; left: var(--rand); bottom: clamp(36px, 9vh, 100px); max-width: min(36em, 64vw); }
.ort__name { font: 500 clamp(90px, 15vw, 290px)/.8 var(--serif); letter-spacing: -.045em; color: var(--crema); }
.ort__text p { margin-top: 18px; color: var(--hell-2); font: 400 clamp(18px, 1.4vw, 23px)/1.5 var(--serif); max-width: 30em; }
.ort--bogen { background: var(--oliva); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5vw;
  padding: calc(var(--kopf-h) + 4vh) var(--rand) 5vh; }
.ort--bogen .ort__text { position: relative; left: auto; bottom: auto; max-width: 40em; }
.ort--bogen .ort__text p { color: #E6E8D8; }
.ort__bogen { height: calc(84 * var(--vh) - var(--kopf-h)); aspect-ratio: 9 / 16; border-radius: 999px 999px 22px 22px; overflow: hidden; background: var(--pietra); }
.ort__bogen video { width: 100%; height: 100%; object-fit: cover; }
.orte__kopf { position: absolute; z-index: 2; left: var(--rand); top: calc(var(--kopf-h) + 3vh); pointer-events: none; }
.orte__kopf .kicker { color: var(--ambra); }
.orte__kopf .titel { color: var(--crema); font-size: clamp(34px, 4.2vw, 70px); text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
.orte__kopf .kicker { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.orte__punkte { position: absolute; z-index: 2; right: var(--rand); top: calc(var(--kopf-h) + 4vh); display: flex; gap: 8px; }
.orte__punkte li { width: 34px; height: 2px; background: rgba(246, 241, 234, .35); transition: background-color .4s; }
.orte__punkte li.ist-da { background: var(--crema); }

.formate { padding: clamp(80px, 12vh, 140px) var(--rand); }
.formate__liste { max-width: 1400px; margin: 0 auto; border-top: 1px solid rgba(36, 28, 24, .14); }
.formate__liste li { display: grid; grid-template-columns: 1.1fr .6fr 1.3fr; gap: 3vw; align-items: baseline; padding: clamp(20px, 3.4vh, 34px) 0;
  border-bottom: 1px solid rgba(36, 28, 24, .14); }
.formate__liste h3 { font: 500 clamp(26px, 2.4vw, 40px)/1.05 var(--serif); }
.formate__gaeste { font: 500 13px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--oliva); }
.formate__liste p:not(.formate__gaeste) { color: var(--tinte-2); }

.menu { background: var(--nero); color: var(--crema); padding: clamp(80px, 12vh, 140px) var(--rand); display: grid; grid-template-columns: .9fr 1.1fr;
  gap: 6vw; align-items: start; }
.menu .kicker { color: var(--ambra); }
.menu__bild { position: sticky; top: calc(var(--kopf-h) + 4vh); border-radius: 999px 999px 22px 22px; overflow: hidden; aspect-ratio: 4 / 5; }
.menu__bild img { width: 100%; height: 100%; object-fit: cover; }
.menu__hinweis { color: var(--hell-2); margin-top: 18px; }
.menu__gaenge { margin-top: 40px; display: flex; flex-direction: column; gap: 30px; }
.menu__gaenge h3 { font: 500 12px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ambra); }
.menu__gaenge li { font: italic 400 clamp(19px, 1.6vw, 26px)/1.35 var(--serif); padding: 8px 0; border-bottom: 1px solid rgba(246, 241, 234, .12); }

.leist { padding: clamp(80px, 12vh, 140px) var(--rand); }
.leist__raster { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.leist__bild { border-radius: 22px; overflow: hidden; }
.leist__bild img { width: 100%; height: 100%; object-fit: cover; }
.leist__liste { margin: 0; display: flex; flex-direction: column; }
.leist__liste div { padding: 20px 0; border-bottom: 1px solid rgba(36, 28, 24, .14); }
.leist__liste dt { font: 500 clamp(24px, 2vw, 32px)/1.1 var(--serif); }
.leist__liste dd { margin: 6px 0 0; color: var(--tinte-2); }

.ablauf { background: var(--pietra); padding: clamp(80px, 12vh, 140px) var(--rand); }
.ablauf__schritte { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; counter-reset: schritt; }
.ablauf__schritte li { counter-increment: schritt; background: var(--crema); border-radius: 24px; padding: clamp(24px, 3vw, 44px); }
.ablauf__schritte li::before { content: counter(schritt, decimal-leading-zero); display: block; font: 500 13px/1 var(--sans); letter-spacing: .2em; color: var(--oliva); margin-bottom: 18px; }
.ablauf__schritte h3 { font: 500 clamp(28px, 2.4vw, 40px)/1.05 var(--serif); }
.ablauf__schritte p { margin-top: 10px; color: var(--tinte-2); }

.anfrage { max-width: 1400px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) var(--rand); display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; scroll-margin-top: var(--kopf-h); }
.anfrage__text p:not(.kicker) { margin-top: 20px; color: var(--tinte-2); font: 400 clamp(18px, 1.4vw, 22px)/1.5 var(--serif); }
.anfrage__form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.anfrage__form label { display: flex; flex-direction: column; gap: 6px; font: 500 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-2); }
.anfrage__form input, .anfrage__form select, .anfrage__form textarea { font: 400 17px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tinte);
  background: #fff; border: 1.5px solid rgba(36, 28, 24, .18); border-radius: 12px; padding: 13px 14px; min-height: 50px; width: 100%; }
.anfrage__form input:focus, .anfrage__form select:focus, .anfrage__form textarea:focus { outline: 2px solid var(--oliva); outline-offset: 1px; border-color: var(--oliva); }
.anfrage__breit { grid-column: 1 / -1; }
.anfrage__ok { flex-direction: row !important; align-items: flex-start; gap: 12px !important; text-transform: none !important; letter-spacing: 0 !important; font: 400 15px/1.45 var(--sans) !important; }
.anfrage__ok input { width: 22px !important; height: 22px; min-height: 0 !important; flex: 0 0 22px; margin-top: 1px; accent-color: var(--oliva); }
.anfrage__senden { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.anfrage__hinweis { font-size: 14px; color: var(--tinte-2); }

@media (max-width: 899px), (max-height: 560px) and (max-width: 1100px) {
  .cph { height: calc(200 * var(--vh)); }
  .cph__buehne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 3vh; padding: calc(var(--kopf-h) + 2vh) var(--rand) calc(3vh + var(--leiste)); align-items: start; }
  .cph__fenster { order: -1; height: calc(46 * var(--vh)); justify-self: center; }
  .cph__intro { font-size: 17px; margin-top: 14px; }
  .cph__cta { margin-top: 20px; }
  .cph__unter-name { font-size: 15vw; }
  .orte__reise { height: auto; }
  .orte__buehne { position: relative; height: auto; overflow: visible; }
  .orte__spur { flex-direction: column; width: 100%; }
  .ort { flex: none; height: calc(100 * var(--vh)); }
  .ort--bogen { grid-template-columns: 1fr; grid-template-rows: 1fr auto; justify-items: center; gap: 3vh; padding: calc(var(--kopf-h) + 2vh) var(--rand) 6vh; }
  .ort__bogen { order: -1; height: calc(58 * var(--vh)); }
  .ort--bogen .ort__text { text-align: left; width: 100%; right: auto; }
  .ort__name { font-size: 22vw; }
  .ort__text { max-width: none; right: var(--rand); }
  .ort__text p { font-size: 16px; }
  .orte__kopf { top: calc(var(--kopf-h) + 2vh); }
  .orte__punkte { display: none; }
  .formate__liste li { grid-template-columns: 1fr; gap: 6px; }
  .menu, .leist__raster, .anfrage { grid-template-columns: 1fr; gap: 5vh; }
  .menu__bild { position: relative; top: 0; max-width: 420px; width: 80%; margin: 0 auto; }
  .ablauf__schritte { grid-template-columns: 1fr; gap: 14px; }
  .anfrage__form { grid-template-columns: 1fr; }
}

/* Handy: Kicker und Scroll-Hinweis im Hero weglassen (sonst Kollision mit Kopfleiste/Knöpfen bei niedriger Höhe) */
@media (max-width: 899px), (max-height: 560px) and (max-width: 1100px) {
  .hero__oben, .hero__hinweis { display: none; }
}
@media (max-width: 899px), (max-height: 560px) and (max-width: 1100px) {
  /* Stationen nacheinander statt übereinander überblenden */
  .cat__station { transition: opacity .2s; }
  .cat__station.ist-aktiv { transition: opacity .4s .18s; }
}
.anfrage__topf { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anfrage__status { width: 100%; font: 500 16px/1.4 var(--sans); color: var(--oliva); min-height: 1.4em; }
.anfrage__status.ist-fehler { color: var(--rosso); }

/* Club: der Negroni entsteht beim Scrollen (Desktop klebend, Handy im Durchlauf) */
.club__glas { position: relative; height: calc(230 * var(--vh)); }
.club__glas .club__inhalt { position: sticky; top: 0; min-height: calc(100 * var(--vh)); padding-top: calc(var(--kopf-h) + 3vh); padding-bottom: 4vh; }
.club__bild { position: relative; max-height: calc(86 * var(--vh) - var(--kopf-h)); justify-self: center; width: 100%; }
.club__ruhe, .club__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.club__canvas { opacity: 0; transition: opacity .4s; }
.club__glas.hat-film .club__canvas { opacity: 1; }
.club__figur { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font: italic 500 clamp(18px, 1.5vw, 22px)/1 var(--serif); color: var(--ambra); }
@media (max-width: 899px), (max-height: 560px) and (max-width: 1100px) {
  .club__glas { height: auto; }
  .club__glas .club__inhalt { position: relative; min-height: 0; padding-top: 4vh; }
}
@media (prefers-reduced-motion: reduce) {
  .club__glas { height: auto; }
  .club__glas .club__inhalt { position: relative; }
}
.club__bild::after { content: ''; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(to top, rgba(19, 16, 14, .92), rgba(19, 16, 14, 0)); pointer-events: none; }
.club__figur { z-index: 1; }

/* =========================================================
   Karten-Seite
   ========================================================= */
.seite-karte .kopf { background: rgba(246, 241, 234, .94); }
.kh { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4vw; align-items: center; overflow: hidden;
  min-height: calc(92 * var(--vh)); padding: calc(var(--kopf-h) + 6vh) 0 4vh max(var(--rand), calc((100vw - 1400px) / 2)); }
.kh__intro { max-width: 34em; margin-top: 22px; font: 400 clamp(19px, 1.5vw, 24px)/1.5 var(--serif); color: var(--tinte-2); }
/* Großer Teller, rechts angeschnitten; darin der Kreis-Morph aus dem Hero */
.kh__teller { position: relative; width: min(84 * var(--vh), 54vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  margin-right: calc(-1 * min(84 * var(--vh), 54vw) * .22); box-shadow: 0 40px 90px rgba(36, 28, 24, .22); background: var(--pietra); }
.kh__teller img, .kh__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
@media (prefers-reduced-motion: no-preference) { .kh__teller img, .kh__film { animation: teller 140s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .kh__film { display: none; } }

.kn { position: sticky; top: var(--kopf-h); z-index: 20; background: rgba(246, 241, 234, .96); border-bottom: 1px solid rgba(36, 28, 24, .1); }
.kn__spur { max-width: 1400px; margin: 0 auto; padding: 10px var(--rand); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.kn__spur::-webkit-scrollbar { display: none; }
.kn a { flex: 0 0 auto; text-decoration: none; padding: 10px 16px; border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: .08em;
  border: 1.5px solid transparent; color: var(--tinte-2); }
.kn a[aria-current="true"] { border-color: var(--rosso); color: var(--rosso); }
@media (hover: hover) { .kn a:hover { color: var(--rosso); } }

.karte { max-width: 1400px; margin: 0 auto; padding: 2vh var(--rand) 4vh; display: grid; grid-template-columns: 1fr minmax(260px, 34%); gap: 5vw; align-items: start; }
.karte__abschnitt { grid-column: 1; padding-top: clamp(40px, 7vh, 80px); scroll-margin-top: calc(var(--kopf-h) + 64px); }
.karte__abschnitt h2 { font: 500 clamp(36px, 4.4vw, 68px)/1 var(--serif); letter-spacing: -.015em; }
.karte__intro { margin-top: 12px; color: var(--tinte-2); font: italic 400 clamp(17px, 1.3vw, 21px)/1.45 var(--serif); max-width: 36em; }
.karte__liste { margin-top: 22px; border-top: 1px solid rgba(36, 28, 24, .14); }
.gang { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(36, 28, 24, .14); }
.gang__foto { grid-row: span 3; align-self: center; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: var(--pietra); }
.gang__foto img { width: 100%; height: 100%; object-fit: cover; }
.gang:not(.hat-foto) .gang__foto { display: none; }
.gang:not(.hat-foto) { grid-template-columns: 1fr auto; }
.gang__name { font: 500 clamp(19px, 1.5vw, 24px)/1.25 var(--serif); }
.gang__preis { font: 500 16px/1.2 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rosso); }
.gang__desc { grid-column: 1 / -1; color: var(--tinte-2); font-size: 15.5px; }
.gang.hat-foto .gang__desc, .gang.hat-foto .gang__marken { grid-column: 2 / -1; }
.gang__marken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.gang__marken:empty { display: none; }
.marke { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; }
.marke--destacado { background: var(--rosso); color: var(--crema); }
.marke--vegano { background: #DCE3CC; color: #34411C; }
.marke--zusatz { background: var(--pietra); color: var(--tinte); }
@media (hover: hover) { .gang.hat-foto { cursor: default; } .gang.hat-foto:hover .gang__name { color: var(--rosso); } }

.karte__vorschau { grid-column: 2; grid-row: 1 / span 20; position: sticky; top: calc(var(--kopf-h) + 90px); padding-top: clamp(40px, 7vh, 80px); text-align: center; }
.karte__teller { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--porcellana);
  box-shadow: 0 30px 60px rgba(36, 28, 24, .18), inset 0 0 0 10px rgba(255, 255, 255, .55); }
.karte__teller img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06) rotate(-6deg); transition: opacity .45s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.karte__teller img.ist-da { opacity: 1; transform: none; }
.karte__vorschau-name { margin-top: 18px; font: italic 500 20px/1.3 var(--serif); color: var(--tinte-2); min-height: 2.6em; }
.karte__abschnitt--vinos .gang__name, .karte__abschnitt--cocktails .gang__name { font-style: normal; }
.karte__fuss { max-width: 1400px; margin: 0 auto; padding: 4vh var(--rand) clamp(80px, 12vh, 140px); }
.karte__hinweis { color: var(--tinte-2); font-size: 15px; max-width: 46em; }
.karte__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

@media (max-width: 899px), (max-height: 560px) and (max-width: 1100px) {
  .kh { grid-template-columns: 1fr; gap: 3vh; min-height: 0; padding: calc(var(--kopf-h) + 2vh) var(--rand) 4vh; }
  .kh__teller { order: -1; width: min(108vw, 50 * var(--vh)); justify-self: end; margin-right: calc(-1 * var(--rand) - 18vw); }
  .karte { grid-template-columns: 1fr; }
  .karte__vorschau { display: none; }
  .gang { gap: 3px 14px; padding: 15px 0; }
  .gang__foto { width: 52px; height: 52px; }
  .gang__desc { font-size: 15px; }
}
.hist__familie { margin-top: 22px; color: var(--tinte-2); font: 400 clamp(17px, 1.3vw, 20px)/1.5 var(--serif); max-width: 32em; }

/* Rechtsseiten */
.seite-recht .kopf { background: rgba(246, 241, 234, .94); }
.recht { max-width: 860px; margin: 0 auto; padding: calc(var(--kopf-h) + 7vh) var(--rand) 12vh; }
.recht .titel { font-size: clamp(40px, 5vw, 72px); }
.recht__stand { margin-top: 12px; color: var(--tinte-2); font-size: 14px; letter-spacing: .04em; }
.recht h2 { font: 500 clamp(22px, 2vw, 28px)/1.2 var(--serif); margin-top: 40px; }
.recht p, .recht li { margin-top: 12px; color: var(--tinte); }
.recht ul { list-style: disc; padding-left: 1.2em; }
.recht a { color: var(--rosso); }
.offen { background: #FFE9A8; color: var(--tinte); padding: 0 .25em; border-radius: 4px; }
.karte.ohne-fotos { grid-template-columns: 1fr; }
.karte.ohne-fotos .karte__vorschau { display: none; }

/* Szenen mit Skript: Startzustände, die Scroll-Zeitleisten nur noch anheben (übersteht ScrollTrigger-Refresh) */
.js-szene .brasa__kopf > *, .js-szene .vino__text > *, .js-szene .club__abende li, .js-szene .brasa__finale-name,
.js-szene .gericht__riese { opacity: 0; }

/* Karten-Seite: Hinweis auf die Vorschau nur dort, wo es sie gibt (Maus, breites Fenster) */
.kh__zeiger { display: none; }
@media (hover: hover) and (min-width: 900px) { .kh__zeiger { display: inline; } }

/* =========================================================
   0 · Anflug: echtes Logo überläuft den Bildschirm, Flug durch das O über Palma bis an den Tisch
   ========================================================= */
.anflug { position: relative; background: var(--nero); color: var(--crema); }
.anflug__reise { position: relative; height: calc(460 * var(--vh)); }
.anflug__buehne { position: sticky; top: 0; height: calc(100 * var(--lvh)); overflow: hidden; background: var(--nero); }
.anflug__ruhe, .anflug__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anflug__canvas { opacity: 0; transition: opacity .5s; }
.anflug__reise.hat-film .anflug__canvas { opacity: 1; }
.anflug__maske { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.js-szene .anflug__maske { display: block; }
.anflug__nacht { fill: var(--nero); }
.anflug__ort { position: absolute; z-index: 2; left: 50%; bottom: calc(clamp(30px, 8vh, 90px) + var(--leiste)); white-space: nowrap;
  font: 500 13px/1.3 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--crema);
  background: rgba(19, 16, 14, .62); padding: 12px 22px 12px 26px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(.js-szene) .anflug__ort { transform: translateX(-50%); }
.js-szene .anflug__ort { opacity: 0; }
.anflug__hinweis { position: absolute; z-index: 2; left: 50%; bottom: calc(22px + var(--leiste)); transform: translateX(-50%); font: 500 12px/1 var(--sans);
  letter-spacing: .3em; text-transform: uppercase; color: var(--hell-2); }

/* Fuoco: Glut unter F und U (der Film ist links dunkel) und eine feine goldene Kante um die Buchstaben */
.brasa__glut { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(42% 70% at 26% 54%, rgba(231, 116, 38, .62), rgba(231, 116, 38, 0) 72%),
              radial-gradient(30% 50% at 50% 60%, rgba(231, 165, 74, .28), rgba(231, 165, 74, 0) 70%); }
.brasa__nacht { stroke: rgba(231, 165, 74, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* Ohne Skript oder mit „weniger Bewegung“ (dann fehlt .js-szene): alle Szenen als ruhige, vollständig lesbare Abschnitte */
html:not(.js-szene) .anflug__reise, html:not(.js-szene) .hist__reise, html:not(.js-szene) .brasa__tor, html:not(.js-szene) .brasa__aufbau,
html:not(.js-szene) .vino__reise, html:not(.js-szene) .cph, html:not(.js-szene) .orte__reise { height: auto; }
html:not(.js-szene) .anflug__buehne, html:not(.js-szene) .hist__buehne, html:not(.js-szene) .brasa__buehne, html:not(.js-szene) .brasa__aufbau-buehne,
html:not(.js-szene) .vino__buehne, html:not(.js-szene) .cph__buehne { position: relative; height: auto; min-height: calc(100 * var(--lvh)); }
html:not(.js-szene) .hist__jahr { display: none; }
html:not(.js-szene) .hist__schritte { position: relative; inset: auto; width: auto; max-width: 46em; margin: 0 var(--rand); padding: 38vh 0 8vh;
  display: flex; flex-direction: column; gap: 3vh; }
html:not(.js-szene) .hist__schritt { background: rgba(19, 16, 14, .74); padding: 20px 24px; border-radius: 16px; }
html:not(.js-szene) .vino__schleier { background: rgba(10, 8, 7, .62); }
html:not(.js-szene) .cph__unter { display: none; }
html:not(.js-szene) .cat__station { opacity: 1; }
html:not(.js-szene) .cat__station p { max-height: none; opacity: 1; }
html:not(.js-szene) .gericht__teile li { opacity: 1; transform: none; }
html:not(.js-szene) .orte__buehne { position: relative; height: auto; overflow: visible; }
html:not(.js-szene) .orte__spur { flex-direction: column; width: 100%; }
html:not(.js-szene) .ort { flex: none; height: calc(100 * var(--lvh)); }
html:not(.js-szene) .orte__punkte { display: none; }

/* Handy quer (wenig Höhe): Bühnen nebeneinander statt übereinander */
@media (max-height: 560px) and (max-width: 1100px) and (orientation: landscape) {
  .club__bild { max-width: calc((86 * var(--vh) - var(--kopf-h)) * .8); }   /* 4:5-Box sonst quer, der Negroni halb abgeschnitten */
  .brasa__aufbau-buehne, .gericht__buehne, .gericht--rechts .gericht__buehne { grid-template-columns: .9fr 1.1fr; grid-template-rows: none; align-items: center; }
  .gericht--rechts .gericht__bild { order: 0; }
  .brasa__bild, .gericht__bild { width: min(100%, 72 * var(--vh)); }
  .brasa__gerichte li { padding: 4px 0; }
  .brasa__gerichte h3 { font-size: 19px; }
  .brasa__gerichte p { font-size: 12.5px; }
  .gericht__teile li { padding: 3px 0 3px 22px; font-size: 13px; }
  .cph__buehne { grid-template-columns: 1fr auto; grid-template-rows: none; align-items: center; }
  .cph__fenster { order: 2; height: calc(78 * var(--lvh) - var(--kopf-h)); }
  .cph__intro { font-size: 15px; }
  .ort--bogen { grid-template-columns: 1fr auto; grid-template-rows: none; }
  .ort__bogen { order: 2; height: calc(80 * var(--vh) - var(--kopf-h)); }
  .ort__name { font-size: 15vw; }
  .orte__kopf { top: calc(var(--kopf-h) + 1vh); }
  .orte__kopf .titel { font-size: 26px; }
  .vino__text { padding-top: var(--kopf-h); }
  .vino__text .titel { font-size: 34px; }
  .kh__teller { width: min(60vw, 70 * var(--vh)); margin-right: calc(-1 * var(--rand)); }
}

/* =========================================================
   Mare: vom Boot im Morgenlicht unter Wasser zum Hummer, durch die Oberfläche auf den echten Fang; dann Crudo Enoteca
   ========================================================= */
.mare { position: relative; background: var(--nero); color: var(--crema); }
.mare .kicker { color: var(--ambra); }
.mare .titel { color: var(--crema); }
.mare__reise { position: relative; height: calc(420 * var(--vh)); }
.mare__buehne { position: sticky; top: 0; height: calc(100 * var(--lvh)); overflow: hidden; background: #0c2a33; }
.mare__ruhe, .mare__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mare__canvas { opacity: 0; transition: opacity .5s; transform-origin: 50% 55%; }
.mare__reise.hat-film .mare__canvas { opacity: 1; }
.mare__schleier { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(5, 20, 26, .86) 0%, rgba(5, 20, 26, .4) 42%, rgba(5, 20, 26, 0) 68%),
              linear-gradient(to right, rgba(5, 20, 26, .6), rgba(5, 20, 26, 0) 58%); }
/* das Wort liegt im Wasser und taucht mit der Kamera ab */
.mare__wort { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(clamp(20px, 5vh, 64px) + var(--leiste)); margin: 0; text-align: center;
  pointer-events: none; font: 500 clamp(130px, 26vw, 520px)/.78 var(--serif); letter-spacing: -.05em; text-transform: uppercase;
  color: rgba(246, 241, 234, .94); text-shadow: 0 6px 60px rgba(5, 20, 26, .35); }
.mare__kopf { position: absolute; z-index: 2; left: var(--rand); bottom: calc(clamp(36px, 9vh, 110px) + var(--leiste)); max-width: min(46em, 74vw); }
.mare__intro { margin-top: 18px; font: 400 clamp(19px, 1.5vw, 24px)/1.5 var(--serif); color: var(--hell-2); max-width: 32em; }
.mare__hinweis { position: absolute; z-index: 2; left: 50%; top: calc(var(--kopf-h) + 3vh); transform: translateX(-50%); margin: 0;
  font: 500 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(19, 16, 14, .62); }
.js-szene .mare__kopf > *, .js-szene .mare__schleier { opacity: 0; }

.mare__finale { position: relative; min-height: calc(100 * var(--vh)); overflow: hidden; background: var(--nero); display: flex; align-items: center; }
.mare__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.mare__finale::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(19, 16, 14, .9) 0%, rgba(19, 16, 14, .66) 34%, rgba(19, 16, 14, 0) 64%); }
.mare__karte { position: relative; z-index: 2; width: min(34em, 46vw); margin-left: var(--rand); padding: calc(var(--kopf-h) + 4vh) 0 6vh; }
.mare__karte .gericht__note { color: var(--ambra); }
.mare__gerichte { margin: 14px 0 30px; display: flex; flex-direction: column; }
.mare__gerichte li { padding: clamp(10px, 1.8vh, 18px) 0; border-top: 1px solid rgba(246, 241, 234, .16); transition: opacity .5s, transform .5s; }
.js-szene .mare__gerichte li { opacity: .22; transform: translateX(-8px); }
.js-szene .mare__gerichte li.ist-da { opacity: 1; transform: none; }
.mare__gerichte h3 { font: 500 clamp(26px, 2.6vw, 46px)/1.02 var(--serif); letter-spacing: -.012em; color: var(--crema); }
.mare__gerichte p { margin-top: 5px; color: var(--hell-2); font-size: clamp(14px, 1.05vw, 17px); }

@media (max-width: 899px), (max-height: 560px) and (max-width: 1100px) {
  .mare__reise { height: calc(360 * var(--vh)); }
  .mare__wort { font-size: min(30vw, calc(34 * var(--vh))); bottom: calc(16vh + var(--leiste)); font-variation-settings: 'opsz' 11; }
  .mare__kopf { right: var(--rand); max-width: none; bottom: calc(6vh + var(--leiste)); }
  .mare__intro { font-size: 17px; }
  .mare__schleier { background: linear-gradient(to top, rgba(5, 20, 26, .9) 0%, rgba(5, 20, 26, .5) 45%, rgba(5, 20, 26, 0) 72%); }
  .mare__finale { flex-direction: column; align-items: stretch; }
  .mare__film { position: relative; inset: auto; height: calc(58 * var(--vh)); object-position: 50% 50%; }
  .mare__finale::before { inset: 0 0 auto 0; height: calc(58 * var(--vh));
    background: linear-gradient(to top, rgba(19, 16, 14, .96) 0%, rgba(19, 16, 14, .6) 16%, rgba(19, 16, 14, 0) 40%); }
  .mare__karte { width: auto; margin: calc(-3 * var(--vh)) 0 0; padding: 0 var(--rand) 8vh; }
  .mare__gerichte li { padding: 8px 0; }
  .mare__gerichte h3 { font-size: clamp(22px, 6.4vw, 30px); font-variation-settings: 'opsz' 11; }
  .mare__gerichte p { font-size: 14px; margin-top: 2px; }
}
/* Handy quer: Liste neben dem Film */
@media (max-height: 560px) and (max-width: 1100px) and (orientation: landscape) {
  .mare__finale { flex-direction: row; align-items: center; }
  .mare__film { position: absolute; inset: 0; height: 100%; }
  .mare__finale::before { inset: 0; height: auto; background: linear-gradient(to right, rgba(19, 16, 14, .9) 0%, rgba(19, 16, 14, .62) 50%, rgba(19, 16, 14, .45) 62%, rgba(19, 16, 14, 0) 80%); }
  .mare__karte { width: min(30em, 56vw); margin: 0 0 0 var(--rand); padding: calc(var(--kopf-h) + 2vh) 0 3vh; }
  .mare__gerichte h3 { font-size: 19px; }
  .mare__gerichte p { font-size: 12.5px; }
}
/* Ohne Skript oder mit „weniger Bewegung“: der echte Fang als ruhiges Bild, Text sichtbar */
html:not(.js-szene) .mare__reise { height: auto; }
html:not(.js-szene) .mare__buehne { position: relative; height: auto; min-height: calc(100 * var(--lvh)); }
html:not(.js-szene) .mare__wort, html:not(.js-szene) .mare__hinweis { display: none; }
html:not(.js-szene) .mare__schleier {
  background: linear-gradient(to top, rgba(5, 20, 26, .9) 0%, rgba(5, 20, 26, .72) 55%, rgba(5, 20, 26, .25) 82%, rgba(5, 20, 26, 0) 92%),
              linear-gradient(to right, rgba(5, 20, 26, .6), rgba(5, 20, 26, 0) 58%); }
.mare__kopf .kicker { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }