:root {
  color-scheme: light;

  --bg:        #ffffff;
  --bg-deep:   #ffffff;
  --bg-2:      #f5f5f7;

  --text:      #1d1d1f;
  --text-dim:  #424245;
  --text-faint:#6e6e73;

  --accent:      #0066cc;
  --accent-tief: #0071e3;
  --accent-hell: #0077ed;
  --accent-weak: rgba(0, 113, 227, 0.08);
  --accent-glow: rgba(0, 113, 227, 0.28);

  --surface:   rgba(0, 0, 0, 0.028);
  --surface-2: rgba(0, 0, 0, 0.052);
  --line:      rgba(0, 0, 0, 0.10);
  --line-2:    rgba(0, 0, 0, 0.20);

  --nebel:        255, 255, 255;          
  --grund-1:      #ffffff;                
  --grund-2:      rgba(0, 0, 0, 0.028);   
  --glas:         rgba(255, 255, 255, 0.72);
  --glas-fest:    rgba(255, 255, 255, 0.84);
  --glas-kante:   rgba(0, 0, 0, 0.07);
  --glas-kante-2: rgba(0, 0, 0, 0.09);
  --platte:       rgba(255, 255, 255, 0.86);   
  --karte-a:      #f7f7f9;
  --karte-b:      #eeeef1;
  --karte-kante:  rgba(0, 0, 0, 0.055);
  --erhaben:      #ffffff;                     
  --bild-kante:   rgba(0, 0, 0, 0.10);         
  --fenster:      #ffffff;
  --fenster-leiste-a: #f6f6f8;
  --fenster-leiste-b: #ededf0;
  --ampel:        #d6d6da;
  --kachel-grund: #ebebef;
  --kachel-filter: saturate(0.42) brightness(1.06) contrast(0.94);
  --kachel-kante: rgba(0, 0, 0, 0.08);
  --zahl-a:       #1d1d1f;
  --zahl-b:       #55555c;
  --punkt:        rgba(0, 0, 0, 0.20);    
  --punkt-hover:  rgba(0, 0, 0, 0.42);
  --ja:           #1a9c4b;
  --nein:         #d6252b;
  --wink:         rgba(0, 0, 0, 0.55);
  --wink-linie:   rgba(0, 0, 0, 0.22);
  --schein:       rgba(0, 113, 227, 0.10);
  --schein-2:     rgba(120, 140, 190, 0.09);
  --auswahl:      rgba(0, 113, 227, 0.18);
  
  --verlauf-1: #0071e3; --verlauf-2: #2f8fff; --verlauf-3: #7d4bff;

  --schatten-flach: 0 2px 6px rgba(0, 0, 0, 0.04);
  --schatten-tief:  0 30px 70px -40px rgba(0, 0, 0, 0.22);
  --schatten-bild:  0 2px 8px rgba(0, 0, 0, 0.08), 0 24px 48px -24px rgba(0, 0, 0, 0.34);

  --page: 1120px;
  --weit: 1420px;
  --wrap-pad: 24px;

  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 980px;

  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-form: cubic-bezier(0.32, 1.5, 0.5, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) {
    color-scheme: dark;
    --bg: #000000; --bg-deep: #000000; --bg-2: #0b0b0d;
    --text: #f5f5f7; --text-dim: #a1a1a6; --text-faint: #86868b;
    --accent: #2997ff; --accent-tief: #0071e3; --accent-hell: #0a84ff;
    --accent-weak: rgba(41, 151, 255, 0.12);
    --accent-glow: rgba(41, 151, 255, 0.42);
    --surface: rgba(255, 255, 255, 0.048);
    --surface-2: rgba(255, 255, 255, 0.075);
    --line: rgba(255, 255, 255, 0.10);
    --line-2: rgba(255, 255, 255, 0.20);
    --nebel: 0, 0, 0;
    --grund-1: rgba(255, 255, 255, 0.055);
    --grund-2: rgba(255, 255, 255, 0.03);
    --glas: rgba(0, 0, 0, 0.62);
    --glas-fest: rgba(0, 0, 0, 0.80);
    --glas-kante: rgba(255, 255, 255, 0.09);
    --glas-kante-2: rgba(255, 255, 255, 0.13);
    --platte: rgba(28, 28, 30, 0.86);
    
    --karte-a: #1d1d22; --karte-b: #141419;
    --karte-kante: rgba(255, 255, 255, 0.09);
    --erhaben: #2c2c33;
    --bild-kante: rgba(255, 255, 255, 0.14);
    --fenster: #131316;
    --fenster-leiste-a: #1e1e22; --fenster-leiste-b: #17171b;
    --ampel: #3a3a40;
    --kachel-grund: #121216;
    --kachel-filter: saturate(0.55) brightness(0.78);
    --kachel-kante: rgba(255, 255, 255, 0.08);
    --zahl-a: #ffffff; --zahl-b: #a9adb4;
    --punkt: rgba(255, 255, 255, 0.24);
    --punkt-hover: rgba(255, 255, 255, 0.55);
    --ja: #30d158; --nein: #ff6961;
    --wink: rgba(255, 255, 255, 0.65);
    --wink-linie: rgba(255, 255, 255, 0.22);
    --schein: rgba(41, 151, 255, 0.26);
    --schein-2: rgba(120, 140, 190, 0.13);
    --auswahl: rgba(41, 151, 255, 0.30);
    --verlauf-1: #2997ff; --verlauf-2: #7cc4ff; --verlauf-3: #cfa3ff;
    --schatten-flach: 0 2px 6px rgba(0, 0, 0, 0.5);
    --schatten-tief: 0 30px 70px -40px rgba(0, 0, 0, 1);
    --schatten-bild: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.9);
  }
}

:root[data-farbe="dunkel"] {
  color-scheme: dark;
  --bg: #000000; --bg-deep: #000000; --bg-2: #0b0b0d;
  --text: #f5f5f7; --text-dim: #a1a1a6; --text-faint: #86868b;
  --accent: #2997ff; --accent-tief: #0071e3; --accent-hell: #0a84ff;
  --accent-weak: rgba(41, 151, 255, 0.12);
  --accent-glow: rgba(41, 151, 255, 0.42);
  --surface: rgba(255, 255, 255, 0.048);
  --surface-2: rgba(255, 255, 255, 0.075);
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.20);
  --nebel: 0, 0, 0;
  --grund-1: rgba(255, 255, 255, 0.055);
  --grund-2: rgba(255, 255, 255, 0.03);
  --glas: rgba(0, 0, 0, 0.62);
  --glas-fest: rgba(0, 0, 0, 0.80);
  --glas-kante: rgba(255, 255, 255, 0.09);
  --glas-kante-2: rgba(255, 255, 255, 0.13);
  --platte: rgba(28, 28, 30, 0.86);
  --karte-a: #1d1d22; --karte-b: #141419;
  --karte-kante: rgba(255, 255, 255, 0.09);
  --erhaben: #2c2c33;
  --bild-kante: rgba(255, 255, 255, 0.14);
  --fenster: #131316;
  --fenster-leiste-a: #1e1e22; --fenster-leiste-b: #17171b;
  --ampel: #3a3a40;
  --kachel-grund: #121216;
  --kachel-filter: saturate(0.55) brightness(0.78);
  --kachel-kante: rgba(255, 255, 255, 0.08);
  --zahl-a: #ffffff; --zahl-b: #a9adb4;
  --punkt: rgba(255, 255, 255, 0.24);
  --punkt-hover: rgba(255, 255, 255, 0.55);
  --ja: #30d158; --nein: #ff6961;
  --wink: rgba(255, 255, 255, 0.65);
  --wink-linie: rgba(255, 255, 255, 0.22);
  --schein: rgba(41, 151, 255, 0.26);
  --schein-2: rgba(120, 140, 190, 0.13);
  --auswahl: rgba(41, 151, 255, 0.30);
  --verlauf-1: #2997ff; --verlauf-2: #7cc4ff; --verlauf-3: #cfa3ff;
  --schatten-flach: 0 2px 6px rgba(0, 0, 0, 0.5);
  --schatten-tief: 0 30px 70px -40px rgba(0, 0, 0, 1);
  --schatten-bild: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.9);
}

