/* ============================================================
   TREVI — Überherrn & Saarlouis
   Gestaltung: Schwarz, Gold, Creme. Große Typografie, viel Raum.
   Bewegung: wenige, sorgfältig gebaute Momente. Keine Bibliothek.

   Haltung: Luxus entsteht durch Weglassen. Jeder Effekt muss sich
   rechtfertigen, sonst fliegt er raus.
   ============================================================ */

@font-face { font-family:'Italiana';    src:url('../fonts/Italiana-Regular.ttf')   format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Crimson Pro'; src:url('../fonts/CrimsonPro-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Crimson Pro'; src:url('../fonts/CrimsonPro-Italic.ttf')  format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Work Sans';   src:url('../fonts/WorkSans-Regular.ttf')   format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Work Sans';   src:url('../fonts/WorkSans-Bold.ttf')      format('truetype'); font-weight:700; font-display:swap; }

/* ---------- Farbe: drei Werte, mehr nicht ---------- */
:root {
  --schwarz:  #0b0b0b;
  --gold:     #b08d57;
  --creme:    #f5f2ec;

  --tiefe:    #131313;              /* erhobene Flächen */
  --gold-hell:#c9a874;
  --leise:    rgba(245,242,236,0.58);
  --linie:    rgba(245,242,236,0.10);
  --leiste:   rgba(11,11,11,0.72);

  /* Raum: großzügig. Der teuerste Bestandteil einer Seite ist Leere. */
  --bahn:  1320px;
  --luft:  clamp(120px, 17vw, 260px);

  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mittag — dasselbe Haus bei Tageslicht */
[data-tag="mittag"] {
  --schwarz:  #f5f2ec;
  --tiefe:    #ebe6dc;
  --creme:    #16150f;
  --gold:     #8a6733;
  --gold-hell:#a5814a;
  --leise:    rgba(22,21,15,0.62);
  --linie:    rgba(22,21,15,0.14);
  --leiste:   rgba(245,242,236,0.82);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  background:var(--schwarz);
  color:var(--creme);
  font-family:'Crimson Pro', Georgia, serif;
  font-size:clamp(1.06rem, 0.4vw + 1rem, 1.22rem);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color 0.9s var(--kurve), color 0.9s var(--kurve);
}

.bahn { max-width:var(--bahn); margin:0 auto; padding:0 clamp(24px,6vw,72px); }
section { padding:var(--luft) 0; position:relative; }

/* ---------- Typografie ----------
   Große Schnitte, enge Zeilen, weite Sperrung. Der Unterschied
   zwischen teuer und billig liegt fast immer im Zeilenabstand. */
h1, h2, h3 { font-family:'Italiana', Georgia, serif; font-weight:400; }

h2 {
  font-size:clamp(2.9rem, 7vw, 6.2rem);
  line-height:0.98;
  letter-spacing:0.005em;
  margin-top:clamp(18px,2vw,30px);
}

.augenbraue {
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.66rem;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:var(--gold);
}

:focus-visible { outline:1px solid var(--gold); outline-offset:6px; }

::selection { background:var(--gold); color:var(--schwarz); }

/* ============================================================
   FILMKORN
   Ein einziges 140-Byte-SVG, als Muster über die ganze Seite.
   Nimmt der Fläche das Digitale, ohne ein Bild zu laden.
   ============================================================ */
body::after {
  content:'';
  position:fixed; inset:0; z-index:200;
  pointer-events:none;
  opacity:0.035;
  /* Eigene Ebene auf der Grafikkarte, damit die Körnung nicht bei
     jedem Scrollbild zusammen mit dem Inhalt neu gezeichnet wird. */
  transform:translateZ(0);
  will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   BEWEGUNG
   Sechs Momente. Alle über transform und opacity, also auf der
   Grafikkarte. Kein layout-auslösendes Merkmal wird animiert.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .eintritt, .zeile, .wort { opacity:1 !important; transform:none !important; filter:none !important; }
}

/* Eintritt. Die Unschärfe ist bewusst gering: Luxus ist Schärfe.
   Weichzeichnung gehört in die Tiefe, nicht über den Vordergrund. */
/* Weichzeichnung wurde hier entfernt: filter zwingt den Browser
   bei jedem Bild zu einer neuen Rasterung der Fläche. Auf einer
   Seite mit zwanzig eintretenden Elementen kostet das spürbar
   Leistung — und Schärfe war ohnehin die richtige Entscheidung. */
.eintritt {
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1.1s var(--kurve), transform 1.1s var(--kurve);
}
.eintritt.da { opacity:1; transform:none; filter:none; }
.eintritt[data-verzug="1"] { transition-delay:0.12s; }
.eintritt[data-verzug="2"] { transition-delay:0.24s; }
.eintritt[data-verzug="3"] { transition-delay:0.36s; }

/* Split-Text: je Wort ein Element, das hinter einer Kante aufsteigt.
   Die Kante entsteht durch overflow:hidden auf der Zeile. */
.zeile { display:block; overflow:hidden; }
.wort {
  display:inline-block;
  transform:translateY(105%);
  transition:transform 1.25s var(--kurve);
  transition-delay:calc(var(--w, 0) * 0.055s);
}
.da .wort, .buehne .wort { transform:none; }

/* Parallaxe — höchstens 46 Pixel, nur transform */
[data-tiefe] { will-change:transform; transform:translate3d(0, var(--versatz,0px), 0); }
@media (prefers-reduced-motion: reduce) { [data-tiefe] { transform:none !important; } }

/* ---------- Kopfleiste ---------- */
.kopfleiste {
  position:sticky; top:0; z-index:60;
  background:var(--leiste);
  /* Von 16px auf 8px: Die Kosten einer Hintergrundunschärfe wachsen
     mit dem Radius, und sie wird bei jedem Scrollbild neu berechnet. */
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
  will-change:background-color;
  transition:background-color 0.9s var(--kurve), border-color 0.9s var(--kurve);
}
.kopfleiste .bahn { display:flex; align-items:center; justify-content:space-between; padding-block:22px; gap:24px; }
.wortmarke {
  font-family:'Italiana', serif; font-size:1.5rem; letter-spacing:0.42em;
  color:var(--creme); text-decoration:none; padding-left:0.42em;
}
.hauptnavi {
  display:flex; gap:clamp(20px,2.6vw,42px); list-style:none;
  font-family:'Work Sans', system-ui, sans-serif; font-size:0.74rem;
  letter-spacing:0.18em; text-transform:uppercase;
}
.hauptnavi a { color:var(--leise); text-decoration:none; position:relative; padding-bottom:5px; transition:color 0.5s var(--kurve); }
.hauptnavi a::after {
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width 0.55s var(--kurve);
}
.hauptnavi a:hover { color:var(--creme); }
.hauptnavi a:hover::after { width:100%; }
@media (max-width:900px) { .hauptnavi { display:none; } }

/* ============================================================
   BÜHNE — Vollbild, kinematisch
   ============================================================ */
.buehne {
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--linie);
}

.wahrzeichen { position:absolute; inset:0; z-index:0; overflow:hidden; }
.wahrzeichen img {
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  opacity:0; transform:scale(1.12);
  animation:bild-auf 3.4s var(--kurve) 1.9s forwards,
            kamerafahrt 44s ease-in-out 5.3s infinite alternate;
}
@keyframes bild-auf   { to { opacity:0.55; transform:scale(1); } }
@keyframes kamerafahrt{ from { transform:scale(1) translate3d(0,0,0); } to { transform:scale(1.07) translate3d(-1.2%,-0.8%,0); } }

.wahrzeichen .tag { display:none; }
[data-tag="mittag"] .wahrzeichen .nacht { display:none; }
[data-tag="mittag"] .wahrzeichen .tag   { display:block; }
[data-tag="mittag"] .wahrzeichen img    { animation-name:bild-auf-tag, kamerafahrt; }
@keyframes bild-auf-tag { to { opacity:0.8; transform:scale(1); } }

.wahrzeichen::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,11,11,0.62) 0%, rgba(11,11,11,0.22) 36%, rgba(11,11,11,0.94) 100%),
    radial-gradient(ellipse 66% 54% at 50% 44%, rgba(11,11,11,0.58), transparent 78%);
}
[data-tag="mittag"] .wahrzeichen::after {
  background:
    linear-gradient(180deg, rgba(11,11,11,0.70) 0%, rgba(11,11,11,0.36) 40%, rgba(11,11,11,0.88) 100%),
    radial-gradient(ellipse 66% 54% at 50% 44%, rgba(11,11,11,0.52), transparent 80%);
}

