/* ============================================================
   SOLERA — bar_0.1
   Seitenschicht über der Agentur-Engine (acss-system.css).
   BEM-Komponenten auf Tokens. Keine Hex-Werte, kein [data-theme].
   ============================================================ */

/* ──────────── Schriften, selbst gehostet ──────────── */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-var-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-var-latin-ext.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-var-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-var-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/spacemono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/spacemono-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ──────────── Seiten-Tokens ────────────
   Display-Stufen liegen über der Engine-Skala (--h1 endet bei 4.5rem);
   die Wortmarke braucht mehr. Nutzerschrift-Skalierung greift überall. */
:root {
  --user-font-scale: 1;

  --display-xxl: calc(clamp(3.75rem, 17vw, 15rem) * var(--user-font-scale));
  --display-xl:  calc(clamp(2.5rem, 8.5vw, 7.5rem) * var(--user-font-scale));
  --display-l:   calc(clamp(1.875rem, 5vw, 4rem) * var(--user-font-scale));

  --shell-pad: clamp(1.25rem, 3.5vw, 2.75rem);
  --rule: 1px solid var(--clr-border);

  /* Fläche hinter einem noch nicht geladenen Bild: warme Tiefe statt grauer Kasten. */
  --plate: linear-gradient(150deg, var(--base-dark), var(--base-semi-dark));

  /* Licht wie am Tresen im Hero: von unten warmes Messinglicht, nach oben Schwarz.
     Ersetzt die flachen Grauflächen; bewusst niedrige Buntheit oben, damit es
     nicht ins Braune kippt. */
  --lit-glow: oklch(0.68 0.14 64);
  --surface-lit:
    radial-gradient(120% 55% at 50% 112%, oklch(from var(--lit-glow) l c h / 0.34), transparent 68%),
    linear-gradient(180deg, oklch(0.205 0.006 70), oklch(0.150 0.005 70));
  --section-lit:
    radial-gradient(65% 50% at 50% 104%, oklch(from var(--lit-glow) l c h / 0.22), transparent 72%),
    radial-gradient(40% 35% at 92% 0%, oklch(from var(--lit-glow) l c h / 0.08), transparent 70%),
    var(--base-ultra-dark);
}

/* Nur Dunkel (entschieden 2026-10-01). Die Engine rechnet weiter mit light-dark();
   hier wird festgelegt, welche Hälfte gilt. Einen Umschalter gibt es nicht. */
:root { color-scheme: dark; }

/* clip statt hidden: schneidet ab, ohne einen Scroll-Container zu bauen. Sonst
   macht die beim Menü gekippte Seite das Dokument breiter als den Bildschirm,
   mobile Browser zoomen heraus, und Menü samt Schließen-Knopf rutschen aus dem Bild. */
html { scroll-padding-top: 0; overflow-x: clip; }

body {
  font-size: calc(var(--text-m) * var(--user-font-scale));
  /* Bodoni Moda wählt ihre optische Größe sonst nach der Schriftgröße; bei großen
     Überschriften werden die Haarstriche so dünn, dass Buchstaben zerfallen (A, N, R).
     Fest auf 11 gesetzt bleiben sie sichtbar. Schriften ohne opsz-Achse ignorieren das. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 11;
  background: var(--clr-bg);
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

/* Engine-Größen an die Nutzerskalierung koppeln */
h1 { font-size: calc(var(--h1) * var(--user-font-scale)); }
h2 { font-size: calc(var(--h2) * var(--user-font-scale)); }
h3 { font-size: calc(var(--h3) * var(--user-font-scale)); }
h4 { font-size: calc(var(--h4) * var(--user-font-scale)); }

h1, h2, h3, h4, .display {
  font-family: var(--ff-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.92;
}

/* ──────────── Bausteine ──────────── */
.shell {
  inline-size: 100%;
  max-inline-size: 105rem;
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.label {
  font-family: var(--ff-mono);
  font-size: calc(var(--text-xs) * var(--user-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clr-text-muted);
  margin: 0;
}
.label--accent { color: var(--accent-semi-light); }

.lede {
  font-size: calc(var(--text-l) * var(--user-font-scale));
  color: var(--clr-text-muted);
  max-inline-size: 46ch;
}

.rule { border: 0; border-block-start: var(--rule); margin: 0; }

.skip-link {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  transform: translateY(-120%);
  z-index: var(--z-toast);
  padding: var(--space-s) var(--space-m);
  background: var(--primary); color: var(--base-ultra-dark);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: var(--base-ultra-dark); }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Maskierter Zeilen-/Wortreveal. Ausgangszustand SICHTBAR —
   ohne JS bleibt der Text lesbar, anders als in der Vorlage. */
.reveal .line, .reveal .word { will-change: transform; }
.js .reveal[data-ready] .line,
.js .reveal[data-ready] .word { will-change: transform; }

/* ──────────── Knopf: zwei Textreihen, Tausch beim Hover ──────────── */
.btn {
  --btn-bg: var(--primary);
  --btn-ink: var(--base-ultra-dark);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.85em 1.6em;
  border: 0; border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-ink);
  font-family: var(--ff-mono);
  font-size: calc(var(--text-s) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
  cursor: pointer; overflow: hidden;
  transition: background var(--transition-normal);
}
.btn:hover { background: var(--primary-hover); color: var(--btn-ink); }
.btn__rows { position: relative; display: block; overflow: hidden; }
.btn__row { display: block; }
.btn__row--in {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  transform: translateY(100%);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--clr-text);
  box-shadow: inset 0 0 0 1px var(--clr-border-strong);
}
.btn--ghost:hover { background: color-mix(in oklch, var(--primary) 16%, transparent); color: var(--clr-text); }

/* ──────────── Preloader ──────────── */
.preloader {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-content: center; gap: var(--space-l);
  padding: var(--shell-pad);
  background: var(--clr-bg);
  transition: opacity 700ms var(--ease-out), visibility 700ms;
}
.preloader[hidden] { display: none; }
.preloader.is-leaving { opacity: 0; visibility: hidden; }
.preloader__mark {
  position: relative;
  font-family: var(--ff-heading); font-weight: 500;
  font-size: var(--display-xl);
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
  color: var(--clr-border-strong);
  margin: 0;
}
.preloader__fill {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 0; overflow: hidden; white-space: nowrap;
  color: var(--primary);
}
.preloader__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); }
.preloader__enter { opacity: 0; pointer-events: none; transition: opacity var(--transition-slow); }
.preloader__enter.is-ready { opacity: 1; pointer-events: auto; }

/* ──────────── Navigation: Leiste + Overlay ──────────── */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.nav__bar {
  /* muss positioniert und aufgestockt sein: sonst malt das absolut gesetzte
     ::before darüber, und das Overlay verdeckt den Schließen-Knopf. */
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  padding-block: clamp(0.9rem, 2vw, 1.4rem);
  pointer-events: auto;
}
/* Über dem Hero schwebt die Leiste frei; ab da bekommt sie einen Grund,
   sonst liegt die Wortmarke unlesbar auf dem Text darunter. */
.nav::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 100%;
  background: color-mix(in oklch, var(--clr-bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: var(--rule);
  opacity: 0; transition: opacity var(--transition-normal);
  pointer-events: none;
}
.nav[data-solid='true']::before { opacity: 1; }
.nav[data-open='true']::before { opacity: 0; }
.nav__brand {
  font-family: var(--ff-heading); font-weight: 500;
  font-size: calc(var(--text-xl) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--clr-text); text-decoration: none;
}
.nav__actions { display: flex; align-items: center; gap: var(--space-s); }
.nav__toggle {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.7em 1.2em;
  border: 0; border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--clr-bg) 72%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--clr-border);
  color: var(--clr-text);
  font-family: var(--ff-mono);
  font-size: calc(var(--text-xs) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer;
}
.nav__toggle-icon { display: grid; gap: 4px; }
.nav__toggle-icon span {
  display: block; inline-size: 18px; block-size: 1.5px;
  background: currentColor;
  transition: transform var(--transition-normal);
}
.nav[data-open='true'] .nav__toggle { background: var(--primary); color: var(--base-ultra-dark); box-shadow: none; backdrop-filter: none; }
.nav[data-open='true'] .nav__toggle-icon { gap: 0; }
.nav[data-open='true'] .nav__toggle-icon span { inline-size: 20px; block-size: 2px; }
.nav[data-open='true'] .nav__toggle-icon span:first-child { transform: translateY(1px) rotate(45deg); }
.nav[data-open='true'] .nav__toggle-icon span:last-child { transform: translateY(-1px) rotate(-45deg); }
.nav[data-open='true'] .nav__reserve { visibility: hidden; }

.nav__overlay {
  position: fixed; inset: 0;
  background: radial-gradient(120% 70% at 85% 0%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 60%), var(--base-ultra-dark);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  pointer-events: none;
  overflow: hidden;
}
.nav[data-open='true'] .nav__overlay { pointer-events: auto; overflow-y: auto; }
/* Der Inhalt kommt gekippt und vergrößert herein und richtet sich beim Öffnen auf. */
.nav__content {
  position: relative;
  min-block-size: 100%;
  display: grid; align-content: center;
  padding-block: calc(var(--header-height) + var(--space-l)) calc(var(--space-xxl) + var(--space-l));
  transform-origin: left bottom;
}
.nav__grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-l); align-items: center; }
.nav__preview {
  position: relative;
  justify-self: center;
  inline-size: min(100%, 24rem);
  aspect-ratio: 3 / 4;
  max-block-size: 70svh;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--plate);
}
.nav__preview img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover;
  will-change: transform, opacity;
}
.nav__bgimg { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.15rem, 1vw, 0.6rem); }
.nav__item { overflow: hidden; padding-block-end: 0.08em; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 0.35em;
  font-family: var(--ff-heading); font-weight: 500;
  font-size: var(--display-l);
  text-transform: uppercase; line-height: 1.02;
  color: var(--clr-text); text-decoration: none;
  transition: color var(--transition-fast);
}
.nav__link::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: -0.04em;
  block-size: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 300ms cubic-bezier(0.6, 0, 0.4, 1);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--primary-semi-light); }
