/* ==========================================================================
   Einstiegsprodukt – Bewegung (Design 2.1, Test)
   Gleiche Designsprache wie 2.0. Versteckt wird nur, wenn motion.js läuft
   (Klasse .has-motion auf <html>) – ohne JS ist alles sofort sichtbar.
   ========================================================================== */

/* ---------- Fortschrittsbalken ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 1001; height: 2px; background: #fff; mix-blend-mode: difference; transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }

/* ---------- Einstieg der Kopfzeile ---------- */
.has-motion .site-header__bar { animation: ep-drop .9s var(--ease) both; }
@keyframes ep-drop { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Wörter aus einer Maske heben ---------- */
.m-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.has-motion .m-words .w > span { display: inline-block; translate: 0 108%; transition: translate 1s var(--ease); transition-delay: calc(var(--i) * 42ms + var(--d, 0ms)); }
.has-motion .m-words.is-in .w > span { translate: 0 0; }
.has-motion .hero__title { animation: none; }
.has-motion .hero__title .w > span { transition-duration: 1.15s; transition-delay: calc(var(--i) * 55ms + 120ms); }

/* ---------- Scroll-Einblendungen ---------- */
.has-motion .m-fade { opacity: 0; transition: opacity 1.1s ease var(--d, 0ms); }
.has-motion .m-rise { opacity: 0; translate: 0 44px; scale: .985; transition: opacity .9s ease var(--d, 0ms), translate 1.1s var(--ease) var(--d, 0ms), scale 1.1s var(--ease) var(--d, 0ms); }
.has-motion .m-wipe > * { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease) var(--d, 0ms); }
.has-motion .m-fade.is-in, .has-motion .m-rise.is-in { opacity: 1; translate: 0 0; scale: 1; }
.has-motion .m-wipe.is-in > * { clip-path: inset(0 0 0 0); }

/* ---------- Hero: Lichtkegel, Korn, Parallax ---------- */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, .1), transparent 62%); transition: background-position .2s; }
.hero::before { content: ""; position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .07; 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"); }
@media (prefers-reduced-motion: no-preference) {
	.hero::before { animation: ep-grain 1.2s steps(6) infinite; }
}
@keyframes ep-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, 1%); } 100% { transform: translate(0, 0); } }
.has-motion .hero__bg img { transform: scale(1.08); will-change: transform; }
.has-motion .about__bg { overflow: hidden; }
.has-motion .about__bg img { transform: scale(1.12); will-change: transform; }

/* ---------- Buttons: Glanz beim Überfahren ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); translate: -120% 0; transition: translate .9s var(--ease); pointer-events: none; }
.btn:hover::after, .btn:focus-visible::after { translate: 120% 0; }

/* ---------- Karten: leichtes Kippen zur Maus ---------- */
.m-tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), box-shadow .4s ease, border-color .25s ease; will-change: transform; }
.m-tilt:hover { transition-duration: .15s, .4s, .25s; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .28); }

/* ---------- Vergleich: umlaufende Lichtkante an der „mit“-Karte ---------- */
@property --ep-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.compare__col--mit { position: relative; }
.compare__col--mit::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ep-angle), transparent 0 62%, rgba(43, 42, 43, .7) 80%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (prefers-reduced-motion: no-preference) {
	.compare__col--mit::before { animation: ep-spin 6s linear infinite; }
}
@keyframes ep-spin { to { --ep-angle: 360deg; } }

/* ---------- Ablauf: Nummern füllen sich mit Nachdruck ---------- */
.timeline__num { transition: background-color .5s ease, color .5s ease, scale .5s var(--ease); }
.timeline__item.is-done .timeline__num { scale: 1.08; }

/* ---------- Footer-Wortmarke: etwas kräftiger, da sie sich jetzt aufzieht ---------- */
.has-motion .site-footer__mark { opacity: .32; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	.m-tilt { transform: none; }
	.btn::after { display: none; }
}

/* Schatten nicht pro Wort (würde von den Wort-Masken abgeschnitten), sondern auf die ganze Zeile */
.has-motion .hero__title { text-shadow: none; filter: drop-shadow(0 2px 22px rgba(0, 0, 0, .35)); }