/* Motion-Ebene: greift nur mit GSAP (.has-motion) und ohne prefers-reduced-motion. */
@property --mp-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root {
  --mp-glow: rgb(232 102 27 / 28%);
  --mp-grain: 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)' opacity='.55'/%3E%3C/svg%3E");
}

::selection { background: var(--color-signal); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-signal); outline-offset: 3px; border-radius: 2px; }

/* Fortschrittslinie mit leuchtender Spitze */
.scroll-progress { box-shadow: 0 0 14px 1px var(--mp-glow); }

/* Hero: Gleisplan, Cursor-Glow, Eingangschoreografie */
.hero-glow { position: absolute; z-index: 0; top: 0; left: 0; width: 46rem; height: 46rem; margin: -23rem 0 0 -23rem; border-radius: 50%; background: radial-gradient(closest-side, var(--mp-glow), transparent); opacity: 0; pointer-events: none; transition: opacity 0.8s; }
.hero:hover .hero-glow { opacity: 0.9; }
.hero-track { position: absolute; z-index: 1; inset: auto 0 var(--hero-rail-height) 0; width: 100%; height: 6.5rem; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%); mask-image: linear-gradient(to bottom, transparent, #000 55%); }
.hero-track-rail { fill: none; stroke: rgb(255 255 255 / 42%); stroke-width: 1.6; }
.hero-track-rail.is-main { stroke: rgb(255 255 255 / 72%); }
.hero-track-sleepers path { fill: none; stroke: rgb(255 255 255 / 14%); stroke-width: 22; stroke-dasharray: 2 16; }
.hero-track-ticks line { stroke: var(--color-signal); stroke-width: 1.4; }
.hero-track-ticks text { fill: var(--color-steel-dark); font: 11px var(--font-mono); letter-spacing: 0.08em; }
.hero-track-dot { fill: var(--color-signal-hover); }
.hero-track-glow { fill: var(--color-signal); opacity: 0.4; filter: blur(5px); }
.hero-inner { position: relative; z-index: var(--z-hero-content); }
.has-motion .capture-card { animation: none; }
.capture-status span { animation: mp-blink 1.8s ease-in-out infinite; }
@keyframes mp-blink { 50% { opacity: 0.35; box-shadow: 0 0 0 5px transparent; } 0% { box-shadow: 0 0 0 0 var(--mp-glow); } }

/* SplitText-Zeilenmasken: Unterlängen nicht abschneiden */
.split-line, [class*="split-line"] { padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* Section-Labels: Signallinie zieht sich aus */
.has-motion .section-label::after { flex: none; width: 0; height: 2px; margin-left: 0.85rem; background: var(--color-signal); content: ""; transition: width 1s var(--ease-out) 0.15s; }
.has-motion .section-label.motion-in::after { width: 3rem; }

/* Buttons: Cursor-Glanz und rotierender Signalrand */
.button { position: relative; isolation: isolate; }
.has-motion .button-primary::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(9rem circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 34%), transparent 62%); opacity: 0; content: ""; transition: opacity var(--duration-base); }
.has-motion .button-primary:hover::before { opacity: 1; }
.has-motion .button-ghost::before { position: absolute; z-index: -1; inset: -1px; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--mp-angle), transparent 0 70%, var(--color-signal) 92%, transparent); opacity: 0; content: ""; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity var(--duration-base); }
.has-motion .button-ghost:hover::before, .has-motion .button-ghost:focus-visible::before { opacity: 1; animation: mp-spin 2.6s linear infinite; }
@keyframes mp-spin { to { --mp-angle: 360deg; } }

/* Produkt-Rahmen: Lichtreflex folgt dem Cursor */
.device-frame-shell::after, .capture-card::after { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(22rem circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / 13%), transparent 60%); opacity: 0; pointer-events: none; content: ""; transition: opacity var(--duration-base); }
.device-frame-shell:hover::after, .capture-card:hover::after { opacity: 1; }
.capture-card { position: relative; }
.device-frame--macbook, .device-frame--iphone { transform-style: preserve-3d; }