.nav__idx { font-family: var(--ff-mono); font-size: 0.22em; letter-spacing: 0.1em; color: var(--primary-semi-light); align-self: start; padding-block-start: 0.5em; }
.nav__arrow { display: none; }
.nav__extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-block-start: var(--space-xl); }
.nav__today { display: inline-flex; align-items: center; gap: 0.6em; margin: 0;
  font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text-muted); }
.nav__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 25%, transparent); }
.nav__today[data-open='false'] .nav__dot { background: var(--neutral-semi-dark); box-shadow: none; }
.nav__quick { display: none; }
.nav__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-xl);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--rule);
}
.nav__meta-item { overflow: hidden; }
.nav__meta a { display: inline-flex; align-items: center; min-block-size: 2.25rem;
  color: var(--clr-text); text-decoration: none; }
.nav__meta a:hover { color: var(--clr-link); }
.nav__foot {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: flex; justify-content: space-between;
  padding-block: var(--shell-pad);
  /* rechts Platz für den Knopf des Barrieretools */
  padding-inline-end: calc(var(--shell-pad) + 4rem);
}
.nav__foot .label { overflow: hidden; }
.nav__foot .label span { display: inline-block; }

/* Die Seite kippt beim Öffnen des Menüs weg; sie braucht dafür einen eigenen Grund. */
.page { position: relative; background: var(--clr-bg); }

/* ──────────── Seitenwechsel ────────────
   Native View Transitions zwischen den Dokumenten, ohne Router und ohne Skript:
   die alte Seite gleitet nach oben weg und verblasst, die neue wird von unten
   aufgedeckt. Leiste und Barrieretool stehen still. Browser ohne Unterstützung
   wechseln die Seite einfach normal. */
@view-transition { navigation: auto; }
.nav__bar { view-transition-name: nav-bar; }
.a11y { view-transition-name: a11y; }
::view-transition-old(root) { animation: 1.4s cubic-bezier(0.87, 0, 0.13, 1) both vt-out; }
::view-transition-new(root) { animation: 1.4s cubic-bezier(0.87, 0, 0.13, 1) both vt-in; }
@keyframes vt-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0.2; transform: translateY(-35%); }
}
@keyframes vt-in {
  from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(25%); }
  to   { clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ──────────── Hero ──────────── */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid; align-items: center;
  overflow: hidden;
  background: var(--base-ultra-dark);
}
.hero__media { position: absolute; inset: 0; }
.hero__media picture,
.hero__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Der Schleier trägt den Kontrast der hellen Hero-Typo; gegen die echten
   Fotopixel gerechnet, nicht geschätzt (.tmp/hero-contrast.cjs). */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0.12 0.005 70 / 0.56) 0%, oklch(0.12 0.005 70 / 0.50) 45%, oklch(0.12 0.005 70 / 0.68) 100%);
}
.hero__inner {
  position: relative;
  display: grid; justify-items: center; gap: var(--space-m);
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xxl);
  text-align: center;
}
.hero__mark {
  font-size: var(--display-xxl);
  letter-spacing: 0.01em;
  color: var(--base-ultra-light);
  margin: 0;
}
.hero__sub {
  color: var(--base-semi-light);
  max-inline-size: 34ch;
}
.hero__foot {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-m);
  padding: var(--shell-pad);
  /* rechts Platz lassen: dort sitzt der fixierte Knopf des Barrieretools */
  padding-inline-end: calc(var(--shell-pad) + 4rem);
}
.hero__foot .label { color: var(--base-semi-light); }

/* ──────────── Haltung: Sticky-Kopf + Driftgalerie ──────────── */
.stance { position: relative; background: var(--clr-bg); padding-block: 0; }
.stance__head {
  position: sticky; inset-block-start: 0; z-index: 1;
  min-block-size: 100svh;
  display: grid; place-items: center;
  text-align: center;
}
.stance__head .shell { display: grid; justify-items: center; gap: var(--space-m); }
.stance__head h2 { font-size: var(--display-l); max-inline-size: 24ch; margin-inline: auto;
  text-shadow: 0 0.1em 1.2em oklch(0.150 0.005 70 / 0.9), 0 0 0.35em oklch(0.150 0.005 70 / 0.6); }
.stance__gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 6vw, 7rem);
  padding-block: var(--section-space-l);
  align-items: start;
}
.stance__col { display: grid; gap: clamp(2rem, 8vw, 9rem); will-change: transform; position: relative; }
/* Abwechselnd über und unter dem klebenden Text: links gleitet darunter, rechts
   darüber. Auf schmalen Viewports (eine Spalte) wechselt es Bild für Bild, unten. */
.stance__col:first-child { z-index: 0; }
.stance__col:last-child { z-index: 2; }
.stance__col:last-child { padding-block-start: clamp(3rem, 14vw, 12rem); }
.stance__img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--plate);
  will-change: transform;
}
.stance__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Schleier für Bilder, die unter dem Text durchlaufen. Ohne Bewegung steht er
   fest auf 0,5; mit Bewegung zieht das Skript ihn nur auf, solange das Bild
   hinter der Schrift liegt (--shade 0 → 0,65 → 0). */
.stance__img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: oklch(0.150 0.005 70);
  opacity: var(--shade, 0);
}
.stance__col:first-child .stance__img { --shade: 0.5; }
.stance__img:nth-child(odd)  { inline-size: min(100%, 26rem); justify-self: end; aspect-ratio: 4 / 5; }
.stance__img:nth-child(even) { inline-size: min(78%, 19rem); justify-self: start; aspect-ratio: 1; }
.stance__col:last-child .stance__img:nth-child(odd)  { justify-self: start; aspect-ratio: 5 / 7; }
.stance__col:last-child .stance__img:nth-child(even) { justify-self: end; aspect-ratio: 3 / 2; inline-size: min(88%, 22rem); }

