/* EM Sweet Bar 2.0 · „Nachtschicht“
   Designsystem: Nacht als Bühne, Licht zeigt, was wichtig ist.
   Lichtfarbe je Bereich: Automaten Lila · Sweetbar Pink · Spielen Gelb · Offen Grün. */

@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage-var-latin.woff2") format("woff2"); font-weight: 200 800; 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: "Bricolage"; src: url("../fonts/bricolage-var-latin-ext.woff2") format("woff2"); font-weight: 200 800; 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: "Marker"; src: url("../fonts/permanent-marker.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --n0: #0b0912; --n1: #14111d; --n2: #1f1f38; --n3: #2a2546;
  --magenta: #d9118e; --violett: #7667e4;
  --l-auto: #a597ff; --l-sweet: #ff4fbf; --l-spiel: #ffe066; --l-offen: #5dff9b;
  --ink: #f3eefc; --ink-2: #b9b0d0; --ink-3: #8a82a3;
  --verlauf: linear-gradient(135deg, var(--magenta), #6a59d8);
  --ease-gross: cubic-bezier(.16, 1, .3, 1);
  --ease-klein: cubic-bezier(.3, 0, 0, 1);
  --rand: clamp(16px, 4vw, 64px);
  --kopf-h: 72px;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --sc-canvas: var(--n0); --sc-surface: var(--n1);
  --sc-ink: var(--ink); --sc-ink-soft: var(--ink-2);
  --sc-accent: var(--l-sweet); --sc-accent-ink: var(--n0);
  --sc-font-display: "Bricolage", system-ui, sans-serif;
  --sc-font-text: "Bricolage", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--n0); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--n0); color: var(--ink); font-family: "Bricolage", system-ui, sans-serif; font-size: 17px; line-height: 1.5; font-variation-settings: "opsz" 14; -webkit-font-smoothing: antialiased; }
img, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--l-offen); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--n0); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }

