/* komm runter. – Stylesheet v2.3 „Dekompressionsraum“ (Farbkonzept „Vom Glühen zur Ruhe“: Neonrot, Glutorange, Dschungelgrün, Lagune, Bernstein; kein Pink)
   Farben, Schriften und Zonenlicht laut Markenkern v1.4 (27.10.2026).
   Alle Schriften werden selbst gehostet, keine fremden Server.

   Betriebsarten (Klasse am <html>, gesetzt von assets/js/start.js vor dem ersten Bild):
   - .lebendig  Shader, Blatt, sanftes Scrollen, Reveal-Typografie, HUD, Klang erlaubt
   - .ruhig     keine Bewegung aus eigener Kraft, Blatt folgt nur dem Scrollen, kein Klang
   - keine      ohne JavaScript: alles sofort sichtbar, nichts bewegt sich */

/* ---------- Schriften ---------- */
@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/sacramento-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/sacramento-latin-ext-400-normal.woff2) format('woff2');
  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: 'Fraunces Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-latin-full-normal.woff2) format('woff2-variations');
  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: 'Fraunces Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-latin-ext-full-normal.woff2) format('woff2-variations');
  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: 'Fraunces Variable';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-latin-full-italic.woff2) format('woff2-variations');
  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;
}
/* Ziffern aus Fraunces im Fließtext (Atkinson hat nur eine durchgestrichene Null). */
@font-face {
  font-family: 'KR Ziffern';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-latin-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0030-0039;
  size-adjust: 96%;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next Variable';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Atkinson Hyperlegible Next Variable';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format('woff2-variations');
  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;
}
/* Röhrenschrift für die großen Sätze: Tilt Neon (OFL), gebogene Neonröhre mit lesbaren Formen */
@font-face {
  font-family: 'Tilt Neon';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/tilt-neon-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tilt Neon';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/tilt-neon-latin-ext-400-normal.woff2) format('woff2');
  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;
}
/* HUD-Schrift: JetBrains Mono (OFL), nur für die kleinen Zeilen */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
}

/* ---------- Marken-Token ---------- */
:root {
  color-scheme: dark;
  --nacht: #06100B;
  --boden: #083B20;
  --bernstein: #F2A03D;
  --lagune: #00E5C0;               /* Neon-Lagune (Farbkonzept v2.2) */
  --kerzenweiss: #F1EADB;
  --neonrot: #FF2B12;              /* echte Neon-Gasfarbe, nur als Röhre, nie als Raumlicht */
  --glutorange: #FF6A00;
  --neongruen: #00F07A;
  --neonbernstein: #FFB000;
  --tiefe: #04161A;                /* Nachtgrün-Blau; Orchidee und Pflaume sind auf der Website gesperrt (E26/v2.2) */

  --text: var(--kerzenweiss);
  --text-leise: #B7C4B6;          /* Kontrast auf Urwaldnacht 9,6:1 */
  --bernstein-hell: #FFE6BE;      /* Kontrast 15:1 */
  --linie: rgba(241, 234, 219, 0.22);

  --schrift-neon: 'Sacramento', 'Brush Script MT', cursive;
  --schrift-titel: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
  --schrift-text: 'KR Ziffern', 'Atkinson Hyperlegible Next Variable', 'Segoe UI', system-ui, sans-serif;
  --schrift-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --schrift-roehre: 'Tilt Neon', 'Atkinson Hyperlegible Next Variable', system-ui, sans-serif;
  --puls: 0;                       /* Lichtschein beim Scrollen, von site.js gesetzt (0..1) */

  --rand: clamp(16px, 4vw, 56px);
  --mass: 36rem;
  --mass-breit: 46rem;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);

  --zone: var(--neonbernstein);
  --zone-hell: #FFD36A;
  --zone-dunkel: rgba(255, 176, 0, 0.18);
}
.zone-eingang, .zone-bar, .zone-eroeffnung, .zone-ausgang {
  --zone: var(--neonbernstein);
  --zone-hell: #FFD36A;
  --zone-dunkel: rgba(255, 176, 0, 0.16);
}
/* Rot-Zone („Licht an“): nur die Röhre, kein flächiges Raumlicht */
.zone-rot { --zone: var(--neonrot); --zone-hell: #FF6A52; --zone-dunkel: rgba(255, 43, 18, 0.07); }
.zone-klima { --zone: var(--neongruen); --zone-hell: #5CFFAB; --zone-dunkel: rgba(0, 240, 122, 0.14); }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--nacht);
  -webkit-text-size-adjust: 100%;
}
html:not(.lebendig) { scroll-behavior: smooth; }
html.ruhig { scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--nacht);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 19.5px; } }
html.zeiger-an:not(.ruhig), html.zeiger-an:not(.ruhig) a, html.zeiger-an:not(.ruhig) button, html.zeiger-an:not(.ruhig) input { cursor: none; }
/* Ruhiger Modus: normaler Mauszeiger, kein eigener Zeiger (G1-Befund N04) */
html.ruhig .zeiger { display: none !important; }

[hidden] { display: none !important; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  color: var(--text);
  text-wrap: balance;
}
h3 { font-size: 1.45rem; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 36; margin-top: 1.6em; }
p { margin: 0 0 1em; max-width: var(--mass); text-shadow: 0 0 16px rgba(242, 160, 61, 0.16); }
a { color: var(--zone-hell); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--kerzenweiss); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }
ul, ol { padding-left: 1.2em; }
.leise { color: var(--text-leise); }

.etikett {
  display: block;
  font-family: var(--schrift-text);
  font-weight: 700;
  font-size: 0.875rem; /* 14 px, Mindestgröße für Etiketten (N04) */
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(241, 234, 219, 0.74);
}
.zahlen, .adresse, .fuss-betreiber, .zeiten td, .zeiten th, .termine time, .status, .kontakt-liste {
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 24;
  font-variant-numeric: lining-nums;
}