/* ──────────── Zahlenband (Die Bar) und Zahlen bei „Tisch oder Tresen" ──────────── */
.facts { padding-block: var(--section-space-m); border-block: var(--rule); }
.facts__list { list-style: none; margin-block: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-l); }
.fact { display: grid; gap: var(--space-s); align-content: start; }
.fact__num {
  font-family: var(--ff-heading); font-weight: 500;
  font-size: calc(clamp(3rem, 6.5vw, 6.5rem) * var(--user-font-scale)); line-height: 0.85;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--clr-text);
  transition: color 600ms var(--ease-out);
}
/* Vor dem Hochzählen nur Umriss; die Klasse setzt das Skript, also nie ohne JS. */
.fact__num.is-outline { color: transparent; -webkit-text-stroke: 1px var(--primary-semi-light); }
.rfacts { list-style: none; margin: 0; padding: 0; display: grid; }
.rfacts .fact {
  grid-template-columns: minmax(6.5rem, auto) 1fr; align-items: center; gap: var(--space-l);
  padding-block: var(--space-m); border-block-start: var(--rule);
}
.rfacts .fact:last-child { border-block-end: var(--rule); }
.fact__label { font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text-muted); max-inline-size: 18ch; }

/* ──────────── Die Bar: Sticky-Cards ──────────── */
.house__head { margin-block-end: var(--space-xl); }
.house__head h2 { font-size: var(--display-l); }
.house__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-l); }
.house__card {
  position: sticky; inset-block-start: calc(var(--header-height) + var(--space-m));
  display: grid; gap: var(--space-m);
  padding: var(--space-l);
  background: var(--surface-lit);
  border-radius: var(--radius-m);
  will-change: transform;
}
.house__media { aspect-ratio: 16 / 10; border-radius: var(--radius-s); overflow: hidden; background: var(--plate); }
.house__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.house__card h3 { font-size: calc(var(--text-xxl) * var(--user-font-scale)); }

/* ──────────── Veranstaltungen: Plakate ──────────── */
.events { background: var(--section-lit); overflow: hidden; }
.events__side { display: grid; justify-items: end; gap: var(--space-s); }
.events__controls { display: flex; gap: var(--space-xs); }
.events.is-pinned .events__controls { display: none; }
.voices__btn:disabled { opacity: 0.35; cursor: default; }
.events__pin { display: grid; gap: var(--space-xl); padding-block: var(--section-space-l); }
.events__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-m); }
.events__head h2 { font-size: var(--display-l); }
.events__viewport {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  padding-inline: var(--shell-pad);
  scroll-padding-inline: var(--shell-pad);
}
.events__track { list-style: none; margin: 0; padding: 0 0 var(--space-s); display: flex; gap: var(--space-m); inline-size: max-content; }
.poster {
  position: relative;
  scroll-snap-align: start;
  inline-size: min(82vw, 25rem);
  min-block-size: 32rem;
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-s);
  padding: var(--space-l);
  border-radius: var(--radius-m);
  background: var(--surface-lit);
  box-shadow: inset 0 3px 0 var(--primary-semi-light), inset 0 0 0 1px oklch(1 0 0 / 0.07);
  color: var(--base-ultra-light);
  overflow: hidden;
}
.poster__date { margin: 0 0 var(--space-s); }
.poster__date time { display: grid; }
.poster__day {
  font-family: var(--ff-heading); font-weight: 500;
  font-size: calc(clamp(6rem, 11vw, 9.5rem) * var(--user-font-scale));
  line-height: 0.8; letter-spacing: -0.02em;
  color: var(--accent-semi-light);
}
.poster--alt .poster__day { color: var(--primary-semi-light); }
.poster__month {
  margin-block-start: var(--space-s);
  font-family: var(--ff-mono); font-size: calc(var(--text-s) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.14em;
}
.poster__title { font-size: calc(var(--text-xxl) * var(--user-font-scale)); line-height: 1; margin: 0; }
.poster__meta {
  margin: 0; font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--base-semi-light);
}
.poster__desc { margin: 0; align-self: start; font-size: calc(var(--text-s) * var(--user-font-scale)); color: var(--base-semi-light); }
.poster__cta {
  justify-self: start;
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
  padding-inline: 1.2em;
  border-radius: var(--radius-pill);
  background: var(--base-ultra-light); color: var(--base-ultra-dark);
  font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
}
.poster__cta:hover { background: var(--primary); color: var(--base-ultra-dark); }
.poster__cta--plain { background: transparent; color: var(--base-semi-light); box-shadow: inset 0 0 0 1px var(--clr-border-strong); }
/* Gepinnt (nur breit + Bewegung, Klasse setzt das Skript): kein Querscrollen von
   Hand, die Spur fährt beim Scrollen seitlich. */
.events.is-pinned .events__pin { min-block-size: 100svh; align-content: center; }
.events.is-pinned .events__viewport { overflow: visible; scroll-snap-type: none; }

/* ──────────── Startseite: Hinweis „Als Nächstes" im Hero ──────────── */
.hero__next {
  display: inline-flex; align-items: center; gap: var(--space-s);
  min-block-size: 2.75rem;
  padding: 0.4em 0.5em 0.4em 1em;
  border-radius: var(--radius-pill);
  background: oklch(0.150 0.005 70 / 0.6);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--clr-border-strong);
  color: var(--base-ultra-light); text-decoration: none;
  font-size: calc(var(--text-s) * var(--user-font-scale));
}
.hero__next-label {
  font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-semi-light);
}
.hero__next-arrow {
  display: grid; place-items: center; inline-size: 2rem; block-size: 2rem;
  border-radius: 50%; background: var(--primary); color: var(--base-ultra-dark);
  transition: transform var(--transition-fast);
}
.hero__next:hover .hero__next-arrow { transform: translateX(3px); }

/* ──────────── Kontakt: Online-Reservierung ──────────── */
.book { padding-block: var(--section-space-l); border-block-start: var(--rule); scroll-margin-block-start: var(--header-height); }
.book__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.book__form { display: grid; gap: var(--space-xl); min-inline-size: 0; }
.book__head h2 { font-size: var(--display-l); }
.book__step { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: var(--space-m); }
.book__legend {
  display: flex; align-items: baseline; gap: var(--space-s);
  padding: 0; margin-block-end: var(--space-m);
  font-family: var(--ff-heading); font-weight: 500; text-transform: uppercase;
  font-size: calc(var(--text-xxl) * var(--user-font-scale)); line-height: 1;
}
.book__num { font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale)); color: var(--primary-semi-light); letter-spacing: 0.1em; }
.js .book__native { display: none; }

