/* ============================================================ PERSONAL OS — DIE TOKENS. Fassung v34 (24.08.2026) DIE EINZIGE DATEI IM PROJEKT, IN DER EIN FARBWERT STEHEN DARF. `js/pruefen.test.js` besteht darauf, und der Grund ist nicht Ordnung: Eine Farbe, die in einer Buehne steht, wird beim naechsten Umbau vergessen — und dann steht auf einer Seite ein Grau aus der vorletzten Fassung, das niemand mehr findet. WAS SICH MIT v34 GEDREHT HAT, und warum: 1. DER TAGBOGEN IST GESCHICHTE. Bis v33 wanderte der Grund ueber neun Stationen durch den Tag, und `js/tagbogen.js` rechnete jede Schriftfarbe per WCAG nach. Das war schoen und es war teuer: Jede Flaeche musste auf JEDEM Punkt der Kurve funktionieren, also konnte keine Flaeche eine Form haben — nur eine Kante. Jetzt gibt es zwei feste Lichter, die NACHT (Vorgabe) und PORZELLAN (`[data-licht="hell"]`), und weil sie feststehen, darf das Material wieder Relief tragen. 2. DAS MATERIAL IST RELIEF, KEINE KANTE. Alles ist aus derselben Flaeche gepresst: `--neo-auf` hebt heraus, `--neo-ein` drueckt ein. Kein Kasten, kein Glas in der Flaeche, keine gefaerbte Platte. 3. EINE SCHRIFT. Newsreader ist gefallen. Ein Instrument spricht nicht in zwei Schriften; die `--type-blatt-*`-Namen bleiben und zeigen jetzt auf Switzer, damit nichts stumm bricht. 4. BEWEGUNG IST ZURUECK — als Einrasten. `--schnapp` unter 200 ms, mechanisch. Die Herleitung steht in `System/Kodex.md` Z4. Der Akzent ist SILBER: Licht auf Metall. Moos heisst „auf Kurs", Glut ist ausschliesslich die Warnung, Ocker heisst „knapp". Sonst nichts. ============================================================ */ /* ============================================================ 1 · DIE SCHRIFT Eine Familie, vier Schnitte, zwei Kursive — alle oertlich. Eine PWA, die offline startet, darf zur Laufzeit keinen fremden Host brauchen. Die variable Fassung traegt 300 bis 900; die statischen sind der Rueckfall fuer Browser ohne Variable-Font-Unterstuetzung und stehen deshalb im Stack HINTER der variablen, nicht daneben. ============================================================ */ @font-face{font-family:"Switzer";font-style:normal;font-weight:300 900;font-display:swap; src:url("../fonts/Switzer-Variable.woff2") format("woff2-variations"), url("../fonts/Switzer-Variable.woff2") format("woff2")} @font-face{font-family:"Switzer";font-style:italic;font-weight:400;font-display:swap; src:url("../fonts/Switzer-Italic.woff2") format("woff2")} @font-face{font-family:"Switzer";font-style:italic;font-weight:500;font-display:swap; src:url("../fonts/Switzer-MediumItalic.woff2") format("woff2")} @font-face{font-family:"Switzer Static";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/Switzer-Regular.woff2") format("woff2")} @font-face{font-family:"Switzer Static";font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/Switzer-Medium.woff2") format("woff2")} @font-face{font-family:"Switzer Static";font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/Switzer-Semibold.woff2") format("woff2")} :root{ --font-sans:"Switzer","Switzer Static","Helvetica Neue",Helvetica,Arial,sans-serif; /* Die Schrift, in der die Arbeit entsteht — Editor und Bibkeys. `ui-monospace` bleibt vorn: es ist auf jedem Geraet die dort beste. */ --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --schrift-mono:var(--font-mono); } /* ============================================================ 2 · DIE NACHT — die Vorgabe ============================================================ */ :root{ /* Stufung neu am 25.08.2026: Grund, Flaeche und Flaeche-hoch lagen so nah beieinander (L* 3,2 / 8,6 / 10,4), dass im Nachtlicht alles zu einer Masse verschwamm — der Befund "Neomorphism nicht erkennbar". Jetzt tragen die Materialwerte die Trennung, nicht nur die Schatten. */ /* Nachgezogen am 25.08.2026: Der Grundton war ein Blaugrau (#1C1E23), und im Nachtlicht las er sich als "grau", nicht als "aus". Jetzt traegt der Grund fast Schwarz, und die Trennung nach oben bleibt trotzdem gemessen — dieselbe Stufung wie vorher, eine Etage tiefer angesetzt. Das Relief darunter zieht mit: Auf schwaerzerem Grund traegt derselbe Schatten weniger, also wird er tiefer. */ --grund:#0C0D0F; --flaeche:#141619; /* das eine Material, aus dem alles gepresst ist */ --flaeche-hoch:#1B1E22; /* hoechstens eine je Buehne */ --senke:#08090A; /* klar unter der Flaeche, nie unter dem Grund */ --tinte:#F4F6F8; --tinte-still:#9BA1A9; /* Am 26.08.2026 von #666C74 auf #82898F gehoben. Der alte Wert kam auf der Flaeche auf 3,42:1 und auf `--flaeche-hoch` auf 3,16:1 — die dritte Stimme war unter WCAG AA, und zwar ueberall, wo sie steht: Augenbrauen, Fussnoten, Zaehler, jedes „kein Plan". Der neue traegt auf dem hellsten Grund noch 4,72:1 und bleibt trotzdem deutlich unter `--tinte-still` (5,40 gegen 6,96) — die Ordnung der drei Stimmen bleibt, nur liest sich die leiseste jetzt. Der Wert traegt 4,69:1 auch auf der hellsten Flaeche, die im Bild wirklich vorkommt: `--flaeche-hoch` mit einem `--tinte-hauch` darueber (#212326, so entsteht der Grund einer Metazeile in einem gehobenen Formular). Auf `--flaeche-hoch` allein gerechnet waeren 4,5:1 knapp erreicht — und genau dort lag der Rest. */ --tinte-fern:#868D94; --linie:rgba(255,255,255,.06); --linie-stark:rgba(255,255,255,.11); /* DER SCHALTER UND DER HAKEN HABEN EIGENE FARBEN, weil sie auf ZWEI Untergruenden stehen: im Sheet auf `--flaeche`, auf der Schreibbuehne auf `--grund`. Jede geliehene Flaeche trifft genau einen davon und verschwindet auf dem anderen — zweimal ist genau das passiert (26.08.2026 mit `--flaeche`, danach mit `--grund`, siehe `ds.css`). Die KANTE traegt den Kontrast, nicht die Fuellung: `#697077` steht gegen `--grund` mit 3,87:1, gegen `--flaeche` mit 3,61:1 und gegen `--flaeche-hoch` mit 3,33:1 — ueber der Schwelle von 3:1 fuer Bedienelemente auf allen dreien. Die Fuellung darf darum ruhig bleiben; sie soll den Aus-Zustand ruhig aussehen lassen, nicht laut. */ --schalter-spur:#31363D; --schalter-rand:#697077; --akzent:#C6CBD0; --akzent-glueh:#E3E6EA; --akzent-schrift:#DCDFE2; --moos:#74A45C; --moos-schrift:#8FBE77; --glut:#FF5E00; --glut-glueh:#FF7324; --glut-schrift:#FF9966; --ocker:#C9A55A; --ocker-schrift:#D9B978; --auf-moos:#0C1409; /* ---- DAS RELIEF. Vier Schatten, und mehr gibt es nicht. ---- NACHGESCHAERFT AM 26.08.2026. Das Relief hatte ein Licht und einen Schatten, aber das Licht lag bei 2,8 % Weiss — auf einer Flaeche von #141619 sind das drei Helligkeitsstufen, also nichts. Uebrig blieb der Schatten allein, und ein Schatten allein ist kein Relief: Das ist eine Karte mit einem Schlagschatten, wie jede andere App sie hat. Genau deshalb las sich die Flaeche flach. Neomorphismus braucht ZWEI Lichter, und auf dunklem Grund muss das obere kraeftiger sein als die Rechnung nahelegt — Weiss auf Schwarz wirkt weniger, als es misst. Die Hoehen tragen jetzt 7 bis 9 %, und dazu kommt eine harte Lichtkante von einem Pixel an der Oberkante: Sie ist es, die eine Flaeche „gefraest" statt „gezeichnet" aussehen laesst, weil echte Kanten scharf sind und nur die FLAECHEN weich. Die Mulde spiegelt das: dunkel oben links, hell unten rechts, und eine dunkle Kante innen oben — Licht faellt von oben, also liegt in einer Vertiefung der Schatten dort, wo bei einer Erhebung das Licht lag. Das ist der ganze Trick, und er stimmt nur, wenn beide Seiten ihn einhalten. DIE EINE REGEL, DIE MIT DEM STAERKEREN RELIEF WICHTIG WIRD: RELIEF BEZEICHNET EBENEN, NICHT DINGE. Solange das Licht bei 2,8 % lag, war es gleichgueltig, ob eine Liste EINE gehobene Platte war oder vierzehn gehobene Zeilen — man sah den Unterschied nicht. Jetzt sieht man ihn, und vierzehn gehobene Zeilen untereinander sehen aus wie eine Steppdecke: Jede behauptet, eine eigene Ebene zu sein, und wo alles eine eigene Ebene ist, gibt es keine mehr. Also: Die LISTE ist gehoben, ihre Zeilen sind es nicht. Zeilen trennt eine Haarlinie (`--linie`), und heben duerfen sie sich nur unter dem Zeiger oder wenn sie WIRKLICH eine Ebene hoeher liegen (ein aufgeklappter Posten, die laufende Zeile). Dasselbe gilt fuer Kacheln in einem Raster, Zeilen in einer Tabelle und Posten in einem Formular. Eine Buehne traegt hoechstens DREI Ebenen: den Grund, das Gehobene darauf, und hoechstens eine Sache, die noch hoeher liegt. Wer eine vierte braucht, hat in Wahrheit zu viel auf eine Buehne gelegt. */ --neo-auf: -6px -6px 16px rgba(255,255,255,.072), 8px 8px 20px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.42); --neo-auf-tief: -10px -10px 26px rgba(255,255,255,.092), 14px 15px 34px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.5); --neo-ein: inset 5px 5px 12px rgba(0,0,0,.72), inset -5px -5px 12px rgba(255,255,255,.062), inset 0 1px 0 rgba(0,0,0,.55); --neo-ein-tief: inset 9px 9px 20px rgba(0,0,0,.82), inset -8px -8px 18px rgba(255,255,255,.078), inset 0 1px 0 rgba(0,0,0,.6); /* ---- LIQUID METAL: die wandernde Chromkante ---- Sechs Stopps auf einem Verlauf, der sich dreht. Sie stehen einzeln, weil `js/ds/effekte.js` sie als SVG-Verlauf nachbaut (die Blende ist ein Strich, kein Rechteck — ein CSS-Verlauf traegt sie nicht). Erlaubt an genau vier Stellen: Marke, Blende, die eine Primaeraktion, der Fortschrittsbogen. WAS AM 26.08.2026 NICHT STIMMTE: Der Laufverlauf war zu 88 % ein fast durchsichtiges Weiss (6 %) mit EINEM hellen Keil darin. Im Standbild war davon ein heller Fleck an einer Ecke zu sehen und sonst nichts — das las sich nicht als Metall, sondern als Schmutz auf einer Kante, die es an den anderen drei Ecken gar nicht gab. Echtes Metall hat zwei Eigenschaften, und der Verlauf hatte keine: 1. Es ist IMMER da. Eine gefraeste Kante glaenzt nicht ueberall, aber sie ist ueberall Kante. Deshalb `--chrom-grund` — ein Stahlton, der den ganzen Ring traegt, auch dort, wo gerade kein Licht liegt. 2. Es hat ZWEI Glanzstellen, nicht eine. Ein zylindrisch geschliffener Ring unter einer Lichtquelle glaenzt an zwei gegenueberliegenden Punkten. Genau das macht den Unterschied zwischen „ein Fleck wandert" und „das Ding dreht sich im Licht". Jede Glanzstelle laeuft kalt hinein und warm heraus (`--chrom-kalt` -> `--chrom-glanz` -> `--chrom-warm`): Das ist die Farbaufspaltung, an der das Auge Metall von einem grauen Verlauf unterscheidet. */ --chrom-1:#F7F8FA; --chrom-2:#8E959D; --chrom-3:#D9C6AC; --chrom-4:#9FB0C4; --chrom-5:#33383E; --chrom-6:#EDEFF1; --chrom-grund:#3C424A; /* der Ring, wo kein Licht liegt */ --chrom-kalt:#7E93AC; /* der Anlauf: Stahlblau */ --chrom-glanz:#F4F6F8; /* die Spitze */ --chrom-warm:#D8C3A2; /* der Auslauf: Messing */ --chrom-lauf:conic-gradient(from 0deg, var(--chrom-grund) 0deg 30deg, var(--chrom-kalt) 48deg, var(--chrom-glanz) 59deg, var(--chrom-warm) 70deg, var(--chrom-grund) 92deg 210deg, var(--chrom-kalt) 228deg, var(--chrom-glanz) 239deg, var(--chrom-warm) 250deg, var(--chrom-grund) 272deg 360deg); /* Getoente Flaechen. Nie eine ganze Flaeche faerben. */ --akzent-hauch:color-mix(in srgb, var(--akzent-glueh) 8%, transparent); --moos-hauch:color-mix(in srgb, var(--moos) 14%, transparent); --glut-hauch:color-mix(in srgb, var(--glut) 13%, transparent); --ocker-hauch:color-mix(in srgb, var(--ocker) 15%, transparent); --tinte-hauch:color-mix(in srgb, var(--tinte) 6%, transparent); --tinte-hauch-stark:color-mix(in srgb, var(--tinte) 11%, transparent); /* Die Primaeraktion ist DASSELBE Material wie alles andere. Sie fuehrt durch Relief, Schriftgewicht und die eine wandernde Kante — nicht durch Farbe. Genau deshalb wirkt Glut, wenn sie einmal kommt. */ --stempel:var(--flaeche); --stempel-schrift:var(--tinte); /* Die zwei Glasflaechen, und es gibt keine dritte: Kopfleiste und Suchfeld. Beide gehoeren der Chrome-Ebene, nicht dem Inhalt. */ --glas-grund:color-mix(in srgb, var(--grund) 82%, transparent); --glas-feld:color-mix(in srgb, var(--flaeche) 72%, transparent); --glas-schliff:blur(14px) saturate(1.2); /* DIE BLENDE IST AUS METALL, NICHT AUS GLAS. Sie trug bis zum 25.08.2026 eine Glasfuellung samt `backdrop-filter`, dann einen eigenen Verlauf (`--blende-metall`) auf einem maskierten Kasten. Beide Wege scheiterten am selben Punkt: Ein Kasten hat eine Flaeche, die man wieder wegnehmen muss, und wo das Wegnehmen einmal nicht griff, klebte an jeder Ecke ein Rechteck. Seit dem 26.08.2026 ist der Bogen ein SVG-Pfad und traegt `#lmc` — denselben wandernden Verlauf wie Marke und Primaeraktion, aus `ds/effekte.js`. Drei Stellen, ein Material, und keine eigene Farbe mehr fuer die Blende. */ --schleier:rgba(4,5,7,.66); /* hinter Sheet und Blende */ --schatten-platte:var(--neo-auf); --schatten-hebt:var(--neo-auf-tief); --schatten-sheet:0 -8px 40px -20px rgba(4,6,10,.8); --k:1; /* 0 = Papier, 1 = Nacht */ /* Zieht mit den Reliefkanten gleich — und die sind am 26.08.2026 leiser geworden. Dieser Wert ist additiv: Er liegt auf Sheet, Suchfeld und Primaeraktion ZUSAETZLICH zur Innenkante aus `--neo-auf`. */ --licht-innen:rgba(255,255,255,.04); --maske-voll:#000; } /* ============================================================ 3 · PORZELLAN — der helle Zwilling Dieselben Formen, dasselbe Relief. Nur ist das Licht jetzt Papier: weisse Hoehen, taubengraue Tiefen. Der Akzent wird Stahl statt Silber — Licht auf hellem Grund ist dunkel. ============================================================ */ :root[data-licht="hell"]{ --grund:#DFE3E8; --flaeche:#EBEEF2; --flaeche-hoch:#F6F8FB; --senke:#D8DDE3; --tinte:#23262B; /* Am 25.08.2026 behoben: --tinte-fern war hier DUNKLER als --tinte-still, die dritte Stimme also lauter als die zweite — in der Nacht ist die Ordnung umgekehrt. Jetzt still 6,57:1, fern 4,70:1 auf der Flaeche. */ --tinte-still:#4F545A; /* Wie in der Nacht am 26.08.2026 nachgezogen: #646A71 kam auf der Senke auf 4,00:1 und auf dem Grund auf 4,24:1. #5A6067 haelt auf allen vier Gruenden ueber 4,5:1. */ --tinte-fern:#5A6067; --linie:rgba(21,23,26,.09); --linie-stark:rgba(21,23,26,.22); /* Dieselbe Rechnung im Porzellan-Licht: `#767D86` steht gegen `--grund` mit 3,23:1, gegen `--flaeche` mit 3,57:1 und gegen `--flaeche-hoch` mit 3,91:1. */ --schalter-spur:#C4CBD3; --schalter-rand:#767D86; --akzent:#565D66; --akzent-glueh:#2F343B; --akzent-schrift:#42484F; --moos:#4F8A38; --moos-schrift:#3D6B2B; --glut:#B2451F; --glut-glueh:#C1552B; --glut-schrift:#8A2A0D; --ocker:#8A6B24; --ocker-schrift:#6E5418; --auf-moos:#F2F6EE; /* Radien am 25.08.2026 auf ~zwei Drittel gekuerzt und das Taubengrau entschaerft: die tiefe Fassung (24/34 px) legte auf vollen Seiten einen Schattenteppich. Die Form bleibt, der Teppich geht. */ /* Am 26.08.2026 mitgezogen, damit beide Lichter dieselbe Sprache sprechen — aber zurueckhaltender als in der Nacht: Hier IST Weiss das Licht, ein heller Innenschein in der Mulde ist also richtig und nicht fremd. Er wird nur leiser, statt fast zu verschwinden. */ /* Am 26.08.2026 mit der Nacht nachgeschaerft. Hier war das Problem das umgekehrte: Das Licht (72 % Weiss) trug, der SCHATTEN war zu weich (32 % eines Taubengraus). Eine Flaeche, die nach oben leuchtet und nach unten kaum abfaellt, sieht nicht gepresst aus, sondern angeleuchtet. Der Schatten traegt jetzt mehr und faellt kuerzer — dieselbe Kante wie in der Nacht, nur andersherum: harte Lichtkante oben, harte Schattenkante unten. */ --neo-auf: -5px -5px 11px rgba(255,255,255,.92), 6px 7px 14px rgba(139,150,164,.46), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(139,150,164,.24); --neo-auf-tief: -8px -8px 18px rgba(255,255,255,.96), 11px 13px 26px rgba(139,150,164,.52), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(139,150,164,.3); --neo-ein: inset 4px 5px 9px rgba(139,150,164,.5), inset -3px -3px 7px rgba(255,255,255,.9), inset 0 1px 0 rgba(139,150,164,.34); --neo-ein-tief: inset 6px 7px 14px rgba(139,150,164,.58), inset -5px -5px 11px rgba(255,255,255,.94), inset 0 1px 0 rgba(139,150,164,.4); --chrom-1:#7A828B; --chrom-2:#42484F; --chrom-3:#8A7A5E; --chrom-4:#5E6C7C; --chrom-5:#2F343B; --chrom-6:#9AA2AB; /* Dasselbe Metall bei Tag, und die Rollen kehren sich um: Auf hellem Grund ist die Kante DUNKEL und der Glanz ist das, was noch heller ist als das Papier. Der Grundton ist ein gebuerstetes Zinn, der Glanz beinahe Weiss, die zwei Anlauffarben bleiben kalt und warm. */ --chrom-grund:#A5ADB6; --chrom-kalt:#6E7F92; --chrom-glanz:#FDFEFF; --chrom-warm:#B8A585; --chrom-lauf:conic-gradient(from 0deg, var(--chrom-grund) 0deg 30deg, var(--chrom-kalt) 48deg, var(--chrom-glanz) 59deg, var(--chrom-warm) 70deg, var(--chrom-grund) 92deg 210deg, var(--chrom-kalt) 228deg, var(--chrom-glanz) 239deg, var(--chrom-warm) 250deg, var(--chrom-grund) 272deg 360deg); /* Am 26.08.2026 von .5 auf .62 vertieft. Bei Tag liegt hinter dem Sheet ein heller Grund, und ein halbdurchsichtiges Taubengrau darauf blieb voll lesbar — der Schleier faerbte, statt zu trennen. */ --schleier:rgba(104,113,124,.62); --schatten-sheet:0 -8px 40px -20px rgba(21,23,26,.3); --licht-innen:rgba(255,255,255,.38); /* halbiert — der Schimmer legte sich als zweite Flaeche ueber jede Platte */ /* Hier stand das Tag-Gegenstueck zu `--blende-metall`. Es ist mit dem Kasten gefallen: Die Blende faerbt sich ueber `#lmc`, und der bezieht seine Stopps aus `--chrom-1…6` — die stehen im Block darueber und kippen mit dem Licht wie alles andere auch. */ --k:0; } /* ============================================================ 4 · TYPOGRAFIE Ein Schritt in der Skala ist mindestens Faktor 1,25 — flache Skalen lesen sich wie ein Formular. Zahlen immer `tabular-nums`. ============================================================ */ :root{ /* Die Redaktion — jetzt Switzer, leicht und gross statt Serife. */ --type-blatt-xl:500 clamp(29px,7.2vw,42px)/1.12 var(--font-sans); --type-blatt-l:500 clamp(24px,5.8vw,32px)/1.16 var(--font-sans); --type-blatt-m:500 21px/1.25 var(--font-sans); --type-blatt-lede:400 16.5px/1.5 var(--font-sans); --type-blatt-notiz:italic 400 15px/1.5 var(--font-sans); --type-blatt-klein:400 14px/1.5 var(--font-sans); /* Das Geraet */ --type-display-hero:600 clamp(34px,9vw,52px)/1 var(--font-sans); --type-display-xl:600 40px/1.02 var(--font-sans); --type-display-l:600 31px/1.06 var(--font-sans); --type-display-m:600 24px/1.1 var(--font-sans); --type-headline:600 25px/1.16 var(--font-sans); --type-title:600 18px/1.3 var(--font-sans); --type-subtitle:600 15px/1.35 var(--font-sans); --type-body:400 15px/1.55 var(--font-sans); --type-body-strong:600 15px/1.55 var(--font-sans); --type-small:400 13px/1.5 var(--font-sans); --type-small-strong:500 13px/1.5 var(--font-sans); --type-caption:400 11.5px/1.42 var(--font-sans); --type-caption-strong:600 11.5px/1.42 var(--font-sans); --type-metric-xl:600 clamp(44px,13vw,62px)/1 var(--font-sans); --type-metric:600 22px/1 var(--font-sans); --type-metric-sm:600 16px/1 var(--font-sans); --type-label:500 10.5px/1.2 var(--font-sans); --type-label-lg:500 11.5px/1.2 var(--font-sans); --type-mono:400 13px/1.6 var(--font-mono); --tracking-display:-.028em; --tracking-tight:-.016em; --tracking-metric:-.02em; --tracking-label:.115em; /* Die Signatur: fuer EINEN Namen in der Anrede, einmal am Tag. */ --type-script:italic 500 25px/1.25 var(--font-sans); --type-script-sm:italic 400 18px/1.35 var(--font-sans); } /* ============================================================ 5 · MASSE, RADIEN, BEWEGUNG Nichts hier ist ein Framework-Wert. Sieht eine Zahl nach Voreinstellung aus, ist sie falsch. ============================================================ */ :root{ --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px; --space-11:56px; --space-12:72px; --space-13:96px; --gutter-screen:18px; --gutter-card:18px; --gutter-section:24px; --gap-tight:6px; --gap-grid:8px; --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:20px; --radius-xl:26px; --radius-screen:34px; --radius-pill:999px; --border-hairline:1px; --hairline:1px solid var(--linie); --griff:44px; /* die kleinste Flaeche, die ein Daumen trifft */ --moment-hoehe:42px; /* eine Hoehe der Moment-Gruppe — die Gleitpille rechnet mit ihr, also steht sie EINMAL hier */ --leiste-hoehe:62px; --orte-breite:240px; /* die Ortsleiste am Laptop */ --orte-schmal:60px; /* dieselbe Leiste, nur Ikonen */ --kopf-hoehe:56px; /* Vorbelegung; die echte misst `anstrich.js` */ /* ---- DIE BEWEGUNG ---- Sie KOMMUNIZIERT, sie dekoriert nicht. BIS ZUM 26.08.2026 GALT: drei Dauern, alle unter 200 ms. Die Regel kam aus dem richtigen Befund — eine App, in der alles wabert, sieht nach Fehler aus — und zog daraus den falschen Schluss, naemlich dass KURZ dasselbe sei wie PRAEZISE. Ist es nicht. Bei 160 ms sieht das Auge keinen Weg, sondern ein Zucken: Ein Sheet war da, dann war es weg, und dazwischen lag ein Wisch. Das ist nicht die Ruhe eines Instruments, das ist die Hektik einer Webseite. DIE NEUE ORDNUNG IST NICHT „LAENGER", SONDERN GESTAFFELT: Die Dauer folgt der Strecke und der Masse. Was unter dem Finger passiert, bleibt kurz — eine Taste, die 300 ms zum Einsinken braucht, fuehlt sich kaputt an. Was einen Weg zurueklegt, braucht Zeit fuer den Weg. SIEBEN KLASSEN, SIEBEN DAUERN, UND ES GIBT KEINE ACHTE. Wer eine achte braucht, hat in Wahrheit eine der sieben falsch zugeordnet. `probe/tiefgang.mjs` §15 prueft genau das: Jede Dauer in `motion.css` MUSS einer dieser sieben entsprechen. DAS ANKOMMEN IST KUERZER ALS DAS ZURUECKGEHEN. `--dauer-griff` gilt fuer den Weg hinein, `--dauer-loesen` fuer den Weg heraus. So verhaelt sich jede echte Taste: Sie gibt sofort nach und kommt gemaechlich zurueck. Diese Asymmetrie ist der billigste und staerkste Griff, mit dem sich eine Flaeche koerperlich anfuehlt. */ --schnapp:cubic-bezier(.2,0,0,1); /* DIE SIEBEN, EINMAL UM EIN VIERTEL LAENGER (26.08.2026). Der Befund war nicht „eine Bewegung hetzt", sondern „es hetzt ueberall" — und das ist keine Frage einzelner Werte, sondern des Massstabs. Also wandern alle sieben gemeinsam (×1,25) statt einzeln: Die Verhaeltnisse zwischen ihnen sind das, was das System ausmacht, und wer eine Zahl herauszieht, zerlegt genau die. Die Ordnung bleibt darum unangetastet: Griff < Loesen, Fort < Flug, jede Sache geht weiter schneller hinein als heraus. `System/Kodex.md` Z4(3) traegt dieselben sieben Zahlen im Klartext. Wer hier dreht, dreht dort mit — sonst behauptet der Kodex Werte, die es nicht gibt. */ --dauer-griff:150ms; /* die Hand kommt an — Press, Hover, Fokus */ --dauer-loesen:325ms; /* die Hand geht weg — der Rueckweg derselben Sache */ --dauer-schnapp:250ms; /* ein Zustand kippt — Schalter, Chip, Haken */ --dauer-flug:425ms; /* etwas kommt herein — Sheet, Popover, Toast */ --dauer-fort:250ms; /* dasselbe geht hinaus — immer kuerzer als der Weg herein */ --dauer-buehne:525ms; /* die Buehne wechselt */ /* Der Abstand zwischen zwei Zeilen, die nacheinander hereinkommen. Er ist KEINE Dauer, sondern ein Versatz — deshalb steht er neben den sieben und nicht unter ihnen. Bei 26 ms laeuft eine Liste von zwoelf Zeilen in 312 ms ein: lang genug, dass das Auge die Richtung sieht, kurz genug, dass die letzte Zeile nicht wartet. */ --staffel:26ms; /* DIE ZWEITE KURVE, und es bleibt bei zweien. `--schnapp` ist die Hand am Schalter: kurz, hart, vorbei. `--gleiten` ist das Gegenteil und gilt fuer genau eine Klasse von Bewegung — etwas Schweres faehrt ueber eine Strecke: die Blende zu ihrem neuen Ziel, die Gleitpille durch die Mulde. Bei 200 ms wirkt so eine Fahrt gehetzt, weil das Auge den Weg nicht mitbekommt, sondern nur den Sprung. Deshalb die lange Dauer, und deshalb die Kurve, die am Ende ausschwingt statt anzuhalten. `--sprung` traegt einen Ueberschwung und gilt nur dort, wo etwas WIRKLICH herausspringt: die Register des Workspace-Faechers. */ --gleiten:cubic-bezier(.22,1,.36,1); --sprung:cubic-bezier(.34,1.44,.64,1); /* DIE DRITTE KURVE, und mit ihr ist die Reihe zu. `--weich` gehoert dem AUFTAUCHEN: Ein Sheet, ein Popover, ein Toast zieht schnell an und laeuft sehr lange aus. Sie unterscheidet sich von `--gleiten` im Anfang — `--gleiten` faehrt los wie etwas Schweres, `--weich` ist von der ersten Millisekunde an schnell und bremst dann ueber zwei Drittel der Strecke ab. Das ist der Unterschied zwischen „faehrt herbei" und „ist da und kommt zur Ruhe". */ --weich:cubic-bezier(.33,.7,0,1); --dauer-fahrt:650ms; /* etwas Schweres faehrt eine Strecke — Blende, Gleitpille */ /* Die einzigen zwei Dauerbewegungen des Systems. */ --dauer-chrom:7s; /* die wandernde Kante */ --dauer-orb:1; /* Taktfaktor des Denk-Orbs */ /* Radius und Strichbreite der Blende standen hier, solange CSS den Bogen zeichnete. Seit er ein SVG-Pfad ist, rechnet `ds/blende.js` mit ihnen — und eine Zahl, die gerechnet wird, gehoert dorthin, wo gerechnet wird, nicht in eine Variable, die man sich zurueckholt. */ }