body::before {
  background:
    radial-gradient(120% 70% at 50% -14%, var(--grund-1), transparent 62%),
    radial-gradient(90% 55% at 50% 112%, var(--grund-2), transparent 64%),
    var(--bg);
}
::selection { background: var(--auswahl); color: inherit; }

body {
  font: 400 17px/1.47 var(--sans);
  letter-spacing: -0.011em;
}

h1, h2, h3, .gross {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.019em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(44px, 8.2vw, 108px); letter-spacing: -0.024em; line-height: 1.03; }
h2 { font-size: clamp(34px, 5.2vw, 72px); letter-spacing: -0.021em; }
h3 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.014em; line-height: 1.12; }

.lede {
  font-family: var(--display);
  font-size: clamp(19px, 2.0vw, 26px);
  line-height: 1.38;
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--text-dim);
  text-wrap: pretty;
}

.sub {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.42;
  color: var(--text-faint);
  letter-spacing: -0.008em;
  max-width: 58ch;
  text-wrap: pretty;
}

section > .wrap > h2 {
  font: 600 clamp(34px, 5.2vw, 72px)/1.06 var(--display);
  letter-spacing: -0.021em;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}
section > .wrap > .sub {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--text-faint);
  max-width: 58ch;
  margin: 20px auto 0;
}

h1 { max-width: none; margin: 0 0 22px; }
h1 em { color: inherit; }
.lede { max-width: 34ch; margin: 0 auto; }

.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 15px/1.2 var(--display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  background: rgba(41, 151, 255, 0.10);
  border: 1px solid rgba(41, 151, 255, 0.22);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  margin: 0 0 24px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.18);
}

.btn {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -0.011em;
  border-radius: var(--r-pill);
  padding: 12px 23px;
  border: 0;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              opacity 0.22s var(--ease);
}

.btn-primary {
  background: var(--accent-tief);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover { background: var(--accent-hell); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--accent);
  padding: 12px 8px;
  border: 0;
}
.btn-ghost:hover { background: transparent; color: var(--accent); text-decoration: underline; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.cta-note {
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}

.top .glas {
  background: var(--glas);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--glas-kante), var(--schatten-flach);
}
.top.is-stuck .glas {
  background: var(--glas-fest);
  box-shadow: inset 0 0 0 1px var(--glas-kante-2), var(--schatten-flach);
}
.top nav a { font-size: 14px; letter-spacing: -0.004em; color: var(--text-dim); }
.top nav a:hover { color: var(--text); background: transparent; }
.top .brand { color: var(--text); }

.top.js-menu.is-mini nav {
  background: var(--glas-fest);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  box-shadow:
    inset 0 0 0 1px var(--glas-kante-2),
    var(--schatten-flach),
    var(--schatten-tief);
}
.top.js-menu.is-mini nav a { color: var(--text-dim); }
.top.js-menu.is-mini nav a:hover,
.top.js-menu.is-mini nav a:focus-visible {
  color: var(--text);
  background: var(--surface-2);
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
  position: relative;
  z-index: 2;
}
.top .kopf-rechts .btn { font-size: 14px; padding: 8px 16px; white-space: nowrap; }
@media (max-width: 940px) {
  .top .kopf-rechts .btn { font-size: 13.5px; padding: 8px 13px; }
}
@media (max-width: 560px) {
  .top .kopf-rechts { gap: 2px; }
  .top .kopf-rechts .btn { font-size: 13px; padding: 8px 11px; }
}

main > section,
main > .band > section {
  padding: clamp(88px, 12vw, 168px) 0;
  position: relative;
}

[id] { scroll-margin-top: calc(var(--kopf, 72px) + 24px); }

.nur-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main section::before { display: none; }
main > section > .wrap { text-align: center; }
main > section > .wrap > .sub { margin-left: auto; margin-right: auto; }
main > section > .wrap > h2 + .sub { margin-top: 20px; }

.band-2 {
  background: var(--bg-2);
  border-radius: var(--r-xl);
  margin: 0 auto;
  max-width: var(--weit);
  width: calc(100% - 2 * var(--wrap-pad));
}

.buehne { padding: 0; position: relative; }

.buehne-klebe {
  position: relative;
  padding: clamp(96px, 13vw, 150px) 0 clamp(64px, 8vw, 110px);
}

.kino-canvas { display: none; }

.kino-schein {
  position: absolute;
  left: 50%; top: 52%;
  width: min(1200px, 96vw);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  
  background:
    radial-gradient(46% 42% at 50% 46%, var(--schein), transparent 68%),
    radial-gradient(72% 62% at 50% 54%, var(--schein-2), transparent 74%);
  filter: blur(34px);
  z-index: 0;
}

.kino-schleier { display: none; }
.buehne.is-kino .kino-schleier {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 0;
  
  height: 74%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--nebel), 0.92) 0%,
    rgba(var(--nebel), 0.86) 46%,
    rgba(var(--nebel), 0.58) 68%,
    rgba(var(--nebel), 0.22) 86%,
    transparent 100%);
}

.kino-fuss { display: none; }
.buehne.is-kino .kino-fuss {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  
  height: 27%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(var(--nebel), 1) 0%,
    rgba(var(--nebel), 0.99) 30%,
    rgba(var(--nebel), 0.90) 55%,
    rgba(var(--nebel), 0.58) 74%,
    rgba(var(--nebel), 0.20) 89%,
    transparent 100%);
}

.kino-text { position: relative; z-index: 3; }

.akt { text-align: center; }
.akt .wrap { text-align: center; }

.akt-held h1 { margin: 0 0 22px; }