/* Chips für Datum und Uhrzeit: echte Radio-Buttons, nur anders angezogen. */
.book__days {
  display: flex; gap: var(--space-xs);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
  padding-block: 0.25rem var(--space-s);
}
.book__days[hidden], .book__times[hidden] { display: none; }
.chip { position: relative; flex: none; scroll-snap-align: start; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip__face {
  display: grid; justify-items: center; gap: 0.15rem;
  min-inline-size: 4.4rem;
  padding: 0.7rem 0.6rem;
  border-radius: var(--radius-s);
  box-shadow: inset 0 0 0 1px var(--clr-border-strong);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.chip__wd { font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text-muted); }
.chip__d { font-family: var(--ff-heading); font-size: calc(var(--text-xxl) * var(--user-font-scale)); line-height: 1; }
.chip__m { font-size: calc(var(--text-xs) * var(--user-font-scale)); color: var(--clr-text-muted); }
.chip input:hover:not(:disabled) + .chip__face { box-shadow: inset 0 0 0 1px var(--primary); }
.chip input:checked + .chip__face { background: var(--primary); color: var(--base-ultra-dark); box-shadow: none; }
.chip input:checked + .chip__face :is(.chip__wd, .chip__m) { color: var(--base-ultra-dark); }
.chip input:focus-visible + .chip__face { outline: 2px solid var(--primary-semi-light); outline-offset: 3px; }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + .chip__face { opacity: 0.4; box-shadow: inset 0 0 0 1px var(--clr-border); }
.chip input:disabled + .chip__face .chip__time { text-decoration: line-through; }
.chip__flag { font-family: var(--ff-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-semi-light); }
.chip input:checked + .chip__face .chip__flag { color: var(--base-ultra-dark); }

.book__times { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.book__times .chip__face { min-inline-size: 5rem; padding: 0.75rem 0.9rem; }
.chip__time { font-family: var(--ff-mono); font-size: calc(var(--text-s) * var(--user-font-scale)); }

.book__count { display: flex; align-items: center; gap: var(--space-s); }
.book__count-btn {
  inline-size: 3rem; block-size: 3rem; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; box-shadow: inset 0 0 0 1px var(--clr-border-strong);
  color: var(--clr-text); font-size: 1.4rem; cursor: pointer;
  transition: background var(--transition-fast);
}
.book__count-btn:hover:not(:disabled) { background: color-mix(in oklch, var(--primary) 20%, transparent); }
.book__count-btn:disabled { opacity: 0.4; cursor: default; }
.book__count-btn[hidden] { display: none; }
.book__count-input {
  inline-size: 4.5ch; text-align: center;
  border: 0; background: transparent; color: var(--clr-text);
  font-family: var(--ff-heading); font-size: calc(var(--display-l) * 0.9); line-height: 1;
  -moz-appearance: textfield; appearance: textfield;
}
.book__count-input::-webkit-inner-spin-button, .book__count-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.book__count-input:focus-visible { outline: 2px solid var(--primary-semi-light); outline-offset: 4px; border-radius: var(--radius-s); }
.book__count-unit { font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text-muted); }
.book__hint { margin: 0; padding: var(--space-s) var(--space-m); border-radius: var(--radius-s); background: color-mix(in oklch, var(--primary) 12%, transparent); font-size: calc(var(--text-s) * var(--user-font-scale)); }
.book__hint[data-tier='group'] { background: none; border-radius: 0; box-shadow: inset 3px 0 0 var(--primary-semi-light); }
.book__note { margin: 0; font-size: calc(var(--text-s) * var(--user-font-scale)); color: var(--clr-text-muted); }

.book__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.book__field { display: grid; gap: 0.4rem; }
.book__field--wide { grid-column: 1 / -1; }
.book__field-label { font-size: calc(var(--text-s) * var(--user-font-scale)); color: var(--clr-text-muted); }
.book__opt { opacity: 0.8; }
.book__input {
  inline-size: 100%;
  padding: 0.8rem 0.95rem;
  border: 0; border-radius: var(--radius-s);
  background: var(--base-dark);
  box-shadow: inset 0 0 0 1px var(--clr-border-strong);
  color: var(--clr-text); font: inherit;
  color-scheme: dark;
}
.book__input:focus-visible { outline: 2px solid var(--primary-semi-light); outline-offset: 2px; }
.book__input[aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--accent-semi-light); }
textarea.book__input { resize: vertical; min-block-size: 5.5rem; }
.book__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.book__status { margin: 0; min-block-size: 1.5em; font-size: calc(var(--text-s) * var(--user-font-scale)); }
.book__status[data-kind='error'] { color: var(--accent-semi-light); }
.book__status[data-kind='ok'] { color: var(--primary-semi-light); }

/* Ticket: Papier mit Abrisskante, füllt sich live mit. */
.ticket { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-l)); }
.ticket__paper {
  position: relative;
  display: grid; gap: var(--space-m);
  padding: var(--space-xl) var(--space-l) var(--space-l);
  border-radius: var(--radius-s);
  background: var(--base-ultra-light); color: var(--base-ultra-dark);
  box-shadow: 0 2rem 4rem -1.5rem oklch(0 0 0 / 0.6);
  transform: rotate(-1.5deg);
}
.ticket__brand { margin: 0; text-align: center; font-family: var(--ff-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.35em; font-size: calc(var(--text-xl) * var(--user-font-scale)); }
.ticket__kind { margin: 0; text-align: center; font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale)); text-transform: uppercase; letter-spacing: 0.14em; color: var(--base-semi-dark); }
.ticket__rows { margin: 0; display: grid; }
.ticket__row { display: flex; justify-content: space-between; gap: var(--space-m); padding-block: 0.7rem; border-block-end: 1px dashed oklch(0.150 0.005 70 / 0.3); }
.ticket__row dt { font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--base-semi-dark); }
.ticket__row dd { margin: 0; text-align: end; font-weight: 600; overflow: hidden; }
.ticket__row dd span { display: inline-block; }
.ticket__tear {
  /* Abrisskante: gestrichelte Linie, links und rechts je eine Kerbe. */
  position: relative;
  block-size: 1.4rem; margin-inline: calc(-1 * var(--space-l));
  background: linear-gradient(90deg, oklch(0.150 0.005 70 / 0.35) 50%, transparent 0) center / 0.7rem 1px repeat-x;
}
.ticket__tear::before, .ticket__tear::after {
  content: ''; position: absolute; inset-block-start: 50%;
  inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%;
  background: var(--clr-bg);
  translate: 0 -50%;
}
.ticket__tear::before { inset-inline-start: -0.7rem; }
.ticket__tear::after { inset-inline-end: -0.7rem; }
.ticket__foot { margin: 0; text-align: center; font-size: calc(var(--text-xs) * var(--user-font-scale)); color: var(--base-semi-dark); }
.ticket__stamp {
  position: absolute; inset-block-start: 80%; inset-inline-start: 50%;
  margin: 0; padding: 0.3em 0.8em;
  border: 3px solid var(--accent-semi-dark); border-radius: 0.3rem;
  color: var(--accent-semi-dark);
  font-family: var(--ff-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  font-size: calc(var(--text-l) * var(--user-font-scale));
  transform: translate(-50%, -50%) rotate(-12deg) scale(1.6);
  opacity: 0; pointer-events: none;
}
.ticket.is-stamped .ticket__stamp { opacity: 0.9; transform: translate(-50%, -50%) rotate(-12deg) scale(1); transition: transform 350ms cubic-bezier(0.2, 1.6, 0.4, 1), opacity 200ms; }

/* ──────────── Gästestimmen ──────────── */
.voices { overflow: hidden; }
.voices__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-m); margin-block-end: var(--space-xl); }
.voices__head h2 { font-size: var(--display-l); }
.voices__viewport { position: relative; overflow: hidden; }
.voices__track { display: flex; gap: var(--space-l); will-change: transform; }
.voice {
  flex: 0 0 min(88vw, 26rem);
  display: grid; gap: var(--space-m); align-content: start;
  padding: var(--space-l);
  border-radius: var(--radius-m);
  background: var(--surface-lit);
}
.voice__quote { font-size: calc(var(--text-l) * var(--user-font-scale)); line-height: 1.45; color: var(--clr-text); }
.voice__who { display: flex; align-items: center; gap: var(--space-s); }
/* Monogramm statt Porträtfoto: einer erfundenen Bewertung soll kein echtes
   Gesicht aus einer Stockserie zugeordnet werden. */
.voice__av {
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--primary) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 45%, transparent);
  font-family: var(--ff-mono);
  font-size: calc(var(--text-xs) * var(--user-font-scale));
  letter-spacing: 0.04em;
  color: var(--primary-semi-light);
}
.voices__controls { display: flex; gap: var(--space-xs); }
.voices__btn {
  inline-size: 2.75rem; block-size: 2.75rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1px var(--clr-border-strong);
  color: var(--clr-text); cursor: pointer;
  transition: background var(--transition-fast);
}
.voices__btn:hover { background: color-mix(in oklch, var(--primary) 18%, transparent); }

