@charset "utf-8";

/* Selbst gehostete Schriften, keine fremden Server. Die Regeln stehen direkt
   hier, weil site.css mit Fingerabdruck ausgeliefert wird und eine separate
   fonts.css sonst am Browser-Cache vorbei veralten kann. */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Variable.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-VariableItalic.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   Gaststätte Vaske-Thölking, Elsten
   Gestaltungssystem, zweite Fassung.

   Ein Thema: dunkler Abend im Gasthaus. Tiefes Gruen-Schwarz als Grund,
   Knochenweiss als Text, Bernstein als einziger Akzent (Kerzenlicht, Bier,
   Messingzapfhahn). Die Fotos tragen die Waerme, die Flaechen halten sich
   zurueck.

   Schrift: Cabinet Grotesk fuer Ueberschriften, General Sans fuer Text.
   Formen: Bilder und Flaechen scharfkantig, Bedienelemente als Pille.
   Das ist die dokumentierte Regel, sie gilt auf jeder Seite.
   ========================================================================== */

:root {
  /* Farben. Eine Familie: gruenstichiges Dunkel, Knochen, Bernstein. */
  --grund: #12170f;
  --grund-tief: #0c100a;
  --erhoben: #1b2317;

  --knochen: #eef0e6;
  --knochen-leise: rgba(238, 240, 230, 0.68);
  --linie: rgba(238, 240, 230, 0.16);

  --bernstein: #e08e2e;
  --bernstein-hell: #eeab55;
  --glut: #e5764d;

  /* Schrift */
  --display: "Cabinet Grotesk", "Segoe UI", system-ui, sans-serif;
  --grotesk: "General Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Raster */
  --rand: clamp(1.15rem, 4.5vw, 5rem);
  --breite: 82rem;
  --breite-text: 38rem;

  /* Rhythmus */
  --luft-xs: clamp(1.5rem, 2vw, 2rem);
  --luft-s: clamp(2.5rem, 4vw, 4rem);
  --luft-m: clamp(4rem, 7vw, 7.5rem);
  --luft-l: clamp(6rem, 11vw, 12rem);

  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
  --kurve-weich: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------------- Grundlage */

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: clamp(5rem, 9vh, 7rem);
}

html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--grund);
  color: var(--knochen);
  font-family: var(--grotesk);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  font-weight: 420;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
picture,
video,
svg { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Kein Doppeltipp-Zoom-Verzug, kein greller Tipp-Blitz auf Android. */
a, button, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 640;
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Absaetze, die als Bausteine dienen, tragen ihren Abstand selbst. */
p.marke,
p.klein,
p.mittel,
p.gross,
p.riesig,
.zahlen__wert,
.zahlen__text,
.raum__name,
.raum__zahl,
.zeit__jahr,
.zeit__text,
.lichtkasten__text,
.krume { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }

hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: var(--luft-s) 0;
}

::selection { background: var(--bernstein); color: var(--grund-tief); }

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

/* --------------------------------------------------------- Schriftbausteine */

.display { font-family: var(--display); }

.riesig {
  font-family: var(--display);
  font-size: clamp(2.9rem, 10.5vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 680;
}

.gross {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.024em;
  font-weight: 660;
}

.mittel {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.016em;
  font-weight: 600;
}

.klein {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.2;
  font-weight: 580;
}

/* Betonung in Ueberschriften: gleiche Familie, leichter Schnitt, Bernstein.
   Cabinet Grotesk hat keine Kursive, deshalb Gewicht und Farbe statt Neigung. */
.betont,
.gross em,
.riesig em {
  font-style: normal;
  font-weight: 300;
  color: var(--bernstein-hell);
}

.kursiv { font-style: italic; }

.marke {
  font-family: var(--grotesk);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--knochen-leise);
}

.buehne__marke { color: var(--bernstein-hell); margin-bottom: 1.1rem; }

.vorspann {
  font-size: clamp(1.1rem, 1.45vw, 1.32rem);
  line-height: 1.55;
  color: var(--knochen-leise);
  max-width: 34ch;
}

.leise { color: var(--knochen-leise); }

.zahl {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------ Aufbau */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.huelle-weit {
  width: 100%;
  max-width: 110rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}

section { position: relative; }

.band { padding-block: var(--luft-m); }

.band-gross { padding-block: var(--luft-l); }

/* Ein Thema, drei Tiefen derselben Familie. Kein Hell-Dunkel-Wechsel mehr:
   "dunkel" ist eine tiefere, "gedaempft" eine angehobene Flaeche. */
.dunkel { background: var(--grund-tief); }
.gedaempft { background: var(--erhoben); }
.moos { background: var(--erhoben); }

.raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--luft-s) clamp(1.5rem, 3vw, 3rem);
}

/* Wortkarten (Anlaesse): nur Bild und Wort, kein Text. Sie fuellen die Zeile
   selbst auf, damit die Anzahl der Anlaesse die Gestaltung nicht diktiert.
   Schmal stehen zwei nebeneinander, sonst wird die Liste zur Bilderrolle. */
.raster-wort {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

@media (min-width: 60rem) {
  .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-wort { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  /* Zwoelf Spalten brauchen einen schmaleren Steg, sonst fressen elf
     Zwischenraeume ein Drittel der Breite. */
  .raster-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 1.7vw, 1.6rem);
  }

  /* Spaltenlage nur im breiten Raster. Schmal steht alles untereinander. */
  .sp-links5 { grid-column: 1 / span 5; }
  .sp-links6 { grid-column: 1 / span 6; }
  .sp-rechts6 { grid-column: 7 / span 6; }
  .sp-rechts5 { grid-column: 8 / span 5; }

  /* Kurze Spalte neben langer Liste: die Ueberschrift laeuft mit. */
  .haftet { position: sticky; top: 24vh; align-self: start; }
}