/* Lichtstrahl — ein einzelner, sehr langsamer Schein von oben.
   Ersetzt Partikel und Nebel: eine Geste statt vieler. */
.lichtstrahl {
  position:absolute; top:-30%; left:50%; z-index:1;
  width:min(680px,80vw); height:130%;
  transform:translateX(-50%) rotate(9deg);
  background:linear-gradient(180deg, rgba(176,141,87,0.16), rgba(176,141,87,0.05) 44%, transparent 76%);
  filter:blur(48px);
  pointer-events:none;
  animation:strahl 26s ease-in-out infinite alternate;
}
@keyframes strahl {
  from { opacity:0.55; transform:translateX(-52%) rotate(9deg)  scaleY(1); }
  to   { opacity:1;    transform:translateX(-47%) rotate(6.5deg) scaleY(1.06); }
}

/* Die gezeichnete Fassade übergibt an das Foto */
.fassade {
  position:absolute; left:50%; top:44%;
  transform:translate(-50%,-50%);
  width:min(820px, 90vw); z-index:2; pointer-events:none;
  animation:zeichnung-ab 2.2s var(--kurve) 2.9s forwards;
}
@keyframes zeichnung-ab {
  from { opacity:1; transform:translate(-50%,-50%) scale(1); }
  to   { opacity:0; transform:translate(-50%,-50%) scale(1.07); }
}
.fassade [pathLength] {
  fill:none; stroke:var(--creme); stroke-width:1.05;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:zeichnen 2.1s var(--kurve) forwards;
  animation-delay:calc(var(--o,0) * 0.07s + 0.3s);
}
@keyframes zeichnen { to { stroke-dashoffset:0; } }
.fassade .gold { stroke:var(--gold); }
.fassade .wasser {
  animation:zeichnen 2.1s var(--kurve) forwards, stroemen 11s ease-in-out infinite alternate;
  animation-delay:calc(var(--o,0) * 0.07s + 0.3s), 2.6s;
}
@keyframes stroemen { to { transform:translateX(10px); } }
@media (prefers-reduced-motion: reduce) {
  .fassade { animation:none; opacity:0.22; }
  .fassade [pathLength] { stroke-dashoffset:0 !important; }
}

/* Der Inhalt löst sich beim Scrollen weich auf — Wert aus dem Skript */
.buehne-inhalt {
  position:relative; z-index:3; text-align:center; width:100%;
  opacity:var(--hero-klar, 1);
  transform:translateY(calc((1 - var(--hero-klar, 1)) * -60px));
  /* Nur 3px statt 9px: Der Text soll weichen, nicht verschmieren. */
  filter:blur(calc((1 - var(--hero-klar, 1)) * 3px));
}

.buehne .ort {
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.68rem; letter-spacing:0.56em; text-transform:uppercase;
  color:var(--leise); padding-left:0.56em;
  opacity:0; animation:auf 1.5s var(--kurve) 0.4s forwards;
}
.buehne h1 {
  font-size:clamp(4.4rem, 19vw, 15rem);
  line-height:0.86; letter-spacing:0.2em; text-indent:0.2em;
  margin:clamp(20px,3vw,42px) 0 0;
}
.buehne .versprechen {
  font-size:clamp(1.1rem, 1.6vw, 1.5rem); font-style:italic;
  max-width:32ch; margin:clamp(26px,3vw,44px) auto clamp(38px,4.5vw,64px);
  color:var(--leise);
  opacity:0; animation:auf 1.5s var(--kurve) 1.25s forwards;
}
.buehne .knopf-reihe { opacity:0; animation:auf 1.5s var(--kurve) 1.5s forwards; }
@keyframes auf { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }

.achse { display:flex; align-items:center; justify-content:center; gap:18px; margin:clamp(22px,2.6vw,36px) 0; }
.achse::before, .achse::after {
  content:''; height:1px; width:clamp(46px,15vw,190px);
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.achse span { width:5px; height:5px; transform:rotate(45deg); background:var(--gold); }

/* ---------- Scroll-Indikator ---------- */
.scroll-zeichen {
  position:absolute; left:50%; bottom:clamp(28px,4vh,52px); z-index:4;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.6rem; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--leise); text-decoration:none;
  opacity:0; animation:auf 1.5s var(--kurve) 2.2s forwards;
  transition:color 0.5s var(--kurve);
}
.scroll-zeichen:hover { color:var(--creme); }
.scroll-zeichen i {
  display:block; width:1px; height:56px;
  background:linear-gradient(180deg, var(--gold), transparent);
  transform-origin:top;
  animation:tropfen 2.6s ease-in-out infinite;
}
@keyframes tropfen {
  0%,100% { transform:scaleY(0.28); opacity:0.35; }
  50%     { transform:scaleY(1);    opacity:1; }
}

/* ============================================================
   SCHALTFLÄCHEN — schwebend, mit Licht beim Überfahren
   Die Verschiebung liefert das Skript, die Gestaltung steht hier.
   ============================================================ */
.knopf-reihe { display:flex; gap:clamp(12px,1.4vw,22px); justify-content:center; flex-wrap:wrap; }

.knopf {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-block;
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
  text-decoration:none; padding:22px 46px;
  border:1px solid var(--gold);
  color:var(--creme); background:transparent;
  transform:translate3d(var(--zug-x,0px), var(--zug-y,0px), 0);
  transition:transform 0.6s var(--kurve), color 0.6s var(--kurve), border-color 0.6s var(--kurve);
}
.knopf.zieht { transition:transform 0.16s ease-out, color 0.6s var(--kurve); }

/* Licht entsteht dort, wo der Zeiger steht */
.knopf::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle 120px at var(--licht-x,50%) var(--licht-y,50%),
             rgba(176,141,87,0.42), transparent 68%);
  opacity:0; transition:opacity 0.55s var(--kurve);
}
.knopf:hover::before { opacity:1; }
.knopf:hover { border-color:var(--gold-hell); }

.knopf--gefuellt { background:var(--gold); color:var(--schwarz); border-color:var(--gold); }
.knopf--gefuellt::before { background:radial-gradient(circle 120px at var(--licht-x,50%) var(--licht-y,50%), rgba(255,244,224,0.55), transparent 68%); }

/* ============================================================
   ABSCHNITTE — Editorial, asymmetrisch
   ============================================================ */
.karte-kopf { max-width:34ch; margin-bottom:clamp(60px,9vw,130px); }
.karte-kopf--mitte { margin-inline:auto; text-align:center; }

/* Geschichte: heller Bruch, einmal auf der ganzen Seite */
.stuck-flaeche {
  background:var(--creme); color:var(--schwarz);
  transition:background-color 0.9s var(--kurve), color 0.9s var(--kurve);
}
.geschichte .augenbraue { color:var(--gold); }
.geschichte h2 { color:var(--schwarz); }
.geschichte-kopf { max-width:32ch; margin-bottom:clamp(70px,9vw,140px); }
/* Farben kommen ausschließlich aus den Variablen. Im Mittagsmodus
   tauschen --creme und --schwarz ihre Rolle, dadurch dreht sich der
   Abschnitt von selbst um. Zusätzliche Sonderregeln haben hier genau
   diesen Fehler erzeugt: Text in derselben Farbe wie der Grund. */
.geschichte-kopf p { margin-top:clamp(20px,2.4vw,34px); color:color-mix(in srgb, var(--schwarz) 66%, transparent); }

/* Zeitleiste: goldene Linie, die beim Scrollen mitwächst */
.zeitleiste { position:relative; padding-left:clamp(28px,5vw,72px); }
.zeitleiste::before {
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:color-mix(in srgb, var(--schwarz) 16%, transparent);
}
.zeitleiste::after {
  content:''; position:absolute; left:0; top:6px; width:1px;
  height:calc(var(--fortschritt, 0) * 100%);
  max-height:calc(100% - 12px);
  background:linear-gradient(180deg, var(--gold), var(--gold-hell));
  box-shadow:0 0 14px rgba(176,141,87,0.5);
}

.station { position:relative; padding:clamp(38px,5vw,74px) 0; max-width:46ch; }
.station::before {
  content:''; position:absolute;
  left:calc(clamp(28px,5vw,72px) * -1); top:calc(clamp(38px,5vw,74px) + 16px);
  width:7px; height:7px; margin-left:-3px;
  background:var(--gold); transform:rotate(45deg);
}
.station .jahr {
  font-family:'Italiana', serif;
  font-size:clamp(3.4rem,8vw,6.4rem); line-height:0.9;
  color:var(--schwarz); display:block; margin-bottom:clamp(14px,1.6vw,24px);
}
.station p { color:color-mix(in srgb, var(--schwarz) 66%, transparent); }

/* Jede zweite Station rückt ein — Magazinsatz statt Tabelle */
.station:nth-child(even) { margin-left:clamp(0px,12vw,190px); }

/* ---------- Die zwei Häuser ---------- */
.haeuser { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:1px; background:var(--linie); border-block:1px solid var(--linie); }
.haus-karte {
  background:var(--schwarz); padding:clamp(48px,6vw,86px) clamp(30px,3.4vw,54px);
  text-decoration:none; color:inherit;
  transition:background-color 0.7s var(--kurve);
}
.haus-karte:hover { background:var(--tiefe); }
.haus-karte .rolle { font-family:'Work Sans', system-ui, sans-serif; font-size:0.62rem; letter-spacing:0.36em; text-transform:uppercase; color:var(--gold); }
.haus-karte h3 { font-size:clamp(2.4rem,4vw,3.6rem); color:var(--creme); margin:18px 0 20px; line-height:1; }
.haus-karte p { color:var(--leise); font-size:0.98rem; }
.haus-karte .pfeil {
  display:inline-block; margin-top:clamp(24px,3vw,44px);
  font-family:'Work Sans', system-ui, sans-serif; font-size:0.68rem;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--gold);
  transition:transform 0.6s var(--kurve);
}
.haus-karte:hover .pfeil { transform:translateX(12px); }