/* ──────────── Reservierung mit Fasspegel ──────────── */
.reserve__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.reserve h2 { font-size: var(--display-l); }
.reserve__body { display: grid; gap: var(--space-m); align-content: start; }
.reserve__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: var(--space-s); }

/* ──────────── Besuch ──────────── */
.visit { background: var(--section-lit); }
.visit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.visit h2 { font-size: var(--display-l); margin-block-end: var(--space-xl); }
.visit__block { display: grid; gap: var(--space-s); align-content: start; }
.visit__block + .visit__block { margin-block-start: var(--space-xl); }
.hours { list-style: none; margin: 0; padding: 0; display: grid; }
.hours li { display: flex; justify-content: space-between; gap: var(--space-m); padding-block: 0.55rem; border-block-start: var(--rule); }
.hours li:last-child { border-block-end: var(--rule); }
.hours__day { color: var(--clr-text-muted); }
.hours__time { font-family: var(--ff-mono); font-size: calc(var(--text-s) * var(--user-font-scale)); }
.special { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.special li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  box-shadow: inset 3px 0 0 var(--primary-semi-light);
  font-size: calc(var(--text-s) * var(--user-font-scale));
}
.special__date { font-family: var(--ff-mono); color: var(--accent-semi-light); }
.visit__map { border-radius: var(--radius-m); overflow: hidden; background: var(--plate); aspect-ratio: 4 / 3; }
.visit__map img { inline-size: 100%; block-size: 100%; object-fit: cover;
  /* Eine Karte ist hell. Nur entblenden, nicht einfärben — Umfärben würde die
     Beschriftung und die OSM-Nennung schlechter lesbar machen. */
  filter: brightness(0.9) contrast(1.02); }
.visit__mapnote { margin-block-start: var(--space-s); }
.visit__maplinks { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: var(--space-m); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; }
.contact-list li { display: flex; align-items: center; min-block-size: 2.75rem; }
/* Tippziel mindestens 24x24 px mit Abstand (WCAG 2.2, 2.5.8) */
.contact-list a { display: inline-flex; align-items: center; min-block-size: 2.75rem;
  color: var(--clr-text); text-decoration: none; }
.contact-list a:hover { color: var(--clr-link); text-decoration: underline; }

/* ──────────── Startseite: Blätterkarte ────────────
   Papierkarte in der Mitte, Pfeile links, Miniaturen mit Getränkefoto rechts.
   Ohne JS stehen alle Bereiche untereinander auf derselben Karte. */
.dmenu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-space-l);
}
.dmenu__bg { position: absolute; inset: 0; z-index: -1; }
.dmenu__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.dmenu__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0.150 0.005 70 / 0.82), oklch(0.150 0.005 70 / 0.62) 50%, oklch(0.150 0.005 70 / 0.86));
}
.dmenu__inner { display: grid; gap: var(--space-xl); }
.dmenu__head { display: grid; justify-items: center; gap: var(--space-s); text-align: center; }
.dmenu__head h2 { font-size: var(--display-l); }
.dmenu__stage {
  display: grid;
  grid-template-columns: 1fr minmax(0, 36rem) 1fr;
  align-items: center;
  gap: var(--space-l);
}
.dmenu__nav { display: grid; justify-items: center; gap: var(--space-s); }
.dmenu__arrow-wrap { display: block; }
.dmenu__arrow {
  inline-size: 4.5rem; block-size: 4.5rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--base-ultra-light); color: var(--base-ultra-dark);
  cursor: pointer;
  transition: opacity var(--transition-normal), transform 200ms var(--ease-out);
}
.dmenu__arrow svg { inline-size: 1.5rem; block-size: 1.5rem; }
.dmenu__arrow:active { transform: scale(0.88); }
.dmenu__arrow:disabled { opacity: 0.45; cursor: default; }
.dmenu__arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.dmenu__card {
  position: relative;
  display: grid; align-content: start;
  min-block-size: min(46rem, 80svh);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem) 6rem;
  border-radius: var(--radius-s);
  background: var(--base-ultra-light);
  color: var(--base-ultra-dark);
  box-shadow: 0 2rem 4rem -1.5rem oklch(0 0 0 / 0.6);
  will-change: transform, opacity;
}
.dmenu__sheet + .dmenu__sheet { margin-block-start: var(--space-xl); }
.js .dmenu__sheet:not(.is-active) { display: none; }
.js .dmenu__sheet + .dmenu__sheet { margin-block-start: 0; }
.dmenu__title {
  text-align: center;
  font-size: calc(var(--text-xxl) * var(--user-font-scale));
  color: var(--base-ultra-dark);
  margin-block-end: var(--space-l);
}
.dmenu__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); }
.dmenu__item { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem var(--space-m); }
.dmenu__name { font-weight: 600; }
.dmenu__price { font-family: var(--ff-mono); font-size: calc(var(--text-s) * var(--user-font-scale)); }
.dmenu__desc { grid-column: 1 / -1; color: var(--base-semi-dark); font-size: calc(var(--text-s) * var(--user-font-scale)); }
.dmenu__sign {
  position: absolute; inset-block-end: 2.25rem; inset-inline: 0;
  margin: 0; text-align: center;
  font-family: var(--ff-heading); font-weight: 600;
  font-size: calc(var(--text-s) * var(--user-font-scale));
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--base-ultra-dark);
}

.dmenu__map { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); justify-content: start; }
.dmenu__map-item {
  display: flex; align-items: center; gap: var(--space-s);
  padding: 0; border: 0; background: none;
  color: var(--clr-text-muted);
  font: inherit; text-align: start;
  cursor: pointer;
  will-change: transform, opacity;
}
.dmenu__thumb {
  position: relative; flex: none;
  inline-size: 4.25rem; aspect-ratio: 4 / 5;
  border-radius: var(--radius-s); overflow: hidden;
  background: var(--plate);
}
.dmenu__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.dmenu__thumb::after {
  content: ''; position: absolute; inset: 0;
  background: oklch(0.150 0.005 70 / 0.55);
  transition: opacity 300ms;
}
.dmenu__map-label { transition: color 300ms; }
.dmenu__map-item[aria-pressed='true'] .dmenu__thumb::after,
.dmenu__map-item:hover .dmenu__thumb::after { opacity: 0; }
.dmenu__map-item[aria-pressed='true'] .dmenu__map-label,
.dmenu__map-item:hover .dmenu__map-label { color: var(--clr-text); }
.dmenu__map-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 0.2rem; }
/* Ohne JS blättert nichts; dann sind Pfeile und Miniaturen nur Dekoration. */
html:not(.js) .dmenu__nav,
html:not(.js) .dmenu__map { display: none; }
.dmenu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-m); }

/* ──────────── Das Haus: Pin-Hero ──────────── */
.ahero { position: relative; overflow: clip; background: var(--clr-bg); }
.ahero__pin {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--space-m);
  min-block-size: 100svh;
  padding: calc(var(--header-height) + var(--space-l)) var(--shell-pad) var(--space-xl);
}
.ahero__title {
  position: relative; z-index: 2;
  display: grid; justify-items: center;
  margin: 0; text-align: center;
  font-size: calc(clamp(3.5rem, 10vw, 13rem) * var(--user-font-scale));
  line-height: 0.88;
}
.ahero__line { display: block; will-change: transform; }
.ahero__img {
  position: relative;
  inline-size: min(100%, 37.5rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--plate);
  transform-origin: center;
  will-change: transform, opacity;
}
.ahero__img img { inline-size: 100%; block-size: 100%; object-fit: cover; will-change: transform; }
/* Nur mit Bewegung: lange Spur, Inhalt klebt oben (auch auf dem Handy). */
@media (prefers-reduced-motion: no-preference) {
  :root.js:not([data-motion='reduce']) .ahero { block-size: 250vh; }
  :root.js:not([data-motion='reduce']) .ahero__pin { position: sticky; inset-block-start: 0; block-size: 100svh; }
}