.sprunglink {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 300;
  transform: translateY(-160%);
  background: var(--knochen);
  color: var(--grund-tief);
  padding: 0.7rem 1.1rem;
  border-radius: 0.2rem;
  text-decoration: none;
  transition: transform 0.25s var(--kurve);
}

.sprunglink:focus { transform: translateY(0); }

/* -------------------------------------------------------------- Kopfleiste */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  padding-block: clamp(0.9rem, 1.6vw, 1.35rem);
  transition: transform 0.5s var(--kurve), background-color 0.4s ease,
    box-shadow 0.4s ease, backdrop-filter 0.4s ease;
  will-change: transform;
}

/* Schleier unter der Leiste. Solange sie durchsichtig ueber der Buehne liegt,
   entscheidet das Foto darueber, wie gut Logo und Links lesbar sind. Das Logo
   des Hauses ist gruen und bringt seine Farbe aus dem Original mit, es kann
   sich nicht wie weisser Text auf jedem Motiv behaupten (gemessen am
   16.08.2026 auf der hellen Buehne der Startseite). Der Verlauf legt sich nur
   ueber die oberen Zentimeter, laesst das Motiv darunter frei und
   verschwindet, sobald die Leiste ihren eigenen Grund bekommt. */
.kopf::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.4rem 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(12, 16, 10, 0.86) 0%, rgba(12, 16, 10, 0.62) 45%, rgba(12, 16, 10, 0) 100%);
  transition: opacity 0.4s ease;
}

.kopf--fest::before { opacity: 0; }

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.kopf--fest {
  background: rgba(12, 16, 10, 0.88);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  box-shadow: 0 1px 0 var(--linie);
}

.kopf--weg { transform: translateY(-115%); }

/* Wandert Tastaturfokus in die weggescrollte Leiste, kommt sie zurueck.
   Sonst saesse der Fokus auf unsichtbaren Links. */
.kopf--weg:focus-within { transform: none; }

.wortmarke {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--knochen);
  line-height: 1;
}

/* Kopfleiste: das echte Logo des Hauses statt der gesetzten Wortmarke.
   Freigestellt aus dem Original der Altseite, deshalb bringt es seine eigene
   Farbe mit. Der leichte Schlagschatten haelt es auch dort lesbar, wo die
   Leiste ueber einem hellen Bildausschnitt der Buehne steht. */
.wortmarke--bild { display: block; }

/* Verena am 22.09.2026: "Kann man unser Logo was oben Links in der Ecke ist
   noch etwas kraeftiger gestalten? Sodass er mehr hervorgehoben ist?" -
   deshalb rund ein Fuenftel groesser, ein zweiter, weicher Schatten
   darunter und etwas mehr Kontrast, damit die freigestellte Schrift auch
   ueber hellen Bildstellen der Buehne steht. */
.wortmarke__logo {
  display: block;
  width: clamp(10.4rem, 15.5vw, 13.2rem);
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7))
          drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45))
          contrast(1.08) saturate(1.06);
}

.wortmarke__name {
  font-family: var(--display);
  font-size: clamp(1.24rem, 2vw, 1.5rem);
  font-weight: 660;
  letter-spacing: -0.015em;
}

.wortmarke__zusatz {
  font-size: 0.575rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bernstein-hell);
  margin-top: 0.34rem;
  font-weight: 600;
}

.kopf__mitte { display: none; }

@media (min-width: 64rem) {
  .kopf__mitte {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2vw, 2rem);
  }
}

.kopf__link {
  color: var(--knochen);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-block: 0.35rem;
  position: relative;
  opacity: 0.82;
  transition: opacity 0.25s ease;
}

.kopf__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--bernstein);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--kurve);
}

.kopf__link:hover,
.kopf__link:focus-visible { opacity: 1; }

.kopf__link:hover::after,
.kopf__link:focus-visible::after,
.kopf__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.kopf__link[aria-current="page"] { opacity: 1; }