/* ---------- Häuserblöcke ---------- */
.haus-block { border-top:1px solid var(--linie); }
.haus-kopf { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:clamp(26px,3vw,44px); margin-bottom:clamp(44px,5vw,80px); border-bottom:1px solid var(--linie); }
.haus-kopf .anschrift { font-family:'Work Sans', system-ui, sans-serif; font-size:0.86rem; color:var(--leise); text-align:right; line-height:2; }
.haus-kopf .anschrift a { color:var(--creme); text-decoration:none; border-bottom:1px solid var(--linie); }
.haus-kopf .anschrift a:hover { border-bottom-color:var(--gold); }
@media (max-width:680px) { .haus-kopf .anschrift { text-align:left; } }

.zeiten-paar {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:clamp(24px,3vw,48px);
  font-family:'Work Sans', system-ui, sans-serif; font-size:0.9rem;
  margin-bottom:clamp(48px,6vw,92px); padding:clamp(28px,3vw,44px) 0; border-block:1px solid var(--linie);
}
.zeiten-paar dt { font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.zeiten-paar dd { color:var(--creme); font-size:1.02rem; }

/* ---------- Speisekarte ---------- */
.gruppen { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px,1fr)); gap:clamp(24px,3vw,40px) clamp(50px,7vw,110px); }
.gruppe h3 { font-size:clamp(1.6rem,2.4vw,2.1rem); color:var(--creme); padding-bottom:18px; margin-bottom:10px; border-bottom:1px solid var(--linie); }
.posten { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:18px 0; }
.posten .bezeichnung { color:var(--creme); }
.posten .bezeichnung em { display:block; font-size:0.88rem; color:var(--leise); font-style:normal; margin-top:3px; }
.posten .betrag { font-family:'Work Sans', system-ui, sans-serif; font-size:0.86rem; color:var(--gold); white-space:nowrap; }

/* ============================================================
   DIE WEINWAND — als Schaustück
   ============================================================ */
.vinothek { background:var(--tiefe); border-block:1px solid var(--linie); overflow:hidden; }
.vinothek-raster { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:clamp(44px,7vw,120px); align-items:center; }
.vinothek-text p { margin-top:clamp(20px,2.4vw,32px); color:var(--leise); }

.wand-ausschnitt {
  position:relative;
  aspect-ratio:4/5;
  border:1px solid rgba(176,141,87,0.2);
  padding:clamp(16px,2vw,26px);
  background:radial-gradient(ellipse 80% 60% at 50% 45%, rgba(176,141,87,0.09), transparent 72%), #0b0b0b;
  display:grid; gap:7px; align-content:center;
  box-shadow:inset 0 0 70px rgba(0,0,0,0.8);
  perspective:1000px;
}
.wand-ausschnitt .fach { border-bottom:1px solid rgba(176,141,87,0.12); }

.flasche {
  width:62%; height:var(--hoehe,80%); margin:0 auto;
  border-radius:44% 44% 3px 3px / 12% 12% 2px 2px;
  background:linear-gradient(175deg, rgba(255,255,255,0.16) 0%, var(--ton,#2b1a1c) 22%, rgba(0,0,0,0.6) 100%);
  box-shadow:inset 0 0 8px rgba(0,0,0,0.55);
  opacity:0; transform:translateY(20px);
  animation:flasche-ein 1.3s var(--kurve) forwards;
  animation-delay:var(--verzug,0s);
}
@keyframes flasche-ein { to { opacity:1; transform:none; } }

/* Lichtreflex, der beim Überfahren über die Flaschen streicht */
.wand-ausschnitt::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 200px at var(--licht-x,50%) var(--licht-y,50%),
             rgba(255,240,214,0.26), rgba(176,141,87,0.08) 40%, transparent 66%);
  opacity:0; transition:opacity 0.7s var(--kurve);
  /* mix-blend-mode entfernt: zwingt den Browser, die Fläche darunter
     bei jeder Mausbewegung neu zusammenzusetzen. Die Deckkraft ist
     stattdessen leicht erhöht — optisch fast identisch, deutlich billiger. */
}
.wand-ausschnitt.wach::after { opacity:1; }

/* ---------- Gästestimmen ---------- */
.stimmen { display:grid; grid-template-columns:repeat(auto-fit, minmax(360px,1fr)); gap:clamp(1px,0.1vw,1px); background:var(--linie); border:1px solid var(--linie); }
.stimme { background:var(--schwarz); padding:clamp(44px,5vw,72px) clamp(30px,3.4vw,52px); display:flex; flex-direction:column; }
.stimme .marke { font-family:'Italiana', serif; font-size:5rem; line-height:0.55; color:var(--gold); opacity:0.45; }
.stimme .titel { font-family:'Italiana', serif; font-size:clamp(1.5rem,2.2vw,2rem); color:var(--creme); margin:26px 0 18px; }
.stimme blockquote { color:var(--leise); margin-bottom:32px; flex:1; font-style:italic; }
.stimme figcaption { font-family:'Work Sans', system-ui, sans-serif; font-size:0.72rem; letter-spacing:0.1em; color:var(--leise); border-top:1px solid var(--linie); padding-top:22px; }
.stimme figcaption strong { color:var(--gold); font-weight:400; }

.echtheitshinweis {
  margin-top:clamp(38px,4vw,64px); padding:clamp(24px,2.6vw,38px);
  border:1px solid var(--linie);
  font-family:'Work Sans', system-ui, sans-serif; font-size:0.8rem;
  color:var(--leise); line-height:1.9;
}

/* ---------- Leistungen ---------- */
.leistungen { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1px; background:var(--linie); border:1px solid var(--linie); }
.leistung { background:var(--schwarz); padding:clamp(44px,5vw,72px) clamp(28px,3vw,44px); position:relative; overflow:hidden; transition:background-color 0.7s var(--kurve); }
.leistung:hover { background:var(--tiefe); }
.leistung .nr { font-family:'Work Sans', system-ui, sans-serif; font-size:0.62rem; letter-spacing:0.36em; color:var(--gold); }
.leistung h3 { font-size:clamp(1.7rem,2.4vw,2.2rem); color:var(--creme); margin:18px 0 18px; line-height:1.05; }
.leistung p { color:var(--leise); font-size:0.96rem; }
.leistung::after { content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width 0.8s var(--kurve); }
.leistung:hover::after { width:100%; }

