/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/raumriss-v5-glas.css ***! \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* ═══════════════════════════════════════════════════════════════════════════ * RAUMRISS · v5 — GLAS * * WAS DAS IST * Die Design-Schicht aus DESIGN-GESETZ-V4.md, angewandt aufs lebende Haus. * Sie ändert NUR das Aussehen: Grund, Glas, Kante, Schatten, Radius. * Sie fasst KEINE Anordnung an — kein Raster, kein Abstand, keine Größe, * keine Schriftgröße, keine Textfarbe. Widgets bleiben, wo sie sind. * * NOT-AUS * Eine Zeile: in `app/layout.tsx` das Attribut `data-glas="v5"` am * entfernen — oder in `globals.css` diesen Import auskommentieren. * Beides stellt den Zustand vorher her, ohne Rückbau. * * WARUM `@layer rr-v5` GANZ VORNE DEKLARIERT WIRD * Bei `!important` gewinnt die ZUERST deklarierte Schicht (umgekehrt zur * normalen Kaskade) — und geschichtetes `!important` schlägt auch * ungeschichtetes. Der Altbestand trägt über 8.000 `!important` in 89 * ungeschichteten Dateien. Nur so setzt sich das Glas deterministisch * durch, ohne dass irgendeine `*-pass.css` angefasst werden muss. * (Dasselbe Prinzip wie beim KIT, siehe DESIGN-KIT.md.) * * WARUM DIE KLASSENLISTE SO AUSSIEHT * Sie ist nicht geraten. Sie wurde aus den 89 CSS-Dateien ausgelesen: * jede Regel, die BEIDES setzt — einen Hintergrund UND einen Eckradius — * ist eine Fläche. Davon blieben die übrig, die im TSX wirklich benutzt * werden. Chips, Knöpfe, Pegel-Füllungen und alles unter 12 px Radius * sind bewusst draußen: die sollen nicht zu Glas werden. * * Die Liste teilt sich in zwei: * BEHÄLTER tragen Anordnung, keinen Inhalt → werden durchsichtig * FLÄCHEN tragen Inhalt → werden Glas * Das ist §2 des Gesetzes: die Schale zeigt nicht, das Deck trägt. * * 1 · Grund 3 · Flächen * 2 · Rezeptur 4 · Behälter + Schwarz * * ZUM ECKRADIUS — eine Korrektur * Erster Wurf ließ ihn bewusst weg („Radius ist Proportion, Proportion ist * Anordnung"). Am lebenden Haus war genau das der Grund, warum es billig * blieb: harte Ecken auf einem Foto lesen sich als aufgeklebte Kästen. * Ein Eckradius verschiebt nichts und ändert keine Größe — er ist Material. * Also doch: 26 px für Flächen, 14 px für alles, was in einer Fläche liegt. * ═══════════════════════════════════════════════════════════════════════════ */ @layer rr-v5 { /* ── 1 · Der Grund ─────────────────────────────────────────────────────── * Ein unscharfes Bild, sonst nichts. Es ist nicht Deko: Glas ist eine * Rechenoperation auf dem Untergrund. Auf einer fast einfarbigen Fläche * ergibt jedes `backdrop-filter` dieselbe Fläche mit weniger Kontrast — * live A/B getestet, siehe DESIGN-GESETZ.md §2. Ohne Bild kein Glas. */ html[data-glas="v5"] { /* DER GRUND — SPACE AGE 1973. * Creme- und Knochenwellen aus geformtem mattem Kunststoff, Terrakotta- * Wärme von unten, ein einzelner Ultramarin-Akzent. Von Max am 08.08. * aus vier Platten gewählt. * * DREI ANLÄUFE, DREI LEHREN — die Reihenfolge ist der Punkt: * * 1 ITHAKA, Ultramarin-Himmel über Terrakotta mit harter Horizontkante * (`raumriss-grund-ithaka.webp`). Max: „sieht nix aus." * → Als BILD stark, als GRUND zu laut. Ein Grund hat nichts zu sagen, * er hat zu tragen. Zwei satte Farbfelder konkurrieren mit jedem * Panel darauf, und die Kante schneidet quer durch die Oberfläche. * * 2 Pastellenes Blau-Rosé-Bokeh (`raumriss-grund-luft.webp`). * Max: „zu hell, das davor war krasser." * → Trug gut, sagte aber nichts. Und vor allem: das ist der Look * einer 2020er-Wellness-App, keine 70er. * * 3 Diese hier. Der Fehler in 1 und 2 war derselbe: die ZEIT wurde über * die Unschärfe gesucht. Unschärfe macht keine Epoche. Was 1973 macht, * sind PALETTE und EMULSION — Creme, Ocker, Terrakotta, Ultramarin auf * Ektachrome. Also nach der ITHAKA-Formel gebaut statt geraten: * geformter matter weißer Kunststoff, nahtlose Rundungen, kein Chrom, * keine Leuchten. * * Der Ultramarin-Fleck lag ursprünglich bei Helligkeit 60 und genau * unter der Kopfleiste. Nicht entfernt, sondern nur die Schatten * angehoben (min 121, Mittel 201) — der Akzent bleibt, die Schrift * darauf wird lesbar. * * 4 ZURÜCK AUF DEN URSPRÜNGLICHEN GRUND. Max nach allen dreien: * „das erste war noch das beste." * → Und das ist die eigentliche Lehre des Tages. Alle drei Versuche * waren AUFFÄLLIGER als der Grund, den sie ersetzen sollten, und * jeder einzelne war für sich genommen das bessere Bild. Genau * das war das Problem: ein Grund wird nicht daran gemessen, wie * gut er allein aussieht, sondern daran, wie wenig er von dem * abzieht, was auf ihm liegt. Der warme, fast tonlose Grund * gewinnt, weil er nichts will. * * Die drei Verworfenen liegen weiter in public/ (`-ithaka`, `-luft`, * `-luft-b`, `-spaceage`) — Umschalten ist diese eine Zeile. * * 5 EIN ECHTER RAUM (28.10.). Max: „das Hintergrundbild sieht bei den * anderen hochwertig aus, während das bei uns billig wirkt." * → Gemessen: `raumriss-grund.webp` war 1600×900 und 14 KB, schon IM * BILD so stark weichgezeichnet, dass man Kompressionsblöcke sieht, * und auf Retina auf über das Doppelte hochgezogen. Billig wirkte * nicht die Farbe, sondern die Auflösung. * → Alle vier Versuche vom 08.08. waren abstrakte Flächen. Was die * Referenz (Glass Dashboard V5) hochwertig macht, ist ein ECHTER ORT, * scharf fotografiert und nur leicht weich — das Glas zeichnet weich, * nicht das Bild. Also: Space-Age-Wohnung (Sitzgrube, rundes Fenster, * Creme/Ocker/Terrakotta, ein Ultramarin-Kissen), 2752×1536, nur * sigma 5 weich. Die Lehre vom 08.08. gilt weiter: große ruhige * Wandfläche oben links, wo die Begrüßung steht. * Variante B (Kugelleuchte vorn, unruhiger hinter den Texten): * `raumriss-grund-raum-b.jpg`. Der alte Grund: `raumriss-grund.webp`. */ --rr5-grund: url("raumriss-grund-raum-d1d1ee78.jpg"); /* 28.10.: 0,34 → 0,26. Max: „kann man die ganze App nicht eher * durchsichtig machen" — mit dem scharfen Raumfoto als Grund trägt * das Glas mehr Durchsicht, ohne dass die Schrift leidet. * * 28.10. später, zweite Korrektur: 0,26 → 0,40 → 0,86. Der Grund ist * ein Foto, kein Farbfeld — beim Scrollen wandern Torbogen, Pflanze und * Fensterring unter der Schrift durch, und die Zeile flimmert. 0,40 war * der erste Versuch und war Max weiterhin zu durchsichtig. Diese * Variable steht an genau vier Stellen, und alle vier TRAGEN TEXT * (Karten/Panels/Module/Kacheln §3, Tageslage, Raum-Fläche, * `[data-environment]`-Seitenwurzel) — hier gilt „wo Text steht, muss * eine Fläche sein" (§ bei .rr-room-surface). Der Ort bleibt über * Blur, Kante und Lupe sichtbar; durchsichtig bleibt die UMGEBUNG * (Grund, Skin-Schleier, Ränder), nicht die Arbeitsfläche. */ --rr5-glas: rgba(255, 255, 255, 0.86); /* Die Tönung verschachtelter Flächen (Kacheln auf einem Deck). Steht an * drei Stellen im Haus, war dort dreimal als Zahl eingetragen — jetzt * ein Wert. 28.10.: 0,95/0,88 → 0,62/0,48. Weiterhin TÖNUNG, kein * zweites Glas: das Deck darunter blurrt, die Kachel hellt nur auf. * * 28.10. später, zweite Korrektur: 0,62/0,48 → 0,74/0,60 → 0,94/0,88. * Die Kachel ist die ZWEITE Stufe über dem Deck. Liegt das Deck jetzt * bei 0,86, muss die Kachel darüber liegen, sonst verschwindet ihre * Unterkante im Deck und die Verschachtelung ist nicht mehr lesbar. */ --rr5-kachel: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.88)); /* DIE LUPE — die Kantenbrechung des Glases, als eigener Schalter. * * Steht in allen zehn Glas-Rezepten vor dem Weichzeichner: * backdrop-filter: var(--rr5-lupe) blur(var(--rr5-weich)) saturate(165%) * * Sie ist ein SVG-Filter und damit die einzige Zutat des Hauses, die * den Browser aus dem eingebauten Kompositionspfad herauszwingt. Am * Schreibtisch ist das der Unterschied zwischen „Glas" und „milchige * Fläche"; auf einem Telefon ist es der Unterschied zwischen 60 und * 20 Bildern. Deshalb steht sie hier als EIN Wert statt zehnmal fest * verdrahtet — auf Touch wird sie leer (Abschnitt 19a) und alle zehn * Rezepte fallen still auf den eingebauten Weichzeichner zurück. * * Ein Schalter an einer Stelle ist immer besser als zehn Ausnahmen * an zehn Stellen; das ist derselbe Gedanke wie `data-environment` * statt einer Liste von Klassennamen. */ --rr5-lupe: url(#rr-lens); /* DIE WEICHE — wie stark das Glas den Raum dahinter verwischt. * Stand elfmal als `blur(20px)` in den Glas-Rezepten, jetzt ein Wert. * 28.10.: 20 → 46 px. Max: „auf dem Screenshot erkennt man besser, was * auf den Liquid-Oberflächen ist." Seit dem echten Raumfoto schimmerten * Pflanze, Torbogen und Fensterring scharf durch die Flächen und * konkurrierten mit Schrift und Knöpfen. Die Referenz verwischt den * Grund hinter einer Fläche zu einem ruhigen Farbfeld — der Raum bleibt * am Rand sichtbar, der Inhalt liest sich klar. Auf Touch kleiner (19a). */ --rr5-weich: 46px; /* DER AUSSENRAND — von Weiß auf Ton umgestellt (10.08.). * * Er stand auf 78 % Weiß, und genau das hat Max an den oberen Panels * gestört, während er die „Offene Themen"-Fläche als wertig empfand: * ein weißer Ring um eine helle Fläche auf hellem Grund ist keine * Kante, sondern ein zweiter heller Streifen. Die Form entsteht dann * nicht aus der Kante, sondern trotz ihr. * * Die Kacheln machen es seit heute früh schon richtig — 8 % Tinte, * und deshalb sitzen sie sauber. Der Deck-Rand zieht nach. * * ⚠ Der Grat (`--rr5-grat`, innen oben) bleibt WEISS, und das ist * kein Widerspruch, sondern die eigentliche Arbeitsteilung: * Der AUSSENRAND trennt die Fläche vom Grund — das braucht Ton. * Der GRAT innen ist das Licht, das sich in der Kante fängt — das * braucht Weiß. * Beides weiß zu machen war der Fehler; beides Ton zu machen wäre * der nächste. */ --rr5-linie: rgba(22, 21, 15, 0.1); --rr5-grat: rgba(255, 255, 255, 0.96); --rr5-fuge: rgba(104, 78, 52, 0.14); --rr5-r-deck: 26px; --rr5-r-tile: 14px; /* ZWEI Schatten, nach Flächengröße getrennt (10.08.). * * Vorher war es einer für alles. Das ist der Fehler, den Apple unter * „bigger surfaces should read as thicker" führt: eine 900 px breite * Fläche und eine 60 px kleine Kachel trugen denselben Schatten. * Physikalisch ist das unmöglich — je größer eine Platte, desto weiter * steht sie ab und desto weicher und tiefer fällt ihr Schatten. Ein * gemeinsamer Schatten macht große Flächen flach und kleine schwer. * * Die Trennung kostet nichts, weil v5 die Unterscheidung schon hat: * oberste Ebene = Deck, verschachtelt = Kachel. */ --rr5-schatten: 0 1px 1px rgba(58, 42, 26, 0.04), 0 10px 22px -14px rgba(72, 52, 32, 0.22), 0 34px 70px -34px rgba(72, 52, 32, 0.34); /* Nah, knapp, kaum Streuung — eine Kachel liegt fast auf. */ --rr5-schatten-kachel: 0 1px 1px rgba(58, 42, 26, 0.05), 0 4px 9px -6px rgba(72, 52, 32, 0.20); } /* Der Grund hängt NICHT am . Das Haus hat dafür längst eine Stelle: * `.rr-skin::before` (fest, z-index -2) trägt das Bild, `.rr-skin::after` * (z-index -1) legt den Schleier darüber. Am body vorbei gebaut wäre beides * unsichtbar — es liegt darüber. Am 08.08. genau so passiert und im DOM * nachgemessen. Also: an die vorhandene Stelle andocken, nicht danebenbauen. */ html[data-glas="v5"], html[data-glas="v5"] body { background-color: #ecdcc7 !important; background-image: none !important; } html[data-glas="v5"] .rr-skin::before { background-image: var(--rr5-grund) !important; background-size: cover !important; background-position: center 48% !important; /* Kein `brightness()` mehr: das Bild ist schon hell und weich gebaut, * es muss nicht abgedunkelt werden, damit Text darauf lesbar bleibt. * 28.10.: saturate 1,22 → 1,04. Das hob das blasse alte Bild an; das * neue Foto ist schon satt und würde damit übersättigt. */ filter: saturate(1.04) contrast(1.02) !important; opacity: 1 !important; } /* Der Schleier bindet das Bild an die RAUMRISS-Wärme und gibt oben etwas * mehr Ruhe als unten — da steht die Begrüßung direkt auf dem Grund. * * 28.10.: dazu ein Lichtfleck oben links. Der echte Raum hat dort einen * dunklen Torbogen, genau hinter Untertitel und „Aktiver Block". Statt das * Foto zu verschieben oder abzudunkeln: Licht an die Wand, wo die Schrift * steht — liest sich wie Fensterlicht, nicht wie eine Fläche. */ html[data-glas="v5"] .rr-skin::after { background: radial-gradient( ellipse 52% 42% at 14% 20%, rgba(252, 247, 238, 0.66) 0%, rgba(252, 247, 238, 0.38) 45%, rgba(252, 247, 238, 0) 78% ), linear-gradient( 180deg, rgba(255, 251, 244, 0.14) 0%, rgba(255, 249, 240, 0) 34%, rgba(112, 86, 60, 0.2) 100% ) !important; background-image: radial-gradient( ellipse 52% 42% at 14% 20%, rgba(252, 247, 238, 0.66) 0%, rgba(252, 247, 238, 0.38) 45%, rgba(252, 247, 238, 0) 78% ), linear-gradient( 180deg, rgba(255, 251, 244, 0.14) 0%, rgba(255, 249, 240, 0) 34%, rgba(112, 86, 60, 0.2) 100% ) !important; opacity: 1 !important; } /* Die alten Atmosphären-Schichten decken den Grund sonst zu. Sie bleiben * (sie tragen Tageszeit + Wärme), legen sich aber nur noch als Hauch * darüber, statt als eigene Fläche. * * ⚠ `.runtime-presence-layer` ist NICHT nur eine Atmosphären-Schicht: * dieselbe Klasse trägt auch `.runtime-session-header` — also die Leiste * oben rechts mit Marke, Uhrzeit, AUREL-Zustand und dem ABMELDEN-Knopf. * Ohne die Ausnahme steht die komplette Session-Leiste auf 30 % Deckkraft * mit `soft-light` und ist damit praktisch unsichtbar. Genau derselbe * Fehler wie bei `.room-composition__stage`: ein Element trägt zwei * Klassen, und die Regel für die eine erschlägt die Aufgabe der anderen. * Namensheuristik über Klassen braucht IMMER die Gegenprobe im DOM. */ html[data-glas="v5"] .runtime-atmosphere-layer:not(.runtime-session-header), html[data-glas="v5"] .runtime-breath-layer:not(.runtime-session-header), html[data-glas="v5"] .runtime-presence-layer:not(.runtime-session-header) { opacity: 0.3 !important; mix-blend-mode: soft-light !important; } /* Und die Leiste selbst zurück auf volle Sichtbarkeit, falls eine andere * Regel sie ebenfalls gedimmt hat. */ html[data-glas="v5"] .runtime-session-header { opacity: 1 !important; mix-blend-mode: normal !important; } /* ── 2 · Die Rezeptur ──────────────────────────────────────────────────── * Fünf Dinge machen Glas, und nur eines davon kann CSS allein: * BRECHUNG url(#rr-lens) verschiebt den Hintergrund an den Kanten. * Das ist der Unterschied zwischen „weiße Fläche mit Blur" * (liest sich als Farbe) und Glas. Filter liegt in * components/system/raumriss-glas-filter.tsx. * Streuung blur + saturate * Dicke ein heller Grat oben innen * Kante EINE Haarlinie. Kein Farbsaum, kein Ring, kein Leuchten. * Schatten EINER. Nicht fünf. * Gestapelte Effekte sind der Grund, warum Oberflächen billig wirken — * nicht zu wenig Effekt, sondern zu viel. */ /* ── 2b · KEINE WAAGERECHTEN TRENNKANTEN, GRUNDSÄTZLICH ────────────── * * Vier Runden lang habe ich einzelne Striche gesucht und gefunden, und * jedes Mal war der nächste woanders. Das lag nicht an Unachtsamkeit, * sondern am Verfahren: eine Liste von Fundstellen ist immer nur so * vollständig wie die letzte Suche. Also andersherum. * * VORHER: alles darf eine Kante haben, ich streiche die weg, die * mir auffallen. * JETZT: nichts hat eine waagerechte Kante, und die wenigen Dinge, * die eine brauchen, holen sie sich explizit zurück. * * Das ist derselbe Wechsel wie von „verbotene Wörter sammeln" zu * „erlaubte Wörter nennen" — nur der zweite Weg hört irgendwann auf. * * Zurückgeben tun sich die Kante: * · die FLÄCHEN, weil ihre Regeln weiter unten `border: 1px solid` * auf allen vier Seiten setzen (Kurzschreibweise, also mit Farbe) und * in der Datei SPÄTER stehen — bei gleicher Spezifität gewinnt die * spätere Regel. Deshalb steht dieser Block bewusst VOR Abschnitt 3. * · Formularfelder, Tabellen und Reiter, die hier ausgenommen sind: * deren Unterkante ist keine Dekoration, sondern sagt, wo man tippt * bzw. was gerade gewählt ist. * * `:where()` ist wichtig — es zählt für die Spezifität als null. Mit * einem gewöhnlichen `:not()` wäre dieser Block spezifischer als die * Flächen-Regeln und würde ihnen die Kante wieder wegnehmen. */ /* ⚠⚠ HIER STAND EINE REGEL, DIE ICH ZURÜCKGENOMMEN HABE — und der * Grund ist lehrreicher als die Regel es war. * * Sie machte HAUSWEIT alle waagerechten Ränder durchsichtig, damit kein * Trennstrich mehr durchrutscht („nichts hat eine Kante, wer eine * braucht holt sie sich"). Als Verfahren richtig gedacht. In der * Wirkung ein Griff ins Klo: * * Ein Chip ist eine Kapsel mit `border-radius: 999px` und einem Rand * auf ALLEN VIER Seiten. Nimmt man ihm oben und unten die Farbe, * bleiben links und rechts zwei Bögen stehen — die Pille sieht aus * wie in Klammern gesetzt: ( Hoch ) ( Mittel ) ( Niedrig ). * * Max dazu, und zurecht: „die sehen möchtig kacke aus." * * Der Denkfehler: Ich habe eine Regel über die BAUFORM formuliert * („waagerechter Rand"), aber Bauform und Bedeutung fallen hier nicht * zusammen. Derselbe waagerechte Rand ist am Container ein Trennstrich * und an der Kapsel ein Viertel ihres Umrisses. CSS kann „gehört zu * einem geschlossenen Umriss" nicht ausdrücken — und was man nicht * ausdrücken kann, darf man nicht pauschal behandeln. * * Was stattdessen bleibt: die GEMESSENEN Listen weiter unten plus der * Prüflauf in scripts/design-pruefen.js. Weniger elegant, aber eine * gemessene Liste trifft nur, was sie treffen soll. */ /* ⚠⚠ DER NACHZÜGLER, UND ER DECKT EINEN DENKFEHLER AUF: * `.rr-skin` IST NICHT DIE GANZE SEITE. * * Die Kopfleiste (`runtime-session-header`) hängt direkt am ``, * nicht in der Haut. Im laufenden Haus nachgesehen, Vorfahrenkette: * header.runtime-presence-layer → body.raumriss-os → html * * Damit hat sie KEINE einzige meiner Regeln je erreicht — alles in * dieser Datei ist auf `.rr-skin` eingeschränkt, weil die Haut den Grund * trägt und ich das für „die Seite" gehalten habe. Sie war es nie ganz. * * Das ist derselbe Fehlertyp wie am 08.08., als der Grund am `` * hing statt an `.rr-skin` und deshalb unsichtbar blieb: eine Annahme * über den Aufbau, die nie nachgemessen wurde. * * Dazu kommt: die Regel dort setzt `border-bottom` in KURZSCHREIBWEISE * mit `!important`. Die Kurzform setzt Breite, Stil UND Farbe in einem * und überschreibt damit auch eine transparente Farbe. Gegen eine * Kurzform hilft nur eine Kurzform. */ html[data-glas="v5"] .runtime-session-header__inner { border-bottom: 0 !important; } /* Und die beiden, die der Prüflauf danach noch gemeldet hat — beide vom * Typ Schatten, beide auf Elementen ohne eigene Fläche. Sie sind der * Beweis, dass der Lauf funktioniert: gefunden in einem Durchgang statt * in sechs Runden. */ html[data-glas="v5"] .rr-skin .alivemaex-room-pulse, html[data-glas="v5"] .rr-skin .alivemaex-room-state__fold-summary { box-shadow: none !important; } /* ── 17h · DIE LETZTEN GLAS-AUF-GLAS-STAPEL ────────────────────────── * * Der Prüflauf über alle Räume hat drei Paare gefunden, und zwar auf * JEDER Raumseite dieselben drei — das ist das Muster, an dem man einen * Bauteilfehler von einem Seitenfehler unterscheidet: was überall * gleich auftritt, sitzt im Bauteil. * * Alle drei sind Flächen, die in einer anderen Fläche liegen und ihren * eigenen Weichzeichner mitbringen. Sie standen in keiner der * Verschachtelungslisten, weil sie unter anderen Namen laufen. * Behandlung wie überall: die äußere Ebene trägt das Glas, die innere * wird eine Tönung darauf. */ html[data-glas="v5"] body :is(.riss-core-form, .room-composition__stage, .room-worksurface) :is(.riss-core-home, .continuity-surface, .zone-material-surface) { backdrop-filter: none !important; } /* ⚠⚠⚠ HIER STAND MEIN SCHLIMMSTER GRIFF DES TAGES — zurückgenommen. * * Ich wollte „ein Glas pro Stapel" strukturell durchsetzen und habe * geschrieben: alle Nachfahren einer Fläche verlieren ihren * Weichzeichner. Dazu, um auch eine Hash-Klasse zu erwischen, eine * zweite Fassung mit `[class*="__"]`. * * Das war der Totalschaden. In einem BEM-benannten Haus enthält FAST * JEDE Klasse zwei Unterstriche — die Regel hat also nicht „die * verschachtelten Glasflächen" getroffen, sondern praktisch alles. * Zusammen mit der weißen Kachelfüllung wurde aus dem ALIVEMAEX-Raum * eine weiße Seite ohne Material. Max: „macht es immer wieder * schlechter." Zurecht. * * Die Lehre, und sie ist heute die zweite dieser Art (nach den * Klammer-Chips): eine Regel, die ich nicht auf einer Seite ansehen * kann, bevor ich sie schreibe, gehört eng gefasst. `*` und * `[class*="…"]` sind in einem Haus mit 89 CSS-Dateien keine * Werkzeuge, sondern Flächenbrand. * * Was bleibt, ist die gemessene Fassung darüber: drei Namen, auf jeder * Raumseite nachgewiesen. */ /* ── 3 · Flächen — sie tragen Inhalt, also werden sie Glas ────────────── */ html[data-glas="v5"] .home-capture-panel, html[data-glas="v5"] .home-room-strip-cell, html[data-glas="v5"] .room-chamber, html[data-glas="v5"] .room-tile, html[data-glas="v5"] .alivemaex-social-board, html[data-glas="v5"] .continuity-shelf, html[data-glas="v5"] .room-chamber--workbench, html[data-glas="v5"] .environment-hero, html[data-glas="v5"] .home-room-chamber, html[data-glas="v5"] .environment-capture-panel, html[data-glas="v5"] .ablage-panel, html[data-glas="v5"] .zone-material-surface__bundle, html[data-glas="v5"] .zone-operative-stack, html[data-glas="v5"] .system-presence-end, html[data-glas="v5"] .ideas-draft, html[data-glas="v5"] .rr-ave-hero, html[data-glas="v5"] .zeitanker-aurel-tageslage, html[data-glas="v5"] .rr-room-surface, html[data-glas="v5"] .room-chamber--threads, html[data-glas="v5"] .room-threads-panel, html[data-glas="v5"] .ablage-draft, html[data-glas="v5"] .home-room-band-panel, html[data-glas="v5"] .ablage-captured__list, html[data-glas="v5"] .room-worksurface, html[data-glas="v5"] .home-capture-tools, html[data-glas="v5"] .lg-ave-card, html[data-glas="v5"] .semantic-workbench, html[data-glas="v5"] .spatial-chamber, html[data-glas="v5"] .session-header-locus, html[data-glas="v5"] .runtime-integrity-presence__detail, html[data-glas="v5"] .rr-instrument-panel, html[data-glas="v5"] .ds-voice, html[data-glas="v5"] .runtime-session-header, html[data-glas="v5"] .lg-surface, html[data-glas="v5"] .home-living-pulse, html[data-glas="v5"] .alivemaex-creator-presence, html[data-glas="v5"] .operations-panel, html[data-glas="v5"] .writing-carry, html[data-glas="v5"] .connected-system__wick, html[data-glas="v5"] .observatory-chamber__wick, html[data-glas="v5"] .session-recess__well, html[data-glas="v5"] .session-recess__bead, html[data-glas="v5"] .zone-operative-stack__wick, html[data-glas="v5"] .affiliate-zone-surface__led, html[data-glas="v5"] .connected-room-facts__item, html[data-glas="v5"] .aurel-nervous-presence__core, html[data-glas="v5"] .lg-spec-tabs, html[data-glas="v5"] .lg-spec-dock__well, html[data-glas="v5"] .alivemaex-website-entry__open, html[data-glas="v5"] .system-card, html[data-glas="v5"] .system-approval-card, html[data-glas="v5"] .system-command-submit, html[data-glas="v5"] .riss-core-home, html[data-glas="v5"] .session-connector-strip__wick, html[data-glas="v5"] .asb-kpi, html[data-glas="v5"] .asb-mini, html[data-glas="v5"] .asb-htset, html[data-glas="v5"] .asb-tag, html[data-glas="v5"] .asb-tag2, html[data-glas="v5"] .asb-analyst, html[data-glas="v5"] .home-operating-pulse, html[data-glas="v5"] .runtime-integrity-presence__wick, html[data-glas="v5"] .ideas-release, html[data-glas="v5"] .raumriss-seed-room, html[data-glas="v5"] .room-loop-detail, html[data-glas="v5"] .room-loop-detail__close, html[data-glas="v5"] .room-loop-detail__trace-item, html[data-glas="v5"] .system-presence-end__face, html[data-glas="v5"] .rr-card, html[data-glas="v5"] .rr-panel, html[data-glas="v5"] .rr-module, html[data-glas="v5"] .rr-tile { background: var(--rr5-glas) !important; border: 1px solid var(--rr5-linie) !important; /* Eckradius: die eine Änderung, die aus einem Kasten eine Kapsel macht. * Er verschiebt nichts und ändert keine Größe — er ist Material, nicht * Anordnung. Erst ohne ihn probiert, und genau daran blieb es billig. */ border-radius: var(--rr5-r-deck) !important; /* Grat oben innen = Dicke, Fuge unten innen = Auflage. Zusammen ergibt * das eine Kante, die Licht hat, statt einer gezeichneten Linie. */ box-shadow: inset 0 1px 0 var(--rr5-grat), inset 0 -1px 0 var(--rr5-fuge), var(--rr5-schatten) !important; backdrop-filter: var(--rr5-lupe) blur(var(--rr5-weich)) saturate(165%) !important; } /* KEIN GLAS AUF GLAS — die Regel, die am 10.08. dazukam. * * Vorher bekam die verschachtelte Fläche zwar den kleineren Radius, aber * WIEDER ein `backdrop-filter`. Damit lag helles, durchscheinendes * Material auf hellem, durchscheinendem Material — und genau das ist der * eine harte Verbotssatz aus Apples Material-Kapitel: * * „Never stack a light translucent surface on another — * legibility collapses." * * Warum es zusammenbricht: jede Glasschicht zieht Kontrast aus dem, was * hinter ihr liegt. Die erste macht aus dem Grund einen ruhigen Mittelton, * die zweite macht aus diesem Mittelton eine fast tonlose Fläche. Genau * das war Max' Befund „diese graue Schrift kann man nicht lesen" — es lag * nicht an der Schriftfarbe, sondern daran, dass ihr Untergrund zweimal * weichgezeichnet war. * * Richtig ist: EINE Glasebene trägt, alles darin ist ein TÖNUNG auf ihr. * Deshalb hier kein zweiter Weichzeichner, dafür etwas mehr Deckkraft — * die Kachel bleibt als eigene Ebene erkennbar, ohne noch einmal Kontrast * zu fressen. Nebeneffekt: statt bis zu 27 Weichzeichner-Ebenen rechnet * der Browser nur noch die oberste je Stapel. * * Dazu der kleine Schatten statt gar keinem — eine Kachel liegt AUF dem * Deck, nicht IN ihm. */ html[data-glas="v5"] :is(.home-capture-panel, .home-room-strip-cell, .room-chamber, .room-tile, .alivemaex-social-board, .continuity-shelf, .room-chamber--workbench, .environment-hero, .home-room-chamber, .environment-capture-panel, .ablage-panel, .zone-material-surface__bundle, .zone-operative-stack, .system-presence-end, .ideas-draft, .rr-ave-hero, .zeitanker-aurel-tageslage, .rr-room-surface, .room-chamber--threads, .room-threads-panel, .ablage-draft, .home-room-band-panel, .ablage-captured__list, .room-worksurface, .home-capture-tools, .lg-ave-card, .semantic-workbench, .spatial-chamber, .session-header-locus, .runtime-integrity-presence__detail, .rr-instrument-panel, .ds-voice, .runtime-session-header, .lg-surface, .home-living-pulse, .alivemaex-creator-presence, .operations-panel, .writing-carry, .connected-system__wick, .observatory-chamber__wick, .session-recess__well, .session-recess__bead, .zone-operative-stack__wick, .affiliate-zone-surface__led, .connected-room-facts__item, .aurel-nervous-presence__core, .lg-spec-tabs, .lg-spec-dock__well, .alivemaex-website-entry__open, .system-card, .system-approval-card, .system-command-submit, .riss-core-home, .session-connector-strip__wick, .asb-kpi, .asb-mini, .asb-htset, .asb-tag, .asb-tag2, .asb-analyst, .home-operating-pulse, .runtime-integrity-presence__wick, .ideas-release, .raumriss-seed-room, .room-loop-detail, .room-loop-detail__close, .room-loop-detail__trace-item, .system-presence-end__face) :is(.home-capture-panel, .home-room-strip-cell, .room-chamber, .room-tile, .alivemaex-social-board, .continuity-shelf, .room-chamber--workbench, .environment-hero, .home-room-chamber, .environment-capture-panel, .ablage-panel, .zone-material-surface__bundle, .zone-operative-stack, .system-presence-end, .ideas-draft, .rr-ave-hero, .zeitanker-aurel-tageslage, .rr-room-surface, .room-chamber--threads, .room-threads-panel, .ablage-draft, .home-room-band-panel, .ablage-captured__list, .room-worksurface, .home-capture-tools, .lg-ave-card, .semantic-workbench, .spatial-chamber, .session-header-locus, .runtime-integrity-presence__detail, .rr-instrument-panel, .ds-voice, .runtime-session-header, .lg-surface, .home-living-pulse, .alivemaex-creator-presence, .operations-panel, .writing-carry, .connected-system__wick, .observatory-chamber__wick, .session-recess__well, .session-recess__bead, .zone-operative-stack__wick, .affiliate-zone-surface__led, .connected-room-facts__item, .aurel-nervous-presence__core, .lg-spec-tabs, .lg-spec-dock__well, .alivemaex-website-entry__open, .system-card, .system-approval-card, .system-command-submit, .riss-core-home, .session-connector-strip__wick, .asb-kpi, .asb-mini, .asb-htset, .asb-tag, .asb-tag2, .asb-analyst, .home-operating-pulse, .runtime-integrity-presence__wick, .ideas-release, .raumriss-seed-room, .room-loop-detail, .room-loop-detail__close, .room-loop-detail__trace-item, .system-presence-end__face) { border-radius: var(--rr5-r-tile) !important; /* DAS RISS-MATERIAL (10.08., zweiter Anlauf). * * Erster Anlauf war eine flache Füllung mit 34 % Weiß und einem * weißen Grat. Max sah danach zurecht immer noch „das zu helle Glas": * eine hellere weiße Fläche auf einer weißen Fläche ist keine zweite * Ebene, sie ist dieselbe Ebene mit mehr Milch. * * Was fehlt, ist nicht Deckkraft, sondern eine KANTE AUS TON und ein * Verlauf. Genau das macht `.rr-bar-seg` in der Riss-Leiste, und * genau deshalb sieht die Leiste wertig aus und die Kacheln nicht. * * ⚠ Diese Werte stehen bewusst HIER, in der Regel, die schon alle * verschachtelten Flächen trifft — und nicht in einer zweiten Regel * mit einer eigenen, kürzeren Namensliste. Der erste Anlauf hatte * genau das gemacht, und dadurch bekam ein Teil der Kacheln das neue * Material und der Rest das alte. Zwei Listen für dieselbe Sache sind * immer eine Liste zu viel. */ background: var(--rr5-kachel) !important; border: 1px solid rgba(22, 21, 15, 0.08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(22, 21, 15, 0.04), var(--rr5-schatten-kachel) !important; backdrop-filter: none !important; } /* ── 4 · Behälter — sie tragen Anordnung, keinen Inhalt ──────────────── */ html[data-glas="v5"] .home-runtime-shell, html[data-glas="v5"] .room-composition, html[data-glas="v5"] .home-main-stage, html[data-glas="v5"] .workspace-section, html[data-glas="v5"] .home-living-house__layer--focus, html[data-glas="v5"] .room-atrium-layer, html[data-glas="v5"] .home-capture-layer, html[data-glas="v5"] .room-composition__stage, html[data-glas="v5"] .room-chamber--atrium, html[data-glas="v5"] .home-capture-layer--system-lage, html[data-glas="v5"] .home-living-house__layer, html[data-glas="v5"] .bottom-console, html[data-glas="v5"] .riss-core-shell, html[data-glas="v5"] .home-room-strip, html[data-glas="v5"] .home-room-band, html[data-glas="v5"] .runtime-presence-layer, html[data-glas="v5"] .asb-steps, html[data-glas="v5"] .room-root-controls, html[data-glas="v5"] .affiliate-zone-surface__validation-strip, html[data-glas="v5"] .room-threads-layer, html[data-glas="v5"] .session-connector-strip, /* ⚠ 10.08. nachgetragen: `.home-capture-shelf` fehlte in dieser Liste, und genau daran hing DER Strich, den Max sechs Runden lang gesehen hat. Sie ist ein Behälter — sie trägt die Anordnung der Panels darunter, keinen eigenen Inhalt. */ html[data-glas="v5"] .home-capture-shelf { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } /* Schwarz ist ein Akzent, keine Fläche (Gesetz v4.1). Was schon schwarz * ist — ausgewählte Reiter, aktive Zustände — bleibt deckend schwarz und * bekommt KEIN Glas. Sonst verliert es genau die Aussage, für die es da * ist: hier, nicht woanders. */ html[data-glas="v5"] [aria-selected="true"], html[data-glas="v5"] [data-state="active"], html[data-glas="v5"] [aria-current="page"] { backdrop-filter: none !important; } /* Bewegte Flächen bleiben ohne Brechung — der Filter würde bei jedem * Bild neu rechnen und die Animation reißen lassen. */ @media (prefers-reduced-motion: reduce) { html[data-glas="v5"] .home-capture-panel, html[data-glas="v5"] .home-room-strip-cell, html[data-glas="v5"] .room-chamber, html[data-glas="v5"] .room-tile, html[data-glas="v5"] .alivemaex-social-board, html[data-glas="v5"] .continuity-shelf, html[data-glas="v5"] .room-chamber--workbench, html[data-glas="v5"] .environment-hero, html[data-glas="v5"] .home-room-chamber, html[data-glas="v5"] .environment-capture-panel, html[data-glas="v5"] .ablage-panel, html[data-glas="v5"] .zone-material-surface__bundle, html[data-glas="v5"] .zone-operative-stack, html[data-glas="v5"] .system-presence-end, html[data-glas="v5"] .ideas-draft, html[data-glas="v5"] .rr-ave-hero, html[data-glas="v5"] .zeitanker-aurel-tageslage, html[data-glas="v5"] .rr-room-surface, html[data-glas="v5"] .room-chamber--threads, html[data-glas="v5"] .room-threads-panel, html[data-glas="v5"] .ablage-draft, html[data-glas="v5"] .home-room-band-panel, html[data-glas="v5"] .ablage-captured__list, html[data-glas="v5"] .room-worksurface, html[data-glas="v5"] .home-capture-tools, html[data-glas="v5"] .lg-ave-card, html[data-glas="v5"] .semantic-workbench, html[data-glas="v5"] .spatial-chamber, html[data-glas="v5"] .session-header-locus, html[data-glas="v5"] .runtime-integrity-presence__detail, html[data-glas="v5"] .rr-instrument-panel, html[data-glas="v5"] .ds-voice, html[data-glas="v5"] .runtime-session-header, html[data-glas="v5"] .lg-surface, html[data-glas="v5"] .home-living-pulse, html[data-glas="v5"] .alivemaex-creator-presence, html[data-glas="v5"] .operations-panel, html[data-glas="v5"] .writing-carry, html[data-glas="v5"] .connected-system__wick, html[data-glas="v5"] .observatory-chamber__wick, html[data-glas="v5"] .session-recess__well, html[data-glas="v5"] .session-recess__bead, html[data-glas="v5"] .zone-operative-stack__wick, html[data-glas="v5"] .affiliate-zone-surface__led, html[data-glas="v5"] .connected-room-facts__item, html[data-glas="v5"] .aurel-nervous-presence__core, html[data-glas="v5"] .lg-spec-tabs, html[data-glas="v5"] .lg-spec-dock__well, html[data-glas="v5"] .alivemaex-website-entry__open, html[data-glas="v5"] .system-card, html[data-glas="v5"] .system-approval-card, html[data-glas="v5"] .system-command-submit, html[data-glas="v5"] .riss-core-home, html[data-glas="v5"] .session-connector-strip__wick, html[data-glas="v5"] .asb-kpi, html[data-glas="v5"] .asb-mini, html[data-glas="v5"] .asb-htset, html[data-glas="v5"] .asb-tag, html[data-glas="v5"] .asb-tag2, html[data-glas="v5"] .asb-analyst, html[data-glas="v5"] .home-operating-pulse, html[data-glas="v5"] .runtime-integrity-presence__wick, html[data-glas="v5"] .ideas-release, html[data-glas="v5"] .raumriss-seed-room, html[data-glas="v5"] .room-loop-detail, html[data-glas="v5"] .room-loop-detail__close, html[data-glas="v5"] .room-loop-detail__trace-item, html[data-glas="v5"] .system-presence-end__face { backdrop-filter: blur(18px) saturate(155%) !important; } } /* ── 5 · Schrift ───────────────────────────────────────────────────────── * Am lebenden Haus gemessen (Home, 08.08.): 22 Schriftstufen und ZEHN * verschiedene Schriftgewichte auf EINER Seite — 700, 650, 620, 600, 560, * 550, 500, 480, 450, 400. Das ist derselbe Befund wie bei den Radien: * nicht hässlich, sondern unentschieden. Ein Mensch, der ein System * entwirft, hat drei Gewichte. * * Die Größen bleiben, wo sie sind — die sind Anordnung. Geändert werden * nur GEWICHT und LAUFWEITE, und die hängen aneinander: * je größer die Schrift, desto enger muss sie laufen. Die Überschrift * stand auf 700 mit -1,44 px; eine zweite große Zeile im Haus lief mit * PLUS 0,46 px. Zwei große Zeilen, entgegengesetzt eingestellt — genau * das liest das Auge als „gebaut, nicht entworfen". * * Drei Gewichte: 400 Text · 500 Auszeichnung · 600 Titel und Zahl. */ html[data-glas="v5"] h1 { font-weight: 600 !important; letter-spacing: -0.035em !important; } html[data-glas="v5"] .type-body { font-weight: 400 !important; letter-spacing: -0.011em !important; } html[data-glas="v5"] .type-body-strong { font-weight: 500 !important; letter-spacing: 0.06em !important; } /* Die Versalien-Rolle im Haus. `type-meta` heißt so, ist aber das Label — * 819 Verwendungen, deshalb hier und nicht umbenannt. */ html[data-glas="v5"] .type-meta, html[data-glas="v5"] .type-eyebrow, html[data-glas="v5"] .home-stage-kicker { font-weight: 500 !important; letter-spacing: 0.09em !important; } /* ── 5b · ZEILENABSTAND — die Hälfte, die am 08.08. fehlte ───────────── * * Damals wurden Gewicht und Laufweite pro Größe gesetzt, der * Zeilenabstand aber gar nicht: null `line-height` in dieser Datei. Jede * Zeile hat also geerbt, was das Altsystem an der Stelle zufällig * vorgab — unabhängig davon, wie groß sie ist. * * Der Zeilenabstand läuft der Größe ENTGEGEN, genau wie die Laufweite: * je größer die Schrift, desto enger beides. Eine Überschrift mit * Fließtext-Durchschuss zerfällt in einzelne Zeilen, statt als Block zu * stehen; ein Fließtext mit Überschriften-Durchschuss klebt zusammen. * * Deshalb gehören Größe, Gewicht, Laufweite und Durchschuss zusammen * eingestellt — nicht nacheinander. Hier die fehlende vierte Größe. */ html[data-glas="v5"] h1 { line-height: 1.08 !important; } html[data-glas="v5"] h2 { line-height: 1.16 !important; } html[data-glas="v5"] h3 { line-height: 1.26 !important; } html[data-glas="v5"] .type-body { line-height: 1.55 !important; } /* Versalien brauchen mehr Luft als Gemischtschrift: sie haben keine * Unterlängen, dadurch wirken die Zeilen näher, als sie stehen. */ html[data-glas="v5"] .type-meta, html[data-glas="v5"] .type-eyebrow, html[data-glas="v5"] .home-stage-kicker { line-height: 1.45 !important; } /* Ziffern gleicher Breite. Kostet nichts und ist der Unterschied zwischen * einer Uhr, die tickt, und einer, die zappelt. */ html[data-glas="v5"] * { font-variant-numeric: tabular-nums !important; } /* Und die 156 Klassen, die krumme Gewichte tragen (450/480/550/560/620/650). * Auch diese Liste ist gemessen, nicht geraten: jede Regel im Haus, die ein * `font-weight` setzt, das nicht 400/500/600/700 ist — und die im TSX * wirklich benutzt wird. Jede wird auf das nächstliegende der drei * Gewichte gerundet. * * Bewusst NICHT dabei: alles, was oben schon Fläche oder Behälter ist. * Ein Gewicht auf einem Behälter vererbt sich auf jeden Text darin, der * kein eigenes hat — das macht halbe Seiten fett, ohne dass man sieht, * woher es kommt. */ html[data-glas="v5"] .ablage-explanation, html[data-glas="v5"] .ads-control-surface__anchor-prefix, html[data-glas="v5"] .alivemaex-operator__title, html[data-glas="v5"] .alivemaex-readiness__title, html[data-glas="v5"] .alivemaex-room-pulse, html[data-glas="v5"] .alivemaex-room-pulse__world-line, html[data-glas="v5"] .atmo-mark, html[data-glas="v5"] .continuity-fragment__label, html[data-glas="v5"] .der-riss-marginalia--live, html[data-glas="v5"] .der-riss-resonance, html[data-glas="v5"] .ds-card__title, html[data-glas="v5"] .ds-reentry__headline, html[data-glas="v5"] .ds-spec__head, html[data-glas="v5"] .ds-spec__title, html[data-glas="v5"] .ds-tab, html[data-glas="v5"] .happy-flower-ads-aurel__value, html[data-glas="v5"] .home-alive-events__quiet, html[data-glas="v5"] .home-open-risse__action, html[data-glas="v5"] .home-open-risse__tool-select, html[data-glas="v5"] .home-re-entry__line, html[data-glas="v5"] .home-room-chamber__context, html[data-glas="v5"] .home-room-chamber__thread, html[data-glas="v5"] .home-runtime-field__reentry-line, html[data-glas="v5"] .ideas-empty, html[data-glas="v5"] .semantic-workbench__presence, html[data-glas="v5"] .writing-carry__phrase--bare, html[data-glas="v5"] .writing-carry__presence { font-weight: 400 !important; } html[data-glas="v5"] .ads-control-surface__anchor-roas, html[data-glas="v5"] .ads-control-surface__period-label, html[data-glas="v5"] .affiliate-operational-surface__primary, html[data-glas="v5"] .atmo-action--quiet, html[data-glas="v5"] .atmo-chip, html[data-glas="v5"] .atmo-loading, html[data-glas="v5"] .atmo-select-label, html[data-glas="v5"] .aurel-move-layer__reading, html[data-glas="v5"] .ave-presence-line__headline, html[data-glas="v5"] .connected-system__label, html[data-glas="v5"] .current-field__family-segment, html[data-glas="v5"] .der-riss-aperture__text, html[data-glas="v5"] .der-riss-room, html[data-glas="v5"] .der-riss-whisper, html[data-glas="v5"] .hf-weekly-offer__candidate-title, html[data-glas="v5"] .hf-weekly-offer__freshness-state, html[data-glas="v5"] .hf-weekly-offer__sale-product, html[data-glas="v5"] .hf-weekly-offer__slot-product, html[data-glas="v5"] .hf-weekly-offer__summary, html[data-glas="v5"] .home-alive-events__caption, html[data-glas="v5"] .home-capture-header, html[data-glas="v5"] .home-current-focus__line, html[data-glas="v5"] .home-focus-headline--primary, html[data-glas="v5"] .home-living-enter, html[data-glas="v5"] .home-living-title--rest, html[data-glas="v5"] .home-operating-line, html[data-glas="v5"] .home-room-band-header, html[data-glas="v5"] .home-room-chamber__signal, html[data-glas="v5"] .home-runtime-field__warm-name, html[data-glas="v5"] .home-runtime-field__zone-room, html[data-glas="v5"] .home-stage-zone--systems, html[data-glas="v5"] .ideas-filter-pill, html[data-glas="v5"] .material-resolution__option-label, html[data-glas="v5"] .material-resolution__room-btn, html[data-glas="v5"] .material-resolution__zone-btn, html[data-glas="v5"] .not-found-return, html[data-glas="v5"] .operational-atmosphere__primary, html[data-glas="v5"] .operational-field__line, html[data-glas="v5"] .os-kicker, html[data-glas="v5"] .os-label, html[data-glas="v5"] .os-title, html[data-glas="v5"] .presence-clock-meta, html[data-glas="v5"] .project-reality__title, html[data-glas="v5"] .riss-core-form__riss-row, html[data-glas="v5"] .riss-core-input, html[data-glas="v5"] .riss-core-room-context, html[data-glas="v5"] .riss-core-room-context--thumb, html[data-glas="v5"] .riss-trace__actions-advanced-entry, html[data-glas="v5"] .riss-trace__actions-chip, html[data-glas="v5"] .riss-trace__label, html[data-glas="v5"] .riss-trace__routing-flow-room, html[data-glas="v5"] .riss-traces-shelf__title, html[data-glas="v5"] .room-chamber--material-notes, html[data-glas="v5"] .room-chamber--material-refs, html[data-glas="v5"] .room-chamber--material-tasks, html[data-glas="v5"] .room-chamber-kicker, html[data-glas="v5"] .room-material-slip__body, html[data-glas="v5"] .room-nav-rail__zone, html[data-glas="v5"] .room-periphery-rail, html[data-glas="v5"] .room-root-step, html[data-glas="v5"] .room-threads-panel__title, html[data-glas="v5"] .room-zone-overview__title, html[data-glas="v5"] .rr-bar-act, html[data-glas="v5"] .rr-btn, html[data-glas="v5"] .rr-label, html[data-glas="v5"] .runtime-instrument-deck, html[data-glas="v5"] .runtime-integrity-presence__primary, html[data-glas="v5"] .runtime-session-header__actions, html[data-glas="v5"] .session-header-locus__mark, html[data-glas="v5"] .session-header-locus__room, html[data-glas="v5"] .session-header-locus__zone, html[data-glas="v5"] .session-recess__label, html[data-glas="v5"] .shopify-operational-surface__primary, html[data-glas="v5"] .system-presence-end__action, html[data-glas="v5"] .task-chamber-save, html[data-glas="v5"] .text-riss-text, html[data-glas="v5"] .type-label, html[data-glas="v5"] .type-operational-phase, html[data-glas="v5"] .type-section-subtitle, html[data-glas="v5"] .writing-carry__phrase, html[data-glas="v5"] .zeitanker-aurel-tageslage__stat, html[data-glas="v5"] .zeitanker-handoff-card__chip, html[data-glas="v5"] .zone-material-surface__bundle-head, html[data-glas="v5"] .zone-material-surface__bundle-label, html[data-glas="v5"] .zone-material-surface__tile-title, html[data-glas="v5"] .zone-material-surface__wall-more-count { font-weight: 500 !important; } html[data-glas="v5"] .alivemaex-website-entry__title, html[data-glas="v5"] .arb-track__title, html[data-glas="v5"] .atmospheric-title, html[data-glas="v5"] .hf-operating-card__metric-primary, html[data-glas="v5"] .home-alive-system__label, html[data-glas="v5"] .home-focus-headline, html[data-glas="v5"] .home-living-title, html[data-glas="v5"] .home-room-chamber__name, html[data-glas="v5"] .presence-clock-time, html[data-glas="v5"] .room-identity-strip__title, html[data-glas="v5"] .room-nav-rail__label, html[data-glas="v5"] .room-nav-rail__zone-title, html[data-glas="v5"] .rr-entry-gate__title, html[data-glas="v5"] .rr-page-title, html[data-glas="v5"] .runtime-session-header__clock, html[data-glas="v5"] .type-section-title { font-weight: 600 !important; } /* Die letzten drei Ausreißer, im DOM nachgemessen statt gesucht: * `home-system-mark` und `riss-der-riss-label` liefen auf 560, * `rr-title` (Kit) auf 650. Und die Uhr trug als einzige Fläche im * Haus 20,8 px Radius — der vierte Radius, den es nicht geben darf. */ html[data-glas="v5"] .home-system-mark, html[data-glas="v5"] .riss-der-riss-label { font-weight: 500 !important; } html[data-glas="v5"] .rr-title { font-weight: 600 !important; letter-spacing: -0.022em !important; } html[data-glas="v5"] .rr-clock-dark, html[data-glas="v5"] .environment-entrance__system { border-radius: var(--rr5-r-deck) !important; } /* ── 6 · Der halb leere Rahmen ─────────────────────────────────────────── * Am lebenden Haus gemessen (Home, 08.08.), Füllgrad = Textfläche geteilt * durch Panelfläche: * * SITE-EFFECT-Panels 1382 × 165 px 25 % gefüllt * AUREL-Tageslage 1382 × 492 px 6 % gefüllt * AVE-Zeile 1380 × 354 px 0 % — gar kein Text * * Das ist der dritte Befund aus DESIGN-GESETZ.md, in Zahlen: ein halb * leerer Rahmen liest sich als Fehler, nicht als Fläche. Kein Glas und * keine Schrift der Welt reparieren das — nur die Breite. * * Die Ursache ist strukturell: `.home-capture-layer` ist `display:block`. * Zwei kurze Panels darin liegen zwangsläufig untereinander und ziehen * sich beide auf volle Breite, egal wie wenig drin steht. */ html[data-glas="v5"] .home-capture-layer { /* `auto-fit` entscheidet selbst und braucht kein Wissen über den Inhalt: * ein Panel bleibt breit, zwei kurze rücken nebeneinander, und in einer * schmalen Spalte fällt es von allein wieder auf eine Reihe zurück. * Ein Panel unter 460 px wäre keine Fläche mehr, sondern ein Streifen — * daher die Untergrenze. * * ⚠ `min(460px, 100%)` statt nur `460px`, und das ist keine Feinheit: * `.home-capture-tools` ist bereits ein Raster mit 332 px breiten * Zellen. Eine feste Untergrenze von 460 px passt da nicht hinein — * das Panel wurde 460 px breit in einer 330-px-Zelle, lief 147 px über * und überlappte den Nachbarn, mitten im Wort abgeschnitten. Ein * Rasterelement schrumpft NICHT unter seine Mindestbreite; nur `min()` * lässt die Untergrenze bei Bedarf auf die volle Zellbreite fallen. */ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)) !important; min-width: 0 !important; gap: 16px !important; align-items: start !important; } /* Die AVE-Zeile hält 354 px Höhe frei für eine Textspalte, die gerade * leer ist. Sie mittig zu setzen kostet nichts. * * ⚠ NICHT die Kugel begrenzen: `max-height` auf `.rr-ave-orb-button` * quetscht sie zur Ellipse (einmal probiert, 300×300 wurde 300×200). * Die leere AVE-Zeile ist ohnehin kein Design-, sondern ein Inhalts- * problem — AVE hat gerade nichts zu sagen. Das gehört in die * Komponente, nicht in die Design-Schicht. */ html[data-glas="v5"] .ave-presence-line { align-items: center !important; } /* ── 7 · Tinte ─────────────────────────────────────────────────────────── * Auf Glas über einem Foto braucht Text MEHR Kontrast, nicht weniger: * der Untergrund ist unruhig, und jede Aufhellung frisst Lesbarkeit. * Die Nebentexte im Haus lagen bei rund 45 % Deckkraft — auf weißem * Grund geht das, auf Glas nicht. */ html[data-glas="v5"] { --text-secondary: rgba(23, 20, 15, 0.68) !important; --text-tertiary: rgba(23, 20, 15, 0.5) !important; --text-muted: rgba(23, 20, 15, 0.5) !important; } /* ── 8 · Der Kopf ──────────────────────────────────────────────────────── * Im DOM nachgemessen (Home, 08.08.): * * home-system-mark „RAUMRISS" 415→477 y102 * environment-hero Begrüßung 415→1343 y127 ← Glaskasten * home-entrance-presence „Aktiver…" 415→1087 y261 * rr-clock-dark die Uhr 1504→1792 y103 * * Drei Fehler auf einmal: * * 1. Die Begrüßung sitzt in einer 928 px breiten Glasfläche und trägt * zwei Zeilen. Das ist wörtlich §7.3 des Gesetzes — kein Rahmen um * einen Satz. Ein Satz ist Text auf dem Grund. Der Kasten kommt weg; * die Zeile darunter, die vorher an ihm klebte, wird dadurch frei. * * 2. Marke, Begrüßung und „Aktiver Block" gehören zusammen, stehen aber * als drei lose Blöcke da — dazwischen 25 und 21 px, also fast, aber * nicht ganz gleich. Genau dieses „fast" liest das Auge als Fehler * (DESIGN-GESETZ.md, zweiter Befund). Jetzt ein Rhythmus: 10 px vom * Label zur Zeile, 14 px zur Fußzeile. * * 3. Uhr und linke Spalte starten auf verschiedenen Oberkanten * (y103 gegen y102) und sind verschieden hoch. Beide auf dieselbe * Oberkante, oben ausgerichtet statt gestreckt. * * Die Uhr selbst bleibt, wie sie ist: sie ist das einzige Schwarz im * Bild und damit der Akzent, den das Gesetz vorsieht. */ html[data-glas="v5"] .environment-hero { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; } html[data-glas="v5"] .environment-entrance { display: flex !important; align-items: flex-start !important; gap: 32px !important; } html[data-glas="v5"] .environment-entrance__presence { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; flex: 1 1 auto !important; min-width: 0 !important; /* Trug 13,6 px Innenabstand oben — dadurch stand die Marke 13 px tiefer * als die Uhr, obwohl beide in derselben Zeile sitzen. */ padding-top: 0 !important; } /* Und die Marke trug 11,5 px Außenabstand ZUSÄTZLICH zum Flex-Abstand: * 10 + 11,5 = 21,5 px, wo 10 gemeint waren. Genau so entstehen die * „fast gleichen" Abstände, die das Auge als Fehler liest. */ html[data-glas="v5"] .home-system-mark { margin: 0 !important; } html[data-glas="v5"] .environment-entrance__system { flex: 0 0 auto !important; align-self: flex-start !important; } /* Die Zeile „Aktiver Block" ist die Fußzeile der Begrüßung, nicht ein * eigener Abschnitt. Also rückt sie an sie heran statt in die Schwebe. */ html[data-glas="v5"] .home-entrance-presence { margin-top: 6px !important; } html[data-glas="v5"] .environment-stage { padding-bottom: 0 !important; } /* Der Puls-Punkt schob den Text 24 px nach rechts — als einzige Zeile im * Kopf, während Marke, Überschrift und Unterzeile alle bei derselben * Kante stehen. Ein Versatz, den niemand entschieden hat, ist genau der * Fehler aus DESIGN-GESETZ.md: 0 px oder 64 px, nichts dazwischen. * Der Punkt hängt jetzt links aus, wie ein Aufzählungszeichen im * Satzspiegel — die Schrift steht wieder auf der gemeinsamen Kante. */ html[data-glas="v5"] .home-operating-line { position: relative !important; padding-left: 0 !important; gap: 0 !important; } html[data-glas="v5"] .home-operating-pulse { position: absolute !important; left: -16px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* ── 9 · Der Orb liegt frei ────────────────────────────────────────────── * Gemessen: `rr-ave-hero` war 1384 × 494 px bei 6 % Füllung, und darin * lag `ave-presence-line` mit 1380 × 354 px bei 0 % — zwei ineinander * geschachtelte Glaskästen um eine Kugel und einen leeren Textbereich. * Drei Rahmen für einen Inhalt. Das ist §7.3 in Reinform. * * Die Kugel braucht keinen Kasten. Sie IST das Objekt — sie liegt auf * dem Grund, wie der Titel im Kopf. Was einen Kasten braucht, ist die * Tageslage darunter: die trägt Text, also bekommt sie das Glas. */ html[data-glas="v5"] .rr-ave-hero, html[data-glas="v5"] .ave-presence-line, html[data-glas="v5"] .lg-ave-card, html[data-glas="v5"] .home-capture-layer--system-lage > .home-capture-panel { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } /* Die Tageslage trägt Inhalt — also ist sie eine Fläche, und zwar eine * eigene, nicht der Rest eines aufgelösten Kastens. */ html[data-glas="v5"] .zeitanker-aurel-tageslage { background: var(--rr5-glas) !important; border: 1px solid var(--rr5-linie) !important; border-radius: var(--rr5-r-deck) !important; box-shadow: inset 0 1px 0 var(--rr5-grat), inset 0 -1px 0 var(--rr5-fuge), var(--rr5-schatten) !important; backdrop-filter: var(--rr5-lupe) blur(var(--rr5-weich)) saturate(165%) !important; padding: 22px 24px !important; } /* ── 10 · Signale ──────────────────────────────────────────────────────── * Hier gilt das Gegenteil der bisherigen Regel, und das ist kein * Widerspruch: „Farbe kommt einmal vor" ist eine Regel für SCHMUCK. * Ein Bedienelement, das einen Zustand zeigt, ist kein Schmuck — es ist * Information. Wenn man auswählen soll, muss man sehen, was man wählt. * * Gemessen war beides unlesbar: * .rr-dot--quiet 7 px in Salbei/Ocker/Altrosa (111,122,86 · 176,105,58 * · 167,106,106) — gedämpfte Töne auf hellem Glas, bei * 7 px praktisch grau * .rr-meter__tick rgba(22,21,15,0.07) — 7 % Deckkraft, faktisch weg * * Ein 7-px-Punkt braucht VOLLE Sättigung, um überhaupt eine Farbe zu * haben: bei der Größe mittelt das Auge über die Kante mit, jeder * gedämpfte Ton wird zu Grau. Deshalb hier die einzigen drei satten * Farben im ganzen Haus — und dazu ein Ring, damit der Punkt auch auf * unruhigem Grund steht. */ html[data-glas="v5"] { --rr5-gut: 46 160 67; --rr5-mittel: 240 138 20; --rr5-warn: 224 58 46; } html[data-glas="v5"] .rr-seg__item .rr-dot { width: 9px !important; height: 9px !important; } html[data-glas="v5"] .rr-seg__item:nth-of-type(1) .rr-dot { background: rgb(var(--rr5-gut)) !important; box-shadow: 0 0 0 3px rgba(var(--rr5-gut), 0.22) !important; } html[data-glas="v5"] .rr-seg__item:nth-of-type(2) .rr-dot { background: rgb(var(--rr5-mittel)) !important; box-shadow: 0 0 0 3px rgba(var(--rr5-mittel), 0.22) !important; } html[data-glas="v5"] .rr-seg__item:nth-of-type(3) .rr-dot { background: rgb(var(--rr5-warn)) !important; box-shadow: 0 0 0 3px rgba(var(--rr5-warn), 0.22) !important; } /* Der gewählte Zustand muss sich vom wählbaren unterscheiden — sonst * sieht man drei Farben und weiß trotzdem nicht, welche gilt. */ html[data-glas="v5"] .rr-seg__item[aria-pressed="true"] { background: rgba(255, 255, 255, 0.72) !important; box-shadow: inset 0 0 0 1px rgba(23, 20, 15, 0.14) !important; font-weight: 600 !important; } /* Die Pegel-Striche: von 7 % auf 22 % Deckkraft, damit die Skala * überhaupt eine Skala ist und man sieht, wohin man greift. */ html[data-glas="v5"] .rr-meter__tick { background: rgba(23, 20, 15, 0.22) !important; } html[data-glas="v5"] .rr-meter:hover .rr-meter__tick { background: rgba(23, 20, 15, 0.32) !important; } /* ── 11 · Kein Grau mehr ───────────────────────────────────────────────── * Gemessen: die Nebentexte standen auf `rgb(110,110,115)` und * `rgb(134,134,139)` — Apples kalte Ink-Ramp (#6e6e73 / #86868b), im * Haus über 18 Token verteilt. * * Auf weißem Grund ist das richtig. Auf einem warmen Foto ist es die * schlechteste mögliche Wahl, aus zwei Gründen gleichzeitig: * – KALT gegen WARM: das Grau kippt optisch ins Blaue und wirkt * schmutzig, weil ringsum Orange und Grün liegen. * – HELLIGKEIT als Hierarchie funktioniert nur, wenn der Untergrund * ruhig ist. Hier wechselt er unter jedem Absatz die Helligkeit — * also verschwindet blasser Text mal und mal nicht. * * Deshalb: Hierarchie läuft ab hier über GEWICHT und GRÖSSE, nicht über * Blässe. Die Tinte bleibt dieselbe warme Farbe, nur in zwei Stufen — * und beide sind kräftig genug, um auf dem Bild zu stehen. */ html[data-glas="v5"] { --ds-ink-soft: rgba(28, 23, 16, 0.86) !important; --env-text-secondary: rgba(28, 23, 16, 0.86) !important; --home-cleanup-ink-soft: rgba(28, 23, 16, 0.86) !important; --session-bar-ink-soft: rgba(28, 23, 16, 0.86) !important; --work-ink-soft: rgba(28, 23, 16, 0.86) !important; --gravity-ink-soft: rgba(28, 23, 16, 0.86) !important; --dq-ink-soft: rgba(28, 23, 16, 0.86) !important; --text-secondary: rgba(28, 23, 16, 0.86) !important; --ds-ink-faint: rgba(28, 23, 16, 0.7) !important; --env-text-muted: rgba(28, 23, 16, 0.7) !important; --home-cleanup-ink-faint: rgba(28, 23, 16, 0.7) !important; --session-bar-ink-faint: rgba(28, 23, 16, 0.7) !important; --gravity-ink-faint: rgba(28, 23, 16, 0.7) !important; --dq-ink-faint: rgba(28, 23, 16, 0.7) !important; --riss-core-muted: rgba(28, 23, 16, 0.7) !important; --riss-hw-muted: rgba(28, 23, 16, 0.7) !important; --riss-hw-faint: rgba(28, 23, 16, 0.7) !important; --text-muted: rgba(28, 23, 16, 0.7) !important; --text-tertiary: rgba(28, 23, 16, 0.7) !important; --text-faint: rgba(28, 23, 16, 0.7) !important; } /* Und die Stellen, die das Grau hart hineingeschrieben haben, an den * Token vorbei. Behälter sind ausgenommen — eine Textfarbe auf einem * Behälter vererbt sich auf alles darin. */ html[data-glas="v5"] .der-riss-marginalia, html[data-glas="v5"] .home-operating-line, html[data-glas="v5"] .home-room-band, html[data-glas="v5"] .home-room-chamber, html[data-glas="v5"] .home-room-chamber__context, html[data-glas="v5"] .home-room-chamber__signal, html[data-glas="v5"] .home-room-chamber__subline, html[data-glas="v5"] .home-room-strip-cell, html[data-glas="v5"] .lg-spec-dock__well, html[data-glas="v5"] .lg-spec-tab, html[data-glas="v5"] .lg-spec-tile__label, html[data-glas="v5"] .lg-spec-token, html[data-glas="v5"] .operational-field--embedded, html[data-glas="v5"] .operational-field__line, html[data-glas="v5"] .room-fold__head, html[data-glas="v5"] .room-tile { color: rgba(28, 23, 16, 0.78) !important; } /* ── 12 · Die Räume ────────────────────────────────────────────────────── * Befund: in den Räumen standen 17 Textblöcke direkt auf dem Foto, ohne * jede Fläche darunter — unlesbar, weil der Grund unter jedem Absatz die * Helligkeit wechselt. * * Ursache war ein Sortierfehler von mir: `.room-composition__stage` trägt * ZWEI Klassen, `__stage` und `rr-room-surface`. Meine Behälter-Regel * greift auf `__stage` und steht später in der Datei — also hat sie die * Raum-Fläche geleert, die `rr-room-surface` eigentlich ist. Ein Element * kann eben beides heißen; die Namensheuristik allein reicht nicht. * * Die Regel dahinter, die das Gesetz bisher nicht ausgesprochen hat: * WO TEXT STEHT, MUSS EINE FLÄCHE SEIN. Auf einem Foto ist das keine * Stilfrage — Text ohne Fläche ist schlicht nicht lesbar. */ html[data-glas="v5"] .rr-room-surface { background: var(--rr5-glas) !important; border: 1px solid var(--rr5-linie) !important; border-radius: var(--rr5-r-deck) !important; box-shadow: inset 0 1px 0 var(--rr5-grat), inset 0 -1px 0 var(--rr5-fuge), var(--rr5-schatten) !important; backdrop-filter: var(--rr5-lupe) blur(var(--rr5-weich)) saturate(165%) !important; padding: 26px !important; } /* Die Einträge darin sind Kacheln, keine losen Absätze: eine Sache, ein * Klick, eine Fläche. */ html[data-glas="v5"] .site-effect-agency-cockpit-entry { /* Kein zweiter Weichzeichner — sie liegt auf einer Glasfläche. * Siehe die Begründung bei „KEIN GLAS AUF GLAS" weiter oben. * Dieselben Werte wie dort: diese Regel steht später in der Datei und * würde sonst als einzige Kachel im Haus das alte Material behalten. */ background: var(--rr5-kachel) !important; border: 1px solid rgba(22, 21, 15, 0.08) !important; border-radius: var(--rr5-r-tile) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(22, 21, 15, 0.04), var(--rr5-schatten-kachel) !important; backdrop-filter: none !important; padding: 16px 18px !important; } /* ── 13 · Weiße Schrift auf hellem Glas ────────────────────────────────── * Der Spiegelfehler zu §11. Dort war Text zu blass, hier ist er FAST * WEISS — `rgb(233,229,219)` auf `rgb(236,220,199)`. Kontrast 1,07:1. * Lesbar ist ab etwa 4,5:1. Die Abmelden-Leiste war nicht verschwunden, * sie war nur unsichtbar. * * Herkunft: der erste Wurf von heute früh (`raumriss-glas.css`) baute ein * DUNKLES Gehäuse und hat dafür die Schrift aufgehellt. Das Gehäuse ist * abgeschaltet, die Aufhellung war es nicht. * * Gefunden wurde das nicht durch Suchen nach Klassennamen, sondern durch * Messen: für jedes Textelement die Leuchtdichte der Schrift gegen die * des ersten deckenden Untergrunds. Nur so trennt man „weiß auf hell" * (Fehler) von „weiß auf schwarzem Knopf" (richtig). */ html[data-glas="v5"] .session-header-locus__mark, html[data-glas="v5"] .session-header-locus__room, html[data-glas="v5"] .system-presence-end__action { color: rgba(28, 23, 16, 0.86) !important; } /* ── 14 · Kontrast-Untergrenze ─────────────────────────────────────────── * Kontrast im laufenden Browser gemessen, Text gegen den tatsächlich * gerenderten Untergrund. Elf Stellen lagen unter 3,4:1 — lesbar wird es * ab etwa 4,5:1. Zwei Quellen, beide an §11 vorbei: * * --rr-ink-faint rgba(22,21,15,0.46) aus dem KIT * --text-faint #86868b Rest der kalten Ink-Ramp * * 46 % Deckkraft ist auf weißem Grund eine Nuance. Auf einem Foto ist es * ein Verschwinden: der Untergrund wechselt unter demselben Absatz die * Helligkeit, also ist derselbe Text stellenweise da und stellenweise * nicht. Deshalb hier eine harte Untergrenze statt einer Abstufung. * * ⚠ Was die Messung NICHT sieht: die Uhr. Sie ist eine dunkle Fläche, * weiße Schrift darauf ist richtig — im Messwert erscheint sie trotzdem * als Fehler, weil ihr Untergrund ein Verlauf ist und kein Farbwert. * Deshalb ist sie hier ausgenommen und NICHT „korrigiert". */ html[data-glas="v5"] { --rr-ink-soft: rgba(28, 23, 16, 0.86) !important; --rr-ink-faint: rgba(28, 23, 16, 0.68) !important; --text-faint: rgba(28, 23, 16, 0.68) !important; } html[data-glas="v5"] .rr-label, html[data-glas="v5"] .rr-meter__anchor, html[data-glas="v5"] .rr-fold__summary, html[data-glas="v5"] .riss-der-riss-label, html[data-glas="v5"] .zeitanker-aurel-tageslage__next-label, html[data-glas="v5"] .presence-clock-meta:not(.rr-clock-dark *) { color: rgba(28, 23, 16, 0.82) !important; } /* Der Akzent als SCHRIFT ist etwas anderes als der Akzent als Punkt. * Burnt Orange (216,108,42) hat auf hellem Glas eine Leuchtdichte nahe * am Untergrund — als 6-px-Punkt trägt es, als 11-px-Versalzeile nicht. * Für Text also derselbe Ton, aber deutlich dunkler eingestellt. */ html[data-glas="v5"] .type-meta, html[data-glas="v5"] .type-eyebrow, html[data-glas="v5"] .home-stage-kicker, html[data-glas="v5"] .os-label, html[data-glas="v5"] .os-kicker, html[data-glas="v5"] .rr-label--tone, html[data-glas="v5"] .atmospheric-kicker { color: rgba(28, 23, 16, 0.82) !important; } html[data-glas="v5"] [class*="__kicker"], html[data-glas="v5"] [class*="-kicker"] { color: #7d3510 !important; } /* ⚠ Die AUREL-Tageslage stand hier mit im Akzent — und sie ist der * Sonderfall, den der Prüflauf gefunden hat: sie liegt als einziger * dieser Blöcke DIREKT AUF DEM GRUND, ohne Fläche darunter. * * Gerechnet, nicht geschätzt: rgb(125, 53, 16) auf dem hellen Teil des * Grundes ergibt Kontrast 7,24 — auf dem dunklen Teil 2,79. AA verlangt * 4,5. Auf einer weißen Karte wäre derselbe Ton völlig in Ordnung; auf * einem Foto, das zwischen hell und dunkel wandert, ist er auf der * halben Fläche schlicht weg. * * Der ganze Block geht deshalb auf Tinte — Beschriftung, Zahl, nächster * Schritt und Hinweis. */ html[data-glas="v5"] .zeitanker-aurel-tageslage .type-meta, html[data-glas="v5"] [class*="zeitanker-aurel-tageslage__"] { color: rgba(28, 23, 16, 0.74) !important; } /* ── 15 · Die Tokens überall setzen, nicht nur am ───────────────── * §11 und §14 haben die Tinte am `html` neu gesetzt — und trotzdem blieb * `#86868b` an vielen Stellen stehen. Der Grund ist dieselbe Falle, die * das KIT im eigenen Kopf dokumentiert (raumriss-kit.css, Z. 40 ff.): * * Ein benutzerdefinierter Wert wird VERERBT. Was auf einem NÄHEREN * Vorfahren steht, ist für ein Element näher als das, was am `html` * steht — egal wie wichtig es dort deklariert wurde. Wichtigkeit * schlägt Wichtigkeit nur auf DEMSELBEN Element. * * Das Haus definiert diese Tokens in mehreren Zwischenschichten neu. * Deshalb hier auf dem Universalselektor: das ist die einzige Stelle, * die auf JEDEM Element gilt und damit von keiner Zwischenschicht mehr * unterlaufen werden kann. * * Und die Werte sind bewusst hoch: 0,72 ergab gemessen 2,99:1, immer noch * unter der Grenze. Auf einem Foto gibt es keine leise Nuance — entweder * der Text steht, oder er ist weg. */ html[data-glas="v5"] * { --text-secondary: rgba(28, 23, 16, 0.92) !important; --rr-ink-soft: rgba(28, 23, 16, 0.92) !important; --ds-ink-soft: rgba(28, 23, 16, 0.92) !important; --env-text-secondary: rgba(28, 23, 16, 0.92) !important; --home-cleanup-ink-soft: rgba(28, 23, 16, 0.92) !important; --session-bar-ink-soft: rgba(28, 23, 16, 0.92) !important; --work-ink-soft: rgba(28, 23, 16, 0.92) !important; --gravity-ink-soft: rgba(28, 23, 16, 0.92) !important; --dq-ink-soft: rgba(28, 23, 16, 0.92) !important; --text-tertiary: rgba(28, 23, 16, 0.82) !important; --text-muted: rgba(28, 23, 16, 0.82) !important; --text-faint: rgba(28, 23, 16, 0.82) !important; --rr-ink-faint: rgba(28, 23, 16, 0.82) !important; --ds-ink-faint: rgba(28, 23, 16, 0.82) !important; --env-text-muted: rgba(28, 23, 16, 0.82) !important; --riss-core-muted: rgba(28, 23, 16, 0.82) !important; --riss-hw-muted: rgba(28, 23, 16, 0.82) !important; --riss-hw-faint: rgba(28, 23, 16, 0.82) !important; --home-cleanup-ink-faint: rgba(28, 23, 16, 0.82) !important; --session-bar-ink-faint: rgba(28, 23, 16, 0.82) !important; --gravity-ink-faint: rgba(28, 23, 16, 0.82) !important; --dq-ink-faint: rgba(28, 23, 16, 0.82) !important; } /* Die dunkle Insel nimmt sich ihre helle Schrift zurück — dort ist weiß * richtig, und der Universalselektor oben würde sie sonst mit dunkler * Tinte zuschütten. * * ⚠ NUR die Uhr. Erster Versuch zählte auch `riss-core-shell` und * `raumriss-runtime-dock` dazu — beide sind aber HELLES Glas, und die * hellen Tokens haben dort die Beschriftungen „RAUM" und „AUREL" * unsichtbar gemacht. Nicht messbar gewesen, weil alle drei ihren * Hintergrund über einen Verlauf setzen und nicht über `background-color`; * die Leuchtdichte-Messung läuft an ihnen vorbei bis zum Body. Also: * hier keine Heuristik, sondern die eine Fläche, von der es bekannt ist. */ html[data-glas="v5"] .rr-clock-dark *, html[data-glas="v5"] [class*="clock-dark"] * { --text-secondary: rgba(245, 245, 247, 0.72) !important; --text-tertiary: rgba(245, 245, 247, 0.58) !important; --text-muted: rgba(245, 245, 247, 0.58) !important; --text-faint: rgba(245, 245, 247, 0.5) !important; --rr-ink-soft: rgba(245, 245, 247, 0.72) !important; --rr-ink-faint: rgba(245, 245, 247, 0.55) !important; } /* ── 16 · Die Uhr, zuletzt ─────────────────────────────────────────────── * Die Kontrast-Korrekturen oben greifen über Klassennamen und Tokens — * und treffen dabei auch, was IN der dunklen Uhr liegt: `Samstag · Arbeit` * und die Verbindungs-Chips standen plötzlich in dunkler Tinte auf * schwarzem Grund, also wieder unsichtbar, nur andersherum. * * `:not(.rr-clock-dark *)` an den einzelnen Regeln hat nicht gereicht. * Deshalb steht das hier ganz am Ende: bei gleicher Wichtigkeit und * gleicher Spezifität gewinnt die spätere Regel. Eine Ausnahme, die * zuverlässig wirkt, ist eine Ausnahme am Schluss. * * Die Uhr ist der eine schwarze Akzent im Bild (Gesetz v4.1) — was auf * ihr steht, ist hell. Ohne Wenn und Aber. */ html[data-glas="v5"] .rr-clock-dark, html[data-glas="v5"] .rr-clock-dark *, html[data-glas="v5"] [class*="clock-dark"] * { color: rgba(245, 245, 247, 0.82) !important; } html[data-glas="v5"] .rr-clock-dark .presence-clock-time { color: #fff !important; } /* ── 17 · Session-Leiste, Orb-Kasten, Orb ──────────────────────────────── * Drei Dinge, die nur am Ende der Datei zuverlässig sitzen: bei gleicher * Wichtigkeit und Spezifität gewinnt die spätere Regel, und alle drei * müssen frühere Regeln dieser Datei überstimmen. */ /* a · Die Leiste oben rechts. Sie war zuletzt fast unsichtbar — jetzt * richtiges Glas mit Grat und Kante, wie jede andere Fläche auch. */ html[data-glas="v5"] .runtime-session-header { background: rgba(255, 255, 255, 0.4) !important; border: 1px solid var(--rr5-linie) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 var(--rr5-grat), inset 0 -1px 0 var(--rr5-fuge), 0 8px 20px -12px rgba(72, 52, 32, 0.28) !important; backdrop-filter: var(--rr5-lupe) blur(18px) saturate(165%) !important; padding: 6px 14px !important; } /* Die Uhrzeit darin stand auf Weiß — auf hellem Glas also nicht da. * Sie ist die einzige Zahl in der Leiste, also trägt sie das volle * Gewicht der Tinte. */ html[data-glas="v5"] .runtime-session-header .presence-clock-time, html[data-glas="v5"] .runtime-session-header .aurel-nervous-presence__header-label, html[data-glas="v5"] .runtime-session-header .aurel-nervous-presence__header-meta { color: rgba(24, 20, 14, 0.92) !important; } /* b · Der Orb ohne Kasten. §9 hatte `ave-presence-line` schon entglast, * aber die Regel für verschachtelte Flächen steht später und hat ihr * den Hintergrund wieder gegeben. Deshalb hier, ganz am Schluss. */ html[data-glas="v5"] .ave-presence-line, html[data-glas="v5"] .lg-ave-card, html[data-glas="v5"] .rr-ave-hero, html[data-glas="v5"] .rr-ave-row { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; } /* c · Der Orb — ein Körper, kein Leuchten ───────────────────────────── * Vorher: eine blaue Kugel mit dünnen Drahtringen und Neon-Kern. Das ist * die Bildsprache jedes Sprachassistenten seit zehn Jahren, und sie * gehört nicht zu einem Haus, das aus Burnt Orange und 70er-Material * gebaut ist. Erster Versuch war, das Vorhandene warm einzufärben — * falsch: eine gelbe Version desselben Klischees ist dasselbe Klischee. * * Jetzt ein Objekt aus der Zeit. Vier Dinge machen den Unterschied * zwischen einem 3D-KÖRPER und einem Schein: * * 1 TERMINATOR Die harte Grenze zwischen Licht und Schatten. Ein * Leuchten hat sie nicht, eine Kugel schon. Sie allein * macht aus einem Kreis eine Kugel. * 2 MATT Kein weißer Glanzpunkt. Space Age ist eloxiertes * Metall und Kunststoff, keine Glaskugel — das Licht * liegt breit auf der Fläche, nicht als Punkt. * 3 RINGE Zwei gekippte Bahnen in Perspektive, wie an einem * Modell aus der Zeit. Nicht konzentrisch und flach, * sondern schräg im Raum, mit einer hellen Seite: * die Kante, die zum Licht zeigt. * 4 BODEN Ein weicher Schatten darunter. Ohne ihn schwebt * nichts, es klebt nur. * * Bewegung: langsame Drehung der Bahnen, gegenläufig, 22 und 34 s. * Kein Pulsieren. Ein Objekt atmet nicht — es dreht sich. * * Das