/* ---------- Grundbausteine ---------- */
.leucht { background: linear-gradient(92deg, #fff 0%, #ffd3f0 45%, #cfc7ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 22px rgb(255 79 191 / .35)); }
.titel { font-weight: 800; font-size: clamp(2.4rem, 1.4rem + 4vw, 5.2rem); line-height: .95; letter-spacing: -.035em; font-variation-settings: "opsz" 96; margin: 0; }
.titel--leucht { color: var(--l-sweet); text-shadow: 0 0 18px rgb(255 79 191 / .7), 0 0 60px rgb(255 79 191 / .35); }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 14px; font-weight: 700; font-size: 1rem; text-decoration: none; color: #fff; background: var(--verlauf); box-shadow: 0 12px 40px -12px rgb(217 17 142 / .8), inset 0 1px 0 rgb(255 255 255 / .28); transition: transform .3s var(--ease-klein), box-shadow .3s var(--ease-klein); }
.knopf svg { width: 18px; height: 18px; transition: transform .3s var(--ease-klein); }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -12px rgb(217 17 142 / .95), inset 0 1px 0 rgb(255 255 255 / .3); }
.knopf:hover svg { transform: translateX(3px); }
.knopf--leise { background: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
.knopf--leise:hover { background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.knopf--gross { min-height: 60px; padding: 0 34px; font-size: 1.125rem; }

.status { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; padding: 8px 13px; border-radius: 99px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--l-offen); box-shadow: 0 0 0 4px rgb(93 255 155 / .14), 0 0 14px var(--l-offen); flex: none; }
.status.ist-zu .status__dot { background: #ffb15d; box-shadow: 0 0 0 4px rgb(255 177 93 / .14), 0 0 12px #ffb15d; }
.fach__nr { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--l-auto)); }

/* ---------- Kopf ---------- */
.kopf.ist-gescrollt { background: rgb(11 9 18 / .78); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgb(255 255 255 / .06); }
.kopf { transition: background .3s var(--ease-klein); position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--kopf-h); display: flex; align-items: center; gap: 14px; padding: 0 var(--rand); background: linear-gradient(to bottom, rgb(11 9 18 / .85), rgb(11 9 18 / 0)); }
.kopf__logo img { height: 36px; width: auto; }
.kopf .status { margin-left: auto; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kopf__route { font-weight: 700; font-size: 14px; text-decoration: none; padding: 9px 15px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.kopf__route:hover { background: rgb(255 255 255 / .07); }

/* ---------- AKT 1 · Der Automat ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--kopf-h) + 12px) var(--rand) 28px; overflow: clip; isolation: isolate; }
.hero__licht { position: absolute; inset: -10% -10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 56% at 72% 46%, rgb(118 103 228 / .32), transparent 70%),
              radial-gradient(36% 36% at 76% 92%, rgb(217 17 142 / .26), transparent 70%),
              radial-gradient(60% 50% at 20% 0%, rgb(42 37 70 / .9), transparent 70%); }
.hero__inner { width: 100%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.25fr); gap: clamp(28px, 4.5vw, 84px); align-items: center; transform: scale(var(--push-s, 1)); transform-origin: 72% 50%; }
.hero__text { display: flex; flex-direction: column; gap: 22px; opacity: var(--push-o, 1); }
.hero__ort { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hero__titel { margin: 0; font-weight: 800; font-size: clamp(2.9rem, 1.2rem + 4.4vw, 5.4rem); line-height: .93; letter-spacing: -.04em; font-variation-settings: "opsz" 96; text-wrap: balance; }
.hero__zeile { display: block; color: var(--ink-2); font-weight: 600; font-size: .62em; letter-spacing: -.025em; margin-top: .22em; }
.hero__sub { margin: 0; max-width: 42ch; color: var(--ink-2); font-size: clamp(1rem, .9rem + .35vw, 1.2rem); line-height: 1.5; }
.hero__fakten { margin: 0; display: flex; gap: 28px; }
.hero__fakten div { display: flex; flex-direction: column-reverse; gap: 2px; }
.hero__fakten dt { font-size: 13px; color: var(--ink-3); }
.hero__fakten dd { margin: 0; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.hero__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

.automat { position: relative; display: grid; grid-template-columns: 1fr clamp(104px, 9vw, 132px); gap: 14px; padding: 16px; height: min(78vh, 760px); border-radius: 28px;
  background: linear-gradient(162deg, #2c2748 0%, #16121f 48%, #0f0c17 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .09), inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(0 0 0 / .6), 0 60px 120px -50px rgb(118 103 228 / .7), 0 40px 140px -60px rgb(217 17 142 / .6); }
.automat::before { content: ""; position: absolute; inset: 6px; border-radius: 23px; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04); }
.automat__glas { position: relative; border-radius: 16px; overflow: hidden; background: #06050b; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), inset 0 0 40px rgb(0 0 0 / .8); --mx: .5; --my: .3; }
.automat__faecher { list-style: none; margin: 0; padding: 10px; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fach { position: relative; border-radius: 10px; overflow: hidden; background: #0a0812; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
.fach img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--hell, 1)) saturate(1.08) contrast(1.04); transition: filter .7s var(--ease-gross), transform 1.2s var(--ease-gross); }
.fach:nth-child(1) img { object-position: 50% 40%; }
.fach:nth-child(2) img { object-position: 62% 48%; }
.fach:nth-child(3) img { object-position: 50% 45%; }
.fach::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto 0; height: 3px; background: var(--c); box-shadow: 0 0 14px 3px var(--c), 0 0 60px 8px color-mix(in srgb, var(--c) 40%, transparent); opacity: var(--led, 1); }
.fach::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(6 5 11 / .96) 0%, rgb(6 5 11 / .55) 26%, transparent 52%), linear-gradient(to bottom, color-mix(in srgb, var(--c) 22%, transparent), transparent 22%); }
.fach__schild { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.fach__schild strong { font-weight: 800; font-size: clamp(1.25rem, .8rem + 1vw, 1.75rem); letter-spacing: -.025em; line-height: 1; }
.fach__schild > span:last-child { font-size: 13.5px; color: var(--ink-2); line-height: 1.3; }
.automat__reflex { position: absolute; inset: -20%; pointer-events: none; z-index: 4; mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 38%, rgb(255 255 255 / .09) 43%, transparent 49%, transparent 58%, rgb(255 255 255 / .05) 61%, transparent 65%);
  transform: translate3d(calc((var(--mx) - .5) * 60px), calc((var(--my) - .5) * 30px), 0); transition: transform .9s var(--ease-gross); }
.automat__panel { border-radius: 14px; background: linear-gradient(#141120, #0c0a14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); padding: 14px 12px; display: flex; flex-direction: column; gap: 14px; }
.lcd { border-radius: 8px; padding: 12px 10px; background: #051a0f; box-shadow: inset 0 0 0 1px rgb(93 255 155 / .25), inset 0 0 18px rgb(0 0 0 / .8); font: 700 14px/1.25 var(--mono); color: #84ffb8; text-shadow: 0 0 8px rgb(93 255 155 / .9); }
.lcd__zeile { display: block; white-space: nowrap; overflow: hidden; }
.lcd small { display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: .06em; opacity: .75; }
.tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tasten i { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font: 600 11px/1 var(--mono); font-style: normal; color: rgb(255 255 255 / .5); background: linear-gradient(#221e32, #17141f); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 2px 0 #07060b; }
.muenze { margin-top: auto; border-radius: 12px; padding: 13px 6px; text-align: center; font-weight: 800; font-size: 14px; background: var(--verlauf); box-shadow: 0 0 28px -4px var(--magenta), inset 0 1px 0 rgb(255 255 255 / .3); }
.schacht { height: 52px; border-radius: 8px; background: #040309; box-shadow: inset 0 8px 16px #000, inset 0 0 0 1px rgb(255 255 255 / .05); }

/* Sweetbar zu (nach 22 Uhr): Fach bleibt dunkel */
.fach.ist-dunkel img { filter: brightness(.5) saturate(.7) !important; }
.fach.ist-dunkel::before { opacity: .2 !important; box-shadow: none; }

/* S1 · Fächer gehen an (nur Licht, Inhalt ist sofort da) */
@media (prefers-reduced-motion: no-preference) {
  .js .fach { --hell: .72; --led: 0; }
  .js .ist-an .fach { animation: fachAn .5s var(--ease-klein) forwards; }
  .js .ist-an .fach:nth-child(1) { animation-delay: 80ms; }
  .js .ist-an .fach:nth-child(2) { animation-delay: 200ms; }
  .js .ist-an .fach:nth-child(3) { animation-delay: 320ms; }
  .js .lcd__zeile { width: 0; }
  .js .ist-an .lcd__zeile { animation: tippen .34s steps(10, end) .36s forwards; }
  .js .hero__licht { opacity: 0; transition: opacity .5s var(--ease-gross); }
  .js .ist-an .hero__licht, .js.ist-an .hero__licht { opacity: 1; }
}
@keyframes fachAn { 0% { --led: 0; --hell: .72 } 8% { --led: 1 } 16% { --led: .15 } 26% { --led: 1 } 34% { --led: .4 } 44%, 100% { --led: 1; --hell: 1 } }
@keyframes tippen { to { width: 100%; } }
@property --led { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --hell { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------- AKT 2 · Hinein ---------- */
.hinein__stage { display: grid; place-items: center; background: var(--n0); }
.hinein__nebel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.3) brightness(.45); transform: scale(1.2); }
.hinein__fenster { position: relative; z-index: 1; height: min(88vh, 860px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 50px 120px -30px rgb(118 103 228 / .7), 0 0 0 12px rgb(11 9 18 / .45); }
.hinein__fenster :is(canvas, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hinein__spiegel { position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .16) 46%, transparent 52%); transform: translateX(calc((var(--sc-p, 0) - .2) * -90%)); }
.hinein__text { position: absolute; z-index: 2; left: var(--rand); bottom: clamp(32px, 10vh, 110px); display: flex; flex-direction: column; gap: 6px; }
.hinein__text .sc-label { font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }

/* ---------- AKT 4 · Greifer ---------- */
.greifer__stage { background: radial-gradient(60% 65% at 55% 55%, rgb(42 21 52 / .9) 0%, rgb(19 12 29 / .5) 50%, transparent 80%); }
.greifer__licht { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(28% 30% at 50% 84%, rgb(255 79 191 / .24), transparent 70%), radial-gradient(40% 40% at 50% 30%, rgb(255 224 102 / .08), transparent 70%); }
.greifer__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.greifer__ersatz { position: absolute; inset: 10% 30%; width: 40%; height: 80%; object-fit: cover; border-radius: 20px; }
.greifer__schritte { position: absolute; left: var(--rand); top: 50%; translate: 0 -50%; margin: 0; padding: 0; list-style: none; display: grid; }
.greifer__schritte li { grid-area: 1 / 1; font-weight: 800; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem); letter-spacing: -.04em; line-height: 1; font-variation-settings: "opsz" 96; }
.greifer__schritte li span { display: block; font: 600 12px/1 var(--mono); letter-spacing: .16em; color: var(--l-spiel); margin-bottom: 12px; }
.greifer__schluss { position: absolute; left: var(--rand); top: 50%; translate: 0 -50%; max-width: 30rem; display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; border-radius: 20px; background: rgb(11 9 18 / .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.greifer__schluss .titel { font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); }
.greifer__schluss p { margin: 0; color: var(--ink-2); }
.greifer__knopf { position: absolute; left: 50%; bottom: 96px; translate: -50% 0; z-index: 5; min-height: 52px; padding: 0 28px; border: 0; border-radius: 99px; font: 800 1rem/1 "Bricolage", sans-serif; color: #241a00; background: var(--l-spiel); box-shadow: 0 0 30px -4px var(--l-spiel), inset 0 -3px 0 rgb(0 0 0 / .18); cursor: pointer; }
.greifer__hinweis { position: absolute; right: var(--rand); top: calc(var(--kopf-h) + 16px); margin: 0; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .greifer__hinweis { display: none; } }

.spiele { padding: clamp(64px, 10vw, 140px) var(--rand); }
.spiele__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.lichtkarte { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgb(255 255 255 / .09), 0 40px 90px -40px var(--c); }
.lichtkarte::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: var(--c); box-shadow: 0 0 16px 3px var(--c); }
.lichtkarte :is(img, video) { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) brightness(.92); }
.lichtkarte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 5 11 / .95), transparent 50%); }
.lichtkarte__text { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 22px; }
.lichtkarte h3 { margin: 10px 0 4px; font-weight: 800; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); letter-spacing: -.03em; line-height: 1; }
.lichtkarte p { margin: 0; color: var(--ink-2); }
.video-schalter { position: absolute; z-index: 4; top: 16px; right: 16px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 99px; font: 600 13px/1 "Bricolage", sans-serif; color: var(--ink); background: rgb(11 9 18 / .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); cursor: pointer; }
.video-schalter:hover { background: rgb(11 9 18 / .8); }