/* ---------- Das Zeichen ---------- */
.zeichen { text-align:center; border-block:1px solid var(--linie); background:radial-gradient(ellipse 46% 58% at 50% 50%, rgba(176,141,87,0.08), transparent 74%), var(--schwarz); }
.tafel-buehne { perspective:1200px; }
.zeichen-tafel {
  position:relative; width:min(600px,86vw); margin:0 auto;
  padding:clamp(30px,4vw,56px);
  background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(176,141,87,0.10), transparent 70%), #0b0b0b;
  border:1px solid rgba(176,141,87,0.22);
  box-shadow:0 26px 70px rgba(0,0,0,0.55), inset 0 0 60px rgba(0,0,0,0.6);
  transform-style:preserve-3d;
  transform:rotateX(var(--kipp-x,0deg)) rotateY(var(--kipp-y,0deg));
  transition:transform 0.7s var(--kurve), box-shadow 0.7s var(--kurve);
}
.zeichen-tafel.wach { transition:transform 0.14s ease-out, box-shadow 0.14s ease-out; box-shadow:0 40px 100px rgba(0,0,0,0.7), inset 0 0 60px rgba(0,0,0,0.6); }
.zeichen-tafel img { width:100%; height:auto; display:block; transform:translateZ(44px); }
.zeichen-tafel::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 46% at var(--licht-x,50%) var(--licht-y,50%), rgba(255,240,214,0.16), transparent 62%);
  opacity:0; transition:opacity 0.6s var(--kurve);
}
.zeichen-tafel.wach::after { opacity:1; }
.zeichen .leitwort { font-family:'Italiana', serif; font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--creme); margin-top:clamp(40px,5vw,72px); letter-spacing:0.24em; padding-left:0.24em; }
@media (hover:none), (prefers-reduced-motion: reduce) {
  .zeichen-tafel { transform:none !important; }
  .zeichen-tafel img { transform:none; }
  .zeichen-tafel::after, .wand-ausschnitt::after { display:none; }
}

/* ---------- Fußzeile ---------- */
.fusszeile {
  border-top:1px solid var(--linie);
  padding:clamp(80px,10vw,150px) 0 clamp(50px,6vw,80px);
  font-family:'Work Sans', system-ui, sans-serif; font-size:0.82rem;
  color:var(--leise); text-align:center; line-height:2.1;
}
.fusszeile a { color:var(--leise); text-decoration:none; border-bottom:1px solid transparent; transition:color 0.5s var(--kurve), border-color 0.5s var(--kurve); }
.fusszeile a:hover { color:var(--gold); border-bottom-color:var(--gold); }
.fusszeile nav { margin-top:clamp(26px,3vw,44px); display:flex; gap:clamp(20px,3vw,44px); justify-content:center; flex-wrap:wrap; letter-spacing:0.2em; text-transform:uppercase; font-size:0.7rem; }

/* ---------- Entwurfsmarkierungen ---------- */
.entwurfsband { background:#4a1616; color:#f6e6e6; font-family:'Work Sans', system-ui, sans-serif; font-size:0.76rem; letter-spacing:0.06em; text-align:center; padding:12px 20px; line-height:1.6; }
.entwurfsband strong { color:#fff; letter-spacing:0.2em; }
.platzhalter { border:1px dashed rgba(190,90,90,0.55); background:rgba(120,35,35,0.12); padding:3px 8px; border-radius:1px; }
.pruefen { font-family:'Work Sans', system-ui, sans-serif; font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:#cf8a8a; border:1px solid rgba(190,90,90,0.42); padding:3px 9px; white-space:nowrap; vertical-align:middle; margin-left:10px; }

/* ============================================================
   DER FLUSS
   Ab hier wird die Seite von einem Stapel Blöcke zu einer Fahrt.

   Drei Regeln:
   1. Keine Kante trennt zwei Szenen. Übergänge sind Verläufe.
   2. Szenen überlappen. Die neue wächst unter der alten hervor.
   3. Der Rhythmus wechselt. Gleicher Abstand heißt gleich wichtig —
      und wenn alles gleich wichtig ist, ist nichts wichtig.
   ============================================================ */

/* ---------- 1. Alle harten Kanten fallen ---------- */
.haus-block,
.vinothek,
.zeichen,
.fusszeile,
.haeuser,
.stimmen,
.leistungen { border:0; }

.haeuser, .stimmen, .leistungen { background:transparent; gap:0; }
.haus-karte, .stimme, .leistung { background:transparent; }

/* Statt Rahmen: Haarlinien, die an den Enden verlöschen.
   Eine Linie, die ausläuft, trennt nicht — sie gliedert. */
.haus-karte + .haus-karte,
.leistung + .leistung,
.stimme + .stimme { position:relative; }
.haus-karte + .haus-karte::before,
.leistung + .leistung::before,
.stimme + .stimme::before {
  content:''; position:absolute; left:0; top:14%; bottom:14%; width:1px;
  background:linear-gradient(180deg, transparent, var(--linie) 22%, var(--linie) 78%, transparent);
}
@media (max-width:900px) {
  .haus-karte + .haus-karte::before,
  .leistung + .leistung::before,
  .stimme + .stimme::before {
    left:14%; right:14%; top:0; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg, transparent, var(--linie) 22%, var(--linie) 78%, transparent);
  }
}

/* ---------- 2. Der durchgehende Raum ----------
   Ein einziger, fest stehender Lichtraum hinter allem. Er wandert
   nicht mit den Abschnitten, sondern bleibt — dadurch fühlt sich
   das Scrollen an wie eine Kamerafahrt durch einen Raum statt wie
   ein Blättern durch Seiten. */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%,  rgba(176,141,87,0.10), transparent 62%),
    radial-gradient(ellipse 70% 50% at 12% 42%,  rgba(176,141,87,0.045), transparent 66%),
    radial-gradient(ellipse 80% 60% at 88% 88%,  rgba(176,141,87,0.05), transparent 68%);
  transition:opacity 0.9s var(--kurve);
}
[data-tag="mittag"] body::before { opacity:0.5; }