.akt-held h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--verlauf-1) 0%, var(--verlauf-2) 38%, var(--verlauf-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.akt-held .lede { max-width: 40ch; margin: 0 auto; }

.scrollwink {
  margin-top: clamp(34px, 5vw, 60px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.scrollwink i {
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, transparent, var(--wink-linie) 30%, transparent);
  position: relative;
  overflow: hidden;
}
.scrollwink i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, var(--wink), transparent);
  animation: wink 2.4s var(--ease) infinite;
}
@keyframes wink {
  0%   { transform: translateY(-100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.kino-geraet {
  display: block;
  width: min(900px, calc(100% - 2 * var(--wrap-pad)));
  height: auto;
  margin: clamp(24px, 4vw, 48px) auto 0;
}
@media (min-width: 380px) and (prefers-reduced-motion: no-preference) {
  .kino-geraet { display: none; }
}
.buehne.is-kino .kino-geraet { display: none; }
.buehne.ohne-kino .kino-geraet { display: block; }

.buehne:not(.is-kino) .nur-kino { display: none; }

.akt-satz {
  max-width: 760px;
  margin: clamp(56px, 8vw, 96px) auto 0;
  padding: 0 var(--wrap-pad);
}
.akt-satz p {
  font-family: var(--display);
  font-size: clamp(28px, 3.9vw, 54px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.019em;
  margin: 0;
  text-wrap: balance;
}
.akt-satz small {
  display: block;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.008em;
  
  color: var(--text-dim);
  text-wrap: pretty;
}

.kino-scharf {
  display: block;
  width: min(1320px, 92vw, calc(86svh * var(--kino-seite, 1.5621)));
  aspect-ratio: var(--kino-seite, 1.5621);
  height: auto;
  margin: clamp(48px, 7vw, 90px) auto 0;
  border-radius: clamp(10px, 1.1vw, 18px);
  box-shadow: var(--schatten-bild);
}

.buehne.is-kino {
  
  height: 560svh;
  margin-top: calc(var(--kopf, 72px) * -1);
}

.buehne.is-kino .buehne-klebe {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.buehne.is-kino .kino-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;                      
}

.buehne.is-kino .kino-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.buehne.is-kino .akt {
  grid-area: 1 / 1;
  width: 100%;
  will-change: opacity, transform;
}
.buehne.is-kino .akt-satz {
  margin: 0 auto;
  
  align-self: end;
  padding-bottom: clamp(34px, 5.5vh, 62px);
}
.buehne.is-kino .kino-scharf {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  opacity: 0;
  z-index: 2;
  box-shadow: var(--schatten-bild);
}

.buehne.is-kino .akt-held {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding-top: clamp(84px, 11vh, 126px);
}

.buehne.is-kino .akt-held h1 { font-size: clamp(44px, 6.6vw, 92px); }
.buehne.is-kino .akt-held .lede { font-size: clamp(18px, 1.6vw, 21px); }
.buehne.is-kino .akt-held .cta-row { margin-top: 24px; }

@media (max-height: 860px) {
  .buehne.is-kino .akt-held { padding-top: clamp(84px, 10vh, 104px); }
  .buehne.is-kino .akt-held h1 { font-size: clamp(38px, 5.4vw, 72px); }
  .buehne.is-kino .akt-held .lede { font-size: clamp(16px, 1.35vw, 19px); }
  .buehne.is-kino .akt-held .cta-row { margin-top: 18px; }
}
.buehne.is-kino .akt-held .cta-note {
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 54ch;
  margin-top: 14px;
  color: var(--text-faint);
}

.buehne.is-kino .scrollwink {
  position: absolute;
  left: max(28px, var(--wrap-pad));
  bottom: 22px;
  margin: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.buehne.is-kino .scrollwink i {
  width: 34px;
  height: 1px;
  background: linear-gradient(to right, var(--wink-linie), transparent);
}
.buehne.is-kino .scrollwink i::after {
  background: linear-gradient(to right, transparent, var(--wink), transparent);
  animation-name: winkQuer;
}
@keyframes winkQuer {
  0%   { transform: translateX(-100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

#versprechen { padding-block: clamp(120px, 18vw, 260px); }
.versprechen-satz {
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 62px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.021em;
  max-width: 20ch;
  margin: 0 auto;
  text-align: left;
  text-wrap: pretty;
}
.versprechen-satz .w {
  color: color-mix(in srgb, var(--text) 17%, transparent);
  transition: color 0.1s linear;
}
.versprechen-satz .w.hell { color: var(--text); }
.versprechen-satz .w.blau { color: var(--accent); }

.versprechen-satz:not(.geteilt) { color: var(--text); }

#spiele { overflow: hidden; }

.wand {
  margin-top: clamp(48px, 6vw, 78px);
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.bahn {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  width: max-content;
  will-change: transform;
}

.kachel {
  position: relative;
  flex: 0 0 auto;
  width: clamp(124px, 13vw, 186px);
  aspect-ratio: 2 / 3;
  border-radius: clamp(10px, 1vw, 15px);
  overflow: hidden;
  background: var(--kachel-grund);
  box-shadow: var(--schatten-flach);
  transition: transform 0.34s var(--ease), box-shadow 0.34s var(--ease);
  transform-style: preserve-3d;
}
.kachel img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  
  filter: var(--kachel-filter);
  transition: filter 0.34s var(--ease), transform 0.5s var(--ease);
}
.kachel::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--kachel-kante);
  opacity: 1;
  transition: opacity 0.34s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .kachel:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: var(--schatten-bild);
  }
  .kachel:hover img { filter: none; transform: scale(1.06); }
  .kachel:hover::after { opacity: 0; }
}

.bahn-zieh { cursor: grab; }
.bahn-zieh.zieht { cursor: grabbing; }
.bahn-zieh.zieht .kachel { pointer-events: none; }

.wand-fuss {
  margin: clamp(34px, 4vw, 54px) auto 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-faint);
  text-align: center;
}

.orte-nachweis {
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  text-align: left;
}
.orte-nachweis > div { min-width: 0; }
.orte-nachweis dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.orte-nachweis dd {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
  text-wrap: pretty;
}
.orte-nachweis a { color: var(--accent); text-decoration: none; }
.orte-nachweis a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .orte-nachweis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#orte { overflow: clip; }

.orte-band {
  --spalt: clamp(16px, 2.2vw, 34px);
  margin: clamp(44px, 5.5vw, 82px) auto 0;
  padding: 0 var(--wrap-pad);
  max-width: var(--weit);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spalt);
  align-items: start;
}

.ort:nth-child(2n) { margin-top: clamp(28px, 5vw, 88px); }

.ort:last-child:nth-child(odd) { grid-column: 1 / -1; }

.ort { margin: 0; }

.ort-rahmen {
  position: relative;
  overflow: hidden;
  border-radius: clamp(14px, 1.5vw, 22px);
  background: var(--kachel-grund);
  aspect-ratio: 3 / 2;
  box-shadow: var(--schatten-bild);
  
  outline: 1px solid var(--karte-kante);
  outline-offset: -1px;
}

.ort-rahmen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
  transform: scale(1.10);
  will-change: transform;
}

.ort figcaption {
  display: grid;
  gap: 8px;
  padding: clamp(16px, 1.6vw, 24px) 4px 0;
}

.ort-name {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

.ort figcaption p {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  color: var(--text-dim);
}

.ort-spiel {
  justify-self: start;
  margin-top: 2px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  background: var(--karte-a);
  border: 1px solid var(--karte-kante);
}

@media (max-width: 860px) {
  .orte-band { grid-template-columns: 1fr; }
  .ort:nth-child(2n) { margin-top: 0; }
}

.stapel {

  --stapel-halt: clamp(96px, 20vh, 220px);
  --stapel-stufe: 14px;

  margin-top: clamp(40px, 5vw, 70px);
  display: grid;
  gap: clamp(18px, 2vw, 30px);

}

.stapel-auslauf {
  
  height: clamp(220px, 42vh, 420px);
}

.stapelkarte {
  position: sticky;
  top: var(--stapel-halt);
  border-radius: var(--r-lg);
  overflow: hidden;
  
  background: linear-gradient(172deg, var(--karte-a), var(--karte-b) 74%);
  box-shadow: inset 0 0 0 1px var(--karte-kante),
              var(--schatten-flach), var(--schatten-tief);
  transform-origin: 50% 0%;
  will-change: transform;
}

.stapelkarte-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 3.4vw, 52px);
  text-align: left;
}

.stapelkarte:nth-of-type(even) .stapelkarte-inhalt {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
}
.stapelkarte:nth-of-type(even) .stapelkarte-inhalt > div { order: 2; }
.stapelkarte:nth-of-type(even) figure { order: 1; }

.stapelkarte .kind {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.stapelkarte h3 { margin: 0 0 14px; }
.stapelkarte p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--text-faint);
  max-width: 44ch;
}
.stapelkarte p a { color: var(--accent); text-decoration: none; }
.stapelkarte p a:hover { text-decoration: underline; }

.stapelkarte figure {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--schatten-bild);
}

.stapelkarte figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--bild-kante);
  pointer-events: none;
}
.stapelkarte figure img { display: block; width: 100%; height: auto; }