.kopf__rechts {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Menueschalter fuer schmale Fenster */

.menue-schalter {
  --strich: var(--knochen);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid var(--linie);
  color: var(--knochen);
  border-radius: 999px;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.menue-schalter:hover { border-color: var(--bernstein); }

@media (min-width: 64rem) { .menue-schalter { display: none; } }

.menue-schalter__striche {
  display: grid;
  gap: 4px;
  width: 17px;
}

.menue-schalter__striche i {
  display: block;
  height: 1.5px;
  background: var(--strich);
  transition: transform 0.4s var(--kurve), opacity 0.3s ease;
}

.menue-offen .menue-schalter__striche i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menue-offen .menue-schalter__striche i:nth-child(2) { opacity: 0; }
.menue-offen .menue-schalter__striche i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Vollflaechiges Menue */

/* Verenas Meldung vom 18.09.2026 (WhatsApp 17:03, T-2367, Screenshot vom
   Handy): oeffnet man das Menue ohne vorher gescrollt zu haben, liegt die
   Kopfleiste (.kopf, z-index 200, ohne .kopf--fest transparent) UEBER
   diesem Vollflaechen-Menue und ueberdeckt/vermischt sich optisch mit den
   obersten Punkten ("Start", "Feiern & Räumlichkeiten") - "das oben sieht
   man gar nicht". Das Menue bekommt deshalb einen hoeheren z-index als die
   Kopfleiste, damit es sie bei offenem Menue vollstaendig verdeckt statt
   mit ihr zu ueberlappen; das eigene Schliessen-Kreuz im Menue bleibt die
   Bedienung, die Kopfleiste wird beim Oeffnen zusaetzlich inert (site.js). */
.menue {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: var(--grund-tief);
  color: var(--knochen);
  display: grid;
  align-content: safe center;
  padding: 6rem var(--rand) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.75s var(--kurve), visibility 0s linear 0.75s;
}

.menue[data-offen="ja"] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.75s var(--kurve), visibility 0s;
}

.menue__liste {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.menue__liste a {
  display: block;
  text-decoration: none;
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 1.08;
  font-weight: 640;
  letter-spacing: -0.02em;
  padding-block: 0.15rem;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.5s ease, transform 0.5s var(--kurve), color 0.3s ease;
}

.menue[data-offen="ja"] .menue__liste a {
  opacity: 1;
  transform: none;
}

.menue__liste a:hover { color: var(--bernstein-hell); }

.menue__fuss {
  display: grid;
  gap: 1.4rem;
  border-top: 1px solid var(--linie);
  padding-top: 1.6rem;
}

@media (min-width: 48rem) {
  .menue__fuss { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

.menue .marke { color: var(--bernstein-hell); }

/* ---------------------------------------------------------- Schaltflaechen */

/* Formregel: Bedienelemente sind Pillen, Flaechen und Bilder scharf. */

.knopf {
  --kf: var(--grund-tief);
  --kb: var(--bernstein);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.6rem;
  border: 1px solid var(--kb);
  border-radius: 999px;
  background: var(--kb);
  color: var(--kf);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--kurve), border-color 0.35s ease,
    transform 0.15s ease;
}

.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--knochen);
  transform: translateY(101%);
  transition: transform 0.45s var(--kurve);
  z-index: -1;
}

.knopf:hover::before,
.knopf:focus-visible::before { transform: translateY(0); }

.knopf:hover,
.knopf:focus-visible { color: var(--grund-tief); border-color: var(--knochen); }

.knopf:active { transform: translateY(1px); }

.knopf--rand {
  background: none;
  --kf: var(--knochen);
  --kb: var(--knochen);
  border-color: var(--linie);
}

.knopf--rand::before { background: var(--knochen); }
.knopf--rand:hover,
.knopf--rand:focus-visible { color: var(--grund-tief); border-color: var(--knochen); }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s ease;
}

.pfeil-link:hover,
.pfeil-link:focus-visible { color: var(--bernstein-hell); }

/* Der Pfeil faehrt per transform vor, nicht ueber die Layout-Eigenschaft gap. */
.pfeil-link svg {
  width: 0.85em;
  height: 0.85em;
  transition: transform 0.35s var(--kurve);
}

.pfeil-link:hover svg,
.pfeil-link:focus-visible svg { transform: translateX(0.35rem); }

/* ------------------------------------------------------------ Bildbausteine */

.bild {
  position: relative;
  overflow: hidden;
  background: var(--erhoben) center / cover no-repeat;
}

/* Das picture-Element steht zwischen Kasten und Bild. Ohne eigene Hoehe
   loest height:100% am Bild gegen "auto" auf, dann bleibt das Bild zu kurz
   und darunter blitzt der Platzhalter durch. */
.bild picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wo ein Rahmen die Hoehe vorgibt, muss der Bildkasten sie auch ausfuellen. */
.buehne__bild > .bild,
.raum__bild > .bild { height: 100%; }

.bild--hoch { aspect-ratio: 3 / 4; }
.bild--quer { aspect-ratio: 4 / 3; }
.bild--breit { aspect-ratio: 16 / 9; }
.bild--kino { aspect-ratio: 21 / 9; }
.bild--quadrat { aspect-ratio: 1 / 1; }

/* Vorhang, der beim Scrollen aufgeht. Ohne JS ist er nicht da. */
.js .enthuellen { clip-path: inset(0 0 100% 0); }
.js .enthuellen img { transform: scale(1.16); }

figure { margin: 0; }

figcaption {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--knochen-leise);
}

/* Panorama: ein Bild in voller Breite, das beim Scrollen langsam
   naeher kommt. Ein Moment pro Seite, mehr nicht. */
.panorama {
  position: relative;
  overflow: hidden;
  height: min(82svh, 46rem);
}

.panorama .bild,
.panorama picture,
.panorama img { height: 100%; }

.panorama img { transform: scale(1.12); }

.panorama__zeile {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.5rem, 4vw, 3rem) var(--rand);
  background: linear-gradient(to top, rgba(12, 16, 10, 0.82), rgba(12, 16, 10, 0));
}

.panorama__zeile p {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ Buehne */

.buehne {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: var(--knochen);
  background: var(--grund-tief);
  overflow: hidden;
  isolation: isolate;
}

.buehne__bild {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
  will-change: transform;
}

.buehne__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zwei Schleier: einer von unten fuer die Lesbarkeit des Textes, einer von
   links, damit die Ueberschrift nicht mit dem Bildmotiv kaempft. */
.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(12, 16, 10, 0.84) 0%, rgba(12, 16, 10, 0.52) 26%, rgba(12, 16, 10, 0.02) 56%, rgba(12, 16, 10, 0.18) 100%),
    linear-gradient(to top, rgba(12, 16, 10, 0.82) 0%, rgba(12, 16, 10, 0.24) 28%, rgba(12, 16, 10, 0.02) 60%, rgba(12, 16, 10, 0.42) 100%);
}

