@conciso/design-system 0.0.0-bootstrap.0

package/css/fonts.css

@@ -0,0 +1,20 @@
+/* Conciso Design System — Self-Host-Fonts (DSGVO: keine Google-CDN-Anfrage).
+   Montserrat + Libre Baskerville, Subsets latin + latin-ext, font-display:swap.
+   Lizenz: SIL Open Font License 1.1 (siehe fonts/*-OFL.txt). Generiert. */
+
+@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/libre-baskerville-400i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
+@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/libre-baskerville-400i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
+@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/libre-baskerville-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
+@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/libre-baskerville-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
+@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/libre-baskerville-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
+@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/libre-baskerville-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
+@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
+@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
+@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/montserrat-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
+@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/montserrat-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
+@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
+@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
+@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
+@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
+@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
+@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

package/css/tokens.css

@@ -0,0 +1,209 @@
+/* ── Design Tokens ── */
+:root {
+  /* ── Corporate (Global Brand) ── */
+  --co-500:#00BEBE; --co-50:#E0F7F7; --co-100:#B3ECEC; --co-200:#80DEDE;
+  --co-300:#4DD0D0; --co-400:#26C2C2; --co-600:#009E9E; --co-700:#007575;
+  --co-800:#004F4F; --co-900:#002B2B; --co-ink:var(--co-700);
+
+  /* ── AI.Applied ── */
+  --ki-500:#B5E61C; --ki-50:#F4FCD5; --ki-100:#E6F8A0; --ki-200:#D6F06D;
+  --ki-300:#C8EA42; --ki-400:#BEE82D; --ki-600:#8FAF0E; --ki-700:#6B8208;
+  --ki-800:#475705; --ki-900:#242C02; --ki-ink:var(--ki-800); /* farbiger ki-Text/Icons; flippt im Dark auf --ki-200 (dark-mode.css), da ki-800 dunkel-auf-dunkel wäre */
+
+  /* ── Wirksame Organisationen ── */
+  --wo-500:#44A030; --wo-50:#EBF5E6; --wo-100:#CEEAC3; --wo-200:#A3D48E;
+  --wo-300:#72BD58; --wo-400:#55AD3F; --wo-600:#347A22; --wo-700:#285E1A;
+  --wo-800:#183A0E; --wo-900:#0A1F05; --wo-ink:var(--wo-700);
+
+  /* ── Effektive Software ── */
+  --es-500:#2F5FD4; --es-50:#EAF0FB; --es-100:#C8D9F5; --es-200:#98B7EE;
+  --es-300:#6593E5; --es-400:#4677DC; --es-600:#2249B2; --es-700:#1B3D9A;
+  --es-800:#112568; --es-900:#071035; --es-ink:var(--es-700);
+
+  /* ── Bereichs-Akzenttext ──
+     --XX-ink ist farbiger Text und farbige Icons, die in BEIDEN Modi lesbar bleiben müssen:
+     Light der dunkle Ton (-700, ki -800 weil ki-700 nur 4,05:1 trägt), Dark der helle (-200,
+     es -100). Bisher gab es das nur für ki, und genau deshalb ist bei jeder Korrektur die Gefahr,
+     eine Light-Farbe zu setzen, die im Dark dunkel-auf-dunkel läuft: co-700 trägt auf Weiß 5,52:1
+     und auf der dunklen Seite nur 3,17:1. Wer farbigen Text setzt, nimmt --XX-ink. */
+
+  /* ── Rosé ── */
+  --ro-500:#C23060; --ro-50:#FDEDF2; --ro-100:#F9CEDD; --ro-200:#F0A0BE;
+  --ro-300:#E06898; --ro-400:#CF4478; --ro-600:#A02050; --ro-700:#7E1639;
+  --ro-800:#560E26; --ro-900:#2E0513;
+
+  /* ── Bereichs-Bänder ──
+     --XX-band ist die Fläche großer getönter Sektionen (Hero, CTA-Band). Im Light identisch mit
+     --XX-50, es gibt also nichts zu unterscheiden. Getrennt wird es erst im Dark: dort muss ein
+     Band dunkler bleiben als die Karten, die darauf sitzen, während eine Badge- oder Kachel-Füllung
+     umgekehrt heller als ihr Grund sein muss, um überhaupt als Fläche zu lesen. Ein Wert kann
+     beides nicht leisten, deshalb zwei Token. */
+  --co-band:var(--co-50); --ki-band:var(--ki-50); --es-band:var(--es-50); --wo-band:var(--wo-50);
+
+  /* ── Bauteil-Füllungen ──
+     --XX-fill ist die Füllung von Pill und Bereichs-Badge. Im Light ist das der ruhige Tint, also
+     dasselbe Rezept wie bei den Icon-Kacheln: zarte Fläche, kräftige dunkle Schrift darauf
+     (7,5 bis 11,4:1). WCAG verlangt für diese Fläche nichts, das Label trägt die Aussage, und
+     darüber entscheidet das Markenrad: „Ruhig“. Die Schrift wirkt auf dem zarten Grund kräftiger,
+     weil sie nicht mit der Fläche konkurriert.
+     Getrennt wird es erst im Dark: dort liegt helle Schrift auf dunklem Tint, und wenn der Tint
+     fast die Helligkeit der Karte hat, hält nichts mehr die Pill zusammen. Deshalb dort eigene,
+     gehobene Werte (siehe dark-mode.css). Gleiche Rolle, zwei Werte, wie bei --XX-band.
+     Kein --ro-fill: Rosé ist Akzent- und Statusfarbe, es gibt weder ro-Pill noch ro-Badge.
+
+     Abgrenzung nach oben und unten: --XX-50 bleibt der RUHIGE Tint, in beiden Modi. Er trägt
+     dekorative Flächen (Icon-Kachel, Timeline-Marker, Hover-Füllung des Chips, Inline-Code), die
+     nicht als Fläche lesen müssen: WCAG verlangt dort nichts, und das Markenrad sagt „Ruhig“.
+     --XX-band ist die große Sektionsfläche. Drei Rollen, drei Namen. */
+  --co-fill:var(--co-50); --ki-fill:var(--ki-50); --es-fill:var(--es-50); --wo-fill:var(--wo-50);
+
+
+  /* ── Neutrals ── */
+  --n-0:#FFFFFF; --n-50:#F5F7F7; --n-100:#E8EDED; --n-200:#C9D3D3;
+  --n-300:#A0B0B0; --n-400:#6E8585; --n-500:#4A6565; --n-600:#2E4545;
+  --n-700:#1A2E2E; --n-800:#0D1F1F; --n-900:#060F0F;
+
+  /* ── Semantic ──
+     --c-* sind Text-Farben (Required-Asterisk, Inline-Fehlertext, Do/Don't-Marker).
+     Werte sind in beiden Modi auf AA-Lesbarkeit auf der jeweiligen page-bg ausgelegt.
+     Light: dunklere/gedeckte Sättigung für Kontrast auf weiß. Dark-Overrides in dark-mode.css.
+     --c-*-bg sind Tint-Hintergründe für Callouts; Text darauf via --badge-*-text. */
+  /* Die -bg-Tints sind Bauteil-Füllungen (Callout, Status-Badge, Trend-Chip) und müssen als FLÄCHE
+     lesen: 1,3:1 gegen Weiß UND gegen n-50 (CONTRIBUTING § 3). Die alten Werte lagen bei 1,02 bis
+     1,16:1, das Element las nur noch als farbiger Text. Neu gemessen Fläche Weiß / n-50 und Text
+     darauf: success 1,43 / 1,33 mit 4,91:1 · warning 1,47 / 1,37 mit 4,84:1 · error 1,60 / 1,49
+     mit 4,99:1. Beim Warnton musste der Text mitwandern (--badge-warn-text), auf der kräftigeren
+     Füllung trug #8A5E0A nur 3,87:1. */
+  --c-success:#0E6644; --c-success-bg:#A9E5C8;  /* Text auf #fff: 6.99:1 ✓ AAA */
+  --c-warning:#785008; --c-warning-bg:#F5D08C;  /* Text auf #fff 7,12:1, auf dem eigenen Tint 4,84:1 (vorher #8A5E0A: 5,70 bzw. nur 3,87:1) */
+  --c-error:#9B2020;   --c-error-bg:#F5BFBF;    /* Text auf #fff 8,01:1, auf dem eigenen Tint 4,99:1 (vorher #B22020: 6,73 bzw. nur 4,19:1) */
+
+  /* ── Component color tokens (theme-overridable) ── */
+  --badge-ok-text:var(--c-success); --badge-warn-text:var(--c-warning); --badge-err-text:var(--c-error); /* dieselben Töne wie die semantischen Textfarben: sie stehen auf denselben Tints, zwei Werte dafür wären zwei Quellen der Wahrheit */
+  --badge-neu-bg:var(--n-200); --badge-neu-text:var(--n-600); /* n-200 statt n-100: als Füllung trug n-100 nur 1,18:1 gegen Weiß und 1,10:1 gegen n-50, n-200 gibt 1,53 / 1,42:1. Text darauf 6,69:1 */
+  --cbadge-aa-bg:#E6F9F1; --cbadge-aa-text:#0a5c38;
+  --cbadge-aaa-bg:#D0F0FF; --cbadge-aaa-text:#004466;
+  --cbadge-fail-bg:#FDEAEA; --cbadge-fail-text:#9b2020;
+
+  /* ── Surfaces & Text ── */
+  --bg-page:#FFFFFF; --bg-surface:var(--n-0); --bg-overlay:rgba(0,94,94,.06); --bg-code:var(--n-800);
+  /* --bg-surface-hover: gehobene Fläche interaktiver Elemente im Hover. Light bewusst gleich
+     --bg-surface: auf weißem Grund trägt die Tiefe der Schatten (--e3), eine Aufhellung gäbe es
+     nicht. Im Dark trägt der Schatten weniger, dort hebt der Zustand zusätzlich die Fläche.
+     Es ist ein Zustand, keine dritte statische Flächen-Stufe. */
+  --bg-surface-hover:var(--bg-surface);
+  /* --bg-plate: helle Platte unter Fremd-Assets, die nur in einer dunklen Fassung vorliegen
+     (Kundenlogos). Im Dark gedämpft statt reinweiß, weil eine reinweiße Fläche dieser Größe
+     auf dunklem Grund blendet. */
+  --bg-plate:#FFFFFF;
+  --tx-brand:#333E48; --tx-primary:#333E48; --tx-secondary:var(--n-500); --tx-muted:#5A7171; /* Auf Weiß 5,20:1, auf n-50 4,84:1, auf getönten Hellflächen 4,66 bis 4,73:1.
+     Vorher #5E7676: auf Weiß 4,85:1 ✓, aber auf n-50 und getönten Gründen nur 4,35 bis 4,51:1, also
+     genau dort unter AA, wo gedämpfter Text meist sitzt (Meta-Zeilen, Annotationen, Specimen-Labels).
+     Bleibt klar heller als --tx-secondary (#4A6565, 5,63 bis 6,29:1), die Hierarchie bleibt also. */
+
+  /* ── Typography ── */
+  --font:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
+  --font-display:'Libre Baskerville','Georgia',serif;
+  /* --font-mono: dritte Schriftrolle des Systems (Code/Werte), bisher zehnmal hart im CSS.
+     Wert unverändert übernommen, reiner Struktur-Schritt, keine gerenderte Änderung. */
+  --font-mono:'Courier New',monospace;
+
+  /* ── Typography Scale ──
+     Einheiten rem-basiert (Juli 2026, WCAG 1.4.4 "Resize Text"): 1rem = 16px bei Default-Root
+     (body: font-size:16px). Umrechnung px→rem = px/16. rem respektiert die vom Nutzer im Browser
+     eingestellte Standardschriftgröße; px täte das nicht.
+     Minimum-Font-Size systemweit: 12 px = 0.75rem. Das Minimum gilt bei Default-Root und skaliert
+     bei größerer Nutzereinstellung nach oben. Tokens darunter wurden eliminiert oder angehoben,
+     damit Inhalte unter allen Bedingungen gut lesbar bleiben (Bildschirm, Mobile, Print). */
+  /* Sans-serif (Montserrat)
+     Body-Skala (Mai 2026): 16 / 14 / 12 px. Body Md ist Standard-Fließtext (war 14, jetzt 16
+     für bessere Lesbarkeit auf C-Level-Mittelstand-Zielgruppe und iOS-Auto-Zoom-Fix bei Form-Inputs).
+     Body Sm = 14 px für Meta-Daten/Card-Meta. Body Xs = 12 px für Captions. */
+  --ty-caption:      400 0.75rem/1rem var(--font);
+  --ty-body-xs:      400 0.75rem/1rem var(--font);
+  --ty-body-sm:      400 0.875rem/1.25rem var(--font);
+  --ty-body-md:      400 1rem/1.5rem var(--font);
+  /* label-xs und label-sm haben dieselben Metriken — label-xs ist die "Eyebrow"-Variante,
+     mit text-transform:uppercase + letter-spacing am Use-Site. label-sm ist für Mixed-Case-Labels. */
+  --ty-label-xs:     500 0.75rem/1rem var(--font);
+  --ty-label-sm:     500 0.75rem/1rem var(--font);
+  --ty-label-md:     500 0.875rem/1.25rem var(--font);
+  /* Title-Sm (Mai 2026): 20 px statt 18 px, damit Card-Titel mit klarer 4-px-Stufe über
+     dem neuen 16-px-Body-Md sitzen. Title-Lg ist entfallen, das Logo nutzt jetzt eine eigene
+     Klasse .nav-logo-text mit fest verdrahteten Metriken. */
+  --ty-title-sm:     500 1.25rem/1.75rem var(--font);
+  --ty-label-xs-strong: 600 0.75rem/1rem var(--font);
+  --ty-name:         600 0.875rem/1.25rem var(--font);
+  /* Display / serif (Libre Baskerville) */
+  --ty-serif-sm:     400 1.0625rem/1.75rem var(--font-display);
+  --ty-serif-md:     400 1.25rem/1.75rem var(--font-display);
+  --ty-serif-lg:     400 1.25rem/2rem var(--font-display);
+  /* Headline/Display fluid: font-size via clamp(), Zeilenhöhe als unitless Ratio
+     (skaliert proportional zur gerechneten Größe, nie < 1 — siehe line-height-Konvention).
+     rem-basiert (Juli 2026, WCAG 1.4.4 "Resize Text"): Min/Max in rem, Mittel-Term als
+     rem + vw, damit die Schrift auch die Browser-Standardschriftgröße respektiert (px+vw
+     reagierte nur auf Seiten-Zoom). Mittel-Term = Zwei-Anker-Fluid-Kurve (Anker 360 px → Min,
+     1240 px → Max); rem-Anteil trägt die Basis (resize-fähig), vw fügt fluides Wachstum hinzu.
+     Max = bisheriger Fixwert → Desktop unverändert; Min greift am Phone (alle ≥ 1.25rem =
+     20 px @ Default, also ≥ Font-Size-Minimum). Mirror von --ty-display-lg. */
+  --ty-headline-xs:   400 clamp(1.25rem, 1.2rem + 0.23vw, 1.375rem)/1.35 var(--font-display);
+  --ty-headline-sm:   400 clamp(1.3125rem, 1.236rem + 0.34vw, 1.5rem)/1.33 var(--font-display);
+  --ty-headline-md:   400 clamp(1.4375rem, 1.31rem + 0.57vw, 1.75rem)/1.3 var(--font-display);
+  --ty-display-sm:   400 clamp(1.75rem, 1.546rem + 0.91vw, 2.25rem)/1.22 var(--font-display);
+  --ty-display-md:   400 clamp(1.875rem, 1.619rem + 1.14vw, 2.5rem)/1.2 var(--font-display);
+  --ty-display-lg:   400 clamp(1.75rem, 1.29rem + 2.05vw, 2.875rem)/1.15 var(--font-display);
+
+  /* ── Spacing ── */
+  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;
+
+  /* ── Shape (5 Stufen) ── */
+  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:28px; --r-full:9999px;
+
+  /* ── Elevation (Shadow + Tonal Overlay) ── */
+  --e0:none;
+  --e1:0 1px 2px rgba(0,0,0,.30),0 1px 3px 1px rgba(0,0,0,.15);
+  --e2:0 1px 2px rgba(0,0,0,.30),0 2px 6px 2px rgba(0,0,0,.15);
+  --e3:0 1px 3px rgba(0,0,0,.30),0 4px 8px 3px rgba(0,0,0,.15);
+  --e4:0 2px 3px rgba(0,0,0,.30),0 6px 10px 4px rgba(0,0,0,.15);
+  --e5:0 4px 4px rgba(0,0,0,.30),0 8px 12px 6px rgba(0,0,0,.15);
+  /* Tonal overlay: primärfarbe auf Oberfläche aufgebracht */
+  --tonal-1:rgba(0,190,190,.05); --tonal-2:rgba(0,190,190,.08);
+  --tonal-3:rgba(0,190,190,.11); --tonal-4:rgba(0,190,190,.12);
+  --tonal-5:rgba(0,190,190,.14);
+
+  /* ── Motion ── */
+  --m-fast:150ms cubic-bezier(.4,0,.2,1); --m-std:250ms cubic-bezier(.4,0,.2,1);
+
+  /* ── Icon Stroke-Width ── */
+  --icon-stroke-micro:1;
+  --icon-stroke-sm:1.25;
+  --icon-stroke-md:1.5;
+  --icon-stroke-lg:2;
+  --icon-stroke-xl:2.5;
+
+  /* ── Borders ──
+     Zwei Rollen, nicht zwei Stärken: --bd ist die Trennlinie INNERHALB eines Bauteils
+     (Card-Footer, Tabellenzeile, Caption-Kante), --bd-strong die AUSSENKANTE einer Fläche
+     (Karte, Kasten, schwebendes Panel). Beide sind 1px; die Kante muss nur mehr tragen, weil sie
+     eine Fläche gegen ihren Grund abgrenzt, während die Trennlinie innerhalb einer schon
+     abgegrenzten Fläche liegt.
+     --bd-strong-c war n-200 und trug im Light nur 1,53:1 gegen Weiß und 1,42:1 gegen eine
+     n-50-Sektion; eine weiße Karte auf weißem Grund war damit praktisch randlos, obwohl genau
+     dieser Rand sie laut Konvention zur Fläche macht. n-300 gibt 2,25:1 bzw. 2,09:1 und bleibt
+     ruhig. Der Dark-Wert (#8694A5, 4,21:1) war nie das Problem und ändert sich nicht.
+     --bd-c / --bd-strong-c halten die reine Farbe. --bd und --bd-strong sind Shorthand-Werte und
+     lassen sich nicht in border-color einsetzen; Regeln, die nur die Farbe brauchen (z. B. der
+     verstärkte Rand schwebender Panels im Dark), greifen deshalb auf die -c-Variante zu, statt den
+     Hexwert ein zweites Mal zu führen. */
+  --bd-c:var(--n-100); --bd-strong-c:var(--n-300);
+  --bd:1px solid var(--bd-c); --bd-strong:1px solid var(--bd-strong-c);
+  --field-border:var(--n-400); /* Formularfeld-Rahmen: 4.13:1 auf bg-surface (#fff) → WCAG 1.4.11 ✓. n-200 (#C9D3D3) verfehlte mit 1.5:1. */
+
+  /* ── Focus ── */
+  /* Sichtbarer Ring co-700 (nicht co-500): co-500 #00BEBE erreicht auf Weiß nur 2,3:1 und verfehlt
+     die 3:1-Schwelle für Fokus-Indikatoren (WCAG 2.4.11). co-700 #007575 = 5,5:1. Gilt global (alle
+     :focus-visible-Ringe im DS nutzen diese Tokens). Dark bleibt co-500 (dort 4,7:1 auf dunklem Grund,
+     co-700 wäre dunkel-auf-dunkel) — s. dark-mode.css. */
+  --focus-ring:0 0 0 3px var(--co-50),0 0 0 5px var(--co-700);
+  --focus-aa:0 0 0 2px var(--bg-surface),0 0 0 4px var(--co-700);
+}