.ainfo { padding-block: var(--space-xl) var(--section-space-l); }
.ainfo__inner { display: grid; gap: var(--space-l); }
.ainfo__text {
  /* Fließtext in der Grotesk: Bodoni nur für Überschriften, längerer Text in
     Didone-Versalien war schwer zu lesen. */
  max-inline-size: 36ch;
  font-weight: 400;
  font-size: calc(clamp(1.35rem, 2.3vw, 2.1rem) * var(--user-font-scale));
  line-height: 1.3; letter-spacing: -0.01em;
  color: var(--clr-text);
}
.ainfo__text + .ainfo__text { justify-self: end; color: var(--clr-text-muted); }

/* ──────────── Bildband ──────────── */
.ibanner {
  position: relative; isolation: isolate; overflow: hidden;
  min-block-size: 100svh;
  display: grid;
}
.ibanner__bg { position: absolute; inset: 0; z-index: -1; }
.ibanner__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ibanner__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0.150 0.005 70 / 0.55), oklch(0.150 0.005 70 / 0.35) 45%, oklch(0.150 0.005 70 / 0.8));
}
.ibanner__inner {
  display: grid; align-content: space-between; gap: var(--space-xl);
  padding-block: calc(var(--header-height) + var(--space-l)) var(--space-xl);
}
.ibanner__words { font-size: var(--display-xl); line-height: 0.9; margin: 0; color: var(--base-ultra-light); }
.ibanner__text {
  justify-self: end; max-inline-size: 34ch; margin: 0;
  font-size: calc(var(--text-l) * var(--user-font-scale));
  color: var(--base-semi-light);
}

/* ──────────── Weiter (Abschluss jeder Unterseite) ──────────── */
.cta { padding-block: var(--section-space-l); border-block-start: var(--rule); }
.cta__inner { display: grid; justify-items: center; gap: var(--space-m); text-align: center; }
.cta__title { font-size: var(--display-xl); max-inline-size: 14ch; margin: 0; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); margin-block-start: var(--space-s); }

/* ──────────── Karte: Kopf ──────────── */
.mhero { position: relative; min-block-size: 100svh; display: grid; align-items: start; overflow: clip; }
.mhero__inner {
  display: grid; justify-items: center; gap: var(--space-l);
  padding-block: calc(var(--header-height) + var(--space-l)) var(--space-xxl);
  text-align: center;
}
.mhero__title { font-size: var(--display-xl); max-inline-size: 13ch; margin: 0; }
/* Fächer aus fünf Getränkefotos, wie eine Hand Spielkarten. Die Lage steht im CSS
   (translate/rotate), damit er auch ohne JS stimmt; GSAP rechnet nur Versätze
   obendrauf (transform), die beiden setzen sich zusammen. */
.mfan {
  --spread: clamp(3.4rem, 9vw, 8.5rem);
  --tilt: 8deg;
  --card: clamp(8.5rem, 16vw, 13.5rem);
  position: relative;
  inline-size: 100%;
  block-size: clamp(15rem, 32vw, 23rem);
  margin-block: var(--space-s) var(--space-m);
}
.mfan__card {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  inline-size: var(--card); aspect-ratio: 4 / 5;
  margin-inline-start: calc(var(--card) / -2);
  border-radius: var(--radius-s); overflow: hidden;
  background: var(--plate);
  box-shadow: 0 1.5rem 3rem -1rem oklch(0 0 0 / 0.75), inset 0 0 0 1px oklch(1 0 0 / 0.08);
  translate: calc(var(--n) * var(--spread)) calc(abs(var(--n)) * 0.9rem);
  rotate: calc(var(--n) * var(--tilt));
  transform-origin: 50% 120%;
  z-index: calc(10 - abs(var(--n)));
  will-change: transform;
}
.mfan__card img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mhero__jump { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.mhero__jump a {
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
  padding-inline: 1.2em;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--clr-border-strong);
  font-family: var(--ff-mono);
  font-size: calc(var(--text-xs) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--clr-text); text-decoration: none;
  transition: background var(--transition-fast);
}
.mhero__jump a:hover { background: color-mix(in oklch, var(--primary) 18%, transparent); }
.mhero__foot {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: flex; justify-content: space-between;
  padding: var(--shell-pad);
  padding-inline-end: calc(var(--shell-pad) + 4rem);
}

/* ──────────── Karte: Bereiche mit Fotokarten ──────────── */
.mlist { padding-block: var(--space-xl) var(--section-space-l); }
.mlist__inner { display: grid; gap: var(--section-space-l); }
.mcat { scroll-margin-block-start: calc(var(--header-height) + var(--space-l)); }
.mcat__head { display: grid; justify-items: center; gap: var(--space-s); margin-block-end: var(--space-xl); text-align: center; }
.mcat__title { font-size: var(--display-l); margin: 0; }
.mcat__tag { margin: 0; color: var(--clr-text-muted); font-size: calc(var(--text-l) * var(--user-font-scale)); }
.mgrid {
  list-style: none; margin: 0 auto; padding: 0;
  inline-size: min(100%, 76rem);
  /* Flex statt Raster: vier Drinks stehen in einer Reihe, drei mittig, keiner allein. */
  --mgrid-cols: 4;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-s);
}
.mgrid > * { flex: 0 1 calc((100% - (var(--mgrid-cols) - 1) * var(--space-s)) / var(--mgrid-cols)); }
.mcard {
  display: grid; grid-template-rows: auto 1fr;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--clr-bg);
  box-shadow: inset 0 0 0 1px var(--clr-border);
  will-change: transform, opacity;
}
.mcard--alt { background: var(--surface-lit); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.07); }
.mcard__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--plate); }
.mcard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.mcard:hover .mcard__media img { transform: scale(1.04); }
.mcard__body { display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-s); padding: var(--space-l) var(--space-m) var(--space-m); }
.mcard__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--space-xs) var(--space-s); }
.mcard__name { font-size: calc(var(--text-xl) * var(--user-font-scale)); line-height: 1; margin: 0; }
.mcard__kind {
  flex: none;
  padding: 0.3em 0.6em;
  border-radius: 0.2rem;
  background: var(--base-semi-dark);
  font-family: var(--ff-mono);
  font-size: calc(var(--text-xs) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  color: var(--base-semi-light);
}
.mcard__desc { margin: 0; color: var(--clr-text-muted); font-size: calc(var(--text-s) * var(--user-font-scale)); }
.mcard__price { align-self: end; margin: 0; font-family: var(--ff-mono); color: var(--clr-text); }
.mlist__note { text-align: center; }

/* ──────────── Reservierung: Kopf ──────────── */
.rhero { min-block-size: 100svh; display: grid; align-items: center; }
.rhero__inner {
  display: grid; justify-items: center; gap: var(--space-l);
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xxl);
  text-align: center;
}
.rhero__title { font-size: var(--display-xl); max-inline-size: 14ch; margin: 0; }
.rhero__lede { margin-inline: auto; max-inline-size: 44ch; }
.rhero__phone a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--clr-text-muted); text-decoration: none; }
.rhero__phone a:hover { color: var(--clr-link); }

/* ──────────── Reservierung: drei Karten ────────────
   Grundzustand: drei Papierkarten nebeneinander bzw. untereinander.
   .is-pinned setzt das Skript nur auf breiten Viewports mit Bewegung. */
