/* design-tokens.css — Tokenebene der eingefrorenen Design-SSOT. ================================================================== QUELLE (verbindlich, eingefroren am 01.08.2026) design_handoff_v2.1.2/almanca-kumbaram.css, Abschnitt 1 (:root), Abschnitt „High contrast" und der Dunkelmodus-Block. Die Werte in Bereich 1 sind WORTGETREU aus der SSOT uebernommen und nicht nachgerechnet. Wer sie aendern will, aendert zuerst die SSOT. Begleitpapiere: design_handoff_v2.1.2/README.md, CLASS-MAP.md, VERSIONS.md. Regressionstest: scripts/product-design-tokens-tests.php WAS M1 IST Nur das Fundament: Tokenwerte und Schriftanbindung. Keine Klasse, kein Bauteil, kein Layout, keine Seitenmigration. Die sichtbaren Flaechen wandern erst in M2 bis M9. AUFBAU DIESER DATEI 1 · SSOT-Tokens (187) — wortgetreu aus almanca-kumbaram.css 2 · Bestandstokens — Werte, die die SSOT nicht kennt, die aber von bestehenden Stylesheets noch gelesen werden. Sie fallen weg, sobald die letzte Flaeche sie nicht mehr liest. Nicht loeschen, bevor das nachgewiesen ist. 3 · Kontextebenen der SSOT (hoher Kontrast, Dunkelmodus) 4 · Animationen und Bewegungsreduktion (Bestand) DIE 15 AUFGELOESTEN NAMENSKONFLIKTE Diese Namen gab es in beiden Saetzen mit verschiedenen Werten. In allen 15 Faellen gilt jetzt der SSOT-Wert — eine Zustandsquelle, kein zweiter Satz daneben. Die frueheren Werte stehen hier, damit die Aenderung nachvollziehbar bleibt und nicht spaeter jemand raet: Token vorher (v1-Ableitung) jetzt (SSOT v2.1.2) ---------------------------------------------------------------------------- --ak-a2 #2FA89B #2C9E92 --ak-b1 #EF8B33 #DE7111 --ak-b1-deep #9E5416 #A65A17 --ak-b2-deep #8E2F27 #B23A31 --ak-ease cubic-bezier(.4, 0, .2, 1) ease --ak-focus-ring 0 0 0 4px #F1ECFC 0 0 0 4px var(--ak-accent-soft) --ak-font-body var(--ak-font-tr) 'Plus Jakarta Sans', ... --ak-font-display var(--ak-font-de) 'Outfit', system-ui, ... --ak-fs-body-lg 17.5px 15.5px --ak-ink-3 #8E93A4 #6B7185 --ak-ink-4 #A9A196 #736A5E --ak-measure 66ch 62ch --ak-r-card 20px 18px --ak-r-chip 11px 9px --ak-r-tag 7px 6px Zwei davon sind reine Schreibweisen: --ak-font-body und --ak-font-display zeigten ueber --ak-font-tr / --ak-font-de auf genau dieselben Familien. Die SSOT nennt sie direkt. Gemessen vor der Uebernahme (Text auf der jeweils benutzten Flaeche): --ak-ink-3 und --ak-ink-4 werden deutlich besser (2,87 -> 4,55 bzw. 2,39 -> 4,98 auf Creme). --ak-b1-deep und --ak-b2-deep werden heller, halten AA aber auf jeder Flaeche, auf der sie im Bestand stehen (4,57 bis 5,93:1). --ak-a2 und --ak-b1 tragen im Bestand keinen Text, nur Rahmen und Fuellungen; beide gewinnen trotzdem Kontrast. KEINE EXTERNE QUELLE. Kein Import, kein Datei- oder Schriftverweis, keine Domain. Die Schriften liegen selbst gehostet unter public/assets/fonts/ und werden in design-base.css per @font-face eingebunden. */ /* ══════════════════════════════════════════════════════════════════ 1 · SSOT-TOKENS — wortgetreu aus design_handoff_v2.1.2 ══════════════════════════════════════════════════════════════════ */ :root { /* --- Neutrals ---------------------------------------------------------- */ --ak-ink: #14182B; /* primary text, dark surfaces, primary button */ --ak-ink-2: #5C6175; /* body / secondary text */ --ak-ink-3: #6B7185; /* helper text, meta, inactive labels · AA 4.85:1 on white */ --ak-ink-4: #736A5E; /* disabled text on warm surfaces · AA 4.57:1 on warm */ --ak-line: #EDE6DC; /* decorative divider — exempt from 1.4.11 */ --ak-line-input: #8A8074; /* form-control border · 3.87:1 on white (1.4.11) */ --ak-line-soft: #F1EBE2; /* inner divider inside cards */ --ak-line-strong: #D9CFC1; /* dashed placeholder borders */ --ak-bg: #FBF7F1; /* page background (warm cream) */ --ak-bg-2: #FDFBF7; /* muted row background */ --ak-surface: #FFFFFF; /* card surface */ --ak-surface-warm: #F3EDE4; /* muted fill, disabled button, skeleton */ --ak-surface-warm-2: #F7F3EC; /* hover on warm surfaces */ --ak-disabled-fg: #C4BCB0; /* struck-through / unavailable glyphs */ --ak-placeholder-fg: #918875; /* icons inside empty states · 3.02:1 on warm */ /* --- Dark surfaces (admin sidebar, hero panels, auth left column) ------- */ --ak-dark: #14182B; --ak-dark-2: #1D2338; --ak-dark-3: #252B48; --ak-dark-4: #2A3150; --ak-dark-5: #333A5C; /* hover on dark */ --ak-on-dark: #FFFFFF; --ak-on-fill: #FFFFFF; /* text/icon on any solid colored fill */ --ak-on-dark-2: #B9BCC9; --ak-on-dark-3: #8E93A4; --ak-on-dark-4: #7B8098; /* faint labels on dark · AA 4.50:1 on ink */ --ak-accent-on-dark: #9B8CE8; /* 6.13:1 on --ak-dark */ --ak-teal-on-dark: #5FD3C4; /* 9.21:1 on --ak-dark */ --ak-warn-on-dark: #F0B857; /* 9.02:1 on --ak-dark */ --ak-error-on-dark: #F2938B; /* 7.16:1 on --ak-dark */ /* --- CEFR level scale --------------------------------------------------- */ /* There is NO A3. Six levels only. */ --ak-a1: #7C5CD6; --ak-a1-soft: #F1ECFC; --ak-a1-deep: #5F3FBF; --ak-a2: #2C9E92; --ak-a2-soft: #E6F5F2; --ak-a2-deep: #22796F; --ak-b1: #DE7111; --ak-b1-soft: #FDF0E2; --ak-b1-deep: #A65A17; --ak-b2: #DD5E52; --ak-b2-soft: #FBEAE7; --ak-b2-deep: #B23A31; --ak-c1: #9B4B8F; --ak-c1-soft: #F4E9F2; --ak-c1-deep: #7C3A72; --ak-c2: #2F4A8C; --ak-c2-soft: #EAEFFA; --ak-c2-deep: #2F4A8C; /* Solid fills that carry WHITE text. The level colors above are tuned for non-text UI (bars, dots, borders) at 3:1; a filled button or marker with white text needs 4.5:1, so it uses the -solid variant. */ --ak-a1-solid: #7C5CD6; /* white 4.82:1 */ --ak-a2-solid: #258379; /* white 4.56:1 */ --ak-b1-solid: #B85E0E; /* white 4.52:1 */ --ak-b2-solid: #D63E30; /* white 4.57:1 */ --ak-c1-solid: #9B4B8F; /* white 5.53:1 */ --ak-c2-solid: #2F4A8C; /* white 9.41:1 */ --ak-success-solid: var(--ak-a2-solid); --ak-error-solid: #D3433A; /* white 4.53:1 */ /* Product accent = A1 purple. Used for progress, active nav, focus, selection. */ --ak-accent: var(--ak-a1); --ak-accent-soft: var(--ak-a1-soft); --ak-accent-deep: var(--ak-a1-deep); --ak-accent-tint: #F8F5FF; /* very light purple panel */ --ak-accent-tint-2: #F4F0FF; /* light purple section background */ --ak-accent-border: #E4DAFA; --ak-accent-border-2: #C9BCEE; /* Text links. Deliberately the DEEP purple, not the accent: --ak-a1 reaches only 4.51:1 on cream, --ak-a1-deep reaches 8.0:1. */ --ak-link: var(--ak-a1-deep); --ak-link-hover: var(--ak-ink); /* --- Semantic states ---------------------------------------------------- */ --ak-success: #2E9E6B; --ak-success-bar: #2FA89B; /* bars/rings use the teal, not the green */ --ak-success-soft: #E6F5F2; --ak-success-fg: #1E6A61; --ak-success-fg-2: #22796F; --ak-success-border: #BFE6DE; --ak-warning: #DB9A1C; --ak-warning-soft: #FDF3E0; --ak-warning-fg: #8A6212; --ak-warning-border: #F3D9AE; --ak-error: #D3433A; --ak-error-soft: #FBEAE7; --ak-error-fg: #8E2F27; --ak-error-fg-2: #B23A31; --ak-error-border: #F3C9C4; --ak-info: #3B7BD1; --ak-info-soft: #EAEFFA; --ak-info-fg: #2F4A8C; --ak-info-border: #C9D6EF; /* Teal ramp for heatmaps */ --ak-heat-0: #F3EDE4; --ak-heat-1: #C7E8E1; --ak-heat-2: #7FCEC2; --ak-heat-3: #2FA89B; /* --- Typography --------------------------------------------------------- */ /* Outfit → headings, numbers, level badges, ALL GERMAN example sentences Jakarta → body, UI, ALL TURKISH explanations This split is deliberate: it keeps the two languages visually separable. */ --ak-font-display: 'Outfit', system-ui, -apple-system, sans-serif; --ak-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* Type scale — every font-size in this file references one of these. No component may declare a raw px font-size. */ --ak-fs-nano: 10.5px; /* absolute floor — never smaller */ --ak-fs-tiny: 11px; --ak-fs-micro: 11.5px; --ak-fs-meta: 12.5px; --ak-fs-caption: 13px; --ak-fs-xs: 13.5px; --ak-fs-sm: 14px; --ak-fs-md: 14.5px; --ak-fs-body: 15px; --ak-fs-body-lg: 15.5px; --ak-fs-base-lg: 16px; --ak-fs-lg: 17px; --ak-fs-xl: 18px; --ak-fs-2xl: 20px; --ak-fs-3xl: 22px; --ak-fs-4xl: 26px; --ak-fs-5xl: 32px; --ak-fs-display: clamp(40px, 5vw, 64px); --ak-fs-h1: clamp(24px, 3vw, 32px); --ak-fs-h1-hero: clamp(28px, 4vw, 44px); --ak-fs-h2: clamp(28px, 3.4vw, 40px); --ak-fs-h2-sm: clamp(22px, 2.8vw, 30px); --ak-fs-h3: 16.5px; --ak-lh-tight: 1.1; --ak-lh-heading: 1.2; --ak-lh-body: 1.65; --ak-lh-relaxed: 1.8; /* long reading texts */ --ak-ls-display: -1.5px; --ak-ls-h1: -0.8px; --ak-ls-h2: -1px; --ak-ls-label: 1.4px; /* uppercase eyebrow */ --ak-ls-micro: 0.6px; /* uppercase micro label */ --ak-fw-regular: 400; --ak-fw-medium: 500; --ak-fw-semibold: 600; --ak-fw-bold: 700; --ak-measure: 62ch; /* max line length for long-form text */ /* --- Spacing (4px base) -------------------------------------------------- */ --ak-s1: 4px; --ak-s2: 8px; --ak-s3: 12px; --ak-s4: 16px; --ak-s5: 22px; --ak-s6: 30px; --ak-s7: 44px; --ak-s8: 64px; --ak-section: 80px; /* between public sections */ --ak-gutter: clamp(18px, 4vw, 40px); /* page side padding */ --ak-card-pad: clamp(20px, 2.6vw, 30px); --ak-card-pad-sm: 20px; /* --- Radius -------------------------------------------------------------- */ --ak-r-mark: 5px; /* highlight inside a sentence */ --ak-r-tag: 6px; --ak-r-skeleton: 6px; --ak-r-bar: 8px; /* chart bar top corners */ --ak-r-cell: 4px; /* heatmap cell */ --ak-r-chip: 9px; --ak-r-button: 11px; --ak-r-icon-sm: 10px; --ak-r-icon: 13px; --ak-r-button-lg:14px; --ak-r-icon-lg: 16px; --ak-r-input: 12px; --ak-r-row: 14px; --ak-r-card: 18px; --ak-r-card-lg: 22px; --ak-r-panel: 26px; --ak-r-pill: 999px; /* --- Shadows -------------------------------------------------------------- */ --ak-sh-card: 0 1px 2px rgba(20,24,43,.04), 0 10px 28px rgba(20,24,43,.05); --ak-sh-card-lg: 0 1px 2px rgba(20,24,43,.04), 0 14px 40px rgba(20,24,43,.06); --ak-sh-button: 0 8px 22px rgba(20,24,43,.18); --ak-sh-float: 0 16px 40px rgba(20,24,43,.16); --ak-sh-overlay: 0 20px 50px rgba(0,0,0,.3); --ak-sh-toast: 0 12px 30px rgba(20,24,43,.25); --ak-sh-knob: 0 2px 6px rgba(0,0,0,.2); --ak-sh-bottomnav: 0 -4px 20px rgba(20,24,43,.06); --ak-focus-ring: 0 0 0 4px var(--ak-accent-soft); /* --- Motion --------------------------------------------------------------- */ --ak-dur-fast: .2s; --ak-dur-base: .25s; --ak-dur-slow: .3s; --ak-dur-result: .8s; --ak-ease: ease; /* --- High-contrast overrides (Settings → Görünüm → Yüksek kontrast) ----- */ --ak-hc-ink-2: #3B4054; --ak-hc-ink-3: #5C6175; --ak-hc-line: #C9BFB1; --ak-hc-line-soft: #D9CFC1; /* --- Dark theme seed values (screens NOT yet designed — review before use) */ --ak-dk-bg: #0F1220; --ak-dk-bg-2: #141829; --ak-dk-ink: #FFFFFF; --ak-dk-line: #2A3150; --ak-dk-line-soft: #232840; --ak-dk-accent-soft:#2A2450; /* --- Layout --------------------------------------------------------------- */ --ak-max-public: 1280px; --ak-max-app: 1220px; --ak-max-admin: 1360px; --ak-max-read: 820px; /* lesson / document column */ --ak-max-form: 420px; --ak-sidebar-w: 250px; --ak-rail-w: 76px; --ak-tap-min: 44px; /* minimum touch target */ /* --- Breakpoints (for reference; use in @media manually) ------------------ */ /* phone : < 768px tablet : 768px – 1099px desktop : >= 1100px admin split collapses at 1080px */} /* ══════════════════════════════════════════════════════════════════ 2 · BESTANDSTOKENS — von der SSOT nicht gefuehrt, von bestehenden Stylesheets aber noch gelesen. Abbaukandidaten fuer M2 bis M9. Die Zahl in Klammern ist der gemessene Verbrauch am 01.08.2026. ══════════════════════════════════════════════════════════════════ */ :root { /* ── Dunkle Flaechen und Inversfarben ── */ --ak-dark-surface: #14182B; /* = ink; die dunkle Grundflaeche; 5 Stellen */ --ak-dark-surface-2: #252B48; /* erhoehtes Element / Knopf-Hover auf Dunkel; 5 Stellen */ --ak-dark-surface-3: #1D2338; /* Karte auf dunkler Flaeche; 1 Stellen */ --ak-dark-surface-4: #2A3150; /* Icon-Plaettchen auf dunkler Flaeche; 2 Stellen */ --ak-ink-inverse: #FFFFFF; /* Weiss auf dunklem Grund, damit kein literales #fff verstreut wird; 31 Stellen */ --ak-ink-inverse-2: #B9BCC9; /* sekundaerer Text auf dunklem Grund; 7 Stellen */ /* ── Levelskala — zweite Tieftoene ── */ --ak-a2-deep-2: #1E6A61; /* zweiter Tiefton; 0 Stellen — Abbaukandidat */ --ak-b2-deep-2: #B23A31; /* zweiter Tiefton; 0 Stellen — Abbaukandidat */ /* ── Semantische Zustaende ── */ --ak-disabled-border: #EDE6DC; /* 9 Stellen */ --ak-disabled-fill: #EDE6DC; /* 1 Stellen */ --ak-disabled-surface:#F3EDE4; /* 14 Stellen */ --ak-disabled-text: #A9A196; /* 8 Stellen */ --ak-err: #D4483F; /* 8 Stellen */ --ak-err-border: #F3C9C4; /* 10 Stellen */ --ak-err-surface: #FBEAE7; /* 12 Stellen */ --ak-err-text: #8E2F27; /* 20 Stellen */ --ak-info-surface: #EAEFFA; /* 8 Stellen */ --ak-info-text: #2F4A8C; /* 8 Stellen */ --ak-ok: #2E9E6B; /* 5 Stellen */ --ak-ok-bar: #2FA89B; /* 7 Stellen */ --ak-ok-border: #BFE6DE; /* 14 Stellen */ --ak-ok-surface: #E6F5F2; /* 20 Stellen */ --ak-ok-text: #1E6A61; /* 36 Stellen */ --ak-purple-1: #F8F5FF; /* 6 Stellen */ --ak-purple-2: #F4F0FF; /* 0 Stellen — Abbaukandidat */ --ak-purple-3: #FBF8FF; /* 0 Stellen — Abbaukandidat */ --ak-purple-border-1: #E4DAFA; /* 13 Stellen */ --ak-purple-border-2: #C9BCEE; /* 1 Stellen */ --ak-purple-border-3: #EEE6FB; /* 3 Stellen */ --ak-warn: #DB9A1C; /* 7 Stellen */ --ak-warn-border: #F3D9AE; /* 14 Stellen */ --ak-warn-surface: #FDF3E0; /* 16 Stellen */ --ak-warn-text: #8A6212; /* 17 Stellen */ /* ── Typografie ── */ /* --ak-font-mono: ERWEITERUNG DER SSOT, FREIGEGEBEN AM 01.08.2026. ERLAUBT ausschliesslich fuer technische Inhalte: JSON · Slugs · Dateipfade · codeaehnliche Werte NICHT erlaubt fuer normale Texte, Navigation oder Marketing. Nur generische lokale System-Monospace, keine externe Fontdatei. Eine Zusicherung in scripts/product-design-tokens-tests.php prueft diesen Rahmen bei jedem Lauf. DIE SSOT KENNT KEINE MONOSPACE. Ihr Lektionseditor benutzt .ak-textarea in der Proportionalschrift. Unser Adminbereich bearbeitet dort aber rohes JSON und zeigt Slugs und Pfade; in einer Proportionalschrift verrutschen Einrueckung und Klammerebenen, und ein Slug laesst sich nicht mehr zeichenweise vergleichen. Das ist eine Funktions-, keine Gestaltungsfrage. Deshalb steht der Stapel hier als BESTANDSTOKEN und nicht als Wert im Stylesheet — eine Quelle, nachvollziehbar, und beim Designer angemeldet (siehe M4-Bericht). Systemschriften, keine Datei, keine externe Anfrage. */ --ak-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ak-font-de: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Zielsprache Deutsch — didaktisch getrennt von der Erklaersprache; 13 Stellen */ --ak-font-tr: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Erklaersprache Tuerkisch; 11 Stellen */ --ak-fs-body-sm: 13.5px; /* 96 Stellen */ --ak-fs-de: 18px; /* 3 Stellen */ --ak-fs-eyebrow: 13px; /* 2 Stellen */ --ak-fs-hero: clamp(40px, 5vw, 64px); /* 1 Stellen */ --ak-fs-ipa: 13px; /* 2 Stellen */ --ak-fs-min-body: 13.5px; /* harte Untergrenze des Handoffs; 0 Stellen — Abbaukandidat */ --ak-fs-min-ui: 11px; /* harte Untergrenze des Handoffs; 0 Stellen — Abbaukandidat */ --ak-lh-de: 1.4; /* 3 Stellen */ --ak-lh-h1: 1.1; /* 5 Stellen */ --ak-lh-h2: 1.12; /* 1 Stellen */ --ak-lh-h3: 1.3; /* 6 Stellen */ --ak-lh-hero: 1.04; /* 1 Stellen */ --ak-lh-meta: 1.45; /* 1 Stellen */ --ak-lh-sm: 1.55; /* 4 Stellen */ --ak-ls-eyebrow: 1.4px; /* 2 Stellen */ --ak-ls-hero: -1.5px; /* 1 Stellen */ /* ── Abstaende, Radien, Schatten, Fokus ── */ --ak-focus-border: #7C5CD6; /* 3 Stellen */ --ak-pad-card: clamp(20px, 2.6vw, 22px); /* 11 Stellen */ --ak-pad-card-sm: 21px; /* 5 Stellen */ --ak-r-12: 12px; /* 25 Stellen */ --ak-r-btn: 10px; /* 18 Stellen */ --ak-r-opt: 14px; /* 21 Stellen */ --ak-section-gap: 72px; /* 1 Stellen */ --ak-sh-flat: none; /* 2 Stellen */ --ak-sp-1: 4px; /* 1 Stellen */ --ak-sp-2: 8px; /* 53 Stellen */ --ak-sp-3: 12px; /* 129 Stellen */ --ak-sp-4: 16px; /* 137 Stellen */ --ak-sp-5: 22px; /* 42 Stellen */ --ak-sp-6: 30px; /* 28 Stellen */ --ak-sp-7: 44px; /* 11 Stellen */ --ak-sp-8: 64px; /* 6 Stellen */ /* ── Bewegung und Bedienziele ── */ --ak-bp-desktop: 1100px; /* nur Dokumentation; 0 Stellen — Abbaukandidat */ --ak-bp-tablet: 768px; /* nur Dokumentation, Media Queries lesen keine Variablen; 0 Stellen — Abbaukandidat */ --ak-t-progress: .28s; /* 6 Stellen */ --ak-t-ring: .8s; /* 1 Stellen */ --ak-t-toggle: .2s; /* 34 Stellen */ --ak-touch-min: 44px; /* 3 Stellen */ } /* ══════════════════════════════════════════════════════════════════ 2b · MARKENTOKENS — Navy / Koralle (16.09.2026) ══════════════════════════════════════════════════════════════════ ═══ MARKENWECHSEL ═══ Hier standen bis zum 16.09.2026 die Werte der alten Marke: Dunkelgruen #053331 und Orange #ff6c40. Der Eigentuemer hat eine neue Marke freigegeben — Buch + Kreis in Navy/Koralle. Quelle: `design/markenpaket-navy-koralle/`, Farbdefinition des Pakets in dessen `09-Quellen-und-Lizenz/farben.css`. WARUM DAS DIE SEITE EINFACHER MACHT, NICHT SCHWERER Gemessen: Creme des Pakets #FBF7F1 == unser --ak-bg #FBF7F1 IDENTISCH Navy des Pakets #172B4D vs. unser --ak-ink #14182B 1.25:1 Die neue Marke IST die bestehende helle Welt. Der Markenwechsel und die Ruecknahme des Gruens sind deshalb derselbe Schritt: die Seite kehrt zu Creme + Tinte zurueck und bekommt mit der Koralle einen Akzent, wo vorher zwei Fremdfarben standen. ═══ DIE HARTE REGEL AUS DER KONTRASTMESSUNG ═══ weiss auf Navy ........ 14.10:1 AAA Navy auf Creme ........ 13.21:1 AAA Koralle auf Creme ..... 3.06:1 nur Flaeche, KEIN Text Koralle auf Weiss ..... 3.26:1 nur Flaeche, KEIN Text weiss auf Koralle ..... 3.26:1 faellt durch Navy auf Koralle ...... 4.32:1 nur grosser Text DARAUS FOLGT: Der Hauptknopf ist NAVY, nicht Koralle — weiss auf Koralle waere unlesbar. Die Koralle ist das Zeichen, der Punkt, die Unterstreichung, der Fokusring: eine FLAECHE, nie ein Buchstabe auf hellem Grund. Wo korallefarbener TEXT noetig ist, steht `--ak-marke-koralle-tief` (4.74:1 auf Creme). ══════════════════════════════════════════════════════════════════ */ :root { /* ── Die vier Werte des Markenpakets ── */ --ak-marke-navy: #172B4D; /* Buch und Wortmarke */ --ak-marke-koralle: #E9645B; /* der Kreis ueber dem Buch */ --ak-marke-creme: #FBF7F1; /* Markengrund, == --ak-bg */ --ak-marke-grau: #70757D; /* Nebenton des Pakets */ /* ── Abgeleitete Stufen ── */ --ak-marke-navy-2: #22406F; /* Hover auf Navy */ /* ── Die tiefste Flaeche (16.09.2026, Wunsch des Eigentuemers) ── Der Fuss sollte „noch dunkler" als `--ak-dark-surface` (#14182B) werden — und dunkler gab es im Bestand nichts, was hier benutzbar waere. DER WERT IST TROTZDEM NICHT ERFUNDEN: #0F1220 steht bereits als `--ak-dk-bg` im Tokensatz. Der ist aber ausdruecklich als „Dark theme seed — review before use" markiert und fuer ein noch nicht entworfenes dunkles Thema reserviert. Ihn hier zu benutzen hiesse, eine Flaeche der Website an eine Reserve zu haengen, die sich noch aendern darf. Deshalb ein EIGENER Name mit demselben Wert: die Palette waechst um einen Namen, nicht um eine Farbe. */ --ak-dark-surface-0: #0F1220; /* tiefste Flaeche, Fusszeile */ --ak-marke-navy-tint: #E8ECF3; /* sehr leichte Navy-Flaeche */ --ak-marke-koralle-tief: #C93B32; /* textfaehig auf Creme, 4.74:1 */ --ak-marke-koralle-tint: #FCEDEB; /* warme Akzentflaeche */ /* ── Text auf Navy ── */ --ak-marke-auf-navy: #FFFFFF; /* 14.10:1 */ --ak-marke-auf-navy-2: #C3CBD9; /* 8.31:1 — Nebentext */ --ak-marke-auf-navy-3: #A2AEC2; /* 5.85:1 — Beschriftungen */ /* ── Linien und Flaechen der oeffentlichen Website ── */ --ak-marke-band: #F7F3EC; /* warmes Band zwischen Sektionen */ --ak-marke-band-linie: #EDE6DC; /* dessen Haarlinie (== --ak-line) */ /* ── Schatten in der Markenfarbe statt in neutralem Schwarz ── */ --ak-marke-schatten: 0 1px 2px rgba(23, 43, 77, .05), 0 8px 22px rgba(23, 43, 77, .07); --ak-marke-schatten-tief: 0 16px 40px rgba(23, 43, 77, .14); } /* ══════════════════════════════════════════════════════════════════ 3 · KONTEXTEBENEN DER SSOT ══════════════════════════════════════════════════════════════════ */ /* Hoher Kontrast (Einstellungen -> Goeruenuem -> Yueksek kontrast). Wortgetreu aus der SSOT. */ .ak-high-contrast { --ak-ink-2: var(--ak-hc-ink-2); --ak-ink-3: var(--ak-hc-ink-3); --ak-line: var(--ak-hc-line); --ak-line-soft: var(--ak-hc-line-soft); } /* Dunkelmodus. Die SSOT sagt ausdruecklich: die dunklen Flaechen sind NOCH NICHT gestaltet, das hier sind Startwerte. Es traegt sie nur, wer die Klasse .ak-theme-auto setzt — heute niemand. Vor einer dunklen Umsetzung geht das zurueck in die Gestaltung. */ @media (prefers-color-scheme: dark) { .ak-theme-auto { --ak-bg: var(--ak-dk-bg); --ak-bg-2: var(--ak-dk-bg-2); --ak-surface: var(--ak-dark-2); --ak-surface-warm: var(--ak-dark-3); --ak-ink: var(--ak-dk-ink); --ak-ink-2: var(--ak-on-dark-2); --ak-ink-3: var(--ak-on-dark-3); --ak-line: var(--ak-dk-line); --ak-line-soft: var(--ak-dk-line-soft); --ak-accent: var(--ak-accent-on-dark); --ak-accent-soft: var(--ak-dk-accent-soft); } } /* ══════════════════════════════════════════════════════════════════ 4 · ANIMATIONEN UND BEWEGUNGSREDUKTION (Bestand, unveraendert) ══════════════════════════════════════════════════════════════════ */ /* ── Animationen ────────────────────────────────────────────────────── Die drei Keyframes des Handoffs. akPop fuer Erfolgsmomente, akRise fuer Rueckmeldepanels, akFloat fuer die Hero-Illustration. */ @keyframes akPop { 0% { transform: scale(.9); opacity: 0 } 60% { transform: scale(1.03) } 100% { transform: scale(1); opacity: 1 } } @keyframes akRise { from { transform: translateY(10px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } @keyframes akFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } } /* Wer Bewegung reduziert haben will, bekommt sie reduziert. Der Handoff verlangt das ausdruecklich und sieht zusaetzlich einen Schalter in den Einstellungen vor. Die Systemeinstellung gilt hier unabhaengig davon. */ @media (prefers-reduced-motion: reduce) { :root { --ak-t-toggle: 0s; --ak-t-progress: 0s; --ak-t-ring: 0s; } }