/* Hochkant liegt der Text mitten im Bild. Dann braucht er mehr Deckung,
   waehrend oben noch genug vom Motiv sichtbar bleibt. */
@media (max-width: 60rem) {
  .buehne::after {
    background:
      linear-gradient(to top, rgba(12, 16, 10, 0.95) 0%, rgba(12, 16, 10, 0.86) 44%,
        rgba(12, 16, 10, 0.42) 74%, rgba(12, 16, 10, 0.45) 100%);
  }
}

.buehne__innen {
  padding-block: clamp(7rem, 14vh, 9rem) clamp(2.5rem, 7vh, 4.5rem);
  width: 100%;
}

.buehne__titel {
  font-family: var(--display);
  font-size: clamp(2.9rem, 9vw, 8.2rem);
  line-height: 0.93;
  letter-spacing: -0.03em;
  font-weight: 680;
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
  max-width: 14ch;
  text-shadow: 0 2px 30px rgba(8, 11, 7, 0.5);
}

.buehne__titel em {
  font-style: normal;
  font-weight: 300;
  color: var(--bernstein-hell);
}

.buehne__unten {
  display: grid;
  gap: 1.6rem;
  align-items: end;
}

@media (min-width: 55rem) {
  .buehne__unten {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
  }
}

/* Kleinere Buehne fuer Unterseiten */

.buehne--klein { min-height: min(78svh, 46rem); }
.buehne--klein .buehne__titel { font-size: clamp(2.5rem, 6.6vw, 5.9rem); }

.krume {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--knochen-leise);
  font-weight: 600;
}

.krume a { text-decoration: none; }
.krume a:hover { color: var(--bernstein-hell); }

/* Wortmaske fuer Ueberschriften: jedes Wort steigt einzeln aus seiner Zeile. */
.wort-maske {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.wort-maske > span { display: inline-block; }

/* ------------------------------------------------------------- Zahlenreihe */

/* Verenas Wunsch vom 17.09.2026: die 1950-Kachel passte nicht mehr
   ("die 1950 passt da irgendwie nicht so richtig rein"), jetzt genau
   drei Kacheln. Ein Bindestrich-Umbruch bei zwei Kacheln nebeneinander
   waere unsauber, deshalb wie bei .raster-3 und .saeulen: mobil
   gestapelt, ab 55rem in einer Reihe. */
.zahlen {
  display: grid;
  gap: var(--luft-xs) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 55rem) {
  .zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.zahlen__feld {
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
}

.zahlen__wert {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 660;
  font-variant-numeric: tabular-nums lining-nums;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}

.zahlen__wert small {
  font-size: 0.42em;
  letter-spacing: 0;
}

.zahlen__text {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--knochen-leise);
  max-width: 22ch;
}

/* ----------------------------------------------------------------- Vorhang */

/* Markenvorhang: deckt die Seite beim ersten Aufruf und bei Seitenwechseln,
   JavaScript zieht ihn hoch. Ohne JavaScript und bei reduzierter Bewegung
   existiert er nicht, dann ist die Seite sofort da. */
.vorhang {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--grund-tief);
  display: grid;
  place-items: center;
  pointer-events: none;
}

html:not(.js) .vorhang { display: none; }

.vorhang__marke {
  font-family: var(--display);
  font-weight: 660;
  font-size: clamp(1.6rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--knochen);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.bewegung-erzwungen) .vorhang { display: none; }
}

/* ------------------------------------------------------------ Drei Saeulen */

/* Feiern, Kueche, Uebernachten: jeder Besucher findet seinen Weg
   mit einem Klick. Hohe Bildkacheln, Text auf dem Bild. */
.saeulen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
}

@media (min-width: 60rem) {
  .saeulen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Die mittlere Kachel steht tiefer: Rhythmus statt Reihe. */
  .saeule:nth-child(2) { margin-top: clamp(1.5rem, 3vw, 3rem); }
}

.saeule {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  color: var(--knochen);
  text-decoration: none;
}

.saeule__bild { aspect-ratio: 3 / 4; }
.saeule__bild .bild { height: 100%; }
.saeule__bild img { transition: transform 1.1s var(--kurve); }
.saeule:hover .saeule__bild img,
.saeule:focus-visible .saeule__bild img { transform: scale(1.05); }

/* Der Wisch kommt von der Kante, an der der Mauszeiger eintritt
   (data-kante setzt site.js). Ohne JavaScript kommt er von unten. */
.saeule__wisch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(224, 142, 46, 0.34), rgba(224, 142, 46, 0.04) 70%);
  opacity: 0;
  transform: translateY(101%);
  transition: transform 0.6s var(--kurve), opacity 0.45s ease;
}

.saeule[data-kante="oben"] .saeule__wisch { transform: translateY(-101%); background: linear-gradient(to bottom, rgba(224, 142, 46, 0.34), rgba(224, 142, 46, 0.04) 70%); }
.saeule[data-kante="links"] .saeule__wisch { transform: translateX(-101%); background: linear-gradient(to right, rgba(224, 142, 46, 0.34), rgba(224, 142, 46, 0.04) 70%); }
.saeule[data-kante="rechts"] .saeule__wisch { transform: translateX(101%); background: linear-gradient(to left, rgba(224, 142, 46, 0.34), rgba(224, 142, 46, 0.04) 70%); }

.saeule:hover .saeule__wisch,
.saeule:focus-visible .saeule__wisch { transform: none; opacity: 1; }

