/* ========================================================================== RAMPENLICHT — Motion-Ebene Greift ausschließlich, wenn motion.js die Klasse .motion an setzt. Ohne JavaScript und unter prefers-reduced-motion ist die Seite exakt die, die sie ohne diese Datei wäre — kein Element bleibt unsichtbar oder versetzt. Nur transform und opacity. Zwei Signatur-Momente, der Rest ist zurückhaltend. ========================================================================== */ /* --- Signatur 1: „Der Auftritt" ------------------------------------------- Das System hat genau eine große Geste: den harten Bühnenwechsel. Also tritt an jeder Bandgrenze die Überschrift auf — Zeile für Zeile aus der Maske, wie ein Vorhang, der die Kante freigibt. Nichts anderes bewegt sich dabei. */ /* Das Polster verhindert, dass die Maske Unterlängen und Umlautpunkte kappt; der negative Rand hält den Abstandsrhythmus des Systems unverändert. */ /* Nur die Blockachse anfassen: margin-inline bleibt bei auto, sonst verliert jede zentrierte Überschrift ihre Mitte. */ .motion .m-rise { display: block; overflow: hidden; padding-block: .14em; margin-block: -.14em; } .motion .m-rise > span { display: block; transform: translateY(105%); transition: transform 620ms var(--ease); } .motion .m-rise.is-in > span { transform: translateY(0); } .motion .m-rise:nth-of-type(2) > span { transition-delay: 70ms; } .motion .m-rise:nth-of-type(3) > span { transition-delay: 140ms; } /* --- Signatur 2: „Die Gegenrechnung" -------------------------------------- Die Seite beweist genau eine Sache: gemessene Ersparnis. Also zählen die vier Case-Zahlen und die Ø-Zahl hoch, und die Gewinner-Spalte des Modellvergleichs zieht ihren Rahmen von oben nach unten zu. */ .motion .m-count { font-variant-numeric: tabular-nums; } .motion .m-draw { position: relative; } .motion .m-draw::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); box-shadow: inset 0 0 0 2px var(--save-ink); clip-path: inset(0 0 100% 0); transition: clip-path 760ms var(--ease); pointer-events: none; } .motion .m-draw.is-in::after { clip-path: inset(0 0 0 0); } /* Solange gezeichnet wird, trägt ::after den Rahmen — der statische entfällt. */ .motion .m-draw { box-shadow: none !important; } /* --- Zurückhaltend: gestaffeltes Erscheinen ------------------------------- */ .motion .m-in { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); } .motion .m-in.is-in { opacity: 1; transform: none; } .motion .m-in[data-i='1'] { transition-delay: 70ms; } .motion .m-in[data-i='2'] { transition-delay: 140ms; } .motion .m-in[data-i='3'] { transition-delay: 210ms; } /* --- Sticky-Leiste fährt ein ---------------------------------------------- */ .motion .rl-sticky { transform: translateY(100%); transition: transform 420ms var(--ease); } .motion .rl-sticky.is-in { transform: none; } /* --- Reduced Motion: doppelt gesichert ------------------------------------ */ @media (prefers-reduced-motion: reduce) { .motion .m-rise > span, .motion .m-in, .motion .rl-sticky { transform: none !important; opacity: 1 !important; transition: none !important; } .motion .m-draw::after { clip-path: inset(0 0 0 0) !important; transition: none !important; } }