/* ============================================================ SUITE-1-BASIS — basis-suite1.css (Chrome-Ausbaustufe, Block S4.2) Das Optikpaket der ERSTEN Suite (the-o-squad Geschäfts-Suite): Tokens, Farben hell + dunkel, Formen, wiederkehrende Bausteine. Herkunft: hermod/static/app.css (Stand Commit 906febc, 2.606 Z.) — die Basis-Abschnitte laut Schnittliste werkstatt/konzepte/s4-schnittliste-v01-2026-07-31.md §2.1, WOERTLICH uebernommen (mechanisch ausgeschnitten statt abgetippt, Lehre H5.5a). Zuteilung: werkstatt/konzepte/design-verteilregister-v01-2026-07-31.md. REGELN: - Dieses Paket traegt das PROVISORIUM (LIES-MICH.md §4). Wenn die neue Markensprache steht, werden HIER die Werte getauscht und das Fundament angehoben — die Apps bleiben unberuehrt. - ⚠⚠ UEBERHOLT SEIT DEM 17.08.2026 (W2), Zeile bewusst stehengelassen mit Berichtigung: Hier stand "KEINE @font-face-Regeln hier (Fremd-CDN-Verbot): jede App liefert die Schnitte von 'Plus Jakarta Sans' selbst aus". Das war eine VERWECHSLUNG — das CDN-Verbot verbietet das NACHLADEN von einem fremden Server, nicht das gemeinsame ABLEGEN. Seit W2 steht @font-face an GENAU EINER Stelle: marken-stand.css, geladen von der @import-Zeile unten; die Schriftdateien liegen flach daneben in chrome/ und kommen ueber die eigene Route /chrome/. 'Plus Jakarta Sans' liefert KEINE App mehr aus — die Dateien sind am 17.08. aus hermod/, home/ und snotra/ entfernt worden, nachdem gemessen war, dass sie NULL echte Benutzer hatten. - Die KENNFARBE ist bewusst nur eine VARIABLE mit neutralem Vorgabewert (Register Nr 7, Weg A — Christian, 2026-08-01): jede App setzt ihr Paar selbst, drei Zeilen, s. Katalog-Kommentar unten. - Suite 2 (Privathaushalte) bekommt ein EIGENES Paket dieser Ebene und erbt hier NICHTS. BEWUSSTE ABWEICHUNGEN von der woertlichen Uebernahme (alle benannt): 1. Kennfarben-Trio auf neutralen Vorgabewert gestellt; der 7er-Paletten- Katalog steht nur noch als Kommentar-Doku (Register Nr 7, Weg A). 2. @font-face nicht uebernommen (bleibt je App). ⚠ UEBERHOLT SEIT W2, 17.08.2026: @font-face steht jetzt EINMAL in marken-stand.css, s. oben. 3. Feinschnitt-Nachtraege, weil Basis-Bausteine sie brauchen: .action/.action-shell-Grundform (Gegenpole-/frageText-Dialoge bauen ihre Knoepfe daraus), .hidden-Utility (Toast/M5/Panels), das --control-accent-Token (Checkbox-Hover), .btn.green (Grenzfall Schnittliste §5.2, Empfehlung Basis: Knopf-Variante mit fester Bedeutung) und .fehler (Formular-Fehlerbanner, Register Nr 26, Quelle anmeldung.html, auf die Gefahr-Tokens gestellt). Bis S4.4 stehen diese Stellen identisch auch noch in app.css. 4. Selektoren des ersten Moduls (z. B. .rch-btn, .runde-btn, #selAll, #seiteRecherche, #tplModal) bleiben laut Schnittliste in den uebernommenen Abschnitten stehen — sie benennen die heutigen Verwender der Bauformen und stoeren andere Apps nicht. Aufgeraeumt wird per Register-Umzug, nicht nebenbei. ============================================================ */ /* ============================================================ ⭐⭐ SCHICHT 1 — DER MARKENSTAND (Fahrplan-Etappe W2, 2026-08-17) ⚠⚠ DIESE EINE ZEILE IST DER GRIFF. Sie holt Farben, Schriften, Maße, Bewegung und die @font-face-Regeln der Marke herein — erzeugt aus dem Depot ~/coding/marken/the-o-squad/ von werkstatt/design/tokens-bau.py. EIN HANDGRIFF AN EINER DATEI, und zwar in BEIDE Richtungen: - Andere Werte? Im Depot ändern, tokens-bau.py laufen lassen. Fertig. - Zurück aufs Provisorium? Diese Zeile auskommentieren. Fertig — jede Zeile in SCHICHT 2 trägt ihren alten Wert als Rückfall bei sich, die Suite sieht dann wieder genau aus wie vor dem 17.08.2026. ⚠ Der Preis, ehrlich benannt: @import ist ein zweiter Weg zum Server, in Reihe hinter dieser Datei — die Schriften starten dadurch etwas später. Deshalb steht in den @font-face-Regeln "font-display:swap": Text ist sofort da, die Marke zieht nach. Wer den Weg sparen will, setzt in den Vorlagen ein VOR den Link auf diese Datei — dann greift der Import nicht mehr. Das ist eine Verbesserung, keine Bedingung, und es wären wieder mehrere Stellen. ============================================================ */ @import url("/chrome/marken-stand.css"); /* ==== Token-Fundament: approved-tokens.css (App-UI-Provisorium) + Legacy-Mapping ==== */ :root{ color-scheme:light dark; /* ========================================================== ⭐⭐ SCHICHT 2 — DIE ÜBERSETZUNG: Marken-Rolle → Stelle in der Oberfläche Links steht, wie das Depot die Sache nennt (--tos-papier: "der Seitengrund dieser Marke"). Rechts steht, wie die Suite-Basis die Stelle nennt (--scene-a). Vor dem 17.08.2026 trafen sich die beiden Namenswelten NIRGENDS: Das Depot führte 77 Rollen als --tos-…, die Basis 61 Variablen als --scene-a/--ink/--line, und kein einziger Name war identisch. ⭐ Warum übersetzen statt umbenennen: Das Depot benennt Rollen einer MARKE und gilt auch für Suite 2. Die Basis benennt Stellen einer OBERFLÄCHE. Beide gleichzuziehen wäre ein Umbenennen von 61 Variablen in 249 Verwendungen — viel Risiko für nichts. Die Bauform ist nicht neu: Der Legacy-Block weiter unten tut seit S4.2 genau dasselbe für die alten Namen des Bestandscodes. ⚠ DER ZWEITE WERT IN JEDER ZEILE IST DER RÜCKFALL, nicht Zierde. var(--tos-papier, #eef1f2) heißt: "nimm den Markenwert; ist er nicht da, nimm den alten". Dadurch ist SCHICHT 1 abschaltbar, und eine Installation ohne marken-stand.css (alte Kopie, Skript nicht gelaufen) läuft weiter statt weiß zu werden. ========================================================== */ /* --- Flächen und Text, hell --- */ --scene-a:var(--tos-papier,#eef1f2); /* Seitengrund (Provisorium #eef1f2) */ --scene-b:var(--tos-stuetz,#dce2e4); /* Stützfläche (Provisorium #dce2e4) */ --ink:var(--tos-tinte,#111317); /* Hauptschrift (Provisorium #111317) */ --muted:var(--tos-sekundaer,#676d75); /* Zweittext (Provisorium #676d75) */ --solid:var(--tos-flaeche,#ffffff); /* opake Inhaltsfläche */ /* --- Schrift --- ⭐ Hier war die Basis schon fast fertig: Der Schriftname stand genau EINMAL da, 15 der 18 font-family-Zeilen im Regelwerk sagen nur "inherit", harte Schriftnamen gab es null. Es fehlte allein die Verbindung zum Depot. */ --tos-font-interface:var(--tos-body,'Plus Jakarta Sans',system-ui,sans-serif); --tos-font-accent:var(--tos-headline,'Plus Jakarta Sans',system-ui,sans-serif); --tos-font-accent-letter-spacing:var(--tos-headline-tracking,0.015em); /* --- ⭐ W3 DURCHLAUF 2 (18.08.2026): die SCHRIFTMASSE --- Bis heute hing nur der NAME der Schrift am Depot. Wie fett, wie weit gesperrt, wie hoch die Zeile — das stand als feste Zahl im Regelwerk und ist bei einem Markenwechsel stehengeblieben. ⚠ Der zweite Wert ist wie überall der Rückfall: der Zustand vor dem 17.08., damit ein Abschalten von SCHICHT 1 nichts zerreißt. */ --text-staerke:var(--tos-body-weight,400); --text-sperrung:var(--tos-body-tracking,0); --text-zeilenabstand:var(--tos-body-leading,normal); --akzent-staerke:var(--tos-headline-weight,700); --akzent-zeilenabstand:var(--tos-headline-leading,1); /* --- ⭐ Die DRITTE Schriftebene, neu in der Basis --- Das Depot führt seit dem 10.08. vier Ebenen: Headline > Subheadline > Zwischentitel > Fließtext. Die Basis kannte nur ZWEI Schriftrollen — Bedienschrift und Betonungsschrift. Die mittlere hatte hier keinen Platz und blieb deshalb unbenutzt im Depot liegen. */ --tos-font-subheadline:var(--tos-subheadline,'Plus Jakarta Sans',system-ui,sans-serif); --sub-staerke:var(--tos-subheadline-weight,600); --sub-sperrung:var(--tos-subheadline-tracking,0); --sub-zeilenabstand:var(--tos-subheadline-leading,1.2); /* --- ⭐ W3 DURCHLAUF 2: die KNOPFFORM --- ⚠ Die Basis hatte ZWEI Knopffamilien mit verschiedenen Maßen — .btn (Rundung 6px, keine feste Höhe) und .action (Höhe 40px, Rundung 4px, gar keine Kontur). Das Depot beschreibt EINEN Knopf. Genau das war der Widerspruch; beide Familien lesen jetzt dieselbe Quelle. Christian hat Rundung (07.08.: 0 → 2px) und Echostärke (1 → 2px) selbst entschieden. */ --knopf-hoehe:var(--tos-button-hoehe,40px); --knopf-radius:var(--tos-button-radius,6px); --knopf-kontur:var(--tos-button-kontur,1px); /* --- ⭐⭐ W3 DURCHLAUF 2: die BEWEGUNG — auf ZWEI EBENEN --- ⚠⚠ Der erste Anlauf am 17.08. hat alles an EINEN Regler gehängt, und Christian hat sofort gefragt: „Ist das ein globaler Wert für alles, was sich bewegt? Für unterschiedliche Sachen werden sehr unterschiedliche Werte sein müssen." Er hatte recht — und das Rollen-Schema des Depots gibt ihm seit L9 recht: Gruppe `bewegung` = GANZE ELEMENTE, die auf- und zugehen. `motion-enter` heißt dort wörtlich „Dauer beim Hereinkommen eines Elements". 520/620 ms. Gruppe `bauteil` = DIE ANTWORT EINES BAUTEILS. `button-motion-hin` heißt dort „Dauer beim Anfassen — die Signaturbewegung des Knopfes". 220/310 ms. Ein Knopf, der beim Überfahren die Farbe wechselt, kommt nicht herein — er antwortet. `bewegung.json` sagt es in seiner eigenen Fußnote: die Knopfzeiten gehören „beim Bauteil, nicht hier". ⭐ Beide Ebenen sind jetzt getrennt anzufassen: Bauteile unten am Knopf, Flächen am Fokus-Modus. Zwei Regler statt einem. ⚠ Warum je Ebene ZWEI Dauern: CSS bietet dafür eine saubere Stelle — die Dauer in der GRUNDregel gilt, wenn die Maus wieder weggeht, die in der :hover-Regel beim Hineingehen. Zurück ist bewusst länger. ⚠ NICHT angefasst, mit Absicht: der Themenwechsel unten (.38s, eine ganzseitige Überblendung mit eigener Begründung) und die Riss- Zeichnung des Löschdialogs (1,15–1,45 s). Das sind SIGNATUR- bewegungen; bewegung.json warnt ausdrücklich davor, sie global zu setzen — „wer sie global setzt, macht die ganze Oberfläche nervös". */ --bewegung-hin:var(--tos-motion-enter,var(--tos-focus-background-transition-duration)); --bewegung-zurueck:var(--tos-motion-return,var(--tos-focus-background-transition-duration)); --bewegung-kurve:var(--tos-motion-ease,ease); --knopf-bewegung-hin:var(--tos-button-motion-hin,.16s); --knopf-bewegung-zurueck:var(--tos-button-motion-zur,.24s); /* --- ⭐ W3 DURCHLAUF 2: der ECHORAHMEN --- Das versetzte Linienrechteck HINTER einer Fläche — Christians eigene Festlegung vom 07.08.: EIN Bauteil mit mehreren Einsätzen, „mal als Echo bei so nem Button, mal bei irgendeiner Darstellungskachel". ⚠ NICHT zu verwechseln mit der LA2-LOGO-GEOMETRIE (das abgeschrägte Eck, „Nordic Cut"). Die stammt aus der Logo-Konstruktion und ist kein Einsatz dieses Bauteils. Wer sie durch Echorahmen-Werte ersetzt, zerstört die Logo-Geometrie, ohne dass es auffällt. Das Bauteil selbst steht weiter unten bei den Knöpfen. */ --echo-versatz-x:var(--tos-echorahmen-versatz-x,6px); --echo-versatz-y:var(--tos-echorahmen-versatz-y,6px); --echo-staerke:var(--tos-echorahmen-staerke,2px); --echo-radius:var(--tos-echorahmen-radius,0px); /* ⭐⭐ KENNFARBE — SEIT W9 (2026-08-20) EINE UEBERSETZUNG, KEIN WERT. Hier standen bis dahin drei feste Farbwerte (#9aa7ad / #a9b6ae / 154,167,173) mit dem Vermerk „neutraler Vorgabewert, ABSICHTLICH entsaettigt — sieht eine Seite so aus, hat ihre App vergessen, ihr eigenes Paar zu setzen". Das war Register Nr 7, Weg A: jede App setzt ihr Paar selbst, in ihrer eigenen Stildatei. ⚠ Warum das weg ist: Diese Namen kannte das Depot nicht. „Hermod bekommt Paar 5" war dadurch ein Griff in neun Dateien in fuenf Projekten statt einer Zeile im Depot — Konvention K4 galt im Depot, aber nicht in den Programmen. ⭐ SO GEHT ES JETZT: Ein Programm traegt seinen NAMEN am , nie einen Farbwert: . marken-stand.css macht daraus --tos-akzent-a/-b; diese drei Zeilen legen die Depot-Namen auf die Namen der Suite-Basis. Genau dieselbe Bauform wie die Uebersetzung der Neutralen darueber — zwei Namenswelten, ein Block. ⚠ Ein Programm OHNE Kennzeichen sieht den Grundwert des Depots (akzent-a faellt auf tinte zurueck, akzent-b auf sekundaer). Das ist dunkler als der alte Grauton und keine neue Entscheidung: neutral.json sagt das seit dem 06.08.2026 woertlich. Wer den Grauton zurueckwill, belegt akzent-a/-b in farben.json — zwei Zeilen im Depot, keine hier. ⚠⚠ --signal-rgb ist derselbe Wert in der Schreibweise, die rgba() braucht. CSS kann einen Hex-Wert nicht in seine drei Zahlen zerlegen; tokens-bau.py rechnet ihn aus (rgb_tripel). Er ist KEINE eigene Depot-Rolle — wer ihn setzt, ohne akzent-a mitzusetzen, baut zwei Farben, die auseinanderlaufen. */ --tos-accent-primary:var(--tos-akzent-a); --tos-accent-secondary:var(--tos-akzent-b); --signal-rgb:var(--tos-akzent-a-rgb); /* --- Linien --- ⭐ Bewusst NICHT var(--tos-linie): Die Depot-Rolle ist eine DECKENDE Farbe (#d9d9d1), diese Linie liegt aber über Karten, Verläufen und der wabernden Atmosphäre. Halbdurchsichtig aus der Tinte gerechnet passt sie auf jeden Untergrund und zieht bei einem Farbwechsel genauso mit. ⚠ 11 % ist der alte Wert von rgba(17,19,23,.11) — identisch, nur abgeleitet statt eingetippt. */ --line:color-mix(in srgb,var(--ink) 11%,transparent); /* --- ⚠ ZWEI ROLLEN, DIE DAS DEPOT NICHT KENNT --- --workspace und --header-surface sind halbdurchsichtige Flächen MIT Weichzeichner; das Depot kennt nur volle Farben. Sie werden deshalb hier GERECHNET, aus der Depot-Fläche plus Durchsicht — damit ziehen sie bei einem Farbwechsel trotzdem mit. ⭐ Der saubere Weg wären zwei neue Rollen im Depot. Die entstehen aber ausschließlich in marken/_defaults/tokens/rollen.json und GEHÖREN FULLA (Depot-Konvention K2). Deshalb hier Weg A nach LIES-MICH §2.1b: vorerst rechnen, Wunsch in marken/the-o-squad/eingang/ eingeworfen, Fahrplan- Etappe W6 eingetragen. Kommen die Rollen, sind es zwei Zeilen hier. */ --workspace:color-mix(in srgb,var(--solid) 84%,transparent); --workspace-blur:26px; /* Aufklappende Flächen — Konto-Menü und Dropdown. Beide lagen vorher als Festwerte im Regelwerk unten (rgba(250,252,252,.96) bzw. .98) und je einmal noch im dunklen Satz. Jetzt: die Inhaltsfläche der Marke, fast deckend, dreht mit dem Thema von selbst mit. */ --menu-surface:color-mix(in srgb,var(--solid) 96%,transparent); --combo-menu:color-mix(in srgb,var(--solid) 98%,transparent); --workspace-shadow:drop-shadow(0 12px 28px color-mix(in srgb,var(--schatten) 12%,transparent)); --header-surface:color-mix(in srgb,var(--solid) 68%,transparent); /* --- Schatten --- ⭐ EINE Variable für alle Schatten des Regelwerks. Vorher standen darin VIER verschiedene Beinah-Schwarztöne nebeneinander — 35,44,51 · 42,52,60 · 20,28,34 · 0,0,0 — bei Deckkräften zwischen 8 % und 48 %. Ein Unterschied, den kein Auge sieht, aber vier Stellen, die auseinander- laufen können. Die Deckkraft bleibt an der Stelle stehen, wo der Schatten gebaut wird: SIE ist Gestaltung des Bausteins, der TON ist Sache der Marke. */ --schatten:var(--tos-tinte,#232c33); --tos-workspace-resize-hit-area:9px; --tos-workspace-resize-rail-width:2px; --tos-workspace-resize-transition-duration:140ms; --tos-workspace-resize-glow:0 0 7px color-mix(in srgb,var(--tos-accent-primary) 40%,transparent); --tos-focus-scrim:color-mix(in srgb,var(--schatten) 34%,transparent); --tos-focus-backdrop-blur:2px; --tos-focus-background-saturation:.88; --tos-focus-background-brightness:.78; --tos-focus-background-scale:.992; --tos-focus-background-transition-duration:300ms; /* Steuerelement-Akzent (Feinschnitt-Nachtrag, s. Kopf Nr 3): Checkbox-Hover */ --control-accent:color-mix(in srgb,var(--tos-accent-primary) 82%,var(--ink) 18%); /* --- ⭐ SCHICHT 2b — DIE AMPEL: Status-Rollen der Marke --- Grün/Gelb/Rot liegen seit dem 13.08.2026 im Depot (tokens/status.json, _gehoert: "CI, Marke & Design"). Sie sind KEINE Markenfarben, sondern SIGNALE — die Entscheidung „DIE MARKE HAT KEINE FARBE" vom 06.08. wird davon nicht berührt; das Depot hält die Abgrenzung selbst fest. ⚠ Die Töne dort sind ausdrücklich ARBEITSWERTE: Entschieden ist nur „grün, gelb, rot". Ein Wechsel ist eine Zeile im Depot. ⚠ Und die Einschränkung, die mitgehört: Alle drei liegen bei gleicher Leuchtkraft und unterscheiden sich nur im Farbton — für Augen, die Rot und Grün nicht trennen, sind sie nicht auseinanderzuhalten. Farbe darf hier nie die einzige Auskunft sein, es gehört immer ein Zeichen oder ein Wort dazu. */ --gefahr:var(--tos-fehler,#f20d3a); --erfolg:var(--tos-erfolg,#23845c); --warnung:var(--tos-warnung,#FFDC00); /* --- Legacy-Namen (Bestandscode) → auf die Rollen oben gemappt --- ⚠ --gelb, --anthrazit, --logo und --weiss werden nirgends mehr benutzt (gemessen 17.08.2026: null Verwendungen in der Basis und in allen Apps). Sie bleiben als Auffangnetz für Bestandscode stehen, sind aber Kandidaten zum Wegräumen — dann in einem eigenen Durchgang, nicht nebenbei. */ --gelb:var(--warnung); --anthrazit:var(--muted); --logo:var(--ink); --weiss:var(--solid); --blau:color-mix(in srgb,var(--tos-accent-primary) 46%,var(--ink)); /* Links/Info lesbar */ --rot:var(--gefahr); --gruen:var(--erfolg); /* Dunkle Fläche IM hellen Thema (nur der Toast benutzt sie) — die Papierfarbe des dunklen Satzes der Marke, nicht irgendein Schwarz. */ --schwarz:var(--tos-d-papier,#14181d); --dunkelgrau:var(--ink); --hell:var(--scene-a); --rahmen:var(--line); --text-grau:var(--muted); --akzent:var(--tos-accent-primary); /* Schrift AUF einer Akzentfläche: das dunkelste, was die Marke hat. */ --akzent-text:var(--tos-d-papier,#071012); --akzent-soft:rgba(var(--signal-rgb),.10); --flaeche:var(--solid); --kopf:var(--header-surface); --sidebar:transparent; --fokus-ring:0 0 0 2px rgba(var(--signal-rgb),.30),0 0 15px rgba(var(--signal-rgb),.15); /* Gefahr/Fehler-Familie — alle drei aus --gefahr gerechnet statt getippt. Vorher standen hier drei Festwerte (#fde5ea/#c40b31/#f3bcc9) und im dunklen Satz drei weitere; bei einem Wechsel der Signalfarbe wären sie stehengeblieben und hätten nicht mehr zusammengepasst. */ --rot-soft:color-mix(in srgb,var(--gefahr) 12%,var(--solid)); --rot-text:color-mix(in srgb,var(--gefahr) 82%,var(--ink)); --rot-rand:color-mix(in srgb,var(--gefahr) 34%,var(--solid)); /* Schrift AUF einer Gefahrenfläche (Löschknopf, Danger-Hover). */ --rot-kontrast:color-mix(in srgb,var(--solid) 96%,var(--gefahr)); /* Der Abmelden-Eintrag im Konto-Menü — Gefahr, aber lesbar auf Fläche. */ --abmelden:var(--rot-text); --backdrop:var(--tos-focus-scrim); --backdrop-soft:color-mix(in srgb,var(--schatten) 22%,transparent); --z-nav:20; --z-modal:50; --z-overlay:60; --z-panel:61; --z-toast:80; --z-vorschau:1000; --z-editor:1200; --z-confirm:1300; } /* ==== DER DUNKLE SATZ ==== ⭐⭐ Er ist mit W2 von 18 Zeilen auf 8 geschrumpft, und das ist kein Aufräumen, sondern der Beweis, dass die Übersetzung trägt: Alles, was hier NICHT mehr steht, rechnet sich jetzt von selbst aus dem hellen Satz — --line, --workspace, --header-surface, --schwarz, --weiss, --flaeche, --rot, --gruen, die ganze Gefahr-Familie und die zwei Schleier. ⚠ Was hier stehen BLEIBT, sind die Rollen, die das Depot doppelt führt (d-papier, d-tinte …) — ein dunkler Satz ist eine eigene Entscheidung der Marke, keine Rechnung aus dem hellen. ⚠⚠ Und die ehrliche Einschränkung, die das Depot selbst festhält (farben.json): Die dunklen Werte sind PLATZHALTER, von uns im Juli abgeleitet — Christian, 06.08.: „die Dark-Mode-Werte wurden nie ermittelt." Sie sehen ordentlich aus, sie sind nicht entschieden. */ :root[data-theme="dark"]{ --scene-a:var(--tos-d-papier,#2b3138); /* weiches Anthrazit, nie Schwarz */ --scene-b:var(--tos-d-stuetz,#20262d); --ink:var(--tos-d-tinte,#f3f4f2); --muted:var(--tos-d-sekundaer,#b1b6bd); --solid:var(--tos-d-flaeche,#292e35); /* Im Dunkeln ist der Schatten schwarz, nicht die Tinte — die ist hier hell und würde die Fläche aufhellen statt sie abzusetzen. */ --schatten:#000; --workspace-shadow:drop-shadow(0 14px 32px color-mix(in srgb,var(--schatten) 25%,transparent)); --gefahr:var(--tos-d-fehler,#d72842); --erfolg:var(--tos-d-erfolg,#69d6a7); --warnung:var(--tos-d-warnung,#FFDC00); --control-accent:color-mix(in srgb,var(--tos-accent-primary) 80%,var(--ink) 20%); --blau:color-mix(in srgb,var(--tos-accent-primary) 72%,var(--ink)); --akzent-soft:rgba(var(--signal-rgb),.13); /* Schrift auf Akzent- und Gefahrenflächen bleibt dunkel — die Flächen selbst sind in beiden Sätzen kräftig. */ --akzent-text:var(--tos-d-papier,#071012); } /* ==== KENNFARBE: WIE EIN PROGRAMM ZU SEINER FARBE KOMMT (nur Doku) ==== ⛔ HIER STAND BIS ZUM 2026-08-20 EIN KATALOG ZUM ABSCHREIBEN — sieben Farbpaare mit dem Satz „Jede App setzt ihr Paar SELBST, in ihrer eigenen Stildatei, drei Zeilen". Er ist mit Fahrplan-Etappe W9 entfallen, und zwar bewusst vollstaendig: Solange die Werte hier standen, war Abschreiben der bequemste Weg — und jede abgeschriebene Zeile war eine zweite Stelle, an der eine Farbe steht. ⭐ ES SIND JETZT ZWEI HANDGRIFFE, EINER JE SEITE, KEINE FARBE DABEI: 1. Am -Element den Namen des Programms: 2. Mehr nicht. Welchen Cluster das Programm hat und welches Paar der Cluster traegt, steht im Depot ~/coding/marken/the-o-squad/tokens/ — akzente-zuordnung.json und akzente-cluster.json. marken-stand.css wird daraus erzeugt (werkstatt/design/tokens-bau.py) und bringt die Werte mit. ⚠ DIE FARBE GEHOERT DEM CLUSTER, nicht dem einzelnen Modul (Christian, 19./20.08.2026): Bei 15 Programmen sind einzelne Modulfarben ab etwa acht Stueck nicht mehr auseinanderzuhalten. Zwei Programme derselben Gruppe tragen dieselbe Farbe und unterscheiden sich per Icon + Name — Farbe ist nie der einzige Bedeutungstraeger, auch wegen Farbfehlsichtigkeit. Zuschnitt: werkstatt/design/farb-cluster-module-v01-2026-08-20.md. ⚠ WER HIER EINEN FARBWERT EINTIPPT, macht W9 rueckgaengig. Das Programm traegt seinen Namen, nie einen Wert (Konvention K4). ⚠ Register Nr 7 (Weg A) ist damit ueberholt und gehoert nachgezogen: werkstatt/konzepte/design-verteilregister-v01-2026-07-31.md. Zielbild unveraendert: die Kennfarbe der KACHEL ist ein Stammdatum je Modul in kern.module (Home-Kacheln lesen sie von dort, S7). Dass beide Orte eines Tages aus dem Markenstand kommen, gehoert zu W3. */ *{box-sizing:border-box} html,body{height:100%;margin:0} /* ⭐ W3 DURCHLAUF 2: Diese Regel trug bis zum 18.08.2026 NUR Schriftname und Größe — keine Strichstärke, keine Sperrung, keinen Zeilenabstand. Der Browser nahm dafür seine eigenen Werte (Zeilenabstand rund 1,2). Das Depot hat für alle drei einen Wert; jetzt erbt sie die ganze Suite. ⚠ Der Zeilenabstand ist die folgenreichste Zeile dieses Durchlaufs: Er vererbt sich auf JEDES Element, das keinen eigenen setzt. 1,55 macht die Oberfläche luftiger — in dichten Tabellen kann er Zeilen auseinander- ziehen. Rückweg: eine Zahl in schriften.json. */ body{font-family:var(--tos-font-interface); font-size:13px;color:var(--ink);display:flex;flex-direction:column; font-weight:var(--text-staerke); letter-spacing:var(--text-sperrung); line-height:var(--text-zeilenabstand); background:linear-gradient(145deg,var(--scene-a),var(--scene-b)) fixed} /* ==== Layer 1 — Atmosphäre: mehrere weiche Nebelfelder wabern langsam über die ganze Fläche (beide Akzentfarben). Jedes Feld hat einen eigenen, großen, organischen Driftpfad + leichtes Skalieren/Pulsieren, verschiedene Phasen — dadurch echtes „Wabern" statt statischer Eck-Flächen. (Layer-1-Richtung lt. OPEN-ITEMS integrationsabhängig.) ==== */ /* Layer-1-Atmosphäre = JS-getriebenes Canvas-Mesh (chrome/atmos-suite1.js). Großflächige weiche Farbfelder (viel Weiß, Cyan + Mint als Akzente, kaum Grau), die per Sinus-Overlays mit inkommensurablen Frequenzen wandern UND in Form/Größe morphen → praktisch nie wiederholend. Pro Frame in JS gezeichnet → läuft zuverlässig auch in Safari (CSS-Keyframe-background-position tat das hier nicht). Canvas rendert bewusst in niedriger Auflösung, CSS skaliert hoch = weicher Look. */ #atmos{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none} #atmos i{display:none} /* alte Einzelfelder abgeschaltet */ #atmos canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* ==== N9 (04.08.2026): DER WEICHE ÜBERGANG BEIM UMSCHALTEN ================ Festlegung Christians: „kann man das umschalten … faden? 300–500 ms? das wirkt smoother und edler als hart switchen." ⚠⚠ WARUM DAS HIER AN EINER KENNZEICHNUNG HÄNGT UND KEINE DAUERREGEL IST: Die naheliegende Fassung wäre `*{transition:background-color .38s}` ohne Bedingung. Sie träfe JEDEN Farbwechsel im ganzen Haus — jedes Überfahren einer Kachel, jeden Knopf, jedes Menü, jede Zeile der Liste. Alles würde träge, und die Oberfläche fühlte sich schlechter an als vorher. Deshalb: `mechanik.js` hängt beim Klick `data-theme-wechsel` an das -Element und nimmt es nach 380 ms wieder ab. Nur in diesem Fenster gilt die Regel unten. Beim LADEN steht die Kennzeichnung nie — HART BEIM LADEN, WEICH BEIM UMSCHALTEN. Wer die Seite frisch öffnet, sieht sie sofort richtig; sonst hätte man das Blitzen nur durch ein langsames Blitzen ersetzt. ⚠ Übergangen werden ausschließlich FARBEN und der Schatten — nicht `transform`, nicht `opacity`, nicht Größen. Ein weich mitwanderndes Layout wäre etwas anderes als ein weicher Farbwechsel. ⚠ `!important` ist hier ausnahmsweise richtig: Die Regel muss die Einzelübergänge der Bausteine (z. B. `.brand .app-name{transition:color .14s}`) für diese 380 ms überstimmen — sonst blendete die Kopfleiste in .14s und der Rest in .38s, und der Wechsel liefe sichtbar zweistufig. */ :root[data-theme-wechsel], :root[data-theme-wechsel] *, :root[data-theme-wechsel] *::before, :root[data-theme-wechsel] *::after{ transition:background-color .38s ease, background-image .38s ease, color .38s ease, border-color .38s ease, outline-color .38s ease, fill .38s ease, stroke .38s ease, box-shadow .38s ease !important} /* ⚠ Wer am Rechner eingestellt hat, dass Bewegungen ihn stören, bekommt den HARTEN Wechsel. Das ist Barrierefreiheit, kein Sonderwunsch — und es steht bewusst direkt unter der Regel, die es aufhebt, statt an einer zweiten Stelle in der Mechanik: zwei Abfragen könnten auseinanderlaufen. */ @media (prefers-reduced-motion:reduce){ :root[data-theme-wechsel], :root[data-theme-wechsel] *, :root[data-theme-wechsel] *::before, :root[data-theme-wechsel] *::after{transition:none !important} } /* ==== Der Umschalter Hell/Dunkel (N9) — EIN Baustein für alle Programme. Gebaut wird er in `mechanik.js` (`themeSchalter()`), hier steht nur seine Optik. Er sitzt in der Kopfleiste jedes Programms; das Symbol zeigt die aktuelle Stellung, ein Klick tippt weiter (System → Hell → Dunkel). */ .theme-schalter{display:inline-grid;place-items:center;width:30px;height:30px; padding:0;border:0;border-radius:7px;background:transparent;cursor:pointer; color:var(--muted);flex:none; transition:color var(--knopf-bewegung-zurueck) var(--bewegung-kurve), background var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .theme-schalter:hover{color:var(--ink); background:color-mix(in srgb,var(--tos-accent-primary) 12%,transparent)} .theme-schalter:focus-visible{outline:0;color:var(--ink); box-shadow:0 0 0 1px rgba(var(--signal-rgb),.75),0 0 9px rgba(var(--signal-rgb),.35)} .theme-schalter svg{display:block} @media (prefers-reduced-motion:reduce){.theme-schalter{transition:none}} /* Header — Primärzeile 48px, transluzent über Layer 1 */ #topbar{position:relative;z-index:var(--z-nav); display:flex;align-items:center;gap:14px;padding:0 12px;height:48px; background:var(--header-surface);color:var(--ink);flex:none; border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(18px) saturate(108%);backdrop-filter:blur(18px) saturate(108%)} /* App-Identität: Wortmarke (Akzentschrift 700, 23px) + PART OF / THE-O-SQUAD. Der INHALT der Wortmarke ist App-Sache (Register Nr 35), der Platz hier Basis. */ /* Klickbar (führt zum Workspace), aber ohne Hover-Fläche: nur der Schriftzug nimmt die Akzentfarbe der positiven Buttons an (Christian, 2026-07-20). */ .brand{display:flex;align-items:center;white-space:nowrap;padding:0 8px 0 5px; border:0;background:none;font-family:inherit;cursor:pointer;border-radius:7px} .brand .app-name{transition:color var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .brand:hover .app-name{color:var(--tos-accent-secondary);transition-duration:var(--knopf-bewegung-hin)} .brand:focus-visible{outline:0;box-shadow:0 0 0 1px rgba(var(--signal-rgb),.75),0 0 9px rgba(var(--signal-rgb),.35)} /* ⭐ W3 DURCHLAUF 2: Strichstärke und Zeilenabstand kamen aus dem Regelwerk (hart 700 und 1). Das Depot sagt 500 und 0,98 — seit der Umstellung auf die variablen Schriftdateien ist 500 auch ein ECHT gezeichneter Schnitt und keine gerechnete Fettung mehr. ⚠ Die Größe (23px) bleibt Sache der Basis: Das Depot führt für Schriftgrößen nur die zwei GROSSEN Maße (40–68px und 29–44px), und die gehören auf die Anmeldeseite, nicht in eine 48px hohe Kopfzeile. */ .app-name{font-family:var(--tos-font-accent);font-size:23px; font-weight:var(--akzent-staerke); line-height:var(--akzent-zeilenabstand); letter-spacing:var(--tos-font-accent-letter-spacing);color:var(--ink)} .affiliation{display:grid;grid-template-rows:1fr 1fr;align-items:center;height:16px; margin-left:10px;color:var(--muted);font-size:7.5px;font-weight:500;line-height:1; letter-spacing:.035em;text-transform:uppercase} /* Kopfzeilen-Navigation (Arbeitsbereiche) — Referenz global-navigation-active-marker */ .mainnav{display:flex;align-items:center;gap:2px;margin-left:auto} .mainnav button{ position:relative;height:36px;padding:0 9px;background:none;border:none;border-radius:6px; display:inline-flex;align-items:center;box-sizing:border-box;font-family:inherit;cursor:pointer; color:var(--muted);font-weight:600;font-size:13px;transition:color var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .mainnav button:hover{color:var(--ink);background:none} .mainnav button.active{color:var(--ink);background:none} /* Aktiver Marker: 4px, oben rechts 3px Nordic Cut, unter der Labelbreite (Padding 9px ausgenommen) */ .mainnav button.active::after{content:'';position:absolute;left:9px;right:9px;bottom:-3px; height:4px;background:var(--tos-accent-primary); clip-path:polygon(0 0,calc(100% - 3px) 0,100% 3px,100% 100%,0 100%); filter:drop-shadow(0 0 3px color-mix(in srgb,var(--tos-accent-primary) 42%,transparent))} /* ==== Responsive Richtung R2 (global-navigation-responsive-r2): Breakpoints beziehen sich auf die HEADER-CONTAINERBREITE (620/500px) ==== */ #topbar{container:topbar / inline-size} .nav-compact-trigger{display:none;place-items:center;width:34px;height:34px;padding:0;border:0; border-radius:50%;color:var(--ink);background:transparent;cursor:pointer} .nav-compact-trigger svg{display:block} .nav-compact-trigger:hover,.nav-compact-trigger[aria-expanded="true"]{ background:color-mix(in srgb,var(--tos-accent-primary) 9%,transparent)} .nav-compact-menu{position:absolute;z-index:4;top:53px;left:10px;right:10px; display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:7px;border-radius:8px; background:color-mix(in srgb,var(--header-surface) 96%,var(--scene-a)); -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px); filter:drop-shadow(0 12px 22px color-mix(in srgb,var(--schatten) 20%,transparent))} :root[data-theme="dark"] .nav-compact-menu{filter:drop-shadow(0 12px 22px color-mix(in srgb,var(--schatten) 42%,transparent))} .nav-compact-menu button{position:relative;height:38px;padding:0 5px;border:0;border-radius:5px; color:var(--muted);background:transparent;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer} .nav-compact-menu button.is-active{color:var(--ink); background:color-mix(in srgb,var(--tos-accent-primary) 8%,transparent)} .nav-compact-menu button.is-active::after{content:'';position:absolute;left:8px;right:8px;bottom:2px; height:3px;background:var(--tos-accent-primary); clip-path:polygon(0 0,calc(100% - 3px) 0,100% 3px,100% 100%,0 100%)} @container topbar (max-width:620px){ .affiliation{display:none} } @container topbar (max-width:500px){ .mainnav{display:none} .nav-compact-trigger{display:grid} } /* ==== Zahnrad = einzige globale Utility (34px) + Konto-Popover (214px) — Referenz global-navigation-active-marker-approved.html ==== */ .account-wrap{position:relative;align-self:stretch;display:flex;align-items:center} #btnGear{background:transparent;color:var(--ink);border:0;border-radius:50%;cursor:pointer; display:grid;place-items:center;width:34px;height:34px;padding:0;overflow:hidden} #btnGear svg{display:block} #btnGear:hover,#btnGear[aria-expanded="true"]{ background:color-mix(in srgb,var(--tos-accent-primary) 9%,transparent)} #btnGear:focus{outline:none} #btnGear:focus-visible{outline:2px solid var(--tos-accent-primary);outline-offset:2px} .konto-menu{position:absolute;z-index:var(--z-nav);top:calc(100% + 5px);right:0;width:214px; padding:7px;border-radius:8px;background:var(--menu-surface); -webkit-backdrop-filter:blur(22px) saturate(110%);backdrop-filter:blur(22px) saturate(110%); filter:drop-shadow(0 12px 22px color-mix(in srgb,var(--schatten) 20%,transparent));display:flex;flex-direction:column} :root[data-theme="dark"] .konto-menu{ filter:drop-shadow(0 12px 22px color-mix(in srgb,var(--schatten) 42%,transparent))} .konto-ident{display:flex;align-items:center;gap:9px;padding:6px 8px 7px} .avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--akzent); color:var(--akzent-text);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .konto-info{min-width:0;flex:1} .konto-org{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .konto-user{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .menu-item{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center; column-gap:17px;width:100%;height:36px;padding:0 10px;overflow:hidden;border:0;border-radius:5px; color:var(--ink);background:transparent;cursor:pointer;text-align:left;text-decoration:none; font-family:inherit;font-size:13px} .menu-icon{display:block;width:18px;height:18px;align-self:center;color:var(--muted);stroke:currentColor} .menu-item .menu-label{display:flex;align-items:center;min-height:18px;line-height:1; transition:transform var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .menu-item::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px; border-radius:0 2px 2px 0;background:var(--tos-accent-primary);opacity:0} .menu-item:hover .menu-label,.menu-item:focus-visible .menu-label{transform:translateX(4px)} .menu-item:hover::before,.menu-item:focus-visible::before{opacity:1} .menu-separator{height:1px;margin:6px 8px;background:var(--line)} .menu-item.logout{color:var(--abmelden)} .menu-item.logout .menu-icon{color:currentColor} .menu-item.logout::before{background:currentColor} @media (prefers-reduced-motion:reduce){.menu-item .menu-label{transition:none}} /* Buttons */ /* EINE Button-Familie (Audit 4, W5): .rch-btn/.rch-lnk sind nur noch Größen-Synonyme von .btn/.link statt einer zweiten Parallel-Familie. */ /* ⭐⭐ W3 DURCHLAUF 2 (18.08.2026) — DIE KNOPFFORM KOMMT AUS DEM DEPOT. Hier stand bis heute: „Provisorium-Sprache für die Bestandsfamilie (Komponenten ohne eigene Referenz — neutrale Fläche, 6px-Radius, 600)". Sie HAT jetzt eine Referenz: bauteile.json. Höhe 44px, Rundung 2px, Kontur 1px — Christians Entscheidung vom 07.08. ⚠ Aus `padding` wird `min-height` plus Innenabstand: Der Knopf war bisher so hoch, wie sein Inhalt ihn machte; das Depot gibt eine Höhe vor. Der waagerechte Innenabstand bleibt, sonst kleben Knöpfe mit kurzem Wort zusammen. */ .btn,.rch-btn{display:inline-flex;align-items:center;justify-content:center; min-height:var(--knopf-hoehe);padding:6px 12px; border:var(--knopf-kontur) solid var(--line); background:rgba(var(--field-rgb,255,255,255),var(--field-alpha,.93)); border-radius:var(--knopf-radius); font-size:13px;cursor:pointer;color:var(--ink);font-family:inherit;font-weight:600; transition:background-color var(--knopf-bewegung-zurueck) var(--bewegung-kurve), color var(--knopf-bewegung-zurueck) var(--bewegung-kurve), border-color var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .btn:hover,.rch-btn:hover{filter:none;border-color:color-mix(in srgb,var(--ink) 28%,transparent); background:rgba(var(--field-rgb,255,255,255),1); transition-duration:var(--knopf-bewegung-hin)} :root[data-theme="dark"] .btn:hover,:root[data-theme="dark"] .rch-btn:hover{ background:rgba(var(--field-rgb),.99)} /* ---- Bestaetigende Aktionen (speichern / drucken / senden / starten) ---- Sie sehen aus und verhalten sich wie der Speichern-Knopf der Stammdaten (.action-shell + .action.a-save): helle getoente Flaeche, Tintenschrift, nordische Ecke, Radius 3px, im Hover flaechig Akzent-Sekundaer mit Anheben und Schlagschatten. Aufbau (bitte so lassen — vier Anlaeufe, jeder Abweichung hatte einen sichtbaren Fehler zur Folge, Christian 2026-07-21): - Die Huelle .btn-shell traegt Anheben + Schatten, der Knopf die Fuellung und die Ecke. Genau wie bei der Referenz. Schatten NICHT an den Knopf haengen: die Ecke wuerde ihn beschneiden. - Schatten als filter:drop-shadow, nicht box-shadow. drop-shadow folgt der Alpha-Form des Inhalts, also der geschnittenen Ecke. box-shadow zeichnet ein volles Rechteck — dann fehlt in der Ecke der Schatten, den es ringsum gibt, und das liest sich als helles Feld unter der Schraege. - Es wird NIE zwischen filter:none und einem Wert umgeschaltet, sondern im Ruhezustand ein transparenter drop-shadow gesetzt (+ will-change). Sonst entsteht und verschwindet die Compositor-Ebene bei jedem Hover; in Safari brach der Schatten dadurch nach der Ueberblendung weg und der Knopf fiel zurueck. - Die Ecke ueber clip-path, nicht ueber eine Alpha-Maske. Unter der Maske blieb in Safari eine unmaskierte, hellere Kopie des Knopfes stehen (weisses Feld in der Ecke, heller Rand rechts). 12px = 8.45 * Wurzel(2), per Pixelmessung deckungsgleich mit der Maske der Referenz. .action.a-save behaelt bewusst seine Maske — der Knopf laeuft sauber und liegt nicht in einer Spalte mit backdrop-filter ueber der animierten Atmosphaere. ---- */ .btn-shell{display:inline-flex;transform-origin:center; transform:scale(1);filter:drop-shadow(0 0 0 transparent); will-change:filter,transform; transition:filter var(--knopf-bewegung-zurueck) var(--bewegung-kurve), transform var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .btn-shell:hover,.btn-shell:focus-within{transform:scale(1.035); filter:drop-shadow(0 9px 9px color-mix(in srgb,var(--schatten) 30%,transparent)); transition-duration:var(--knopf-bewegung-hin)} :root[data-theme="dark"] .btn-shell:hover, :root[data-theme="dark"] .btn-shell:focus-within{filter:drop-shadow(0 9px 9px color-mix(in srgb,var(--schatten) 48%,transparent))} /* Deaktivierte Knoepfe heben nicht an und werfen keinen Schatten. */ .btn-shell:has(:disabled){transform:scale(1);filter:drop-shadow(0 0 0 transparent)} @media (prefers-reduced-motion:reduce){ .btn-shell{transition:none} .btn-shell:hover,.btn-shell:focus-within{transform:scale(1)} } /* ============================================================ ⭐⭐ DER ECHORAHMEN — das Bauteil (W3 Durchlauf 2, 2026-08-18) Das versetzte Linienrechteck HINTER einer Fläche. Es erzeugt Tiefe ohne weichen Schlagschatten. Christians Festlegung vom 07.08.2026: „Ich hab das damals als Echorahmen definiert … der soll jetzt hier als Echo bei so nem Button dienen, der soll aber auch Echo bei irgendeiner Darstellungskachel mal sein." — EIN Bauteil, mehrere Einsätze. Die Maße kommen aus dem Depot (bauteile.json): Versatz 6/6, Stärke 2, eckig. Die FARBE steht bewusst NICHT im Depot — der Echorahmen trägt die Farbe seines Einsatzortes; deshalb `currentColor`. ⚠⚠ WARUM ER AN DER HÜLLE HÄNGT UND NICHT AM KNOPF, und das ist kein Geschmack: Der bestätigende Knopf trägt einen `clip-path` (die nordische Ecke). Ein clip-path beschneidet ALLES im Element, auch seine Pseudo-Elemente — der Echorahmen wäre an der Ecke abgeschnitten. Das Herkunftspapier sagt genau das: „Front-Clip und Echokontur werden getrennt gerendert; clip-path auf dem gemeinsamen Elternknoten wäre falsch." Die Hülle .btn-shell hat keinen Clip und keine Fläche — sie ist der richtige Ort. ⚠ EINSATZSTELLEN STEHEN IM SELEKTOR, nicht verstreut im Regelwerk. Eine Stelle dazunehmen oder wegnehmen ist EIN Wort in der Zeile darunter. Heute: die Hülle der bestätigenden Knöpfe. Die Klasse `.echo` ist der allgemeine Griff für alles Weitere (Kacheln …). ⚠ Er ragt 6px nach rechts und unten über seine Fläche hinaus. Liegt er in einem Kasten mit `overflow:hidden`, wird er dort beschnitten — dann braucht die Stelle Außenraum, nicht der Rahmen eine Ausnahme. ============================================================ */ .echo,.btn-shell{position:relative} .echo::before,.btn-shell::before{content:'';position:absolute;inset:0;z-index:-1; border:var(--echo-staerke) solid currentColor; border-radius:var(--echo-radius); transform:translate(var(--echo-versatz-x),var(--echo-versatz-y)); pointer-events:none} /* ⭐⭐ ZWEI BERICHTIGUNGEN AM 18.08.2026, beide von Christian am Bildschirm gesehen — nicht von einer Messung gefunden: (1) DIE NORDISCHE ECKE IST WEG. Sein Satz: „Die nordische Ecke müsste weg." Die `clip-path`-Zeile, die hier stand, schnitt das Eck oben rechts ab. Sie ist ersatzlos gestrichen. ⚠ Damit ist auch der Grund weg, aus dem der lange Kasten oben `filter:drop-shadow` statt `box-shadow` verlangt — die Begründung dort bleibt trotzdem stehen, weil sie erklärt, WARUM vier Anläufe nötig waren. Wer die Ecke je zurückholt, braucht sie wieder. (2) DIE FLÄCHE IST JETZT DECKEND. Sein Satz: „Der Echo-Rahmen liegt jetzt davor." Er lag NICHT davor — er lag dahinter und schien DURCH. Gemessen: Die Fläche stand auf 92 % Deckkraft (`color-mix(… 92%, transparent)`), die dunkle 2px-Linie dahinter kam durch die restlichen 8 % durch. Ein Rahmen HINTER einer durchsichtigen Fläche ist optisch kein Rahmen dahinter. Das Herkunftspapier setzt für die vordere Fläche entsprechend eine volle Farbe an (`background:#fffefa`). Behoben, indem statt gegen `transparent` gegen die opake Inhaltsfläche der Marke gemischt wird — derselbe Ton, keine Durchsicht. Rückweg: ein Wort je Zeile. ⚠ WAS DAS NICHT LÖST, und Christian hat es selbst gesagt: „Das muss alles noch definiert werden." Der Knopf ist nicht entworfen — er ist angeschlossen. Wie er aussehen soll, gehört in die Knopfwerkstatt (Fahrplan L9), und das Depot hält dafür bereits 23 unbelegte Knopf-Rollen bereit (Farben, Zustände Druck/Fokus/Gesperrt, Hover-Art). Hier wird nichts entschieden, was dort hingehört. ⚠ Der einfache .btn OHNE `.accent` steht weiterhin auf 93 % Deckkraft (`--field-alpha`) — dort scheint der Echorahmen also noch durch. Das ist bewusst nicht mitgeändert: Die Durchsicht der Felder ist eine eigene Gestaltungsentscheidung und hängt an mehr als am Knopf. */ .btn.accent,.rch-btn.accent{color:var(--ink);border-color:transparent; border-radius:var(--knopf-radius); background:color-mix(in srgb,var(--tos-accent-primary) 11%, color-mix(in srgb,var(--scene-b) 92%,var(--solid))); transition:color var(--knopf-bewegung-zurueck) var(--bewegung-kurve), background var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} :root[data-theme="dark"] .btn.accent,:root[data-theme="dark"] .rch-btn.accent{ background:color-mix(in srgb,var(--tos-accent-primary) 8%, color-mix(in srgb,var(--ink) 10%,var(--solid)))} /* Hover-Fuellung wie .action.a-save:hover. filter/border-color muessen mitgesetzt werden, sonst greift .btn:hover darueber. */ .btn.accent:hover:not(:disabled),.rch-btn.accent:hover:not(:disabled){ color:var(--akzent-text);background:var(--tos-accent-secondary); border-color:transparent;filter:none;transition-duration:var(--knopf-bewegung-hin)} /* Deaktiviert: voll deckend + gedaempfte Schrift statt 45% Transparenz — die helle Flaeche wuerde sonst wegblassen. .is-busy ausgenommen, der Ladezustand hat seine eigene Daempfung. */ .btn.accent:disabled:not(.is-busy),.rch-btn.accent:disabled:not(.is-busy){opacity:1; color:var(--muted);border-color:transparent; background:rgba(var(--field-rgb,255,255,255),.6)} .btn.danger,.rch-btn.danger{color:var(--rot);border-color:var(--rot-rand);font-weight:600} .btn.danger:hover,.rch-btn.danger:hover{background:var(--rot);border-color:var(--rot);color:var(--rot-kontrast)} .btn:disabled,.rch-btn:disabled{opacity:.45;cursor:default} /* Neutrale (nicht-Akzent) Buttons: disabled nicht per Transparenz ausgrauen — das versank grau-auf-grau in der Flaeche. Stattdessen voll deckend mit sichtbarem Rahmen und gedaempfter Schrift. */ .btn:disabled:not(.accent),.rch-btn:disabled:not(.accent){opacity:1;color:var(--muted); background:rgba(var(--field-rgb,255,255,255),.6); border-color:color-mix(in srgb,var(--ink) 14%,transparent)} .rch-btn{padding:10px 18px;font-size:14px} /* Recherche-CTAs etwas größer */ .rch-btn.mini{padding:5px 12px;font-size:12.5px} .link,.rch-lnk{background:none;border:none;color:var(--blau);cursor:pointer;font-size:12px;padding:0;font-weight:700;font-family:inherit} .link:hover,.rch-lnk:hover{text-decoration:underline} /* Knopf-Variante mit fester Bedeutung (Druck-Look) — Grenzfall Schnittliste §5.2, Empfehlung Basis (Nr 8/18): EINE Implementierung, Apps nutzen sie nur. */ .btn.green{border-color:var(--gruen);color:var(--gruen);background:var(--flaeche)} .btn.green:hover{background:var(--gruen);color:var(--solid);filter:none} /* Action-Grundform (Feinschnitt-Nachtrag, s. Kopf Nr 3): die Gegenpole- und frageText-Dialoge unten bauen ihre Knoepfe aus .action-shell/.action. Die semantischen Varianten (.a-save/.a-delete/.a-reset) bleiben App-Sache. */ /* ⭐ W3 DURCHLAUF 2: Das war die ZWEITE Knopffamilie mit eigenen Maßen — Höhe 40px, Rundung 4px, gar keine Kontur, während .btn auf 6px stand. Zwei Sorten Türklinke im selben Haus. Beide lesen jetzt dieselbe Quelle. */ .action-shell{height:var(--knopf-hoehe);transform-origin:center; transition:filter var(--knopf-bewegung-zurueck) var(--bewegung-kurve), transform var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .action-shell:hover,.action-shell:focus-within{transform:scale(1.035); filter:drop-shadow(0 9px 9px color-mix(in srgb,var(--schatten) 30%,transparent)); transition-duration:var(--knopf-bewegung-hin)} :root[data-theme="dark"] .action-shell:hover, :root[data-theme="dark"] .action-shell:focus-within{filter:drop-shadow(0 9px 9px color-mix(in srgb,var(--schatten) 48%,transparent))} .action{height:var(--knopf-hoehe);padding:0 13px;border:0; border-radius:var(--knopf-radius);color:var(--ink);background:transparent; cursor:pointer;font-family:inherit;font-size:13px; transition:color var(--knopf-bewegung-zurueck) var(--bewegung-kurve), background var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .action:hover{transition-duration:var(--knopf-bewegung-hin)} @media (prefers-reduced-motion:reduce){.action-shell{transition:none} .action-shell:hover,.action-shell:focus-within{transform:none}} /* Sichtbarkeits-Utility (Feinschnitt-Nachtrag, s. Kopf Nr 3): von Toast, M5-Fuss und Panel-Mechanik vorausgesetzt. */ .hidden{display:none!important} /* ==== Checkboxen global (Redesign 2026-07-18, Christians Merkposten): „Nordic Cut" in der Formensprache der Karten: drei Ecken GERUNDET, unten rechts ein KLEINER 45°-Schnitt (Masken-Technik wie .z-card, Richtung 315deg = Ecke unten rechts — der Haken bleibt frei). Rahmen = Element- flaeche, Inneres = ::before in var(--flaeche) (1.2px-Band bleibt stehen); checked = Akzent-Flaeche + dunkler Haken (::before aus). Groesse & Schnitt ueber --cbx/--cbc — Filterspalte nutzt die kleinere 14px-Variante. ==== */ .option input,.zeile .chk,#selAll,.rch-drow input[type=checkbox]{ --cbx:16px;--cbc:3px; position:relative;width:var(--cbx);height:var(--cbx);flex:0 0 var(--cbx);margin:0; appearance:none;-webkit-appearance:none;border:0;cursor:pointer; background:color-mix(in srgb,var(--ink) 42%,transparent); border-radius:3px 3px 0 3px; /* ⚠ Das #000 in mask-image ist KEINE Farbe, sondern Deckung: Die Maske liest nur den Alphakanal — schwarz heisst "hier sichtbar", transparent heisst "hier weg". Es darf NICHT auf eine Markenfarbe umgestellt werden; das Eck sieht danach genauso aus, und der naechste Farbwechsel verschiebt eine Kante statt eines Farbtons. Es sind 14 solche Stellen. */ -webkit-mask-image:linear-gradient(315deg,transparent 0 var(--cbc),#000 calc(var(--cbc) + .35px)); mask-image:linear-gradient(315deg,transparent 0 var(--cbc),#000 calc(var(--cbc) + .35px)); transition:background var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .option input{--cbx:14px;--cbc:2.5px} /* Ganzzahliges 1px-Inset — 1.2px rundete je nach Display auf manchen Kanten auf 2px (Rahmen wirkte an zwei Seiten dicker). */ .option input::before,.zeile .chk::before,#selAll::before, .rch-drow input[type=checkbox]::before{ content:'';position:absolute;inset:1px;background:var(--flaeche); border-radius:2px 2px 0 2px; /* ⚠ #000 in der Maske = Deckung, keine Farbe (s. Kopf) */ -webkit-mask-image:linear-gradient(315deg,transparent 0 calc(var(--cbc) - .4px),#000 calc(var(--cbc) - .05px)); mask-image:linear-gradient(315deg,transparent 0 calc(var(--cbc) - .4px),#000 calc(var(--cbc) - .05px))} /* Auf der hellen Selected-Karte (auch im Dark Mode) dunkler Rahmen */ /* ⚠ GEFUNDEN AM 17.08.2026 (W2), Ursache aelter: --result-selected-ink wird NUR von hermod/static/app.css gesetzt. Diese Regel stand hier ohne Rueckfall — in Heimr oder Snotra war die ganze Zeile damit ungueltig, still. Jetzt faellt sie auf die Tinte der Basis zurueck; die Basis traegt sich wieder selbst. Gehoert der Sache nach zu H10 (Hermod auseinanderpfluecken). */ .zeile.active .chk{background:color-mix(in srgb,var(--result-selected-ink,var(--ink)) 42%,transparent)} .option input:checked,.zeile .chk:checked,#selAll:checked, .rch-drow input[type=checkbox]:checked{background:var(--tos-accent-secondary)} .option input:checked::before,.zeile .chk:checked::before,#selAll:checked::before, .rch-drow input[type=checkbox]:checked::before{display:none} .option input:checked::after,.zeile .chk:checked::after,#selAll:checked::after, .rch-drow input[type=checkbox]:checked::after{ content:'';position:absolute;width:8px;height:4.5px;left:50%;top:50%; border-left:2px solid var(--akzent-text);border-bottom:2px solid var(--akzent-text); transform:translate(-50%,-65%) rotate(-45deg)} .option:hover input:not(:checked),.zeile .chk:hover:not(:checked),#selAll:hover:not(:checked), .rch-drow input[type=checkbox]:hover:not(:checked){ background:var(--control-accent)} .option input:checked:hover,.zeile .chk:checked:hover,#selAll:checked:hover{filter:brightness(.94)} /* Fokus: Ring wuerde vom clip-path gekappt — stattdessen Signal-Flaeche */ .option input:focus-visible,.zeile .chk:focus-visible,#selAll:focus-visible{ outline:none;background:rgba(var(--signal-rgb),.55)} @media (prefers-reduced-motion:reduce){ .card-shell,.option,.accordion-head,.symbol{transition:none} } /* ==== Pills: EIN Grundmuster für alle kleinen Text-Plaketten (Audit 4, W5). Vorher 8 separat gepflegte Designs mit 6 Radien; Farbpaare doppelt. Farb-Modifier gelten paarweise (Job-Typ .k-* == Verzeichnis-Marker .rch-mk.*). */ /* Provisorium-Anpassung (keine eigene Referenz — integration assumption): neutrale, ruhige Pills; Akzent nur als Hauch bei semantischen Varianten */ .badge,.rch-kt,.rch-mk,.rch-wztag,.rch-tbd,.rch-chip{display:inline-flex;align-items:center;gap:3px; font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:9px;white-space:nowrap; background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);border:0} .badge.tpl{background:var(--akzent-soft)} /* Formkarten (Layer 3): card-shell (Shadow) trägt die Karte, .card = maskierte Fläche mit 12px-Cut (Maske 8.45/8.8px — Wert aus approved-tokens/GUIDE; Abweichung dokumentiert: die Detail-Referenz nutzt 11.65/12px ≙ ~17px) */ .card-shell{filter:drop-shadow(0 12px 28px color-mix(in srgb,var(--schatten) 14%,transparent)) drop-shadow(0 2px 6px color-mix(in srgb,var(--schatten) 8%,transparent))} .card{padding:15px;border-radius:7px;border:0;box-shadow:none;margin-bottom:0; color:var(--ink);background:rgba(var(--card-rgb,255,255,255),var(--detail-card-alpha,.86)); -webkit-backdrop-filter:blur(11px) saturate(108%);backdrop-filter:blur(11px) saturate(108%); /* ⚠ #000 in der Maske = Deckung, keine Farbe (s. Kopf) */ -webkit-mask-image:linear-gradient(225deg,transparent 0 8.45px,#000 8.8px); mask-image:linear-gradient(225deg,transparent 0 8.45px,#000 8.8px)} :root{--card-rgb:255,255,255;--detail-card-alpha:.86} :root[data-theme="dark"]{--card-rgb:66,73,82;--detail-card-alpha:.58} .card h4{margin:0 0 13px;font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.065em;color:var(--ink)} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start} .field{display:flex;flex-direction:column;gap:5px;min-width:0} .field.full{grid-column:1 / -1} .field label{font-size:11px;font-weight:500;color:var(--ink)} /* Abstand als margin statt Leerzeichen im Text — sonst beginnt die gepunktete Unterstreichung schon im Leerraum und schneidet optisch ins Label. */ .field-hint{font-weight:400;font-size:10.5px;opacity:.65;text-transform:none;letter-spacing:0;color:var(--muted);margin-left:7px} .field-hint.hint-click{cursor:help;text-decoration:underline dotted;text-underline-offset:2px} .hint-pop{position:fixed;z-index:var(--z-editor);max-width:300px;background:var(--flaeche); border:1px solid var(--rahmen);border-radius:8px;box-shadow:0 10px 30px color-mix(in srgb,var(--schatten) 22%,transparent); padding:8px 11px;font-size:12px;line-height:1.5;color:var(--ink); font-weight:400;text-transform:none;letter-spacing:0} .date-trio{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .inp-datum{font-variant-numeric:tabular-nums} /* ==== Textfelder/Textareas: gekapselter 1px-Frame (7px außen, 6px innen) + Fokus-Lichtinseln — Referenz detail-selected-company-composition-a ==== */ /* ⭐ Rahmen und Hover aus der Tinte gerechnet: EINE Regel fuer beide Themen, weil --ink mit dem Thema dreht. Der dunkle Satz hatte vorher .16/.30 statt .17/.31 — der Unterschied ist eine Stufe von 255 und bewusst eingespart, dafuer koennen die vier Werte nie auseinanderlaufen. */ :root{--field-frame:color-mix(in srgb,var(--ink) 17%,transparent); --field-hover:color-mix(in srgb,var(--ink) 31%,transparent); --field-rgb:255,255,255;--field-alpha:.93} :root[data-theme="dark"]{--field-rgb:55,62,70;--field-alpha:.88} .field-frame,.combo-frame{position:relative;display:block;padding:1px;border-radius:7px; background:var(--field-frame); transition:transform var(--knopf-bewegung-zurueck) var(--bewegung-kurve),filter var(--knopf-bewegung-zurueck) var(--bewegung-kurve),background var(--knopf-bewegung-zurueck) var(--bewegung-kurve)} .field-frame:hover,.combo-frame:hover{z-index:2;transform:translateY(-1px); background:var(--field-hover); filter:drop-shadow(0 4px 6px color-mix(in srgb,color-mix(in srgb,var(--schatten) 40%,transparent) 40%,transparent))} /* Fokus: kompletter Perimeter sofort da, weiche Lichtinseln wandern durch den Frame (16 % Akzentbasis, 88 % Inseldeckkraft, 142 % Inselgröße, 13s) */ .field-frame:focus-within{background: radial-gradient(circle at 13% 4%,rgba(var(--signal-rgb),.88) 0 5%,transparent 15%), radial-gradient(circle at 94% 18%,color-mix(in srgb,var(--tos-accent-secondary) 88%,transparent) 0 6%,transparent 17%), radial-gradient(circle at 64% 102%,rgba(var(--signal-rgb),.72) 0 7%,transparent 18%), color-mix(in srgb,var(--tos-accent-primary) 16%,var(--field-frame)); background-size:142% 142%; animation:detail-focus-islands 13s ease-in-out infinite alternate; filter:drop-shadow(0 0 7px rgba(var(--signal-rgb),.10))} .field-frame:focus-within:hover{transform:none} /* Fehler (z. B. ungültiges Datum): semantische Farbe schlägt auch Fokus */ .field-frame:has(.invalid),.field-frame.is-error{ background:color-mix(in srgb,var(--rot) 72%,var(--field-frame))!important; animation:none!important; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--rot) 18%,transparent))} .field input,.field select,.field textarea{display:block;width:100%;padding:0 11px; border:0;border-radius:6px;outline:0;font-size:13px;font-family:inherit; color:var(--ink);background:rgba(var(--field-rgb),var(--field-alpha))} .field input{height:38px} .field textarea{min-height:82px;padding:10px 11px;resize:vertical} .field input[readonly]{color:var(--muted); background:color-mix(in srgb,rgba(var(--field-rgb),var(--field-alpha)) 90%,transparent)} .field input:disabled,.field textarea:disabled{color:var(--muted);opacity:.56;cursor:not-allowed} .field-frame:has(input:disabled),.field-frame:has(textarea:disabled){ transform:none!important;filter:none!important;animation:none!important} .field-frame:has(input[readonly]){animation:none!important;filter:none!important;transform:none!important; background:var(--field-frame)!important} @keyframes detail-focus-islands{0%{background-position:0% 25%}50%{background-position:58% 75%} 100%{background-position:100% 18%}} @media (prefers-reduced-motion:reduce){ .field-frame,.combo-frame{transition:none} .field-frame:hover,.combo-frame:hover{transform:none} /* statischer vollständiger Akzentperimeter statt Lichtinseln */ .field-frame:focus-within{animation:none;background: color-mix(in srgb,var(--tos-accent-primary) 42%,var(--field-frame))} } /* ==== Combobox (zugänglich, kontrolliert) — natives