/* Pfeil oben rechts: faehrt beim Zeigen aus der Ecke herein. */
.saeule__pfeil {
  position: absolute;
  top: clamp(1rem, 2vw, 1.6rem);
  right: clamp(1rem, 2vw, 1.6rem);
  z-index: 2;
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 240, 230, 0.4);
  border-radius: 50%;
  background: rgba(12, 16, 10, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translate(-0.5rem, 0.5rem);
  transition: opacity 0.4s ease, transform 0.55s var(--kurve);
}

.saeule__pfeil svg { width: 1rem; height: 1rem; transform: rotate(-45deg); }

.saeule:hover .saeule__pfeil,
.saeule:focus-visible .saeule__pfeil { opacity: 1; transform: none; }

/* Die Zusatzzeile faehrt am feinen Zeiger erst beim Zeigen hoch.
   Auf Touch-Geraeten steht sie immer da. */
@media (hover: hover) and (pointer: fine) {
  .saeule__zusatz {
    opacity: 0;
    transform: translateY(0.55rem);
    transition: opacity 0.45s ease, transform 0.55s var(--kurve);
  }
  .saeule:hover .saeule__zusatz,
  .saeule:focus-visible .saeule__zusatz { opacity: 1; transform: none; }
}

.saeule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 16, 10, 0.9) 6%, rgba(12, 16, 10, 0.12) 52%, rgba(12, 16, 10, 0.05) 100%);
  pointer-events: none;
}

.saeule__text {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
}

.saeule__name {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.02;
  font-weight: 640;
  letter-spacing: -0.02em;
  margin: 0;
}

.saeule__zusatz {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--knochen-leise);
}

/* ------------------------------------------------------------ Kontaktband */

/* Der Schlussakkord jeder Seite: grosse Zeile, ein Satz, drei Wege.
   Eigene Bauart ohne Bild, mit Haarlinie als Auftakt. Die Riesenzeile
   fliegt Wort fuer Wort mit dem Bildlauf ein (data-kinetik in site.js). */
.kontakt-band { border-top: 1px solid var(--linie); }

.kontakt-band .riesig { font-size: clamp(2.8rem, 8.5vw, 7.4rem); }

/* ------------------------------------------------------- Raeume, waagerecht */

.raeume { overflow: hidden; }

.raeume__spur {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: var(--rand);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 1.5rem;
}

.js .raeume__spur.raeume__spur--gezogen {
  overflow: visible;
  padding-bottom: 0;
  will-change: transform;
}

.raum {
  flex: 0 0 min(86vw, 34rem);
  scroll-snap-align: center;
  position: relative;
  color: var(--knochen);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  display: block;
}

/* Die Raumfotos der Bestandsseite sind querformatig und nur 1000 Bildpunkte
   breit. Ein hochkantiger Ausschnitt muesste sie hochrechnen, das sieht man.
   Also bleibt die Karte im Querformat. */
.raum__bild { aspect-ratio: 5 / 4; }

.raum__bild img { transition: transform 1.1s var(--kurve); }

.raum:hover .raum__bild img { transform: scale(1.05); }

.raum::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 16, 10, 0.92) 4%, rgba(12, 16, 10, 0.15) 55%, rgba(12, 16, 10, 0.05) 100%);
  pointer-events: none;
}

.raum__text {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
}

.raum__name {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.02;
  font-weight: 640;
  letter-spacing: -0.02em;
}

.raum__zahl {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--knochen-leise);
}

/* --------------------------------------------------------------- Zeitleiste */

.zeit {
  display: grid;
  gap: var(--luft-s);
}

@media (min-width: 62rem) {
  .zeit { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
  .zeit__anker { position: sticky; top: 22vh; align-self: start; }
}

.zeit__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.zeit__liste::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 1px;
  background: var(--linie);
}

/* Die Schiene waechst per scaleY (Compositor), nicht per height (Layout). */
.zeit__schiene {
  position: absolute;
  left: 0;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 1px;
  background: var(--bernstein);
  transform-origin: top;
  transform: scaleY(0);
}

.zeit__punkt {
  position: relative;
  padding: 0 0 var(--luft-s) clamp(1.6rem, 3vw, 2.6rem);
}

.zeit__punkt:last-child { padding-bottom: 0; }

.zeit__jahr {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1;
  font-weight: 640;
  color: var(--bernstein-hell);
  margin-bottom: 0.5rem;
  font-variant-numeric: lining-nums;
}

.zeit__text { max-width: 52ch; }

/* ------------------------------------------------------------------- Karten */

.karte {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.karte__bild { aspect-ratio: 4 / 3; }

.karte__bild img { transition: transform 1.1s var(--kurve), filter 0.6s ease; }

.karte:hover .karte__bild img { transform: scale(1.045); }

.karte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 0.6rem;
}

.karte__preis {
  font-family: var(--display);
  font-size: 1.15rem;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: lining-nums;
}

.karte p { font-size: 0.96rem; }

/* Drei Schritte: Spalten mit Haarlinie links statt Nummern und Karten. */
.schritt {
  border-left: 1px solid var(--linie);
  padding-left: clamp(1.2rem, 2vw, 1.8rem);
}

/* Speisen- und Angebotsliste */

.liste-fein {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.liste-fein li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.2rem;
  align-items: baseline;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--linie);
}

.liste-fein li:last-child { border-bottom: 0; }

/* Auf schmalen Geraeten stehen Bezeichnung und Zusatz untereinander. */
@media (max-width: 34rem) {
  .liste-fein li { grid-template-columns: minmax(0, 1fr); }
  .liste-fein span { text-align: left; }
}