/* ---------- 3. Szenen überlappen ----------
   Jede Szene zieht sich unter die vorherige. Der Schatten der
   oberen fällt auf die untere — daraus entsteht Tiefe. */
.szene {
  position:relative;
  margin-top:clamp(-190px, -14vw, -90px);
  padding-top:clamp(190px, 22vw, 320px);
  z-index:1;
}
.szene::before {
  content:''; position:absolute; left:0; right:0; top:0;
  height:clamp(180px, 20vw, 300px);
  background:linear-gradient(180deg, var(--schwarz) 0%, rgba(11,11,11,0.72) 38%, transparent 100%);
  pointer-events:none;
}
[data-tag="mittag"] .szene::before {
  background:linear-gradient(180deg, var(--schwarz) 0%, rgba(245,242,236,0.72) 38%, transparent 100%);
}

/* ---------- 4. Der helle Bruch bekommt weiche Ränder ----------
   Vorher ein hartes Rechteck in Creme. Jetzt eine Fläche, deren
   Kanten in die Dunkelheit auslaufen: Die Geschichte taucht auf
   und versinkt wieder. */
.stuck-flaeche {
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  margin-block:clamp(-160px, -12vw, -80px);
  padding-block:clamp(240px, 26vw, 400px);
}

/* ---------- 5. Der Atem ----------
   Leerraum als Gestaltungsmittel. Kein Inhalt, nur Licht und Zeit.
   Zwischen zwei Kapiteln darf nichts passieren. */
.atem {
  position:relative;
  display:block;
  border:0;
  pointer-events:none;
}
.atem--kurz  { height:22vh; }
.atem--lang  { height:46vh; }
.atem--tief  { height:62vh; }

/* Ein einzelner Lichtschein in der Stille */
.atem::after {
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(760px,86vw); height:70%;
  background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(176,141,87,0.09), transparent 70%);
  filter:blur(30px);
}

/* ---------- 6. Das Wahrzeichen kehrt wieder ----------
   Zwischen den Kapiteln taucht der Brunnen erneut auf, sehr weit
   entfernt und beidseitig ausblendend. Ein Refrain, keine Wiederholung:
   der Blick kehrt zurück, bevor die nächste Szene beginnt. */
.zwischenbild {
  position:relative;
  height:clamp(420px, 62vh, 720px);
  overflow:hidden;
  margin-block:clamp(-140px, -10vw, -70px);
}
/* Nur der Rahmen bewegt sich (über data-tiefe), nicht zusätzlich
   das Bild darin. Vorher liefen beide — die Verschiebung war
   doppelt so groß wie gewollt. */
.zwischenbild img {
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  opacity:0.3;
  transform:scale(1.06);
}
[data-tag="mittag"] .zwischenbild img { opacity:0.42; }
.zwischenbild::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--schwarz) 0%, rgba(11,11,11,0.55) 26%,
    rgba(11,11,11,0.55) 74%, var(--schwarz) 100%);
}
[data-tag="mittag"] .zwischenbild::after {
  background:linear-gradient(180deg,
    var(--schwarz) 0%, rgba(245,242,236,0.5) 26%,
    rgba(245,242,236,0.5) 74%, var(--schwarz) 100%);
}

/* ---------- 7. Die Zeitleiste endet nicht ----------
   Die goldene Linie läuft über den letzten Eintrag hinaus und
   verliert sich nach unten. Sie führt den Blick weiter, statt
   ihn anzuhalten. */
.zeitleiste { padding-bottom:clamp(90px,12vw,180px); }
.zeitleiste::before {
  bottom:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--schwarz) 16%, transparent) 62%, transparent 100%);
}
.zeitleiste::after {
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-hell) 72%, transparent 100%);
  max-height:100%;
}

/* ---------- 8. Die Weinwand kündigt sich an ----------
   Ein Schimmer des Regals liegt schon über dem vorigen Abschnitt,
   bevor der Weinabschnitt beginnt. */
.vinothek {
  background:transparent;
  position:relative;
}
.vinothek::before {
  content:''; position:absolute; left:0; right:0; top:clamp(-300px,-22vw,-160px);
  height:clamp(360px, 40vw, 620px);
  background:
    radial-gradient(ellipse 62% 52% at 72% 62%, rgba(176,141,87,0.12), transparent 70%),
    linear-gradient(180deg, transparent, rgba(19,19,19,0.85) 62%, var(--tiefe) 100%);
  pointer-events:none; z-index:-1;
}
.vinothek::after {
  content:''; position:absolute; left:0; right:0; bottom:clamp(-300px,-22vw,-160px);
  height:clamp(360px, 40vw, 620px);
  background:linear-gradient(180deg, var(--tiefe) 0%, rgba(19,19,19,0.85) 38%, transparent 100%);
  pointer-events:none; z-index:-1;
}

/* Das Regal selbst verliert seinen Rahmen und blendet an den
   Rändern aus — kein Kasten mehr, sondern eine Wand im Dunkeln. */
