/* * ⚠️ Stand 30.09.26: Diese Datei trägt nur noch die Tokens der APP-Seiten (index.html, konto.html, * kuendigung.html, aktenkoffer.html, admin.html) – deshalb liegt sie weiter hier. * Der alte Styleguide „Tinte & Siegel“ (Orange, Papier) ist nach _archiv/design-system-tinte-siegel/ * verschoben; Orange gibt es in der Markenwelt nicht mehr (Entscheidung Aki 04.08.26). * Das Designsystem der Landingpage: assets/design-system/ (Styleguide: assets/design-system/index.html). */ /* ============================================================ BehördenKlar Design-System v1 · „Tinte & Siegel" TOKEN-DEFINITIONEN — gemeinsame Quelle für Website UND App. ------------------------------------------------------------ • Alle Tokens sind mit --bk- präfigiert und kollidieren NICHT mit dem Bestands-Styling (assets/css/styles.css). • Light ist Standard. Dark wird über [data-bk-theme="dark"] am -Element aktiviert (Auto-Erkennung: 1 Zeile JS, siehe DESIGN-SYSTEM.md). • Die App (Capacitor) lädt dieselbe Datei; App-spezifische Interaktions-Tokens stehen am Ende (Abschnitt 7). ============================================================ */ /* ------------------------------------------------------------ 1 · PRIMITIVE FARBEN (Rohwerte — im UI nie direkt verwenden, immer über die semantischen Tokens in Abschnitt 2) ------------------------------------------------------------ */ :root { /* Tinte — das BehördenKlar-Blau. Tief, ruhig, amtlich. */ --bk-tinte-50: #EEF3FB; --bk-tinte-100: #DCE7F7; --bk-tinte-200: #B9CDEE; --bk-tinte-300: #8FADE0; --bk-tinte-400: #5D86CB; --bk-tinte-500: #3A64AE; --bk-tinte-600: #274B8E; --bk-tinte-700: #1D3A72; /* Markenblau */ --bk-tinte-800: #172D59; --bk-tinte-900: #122341; --bk-tinte-950: #0C1830; /* Siegel — das BehördenKlar-Orange. Warm, menschlich, Akzent. */ --bk-siegel-50: #FEF3EC; --bk-siegel-100: #FDE4D3; --bk-siegel-200: #FAC5A4; --bk-siegel-300: #F5A16F; --bk-siegel-400: #EF7D3C; --bk-siegel-500: #E4611D; /* Markenorange */ --bk-siegel-600: #C74E12; --bk-siegel-700: #A03E10; --bk-siegel-800: #7A3111; --bk-siegel-900: #5C2710; /* Papier — warme Neutraltöne statt kaltem Grau. */ --bk-papier-0: #FFFFFF; --bk-papier-50: #FBF9F6; --bk-papier-100: #F4F1EB; --bk-papier-200: #E9E5DC; --bk-papier-300: #D8D2C6; --bk-papier-400: #ACA69A; --bk-papier-500: #7E7A70; /* Tinten-Neutrale — Text & dunkle Flächen (blau-schwarz). */ --bk-graphit-300: #9AA3B5; --bk-graphit-500: #5B6474; --bk-graphit-700: #333C4E; --bk-graphit-900: #1A2433; /* Signalfarben (Rot bleibt Fristen/Fehlern vorbehalten — Orange ist MARKE, niemals Warnung!) */ --bk-rot-50: #FCEFED; --bk-rot-100: #F8DBD6; --bk-rot-500: #C0392B; --bk-rot-700: #96271C; --bk-gruen-50: #EBF6EF; --bk-gruen-100: #D3EDDD; --bk-gruen-500: #1E7F4F; --bk-gruen-700: #14603A; --bk-gelb-50: #FDF6E3; --bk-gelb-100: #FAEBC2; --bk-gelb-700: #8A6100; } /* ------------------------------------------------------------ 2 · SEMANTISCHE TOKENS — LIGHT (Standard) ------------------------------------------------------------ */ :root { color-scheme: light; /* Flächen */ --bk-bg: var(--bk-papier-50); --bk-bg-deep: var(--bk-papier-100); /* abgesetzte Zonen */ /* Hintergrund der App = helles Blau der Startseiten-Abschnitte (Entscheidung Aki 30.09.26; Quelle assets/design-system/tokens/colors.css, --bk-subtle). */ --bk-bg-startseite: #F5F9FF; --bk-surface: var(--bk-papier-0); /* Karten, Modals */ --bk-surface-sunken: var(--bk-papier-100); /* Inputs, Wells */ --bk-ink-panel: var(--bk-tinte-900); /* dunkle Marken-Panels (Hero, Footer) */ --bk-ink-panel-text: #F2EFE9; /* Text */ --bk-text: var(--bk-graphit-900); --bk-text-mild: var(--bk-graphit-700); --bk-text-muted: var(--bk-graphit-500); --bk-text-faint: var(--bk-graphit-300); --bk-text-on-primary: #FFFFFF; /* Weiß auf dem Markenorange ergibt nur 3,48:1 — unter WCAG AA. Tinte auf Siegel kommt auf 5,07:1 und ist obendrein das Bild, das dem System den Namen gibt. Das Markenorange selbst bleibt dadurch unangetastet. (Gemessen 23.07.26.) */ --bk-text-on-accent: var(--bk-tinte-950); /* Marke / Interaktion */ --bk-primary: var(--bk-tinte-700); --bk-primary-hover: var(--bk-tinte-800); --bk-primary-soft: var(--bk-tinte-50); --bk-primary-border: var(--bk-tinte-200); --bk-accent: var(--bk-siegel-500); --bk-accent-hover: var(--bk-siegel-600); --bk-accent-soft: var(--bk-siegel-50); --bk-accent-border: var(--bk-siegel-200); /* Orange als TEXT braucht eine dunklere Stufe: --bk-accent auf Weiß sind nur 3,48:1. Siegel-700 liefert 6,58:1 und hält auch auf Papier-50. */ --bk-accent-text: var(--bk-siegel-700); --bk-link: var(--bk-tinte-600); /* Linien & Struktur */ --bk-border: #E7E2D8; /* dekorative Trenner — kein Kontrast-Soll */ --bk-border-strong: #D3CCBE; /* Rahmen, die ein Bedienelement überhaupt erst erkennbar machen (Inputs, Selects), brauchen nach WCAG 1.4.11 mindestens 3:1. Der frühere Wert #C9C3B4 kam nur auf 1,76:1. #948D7C: 3,30:1 auf Weiß, 3,14:1 auf Papier-50. (Gemessen 23.07.26.) */ --bk-border-input: #948D7C; --bk-divider-dots: var(--bk-papier-300); /* Formular-Punktlinien */ --bk-focus-ring: var(--bk-tinte-400); /* Status */ --bk-danger: var(--bk-rot-500); --bk-danger-strong: var(--bk-rot-700); --bk-danger-soft: var(--bk-rot-50); --bk-danger-border: var(--bk-rot-100); --bk-success: var(--bk-gruen-500); --bk-success-strong: var(--bk-gruen-700); --bk-success-soft: var(--bk-gruen-50); --bk-success-border: var(--bk-gruen-100); --bk-notice-soft: var(--bk-gelb-50); /* Rechtshinweis / Disclaimer */ --bk-notice-border: var(--bk-gelb-100); --bk-notice-text: var(--bk-gelb-700); /* Schatten — warm & tintig, nie hartes Schwarz */ --bk-shadow-sm: 0 1px 2px rgba(23, 45, 89, 0.06); --bk-shadow-md: 0 1px 2px rgba(23, 45, 89, 0.05), 0 6px 24px -6px rgba(23, 45, 89, 0.10); --bk-shadow-lg: 0 2px 4px rgba(23, 45, 89, 0.05), 0 18px 48px -12px rgba(23, 45, 89, 0.18); --bk-shadow-stamp: 0 1px 0 rgba(23, 45, 89, 0.10); /* Overlay */ --bk-scrim: rgba(12, 24, 48, 0.55); } /* ------------------------------------------------------------ 3 · SEMANTISCHE TOKENS — DARK (Aktenstudie bei Nacht: tiefes Tintenblau, warmes Papierweiß) ------------------------------------------------------------ */ [data-bk-theme="dark"] { color-scheme: dark; --bk-bg: #0D1524; --bk-bg-deep: #0A111D; --bk-surface: #152036; --bk-surface-sunken: #0F1930; --bk-ink-panel: #0A111D; --bk-ink-panel-text: #F2EFE9; --bk-text: #F2EFE9; --bk-text-mild: #D4D2CB; --bk-text-muted: #9AA3B5; --bk-text-faint: #5B6474; --bk-text-on-primary: #0D1524; --bk-text-on-accent: #24130A; --bk-primary: #8FADE0; /* aufgehelltes Tintenblau f. Kontrast */ --bk-primary-hover: #B9CDEE; --bk-primary-soft: rgba(143, 173, 224, 0.14); --bk-primary-border: rgba(143, 173, 224, 0.32); --bk-accent: #F08749; /* wärmeres Siegel-Orange auf Dunkel */ --bk-accent-hover: #F5A16F; --bk-accent-text: #F08749; /* auf dunklem Grund 6,40:1 — hier reicht das Marken-Orange */ --bk-accent-soft: rgba(240, 135, 73, 0.14); --bk-accent-border: rgba(240, 135, 73, 0.34); --bk-link: #A7C0EA; --bk-border: rgba(242, 239, 233, 0.10); --bk-border-strong: rgba(242, 239, 233, 0.18); --bk-border-input: rgba(242, 239, 233, 0.40); /* 3,41:1 — s. Light-Kommentar */ --bk-divider-dots: rgba(242, 239, 233, 0.20); --bk-focus-ring: #8FADE0; --bk-danger: #E8776A; --bk-danger-strong: #F2A198; --bk-danger-soft: rgba(232, 119, 106, 0.12); --bk-danger-border: rgba(232, 119, 106, 0.30); --bk-success: #5BBB8A; --bk-success-strong: #8ED4B0; --bk-success-soft: rgba(91, 187, 138, 0.12); --bk-success-border: rgba(91, 187, 138, 0.30); --bk-notice-soft: rgba(250, 235, 194, 0.09); --bk-notice-border: rgba(250, 235, 194, 0.22); --bk-notice-text: #E8CE8C; --bk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --bk-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 28px -6px rgba(0, 0, 0, 0.45); --bk-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.40), 0 20px 56px -12px rgba(0, 0, 0, 0.60); --bk-shadow-stamp: 0 1px 0 rgba(0, 0, 0, 0.40); --bk-scrim: rgba(4, 8, 16, 0.68); } /* ------------------------------------------------------------ 4 · TYPOGRAFIE Display: Bricolage Grotesque (charaktervoll, freundlich) Text/UI: IBM Plex Sans (präzise, amtlich-warm; große Skriptabdeckung über Plex-Familie: Arabic, Hebrew, Devanagari, Thai … + Noto-Fallback) Mono: IBM Plex Mono (Aktenzeichen, IBAN, Daten) ------------------------------------------------------------ */ :root { --bk-font-display: "Bricolage Grotesque", "IBM Plex Sans", "Noto Sans", system-ui, sans-serif; --bk-font-text: "IBM Plex Sans", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --bk-font-mono: "IBM Plex Mono", "Noto Sans Mono", ui-monospace, "Courier New", monospace; /* Fluide Größenskala (Mobile → Desktop) */ --bk-fs-display: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem); /* Landing-Hero */ --bk-fs-h1: clamp(1.65rem, 1.25rem + 1.8vw, 2.3rem); /* Seitentitel */ --bk-fs-h2: clamp(1.3rem, 1.1rem + 1vw, 1.65rem); /* Sektionstitel */ --bk-fs-h3: 1.15rem; /* Kartentitel */ --bk-fs-body-lg: 1.0625rem; /* Erklärtexte (17px) */ --bk-fs-body: 1rem; /* Standard (16px) */ --bk-fs-small: 0.875rem; /* Hinweise (14px) */ --bk-fs-micro: 0.75rem; /* Aktenzeichen-Labels */ --bk-fw-regular: 400; --bk-fw-medium: 500; --bk-fw-semibold: 600; --bk-fw-bold: 700; /* Headlines; nie 800 — weich bleiben */ --bk-lh-tight: 1.18; --bk-lh-text: 1.6; /* großzügig — Zielgruppe liest langsam */ --bk-ls-micro: 0.09em; /* Uppercase-Mikro-Labels */ } /* ------------------------------------------------------------ 5 · GEOMETRIE — Abstände, Radien, Layout ------------------------------------------------------------ */ :root { /* 4px-Basisraster */ --bk-space-1: 0.25rem; --bk-space-2: 0.5rem; --bk-space-3: 0.75rem; --bk-space-4: 1rem; --bk-space-5: 1.5rem; --bk-space-6: 2rem; --bk-space-7: 3rem; --bk-space-8: 4.5rem; /* Radien: weich & zugänglich */ --bk-radius-xs: 6px; /* Chips, kleine Badges */ --bk-radius-sm: 10px; /* Inputs, kleine Buttons */ --bk-radius-md: 14px; /* Buttons, Toasts */ --bk-radius-lg: 20px; /* Karten */ --bk-radius-xl: 28px; /* Hero-Karten, Modals */ --bk-radius-pill: 999px; --bk-container: 1120px; --bk-touch-min: 48px; /* Mindest-Touchfläche überall */ } /* ------------------------------------------------------------ 6 · MOTION — ruhig, nie hektisch ------------------------------------------------------------ */ :root { --bk-ease: cubic-bezier(0.22, 0.8, 0.36, 1); --bk-dur-fast: 140ms; --bk-dur-base: 220ms; --bk-dur-slow: 420ms; } @media (prefers-reduced-motion: reduce) { :root { --bk-dur-fast: 1ms; --bk-dur-base: 1ms; --bk-dur-slow: 1ms; } } /* ------------------------------------------------------------ 7 · APP-ABLEITUNG (Capacitor) Gleiche Marke, gleiche Sprache — andere Grammatik. Diese Tokens gelten NUR, wenn die App-Schicht dem das Attribut data-bk-platform="app" setzt (via Capacitor.getPlatform()). ------------------------------------------------------------ */ [data-bk-platform="app"] { --bk-radius-lg: 24px; /* App fühlt sich weicher an */ --bk-radius-xl: 32px; --bk-touch-min: 52px; /* größere Touch-Flächen */ --bk-fs-body: 1.0625rem; /* 17px Grundschrift (iOS-üblich) */ /* Safe-Area (Notch, Home-Indicator) */ --bk-safe-top: env(safe-area-inset-top, 0px); --bk-safe-bottom: env(safe-area-inset-bottom, 0px); /* Tab-Leiste & Bottom-Sheets */ --bk-tabbar-height: calc(64px + var(--bk-safe-bottom)); --bk-sheet-radius: 28px; --bk-sheet-handle: var(--bk-border-strong); }