.stapelkarte:nth-child(2) { top: calc(var(--stapel-halt) + var(--stapel-stufe)); }
.stapelkarte:nth-child(3) { top: calc(var(--stapel-halt) + var(--stapel-stufe) * 2); }
.stapelkarte:nth-child(4) { top: calc(var(--stapel-halt) + var(--stapel-stufe) * 3); }
.stapelkarte:nth-child(5) { top: calc(var(--stapel-halt) + var(--stapel-stufe) * 4); }

.klickfenster {
  --app-akzent: #8b7cf8;
  --app-akzent-tief: #6f5ce8;
  max-width: 720px;
  margin: clamp(40px, 5vw, 66px) auto 0;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(70% 90% at 8% 0%, rgba(112, 92, 236, 0.16), transparent 60%),
    radial-gradient(60% 80% at 100% 110%, rgba(0, 113, 227, 0.10), transparent 62%),
    linear-gradient(172deg, #121218, #0b0b10 80%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09),
              var(--schatten-flach), var(--schatten-tief);
}
.klickfenster-leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.klickfenster-leiste i {
  width: 11px; height: 11px; border-radius: 50%;
}
.klickfenster-leiste i:nth-child(1) { background: #ff5f57; }
.klickfenster-leiste i:nth-child(2) { background: #febc2e; }
.klickfenster-leiste i:nth-child(3) { background: #28c840; }
.klickfenster-leiste span {
  margin-left: 8px;
  font-size: 13px;
  color: rgba(245, 245, 247, 0.55);
}

.klickfenster-koerper { padding: clamp(22px, 3vw, 34px); }

.schrittliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.schrittliste li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 12px;
  border-radius: 11px;
  font-size: 16px;
  color: rgba(245, 245, 247, 0.55);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.schrittliste li .haken {
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
  display: grid; place-items: center;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.schrittliste li .haken svg {
  width: 12px; height: 12px;
  stroke: #fff; stroke-width: 2.4;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s var(--ease), transform 0.36s var(--ease-form);
}
.schrittliste li .zeit {
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  color: rgba(245, 245, 247, 0.45);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.schrittliste li.laeuft { background: rgba(255, 255, 255, 0.05); color: #f5f5f7; }
.schrittliste li.laeuft .haken { box-shadow: inset 0 0 0 1.5px var(--app-akzent); }
.schrittliste li.fertig { color: #f5f5f7; }
.schrittliste li.fertig .haken { background: var(--app-akzent-tief); box-shadow: inset 0 0 0 1.5px var(--app-akzent-tief); }
.schrittliste li.fertig .haken svg { opacity: 1; transform: none; }
.schrittliste li.fertig .zeit { opacity: 1; }

.klickbalken {
  margin-top: 20px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.klickbalken i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-akzent-tief), var(--app-akzent));
  transition: width 0.35s linear;
}

.klickfuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.klickfuss .zustand { font-size: 14.5px; color: rgba(245, 245, 247, 0.55); }

.klickfenster .btn-primary {
  background: linear-gradient(180deg, var(--app-akzent), var(--app-akzent-tief));
  color: #fff;
}
.klickfenster .btn-primary:hover {
  background: linear-gradient(180deg, #9a8cfa, #7b69f0);
  color: #fff;
}

.klickzustand {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kz {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: rgba(245, 245, 247, 0.45);
  transition: color 0.4s var(--ease);
}
.kz i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(245, 245, 247, 0.25);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.klickfenster:has(.schrittliste li:nth-child(1).fertig) .kz[data-kz="1"],
.klickfenster:has(.schrittliste li:nth-child(2).fertig) .kz[data-kz="2"],
.klickfenster:has(.schrittliste li:nth-child(3).fertig) .kz[data-kz="3"] {
  color: rgba(245, 245, 247, 0.75);
}
.klickfenster:has(.schrittliste li:nth-child(1).fertig) .kz[data-kz="1"] i,
.klickfenster:has(.schrittliste li:nth-child(2).fertig) .kz[data-kz="2"] i,
.klickfenster:has(.schrittliste li:nth-child(3).fertig) .kz[data-kz="3"] i {
  background: #30d158;
  box-shadow: 0 0 8px rgba(48, 209, 88, 0.55);
}

.klickfenster:not(.js) .schrittliste li { color: #f5f5f7; }
.klickfenster:not(.js) .schrittliste li .haken { background: var(--app-akzent-tief); box-shadow: inset 0 0 0 1.5px var(--app-akzent-tief); }
.klickfenster:not(.js) .schrittliste li .haken svg { opacity: 1; transform: none; }
.klickfenster:not(.js) .klickbalken i { width: 100%; }
.klickfenster:not(.js) .klickfuss .btn { display: none; }
.klickfenster:not(.js) .kz { color: rgba(245, 245, 247, 0.75); }
.klickfenster:not(.js) .kz i { background: #30d158; box-shadow: 0 0 8px rgba(48, 209, 88, 0.55); }

.zahlen {
  margin-top: clamp(44px, 5.4vw, 80px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px) clamp(20px, 2.6vw, 44px);
  text-align: center;
}

.zahl { min-width: 0; }

.zahl .num {
  display: block;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(52px, 6.4vw, 88px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  
  color: var(--text);
}
.zahl .num .unit {
  font-size: 0.34em;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: -0.01em;
  margin-left: 0.08em;
  vertical-align: baseline;
  
  white-space: nowrap;
}
.zahl dd { margin: 0; }
.zahl .lab {
  display: block;
  margin-top: 14px;
  font: 600 15.5px/1.3 var(--display);
  letter-spacing: -0.008em;
  color: var(--text);
}
.zahl .fuss {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-faint);
  text-wrap: pretty;
  max-width: 24ch;
  margin-inline: auto;
}
@media (max-width: 820px) {
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.urteil {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  text-align: left;
}

.urteil > div { min-width: 0; }
.urteil-ja   { --urteil-ton: var(--ja); }
.urteil-nein { --urteil-ton: var(--nein); }
.urteil h3 {
  font-size: clamp(20px, 2vw, 26px);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.urteil-siegel {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  flex: none;
  color: #fff;
  background: var(--urteil-ton);
}
.urteil-siegel svg { width: 15px; height: 15px; }
.urteil ul { list-style: none; margin: 0; padding: 0; display: grid; }
.urteil li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-dim);
  padding: 15px 2px;
}
.urteil li + li { border-top: 1px solid var(--line); }
.urteil li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--urteil-ton); }

.fussnote {
  margin: clamp(30px, 4vw, 44px) auto 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-faint);
  text-align: center;
}
.fussnote a, .wand-fuss a { color: var(--accent); text-decoration: none; }
.fussnote a:hover, .wand-fuss a:hover { text-decoration: underline; }

.notice {
  margin: clamp(30px, 4vw, 48px) auto 0;
  max-width: 66ch;
  padding: 20px 24px;
  
  border: 0;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-faint);
  text-align: left;
}
.notice strong { color: var(--text); font-weight: 600; }
.notice a { color: var(--accent); text-decoration: none; }
.notice a:hover { text-decoration: underline; }

#download {
  text-align: center;
  overflow: hidden;
}
#download .wrap { position: relative; z-index: 1; }

#download::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
  background: radial-gradient(46% 54% at 50% 50%, var(--accent-weak), transparent 70%);
  pointer-events: none;
}
#download h2 { max-width: 16ch; margin: 0 auto; }

.download-symbol {
  display: block;
  width: clamp(76px, 8vw, 104px);
  height: auto;
  margin: 0 auto clamp(22px, 2.6vw, 34px);
  border-radius: 22.5%;
  box-shadow: var(--schatten-bild);
}
@media (prefers-reduced-motion: no-preference) {
  .download-symbol.is-in { animation: symbol-schweben 7s ease-in-out infinite; }
}
@keyframes symbol-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.kapitel {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.kapitel.an { opacity: 1; }
.kapitel a {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--punkt);
  position: relative;
  transition: background-color 0.26s var(--ease), transform 0.26s var(--ease-form);
}
.kapitel a:hover { transform: scale(1.4); background: var(--punkt-hover); }
.kapitel a.hier { background: var(--accent); transform: scale(1.3); }
.kapitel a span {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text);
  background: var(--platte);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--glas-kante), var(--schatten-flach);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.kapitel a:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1180px) { .kapitel { display: none; } }

.reveal.will-reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }

.zeile-maske { display: block; overflow: hidden; }
.zeile-maske > .zeile-inhalt { display: block; will-change: transform; }

.adslot {
  margin: clamp(48px, 6vw, 84px) auto;
  border-radius: var(--r);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--karte-kante);
}
.adslot .label { color: var(--text-faint); }
.adslot .placeholder { border-color: var(--line-2); }