.liste-fein b {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
}

.liste-fein small {
  grid-column: 1 / -1;
  font-size: 0.92rem;
  color: var(--knochen-leise);
  max-width: 60ch;
}

.liste-fein span {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.95rem;
  color: var(--bernstein-hell);
  text-align: right;
}

/* Merkmalsliste mit Haken */

.merkmale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.merkmale li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.97rem;
}

.merkmale li::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.24rem;
  background: var(--bernstein);
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 20%, 85% 7%, 39% 71%);
}

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

.galerie {
  display: grid;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48rem) {
  .galerie { grid-template-columns: repeat(4, 1fr); }
  .galerie__gross { grid-column: span 2; grid-row: span 2; }
}

.galerie__feld {
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--erhoben);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  display: block;
  width: 100%;
}

.galerie__feld img { transition: transform 1s var(--kurve); width: 100%; height: 100%; object-fit: cover; }
.galerie__feld:hover img { transform: scale(1.06); }

.galerie__feld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 16, 10, 0.2);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.galerie__feld:hover::after { opacity: 1; }

/* Lichtkasten */

.lichtkasten {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(8, 11, 7, 0.96);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(0.8rem, 2vw, 1.5rem);
  gap: 0.8rem;
  overscroll-behavior: contain;
}

.lichtkasten[hidden] { display: none; }

.lichtkasten__bild {
  display: grid;
  place-items: center;
  min-height: 0;
}

.lichtkasten__bild img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lichtkasten__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--knochen);
}

.lichtkasten__text {
  color: var(--knochen-leise);
  font-size: 0.85rem;
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

.rund-knopf {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: none;
  color: var(--knochen);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  flex: 0 0 auto;
}

.rund-knopf:hover { border-color: var(--bernstein); background: rgba(224, 142, 46, 0.14); }
.rund-knopf svg { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------------- Zitat */

.zitat {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.zitat blockquote {
  margin: 0;
  font-family: var(--grotesk);
  font-style: italic;
  font-weight: 480;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.34;
  letter-spacing: -0.01em;
}

.zitat figcaption {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------------------------------------------------------------- Formular */

.formular {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
}

.feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  min-width: 0;
}

.feld > label:not(.zustimmung) {
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--knochen-leise);
}

.feld input,
.feld textarea,
.feld select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie);
  padding: 0.7rem 0.1rem;
  border-radius: 0;
  transition: border-color 0.3s ease;
  font-size: 1rem;
  color: var(--knochen);
  color-scheme: dark;
}

.feld input:focus-visible,
.feld textarea:focus-visible,
.feld select:focus-visible {
  outline: 2px solid var(--bernstein);
  outline-offset: 2px;
  border-color: var(--bernstein);
}

.feld input:focus,
.feld textarea:focus,
.feld select:focus { border-color: var(--bernstein); }

.feld textarea { resize: vertical; min-height: 7rem; }

.feld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.85rem top 55%, right 0.5rem top 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.feld select option { color: var(--knochen); background: var(--grund-tief); }

.feld--zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.35rem; }

@media (min-width: 44rem) {
  .feld--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.feld-fehler {
  font-size: 0.82rem;
  color: var(--glut);
  min-height: 1.2em;
}

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"] { border-color: var(--glut); }

.zustimmung {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  font-size: 0.9rem;
}

.feld .zustimmung input[type="checkbox"] {
  width: 1.1rem;
  min-width: 1.1rem;
  height: 1.1rem;
  margin: 0.32rem 0 0;
  padding: 0;
  border: 0;
  accent-color: var(--bernstein);
}

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hinweis {
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--bernstein);
  background: rgba(224, 142, 46, 0.1);
  font-size: 0.95rem;
}

.hinweis--gut { border-color: var(--bernstein-hell); background: rgba(238, 171, 85, 0.1); }
.hinweis--schlecht { border-color: var(--glut); background: rgba(229, 118, 77, 0.12); }

/* --------------------------------------------------------------------- Fuss */

.fuss {
  background: var(--grund-tief);
  color: var(--knochen);
  padding-block: var(--luft-m) var(--luft-s);
}

.fuss__oben {
  display: grid;
  gap: var(--luft-s);
  padding-bottom: var(--luft-s);
  border-bottom: 1px solid var(--linie);
}

@media (min-width: 58rem) {
  .fuss__oben { grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
}

.fuss h2 {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bernstein-hell);
  margin-bottom: 1.1rem;
}

/* Rundes Monogramm-Logo im Fuss: Verenas zweites neues Logo (18.09.2026,
   T-2359), freigestellt wie das Kopfleisten-Logo. Stand bis zum 22.09.2026
   klein neben der Ueberschrift "Oeffnungszeiten". Verena an dem Tag:
   "Koennen wir das links neben Vaske Thoelking machen und auch ruhig etwas
   groesser?" - jetzt links neben der Wortmarke im Fuss und gut doppelt so
   gross. */
.fuss__monogramm {
  display: block;
  width: clamp(3.2rem, 6vw, 4.2rem);
  height: auto;
  flex-shrink: 0;
}

/* Wortmarke im Fuss: Monogramm links, Name und Zusatz rechts daneben
   untereinander. */
.wortmarke--fuss {
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
}

.wortmarke--fuss > span {
  display: flex;
  flex-direction: column;
}

.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.fuss__liste a { text-decoration: none; opacity: 0.8; transition: opacity 0.25s ease, color 0.25s ease; }
.fuss__liste a:hover { opacity: 1; color: var(--bernstein-hell); }