/* Fachbegriff-Ticker */
.term-ticker { position: relative; overflow: hidden; margin-top: var(--space-10); padding-block: var(--space-4); border-block: var(--border-thin) solid var(--color-line-soft); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.term-ticker-track { display: flex; width: max-content; will-change: transform; }
.term-ticker span { display: inline-flex; align-items: center; flex: none; padding-inline: var(--space-6); color: var(--color-steel); font-size: var(--text-sm); font-stretch: var(--label-stretch); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; }
.term-ticker span::after { width: 0.4rem; height: 0.4rem; margin-left: var(--space-12); background: var(--color-signal); transform: rotate(45deg); content: ""; }

/* Körnung für dunkle Flächen: nimmt digitalen Flat-Look */
@media (prefers-reduced-motion: no-preference) {
  .section-dark { position: relative; }
  .section-dark::before { position: absolute; z-index: 0; inset: 0; background-image: var(--mp-grain); background-size: 160px; opacity: 0.03; pointer-events: none; content: ""; }
  .section-dark > * { position: relative; z-index: 1; }
}

@media (max-width: 74rem) {
  .hero-track { height: 6rem; }
  .hero-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-track, .hero-glow, .term-ticker { display: none; }
}
.hero .section-label::after { display: none; }
@media (max-width: 48rem) { .has-motion .section-label::after { display: none; } }

/* Hero-Feinschliff: Platz für Gleisplan, Karte neben dem Motiv, Foto-Annotationen */
@media (min-width: 74.01rem) {
  .hero, .hero-inner { min-height: 52rem; }
  .hero-inner { padding-bottom: 11.5rem; }
  .capture-card { margin-bottom: 1rem; margin-right: 7rem; }
}
.has-motion .hero .reveal { transition: none; }
.has-motion .hero .capture-card.reveal { opacity: 0; }
.has-motion .hero-rail::before, .has-motion .hero-rail::after { content: none; }
.hero-track-ticks text { fill: rgb(255 255 255 / 55%); }
.hero-pins, .hero-scan { position: absolute; z-index: 1; inset: 0 0 var(--hero-rail-height) auto; width: var(--hero-media-width); pointer-events: none; }
.hero-scan { z-index: 1; width: 14rem; inset: 0 auto var(--hero-rail-height) 0; background: linear-gradient(90deg, transparent, rgb(232 102 27 / 28%) 70%, rgb(255 190 140 / 55%) 96%, transparent); opacity: 0; }
.hero-pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 0.7rem; }
.hero-pin.is-flipped { left: auto; right: calc(100% - var(--x)); flex-direction: row-reverse; }
.hero-pin-dot { position: relative; width: 0.7rem; height: 0.7rem; flex: none; border-radius: 50%; background: var(--color-signal); box-shadow: 0 0 0 3px rgb(11 13 12 / 55%); }
.hero-pin-dot::before, .hero-pin-dot::after { position: absolute; inset: -2px; border: 1.5px solid var(--color-signal); border-radius: 50%; content: ""; animation: mp-ring 2.6s ease-out infinite; }
.hero-pin-dot::after { animation-delay: 1.3s; }
@keyframes mp-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.6); opacity: 0; } }
.hero-pin-label { display: grid; gap: 0.1rem; padding: 0.45rem 0.75rem; border: var(--border-thin) solid rgb(255 255 255 / 20%); border-left: 2px solid var(--color-signal); border-radius: 0.35rem; background: rgb(11 13 12 / 82%); color: rgb(255 255 255 / 78%); font-size: 0.7rem; white-space: nowrap; }
.hero-pin-label strong { color: var(--color-paper); font-size: 0.74rem; letter-spacing: 0.04em; }
@media (max-width: 74rem) { .hero-pins, .hero-scan { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-pins, .hero-scan { display: none; } }