/* ================================================================== AssetShield-X (ASX) · asx-bewegung.css Bausteinsatz für Bewegung und Reaktion · Auftrag REFC-041 · 26.08.2026 WOZU DIESE DATEI DA IST Die Webseiten sollen in Bewegung und Reaktion dem Vorbild von Apple folgen (Masterplan v37, Abschnitt 6, verbindlich seit 24.08.2026): ruhige Bewegung, viel Weissraum, ein Gedanke je Bildhoehe, Inhalte erscheinen beim Blaettern nacheinander. Nicht in Farben und Schaltflaechen - die bleiben unveraendert die sieben Hausfarben. Diese Datei haengt an KEINER einzelnen Seite. Sie wird zusammen mit asx-bewegung.js eingebunden und wirkt ueber data-Merkmale im HTML. Eine Seite, die keine data-Merkmale traegt, sieht mit dieser Datei genauso aus wie ohne sie. DIE FÜNF BAUSTEINE data-erscheinen Ein Abschnitt erscheint beim Hereinblaettern. data-staffel Die Punkte darin erscheinen nacheinander. data-groesser Ein Bild wird beim Blaettern ruhig groesser. data-halten Eine Überschrift haelt weich am oberen Rand. data-aufklappen Weicher Wechsel beim Öffnen und Schliessen. DREI REGELN, DIE NIE GEBROCHEN WERDEN 1. OHNE JAVASCRIPT IST ALLES DA. Jeder Anfangszustand, der etwas unsichtbar macht, steht ausschliesslich unter .asx-bewegung. Diese Klasse setzt asx-bewegung.js selbst an , als erste Handlung. Faellt JavaScript aus, wird die Klasse nie gesetzt, keine einzige Regel dieser Datei greift, und die Seite steht vollstaendig lesbar da (REFC-041 #Ad). 2. WENIGER BEWEGUNG HEISST KEINE BEWEGUNG. Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, sieht alle Inhalte sofort und vollstaendig. Das ist Pflicht, kein Zusatz (REFC-041 #Ac). Umgesetzt an zwei Stellen: hier unten im @media-Block und in asx-bewegung.js, das dann gar keine Beobachter erst anlegt. 3. NICHTS DRAENGT. Keine Countdown-Anzeigen, keine sich aufbauenden Zahlen, nichts Blinkendes, nichts Springendes. Die Zielgruppe steht in einer Trennungssituation und damit unter dem besonderen Schutz des § 4a Abs. 2 Nr. 3 UWG. Bewegung dient hier allein der Ruhe, nie der Aufmerksamkeit. DIE EINE GESTALTUNGSREGEL, DIE BEIM MESSEN ENTSTANDEN IST WAS BEIM LADEN SCHON IM BILD STEHT, BEWEGT SICH NICHT. Der erste Bildschirm bekommt kein data-erscheinen und kein data-staffel. Zwei Gruende, beide in REFC-041 gemessen. Erstens: Er wird nicht hereingeblaettert, er ist schon da - eine Bewegung dort haette keinen Anlass. Zweitens, und das ist der harte Grund: Ein Inhalt, der zuerst unsichtbar ist, zaehlt fuer den Browser nicht als gezeichneter Inhalt. Auf der Startseite hat eine eingeblendete Eroeffnung den ersten sichtbaren Inhalt auf dem gedrosselten Telefonprofil von 680 auf 1624 Millisekunden verzoegert. Ohne sie sind es 720 Millisekunden. DIE MASSE Dauern zwischen 400 und 700 Millisekunden, weiche Beschleunigungskurven, keine Federeffekte, keine Drehungen (REFC-041 #Ab). Die Wege sind kurz: 16 bis 20 Pixel. Was weiter wandert, faellt auf - und genau das soll es nicht. ================================================================== */ :root { /* Die vier Dauern. Mehr gibt es nicht; wer eine fuenfte braucht, braucht in Wahrheit eine der vier. */ --bew-kurz: 400ms; --bew-mittel: 550ms; --bew-lang: 700ms; /* Eine einzige Kurve: langsam an, weich aus. Kein Überschwingen, keine Feder. cubic-bezier ohne Werte über 1 kann nicht federn. */ --bew-kurve: cubic-bezier(0.22, 0.61, 0.36, 1); /* Der Weg, den ein erscheinender Abschnitt zuruecklegt. */ --bew-weg: 18px; /* Der Abstand zwischen zwei gestaffelten Punkten. */ --bew-takt: 90ms; } /* ------------------------------------------------------------------ 1 · Erscheinen eines Abschnitts beim Hereinblättern ------------------------------------------------------------------ Der Anfangszustand steht unter .asx-bewegung - ohne JavaScript gibt es ihn nicht. asx-bewegung.js setzt data-sichtbar, sobald der Abschnitt in den Blick kommt. */ .asx-bewegung [data-erscheinen] { opacity: 0; transform: translateY(var(--bew-weg)); transition: opacity var(--bew-lang) var(--bew-kurve), transform var(--bew-lang) var(--bew-kurve); /* will-change bleibt bewusst aus: Es belegt Speicher auf der Grafikkarte fuer jeden Abschnitt der Seite, und die Bewegung ist zu klein, als dass sich das lohnte. */ } .asx-bewegung [data-erscheinen][data-sichtbar] { opacity: 1; transform: none; } /* Zwei Abwandlungen für Abschnitte, die von der Seite kommen sollen. Der Weg ist derselbe: kurz. */ .asx-bewegung [data-erscheinen="links"] { transform: translateX(calc(var(--bew-weg) * -1)); } .asx-bewegung [data-erscheinen="rechts"] { transform: translateX(var(--bew-weg)); } .asx-bewegung [data-erscheinen="ruhig"] { transform: none; } /* nur ein weiches Aufhellen */ /* ------------------------------------------------------------------ 2 · Gestaffeltes Erscheinen mehrerer Punkte ------------------------------------------------------------------ Am Elternelement steht data-staffel. Die Kinder erscheinen nacheinander im Takt von --bew-takt. Die Verzoegerung steht als --bew-nr am Kind und wird von asx-bewegung.js gesetzt. Warum die Zahl aus JavaScript kommt und nicht aus :nth-child(): Mit nth-child muesste die Datei fuer jede moegliche Anzahl eine eigene Regel enthalten. Eine Zahl als Eigenschaft kommt mit einer einzigen Regel aus und gilt fuer beliebig viele Punkte. */ .asx-bewegung [data-staffel] > * { opacity: 0; transform: translateY(var(--bew-weg)); transition: opacity var(--bew-lang) var(--bew-kurve), transform var(--bew-lang) var(--bew-kurve); transition-delay: calc(var(--bew-nr, 0) * var(--bew-takt)); } .asx-bewegung [data-staffel][data-sichtbar] > * { opacity: 1; transform: none; } /* Der letzte Punkt einer langen Reihe soll nicht ewig auf sich warten lassen. Ab dem achten wird nicht weiter gestaffelt; das steuert asx-bewegung.js, indem es --bew-nr dort nicht weiter erhoeht. */ /* ------------------------------------------------------------------ 3 · Ruhiges Größerwerden eines Bildes beim Blättern ------------------------------------------------------------------ asx-bewegung.js setzt --bew-mass zwischen 1 und dem Hoechstwert, je nachdem, wie weit das Bild durch das Bild gewandert ist. Es gibt hier bewusst keine transition: Der Wert aendert sich mit dem Blaettern selbst, und eine Überblendung darüber wuerde nachziehen und traege wirken. Der Hoechstwert ist 1.06. Sechs Prozent sind zu sehen und fallen nicht auf; zehn faellt auf. */ .asx-bewegung [data-groesser] { --bew-mass: 1; transform: scale(var(--bew-mass)); transform-origin: center center; } /* Der Rahmen schneidet ab, damit das groesser werdende Bild seine Nachbarn nicht verschiebt. Er gehoert an das Elternelement. */ .asx-bewegung [data-groesser-rahmen] { overflow: hidden; border-radius: 12px; /* Karten und Kästen: 12 Pixel, Hausmuster */ } /* ------------------------------------------------------------------ 4 · Weiches Festhalten einer Überschrift am oberen Rand ------------------------------------------------------------------ position: sticky macht die eigentliche Arbeit und braucht dafür kein JavaScript. asx-bewegung.js setzt allein data-haelt, sobald die Überschrift tatsaechlich klebt - daran haengt der weiche Wechsel des Untergrunds, damit die Schrift über dem durchlaufenden Inhalt lesbar bleibt. Ohne JavaScript klebt die Überschrift trotzdem. Sie bekommt dann nur keinen Untergrund - lesbar bleibt sie. */ .asx-halten { position: sticky; top: 0; z-index: 5; transition: background-color var(--bew-mittel) var(--bew-kurve), box-shadow var(--bew-mittel) var(--bew-kurve), padding var(--bew-mittel) var(--bew-kurve); } .asx-bewegung .asx-halten[data-haelt] { background: var(--white, #FFFFFF); box-shadow: 0 1px 0 rgba(184, 137, 60, 0.30); /* Antik-Gold, sehr leise */ padding-top: 12px; padding-bottom: 12px; } /* Auf dunklem Untergrund traegt der Kopf die dunkle Hausfarbe. */ .asx-bewegung .asx-halten.auf-dunkel[data-haelt] { background: var(--navy, #0F172A); } /* ------------------------------------------------------------------ 5 · Weicher Wechsel beim Öffnen und Schließen aufklappbarer Gruppen ------------------------------------------------------------------
laesst sich in keinem Browser unmittelbar überblenden: Der Inhalt ist zu, oder er ist auf. asx-bewegung.js haelt das Element deshalb beim Schliessen kurz offen, misst die Hoehe und uebergibt sie als --bew-hoehe; erst danach schliesst es wirklich. Ohne JavaScript klappt die Gruppe auf und zu wie immer - nur ohne Überblendung. Der Inhalt ist in beiden Faellen derselbe. */ .asx-bewegung details[data-aufklappen] > summary { cursor: pointer; } .asx-bewegung details[data-aufklappen] .asx-klapp-inhalt { overflow: hidden; } .asx-bewegung details[data-aufklappen][data-laeuft] .asx-klapp-inhalt { height: var(--bew-hoehe, auto); transition: height var(--bew-mittel) var(--bew-kurve), opacity var(--bew-mittel) var(--bew-kurve); } .asx-bewegung details[data-aufklappen][data-oeffnet] .asx-klapp-inhalt { opacity: 1; } .asx-bewegung details[data-aufklappen][data-schliesst] .asx-klapp-inhalt { opacity: 0; } /* Das Zeichen am Aufklapper dreht sich NICHT - Drehungen sind ausgeschlossen (REFC-041 #Ab). Es wechselt weich die Farbe. */ .asx-bewegung details[data-aufklappen] > summary .asx-klapp-marke { transition: color var(--bew-kurz) var(--bew-kurve); } /* ------------------------------------------------------------------ 6 · Reaktion auf Berührung und Mauszeiger ------------------------------------------------------------------ Zurueckhaltend: ein Anheben um zwei Pixel, mehr nicht. Gilt nur, wo ein Zeiger da ist, der schweben kann - auf dem Telefon gibt es keinen Schwebezustand, und eine Karte, die sich beim Antippen hebt und dann haengen bleibt, ist ein Fehler. */ @media (hover: hover) and (pointer: fine) { .asx-bewegung [data-hebt] { transition: transform var(--bew-kurz) var(--bew-kurve), box-shadow var(--bew-kurz) var(--bew-kurve); } .asx-bewegung [data-hebt]:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16); } } /* ------------------------------------------------------------------ 7 · PFLICHT: Weniger Bewegung heißt keine Bewegung (REFC-041 #Ac) ------------------------------------------------------------------ Alles sofort und vollstaendig sichtbar, keine Überblendung, kein Wandern, kein weiches Blaettern. Der Block steht bewusst am Ende der Datei, damit er jede Regel darüber überschreibt, und er fasst mit `*` auch die Bewegungen, die einzelne Seiten selbst mitbringen - etwa die Eröffnung der Startseite. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Und, das ist der eigentliche Punkt: alles ist da. */ .asx-bewegung [data-erscheinen], .asx-bewegung [data-erscheinen="links"], .asx-bewegung [data-erscheinen="rechts"], .asx-bewegung [data-staffel] > * { opacity: 1 !important; transform: none !important; } .asx-bewegung [data-groesser] { --bew-mass: 1 !important; transform: none !important; } .asx-bewegung details[data-aufklappen] .asx-klapp-inhalt { height: auto !important; opacity: 1 !important; } }