@media (min-width: 1100px) {
  .consent {
    inset: auto auto calc(20px + env(safe-area-inset-bottom)) 20px;
    width: min(430px, 38vw);
  }
}

.consent {
  background: var(--platte);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--glas-kante-2),
              var(--schatten-flach), var(--schatten-tief);
}
.consent h2 { color: var(--text); }
.consent p { color: var(--text-faint); }
.consent a { color: var(--accent); }

.consent .btn-ghost {
  background: var(--surface-2);
  color: var(--text);
}
.consent .btn-ghost:hover { background: var(--line); text-decoration: none; }

.progress { background: linear-gradient(90deg, var(--accent-tief), #4aa3ff); }

@media (max-width: 900px) {
  .stapelkarte-inhalt { grid-template-columns: minmax(0, 1fr); text-align: left; }
  
  .stapelkarte figure,
  .stapelkarte:nth-of-type(even) figure { margin: 0; border-radius: 14px; order: 0; }
  .stapelkarte:nth-of-type(even) .stapelkarte-inhalt > div { order: 0; }
  .stapelkarte { position: static; }
  
  .stapel-auslauf { display: none; }
  .urteil { grid-template-columns: minmax(0, 1fr); }
  .versprechen-satz { max-width: none; }
  .akt-satz { margin-top: clamp(44px, 9vw, 72px); }
}

@media (max-width: 560px) {
  .klickfuss { flex-direction: column; align-items: stretch; }
  .klickfuss .btn { width: 100%; text-align: center; }
  .schrittliste li { grid-template-columns: 24px minmax(0, 1fr); }
  .schrittliste li .zeit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .buehne.is-kino { height: auto; }
  .buehne.is-kino .buehne-klebe { position: static; height: auto; display: block; padding: clamp(96px, 13vw, 150px) 0; }
  .buehne.is-kino .kino-canvas { display: none; }
  .buehne.is-kino .kino-text { position: static; display: block; }
  .buehne.is-kino .akt { grid-area: auto; }
  .buehne.is-kino .akt-held { position: static; padding-top: 0; }
  .buehne.is-kino .kino-geraet { display: block; }
  .buehne.is-kino .nur-kino { display: none; }
  .buehne.is-kino .scrollwink { position: static; transform: none; }
  .buehne.is-kino .akt-satz { position: static; padding-bottom: 0; margin: clamp(56px, 8vw, 96px) auto 0; opacity: 1 !important; transform: none !important; }
  .buehne.is-kino .kino-scharf { position: static; transform: none; opacity: 1 !important; margin: clamp(48px, 7vw, 90px) auto 0; }
  .bahn { transform: none !important; }
  .scrollwink i::after { animation: none; }
  .kapitel { display: none; }
  .stapelkarte { position: static; transform: none !important; }
  
  .stapel-auslauf { display: none; }
}

.tonschalter {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  position: relative;
  z-index: 2;
  justify-self: end;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.tonschalter:hover { background: var(--surface-2); color: var(--text); }
.tonschalter svg { width: 18px; height: 18px; grid-area: 1 / 1; }

.tonschalter svg { display: none; }
:root:not([data-farbe]) .tonschalter .z-system,
:root[data-farbe="hell"]   .tonschalter .z-hell,
:root[data-farbe="dunkel"] .tonschalter .z-dunkel { display: block; }

:root.ton-wechselt,
:root.ton-wechselt * ,
:root.ton-wechselt *::before,
:root.ton-wechselt *::after {
  transition: background-color 0.32s var(--ease),
              border-color 0.32s var(--ease),
              color 0.32s var(--ease),
              box-shadow 0.32s var(--ease),
              fill 0.32s var(--ease) !important;
}

@media (max-width: 640px) { .tonschalter { width: 30px; height: 30px; } }

.werk {
  position: relative;
  margin-top: clamp(40px, 5vw, 66px);
  padding: clamp(26px, 3.4vw, 52px) clamp(22px, 3.2vw, 56px);
  border-radius: var(--r-lg);
  background: linear-gradient(172deg, var(--karte-a), var(--karte-b) 74%);
  box-shadow: inset 0 0 0 1px var(--karte-kante), var(--schatten-flach);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  text-align: left;
}

.werk-knoten {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 96px;
}
.werk-glyph {
  position: relative;
  width: clamp(48px, 5vw, 60px);
  aspect-ratio: 1;
  margin-bottom: 12px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  background: var(--erhaben);
}
.glyph-fenster i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.glyph-fenster i::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 28%;
  height: 1.5px;
  background: var(--line-2);
}
.glyph-fenster i::after {
  content: "";
  position: absolute;
  left: 18%; top: 12%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line-2);
  box-shadow: 8px 0 0 var(--line), 16px 0 0 var(--line);
}
.glyph-chip i {
  font: 600 clamp(18px, 1.9vw, 23px)/1 var(--display);
  font-style: normal;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wk-name {
  font: 600 15.5px/1.25 var(--display);
  letter-spacing: -0.01em;
  color: var(--text);
}
.wk-sub {
  font-size: 12.5px;
  color: var(--text-faint);
}

.werk-bahnen {
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
  min-width: 0;
}
.werk-bahn {
  min-width: 0;
  transition: opacity 0.3s var(--ease);
}

.werk.heiss .werk-bahn:not(.aktiv) { opacity: 0.4; }

.bahn-fluss {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(14px, 1fr) minmax(112px, auto) minmax(14px, 1fr) minmax(96px, 150px);
  align-items: center;
  justify-items: center;
  gap: clamp(8px, 1vw, 14px);
  min-width: 0;
}
.bahn-text {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-faint);
  text-wrap: pretty;
  padding-inline: clamp(10px, 1.2vw, 20px);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}
.werk-bahn.aktiv .bahn-text { color: var(--text-dim); }
.bahn-fakt { white-space: nowrap; color: var(--text-dim); }
.bahn-fakt::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  margin: 0 8px 2.5px 2px;
  vertical-align: middle;
  background: var(--text-faint);
}

.bahn-von,
.bahn-nach {
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.25;
  color: var(--text-faint);
  white-space: nowrap;
}
.bahn-von { text-align: right; justify-self: end; }
.bahn-nach { color: var(--text); justify-self: start; }
.bahn-chip {
  padding: 7px clamp(10px, 1.3vw, 16px);
  border-radius: var(--r-pill);
  font: 600 clamp(12.5px, 1.2vw, 14.5px)/1.2 var(--display);
  letter-spacing: -0.008em;
  color: var(--text);
  background: var(--erhaben);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--schatten-flach);
  white-space: nowrap;
}