.prototyp { margin: 0 var(--rand); padding: 18px 20px; border-radius: 14px; border: 1px dashed rgb(255 255 255 / .2); color: var(--ink-2); font-size: 14px; max-width: 1200px; }
@media (min-width: 1328px) { .prototyp { margin-inline: auto; } }
.prototyp p { margin: 0; }

/* ---------- AKT 7 · Komm vorbei ---------- */
.vorbei { padding: clamp(90px, 14vw, 200px) var(--rand) clamp(80px, 10vw, 140px); text-align: center; background: radial-gradient(50% 60% at 50% 40%, rgb(118 103 228 / .18), transparent 70%); }
.vorbei__inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.vorbei__titel { margin: 0; font-weight: 800; font-size: clamp(3.2rem, 1.6rem + 7vw, 8rem); letter-spacing: -.05em; line-height: .9; font-variation-settings: "opsz" 96; }
.status--gross { font-size: 15px; padding: 10px 16px; }
.vorbei__fakten { margin: 8px 0; display: grid; grid-template-columns: repeat(3, auto); gap: 18px clamp(24px, 5vw, 64px); text-align: left; }
.vorbei__fakten div { display: flex; flex-direction: column; gap: 4px; }
.vorbei__fakten dt { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.vorbei__fakten dd { margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.3; }

.fuss { padding: 48px var(--rand) 120px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: var(--ink-3); font-size: 14px; border-top: 1px solid rgb(255 255 255 / .06); }
.fuss img { filter: drop-shadow(0 0 18px rgb(217 17 142 / .6)); }
.fuss p { margin: 0; }

.leiste { display: none; }

/* ---------- Handy: eigene Komposition ---------- */
@media (max-width: 760px) {
  :root { --kopf-h: 60px; }
  body { font-size: 16px; }
  .kopf { gap: 10px; }
  .kopf__logo img { height: 30px; }
  .kopf .status, .kopf__route { display: none; }

  .hero { align-items: start; padding: calc(var(--kopf-h) + 4px) 16px 104px; min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 18px; }
  .hero__text { gap: 12px; }
  .hero__ort { font-size: 11px; }
  .hero__titel { font-size: clamp(2.35rem, 10.6vw, 3.1rem); }
  .hero__zeile { font-size: .58em; }
  .hero__sub { font-size: 15px; }
  .hero__fakten { gap: 22px; }
  .hero__fakten dd { font-size: 1.15rem; }
  .hero__knoepfe .knopf--leise { display: none; }
  .hero__knoepfe .knopf { flex: 1; }

  .automat { height: auto; grid-template-columns: 1fr; padding: 8px; border-radius: 20px; }
  .automat__panel { display: none; }
  .automat__faecher { grid-template-columns: 1fr; grid-auto-rows: 104px; gap: 8px; padding: 8px; }
  .fach:nth-child(1) img { object-position: 50% 45%; }
  .fach:nth-child(2) img { object-position: 80% 22%; }
  .fach:nth-child(3) img { object-position: 50% 38%; }
  .fach::after { background: linear-gradient(90deg, rgb(6 5 11 / .94) 0%, rgb(6 5 11 / .6) 52%, transparent 85%), linear-gradient(to bottom, color-mix(in srgb, var(--c) 22%, transparent), transparent 30%); }
  .fach__schild { left: 14px; right: auto; top: 50%; bottom: auto; translate: 0 -50%; gap: 5px; }
  .fach__schild strong { font-size: 1.35rem; }

  .hinein__fenster { height: 78vh; border-radius: 18px; }
  .hinein__text { left: 20px; bottom: 9vh; }
  .hinein__text .titel { font-size: 3rem; }

  .greifer__schritte { top: calc(var(--kopf-h) + 24px); translate: none; left: 20px; }
  .greifer__schritte li { font-size: 2.4rem; }
  .greifer__schluss { left: 14px; right: 14px; top: auto; bottom: 88px; translate: none; padding: 18px; }
  .greifer__knopf { bottom: auto; top: calc(var(--kopf-h) + 18px); left: auto; right: 16px; translate: none; min-height: 46px; padding: 0 20px; }
  .ist-gewonnen .greifer__knopf { opacity: 0; pointer-events: none; }

  .spiele { padding: 56px 14px; }
  .spiele__inner { grid-template-columns: 1fr; }
  .lichtkarte { aspect-ratio: 4 / 4.4; }
  .prototyp { margin: 0 14px; }
  .vorbei__fakten { grid-template-columns: 1fr; text-align: center; }
  .vorbei__fakten div { align-items: center; }

  .leiste { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 18px; background: rgb(17 14 27 / .82); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 20px 50px -10px #000; }
  .leiste .status { background: none; box-shadow: none; padding: 0; font-size: 13px; }
  .leiste .knopf { min-height: 46px; padding: 0 22px; }
}


/* ---------- Kopf-Navigation (Desktop) ---------- */
.kopf__nav { display: flex; gap: 4px; margin-left: clamp(12px, 3vw, 40px); }
.kopf__nav a { font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: 99px; transition: color .2s, background .2s; }
.kopf__nav a:hover { color: var(--ink); background: rgb(255 255 255 / .06); }
@media (max-width: 1100px) { .kopf__nav { display: none; } }
.fach__link { position: absolute; inset: 0; z-index: 5; border-radius: 10px; }
.fach__link:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .fach:hover img { transform: scale(1.04); } }

/* ---------- AKT 3 · Die Wand ---------- */
/* Grundzustand (ohne JS, Handy, wenig Höhe, reduzierte Bewegung): normale Abfolge, Schiene wischbar */
.wand { position: relative; }
.wand .wand__schiene { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: var(--rand); scrollbar-width: thin; max-width: 100%; justify-self: stretch; width: auto; }
.wand .wandfach { flex: none; height: min(64vh, 620px); scroll-snap-align: start; }
/* Kamerafahrt: nur wenn JS sie freigibt (Desktop, genug Höhe, Bewegung erlaubt) */
.wand--fahrt { height: 320vh; height: 320svh; }
.wand--fahrt .wand__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.wand--fahrt .wand__schiene { overflow: visible; scroll-snap-type: none; max-width: none; justify-self: start; width: max-content; }
.wand--fahrt .wandfach { height: auto; }
.wand__stage { padding-bottom: 6vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: clamp(16px, 3vh, 32px); padding: calc(var(--kopf-h) + 2vh) 0 4vh; background: transparent; }
.wand__kopf { padding: 0 var(--rand); display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 8px 48px; }
.wand__kopf .sc-label { grid-column: 1 / -1; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--l-auto); margin: 0; }
.wand__kopf .titel { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); }
.wand__sub { margin: 0; max-width: 40ch; color: var(--ink-2); justify-self: end; }
.wand__schiene { transform: translate3d(var(--wand-x, 0px), 0, 0); list-style: none; margin: 0; padding: 0 var(--rand); display: flex; gap: clamp(14px, 1.6vw, 24px); align-items: stretch; min-height: 0; }
.wand--fahrt .wand__schiene { will-change: transform; }
.wandfach { --an: 0; position: relative; width: clamp(260px, 26vw, 400px); display: flex; flex-direction: column; border-radius: 22px; padding: 12px; background: linear-gradient(170deg, #1d1930, #100d18); box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 40px 90px -50px color-mix(in srgb, var(--c) calc(var(--an) * 100%), transparent); transition: box-shadow .5s var(--ease-gross); }
.wandfach figure { position: relative; flex: 1; min-height: 0; margin: 0; border-radius: 14px; overflow: hidden; background: #06050b; }
.wandfach figure::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: var(--c); opacity: calc(.15 + var(--an) * .85); box-shadow: 0 0 calc(var(--an) * 18px) calc(var(--an) * 4px) var(--c); }
.wandfach figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .07) 46%, transparent 52%), linear-gradient(to bottom, color-mix(in srgb, var(--c) 18%, transparent), transparent 25%); opacity: var(--an); }
.wandfach img { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(.32 + var(--an) * .68)) saturate(calc(.5 + var(--an) * .6)); }
.wandfach__text { padding: 16px 6px 4px; opacity: calc(.4 + var(--an) * .6); }
.wandfach__text .fach__nr { color: var(--c); }
.wandfach h3 { margin: 8px 0 4px; font-weight: 800; font-size: clamp(1.5rem, 1rem + 1vw, 2rem); letter-spacing: -.03em; line-height: 1; }
.wandfach p { margin: 0; color: var(--ink-2); font-size: 15px; }
.mystery-zeichen { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: clamp(5rem, 9vw, 9rem); color: var(--l-sweet); text-shadow: 0 0 24px var(--l-sweet), 0 0 80px rgb(255 79 191 / .6); opacity: calc(var(--an) * .9); }
@media (prefers-reduced-motion: no-preference) { .wandfach--mystery .mystery-zeichen { animation: flackern 3.2s steps(1) 1; } }
@keyframes flackern { 0%, 100% { opacity: calc(var(--an) * .9) } 12% { opacity: .15 } 14% { opacity: calc(var(--an) * .9) } 58% { opacity: .3 } 60% { opacity: calc(var(--an) * .9) } }
.wand__fuss { margin: 0; padding: 0 var(--rand); font: 600 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- AKT 5 · Sweetbar ---------- */
.bowl__stage { display: grid; place-items: center; background: radial-gradient(50% 55% at 50% 58%, rgb(58 19 64 / .85) 0%, rgb(23 11 34 / .4) 55%, transparent 85%); }
.bowl__riesig { position: absolute; inset: 0; display: grid; justify-items: center; align-items: start; padding-top: calc(var(--kopf-h) + 1vh); margin: 0; pointer-events: none; font-weight: 800; font-size: clamp(6rem, 19vw, 22rem); letter-spacing: -.06em; line-height: 1; font-variation-settings: "opsz" 96; }
.bowl__riesig span { grid-area: 1 / 1; }
.bowl__kontur { color: transparent; -webkit-text-stroke: 2px rgb(255 79 191 / .55); }
.bowl__fuellung { color: #ff5fc8; text-shadow: 0 0 24px rgb(255 79 191 / .7), 0 0 80px rgb(255 79 191 / .4); clip-path: inset(0 calc((1 - var(--sc-p, 0)) * 100%) 0 0); }
.bowl__fenster { position: relative; z-index: 2; margin-top: 24vh; height: min(70vh, 700px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 60px 140px -30px rgb(217 17 142 / .75), 0 0 0 14px rgb(11 9 18 / .5); }
.bowl__fenster :is(canvas, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bowl__woerter { position: absolute; z-index: 3; left: var(--rand); top: 64%; translate: 0 -50%; margin: 0; padding: 0; list-style: none; display: grid; }
.bowl__woerter li { grid-area: 1 / 1; font-weight: 800; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem); letter-spacing: -.04em; color: var(--c); text-shadow: 0 0 20px color-mix(in srgb, var(--c) 70%, transparent); }
.bowl__text { position: absolute; z-index: 3; right: var(--rand); bottom: clamp(32px, 12vh, 120px); max-width: 26rem; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 20px; background: rgb(11 9 18 / .66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.bowl__text .sc-label { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--l-sweet); }
.bowl__text .titel { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); }
.bowl__text p { margin: 0; color: var(--ink-2); }

/* ---------- Karte ---------- */
.karte { padding: clamp(72px, 10vw, 150px) var(--rand); background: radial-gradient(50% 50% at 25% 40%, rgb(217 17 142 / .14), transparent 70%); }
.karte__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: start; }
.tafel { position: relative; padding: clamp(24px, 3vw, 44px); border-radius: 26px; overflow: hidden; background: radial-gradient(120% 90% at 0% 0%, #2a2440, #141120 60%); box-shadow: 0 0 0 1px rgb(255 255 255 / .09), inset 0 1px 0 rgb(255 255 255 / .1), 0 50px 120px -60px var(--magenta); }
.tafel__logo { position: absolute; right: -40px; top: -30px; width: 220px; height: auto; opacity: .16; filter: blur(.5px); transform: rotate(8deg); pointer-events: none; }
.tafel__titel { position: relative; margin: 0 0 24px; font: 400 clamp(2rem, 1.3rem + 2.2vw, 3.2rem)/1 "Marker", "Bricolage", sans-serif; color: #fff; text-shadow: 0 0 18px rgb(255 79 191 / .5); }
.preise { list-style: none; margin: 0; padding: 0; position: relative; }
.preise li { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px dashed rgb(255 255 255 / .14); font-size: 1.05rem; }
.preise li span { flex: 1; }
.preise small { color: var(--ink-3); font-size: .85em; }
.preise b { font: 800 1.25rem/1 "Bricolage", sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.aktion { position: relative; margin-top: 26px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 20px; padding: 18px 20px; border-radius: 18px; background: var(--verlauf); box-shadow: 0 20px 60px -20px var(--magenta), inset 0 1px 0 rgb(255 255 255 / .3); }
.aktion__label { grid-column: 1 / -1; font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .8); }
.aktion p { margin: 0; }
.aktion strong { font-weight: 800; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); letter-spacing: -.03em; }
@media (prefers-reduced-motion: no-preference) { .aktion { animation: pulsieren 3.6s var(--ease-gross) 1; } }
@keyframes pulsieren { 0%, 100% { box-shadow: 0 20px 60px -20px var(--magenta), inset 0 1px 0 rgb(255 255 255 / .3); } 50% { box-shadow: 0 20px 80px -12px var(--l-sweet), inset 0 1px 0 rgb(255 255 255 / .3); } }
.rechner { padding-top: 8px; }
.rechner__titel { margin: 0 0 8px; font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); letter-spacing: -.03em; line-height: 1.05; }
.rechner__hilfe { margin: 0 0 18px; color: var(--ink-2); }
.toppings { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.toppings button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 99px; font: 600 15px/1 "Bricolage", sans-serif; color: var(--ink); background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); cursor: pointer; transition: background .2s var(--ease-klein), box-shadow .2s var(--ease-klein), transform .2s var(--ease-klein); }
.toppings button:hover { background: rgb(255 255 255 / .1); }
.toppings button[aria-pressed="true"] { color: #2a0019; background: var(--l-sweet); box-shadow: 0 0 22px -4px var(--l-sweet); }
.rechner__ergebnis { margin: 22px 0 8px; min-height: 3.2em; font-size: 1.1rem; }
.rechner__ergebnis b { font-size: 1.6rem; letter-spacing: -.02em; }
.karte__klein { margin: 0; color: var(--ink-3); font-size: 14px; }

/* ---------- AKT 6 · Bleiben ---------- */
.bleiben { padding: clamp(72px, 10vw, 150px) var(--rand); background: radial-gradient(50% 60% at 80% 50%, rgb(165 151 255 / .14), transparent 70%); overflow: clip; }
.bleiben__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.bleiben__bilder { position: relative; height: min(76vh, 720px); }
.bleiben__bilder img { position: absolute; width: 58%; aspect-ratio: 9 / 16; height: auto; object-fit: cover; border-radius: 22px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 40px 100px -30px #000; }
.bleiben__hinten { right: 0; top: 0; filter: brightness(.7) saturate(1.1); }
.bleiben__vorne { left: 0; bottom: 0; z-index: 2; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 50px 120px -30px rgb(118 103 228 / .8) !important; }
.bleiben__text { display: flex; flex-direction: column; gap: 18px; }
.bleiben__text .sc-label { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--l-auto); }
.bleiben__text .titel { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.8rem); }
.bleiben__lead { margin: 0; color: var(--ink-2); font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); max-width: 48ch; }
.punkte { margin: 6px 0 0; display: grid; gap: 14px; }
.punkte div { padding-left: 18px; border-left: 2px solid var(--l-auto); }
.punkte dt { font-weight: 800; }
.punkte dd { margin: 2px 0 0; color: var(--ink-2); }
.halle { margin-top: 18px; padding: 22px; border-radius: 20px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.halle h3 { margin: 0; font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; }
.halle p { margin: 0 0 6px; color: var(--ink-2); }

/* ---------- HD-Fotos (kie.ai hochgerechnet) ---------- */
.karte__stand { position: relative; margin: 0 0 28px; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 40px 100px -40px var(--magenta); }
.karte__stand img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.karte__stand figcaption, .vorbei__bild figcaption { position: absolute; left: 14px; bottom: 12px; padding: 7px 12px; border-radius: 99px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: rgb(11 9 18 / .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vorbei__bild { position: relative; margin: 8px 0 4px; width: min(100%, 520px); aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 40px 100px -40px var(--l-sweet); }
.vorbei__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.vorbei__bild figcaption { text-transform: none; letter-spacing: 0; font: 600 13px/1.2 "Bricolage", sans-serif; }

/* ---------- FAQ ---------- */
.vorbei__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.fragen { padding: 0 var(--rand) clamp(80px, 10vw, 140px); }
.fragen__inner { max-width: 860px; margin: 0 auto; }
.fragen .titel { font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); margin-bottom: 26px; }
.faq details { border-bottom: 1px solid rgb(255 255 255 / .1); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 2px; font-weight: 700; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.6rem; line-height: .8; color: var(--l-sweet); transition: transform .3s var(--ease-klein); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--ink-2); max-width: 64ch; }
.fuss__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.fuss__links a { color: var(--ink-2); }

/* ---------- Rechtsseiten ---------- */
.recht { max-width: 760px; margin: 0 auto; padding: calc(var(--kopf-h) + 40px) var(--rand) 100px; }
.recht h1 { font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); letter-spacing: -.04em; margin: 0 0 12px; }
.recht h2 { margin: 36px 0 8px; font-size: 1.3rem; letter-spacing: -.01em; }
.recht p, .recht li { color: var(--ink-2); }
.recht .offen { padding: 14px 16px; border-radius: 12px; border: 1px dashed #ffb15d; color: #ffd9ae; }

@media (max-width: 760px) {
  /* Wand: Wischen mit Einrasten statt Kamerafahrt */
  .wand__stage { padding: 56px 0 40px; }
  .wand__kopf { grid-template-columns: 1fr; padding: 0 16px; }
  .wand__sub { justify-self: start; }
  .wand .wand__schiene { padding: 4px 16px 8px; scroll-padding: 16px; scrollbar-width: none; }
  .wand__schiene::-webkit-scrollbar { display: none; }
  .wand .wandfach { width: 78vw; height: 64vh; }
  .wand__fuss { padding: 0 16px; }

  .bowl__riesig { font-size: 30vw; padding-top: calc(var(--kopf-h) + 2vh); }
  .bowl__fenster { height: 58vh; margin-top: 16vh; }
  .bowl__woerter { left: 18px; top: auto; bottom: 30vh; translate: none; }
  .bowl__woerter li { font-size: 2.4rem; }
  .bowl__text { left: 14px; right: 14px; bottom: 88px; padding: 18px; }

  .karte { padding: 64px 14px; }
  .karte__inner { grid-template-columns: 1fr; }
  .tafel__logo { width: 150px; right: -30px; top: -20px; }
  .aktion { grid-template-columns: 1fr; }

  .bleiben { padding: 64px 14px; }
  .bleiben__inner { grid-template-columns: 1fr; }
  .bleiben__bilder { height: 92vw; }
  .bleiben__bilder img { width: 56%; }
  .fragen { padding: 0 16px 72px; }
  .vorbei__knoepfe { flex-direction: column; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wandfach { --an: 1 !important; }
  .automat__reflex, .hinein__spiegel { transform: none; transition: none; }
  .knopf, .knopf svg { transition: none; }
}


/* =====================================================================
   Referenz-Prinzipien
   ===================================================================== */

/* ---------- Lichtfeld: eine Lichtstimmung für die ganze Seite (Igloo/Fizzi) ---------- */
@property --lf-a { syntax: "<color>"; inherits: true; initial-value: rgb(118 103 228 / .22); }
@property --lf-b { syntax: "<color>"; inherits: true; initial-value: rgb(217 17 142 / .10); }
html { --lf-a: rgb(118 103 228 / .22); --lf-b: rgb(217 17 142 / .10); transition: --lf-a 1.4s var(--ease-gross), --lf-b 1.4s var(--ease-gross); }
html[data-licht="spiel"] { --lf-a: rgb(255 224 102 / .14); --lf-b: rgb(255 79 191 / .14); }
html[data-licht="sweet"] { --lf-a: rgb(255 79 191 / .22); --lf-b: rgb(118 103 228 / .12); }
.lichtfeld { position: fixed; inset: -10vh -10vw; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 40% at 22% 30%, var(--lf-a), transparent 70%), radial-gradient(50% 45% at 80% 75%, var(--lf-b), transparent 70%); }
.lichtfeld::after { /* feines Filmkorn: nimmt dem Verlauf das Digitale */
  content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body { background: transparent; }
main, .fuss { position: relative; z-index: 0; }

/* ---------- Navigation: aktueller Bereich (Apple) ---------- */
.kopf__nav a { position: relative; }
.kopf__nav a[aria-current="true"] { color: var(--ink); }
.kopf__nav a[aria-current="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--l-sweet); box-shadow: 0 0 10px var(--l-sweet); }

/* ---------- Wort-Reveal aus der Unschärfe (Oryzo) ---------- */
.wort-reveal .wort { display: inline-block; overflow: clip; overflow-clip-margin: .2em; padding-bottom: .06em; vertical-align: top; }
.wort-reveal .wort > span { display: inline-block; transform: translate3d(0, .6em, 0); opacity: 0; filter: blur(12px);
  transition: transform 1.1s var(--ease-gross), opacity .8s var(--ease-gross), filter 1s var(--ease-gross); transition-delay: calc(var(--i) * 55ms); }
.wort-reveal.ist-da .wort > span { transform: none; opacity: 1; filter: blur(0); }

/* ---------- Lesetext hellt auf (Apple) ---------- */
.ist-lesbar .lesewort { transition: opacity .25s linear; }

/* ---------- Automatenwand mit Raumtiefe (Igloo) ---------- */
.wand--fahrt .wand__schiene { perspective: 1600px; perspective-origin: 50% 45%; }
.wand--fahrt .wandfach { transform: rotateY(calc(var(--d, 0) * -16deg)) translateZ(calc(var(--da, 0) * -120px)) scale(calc(1 - var(--da, 0) * .04)); transform-origin: 50% 50%; will-change: transform; }

/* ---------- Greifer: Zielmarkierung (Oryzo) ---------- */
.ziel { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; --zx: 50%; --zy: 50%; }
.ziel__h, .ziel__v { position: absolute; background: repeating-linear-gradient(90deg, rgb(255 224 102 / .55) 0 6px, transparent 6px 12px); }
.ziel__h { left: 0; right: 0; top: var(--zy); height: 1px; }
.ziel__v { top: 0; bottom: 0; left: var(--zx); width: 1px; background: repeating-linear-gradient(180deg, rgb(255 224 102 / .55) 0 6px, transparent 6px 12px); }
.ziel__ring { position: absolute; left: var(--zx); top: var(--zy); width: 54px; height: 54px; translate: -50% -50%; border-radius: 50%; border: 1.5px solid var(--l-spiel); box-shadow: 0 0 18px -2px var(--l-spiel), inset 0 0 12px -4px var(--l-spiel); }
.ziel__wert { position: absolute; left: var(--zx); top: var(--zy); translate: 40px -36px; padding: 6px 10px; border-radius: 8px; white-space: pre; font: 600 11px/1 var(--mono); letter-spacing: .08em; color: #241a00; background: var(--l-spiel); }
@media (max-width: 760px) { .ziel__wert { display: none; } }

/* ---------- Sweetbar: Licht geht an, Bild wird scharf (Oryzo) ---------- */
.bowl__fenster { filter: blur(calc((1 - min(1, var(--sc-p, 1) * 7)) * 14px)) brightness(calc(.45 + min(1, var(--sc-p, 1) * 7) * .55)); }

@media (prefers-reduced-motion: reduce) {
  .bowl__fenster { filter: none; }
  html { transition: none; }
}