.wand-ausschnitt {
  border:0;
  box-shadow:none;
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 50%, #000 52%, transparent 100%);
          mask-image:radial-gradient(ellipse 78% 82% at 50% 50%, #000 52%, transparent 100%);
}

/* ---------- 9. Der Ausklang ----------
   Die Fußzeile beginnt lange vor ihrem Anfang durchzuschimmern. */
.fusszeile {
  position:relative;
  margin-top:clamp(-120px,-9vw,-60px);
  padding-top:clamp(280px, 26vw, 420px);
}
.fusszeile::before {
  content:''; position:absolute; left:0; right:0; top:0;
  height:clamp(300px, 28vw, 460px);
  background:linear-gradient(180deg, transparent 0%, rgba(11,11,11,0.6) 46%, var(--schwarz) 100%);
  pointer-events:none;
}
[data-tag="mittag"] .fusszeile::before {
  background:linear-gradient(180deg, transparent 0%, rgba(245,242,236,0.6) 46%, var(--schwarz) 100%);
}

/* ---------- 10. Rhythmus ----------
   Nicht mehr überall derselbe Abstand. Kapitel bekommen Luft,
   Fortsetzungen rücken zusammen. Das erzeugt Betonung. */
.haus-block           { padding-top:clamp(60px,7vw,110px); }
.haus-block + .haus-block { padding-top:clamp(40px,5vw,80px); }
#stimmen              { padding-block:clamp(150px,20vw,300px); }
#leistungen           { padding-top:clamp(90px,11vw,170px); }
.zeichen              { padding-block:clamp(160px,22vw,320px); }

/* ============================================================
   LUCE / NOTTE
   Kein Umschalter, sondern eine Entscheidung. Zwei Hälften,
   volle Höhe, jede zeigt das Haus zu ihrer Tageszeit. Wer sich
   nähert, dem fährt Licht über seine Seite. Wer wählt, sieht die
   ganze Seite über zwei Sekunden hinüberblenden.
   ============================================================ */
.tageswahl {
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  min-height:96svh;
  padding:0; margin-block:clamp(-140px,-10vw,-70px);
  overflow:hidden;
}

.haelfte {
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,1.6vw,26px);
  padding:clamp(40px,6vw,90px) clamp(20px,3vw,50px);
  text-decoration:none; color:inherit;
  background:none; border:0; cursor:pointer;
  font:inherit; text-align:center;
  overflow:hidden;
  isolation:isolate;
}

.haelfte-bild {
  position:absolute; inset:0; z-index:-2;
  overflow:hidden;
}
.haelfte-bild img {
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  transition:transform 2.2s var(--kurve), filter 1.4s var(--kurve);
  /* Depth of Field: nur der Hintergrund ist weich, nie der Text */
  filter:blur(3px) saturate(0.85);
}
.haelfte:hover .haelfte-bild img,
.haelfte:focus-visible .haelfte-bild img { transform:scale(1); filter:blur(0.5px) saturate(1); }

/* Abdunklung, die beim Nähern zurückweicht */
.haelfte-bild::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,11,0.72), rgba(11,11,11,0.86));
  transition:opacity 1.4s var(--kurve);
}
.haelfte:hover .haelfte-bild::after,
.haelfte:focus-visible .haelfte-bild::after { opacity:0.62; }

/* Das Licht, das über die Szene fährt */
.haelfte::before {
  content:''; position:absolute; inset:-30% -10%; z-index:-1;
  background:linear-gradient(105deg, transparent 34%, rgba(255,240,214,0.16) 50%, transparent 66%);
  transform:translateX(-120%);
  transition:transform 1.9s var(--kurve);
  pointer-events:none;
}
.haelfte:hover::before,
.haelfte:focus-visible::before { transform:translateX(120%); }

.haelfte .wort-gross {
  font-family:'Italiana', serif;
  font-size:clamp(3.4rem, 9vw, 8.4rem);
  line-height:0.9; letter-spacing:0.22em; padding-left:0.22em;
  color:var(--creme);
  transition:color 1.2s var(--kurve), letter-spacing 1.6s var(--kurve);
}
.haelfte:hover .wort-gross { letter-spacing:0.3em; padding-left:0.3em; }
.haelfte .zeit {
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.68rem; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--leise); padding-left:0.4em;
}
.haelfte .zustand {
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.6rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold); opacity:0;
  transition:opacity 0.9s var(--kurve);
}
.haelfte[aria-pressed="true"] .zustand { opacity:1; }

/* Die Trennung ist eine verlöschende Linie, keine Kante */
.tageswahl::after {
  content:''; position:absolute; left:50%; top:12%; bottom:12%; width:1px;
  background:linear-gradient(180deg, transparent, var(--linie) 24%, var(--linie) 76%, transparent);
  pointer-events:none;
}

@media (max-width:760px) {
  .tageswahl { grid-template-columns:1fr; min-height:0; }
  .haelfte { min-height:52svh; }
  .tageswahl::after { left:12%; right:12%; top:50%; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg, transparent, var(--linie) 24%, var(--linie) 76%, transparent); }
}

/* ---------- Der Übergang: zwei Sekunden Dunkelheit ---------- */
.schleier {
  position:fixed; inset:0; z-index:180;
  background:#000;
  opacity:0; pointer-events:none;
  transition:opacity 0.9s var(--kurve);
}
.schleier.zu { opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .schleier { transition:none; }
}

/* ============================================================
   MESSING
   Das Logo bekommt Materialtiefe statt Politur: geschichtete
   Verläufe, die sich mit der Neigung verschieben. Kein Modell,
   kein Renderer — die Wirkung entsteht aus Licht auf Schichten.
   ============================================================ */
.zeichen-tafel::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(calc(112deg + var(--kipp-y, 0deg) * 4),
      rgba(255,236,196,0.00) 30%,
      rgba(255,236,196,0.13) 46%,
      rgba(176,141,87,0.20)  52%,
      rgba(255,236,196,0.09) 58%,
      rgba(255,236,196,0.00) 74%);
  mix-blend-mode:screen;
  opacity:0.7;
  transition:opacity 0.7s var(--kurve);
}
.zeichen-tafel.wach::before { opacity:1; }

/* ---------- Weinwand: Tiefe je Flasche ----------
   Jede Flasche liegt auf einer eigenen Ebene. Beim Bewegen des
   Zeigers verschieben sie sich um zwei bis vier Pixel gegeneinander.
   Genau so entsteht Räumlichkeit — nicht durch mehr Bewegung. */
.wand-ausschnitt .fach {
  transform:translate3d(calc(var(--schub-x,0px) * var(--ebene,1)),
                        calc(var(--schub-y,0px) * var(--ebene,1)), 0);
  transition:transform 0.9s var(--kurve);
}
.wand-ausschnitt.wach .fach { transition:transform 0.2s ease-out; }

/* Glasreflex auf jeder Flasche */
.flasche { position:relative; }
.flasche::after {
  content:''; position:absolute; left:16%; top:8%; width:16%; height:74%;
  border-radius:40%;
  background:linear-gradient(180deg, rgba(255,246,228,0.34), rgba(255,246,228,0.04) 60%, transparent);
  opacity:0.5;
}

/* ============================================================
   MENÜ
   Drei Striche, die sich beim Öffnen zum Kreuz drehen. Dahinter
   eine ruhige Tafel statt einer aufgeklappten Liste — auf dem
   Handy war bisher gar keine Navigation erreichbar.
   ============================================================ */