.bahn-linie {
  position: relative;
  justify-self: stretch;
  width: 100%;
  height: 1.5px;
  min-width: 14px;
  background: var(--line-2);
}
.bahn-pfeil::after {
  content: "";
  position: absolute;
  right: -1px; top: 50%;
  width: 6px; height: 6px;
  border-top: 1.5px solid var(--text-faint);
  border-right: 1.5px solid var(--text-faint);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 760px) {
  .werk {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .werk-bahn { width: 100%; }
  .bahn-fluss {
    grid-template-columns: minmax(64px, 1fr) minmax(10px, 24px) auto minmax(10px, 24px) minmax(64px, 1fr);
  }
  .bahn-von, .bahn-nach { white-space: normal; }
  .bahn-text { padding-inline: 0; }
}

.autopilot {
  margin-top: clamp(40px, 5vw, 66px);
  text-align: left;
}
.autopilot h3 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.autopilot-buehne {
  margin-top: clamp(26px, 3vw, 42px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.spielkachel {
  margin: 0;
  width: clamp(168px, 17vw, 218px);
  padding: 10px 10px 14px;
  border-radius: 18px;
  background: #16161a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--schatten-bild);
}
.spielkachel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.spielkachel figcaption { padding: 10px 4px 0; }
.sk-titel {
  display: block;
  font: 600 14px/1.3 var(--display);
  letter-spacing: -0.01em;
  color: #f5f5f7;
}
.sk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.sk-chips i {
  font-style: normal;
  font-size: 10.5px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: var(--r-pill);
  color: rgba(245, 245, 247, 0.72);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  white-space: nowrap;
}
.sk-chips .sk-bereit {
  color: #6fcf92;
  box-shadow: inset 0 0 0 1px rgba(48, 209, 88, 0.35);
  background: transparent;
}

.entscheidungen {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  counter-reset: halt;
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
}
.entscheidungen::before {
  content: "";
  position: absolute;
  left: 15px; top: 10px; bottom: 10px;
  width: 1.5px;
  background: linear-gradient(180deg,
      var(--text) var(--efuellt, 100%),
      var(--line) var(--efuellt, 100%));
}
.entscheidungen li {
  position: relative;
  counter-increment: halt;
  padding-left: 56px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-dim);
  text-wrap: pretty;
}
.entscheidungen li::before {
  content: counter(halt);
  position: absolute;
  left: 0; top: -2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 14px/1 var(--display);
  color: var(--bg);
  background: var(--text);
  box-shadow: 0 0 0 4px var(--bg);
}
.entscheidungen strong { color: var(--text); font-weight: 600; }

.entscheidungen.gesteuert li {
  transition: opacity 0.4s var(--ease);
}
.entscheidungen.gesteuert li::before {
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
}
.entscheidungen.gesteuert li:not(.an) { opacity: 0.45; }
.entscheidungen.gesteuert li:not(.an)::before {
  background: var(--bg);
  color: var(--text-faint);
  box-shadow: 0 0 0 4px var(--bg), inset 0 0 0 1.5px var(--line-2);
}

@media (max-width: 760px) {
  .autopilot-buehne { grid-template-columns: 1fr; justify-items: center; }
  .entscheidungen { justify-self: stretch; }
}

.kette-mehr { margin: clamp(22px, 2.4vw, 30px) 0 0; font-size: 16px; }
.kette-mehr a { color: var(--accent); text-decoration: none; font-weight: 500; }
.kette-mehr a:hover { text-decoration: underline; }

.wegkarte {
  position: relative;
  
  margin: clamp(40px, 5vw, 66px) auto 0;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  max-width: 100%;
  border-radius: var(--r-lg);
  background: linear-gradient(172deg, var(--karte-a), var(--karte-b) 74%);
  box-shadow: inset 0 0 0 1px var(--karte-kante), var(--schatten-flach);
  overflow: hidden;
}

.wegkarte::before,
.wegkarte::after {
  content: "";
  position: absolute;
  background: var(--line);
}
.wegkarte::before { left: 6%; right: 6%; top: 50%; height: 1px; }
.wegkarte::after  { top: 9%; bottom: 9%; left: 50%; width: 1px; }

.wk-achse i {
  position: absolute;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.wk-achse-x i:first-child { left: 14px; top: calc(50% + 9px); }
.wk-achse-x i:last-child  { right: 14px; top: calc(50% + 9px); }
.wk-achse-y i:first-child { left: calc(50% + 10px); top: 12px; }
.wk-achse-y i:last-child  { left: calc(50% + 10px); bottom: 12px; }

.wk-ort {
  position: absolute;
  left: var(--wx);
  top: var(--wy);
  transform: translate(-50%, 0);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 2px;
}
.wk-punkt {
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-bottom: 6px;
  background: var(--text);
}
.wk-ort b {
  font: 600 14.5px/1.2 var(--display);
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.wk-ort small {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

.wk-hier .wk-punkt {
  width: 15px; height: 15px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-weak);
}
.wk-hier b { color: var(--accent); font-size: 16px; }

.wegkarte.baut .wk-punkt,
.wegkarte.baut .wk-ort b,
.wegkarte.baut .wk-ort small { transition: none; }

.wegkarte.baut::before { transform: scaleX(0); }
.wegkarte.baut::after  { transform: scaleY(0); }
.wegkarte.baut .wk-achse i { opacity: 0; }
.wegkarte.baut.an::before {
  transform: scaleX(1);
  transition: transform 0.7s var(--ease) 0.05s;
}
.wegkarte.baut.an::after {
  transform: scaleY(1);
  transition: transform 0.7s var(--ease) 0.2s;
}
.wegkarte.baut.an .wk-achse i {
  opacity: 1;
  transition: opacity 0.5s var(--ease) 0.55s;
}

.wk-punkt { transition: transform 0.3s var(--ease-form), box-shadow 0.3s var(--ease); }
.wk-ort b, .wk-ort small { transition: color 0.25s var(--ease); }
.wk-ort.heiss .wk-punkt { transform: scale(1.35); }
.wk-ort.heiss b { color: var(--accent); }

@media (max-width: 700px) {
  .wegkarte { aspect-ratio: 4 / 3.4; }
  .wk-ort b { font-size: 12.5px; white-space: normal; max-width: 16ch; }
  .wk-ort small { display: none; }
  .wk-achse i { font-size: 9.5px; }
  
  .wegkarte .wk-ort:nth-child(4) { left: 19%; }
  .wegkarte .wk-ort:nth-child(5) { top: 60%; }
  .wegkarte .wk-hier { top: 68%; }
}

.wege-liste {
  margin-top: clamp(30px, 3.6vw, 48px);
  text-align: left;
  border-top: 1px solid var(--line);
}
.wegzeile {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1.6fr) minmax(150px, 0.8fr);
  gap: clamp(14px, 2vw, 34px);
  align-items: start;
  padding: clamp(18px, 2vw, 26px) clamp(12px, 1.4vw, 18px);
  margin-inline: calc(-1 * clamp(12px, 1.4vw, 18px));
  border-bottom: 1px solid var(--line);
  border-radius: 14px;
  transition: background-color 0.3s var(--ease);
}
.wegzeile.heiss { background-color: var(--surface); }
.wegzeile h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.wegzeile h3 span {
  display: block;
  margin-top: 3px;
  font: 400 12.5px/1.35 var(--sans);
  color: var(--text-faint);
}
.wegzeile p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
  text-wrap: pretty;
}

.wegzeile .weg-preis {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-content: start;
}
.wegzeile .weg-preis i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  color: var(--text-faint);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap;
}

.wegzeile-hier h3 { color: var(--accent); }
.wegzeile-hier h3::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin: 0 8px 1px 0;
  background: var(--accent);
}
@media (max-width: 760px) {
  .wegzeile { grid-template-columns: 1fr; gap: 8px; }
  .wegzeile .weg-preis { justify-content: flex-start; }
}

