/* * ============================================================ * EMEU BEWEGUNGS-SCHICHT 1.0.0 — wie sich das Haus bewegt * ============================================================ * * ! ! ! H A U S W E I T E W I R K U N G ! ! ! * * Jeder Wert hier wirkt auf JEDE Flaeche, die eine Bewegungs- * Klasse oder ein Bewegungs-Token benutzt. Eine Aenderung hier * ist NIE eine lokale Aenderung. * * WER SOLL SICH ANDERS BEWEGEN? Wenn eine einzelne Stelle anders * laufen soll, gehoert die Aenderung an DIESE STELLE. Hierher * gehoert nur, was ueberall gelten soll. * * VOR JEDER AENDERUNG: die Wirkung ansehen — * python tools/design/wirkung.py --was=w-bewegung-kommt-kurve * Die Wache haken_globale_wirkung.py meldet sich von selbst. * * ------------------------------------------------------------ * HERKUNFT (Lumina-Setzung 2026-09-16) * ------------------------------------------------------------ * Gemessen an der Einfahrt des Routenplaners in der Entdeckungs- * tour (entdeckungstour.css, Zeilen 443 bis 446). Lumina hat sie * zur Bewegung des Hauses erhoben: "moderne und feine Animation". * * Was sie ausmacht — drei Dinge, die zusammen wirken: * * 1. ZWEI KURVEN, NICHT EINE. Das Kommen bremst sanft aus * (.2,.8,.2,1 — schneller Antritt, langer Auslauf), das Gehen * zieht an (.4,0,.7,.2 — zoegernder Start, zuegiger Abgang). * Dieselbe Kurve fuer beides laesst eine Bewegung tot wirken. * * 2. KOMMEN DAUERT LAENGER ALS GEHEN (320 gegen 280 ms). Was * erscheint, darf sich Zeit nehmen; was verschwindet, soll * nicht warten lassen. * * 3. DIE BLENDE IST KUERZER ALS DIE BEWEGUNG (240 gegen 320, * 220 gegen 280). Die Deckkraft ist fertig, bevor die Bewegung * endet — dadurch "landet" das Element, statt aufzutauchen. * Das ist der feine Teil; ohne ihn wirkt dieselbe Kurve billig. * * ------------------------------------------------------------ * BESTAND VOR DER SETZUNG (gezaehlt am 2026-09-16) * ------------------------------------------------------------ * 28 verschiedene Dauern an 243 Stellen, 13 verschiedene Kurven * an 225 Stellen. Haeufigste Kurve: ease (143x) — also der * Browser-Vorgabewert, meist keine Entscheidung. Die Kurve dieser * Schicht stand an genau 2 Stellen. * Die Umstellung des Bestands laeuft schrittweise; diese Schicht * ist der Ort, an den sie wandert. * * ------------------------------------------------------------ * KONVENTION * ------------------------------------------------------------ * - Praefix .w-bewegung- fuer jede Klasse, --w-bewegung-* fuer * jedes Token. * - Eine Bewegung hat IMMER zwei Zustaende: kommt und geht. Wer * nur einen setzt, bekommt beim anderen den Browser-Sprung. * - RUHE-WUNSCH WIRD RESPEKTIERT: wer im Betriebssystem weniger * Bewegung eingestellt hat, bekommt keine. Das ist am Ende * dieser Datei einmal fuer alle Klassen geregelt — wer eine * eigene Bewegung baut, muss es selbst tun. * ============================================================ */ :root { /* --------------------------------------------------------- DIE ZWEI KURVEN — der Charakter der Haus-Bewegung --------------------------------------------------------- */ --w-bewegung-kommt-kurve: cubic-bezier(.2, .8, .2, 1); --w-bewegung-geht-kurve: cubic-bezier(.4, 0, .7, .2); /* --------------------------------------------------------- DIE DAUERN — drei Groessen, gleiche Familie gross: ganze Ebenen (Planer, Menue, Overlay) mittel: Bloecke und Kaesten (Accordion-Inhalt, Karten) kurz: was am Finger klebt (Icon, Haken, Hover) --------------------------------------------------------- */ --w-bewegung-kommt-dauer: 320ms; --w-bewegung-kommt-blende: 240ms; --w-bewegung-geht-dauer: 280ms; --w-bewegung-geht-blende: 220ms; --w-bewegung-mittel-dauer: 260ms; --w-bewegung-mittel-blende: 200ms; --w-bewegung-kurz-dauer: 200ms; /* Die NAHE Strecke: wie weit etwas faehrt, das aus der Naehe kommt (Menue unter dem Kopf, Klappe, Hinweis). Wege von aussen fahren die volle Breite, die steht nicht hier. */ --w-bewegung-nah: 10px; /* Fertige Uebergaenge — wer nur "die Haus-Bewegung" will, nimmt diese, statt Kurve und Dauer selbst zu paaren. */ --w-bewegung-kommt: transform var(--w-bewegung-kommt-dauer) var(--w-bewegung-kommt-kurve), opacity var(--w-bewegung-kommt-blende) ease; --w-bewegung-geht: transform var(--w-bewegung-geht-dauer) var(--w-bewegung-geht-kurve), opacity var(--w-bewegung-geht-blende) ease; /* --------------------------------------------------------- DIE TOR-FORM — dieselbe Bewegung OHNE Blende --------------------------------------------------------- Lumina-Befund 2026-09-16: "Wir brauchen einen Garagentor- Effekt. Das zieht herunter, fertig. Es ist nicht in der Mitte einfach weg und auch nicht durchsichtig." Die Blende ist der feinste Teil der Haus-Bewegung — und genau darum darf man sie nicht ueberall mitnehmen. Sie gehoert zu Ebenen, die sich UEBER etwas schieben (Planer ueber Karte): das kurze Aufblenden laesst sie landen. Eine Flaeche, die als TOR kommt und den Blick ganz verschliesst, muss vom ersten Tausendstel an deckend sein. Sonst sieht man auf halbem Weg hindurch, und die Kurve laeuft ins Leere. Merksatz: was sich UEBERLAGERT, blendet. Was VERSCHLIESST, faehrt massiv. */ --w-bewegung-tor-kommt: transform var(--w-bewegung-kommt-dauer) var(--w-bewegung-kommt-kurve); --w-bewegung-tor-geht: transform var(--w-bewegung-geht-dauer) var(--w-bewegung-geht-kurve); } /* ===== DIE WEGE ============================================ Ein Weg sagt, WOHER etwas kommt. Er setzt den Ruhe-Zustand (verborgen) — die Klasse .ist-offen hebt ihn auf, .ist-zu fuehrt zurueck. Genau das Muster des Routenplaners. =========================================================== */ .w-bewegung-von-links, .w-bewegung-von-rechts, .w-bewegung-von-oben, .w-bewegung-von-unten { opacity: 0; transition: var(--w-bewegung-kommt); } .w-bewegung-von-links { transform: translateX(-100%); } .w-bewegung-von-rechts { transform: translateX(100%); } /* Oben und unten kommen aus der NAEHE, nicht von ausserhalb des Schirms: ein Menue haengt am Kopf, es faehrt nicht durchs Bild. */ .w-bewegung-von-oben { transform: translateY(calc(var(--w-bewegung-nah) * -1)); } .w-bewegung-von-unten { transform: translateY(var(--w-bewegung-nah)); } .w-bewegung-von-links.ist-offen, .w-bewegung-von-rechts.ist-offen, .w-bewegung-von-oben.ist-offen, .w-bewegung-von-unten.ist-offen { transform: none; opacity: 1; } .w-bewegung-von-links.ist-zu, .w-bewegung-von-rechts.ist-zu, .w-bewegung-von-oben.ist-zu, .w-bewegung-von-unten.ist-zu { opacity: 0; transition: var(--w-bewegung-geht); } .w-bewegung-von-links.ist-zu { transform: translateX(-100%); } .w-bewegung-von-rechts.ist-zu { transform: translateX(100%); } .w-bewegung-von-oben.ist-zu { transform: translateY(-10px); } .w-bewegung-von-unten.ist-zu { transform: translateY(10px); } /* ===== DAS AUSKLAPPEN ====================================== Hoehe von 0 auf auto ist nicht animierbar. Der Rost-Griff loest das ohne Skript: eine Zeile waechst von 0fr auf 1fr, das Kind liegt in einem Kasten mit overflow hidden. =========================================================== */ .w-bewegung-klappe { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--w-bewegung-mittel-dauer) var(--w-bewegung-kommt-kurve), opacity var(--w-bewegung-mittel-blende) ease; opacity: 0; } .w-bewegung-klappe > * { min-height: 0; /* ohne das ignoriert der Rost die 0fr */ overflow: hidden; } .w-bewegung-klappe.ist-offen { grid-template-rows: 1fr; opacity: 1; } .w-bewegung-klappe.ist-zu { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--w-bewegung-geht-dauer) var(--w-bewegung-geht-kurve), opacity var(--w-bewegung-geht-blende) ease; } /* ===== DAS TOR ============================================= Wie die Wege, aber ohne Blende: die Flaeche ist von Anfang an deckend und faehrt nur. Fuer alles, was den Blick VERSCHLIESST statt sich darueber zu schieben — Vollbild-Menue, Overlay. Wichtig: die Flaeche braucht einen wirklich deckenden Grund. Eine halbdurchsichtige Hintergrundfarbe macht denselben Eindruck wie eine Blende, auch ohne Blende. =========================================================== */ .w-bewegung-tor-von-links, .w-bewegung-tor-von-oben { opacity: 1; transition: var(--w-bewegung-tor-kommt); } .w-bewegung-tor-von-links { transform: translateX(-100%); } .w-bewegung-tor-von-oben { transform: translateY(-100%); } .w-bewegung-tor-von-links.ist-offen, .w-bewegung-tor-von-oben.ist-offen { transform: none; } .w-bewegung-tor-von-links.ist-zu, .w-bewegung-tor-von-oben.ist-zu { transition: var(--w-bewegung-tor-geht); } .w-bewegung-tor-von-links.ist-zu { transform: translateX(-100%); } .w-bewegung-tor-von-oben.ist-zu { transform: translateY(-100%); } /* ===== DAS AUFKLAPPEN (details) ============================ Ein
klappt von Haus aus hart auf — die Hoehe springt von 0 auf auto, und auto ist herkoemmlich nicht animierbar. Seit Chrome 129/131 geht beides: interpolate-size erlaubt den Weg nach auto, ::details-content greift den Inhalt. Gemessen am 2026-09-16 in der Werkstatt: Chrome 153 kann interpolate-size, ::details-content, allow-discrete und calc-size. Trotzdem steht alles in einem @supports — wer es nicht kann, bekommt das harte Klappen wie bisher. Das ist kein Notbehelf: ein Aufklappen ohne Weg ist immer noch ein Aufklappen, nur ohne Schmuck. ANWENDUNG: die Klasse auf das
-Element selbst. =========================================================== */ @supports (interpolate-size: allow-keywords) and selector(details::details-content) { .w-bewegung-aufklappen { interpolate-size: allow-keywords; } .w-bewegung-aufklappen::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size var(--w-bewegung-mittel-dauer) var(--w-bewegung-geht-kurve), opacity var(--w-bewegung-mittel-blende) ease, content-visibility var(--w-bewegung-mittel-dauer) allow-discrete; } .w-bewegung-aufklappen[open]::details-content { block-size: auto; opacity: 1; /* Aufgehen bremst sanft aus, Zugehen zieht an — dieselbe Zweiteilung wie bei den Wegen. */ transition: block-size var(--w-bewegung-kommt-dauer) var(--w-bewegung-kommt-kurve), opacity var(--w-bewegung-kommt-blende) ease, content-visibility var(--w-bewegung-kommt-dauer) allow-discrete; } } /* ===== DAS ZEICHEN ========================================= Ein Icon klebt am Finger und muss frueher fertig sein als die Flaeche, die es oeffnet — sonst wirkt der Klick traege. Gleiche Kurve (es gehoert zur Familie), kuerzere Dauer. =========================================================== */ .w-bewegung-zeichen { transition: transform var(--w-bewegung-kurz-dauer) var(--w-bewegung-kommt-kurve); } /* ===== RUHE-WUNSCH ========================================= Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt die Zustaende ohne den Weg dorthin. Nicht "keine Animation" als Notloesung, sondern der ehrliche Endzustand. =========================================================== */ @media (prefers-reduced-motion: reduce) { .w-bewegung-von-links, .w-bewegung-von-rechts, .w-bewegung-von-oben, .w-bewegung-von-unten, .w-bewegung-von-links.ist-zu, .w-bewegung-von-rechts.ist-zu, .w-bewegung-von-oben.ist-zu, .w-bewegung-von-unten.ist-zu, .w-bewegung-klappe, .w-bewegung-klappe.ist-zu, .w-bewegung-zeichen { transition: none; } }