.rinfo { padding-block: var(--section-space-m); }
.rinfo__inner {
  inline-size: min(100% - 2 * var(--shell-pad), 90rem);
  margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s);
}
.rinfo__icon { display: none; }
.rinfo__card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-m);
  block-size: 100%;
  padding: var(--space-xl) var(--space-l);
  border-radius: var(--radius-s);
  background: var(--base-ultra-light);
  color: var(--base-ultra-dark);
  text-align: center;
}
.rinfo__card-icon { inline-size: 2.5rem; block-size: 2.5rem; color: var(--base-ultra-dark); }
.rinfo__card h3 { margin: 0; color: var(--base-ultra-dark); font-size: calc(var(--text-xxl) * var(--user-font-scale)); }
.rinfo__card p { margin: 0; max-inline-size: 28ch; color: var(--base-semi-dark); }
.rinfo__items {
  list-style: none; margin: var(--space-s) 0 0; padding: 0;
  display: grid; gap: var(--space-s);
  font-family: var(--ff-mono);
  font-size: calc(var(--text-xs) * var(--user-font-scale));
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--base-semi-dark);
}
.rinfo__items a { color: var(--base-ultra-dark); text-underline-offset: 0.2em; }
.rinfo__items a:hover { color: var(--primary-ultra-dark); }

.rinfo.is-pinned { block-size: 100svh; padding: 0; display: grid; place-items: center; overflow: hidden; }
.rinfo.is-pinned .rinfo__inner { display: flex; inline-size: 85%; block-size: 85%; gap: var(--space-s); }
.rinfo.is-pinned .rinfo__panel {
  position: relative; flex: 1;
  border-radius: var(--radius-s);
  background: var(--surface-lit);
  will-change: transform;
}
.rinfo.is-pinned .rinfo__panel:nth-child(1) { z-index: 3; }
.rinfo.is-pinned .rinfo__panel:nth-child(2) { z-index: 2; }
.rinfo.is-pinned .rinfo__panel:nth-child(3) { z-index: 1; }
.rinfo.is-pinned .rinfo__icon {
  display: block;
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 6rem; block-size: 6rem;
  translate: -50% -50%;
  color: var(--neutral-dark);
}
.rinfo.is-pinned .rinfo__icon svg { inline-size: 100%; block-size: 100%; }
.rinfo.is-pinned .rinfo__card {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: calc(100% + 4px); block-size: calc(100% + 4px);
  will-change: transform;
}

/* ──────────── Fuß ──────────── */
.site-foot { padding-block: var(--section-space-m) var(--space-l); background: var(--clr-bg); }
.site-foot__mark { font-family: var(--ff-heading); font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: var(--display-xxl); line-height: 0.85; margin: 0 0 var(--space-l); color: var(--clr-text); }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l); margin-block-end: var(--space-l); }
.site-foot__nav a {
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
  font-family: var(--ff-heading); font-size: calc(var(--text-xl) * var(--user-font-scale));
  text-transform: uppercase; color: var(--clr-text); text-decoration: none;
}
.site-foot__nav a:hover, .site-foot__nav a[aria-current='page'] { color: var(--primary-semi-light); }
.site-foot__cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-l); padding-block-start: var(--space-m); border-block-start: var(--rule); }
/* Tippziel mindestens 24x24 px mit Abstand (WCAG 2.2, 2.5.8) */
.site-foot__cols a { display: inline-flex; align-items: center; min-block-size: 2.25rem;
  color: var(--clr-text); text-decoration: none; }
.site-foot__cols a:hover { color: var(--clr-link); }
.site-foot__demo {
  margin-block-start: var(--space-l); padding: var(--space-m);
  border-radius: var(--radius-s);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  font-size: calc(var(--text-s) * var(--user-font-scale));
  color: var(--clr-text);
  max-inline-size: none;
}

/* ──────────── Barrieretool ──────────── */
.a11y { position: fixed; inset-block-end: var(--space-m); inset-inline-end: var(--space-m); z-index: var(--z-sticky); }
.is-mockup .a11y { display: none; }
.a11y__btn {
  inline-size: 3rem; block-size: 3rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--primary); color: var(--base-ultra-dark);
  box-shadow: var(--shadow-md); cursor: pointer;
}
.a11y__btn svg { inline-size: 1.4rem; block-size: 1.4rem; }
.a11y__panel {
  position: absolute; inset-block-end: calc(100% + var(--space-s)); inset-inline-end: 0;
  inline-size: min(19rem, calc(100vw - 2 * var(--space-m)));
  display: grid; gap: var(--space-m);
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background: var(--clr-surface-raised);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--clr-border);
}
.a11y__panel[hidden] { display: none; }
.a11y__title { font-family: var(--ff-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text-muted); margin: 0; }
.a11y__group { display: grid; gap: var(--space-xs); }
.a11y__lab { font-size: var(--text-s); color: var(--clr-text-muted); }
.a11y__seg { display: flex; gap: 0.25rem; }
.a11y__seg-btn, .a11y__toggle, .a11y__reset {
  padding: 0.5em 0.9em;
  border: 0; border-radius: var(--radius-s);
  background: transparent; box-shadow: inset 0 0 0 1px var(--clr-border-strong);
  color: var(--clr-text); font: inherit; font-size: var(--text-s);
  cursor: pointer;
}
.a11y__seg-btn { flex: 1; }
.a11y__toggle { inline-size: 100%; text-align: start; }
.a11y__seg-btn[aria-pressed='true'], .a11y__toggle[aria-pressed='true'] {
  background: var(--primary); color: var(--base-ultra-dark); box-shadow: none;
}
.a11y__reset { justify-self: start; font-size: var(--text-xs); }

/* Hoher Kontrast */
:root[data-contrast='high'] {
  /* Hoher Kontrast heißt hier: reines Schwarz und reines Weiß, 21:1.
     Statt jede Komponente einzeln umzufärben, werden die Farbleitern selbst
     auf zwei Werte gelegt; alles, was auf Tokens steht, folgt. Hell → Weiß,
     dunkel → Schwarz. Messing und Oxidrot verschwinden bewusst mit. */
  --bw-white: oklch(1 0 0);
  --bw-black: oklch(0 0 0);
  --primary-ultra-light: var(--bw-white); --primary-light: var(--bw-white);
  --primary-semi-light: var(--bw-white);  --primary: var(--bw-white); --primary-hover: var(--bw-white);
  --primary-semi-dark: var(--bw-black);   --primary-dark: var(--bw-black); --primary-ultra-dark: var(--bw-black);
  --accent-ultra-light: var(--bw-white);  --accent-light: var(--bw-white);
  --accent-semi-light: var(--bw-white);   --accent: var(--bw-white); --accent-hover: var(--bw-white);
  --accent-semi-dark: var(--bw-black);    --accent-dark: var(--bw-black); --accent-ultra-dark: var(--bw-black);
  --base-ultra-light: var(--bw-white);    --base-light: var(--bw-white); --base-semi-light: var(--bw-white);
  --base: var(--bw-black); --base-hover: var(--bw-black);
  --base-semi-dark: var(--bw-black);      --base-dark: var(--bw-black); --base-ultra-dark: var(--bw-black);
  --neutral-ultra-light: var(--bw-white); --neutral-light: var(--bw-white); --neutral-semi-light: var(--bw-white);
  --neutral: var(--bw-white); --neutral-hover: var(--bw-white);
  --neutral-semi-dark: var(--bw-white);   --neutral-dark: var(--bw-white); --neutral-ultra-dark: var(--bw-white);
  --clr-bg: var(--bw-black);
  --clr-surface-raised: var(--bw-black);
  --clr-text: var(--bw-white);
  --clr-text-muted: var(--bw-white);
  --clr-link: var(--bw-white);
  --clr-link-hover: var(--bw-white);
  --clr-border: var(--bw-white);
  --clr-border-strong: var(--bw-white);
  --plate: var(--bw-black);
}
/* Flächen, die sich sonst nur durch einen Grauton abheben, bekommen eine Kontur. */
:root[data-contrast='high'] :is(.poster, .mcard, .house__card, .voice, .rinfo__panel, .events, .visit) { background: var(--bw-black); }
:root[data-contrast='high'] :is(.poster, .mcard, .house__card, .voice, .rinfo__panel, .a11y__panel, .special li) {
  box-shadow: inset 0 0 0 1px var(--bw-white);
}
:root[data-contrast='high'] :is(a, button):focus-visible { outline: 3px solid var(--bw-white); outline-offset: 3px; }
:root[data-contrast='high'] .hero__scrim,
:root[data-contrast='high'] .dmenu__bg::after,
:root[data-contrast='high'] .ibanner__bg::after {
  background: oklch(0 0 0 / 0.88);
}
:root[data-contrast='high'] .btn--ghost { box-shadow: inset 0 0 0 2px var(--bw-white); }