.menue-knopf {
  position:relative; z-index:120;
  width:44px; height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:0;
}
.menue-knopf span {
  display:block; width:24px; height:1px; background:var(--creme);
  transition:transform 0.6s var(--kurve), opacity 0.4s var(--kurve), background-color 0.9s var(--kurve);
}
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.menue-tafel {
  position:fixed; inset:0; z-index:110;
  background:var(--schwarz);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(16px,2.4vw,30px);
  opacity:0; visibility:hidden;
  transition:opacity 0.7s var(--kurve), visibility 0.7s;
}
.menue-tafel.offen { opacity:1; visibility:visible; }

.menue-tafel a {
  font-family:'Italiana', serif;
  font-size:clamp(1.9rem, 5vw, 3.4rem);
  color:var(--creme); text-decoration:none; line-height:1.1;
  letter-spacing:0.06em;
  opacity:0; transform:translateY(20px);
  transition:opacity 0.8s var(--kurve), transform 0.8s var(--kurve), color 0.5s var(--kurve);
}
.menue-tafel.offen a { opacity:1; transform:none; }
.menue-tafel.offen a:nth-child(1) { transition-delay:0.12s; }
.menue-tafel.offen a:nth-child(2) { transition-delay:0.18s; }
.menue-tafel.offen a:nth-child(3) { transition-delay:0.24s; }
.menue-tafel.offen a:nth-child(4) { transition-delay:0.30s; }
.menue-tafel.offen a:nth-child(5) { transition-delay:0.36s; }
.menue-tafel a:hover { color:var(--gold); }

.menue-tafel .karte-schnell {
  margin-top:clamp(20px,3vw,40px);
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.74rem; letter-spacing:0.24em; text-transform:uppercase;
  border:1px solid var(--gold); padding:18px 38px; color:var(--gold);
  transition-delay:0.44s;
}
.menue-tafel .karte-schnell:hover { background:var(--gold); color:var(--schwarz); }

.menue-tafel .drucken {
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--leise); background:none; border:0; cursor:pointer;
  margin-top:6px; transition-delay:0.5s; padding:10px;
}
.menue-tafel .drucken:hover { color:var(--gold); }

body.menue-offen { overflow:hidden; }

/* ============================================================
   DRUCKFASSUNG DER KARTE
   Der Browser erzeugt daraus die PDF-Datei — kein Zusatzprogramm,
   keine Bibliothek. Gedruckt werden nur die Speisekarten und die
   Kontaktangaben, nicht die Inszenierung.
   ============================================================ */
@media print {
  .kopfleiste, .buehne, .atem, .zwischenbild, .tageswahl, .zeichen,
  .vinothek, #stimmen, #leistungen, .geschichte, .menue-tafel,
  .menue-knopf, .schleier, body::after, body::before { display:none !important; }

  body { background:#fff !important; color:#000 !important; font-size:11pt; }
  .haus-block { break-inside:avoid; page-break-inside:avoid; border:0; padding:0 0 28pt; margin:0; }
  .haus-kopf { border-bottom:1pt solid #000; margin-bottom:14pt; padding-bottom:8pt; }
  h2 { font-size:20pt !important; color:#000 !important; }
  .gruppe h3 { font-size:13pt; color:#000; border-bottom:0.5pt solid #999; }
  .posten .bezeichnung, .zeiten-paar dd { color:#000; }
  .posten .betrag, .zeiten-paar dt, .augenbraue { color:#555 !important; }
  .gruppen { display:block; }
  .zeiten-paar { border:0; padding:0 0 12pt; }
  a { text-decoration:none; color:#000; }
  .platzhalter { border:0.5pt dashed #c00; background:none; }
  .pruefen { color:#c00; border-color:#c00; }
}

/* ============================================================
   RESERVIEREN
   Ein Gast, der einen Tisch will, darf nie suchen müssen.
   In der Kopfleiste ständig sichtbar, auf dem Handy zusätzlich
   als Balken am unteren Rand — dort, wo der Daumen liegt.
   ============================================================ */
.reservieren-leiste {
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
  border:1px solid var(--gold); padding:13px 26px;
  white-space:nowrap;
  transition:background-color 0.5s var(--kurve), color 0.5s var(--kurve);
}
.reservieren-leiste:hover { background:var(--gold); color:var(--schwarz); }
@media (max-width:900px) { .reservieren-leiste { display:none; } }

/* Der Daumenbalken. Erscheint erst, wenn der Kopfbereich weg ist —
   solange der große Knopf oben sichtbar ist, wäre er doppelt. */
.daumenbalken {
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:none;
  background:rgba(11,11,11,0.94);
  border-top:1px solid var(--linie);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(110%);
  transition:transform 0.6s var(--kurve);
}
[data-tag="mittag"] .daumenbalken { background:rgba(245,242,236,0.96); }
.daumenbalken.sichtbar { transform:none; }
.daumenbalken a {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--gold); color:var(--schwarz);
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none; padding:18px;
}
@media (max-width:900px) { .daumenbalken { display:block; } }
@media print { .daumenbalken, .reservieren-leiste { display:none !important; } }

/* Die Reservierungsangaben im Häuserblock hervorheben —
   sie sind die eigentliche Handlung, nicht Beiwerk. */
.ruf {
  display:inline-flex; align-items:baseline; gap:12px;
  font-family:'Italiana', serif;
  font-size:clamp(1.6rem,2.6vw,2.3rem);
  color:var(--gold) !important;
  text-decoration:none; border:0 !important;
  letter-spacing:0.04em;
  transition:color 0.5s var(--kurve);
}
.ruf:hover { color:var(--gold-hell) !important; }
.ruf small {
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.6rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--leise);
}

/* ---------- Handy: eigene Entscheidungen ---------- */
@media (max-width:640px) {
  :root { --luft:clamp(84px,15vw,120px); }
  .buehne h1 { letter-spacing:0.1em; text-indent:0.1em; }
  .station:nth-child(even) { margin-left:0; }
  .zeitleiste { padding-left:26px; }
  .lichtstrahl { opacity:0.5; }
  .gruppen { gap:6px 0; }
}