.sprung {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--bernstein);
  color: #1b1005;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.sprung:focus { top: 0.75rem; }

/* ---------- Schicht 1: Hintergrund ---------- */
.hintergrund {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}
html.webgl .hintergrund { opacity: 1; }
/* Die Wand ohne WebGL: Körnung plus ruhige Lichtinseln in Markenfarben. Steht immer. */
.wand {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.75  0 0 0 0 0.7  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(60% 50% at 50% 110%, rgba(242, 160, 61, 0.14), transparent 70%),
    radial-gradient(45% 40% at 20% 30%, rgba(8, 59, 32, 0.6), transparent 70%),
    radial-gradient(40% 35% at 80% 60%, rgba(4, 22, 26, 0.45), transparent 70%), /* Tiefe #04161A statt Pflaume (Farbkonzept v2.2, v2.3) */
    linear-gradient(180deg, #071710 0%, var(--nacht) 40%, #05140c 70%, var(--nacht) 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 240px 240px, auto, auto, auto, auto;
  transition: opacity 1.8s ease;
}
html.webgl .wand { opacity: 0.35; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem var(--rand) 1.4rem;
  background: linear-gradient(180deg, rgba(6, 16, 11, 0.92) 0%, rgba(6, 16, 11, 0.7) 60%, rgba(6, 16, 11, 0) 100%);
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.kopf-marke {
  font-family: var(--schrift-neon);
  font-size: 1.9rem;
  line-height: 1;
  color: #FFEBD0;
  text-decoration: none;
  text-shadow: 0 0 6px rgba(242, 160, 61, 0.9), 0 0 18px rgba(242, 160, 61, 0.55);
  padding: 0.2em 0.1em 0.1em;
}
.kopf-marke .punkt, .fuss-marke .punkt {
  color: #FF6A52;
  text-shadow: 0 0 1px #fff, 0 0 5px rgba(255, 43, 18, 1), 0 0 12px rgba(255, 43, 18, 0.6);
}
.kopf-nav { display: none; gap: 1.4rem; margin-left: 1rem; }
.kopf-nav a {
  color: var(--kerzenweiss);
  text-decoration: none;
  font-weight: 500;
  padding: 0.35em 0.1em;
  border-bottom: 2px solid transparent;
}
.kopf-nav a:hover { border-bottom-color: var(--bernstein); }
@media (min-width: 820px) { .kopf-nav { display: flex; } }

.kopf-schalter { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
.klang { display: flex; align-items: center; gap: 0.4rem; }
.schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.9em 0.45em 0.7em;
  border-radius: 999px;
  border: 1.5px solid rgba(241, 234, 219, 0.35);
  background: rgba(6, 16, 11, 0.72);
  color: var(--kerzenweiss);
  cursor: pointer;
  line-height: 1.1;
  font-size: 1rem;
}
.schalter:hover { border-color: var(--kerzenweiss); }
.schalter[aria-pressed="true"] {
  border-color: var(--bernstein);
  color: #FFE6BE;
  box-shadow: 0 0 14px rgba(242, 160, 61, 0.35), inset 0 0 10px rgba(242, 160, 61, 0.12);
}
.schalter[aria-pressed="true"] .schalter-symbol { fill: #FFE6BE; stroke: #FFE6BE; }
.schalter[disabled] { opacity: 0.5; cursor: default; }
.schalter-symbol { width: 1.25em; height: 1.25em; fill: currentColor; stroke: currentColor; flex: none; }
.schalter[aria-pressed="false"] .symbol-welle { opacity: 0.35; }
/* Lautstärke: erscheint, sobald der Klang an ist */
.klang-regler { display: none; align-items: center; }
.klang[data-an="true"] .klang-regler { display: inline-flex; }
.klang-regler input {
  width: 6.5rem;
  accent-color: var(--bernstein);
  cursor: pointer;
}
@media (max-width: 520px) {
  .schalter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .schalter { padding: 0.55em; }
  .schalter-symbol { width: 1.4em; height: 1.4em; }
  .klang-regler input { width: 4.5rem; }
}

/* ---------- Neon ---------- */
.neon {
  font-family: var(--schrift-neon);
  font-weight: 400;
  color: var(--zone-hell);
  text-shadow:
    0 0 2px #fff,
    0 0 7px var(--zone),
    0 0 20px var(--zone),
    0 0 48px var(--zone),
    0 0 96px var(--zone-dunkel);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .neon {
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.9),
      0 0 7px color-mix(in srgb, var(--zone) 90%, transparent),
      0 0 20px color-mix(in srgb, var(--zone) 75%, transparent),
      0 0 48px color-mix(in srgb, var(--zone) 55%, transparent),
      0 0 110px color-mix(in srgb, var(--zone) 35%, transparent);
  }
}

.zone-rot .neon {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 6px #FF6A52, 0 0 14px var(--neonrot), 0 0 26px rgba(255, 43, 18, 0.45), 0 1px 3px rgba(0, 0, 0, 0.7);
}
.zone-rot .schild-platte { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0.6em 1.6em -0.6em rgba(0, 0, 0, 0.9); }

/* ---------- Neonröhren: große Schrift als montiertes Schild ----------
   Aufbau wie eine echte Röhre: weißglühender Kern (Farbe plus dünner heller Rand), farbiges Glas
   (enge Schatten), Lichthof (weite Schatten) und Streulicht auf die Umgebung (drop-shadow-Filter
   folgt der Glyphenform). Farben über --rl (Licht), --rl-hell (Glas), --rl-kern (Kern). */
/* Farbkonzept v2.2 „Vom Glühen zur Ruhe“: Glasfüllung in der vollen Farbe (Rand), nur ein schmaler heller Kern.
   Bernstein ist die Grundröhre; Rot, Orange, Grün und Lagune sind Varianten je Akt. Kein Pastell, kein Pink. */
.roehre {
  --rl: var(--neonbernstein);        /* Licht und Glasrand, volle Farbe */
  --rl-rand: var(--neonbernstein);
  --rl-kern: #FFD36A;                /* Kern: warmweiß über Bernstein */
  --rl-hell: #FFE6A8;                /* heißer Saum des Kerns */
  --rl-50: rgba(255, 176, 0, 0.55);
  --rl-30: rgba(255, 176, 0, 0.3);
  font-family: var(--schrift-roehre);
  font-weight: 400;
  color: var(--rl-kern);
  -webkit-text-stroke: 0.03em var(--rl-rand);
  paint-order: stroke fill;
  text-shadow:
    0 0 0.012em rgba(255, 255, 255, 0.9),
    0 0 0.035em var(--rl-hell),
    0 0 0.08em var(--rl),
    0 0 0.18em var(--rl),
    0 0 0.4em var(--rl-50),
    0 0 0.9em var(--rl-30);
}
.roehre-orange { --rl: var(--glutorange); --rl-rand: var(--glutorange); --rl-kern: #FF9A3D; --rl-hell: #FFC27A; --rl-50: rgba(255, 106, 0, 0.55); --rl-30: rgba(255, 106, 0, 0.3); }
.roehre-gruen { --rl: var(--neongruen); --rl-rand: var(--neongruen); --rl-kern: #6BFFB4; --rl-hell: #B8FFDB; --rl-50: rgba(0, 240, 122, 0.5); --rl-30: rgba(0, 240, 122, 0.28); }
.roehre-lagune { --rl: var(--lagune); --rl-rand: var(--lagune); --rl-kern: #66F3DA; --rl-hell: #B5FBF0; --rl-50: rgba(0, 229, 192, 0.5); --rl-30: rgba(0, 229, 192, 0.28); }
/* Rot: schmale Röhre mit engem Hof, dunkle Kontur gegen Flimmern auf Grün, etwas mehr Laufweite (Regeln 2 und 6) */
.roehre-rot {
  --rl: var(--neonrot); --rl-rand: var(--neonrot); --rl-kern: #FF7257; --rl-hell: #FFA08C; --rl-50: rgba(255, 43, 18, 0.45); --rl-30: rgba(255, 43, 18, 0.18);
  letter-spacing: 0.025em;
  text-shadow:
    0 0 0.012em rgba(255, 255, 255, 0.85),
    0 0 0.03em var(--rl-hell),
    0 0 0.07em var(--rl),
    0 0 0.14em var(--rl-50),
    0 0 0.3em var(--rl-30),
    0 0.03em 0.06em rgba(0, 0, 0, 0.7);
}
html.lebendig .akt-gross.roehre-rot .wort-innen, html.lebendig .roehre-klein.roehre-rot {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 0.08em var(--rl-50));
}
@media (max-width: 760px) {
  html.lebendig .akt-gross.roehre-rot .wort-innen { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85)); }
}
/* Streulicht auf die Umgebung: nur lebendig und nur am Rechner (Filter kosten auf dem Handy) */
html.lebendig .akt-gross.roehre .wort-innen, html.lebendig .roehre-klein {
  filter: drop-shadow(0 0 0.12em var(--rl-50)) drop-shadow(0 0 0.45em var(--rl-30));
}
@media (max-width: 760px) {
  html.lebendig .akt-gross.roehre .wort-innen { filter: drop-shadow(0 0 0.25em var(--rl-30)); }
}
/* Ohne JavaScript und im Ruhigen Modus: gleiches Leuchten, kein Filter, kein Flackern */
.roehre-klein {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  letter-spacing: 0.04em;
  text-transform: none;
}
/* Flackern beim Einschalten (Klasse .an, lebendig): kurze Aussetzer, dann stabil */
html.lebendig .roehre.an, html.lebendig .wort-innen.an { animation: roehre-an 1.15s step-end both; }
@keyframes roehre-an {
  0%   { opacity: 0.25; text-shadow: none; -webkit-text-stroke-color: transparent; }
  9%   { opacity: 1; }
  13%  { opacity: 0.3; text-shadow: none; -webkit-text-stroke-color: transparent; }
  21%  { opacity: 1; }
  25%  { opacity: 0.55; text-shadow: 0 0 0.06em var(--rl); }
  32%  { opacity: 1; }
  58%  { opacity: 1; }
  61%  { opacity: 0.7; }
  64%  { opacity: 1; }
  100% { opacity: 1; }
}
/* Lichtschein der Röhren auf Boden und Wand: hinter jedem Akt-Text ein weiter Hof plus ein Reflex unten */
.neon-quelle { position: relative; --ql: var(--neonbernstein); --ql-30: rgba(255, 176, 0, 0.28); }
.neon-quelle[data-licht="orange"] { --ql: var(--glutorange); --ql-30: rgba(255, 106, 0, 0.26); }
.neon-quelle[data-licht="gruen"] { --ql: var(--neongruen); --ql-30: rgba(0, 240, 122, 0.24); }
.neon-quelle[data-licht="lagune"] { --ql: var(--lagune); --ql-30: rgba(0, 229, 192, 0.26); }
/* Rot: kein Hof, kein Reflex (Regel 2: Rot nie als Raumlicht) */
.neon-quelle[data-licht="rot"]::before, .neon-quelle[data-licht="rot"]::after { display: none; }
.neon-quelle::before {
  content: "";
  position: absolute;
  inset: -22% -18% -30% -18%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(60% 55% at 40% 50%, var(--ql-30), transparent 70%);
  opacity: calc(0.55 + var(--puls) * 0.45);
  filter: blur(22px);
}
.neon-quelle::after {
  content: "";
  position: absolute;
  left: -6%; right: 10%;
  bottom: -26%;
  height: 34%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 100% at 38% 0%, var(--ql-30), transparent 72%);
  opacity: 0.9;
  filter: blur(16px);
}
html.lebendig .akt .neon-quelle::before, html.lebendig .akt .neon-quelle::after { opacity: 0; transition: opacity 1.2s ease; }
html.lebendig .akt .neon-quelle.an::before { opacity: calc(0.55 + var(--puls) * 0.45); }
html.lebendig .akt .neon-quelle.an::after { opacity: 0.9; }

/* Rückplatte für die Schilder der Abschnitte: dunkles Blech mit vier Schrauben, vom Schild angeleuchtet */
.schild-platte {
  position: relative;
  display: inline-block;
  padding: 0.2em 0.55em 0.3em 0.5em;
  margin-left: -0.1em;
  border-radius: 0.2em;
  background:
    radial-gradient(circle at 0.2em 0.2em, rgba(241, 234, 219, 0.32) 0 0.035em, rgba(0, 0, 0, 0.5) 0.05em, transparent 0.075em),
    radial-gradient(circle at calc(100% - 0.2em) 0.2em, rgba(241, 234, 219, 0.32) 0 0.035em, rgba(0, 0, 0, 0.5) 0.05em, transparent 0.075em),
    radial-gradient(circle at 0.2em calc(100% - 0.2em), rgba(241, 234, 219, 0.32) 0 0.035em, rgba(0, 0, 0, 0.5) 0.05em, transparent 0.075em),
    radial-gradient(circle at calc(100% - 0.2em) calc(100% - 0.2em), rgba(241, 234, 219, 0.32) 0 0.035em, rgba(0, 0, 0, 0.5) 0.05em, transparent 0.075em),
    linear-gradient(170deg, rgba(14, 22, 18, 0.92), rgba(5, 9, 7, 0.96));
  border: 1px solid rgba(241, 234, 219, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0.6em var(--zone-dunkel),
    0 0.6em 1.6em -0.6em rgba(0, 0, 0, 0.9),
    0 0 1.2em var(--zone-dunkel);
}

/* ---------- Die Reise: Bühne und Akte ---------- */
main { position: relative; z-index: 1; }
.reise { position: relative; }
.buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Schicht 2: Blatt-Canvas, rechts der Mitte, auf dem Handy oben */
.blatt {
  position: absolute;
  width: min(78vmin, 820px);
  height: min(78vmin, 820px);
  left: 50%;
  top: 50%;
  transform: translate(-14%, -50%);
  opacity: 0;
}
@media (max-width: 760px) {
  .blatt { width: 92vmin; height: 92vmin; transform: translate(-50%, -62%); }
}
/* Die Akte liegen über der Bühne und beginnen oben (die Bühne nimmt keinen eigenen Platz ein). */
.akte { position: relative; margin-top: -100vh; margin-top: -100svh; z-index: 1; }
.akt {
  position: relative;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--rand) 4rem;
}
/* Höhen der Akte: zusammen 600vh (Eingang 100, I 60, II 90, III 150, IV 90, V 110) */
.akt-eingang { min-height: 100vh; min-height: 100svh; align-items: center; text-align: center; }
.akt-1 { min-height: 60vh; }
.akt-2 { min-height: 90vh; }
.akt-3 { min-height: 150vh; justify-content: flex-start; padding-top: 0; }
.akt-4 { min-height: 90vh; }
.akt-5 { min-height: 110vh; justify-content: center; }
.akt-inhalt { position: relative; max-width: var(--mass-breit); isolation: isolate; }
/* Akt III: der Text bleibt im unteren Drittel stehen, solange der Atemkreis läuft */
.akt-3 .akt-inhalt { position: sticky; top: 60vh; top: 60svh; }
@media (min-width: 1000px) {
  .akt:not(.akt-eingang) .akt-inhalt { margin-left: 6vw; }
}
@media (max-width: 760px) {
  .akt:not(.akt-eingang) { justify-content: flex-end; padding-bottom: 10vh; }
  .akt-3 { justify-content: flex-start; padding-bottom: 0; }
  .akt-3 .akt-inhalt { top: 56vh; top: 56svh; }
}
.akt-nr { margin-bottom: 0.5rem; color: rgba(242, 160, 61, 0.85); text-shadow: none; }
.akt-titel { margin: 0 0 1.1rem; line-height: 1.2; }
.akt-zeile { margin: 0; max-width: none; text-shadow: none; }
.akt-gross {
  font-size: clamp(2.1rem, 5.2vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  text-wrap: balance;
  padding: 0.04em 0.1em 0.04em 0;
}
.akt-klein { margin-top: 1.3rem; max-width: 30rem; color: var(--kerzenweiss); text-shadow: 0 0 16px rgba(242, 160, 61, 0.2), 0 1px 14px rgba(6, 16, 11, 0.9); }
.akt-knoepfe { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }
/* Reveal-Zustand: nur lebendig; Wort für Wort über clip-path und Y (cubic-bezier 0.16, 1, 0.3, 1) */
html.lebendig .akt-zeile .wort {
  display: inline-block;
  clip-path: polygon(-25% -35%, 125% -35%, 125% 135%, -25% 135%);
  will-change: transform, clip-path, opacity;
}
html.lebendig .akt-zeile .wort-innen { display: inline-block; }
html.lebendig .akt .akt-nr, html.lebendig .akt .akt-titel, html.lebendig .akt .akt-klein, html.lebendig .akt .akt-knoepfe { opacity: 0; }
html.lebendig .akt-eingang .akt-nr, html.lebendig .akt-eingang .akt-klein { opacity: 1; }

/* ---------- Eingang ---------- */
.eingang-inhalt { max-width: 46rem; margin: 0 auto; }
.akt-eingang p { margin-left: auto; margin-right: auto; }
.deskriptor { margin-bottom: 0.9rem; }
.deskriptor .trenner { margin: 0 0.3em; color: rgba(242, 160, 61, 0.8); }
.neon-marke {
  font-size: clamp(3.4rem, 10.5vw, 8.2rem);
  line-height: 0.95;
  margin: 0;
  letter-spacing: 0.005em;
  white-space: nowrap;
  font-variation-settings: normal;
  padding: 0.1em 0.2em 0.12em;
  color: #FFE6A8;
  -webkit-text-stroke: 0.016em #FFC94D;
  text-shadow:
    0 0 1px #fff,
    0 0 5px #FFE6A8,
    0 0 12px #FFB000,
    0 0 28px rgba(255, 176, 0, 0.85),
    0 0 64px rgba(255, 150, 0, 0.55),
    0 0 120px rgba(255, 150, 0, 0.3);
}
.neon-punkt {
  display: inline-block;
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.06em;
  vertical-align: 0.02em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFFFFF 0 26%, #FFA08C 40%, #FF5A3C 66%, #FF2B12 100%);
  box-shadow:
    0 0 0.03em #fff,
    0 0 0.1em #FF5A3C,
    0 0 0.22em #FF2B12,
    0 0 0.45em rgba(255, 43, 18, 0.5);
}
.claim {
  font-family: var(--schrift-titel);
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72;
  font-weight: 400;
  font-size: clamp(1.55rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 0.8rem;
  color: rgba(241, 234, 219, 0.92);
}
.zeit-schild { --zs-h: clamp(2.3rem, 3.9vw, 3.5rem); display: grid; justify-items: center; gap: 0.25rem; margin: 0.1rem auto 0.9rem; }
.zeit-schild-tage { color: rgba(241, 234, 219, 0.78); }
.zeit-schild-zeile { display: block; line-height: 1; white-space: nowrap; }
/* Grundlinie der Glyphen liegt bei 1918/2472 der Bildhöhe: Bild so absenken, dass Zeitschild und „bis 21 Uhr“ auf einer Grundlinie stehen */
.zeit-schild-bild { display: inline-block; height: var(--zs-h); width: auto; overflow: visible; vertical-align: calc(var(--zs-h) * -0.224); }
.zeit-schild-bis {
  margin-left: 0.35em;
  font-family: var(--schrift-titel);
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 36;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  color: rgba(241, 234, 219, 0.84);
}
.status { color: var(--bernstein-hell); font-weight: 500; font-size: 1.15rem; margin-bottom: 1rem; }
.status[data-offen="jetzt"] { color: #FF7257; text-shadow: 0 0 1px #fff, 0 0 6px rgba(255, 43, 18, 0.9), 0 0 14px rgba(255, 43, 18, 0.5); }
.eingang-hinweis { color: var(--text-leise); font-size: 1rem; max-width: 30rem; }
.weiter {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: -1.2rem;
  display: grid;
  place-items: center;
  color: var(--text-leise);
  border-radius: 50%;
}
.weiter span {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
/* Einschaltmoment (nur lebendig): Wortmarke flackert an, dann Punkt, dann der Rest */
html.lebendig .neon-marke .neon-text { animation: neon-an 2s step-end both 0.4s, neon-zucken 11s linear 5s infinite; }
html.lebendig .neon-marke .neon-punkt { animation: neon-an-punkt 1.1s step-end both; animation-delay: 1.9s; }
html.lebendig .akt-eingang .deskriptor, html.lebendig .akt-eingang .claim, html.lebendig .akt-eingang .zeit-schild-tage,
html.lebendig .akt-eingang .zeit-schild-bis, html.lebendig .akt-eingang .status, html.lebendig .akt-eingang .eingang-hinweis, html.lebendig .weiter {
  animation: erscheinen 1.2s ease both;
  animation-delay: 2.4s;
}
html.lebendig .akt-eingang .deskriptor { animation-delay: 2.1s; }
html.lebendig .akt-eingang .zeit-schild-bild { animation: neon-an-punkt 1.1s step-end both; animation-delay: 2.6s; }
html.lebendig .akt-eingang .zeit-schild-bis { animation-delay: 3s; }
html.lebendig .akt-eingang .status { animation-delay: 3.1s; }
html.lebendig .akt-eingang .eingang-hinweis, html.lebendig .weiter { animation-delay: 3.5s; }
@keyframes erscheinen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes neon-an {
  0%   { opacity: 0.12; text-shadow: none; color: rgba(255, 230, 190, 0.35); -webkit-text-stroke-color: transparent; }
  34%  { opacity: 1; }
  37%  { opacity: 0.12; text-shadow: none; color: rgba(255, 230, 190, 0.35); -webkit-text-stroke-color: transparent; }
  41%  { opacity: 1; }
  43%  { opacity: 0.2; text-shadow: none; color: rgba(255, 230, 190, 0.35); -webkit-text-stroke-color: transparent; }
  50%  { opacity: 1; }
  62%  { opacity: 1; }
  64%  { opacity: 0.3; text-shadow: 0 0 4px var(--zone); }
  67%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes neon-an-punkt {
  0%   { opacity: 0.1; box-shadow: none; }
  40%  { opacity: 1; }
  46%  { opacity: 0.1; box-shadow: none; }
  60%  { opacity: 1; }
  66%  { opacity: 0.2; box-shadow: none; }
  72%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes neon-zucken {
  0%, 93%, 100% { opacity: 1; }
  93.5% { opacity: 0.82; }
  94% { opacity: 1; }
  96.5% { opacity: 0.9; }
  97% { opacity: 1; }
}
.weiter { animation: weiter-wippen 3s ease-in-out 4s infinite; }
@keyframes weiter-wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- Atemkreis (Akt III) ---------- */
.atem {
  position: absolute;
  left: 33%;
  top: 36%;
  width: min(42vmin, 400px);
  height: min(42vmin, 400px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.atem[data-sichtbar="true"] { opacity: 1; }
.atem > * { grid-area: 1 / 1; }
.atem-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 192, 0.3);
}
.atem-ring-innen { width: 62%; height: 62%; border-color: rgba(241, 234, 219, 0.18); }
.atem-kreis {
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(214, 255, 240, 0.5) 0%, rgba(0, 229, 192, 0.38) 30%, rgba(0, 240, 122, 0.12) 62%, rgba(0, 240, 122, 0) 100%);
  box-shadow: 0 0 40px rgba(0, 229, 192, 0.3), 0 0 120px rgba(0, 240, 122, 0.12);
  transform: scale(0.6);
  will-change: transform;
}
.atem-wort {
  margin: 0;
  font-family: var(--schrift-titel);
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--kerzenweiss);
  text-shadow: 0 0 20px rgba(6, 16, 11, 1);
  transform: translateY(-0.2em);
}
.atem-zahl {
  margin: 0;
  align-self: end;
  font-family: var(--schrift-mono);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: rgba(241, 234, 219, 0.6);
  transform: translateY(-1.6rem);
}
@media (max-width: 760px) {
  .atem { left: 50%; top: 30%; width: min(50vmin, 300px); height: min(50vmin, 300px); }
}

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  inset: 0;
  font-family: var(--schrift-mono);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(241, 234, 219, 0.62);
  opacity: 0;
  transition: opacity 1s ease;
}
html.lebendig .hud[data-an="true"] { opacity: 1; }
.hud-ecke { position: absolute; display: grid; gap: 0.35rem; }
.hud-ol { left: var(--rand); top: 4.6rem; }
.hud-or { right: var(--rand); top: 4.6rem; text-align: right; }
.hud-ur { right: var(--rand); bottom: 1.6rem; text-align: right; }
.hud-zeile { display: flex; gap: 0.8em; justify-content: inherit; }
.hud-or .hud-zeile { justify-content: flex-end; }
.hud-etikett { color: rgba(242, 160, 61, 0.6); }
.hud-wert { color: rgba(241, 234, 219, 0.7); font-variant-numeric: tabular-nums; min-width: 4ch; }
.hud-akt { color: rgba(241, 234, 219, 0.7); }
.hud-kante { position: absolute; left: calc(var(--rand) - 2px); top: 50%; transform: translateY(-50%); height: 36vh; }
.hud-meter { width: 2px; height: 100%; background: rgba(241, 234, 219, 0.12); border-radius: 1px; overflow: hidden; }
.hud-meter-fuellung { width: 100%; height: 0%; background: linear-gradient(180deg, rgba(242, 160, 61, 0.9), rgba(242, 160, 61, 0.35)); box-shadow: 0 0 8px rgba(242, 160, 61, 0.6); }
@media (max-width: 760px) {
  .hud-kante { display: none; }
  .hud-ol, .hud-or { top: 4.2rem; }
}

/* ---------- Magnetischer Zeiger ---------- */
.zeiger { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none; }
html.zeiger-an .zeiger { display: block; }
.zeiger-ring {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  mix-blend-mode: exclusion;
  will-change: transform;
}
.zeiger-aussen { width: 38px; height: 38px; border: 1.5px solid rgba(241, 234, 219, 0.9); margin: -19px 0 0 -19px; transition: width 0.3s var(--kurve), height 0.3s var(--kurve), margin 0.3s var(--kurve), border-color 0.3s; }
.zeiger-innen { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
html.zeiger-aktiv .zeiger-aussen { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: rgba(242, 160, 61, 0.95); }
[data-magnet] { will-change: transform; }

/* ---------- Lichtungen (Bar, Karte, Eröffnung, Ausgang) ---------- */
.lichtung { position: relative; overflow-x: clip; padding: clamp(5rem, 14vh, 9rem) var(--rand); }
.lichtung::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 60% at 30% 45%, var(--zone-dunkel), transparent 70%);
}
.lichtung-inhalt {
  position: relative;
  max-width: var(--mass);
  padding: 1.5rem clamp(0.5rem, 2vw, 1.5rem);
  border-radius: 1.5rem;
  isolation: isolate;
  background: radial-gradient(closest-side, rgba(6, 16, 11, 0.8), rgba(6, 16, 11, 0.55) 70%, rgba(6, 16, 11, 0) 100%);
}
.lichtung-breit { max-width: var(--mass-breit); }
#ausgang .lichtung-inhalt { max-width: 54rem; }
@media (min-width: 1000px) { .lichtung-inhalt { margin-left: 6vw; } }
.lichtung h2 { margin-bottom: 0.9rem; }
.schild {
  display: block;
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  margin: 0 0 0.25em -0.05em;
  padding: 0.12em 0.25em 0.22em 0.1em;
  letter-spacing: 0.01em;
  font-variation-settings: normal;
}
.schild.schild-platte { display: inline-block; }
.titel {
  display: block;
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72;
  font-weight: 500;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.zonen { list-style: none; padding: 0; margin: 0; max-width: var(--mass); }
.zonen li { padding: 0.5em 0; border-top: 1px dotted var(--linie); }
.zonen li:first-child { border-top: 0; }
.zonen b { font-weight: 600; color: var(--bernstein-hell); }
.zonen .zone-klima b { color: #6BFFB4; text-shadow: 0 0 8px rgba(0, 240, 122, 0.35); }
.knopf {
  display: inline-block;
  padding: 0.75em 1.6em;
  border-radius: 999px;
  border: 2px solid #FFC94D;
  color: #FFE6A8;
  background: rgba(6, 16, 11, 0.62);
  font-family: var(--schrift-roehre);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  text-shadow: 0 0 1px #fff, 0 0 6px #FFC94D, 0 0 14px rgba(255, 176, 0, 0.7);
  box-shadow: 0 0 4px #FFC94D, 0 0 14px rgba(255, 176, 0, 0.55), 0 0 36px rgba(255, 176, 0, 0.25), inset 0 0 12px rgba(255, 176, 0, 0.22);
  transition: box-shadow 0.25s, background-color 0.25s;
}
.knopf:hover { background: rgba(255, 176, 0, 0.14); box-shadow: 0 0 5px #fff, 0 0 18px rgba(255, 176, 0, 0.8), 0 0 48px rgba(255, 176, 0, 0.4), inset 0 0 14px rgba(255, 176, 0, 0.3); color: #fff; }
.knopf-licht { border-color: #FFE6A8; background: rgba(255, 176, 0, 0.18); box-shadow: 0 0 5px #fff, 0 0 18px rgba(255, 176, 0, 0.9), 0 0 48px rgba(255, 176, 0, 0.45), inset 0 0 16px rgba(255, 176, 0, 0.35); }
.knopf-licht:hover { background: rgba(242, 160, 61, 0.3); }
.knopf[disabled] { opacity: 0.45; cursor: default; box-shadow: none; text-shadow: none; }
.knopf-licht[aria-pressed="true"] { border-color: #FFE6A8; color: #FFF6E6; background: rgba(255, 176, 0, 0.32); }

/* ---------- Karte ---------- */
.karte { margin-top: 1.5rem; }
.karte-beispiel, .karte-preise { color: #FFE6BE; border-left: 3px solid var(--bernstein); padding-left: 0.8em; }
.karte-kategorie { margin-top: 2.4rem; }
.karte-kategorie h3 { margin: 0 0 0.1em; display: flex; align-items: center; gap: 0.5em; color: var(--zone-hell); text-shadow: 0 0 8px var(--zone-dunkel), 0 0 20px var(--zone-dunkel); }
.karte-kategorie h3::before {
  content: "";
  width: 0.38em; height: 0.38em; border-radius: 50%; flex: none;
  background: var(--zone);
  box-shadow: 0 0 8px var(--zone), 0 0 18px var(--zone-dunkel);
}
.karte-kategorie.zone-lounge { --zone: var(--neonbernstein); --zone-hell: #FFE6A8; --zone-dunkel: rgba(255, 176, 0, 0.16); }
.karte-untertitel { color: var(--text-leise); margin-bottom: 0.5rem; }
.karte-liste { list-style: none; margin: 0; padding: 0; max-width: var(--mass-breit); }
.karte-artikel {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 1rem;
  align-items: baseline;
  padding: 0.6rem 0 0.55rem;
  border-bottom: 1px dotted var(--linie);
}
.karte-name { font-weight: 500; }
.karte-menge { color: var(--text-leise); font-variant-numeric: lining-nums; white-space: nowrap; font-size: 0.95em; }
.karte-preis {
  font-family: var(--schrift-titel);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 24;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  min-width: 4.5ch;
  text-align: right;
  white-space: nowrap;
  color: var(--bernstein-hell);
}
.karte-zutaten { grid-column: 1 / -1; color: var(--text-leise); font-size: 0.95em; margin-top: 0.1em; }
.karte-kz { color: var(--text-leise); margin-left: 0.25em; font-size: 0.78em; line-height: 0; vertical-align: 0.55em; font-weight: 400; }
.karte-tag {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 500;
  padding: 0.05em 0.6em 0.1em;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin-left: 0.45em;
  vertical-align: 0.1em;
  line-height: 1.4;
}
.karte-tag-haus { color: var(--zone-hell); }
.karte-tag-frei { color: #BFE9DC; }
.karte-fussnoten, .karte-hinweise, .karte-stand { color: var(--text-leise); font-size: 0.95em; margin-top: 1.4rem; }
.karte-fussnoten p, .karte-hinweise p { margin-bottom: 0.3em; }
.karte-stand { margin-top: 0.6rem; }
@media (max-width: 480px) {
  .karte-artikel { grid-template-columns: 1fr auto; }
  .karte-name { grid-column: 1; grid-row: 1; }
  .karte-preis { grid-column: 2; grid-row: 1; }
  .karte-menge { grid-column: 1 / -1; grid-row: 2; }
  .karte-zutaten { grid-column: 1 / -1; grid-row: 3; }
}

/* ---------- Fotos ---------- */
.fotos { display: grid; gap: 1.4rem; margin: 1.6rem 0 2rem; align-items: end; }
@media (min-width: 760px) { .fotos { grid-template-columns: 1fr 1.1fr; } .foto-quer { margin-top: 3rem; } }
.foto { margin: 0; position: relative; }
.foto img {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 0 0 1px rgba(241, 234, 219, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 60px -10px var(--zone-dunkel);
}
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  pointer-events: none;
  background: linear-gradient(160deg, var(--zone-dunkel), transparent 45%, rgba(6, 16, 11, 0.35) 100%);
  mix-blend-mode: screen;
}
.foto figcaption { color: var(--text-leise); font-size: 0.95em; margin-top: 0.6rem; }
/* v2.3: ein Foto (M03), daneben die Liste „Im selben Raum“ */
.fotos-eins { align-items: center; }
.fotos-eins .foto { max-width: 25rem; }
.fotos-text h3 { margin-top: 0; }
#bar .lichtung-inhalt { max-width: 54rem; } /* Foto und Liste nutzen die Breite; Titel und Absätze bleiben bei 36rem wie bisher */
#bar h2 { max-width: var(--mass); }
@media (min-width: 760px) { .fotos-eins { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2.6rem; } }

/* ---------- Eröffnung ---------- */
.termine { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .termine { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.termine li { padding-left: 1rem; border-left: 3px solid var(--zone); }
.termine .etikett { margin-bottom: 0.35rem; }
.termine time {
  display: block;
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 72;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--kerzenweiss);
  margin: 0 0 0.35em;
}
.termin-grand { --zone: var(--neonbernstein); }
.termin-grand .etikett { color: rgba(255, 211, 106, 0.9); }
.termin-grand time { color: #FFD36A; }
.termine p { margin: 0; }

/* ---------- Ausgang ---------- */
.ausgang-spalten { display: grid; gap: 1rem 3rem; }
@media (min-width: 760px) { .ausgang-spalten { grid-template-columns: auto minmax(0, 1fr); } }
.zeiten { border-collapse: collapse; }
.zeiten th { text-align: left; font-weight: 500; padding: 0.3em 1.4em 0.3em 0; white-space: nowrap; font-size: 1.1rem; }
.zeiten td { padding: 0.3em 0; color: var(--text); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; font-size: 1.1rem; }
.zeiten tr.heute th, .zeiten tr.heute td { color: #FFE6BE; }
.zeiten tr.geschlossen td, .zeiten tr.geschlossen th { color: var(--text-leise); }
@media (max-width: 480px) { .zeiten th { white-space: normal; padding-right: 0.8em; font-size: 1.02rem; } .zeiten td { font-size: 1.02rem; } }
.adresse { line-height: 1.5; margin-bottom: 0.5rem; font-size: 1.1rem; }
.kontakt-liste { list-style: none; padding: 0; margin: 0; }
.regeln { max-width: var(--mass); }
.regeln li { margin-bottom: 0.3em; }

/* ---------- Fußzeile ---------- */
.fuss {
  position: relative;
  z-index: 1;
  padding: 3rem var(--rand) 4rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(6, 16, 11, 0) 0%, rgba(6, 16, 11, 0.9) 30%, var(--nacht) 100%);
  color: var(--text-leise);
}
.fuss p { margin-left: auto; margin-right: auto; }
.fuss-marke { margin-bottom: 0.4rem; }
.neon-klein { font-size: 2.2rem; line-height: 1; vertical-align: -0.1em; padding: 0 0.1em; }
.fuss-deskriptor { margin-left: 0.4em; }
.fuss-nav { display: flex; justify-content: center; gap: 1.5rem; margin: 0.8rem 0; }
.fuss-nav a { color: var(--kerzenweiss); }
.fuss-betreiber { font-size: 1rem; color: rgba(241, 234, 219, 0.82); }

/* ---------- Unterseiten ---------- */
.seite { position: relative; z-index: 1; padding: 7rem var(--rand) 4rem; max-width: calc(var(--mass) + 4rem); margin: 0 auto; }
.seite h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.seite h2 { font-size: 1.6rem; margin-top: 2rem; }
.seite .platzhalter { color: #FFE6BE; background: rgba(242, 160, 61, 0.12); padding: 0 0.25em; border-radius: 0.3em; }
.seite-hinweis { border-left: 3px solid var(--bernstein); padding-left: 0.8em; color: #FFE6BE; }
.zurueck { display: inline-block; margin-top: 2rem; }
.vierohvier { min-height: 70vh; display: grid; align-content: center; text-align: center; }
.vierohvier p { margin-left: auto; margin-right: auto; }

/* ---------- Ohne JavaScript: alles steht, alles ist da ---------- */
html:not(.js) .buehne, html:not(.js) .hud, html:not(.js) .zeiger, html:not(.js) .hintergrund { display: none; }
html:not(.js) .akte { margin-top: 0; }
html:not(.js) .akt { min-height: 0; padding-top: 3rem; padding-bottom: 3rem; justify-content: flex-start; }
html:not(.js) .akt-eingang { min-height: 100vh; padding-top: 6rem; }
html:not(.js) .weiter { animation: none; }
html:not(.js) #eingang-hinweis { display: none; }
html:not(.js) .neon-quelle::before { opacity: 0.6; }

/* ---------- Ruhiger Modus und reduzierte Bewegung ---------- */
html.ruhig .akt-eingang .deskriptor, html.ruhig .akt-eingang .claim, html.ruhig .akt-eingang .zeit-schild, html.ruhig .akt-eingang .status,
html.ruhig .akt-eingang .eingang-hinweis, html.ruhig .weiter { animation: erscheinen 1s ease both; animation-delay: 0.3s; }
html.ruhig .neon-marke .neon-text, html.ruhig .neon-marke .neon-punkt { animation: erscheinen 1.2s ease both; }
html.ruhig .hintergrund { opacity: 0 !important; }
html.ruhig .wand { opacity: 1 !important; }
html.ruhig .hud { display: none; }
html.ruhig .roehre, html.ruhig .wort-innen, html:not(.js) .roehre { animation: none; filter: none; }
html.ruhig .akt .neon-quelle::before, html.ruhig .akt .neon-quelle::after { opacity: 0.6; }
html.ruhig .atem-kreis { transform: scale(0.85); }
html.ruhig .knopf, html.ruhig .schalter, html.ruhig .blatt { transition: none; }
html.ruhig #eingang-hinweis { display: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.lebendig) { scroll-behavior: auto; }
  html:not(.lebendig) .weiter { animation: none; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .hintergrund, .wand, .buehne, .weiter, .zeiger, .zeit-schild, .akt-knoepfe, #eingang-hinweis { display: none !important; }
  .nur-vorlesen { position: static; width: auto; height: auto; clip: auto; }
  .akte { margin-top: 0; }
  .akt { min-height: 0; padding: 1rem 0; }
  body { background: #fff; color: #000; }
  .neon, .titel, h1, h2, h3, .akt-gross, .roehre, .status, .karte-preis { color: #000; text-shadow: none; -webkit-text-stroke: 0; filter: none; }
  .schild-platte { background: none; border: 0; box-shadow: none; }
  .neon-quelle::before, .neon-quelle::after { display: none; }
  .neon-punkt { background: #000; box-shadow: none; }
  .lichtung-inhalt { background: none; }
}