/* ========================================================================== thema.css — Hell und Dunkel fuer JEDE Seite ========================================================================== Zwei Zustaende, ein Schalter, ueberall dasselbe. Die Seite behaelt ihren Aufbau; nur die WERTNAMEN zeigen woanders hin. Kein Bauteil weiss davon, und keines wird doppelt gebaut — genau das ist der Grund, warum das hier ueberhaupt in eine Datei passt. Zwei Richtungen, weil es zwei Sorten Seiten gibt: - Buchungsseiten (body.on-buchen, .on-night, .on-data) sind von Haus aus Nacht und lesen --night-*, --ivory, --ash. Fuer HELL zeigen diese Namen auf Papierwerte. - Wissensseiten (body.on-wissen, .on-paper) sind von Haus aus Papier und lesen --paper-*, --charcoal, --stone. Fuer DUNKEL zeigen diese Namen auf Nachtwerte. Beide Bloecke stehen immer bereit; welcher greift, entscheidet die Klasse auf . Die Werte sind nicht geschaetzt. Sie stammen aus der Papierliste, die auf 01d ueber Wochen nachgemessen wurde (dort steht die Herleitung fuer jede Stufe), und aus identity.css fuer die Gegenrichtung. ========================================================================== */ /* --- HELL: die Nacht-Namen zeigen auf Papier ---------------------------- */ html.thema-hell { /* Die Karte steht eine Stufe NEBEN der Seite, nicht auf ihr. Auf Nacht ist es laengst so (#171721 gegen #1e1e2a, die Karte etwas heller); auf Papier war alles dasselbe Weiss, und dann sieht man die Karte nur an ihrer Haarlinie (Dima, 08.09.2026, mit einem Bild von Mercury: dort ist die Karte getoent und die Seite heller). Richtung wie bei Mercury, Farben wie bei uns: die Seite bleibt Weiss, die Karte bekommt den warmen Papierton. Der Abstand ist derselbe wie auf Nacht — klein genug, um ruhig zu bleiben, gross genug, um die Karte zu sehen. */ --night-0 : #ffffff; --night-1 : #ffffff; --night-2 : #faf8f5; --night-2-hover : #f5f2ec; --night-3 : #f0ece5; --night-4 : var(--paper-line-2); --night-line : var(--paper-line); --night-line-2 : var(--paper-line-2); --ivory : var(--charcoal); --ash : var(--stone); /* Nachgemessen auf #f9f8f6, nicht geschaetzt: #8a8580 kam auf 3.65:1, --gold-ink auf 4.34, Kobalt als Linkfarbe auf 4.44 — alle drei unter den 4.5, ab denen Fliesstext als lesbar gilt. Eine Stufe dunkler. */ --ash-dim : #6f6a64; --gold : #8a5c00; --ice : #3a49c4; --ice-bright : #2a37a8; --ice-veil : color-mix(in srgb, var(--cobalt) 10%, transparent); /* Auf Weiss traegt die Karte keine eigene Flaeche mehr — ohne Kante verschwaende sie. Haarlinie statt Schatten. */ --ring : inset 0 0 0 1px #eae6e0; --ring-2 : inset 0 0 0 1px var(--paper-line-2); --glass : rgba(249, 248, 246, .82); } /* --- DUNKEL: die Papier-Namen zeigen auf Nacht -------------------------- */ html.thema-dunkel { --paper-0 : #171721; --paper-1 : #1e1e2a; --paper-line : rgba(255, 255, 255, .09); --paper-line-2 : rgba(255, 255, 255, .16); --charcoal : #ededf3; --stone : #c3c3cc; /* --ink ist Navy und steht auf Papierseiten in Ueberschriften und Akzentkarten. Auf Nacht waere es fast unsichtbar (1.5:1 gemessen auf #171721), darum wird es zu Elfenbein. --lavender ist die getoente Plakette und wird zur Nachtstufe darunter. */ --ink : #ededf3; --ink-soft : #c3c3cc; --lavender : #272735; /* Die Sterne auf Papier sind das gedaempfte Gold; auf Nacht darf wieder das helle stehen (8.84:1). */ --gold-ink : #f0b429; --ring : inset 0 0 0 1px rgba(255, 255, 255, .09); --ring-2 : inset 0 0 0 1px rgba(255, 255, 255, .16); --glass : rgba(23, 23, 33, .82); } /* --white bleibt --white: es ist die Schrift AUF Kobalt, nicht eine Flaeche. Waere es umgedreht, stuende blaue Schrift auf blauem Knopf. */ /* --- Bauteile, die eine Farbe fest eingebaut haben ---------------------- */ /* Karten auf Papier tragen eine Haarlinie statt einer eigenen Flaeche. */ html.thema-hell .card-night, html.thema-hell .card-data, html.thema-hell .step-card, html.thema-hell .why-card { background: var(--night-2); box-shadow: inset 0 0 0 1px #eae6e0; } /* Auf Nacht haben dieselben Karten gar keinen Schatten — und "kein Schatten" laesst sich nicht in "eine Haarlinie" ueberblenden: der Browser rechnet von 0px auf 1px, die Linie WAECHST also aus dem Nichts, waehrend die Flaeche schon heller wird. Genau das sah beim Umschalten komisch aus (Dima, 08.09.2026). Darum tragen sie auf Nacht dieselbe Haarlinie in durchsichtig: gleiche Form, gleiche Dicke, nur unsichtbar. Der Uebergang faerbt sie dann bloss ein, statt sie zu bauen. Die Regel ist absichtlich schwach (eine Klasse), damit jede Seite, die dort selbst etwas setzt, gewinnt. */ .card-night, .card-data, .step-card, .why-card, .school-card, .feld-karte { box-shadow: inset 0 0 0 1px transparent; } /* Drei Stellen, die eine Farbe doppelt benutzen und darum nicht mitwandern koennen. Alle drei im Browser gemessen, nicht vermutet. 1. --ink ist auf Papierseiten Schrift UND Flaeche: Ueberschriften in Navy, und auf 08-weg das Logo-Quadrat. Als Schrift muss es auf Nacht hell werden, als Flaeche dunkel bleiben — beides geht nicht mit einem Wert. Das Quadrat bekommt darum seine Nachtstufe zurueck (sonst: Elfenbein auf Elfenbein, 1:1 gemessen). 2. ".on-paper a" faerbt auch den vollen Knopf: Navy auf Kobalt sind 3.52:1. Das ist KEIN Themenfehler, sondern stand auf den Papierseiten schon immer so — hier faellt es nur auf, weil beide Zustaende geprueft werden. Weiss auf Kobalt sind 4.6:1. 3. Seiteneigene Linkfarben in Kobalt (08-weg: .wlinks a) sind auf Nacht 3.5:1. Auf Nacht ist Eis die Linkfarbe, so wie es identity.css fuer die Buchungsseiten ohnehin vorsieht. */ html.thema-dunkel .logo-mark { background: var(--night-3); color: var(--ivory); } /* Die Klasse doppelt, damit die Regel ".on-paper a" (zwei Klassen) verliert. Ohne das blieb der Sprunglink bei 3.52:1 stehen — gemessen. */ /* ========================================================================== BLAU WIRD GOLD, sobald die Seite dunkel ist ========================================================================== Dima am 14.09.2026: "alles, was blau ist, soll im Dunkelmodus orange werden — das, das wir vorher hatten." Das ist --gold (#f0b429), die Farbe der Bewertungssterne; auf Nacht steht sie bei 8.84:1. WANN ist eine Seite dunkel? Zwei Faelle, und der erste ist der haeufigere: 1. Eine Buchungsflaeche (body.on-buchen) ist von Haus aus dunkel und traegt dafuer GAR KEINE Klasse. thema-hell markiert dort erst den umgeschalteten Zustand. Das sind alle Seiten von /ch/ und die Startseite. 2. Eine Wissensflaeche (on-wissen/on-paper) ist von Haus aus hell; umgeschaltet traegt sie html.thema-dunkel. Am 14.09.2026 hatte ich nur den zweiten Fall getroffen — und damit auf der Vergleichsseite gar nichts geaendert, weil die von Haus aus dunkel ist. Beide Faelle stehen jetzt hier. Getauscht sind die NAMEN, nicht die Regeln: --cobalt ist die Handlungsfarbe (Flaeche), --ice die Linkfarbe auf Nacht, --ice-veil der getoente Grund. Damit dreht jede Stelle mit, auch die, die ich nicht einzeln kenne — Knoepfe, Verweise, Fokusringe, Pillen, Haken. */ /* NACHTRAG 14.09.2026, nachdem Dima das Ergebnis gesehen hat: der volle Knopf bleibt BLAU ("this i like in blue more"). --cobalt ist die Handlungsfarbe, also die FLAECHE des einen gefuellten Knopfes pro Bildschirm; die stand vorher hier mit drin und wurde damit golden. Sie steht jetzt nicht mehr hier: getauscht werden nur noch die Namen, die eine SCHRIFT- oder Tonfarbe tragen (--ice ist die Linkfarbe auf Nacht, --ice-veil der getoente Grund, --link-farbe der Fliesstextlink). Damit bleibt "alles Blaue wird Gold" fuer Verweise, Umrisse und Fokusringe, waehrend der Suchen-Knopf wieder Kobalt ist. Weil die Flaeche wieder Kobalt ist, steht darauf wieder weisse Schrift (4.6:1) — die Gegenregel, die sie auf Tinte setzte, faellt damit weg. */ html:not(.thema-hell) body.on-buchen, html.thema-dunkel { --ice : #f0b429; --ice-bright : #f7cc63; --ice-veil : rgba(240, 180, 41, .14); --link-farbe : #f0b429; } a.btn-primary.btn-primary, a.skip.skip { color: #ffffff; } /* Kobalt als LINKFARBE ist auf Nacht 3.5:1 — auf drei geprueften Seiten (10, 14, 19) der haeufigste Treffer, und auf Papier steht es ohnehin nur bei 4.44. identity.css loest das fuer die Buchungsseiten laengst mit Eis (".on-buchen a"); hier gilt dieselbe Regel, sobald eine Papierseite auf Nacht steht. Knoepfe sind ausgenommen: dort ist Kobalt die FLAECHE und die Schrift bleibt weiss. */ html.thema-dunkel body:is(.on-wissen, .on-paper) main :is(a, summary, .go, .karte-fuss, .mehr):not([class*="btn"]):not(.skip) { --link-farbe: var(--ice); color: var(--link-farbe); } /* Dieselbe Zeile fuer den hellen Zustand, und die ist kein Themenfehler, sondern einer, der auf den Papierseiten schon immer stand: Kobalt als Linkschrift auf #f9f8f6 sind 4.44:1 — knapp unter der Grenze, auf 10, 14 und 19 gemessen. Der dunklere Blauton der Linkfarbe liegt bei ueber 7:1 und sieht identisch aus, solange man sie nicht nebeneinander legt. */ body:is(.on-wissen, .on-paper) main :is(a, summary, .go, .karte-fuss, .mehr):not([class*="btn"]):not(.skip) { /* Zusaetzlich als eigener Wert, weil wp.css ihn braucht: styles/style.css faerbt die Verweise im Ratgeber mit !important rot, und dagegen kommt nur ein !important an. Es soll aber NICHT eine zweite Farbe tippen, sonst stehen hier und dort verschiedene Blautoene, sobald einer davon geaendert wird. */ --link-farbe: #3a49c4; color: var(--link-farbe); } /* Beide Regeln stehen mit "main" davor: ohne das faerben sie auch die Navigation und die Fusszeile, deren Links absichtlich in Stein und nicht in Blau stehen. */ /* Die Akzentkarte ist die vierte Doppelnutzung: .card-ink ist eine FLAECHE in --ink mit weisser Schrift. Wird --ink hell, steht Weiss auf Weiss (1.17:1 gemessen). Auf Nacht bekommt sie die Graphitstufe. */ html.thema-dunkel .card-ink { background: var(--night-2); } /* Und die fuenfte: --lavender ist an vier Stellen Flaeche (Plaketten, Pillen, Sprachwahl) und an zwei Stellen SCHRIFT auf der Akzentkarte. Als Flaeche muss es auf Nacht dunkel werden, als Schrift hell — hier gewinnt die Flaeche, und die zwei Textstellen bekommen Asche. Gemessen ohne diese Regel: 1.12:1. */ html.thema-dunkel .card-ink :is(p, b, .num, .summe-fuss) { color: var(--ash); } /* --lavender ALS SCHRIFT — alle acht Stellen auf einmal. ------------------------------------------------------------------------ Am 14.09.2026 zweimal ueber dasselbe gestolpert: erst die drei Haken ueber dem Suchfeld auf der Ratgeberseite, dann die Kostenliste auf dem Weg zum Fuehrerschein — beide mit 1.12:1 gemessen, also Graphit auf Graphit. Statt einer siebten und achten Einzelregel hier die vollstaendige Liste. Gesucht, nicht gesammelt: "grep 'color: var(--lavender)' neu/*.css" findet genau diese acht Stellen, alle in wp.css. Was sie gemeinsam haben: sie stehen auf einer dunklen Akzentflaeche, auf der --lavender als getoentes Hellgrau gedacht ist. Auf Nacht wird derselbe Name zur Graphitstufe — richtig fuer eine FLAECHE, unsichtbar fuer SCHRIFT. wp.css wird gebaut (tools/wp-css-bauen.py), die acht Zeilen dort sind also nicht von Hand zu aendern; die Ausnahme gehoert hierher. */ html.thema-dunkel :is( .summe p, .summe-liste li, .schluss p, .checks, .step.card-ink p, .hinweis p, .abschluss .eyebrow, .abschluss p ) { color: var(--ash); } /* Die Akzentkarte ist in BEIDEN Zustaenden dunkel (Marineblau aus --ink). --ice zeigt im hellen Zustand aber auf den dunkleren Blauton, der fuer Papier gerechnet ist — auf der Karte sind das 2.31:1 (gemessen an der Rubrik "Naechster Schritt"). Auf einer dunklen Insel gilt der Nachtwert, genau wie beim Helden und den anderen Inseln weiter unten. */ html.thema-hell .card-ink { --ice: #8ec5ff; --ice-bright: #b5daff; } /* Die stille Plakette sitzt auf der getoenten Karte und kam damit auf 4.37:1 — knapp unter der Grenze, seit die Karte nicht mehr reines Weiss ist. Eine Stufe dunkler, dann sind es ueber 5:1. */ html.thema-hell .badge-quiet { color: #5f5f66; } /* --- Insel: was auf einem Bild liegt, bleibt Nacht ---------------------- */ /* Der Held traegt Video oder Foto. Ein Bild wird nicht hell, nur weil die Seite hell wird — dunkle Schrift darauf waere unlesbar (gemessen auf der Startseite: Tinte auf dem Waldbild). Er behaelt darum SEINE Werte, auch im hellen Zustand: eine Nachtinsel auf Papier. Dasselbe fuer die Kopfzeile, solange sie oben ueber dem Bild schwebt — sobald sie beim Scrollen ihre Flaeche bekommt (.nav-solid), gilt wieder das Papier der Seite. */ /* ":has" ist noetig, nicht schmueckend: .nav-float gibt es auch auf Seiten ohne dunkles Band (Portal, Vorteile, Portal intern). Dort schwebt die Leiste ueber weissem Grund, und Elfenbein waere unsichtbar. Die Bedingung zaehlte zuerst nur .hero-media, also nur ein Foto. Damit war die Leiste auf Gutschein und Fehlerseite unlesbar: die tragen kein Bild, aber ein dunkles Farbband (.kopf), und darueber stand die dunkle Schrift der hellen Seite (Dimas Bild vom 09.09.2026 — vom Logo blieb nur das "t" und das ".ch"). Danach war sie zu weit: mit .nacht-insel genuegte IRGENDEINE dunkle Flaeche auf der Seite. Auf der Registrierseite steht die blaue Karte in der Mitte, die Leiste aber schwebt oben ueber Weiss — und wurde dadurch selbst unsichtbar. Es zaehlt also nicht, ob es eine dunkle Flaeche gibt, sondern ob eine DIREKT UNTER DER LEISTE liegt. Die traegt .nacht-oben. */ /* Ein Foto mit Text darauf ist derselbe Fall wie der Held und muss ebenso Nacht bleiben. Das Portal (.shot) legt Schrift in Elfenbein ueber ein Bild und dunkelt es dafuer mit einem Schleier aus --night-0 ab. Im hellen Zustand wurde --night-0 zu Weiss: der Schleier bleichte das Foto aus, und die Schrift kippte gleichzeitig auf Dunkel — helles Grau auf hellem Bild, kaum noch lesbar (Dimas Bild vom 09.09.2026). Ein Bild dreht nicht mit, also darf auch das, was darauf steht, nicht drehen. Dasselbe auf der Fehlerseite: ihr Kopfband ist ein Verlauf aus --night-0, --ink-soft und --night-1. Im hellen Zustand werden die beiden Nacht-Marken zu Weiss, --ink-soft aber nicht — das ist ein Marineblau der Papierfamilie und bleibt, wie es ist. Heraus kam ein dunkelblauer Balken quer ueber eine weisse Seite, mit dunklem Text darauf (Dimas Bild vom 09.09.2026). Ein Farbband, das nicht mitdreht, ist derselbe Fall wie ein Foto. */ /* DIE VOLLSTAENDIGE LISTE, aus den Stylesheets gesucht statt aus Meldungen gesammelt (09.09.2026): jeder Abschnitt, dessen Grund im hellen Zustand dunkel BLEIBT, weil er aus --ink, --ink-soft, --cobalt oder einem festen dunklen Wert kommt. Diese Marken gehoeren der Papierfamilie und werden nicht umgedeutet — --night-* wird es. Erster Versuch war, die Klassennamen dieser Baender hier aufzuzaehlen (.kopf, .band, .band-aussage, .spec-band). Das ging schief: .kopf heisst auf 12-gutschein und 20-fehlerseite ein dunkles Farbband, auf 09-vorteile aber eine gewoehnliche Ueberschrift auf Weiss — die bekam damit Elfenbein auf Weiss und verschwand. Ein Klassenname sagt nichts darueber, ob eine Flaeche dunkel ist. Darum traegt jedes wirklich dunkle Band die Marke .nacht-insel im HTML. Wer ein neues baut, haengt sie an; an dieser Datei aendert sich nichts. */ html.thema-hell .hero, html.thema-hell .shot, html.thema-hell .nacht-insel, html.thema-hell body:has(.hero-media, .nacht-oben) .nav-float:not(.nav-solid) { --night-0 : #101018; --night-1 : #171721; --night-2 : #1e1e2a; --night-2-hover : #272735; --night-3 : #272735; --night-4 : #35354a; --night-line : rgba(255, 255, 255, .09); --night-line-2 : rgba(255, 255, 255, .16); --ivory : #ededf3; --ash : #c3c3cc; --ash-dim : #8b8b98; --gold : #f0b429; --ice : #8ec5ff; --ice-bright : #b5daff; --ring : inset 0 0 0 1px rgba(255, 255, 255, .09); --ring-2 : inset 0 0 0 1px rgba(255, 255, 255, .16); --glass : rgba(23, 23, 33, .82); color : #ededf3; } /* --- Die Preiskurve traegt auf Weiss Kobalt ------------------------------ */ /* Auf Nacht ist die Kurve Gold, auf Papier war sie das gedaempfte Braun — und das sah aus wie eine dritte Farbe, nicht wie eine Aussage (Dimas Bild vom 08.09.2026). Auf Weiss traegt sie darum Kobalt: die eine Farbe, die auf dieser Seite ueberhaupt etwas bedeutet. Kobalt auf Weiss ist 4.02:1 und als Grafik damit lesbar. Der Wertname wird nur INNERHALB der Kurve umgehaengt, nicht global — sonst waeren auch die Bewertungssterne blau, und die sind Gold. Zwei Bauweisen, weil die Seiten unterschiedlich alt sind: 02 und 18 benutzen .kurve/.preisfeld, 01 und 01d .verteilung/.punkte. Beide lesen dieselben Wertnamen. */ html.thema-hell :is(.kurve, .preisfeld, .verteilung, .punkte, .feld-karte), body:is(.on-wissen, .on-paper) :is(.kurve, .preisfeld, .verteilung, .punkte, .feld-karte) { --gold: var(--cobalt); } /* Die Marken lesen nicht --gold, sondern currentColor oder eigene Werte. */ html.thema-hell .preisfeld i { background: color-mix(in srgb, var(--cobalt) 55%, transparent); } html.thema-hell .punkte span:not(.linie):not(.schnitt) { background: var(--cobalt); opacity: .75; } html.thema-hell .punkte span.ist-drin { opacity: 1; } html.thema-hell .punkte .schnitt { background: var(--cobalt); box-shadow: 0 0 0 5px rgba(82, 102, 235, .16); } html.thema-hell .kurve .zeiger { stroke: var(--cobalt); } html.thema-hell .kurve .zeigerpunkt { fill: var(--cobalt); } html.thema-hell .feld-stat.ist-schnitt { border-left-color: var(--cobalt); } /* --- Trennlinien zwischen den Abschnitten ------------------------------- */ /* So heissen sie: Trennlinie oder Haarlinie — technisch ein border-top auf dem Abschnitt (Klasse .trenner, auf der Startseite als style-Attribut). Dima will sie nicht sehen: der Abstand trennt schon, die Linie zieht nur eine zweite Grenze daneben. Das Mass bleibt stehen, nur die Farbe wird durchsichtig — dadurch verschiebt sich nichts. "!important", weil die Startseite die Linie als style-Attribut traegt und ein Attribut sonst jede Regel schlaegt. Die Linien INNERHALB von Bauteilen bleiben: die Zeilen der haeufigen Fragen, die Felder und die Fusszeile brauchen sie zum Ordnen. */ .trenner, section[style*="border-top"], .acc { border-top-color: transparent !important; } /* --- Der Schalter ------------------------------------------------------- */ /* Er liest dieselben Wertnamen wie alles andere und wechselt darum von selbst mit. Keine zweite Gestaltung, kein zweites Bild. */ .thema-schalter { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--night-line-2); background: transparent; color: var(--ivory); font: inherit; font-size: var(--t-body-s, 14px); line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color .16s ease, border-color .16s ease, color .16s ease; } .thema-schalter:hover { background: var(--night-3); } .thema-schalter:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; } .thema-schalter .zeichen { width: 15px; height: 15px; flex: none; } .thema-schalter .zeichen path, .thema-schalter .zeichen circle { stroke: currentColor; fill: none; stroke-width: 1.6; } /* Auf Wissensseiten steht er auf Papier und liest die Papiernamen. */ body.on-wissen .thema-schalter, body.on-paper .thema-schalter { border-color: var(--paper-line-2); color: var(--charcoal); } body.on-wissen .thema-schalter:hover, body.on-paper .thema-schalter:hover { background: var(--paper-line); } /* Wo keine Kopfzeile ist, in der er stehen kann, haengt er sich unten rechts hin — sichtbar, aber nicht im Weg. */ .thema-schalter.frei { position: fixed; right: 16px; bottom: 16px; z-index: 60; background: var(--night-2); box-shadow: var(--ring); } body.on-wissen .thema-schalter.frei, body.on-paper .thema-schalter.frei { background: var(--paper-1); } /* --- Der Wechsel selbst ------------------------------------------------- */ /* Nur waehrend des Umschaltens, sonst waeren alle Hover-Zustaende traege. Die Klasse steht doppelt, weil die Einblend-Regel in identity.css drei Klassen hat und eine transition-Angabe die vorherige ganz ersetzt — ohne das haetten eingeblendete Bausteine gar keinen Uebergang. Die Schrift springt sofort, der Grund braucht seine Zeit; die Kurve ist vorne schnell, damit die Schrift nicht auf gleichfarbigem Grund steht. */ /* Die Klasse steht DREIMAL, und das ist kein Tippfehler. Die Einblendregel in identity.css:698 heisst ".js-bewegung .taucht-auf.ist-da" — drei Klassen — und setzt transition auf "opacity .6s, transform .6s". Eine transition-Angabe ersetzt die vorherige vollstaendig, also gewinnt bei gleicher oder hoeherer Spezifitaet ihre. Mit einer Klasse verlor diese Regel hier, und 51 Bausteine hatten damit UEBERHAUPT keinen Farbuebergang: Vertrauenszahlen, Schritt-Karten, Modellreihen sprangen hart um, waehrend der Rest weich lief. Genau das hat Dima gesehen ("die Kaesten wechseln separat"). Dreimal geschrieben sind es drei Klassen plus zwei Typen und die Regel gewinnt. Im Browser nachgezaehlt, nicht geraten. */ html.thema-wandelt.thema-wandelt.thema-wandelt body, html.thema-wandelt.thema-wandelt.thema-wandelt body * { /* Dauer und Kurve sind die, die Dima am 08.09.2026 am Scroll-Entwurf abgenommen hat ("B looks good now") — sie gelten ueberall, damit ein Knopfdruck sich genauso anfuehlt wie der Wechsel beim Scrollen. 900ms statt 700: Dima wollte es am 08.09.2026 noch etwas laenger. Das laesst sich jetzt gefahrlos machen, weil die Kurve stimmt — die 900ms von heute Mittag fuehlten sich nur deshalb zaeh an, weil sie einen Ruck verlaengert haben. Die alte Kurve (.16, 1, .3, 1) war bei 12% der Zeit schon halb fertig: ein Ruck mit Nachlauf. */ transition: all var(--thema-blende, 900ms) var(--thema-kurve, cubic-bezier(.33, 1, .68, 1)), color 0s, opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1); } @media (prefers-reduced-motion: reduce) { html.thema-wandelt.thema-wandelt.thema-wandelt body, html.thema-wandelt.thema-wandelt.thema-wandelt body * { transition: none; } }