.fragen {
  margin-top: clamp(38px, 4.4vw, 60px);
  text-align: left;
  border-top: 1px solid var(--line);
}
.fragen details { border-bottom: 1px solid var(--line); }
.fragen summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 2.2vw, 26px) 52px clamp(20px, 2.2vw, 26px) 0;
  font-family: var(--display);
  font-size: clamp(17px, 1.65vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--text);
  transition: color 0.18s var(--ease);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary:hover { color: var(--accent); }
.fragen summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.fragen summary::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 30px; height: 30px;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  background: linear-gradient(var(--text-faint), var(--text-faint)) center / 13px 1.5px no-repeat;
  transition: box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
.fragen summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 30px; height: 30px;
  transform: translateY(-50%);
  background: linear-gradient(var(--text-faint), var(--text-faint)) center / 1.5px 13px no-repeat;
  transition: transform 0.26s var(--ease), opacity 0.26s var(--ease);
}
.fragen details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.fragen summary:hover::before {
  box-shadow: inset 0 0 0 1px var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
}
.fragen summary:hover::after {
  background-image: linear-gradient(var(--accent), var(--accent));
}
.fragen details > div { padding: 0 clamp(0px, 4vw, 56px) clamp(22px, 2.4vw, 30px) 0; }
.fragen details p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 68ch;
  text-wrap: pretty;
}
.fragen details p:last-child { margin-bottom: 0; }
.fragen details a { color: var(--accent); text-decoration: none; }
.fragen details a:hover { text-decoration: underline; }
.fragen details code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  word-break: break-word;
}

@media (prefers-reduced-motion: no-preference) {
  .fragen details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.34s var(--ease), content-visibility 0.34s allow-discrete;
  }
  .fragen details[open]::details-content { block-size: auto; }
}

.vorauss {
  list-style: none;
  margin: clamp(38px, 4.4vw, 58px) auto 0;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--r-lg);
  background: linear-gradient(172deg, var(--karte-a), var(--karte-b) 74%);
  box-shadow: inset 0 0 0 1px var(--karte-kante), var(--schatten-flach);
  overflow: hidden;
  text-align: center;
}
.vorauss li {
  min-width: 0;
  position: relative;
  padding: clamp(20px, 2.2vw, 28px) clamp(14px, 1.6vw, 22px);
}
.vorauss li + li::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: var(--karte-kante);
}
.vorauss strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
}
.vorauss span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-faint);
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .vorauss { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
  
  .vorauss li:nth-child(3)::before { display: none; }
  .vorauss li:nth-child(n+3)::after {
    content: "";
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: var(--karte-kante);
  }
}

.seitenkopf {
  padding: clamp(56px, 8vw, 110px) 0 clamp(30px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.seitenkopf h1 {
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 10px 0 0;
  text-wrap: balance;
}
.seitenkopf .lead {
  margin: clamp(16px, 2vw, 26px) 0 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 20.5px);
  line-height: 1.5;
  color: var(--text-faint);
  text-wrap: pretty;
}
.seitenkopf .cta-row { justify-content: flex-start; margin-top: 26px; }

.kopfzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(24px, 3vw, 38px);
}
.kopfzahlen div { display: grid; gap: 3px; }
.kopfzahlen dt, .kopfzahlen .k {
  font: 600 13px/1.2 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kopfzahlen dd, .kopfzahlen .v {
  margin: 0;
  font: 600 clamp(17px, 1.6vw, 21px)/1.2 var(--display);
  letter-spacing: -0.015em;
  color: var(--text);
}

.block { padding-block: clamp(34px, 4.4vw, 68px); }
.block > h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 10px;
}
.block > .sub {
  margin: 0 0 clamp(22px, 2.6vw, 36px);
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-faint);
  text-wrap: pretty;
}
.block > p, .block > ul, .block > ol { max-width: 66ch; }

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.eintrag {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 14px;
  align-content: start;
  padding: clamp(18px, 1.8vw, 24px);
  border-radius: var(--r);
  background: linear-gradient(172deg, var(--karte-a), var(--karte-b) 74%);
  box-shadow: inset 0 0 0 1px var(--karte-kante);
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.eintrag .zeichen {
  grid-row: 1 / span 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--karte-kante);
  font-size: 16px;
  line-height: 1;
}
.eintrag strong {
  font: 600 16px/1.35 var(--display);
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: pretty;
}
.eintrag em {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-faint);
  text-wrap: pretty;
}
@media (hover: hover) {
  .eintrag:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px var(--karte-kante), var(--schatten-tief);
  }
}

.eintrag-hart { box-shadow: inset 0 0 0 1px var(--karte-kante), inset 3px 0 0 var(--nein); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(20px, 2.4vw, 30px); }
.chip {
  padding: 8px 15px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--karte-kante);
  font: 590 14px/1 var(--sans);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] {
  background: var(--accent-tief);
  color: #fff;
  box-shadow: none;
}
.eintrag[hidden] { display: none; }

.faq { border-top: 1px solid var(--line); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 2px;
  font: 600 17px/1.4 var(--display);
  letter-spacing: -0.014em;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--accent); }
.faq .antwort { padding: 0 2px 22px; max-width: 68ch; }
.faq .antwort p { margin: 0 0 10px; color: var(--text-faint); line-height: 1.6; }
.faq .antwort p:last-child { margin-bottom: 0; }
.faq .antwort a { color: var(--accent); text-decoration: none; }
.faq .antwort a:hover { text-decoration: underline; }

.hinweis {
  display: grid;
  gap: 10px;
  padding: clamp(24px, 2.8vw, 40px);
  border-radius: var(--r-lg);
  background: linear-gradient(172deg, var(--karte-a), var(--karte-b) 74%);
  box-shadow: inset 0 0 0 1px var(--karte-kante);
  max-width: 74ch;
}
.hinweis h3 {
  margin: 0;
  font: 600 clamp(19px, 2vw, 24px)/1.25 var(--display);
  letter-spacing: -0.018em;
  color: var(--text);
}
.hinweis p { margin: 0; color: var(--text-faint); line-height: 1.6; }
.hinweis a { color: var(--accent); text-decoration: none; }
.hinweis a:hover { text-decoration: underline; }
.hinweis .cta-row { justify-content: flex-start; margin-top: 8px; }

.leerfilter {
  margin: 6px 0 0;
  color: var(--text-faint);
  font-size: 15.5px;
}

@media (max-width: 560px) {
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .eintrag { grid-template-columns: 30px minmax(0, 1fr); }
}

.zeigen {
  margin: clamp(26px, 3vw, 44px) 0;
  display: grid;
  gap: 10px;
}

.zeigen-voll {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--schatten-bild);
}
.zeigen-voll img { display: block; width: 100%; height: auto; }

.marke {
  position: absolute;
  left: calc((var(--mx) - var(--mw) / 2) * 100%);
  top: calc((var(--my) - var(--mh) / 2) * 100%);
  width: calc(var(--mw) * 100%);
  height: calc(var(--mh) * 100%);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 113, 227, 0.5);
  pointer-events: none;
}

.zeigen-lupe {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  aspect-ratio: calc(var(--zw, var(--mw)) / var(--zh, var(--mh)) * var(--bild));
  box-shadow: inset 0 0 0 1px var(--karte-kante), var(--schatten-flach);
  background: var(--kachel-grund);
}
.zeigen-lupe img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% / var(--zw, var(--mw)));
  height: auto;
  max-width: none;
  transform: translate(calc(var(--zx, var(--mx)) * -100%),
                       calc(var(--zy, var(--my)) * -100%));
}