/* ──────────── Bewegung aus ────────────
   Gilt für Systemwunsch UND für den Schalter im Barrieretool. */
:root[data-motion='reduce'] *,
:root[data-motion='reduce'] *::before,
:root[data-motion='reduce'] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ──────────── Schmale Viewports ──────────── */
@media (max-width: 62rem) {
  .reserve__grid,
  .visit__grid,
  .house__grid { grid-template-columns: 1fr; }
  /* Auf schmalen Viewports oben beginnen statt mittig: sonst stehen die Links
     erst in der Bildschirmmitte und die Kontaktdaten rutschen nach unten. */
  .nav__content { align-content: start; padding-block: calc(var(--header-height) + var(--space-l)) var(--space-xl); }
  .nav__grid { grid-template-columns: 1fr; }
  .nav__preview { display: none; }
  /* Mobiles Menü: Foto der aktuellen Seite gedämpft im Grund, nummerierte
     Zeilen mit Haarlinien und Pfeil, darunter Reservieren, Öffnungsstatus und
     drei Schnellwege. Die Adressblöcke des Desktops entfallen hier. */
  .nav__bgimg { display: block; position: absolute; inset: 0; pointer-events: none; }
  .nav__bgimg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.22; filter: saturate(0.8); }
  .nav__bgimg::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, oklch(0.150 0.005 70 / 0.55), oklch(0.150 0.005 70 / 0.92) 55%, var(--base-ultra-dark)); }
  .nav__list { gap: 0; border-block-start: 1px solid color-mix(in oklch, var(--primary) 30%, transparent); }
  .nav__item { border-block-end: 1px solid color-mix(in oklch, var(--primary) 30%, transparent); padding: 0; }
  .nav__link { display: flex; align-items: center; inline-size: 100%; gap: var(--space-m);
    padding-block: 0.9rem; font-size: calc(clamp(2rem, 9.5vw, 2.6rem) * var(--user-font-scale)); }
  .nav__link::after { display: none; }
  .nav__idx { font-size: calc(var(--text-xs) * var(--user-font-scale)); padding: 0; align-self: center; min-inline-size: 1.8em; }
  .nav__txt { flex: 1; }
  .nav__arrow { display: block; font-family: var(--ff-body); font-size: 1.25rem; color: var(--primary-semi-light);
    transition: transform var(--transition-fast); }
  .nav__link:hover .nav__arrow { transform: translateX(4px); }
  .nav__link[aria-current='page'] .nav__arrow { opacity: 0; }
  .nav__extra { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); }
  .nav__cta { justify-content: center; }
  .nav__quick { list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); }
  .nav__quick-link { display: grid; justify-items: center; gap: 0.45rem; padding-block: 0.9rem;
    border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--clr-border-strong);
    color: var(--clr-text); text-decoration: none;
    font-family: var(--ff-mono); font-size: calc(var(--text-xs) * var(--user-font-scale)); text-transform: uppercase; letter-spacing: 0.08em; }
  .nav__quick-link svg { inline-size: 1.4rem; block-size: 1.4rem; color: var(--primary-semi-light); }
  .nav__quick-link:hover { background: color-mix(in oklch, var(--primary) 14%, transparent); }
  .nav__meta { display: none; }
  .dmenu__stage { grid-template-columns: 1fr; }
  .dmenu__map { order: -1; grid-template-columns: repeat(4, 1fr); justify-content: stretch; }
  .dmenu__map-item { flex-direction: column; align-items: stretch; text-align: center; gap: 0.4rem;
    font-size: calc(var(--text-xs) * var(--user-font-scale)); }
  .dmenu__thumb { inline-size: 100%; }
  .dmenu__nav { display: none; }
  .dmenu__card { min-block-size: 0; }
  .mgrid { --mgrid-cols: 2; }
  .rinfo__inner { grid-template-columns: 1fr; }
  .ainfo__text + .ainfo__text { justify-self: start; }
  /* Auf dem Handy stapeln sich die Karten: jede klebt etwas tiefer als die vorige
     und schiebt sich über sie. Reines CSS, läuft auch ohne Bewegung sauber. */
  .house__grid { gap: var(--space-l); }
  .house__card {
    inset-block-start: calc(var(--header-height) + var(--space-s) + var(--i, 0) * 0.9rem);
    box-shadow: 0 -1.25rem 2.5rem -1.5rem oklch(0 0 0 / 0.8), inset 0 0 0 1px var(--clr-border);
  }
  .house__card:nth-child(2) { --i: 1; }
  .house__card:nth-child(3) { --i: 2; }
  .house__card:nth-child(4) { --i: 3; }
  .stance__col:last-child { padding-block-start: 0; }
  .book__grid { grid-template-columns: 1fr; }
  .facts__list { grid-template-columns: repeat(2, 1fr); }
  .ticket { position: static; max-inline-size: 26rem; }
  .site-foot__mark { font-size: var(--display-xl); }
}

@media (max-width: 38rem) {
  /* Der Reservierungsknopf in der Leiste bricht hier zweizeilig um und drängt
     die Wortmarke. Er steckt ohnehin im Overlay und im Reservierungsabschnitt. */
  .nav__reserve { display: none; }
  .stance__gallery { grid-template-columns: 1fr; }
  /* Bar-Hero auf dem Handy: größere Zeilen, hohes Bild, füllt den Bildschirm. */
  .ahero__pin { gap: var(--space-l); padding-block: calc(var(--header-height) + var(--space-s)) var(--space-l); }
  .ahero__title { font-size: calc(clamp(4.2rem, 23vw, 7rem) * var(--user-font-scale)); }
  .ahero__img { inline-size: min(78%, 22rem); aspect-ratio: 4 / 5; }
  /* Spalten bilden hier keinen eigenen Stapel, damit jedes Bild für sich mit dem
     Text verschränkt werden kann: 1 drüber, 2 drunter, 3 drüber, 4 drunter … */
  .stance__col { position: static; z-index: auto; will-change: auto; }
  .stance__img { will-change: auto; }
  .stance__col:first-child .stance__img:nth-child(odd),
  .stance__col:last-child .stance__img:nth-child(even) { z-index: 2; }
  .stance__col:first-child .stance__img:nth-child(even),
  .stance__col:last-child .stance__img:nth-child(odd) { z-index: 0; --shade: 0.5; }
  .stance__col:first-child .stance__img:nth-child(odd),
  .stance__col:last-child .stance__img:nth-child(even) { --shade: 0; }
  .stance__img:nth-child(odd),
  .stance__img:nth-child(even),
  .stance__col:last-child .stance__img:nth-child(even) { inline-size: 100%; justify-self: stretch; }
  .hero__foot { position: static; padding-inline: 0; justify-content: center; gap: var(--space-l); }
  .hero__inner { padding-block-end: var(--space-xl); }
  .mgrid { --mgrid-cols: 1; }
  .mfan { --spread: 2.9rem; --tilt: 7deg; --card: 7.4rem; block-size: 12.5rem; }
  .book__fields { grid-template-columns: 1fr; }
  .hero__next-what { display: none; }
  .mhero__foot, .nav__foot { display: none; }
}

/* ──────────── Druck ──────────── */
@media print {
  .nav, .a11y, .preloader, .voices__controls, .dmenu__nav, .dmenu__map { display: none !important; }
  .dmenu__sheet { display: block !important; }
  .hero { min-block-size: auto; }
}