.zeiten {
  display: grid;
  gap: 0.4rem;
  font-size: 0.94rem;
}

.zeiten div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding-block: 0.32rem;
  border-bottom: 1px dotted var(--linie);
}

.zeiten span { font-variant-numeric: tabular-nums; color: var(--knochen-leise); }

/* Ruhetag hervorheben, aber lesbar. */
.zeiten .zu span { color: var(--glut); font-weight: 600; }

.menue__zu {
  position: absolute;
  top: clamp(0.9rem, 2vw, 1.6rem);
  right: clamp(1rem, 4vw, 5rem);
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.6rem;
  font-size: 0.8rem;
  color: var(--knochen-leise);
}

.fuss__unten a { text-decoration: none; }
.fuss__unten a:hover { color: var(--bernstein-hell); }

.fuss__rechts { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* --------------------------------------------------------- Schwebender Ruf */

.schwebe-ruf {
  position: fixed;
  right: calc(clamp(0.9rem, 2vw, 1.6rem) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(0.9rem, 2vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  display: flex;
  gap: 0.5rem;
  transform: translateY(150%);
  transition: transform 0.55s var(--kurve);
}

.schwebe-ruf { visibility: hidden; }
.schwebe-ruf[data-sichtbar="ja"] { transform: none; visibility: visible; }

.schwebe-ruf a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bernstein);
  color: var(--grund-tief);
  text-decoration: none;
  padding: 0.8rem 1.15rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 26px rgba(8, 11, 7, 0.45);
  transition: transform 0.3s var(--kurve), background-color 0.3s ease;
}

.schwebe-ruf a:hover { transform: translateY(-2px); }
.schwebe-ruf a svg { width: 1rem; height: 1rem; }

.schwebe-ruf .ruf--zweit {
  background: var(--erhoben);
  color: var(--knochen);
  border: 1px solid var(--linie);
}

@media (max-width: 30rem) {
  .schwebe-ruf a span { display: none; }
  .schwebe-ruf a { padding: 0.85rem; }
}

/* Sehr schmale Geraete: die Kopfleiste wird auf das Noetigste eingedampft. */
@media (max-width: 25rem) {
  .wortmarke__zusatz { display: none; }
  .wortmarke__name { font-size: 1.15rem; }
  .kopf__rechts .knopf { padding: 0.7rem 0.95rem; font-size: 0.72rem; letter-spacing: 0.06em; }
  /* Nur die Beschriftung "Menue" faellt weg, die drei Striche bleiben. Vorher
     traf die Regel jedes span im Schalter, auch das mit den Strichen: unter
     400 px stand oben rechts eine leere Pille ohne Symbol (gefunden 17.08.2026
     beim 380-px-Beleg zu T-181). */
  .menue-schalter span:not(.menue-schalter__striche) { display: none; }
  .menue-schalter { padding: 0.5rem 0.7rem; }
  .kopf__innen { gap: 0.6rem; }
}

/* Am grossen Bildschirm steht "Reservieren" oben in der Leiste. Dann muss
   unten rechts nichts ueber dem Text schweben. */
@media (min-width: 64rem) {
  .schwebe-ruf { display: none; }
}

/* -------------------------------------------------- Ohne JavaScript nutzbar */

/* Der Menue-Schalter braucht JavaScript. Fehlt es, steht die Navigation
   stattdessen als normale Liste in der Kopfleiste, und die Kopfleiste
   scrollt mit, damit sie nichts verdeckt. */
html:not(.js) .kopf {
  position: static;
  background: var(--grund-tief);
}

html:not(.js) .kopf__innen { flex-wrap: wrap; row-gap: 0.9rem; }

html:not(.js) .kopf__mitte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  order: 3;
  width: 100%;
}

html:not(.js) .menue-schalter,
html:not(.js) .menue { display: none; }

html:not(.js) .buehne__innen { padding-block: clamp(2rem, 6vh, 4rem) clamp(2.5rem, 7vh, 4.5rem); }

html:not(.js) .schwebe-ruf { transform: none; visibility: visible; }

html:not(.js) .panorama img { transform: none; }

/* Der Lichtkasten der Galerie braucht ebenfalls JavaScript. Ohne JS bleiben
   die Bilder normale Bilder und der Knopf tut nichts, also nimmt er auch
   nicht die Gestalt eines Knopfes an. */
html:not(.js) .galerie__feld { cursor: default; }

/* ------------------------------------------------------- Bewegung, dezent */

.js .steigt {
  opacity: 0;
  transform: translateY(1.6rem);
}

/* Die Maske muss eine Blockbox sein: overflow wirkt auf Inline-Boxen nicht,
   dann laegen die steigenden Zeilen sichtbar uebereinander. Das Polster
   unten schuetzt die Unterlaengen vor der knappen Zeilenhoehe. */
