/* Effekt-Schicht der Startseite. Greift nur, wenn spektakel.js läuft (Klasse fx); ohne Skript bleibt die Seite unverändert. */
html.fx-lenis { scroll-behavior: auto; scroll-snap-type: none; }
html.fx-lenis body { overscroll-behavior-y: none; }
.fx-fortschritt { position: fixed; z-index: 90; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--orange), #ffd08a); pointer-events: none; }
.kopf { transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .25s; }
.kopf.fx-weg { transform: translateY(-100%); }

/* Hero: Lichtfleck folgt dem Zeiger */
.fx-glow { position: absolute; z-index: -1; left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--orange) 34%, transparent), transparent 72%); filter: blur(10px); will-change: transform; }
.hero:hover .fx-glow, .fx-glow.an { opacity: 1; }
.fx-wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-zeichen { display: inline-block; will-change: transform; }

/* Karten: Lichtkante und 3D-Neigung */
li.karte { position: relative; }
li.karte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--orange) 24%, transparent), transparent 60%); mix-blend-mode: normal; }
li.karte:hover::after { opacity: 1; }
.zahlen li { position: relative; }
.zahlen li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--orange) 20%, transparent), transparent 60%); }
.zahlen li:hover::after { opacity: 1; }

/* Laufband mit Geschwindigkeitsverzerrung */
.fx-band { overflow: hidden; padding: clamp(18px, 3vw, 34px) 0; border-block: 1px solid var(--line); background: var(--surface); user-select: none; }
.fx-band-spur { display: flex; width: max-content; will-change: transform; }
.fx-band-spur span { flex: none; font-weight: 900; font-size: clamp(34px, 7vw, 92px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; padding-right: .5em;
  color: transparent; -webkit-text-stroke: 2px var(--ink); }
.fx-band-spur span:nth-child(even) { color: var(--orange); -webkit-text-stroke: 0; }

/* Zeiger-Ring */
.fx-ring { position: fixed; z-index: 300; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid var(--orange); transition: opacity .3s, width .25s, height .25s, margin .25s, background .25s; mix-blend-mode: normal; }
.fx-ring.an { opacity: .9; }
.fx-ring.gross { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: color-mix(in srgb, var(--orange) 18%, transparent); }
.fx-punkt { position: fixed; z-index: 301; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--orange); pointer-events: none; opacity: 0; transition: opacity .3s; }
.fx-punkt.an { opacity: 1; }

/* Planungsraster: Balken wachsen ein */
.fx-balken { transform-origin: 0 50%; }
.fx-wortfuell { opacity: .22; }
@media (hover: none), (pointer: coarse) { .fx-ring, .fx-punkt, .fx-glow { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .fx-ring, .fx-punkt, .fx-glow, .fx-fortschritt, .fx-band { display: none !important; } }