.zeigen figcaption {
  margin: 2px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-faint);
  text-wrap: pretty;
}
.zeigen figcaption b { color: var(--text); font-weight: 600; }

@media (max-width: 620px) {
  .zeigen-voll { display: none; }
}

.verlauf { padding: 42px 0 24px; max-width: 74ch; }

.fassung-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.fassung-nr {
  margin: 0;
  font: 600 clamp(30px, 3.4vw, 42px)/1 var(--display);
  letter-spacing: -0.03em;
  color: var(--text);
}
.fassung-datum {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--text-faint);
}

.fassung-art {
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font: 600 13.5px/1.3 var(--sans);
}

.fassung-teil { padding: clamp(30px, 3.4vw, 46px) 0 0; }
.fassung-teil::before { display: none; }
.fassung-teil > h2 {
  margin: 0 0 4px;
  font: 600 clamp(20px, 2vw, 25px)/1.25 var(--display);
  letter-spacing: -0.02em;
  color: var(--text);
}

.aenderungen { list-style: none; margin: 0; padding: 0; }
.aenderungen > li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.aenderungen > li:first-child { border-top: 0; padding-top: 10px; }
.aenderungen h3 {
  margin: 0 0 5px;
  font: 600 16.5px/1.35 var(--sans);
  letter-spacing: -0.008em;
  color: var(--text);
  text-wrap: balance;
}
.aenderungen p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-dim);
  max-width: 62ch;
}
.aenderungen a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.aenderungen a:hover { text-decoration: underline; }
.aenderungen code {
  font: 500 0.92em/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 5px;
}

.fassung-naechste { border-top: 1px solid var(--line); margin-top: 44px; }
.fassung-naechste p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 58ch;
}
.fassung-naechste .cta-row { justify-content: flex-start; margin-top: 20px; }

.docs-toc a { display: flex; align-items: baseline; gap: 10px; }
.docs-toc a span {
  margin-left: auto;
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  font-size: 13px;
}
.docs-toc a.is-active span { color: var(--accent); }

@media (max-width: 940px) {
  .verlauf { padding-top: 22px; max-width: none; }
  
  .docs-toc a span { display: none; }
}

.welten-strecke { display: none; }
.welten.hat-welten .welten-strecke {
  display: block;
  position: relative;
  height: 560svh;   
  margin-top: clamp(34px, 4.5vw, 68px);
}
.welten.hat-welten .welten-ersatz { display: none; }

.welten-klebe {
  position: sticky;
  top: 0;
  height: 100svh;
}

.welten-fenster {
  position: absolute;
  inset: 0;
  background: var(--bg);
  clip-path: inset(
    calc(var(--welt-zu, 1) * clamp(12px, 3.4vmin, 46px))
    round calc(var(--welt-zu, 1) * clamp(14px, 2.2vw, 30px)));
}

.welten-bilder {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.welt-foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}

.welt-foto:first-child { opacity: 1; }

.welt-aufnahme {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--z, 1));
  transform-origin: 50% 58%;
  will-change: transform;
}

.welt-foto .bild-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) .welt-foto .bild-hell { display: none; }
  :root:not([data-farbe="hell"]) .welt-foto .bild-dunkel { display: block; }
}
:root[data-farbe="dunkel"] .welt-foto .bild-hell { display: none; }
:root[data-farbe="dunkel"] .welt-foto .bild-dunkel { display: block; }

@media (prefers-reduced-motion: reduce) {
  .welt-aufnahme { transform: none; }
}

.welten-schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(var(--nebel), 0.90) 0%,
      rgba(var(--nebel), 0.62) 20%,
      rgba(var(--nebel), 0.10) 38%,
      transparent 52%),
    linear-gradient(to top,
      rgba(var(--nebel), 0.86) 0%,
      rgba(var(--nebel), 0.46) 14%,
      transparent 30%),
    
    radial-gradient(125% 88% at 50% 46%,
      transparent 52%,
      rgba(var(--nebel), 0.28) 78%,
      rgba(var(--nebel), 0.72) 100%);
}

.welten-titel {
  position: absolute;
  left: 50%;
  top: clamp(74px, 11vh, 148px);
  transform: translateX(-50%);
  width: min(720px, calc(100% - 2 * var(--wrap-pad)));
  text-align: center;
  pointer-events: none;
}

.welt-satz {
  position: absolute;
  left: 0; right: 0; top: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  opacity: 0;
  
  transform: translate(var(--x, 0), var(--y, 0px));
  will-change: opacity, transform;
}

.welt-name {
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--text);
}

.welt-text {
  font-size: clamp(14.5px, 1.35vw, 18px);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 44ch;
  margin: 0 auto;
  text-wrap: balance;
}

.welten-schild {
  position: absolute;
  right: clamp(16px, 3vw, 44px);
  bottom: clamp(18px, 3.4vh, 40px);
  height: 34px;
}

.welt-schild {
  position: absolute;
  right: 0; bottom: 0;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text-dim);
  background: var(--platte);
  border: 1px solid var(--karte-kante);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0px));
  will-change: opacity, transform;
}

.welten-marken {
  position: absolute;
  left: clamp(14px, 2.4vw, 36px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 15px;
  pointer-events: none;
}

.welten-marken li {
  position: relative;
  height: 6px;
  color: var(--text-faint);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.welten-marken li span {
  position: absolute;
  left: 15px;
  top: 50%;
  white-space: nowrap;
  transform: translate(-6px, -50%);
  opacity: 0;
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}

.welten-marken li i {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--punkt);
  transition: background 0.34s var(--ease), transform 0.34s var(--ease);
}

.welten-marken li.hier span { opacity: 1; transform: translate(0, -50%); }
.welten-marken li.hier i { background: var(--text); transform: scale(1.5); }

.welten-schalter {
  position: absolute;
  left: clamp(16px, 3vw, 44px);
  bottom: clamp(18px, 3.4vh, 40px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--karte-kante);
  background: var(--platte);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--text-dim);
  font: 500 12.5px/1 var(--sans);
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.welten-schalter:hover { color: var(--text); transform: translateY(-1px); }
.welten-schalter:active { transform: translateY(0); }

.welten-schalter-punkt {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.55;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease),
              opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
:root[data-farbe="dunkel"] .welten-schalter-punkt,
.welten-schalter[data-an] .welten-schalter-punkt {
  background: #ffc478;
  border-color: #ffc478;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(255, 176, 88, 0.20), 0 0 16px 3px rgba(255, 168, 72, 0.55);
}

@media (max-width: 760px) {
  .welten.hat-welten .welten-strecke { height: 480vh; }
  .welten-marken { display: none; }
  .welten-titel { top: clamp(58px, 8vh, 96px); }
  .welten-schild { right: auto; left: 50%; bottom: 74px; }
  .welt-schild { right: auto; left: 0; --x: -50%; }
  .welten-schalter { left: 50%; transform: translateX(-50%); }
  .welten-schalter:hover { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .welten .welten-strecke { display: none !important; }
  .welten .welten-ersatz { display: grid !important; }
}

.ort-rahmen .bild-dunkel { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) .ort-rahmen .bild-hell { display: none; }
  :root:not([data-farbe="hell"]) .ort-rahmen .bild-dunkel { display: block; }
}

:root[data-farbe="dunkel"] .ort-rahmen .bild-hell { display: none; }
:root[data-farbe="dunkel"] .ort-rahmen .bild-dunkel { display: block; }

.welten-ersatz .ort-rahmen {
  background: transparent;
  outline: none;
  box-shadow: none;
}