.zeile-maske { display: block; }
.zeile-maske > * { display: block; }
.js .zeile-maske {
  overflow: hidden;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

/* Wer keine Bewegung will, bekommt keine. Die Ausnahme .bewegung-erzwungen
   setzt JavaScript nur bei ?bewegung=an, als ausdrueckliche Vorfuehr-Fassung. */
@media (prefers-reduced-motion: reduce) {
  html:not(.bewegung-erzwungen) { scroll-behavior: auto; }
  html:not(.bewegung-erzwungen) *,
  html:not(.bewegung-erzwungen) *::before,
  html:not(.bewegung-erzwungen) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.js:not(.bewegung-erzwungen) .steigt { opacity: 1 !important; transform: none !important; }
  html.js:not(.bewegung-erzwungen) .enthuellen { clip-path: none !important; }
  html.js:not(.bewegung-erzwungen) .enthuellen img { transform: none !important; }
  html:not(.bewegung-erzwungen) .panorama img { transform: none !important; }
}

/* --------------------------------------------------------------- Kleinkram */

.nur-fuer-lesegeraete {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.trennlinie {
  border-top: 1px solid var(--linie);
  margin-block: var(--luft-s);
}

.text-block { max-width: var(--breite-text); }

.text-block p + h3 { margin-top: 2rem; }

.rechts { text-align: right; }

/* ------------------------------------------------ Buffet-Liste mit Sprung */

/* Grosse Type fuer die Buffet-Liste. Jeder Eintrag ist ein Verweis auf den
   eigenen Abschnitt weiter unten (Termine und Preis), deshalb traegt der
   Verweis selbst das Raster der Zeile. Die Hover-Fotos, die frueher dem
   Mauszeiger folgten, sind am 17.08.2026 auf Verenas Wunsch entfallen. */
.liste-speisen li { padding-block: clamp(1.1rem, 2vw, 1.6rem); }

.liste-speisen a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.2rem;
  align-items: baseline;
  color: inherit;
  text-decoration: none;
}

@media (max-width: 34rem) {
  .liste-speisen a { grid-template-columns: minmax(0, 1fr); }
}

/* Der Pfeil sagt, dass die Zeile irgendwohin fuehrt. Als CSS-Zeichen, damit
   im Text der Seite nichts steht, was dort nicht hingehoert. */
.liste-speisen a b::after {
  content: " →";
  color: var(--bernstein);
  opacity: 0.6;
}

.liste-speisen a:hover b,
.liste-speisen a:focus-visible b { color: var(--bernstein-hell); }

.liste-speisen b {
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  font-weight: 630;
  letter-spacing: -0.015em;
  line-height: 1.05;
  transition: color 0.3s ease;
}

.liste-speisen small { font-size: 0.95rem; }

/* ------------------------------------------------------------ Kartenstapel */

/* Drei Schritte als Stapel: jede Karte bleibt oben haengen, die naechste
   schiebt sich darueber, die vorige tritt zurueck (site.js skaliert).
   Ohne JavaScript oder ohne Bewegungswunsch: normale Karten untereinander. */
.stapel {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.stapel__karte {
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-top: 2px solid var(--bernstein);
  min-height: min(46svh, 26rem);
  display: grid;
  align-content: center;
  padding: clamp(1.8rem, 4vw, 4.5rem);
  transform-origin: center top;
}

.stapel__karte:nth-child(2) { background: #212a1b; }
.stapel__karte:nth-child(3) { background: #2a2d18; }

.stapel--an .stapel__karte {
  position: sticky;
  top: clamp(5.5rem, 14vh, 8rem);
}

.stapel__karte h3 { margin-bottom: 1.2rem; }

.stapel__karte p {
  max-width: 44ch;
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  line-height: 1.6;
}

/* ------------------------------------------------------------ Fuss-Reveal */

/* Die Fusszeile liegt fest hinter der letzten Sektion und wird beim
   Weiterscrollen aufgedeckt. clip-path macht die Huelle zum Bezugsrahmen
   des fixierten Fusses. site.js setzt Klasse und Hoehe, nur bei Bewegung. */
.fuss-buehne--an {
  position: relative;
  clip-path: inset(0 0 0 0);
}

.fuss-buehne--an .fuss {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ---------------------------------------------------------- Bildgradierung */

/* Leichte gemeinsame Gradierung verbindet die gemischten Fotoquellen.
   Beim Zeigen kommt die volle Farbe zurueck. */
.galerie__feld img,
.karte__bild img,
.raum__bild img,
.saeule__bild img {
  filter: saturate(0.84) sepia(0.05);
}

.galerie__feld img { transition: transform 1s var(--kurve), filter 0.6s ease; }
.raum__bild img,
.saeule__bild img { transition: transform 1.1s var(--kurve), filter 0.6s ease; }

.galerie__feld:hover img,
.karte:hover .karte__bild img,
.raum:hover .raum__bild img,
.saeule:hover .saeule__bild img,
.saeule:focus-visible .saeule__bild img { filter: none; }

/* --------------------------------------- Bewegungspfade der neuen Bausteine */

@media (prefers-reduced-motion: reduce) {
  html:not(.bewegung-erzwungen) .stapel--an .stapel__karte { position: static; }
  html:not(.bewegung-erzwungen) .fuss-buehne--an { clip-path: none; height: auto !important; }
  html:not(.bewegung-erzwungen) .fuss-buehne--an .fuss { position: static; }
  html:not(.bewegung-erzwungen) .saeule__wisch { display: none; }
  html:not(.bewegung-erzwungen) .saeule__zusatz { opacity: 1 !important; transform: none !important; }
  html:not(.bewegung-erzwungen) .saeule__pfeil { opacity: 1; transform: none; }
}

/* Druck: heller Grund, dunkle Schrift, keine Bedienelemente. */
@media print {
  .kopf, .menue, .schwebe-ruf, .lichtkasten { display: none !important; }
  .fuss-buehne--an { clip-path: none; height: auto !important; }
  .fuss-buehne--an .fuss { position: static; }
  body { background: #fff; color: #111; }
  .dunkel, .gedaempft, .moos, .fuss, .buehne { background: #fff !important; color: #111 !important; }
  .buehne { min-height: auto; }
  h1, h2, h3, h4, .zeit__jahr { color: #111; }
}