/* * STANDBY Marken-Design – Design Tokens * ====================================== * AUTOMATISCH GENERIERT von webseite/tools/sync-styleguide.sh. * Quelle der Wahrheit (aktuelle Phase): * webseite/public_html/assets/css/main.css -> :root * * NICHT HIER VON HAND EDITIEREN. Werte in der Website ändern, dann: * webseite/tools/sync-styleguide.sh (regeneriert diese Datei) */ :root { /* Logo-Kernfarben (Quelle: standby-leuchtfeuer-logo.svg) */ --farbe-navy: #20366d; /* Tiefes Dunkelblau – Verlaufsstart */ --farbe-blau: #5ca0cb; /* Helles Blau – Verlaufsmitte */ --farbe-pink: #ed6ea7; /* Pink – Verlaufsende */ --farbe-gelb: #fcc11f; /* Gelb/Gold – das Licht */ --farbe-text: #4a4a49; /* Dunkelgrau – Schrift */ /* Navy-Stufen (Shades von #20366D) */ --navy-950: #111d3d; --navy-900: #182852; --navy-600: #2a478f; --navy-100: #d9e0ee; --navy-050: #eef1f7; /* Blau-Stufen (von #5CA0CB) */ --blau-800: #2f6e97; /* Linkfarbe – kontraststark auf Weiß */ --blau-100: #deecf4; --blau-050: #f1f7fb; /* heller Sektions-Hintergrund */ /* Pink-Stufen (von #ED6EA7) */ --pink-700: #c94b86; --pink-100: #fbdfec; --pink-050: #fdf2f8; /* Violett – Übergangston des Logo-Verlaufs (Navy-600 zu 55% mit Pink-700 gemischt; Blau→Pink-Passage, KEIN Bezug zu Gelb) */ --violett-800: #6d498b; /* Gelb-Stufen (von #FCC11F) */ --gelb-600: #d9a404; --gelb-100: #fef0c9; --gelb-050: #fff9e8; /* Grau-Stufen (von #4A4A49) */ --text-hell: #6b6b6a; --grau-200: #e4e4e3; --grau-100: #f0f0ef; --grau-050: #f8f8f7; /* Neutral */ --farbe-weiss: #ffffff; /* Text auf dunklen Flächen */ --text-auf-dunkel: rgba(255, 255, 255, 0.82); --text-auf-dunkel-stark: #ffffff; --text-auf-dunkel-soft: rgba(255, 255, 255, 0.82); /* Marken-Gradient (exakt wie Logo: Dunkelblau -> Hellblau -> Pink) */ --gradient-marke: linear-gradient(90deg, var(--farbe-navy) 0%, var(--farbe-blau) 52%, var(--farbe-pink) 100%); --gradient-marke-135: linear-gradient(135deg, var(--farbe-navy) 0%, var(--farbe-blau) 52%, var(--farbe-pink) 100%); /* Nacht-Gradient (Navy-Tiefe für Hero, Menü, Footer, Stat-Bänder) */ --gradient-nacht: linear-gradient(168deg, var(--navy-900) 0%, var(--farbe-navy) 55%, var(--navy-600) 100%); /* Heller Himmel-Verlauf für sanfte Sektionsübergänge */ --gradient-himmel: linear-gradient(180deg, var(--blau-050) 0%, var(--farbe-weiss) 100%); /* Typografie */ --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Fluid Display-Größen */ --text-display: clamp(2.35rem, 4.5vw + 1rem, 4rem); --text-h1: clamp(2.1rem, 3.2vw + 0.9rem, 3.25rem); --text-h2: clamp(1.6rem, 2vw + 0.8rem, 2.35rem); --text-h3: clamp(1.25rem, 0.8vw + 1rem, 1.55rem); --text-lead: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem); /* Statische Font Sizes */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* 8px Grid System */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --space-16: 128px; /* Border Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* Shadows – navy-getönt statt schwarz (wirkt hochwertiger) */ --shadow-sm: 0 1px 2px rgba(32, 54, 109, 0.06); --shadow-md: 0 4px 12px rgba(32, 54, 109, 0.08), 0 1px 3px rgba(32, 54, 109, 0.05); --shadow-lg: 0 12px 32px rgba(32, 54, 109, 0.11), 0 2px 8px rgba(32, 54, 109, 0.05); --shadow-xl: 0 24px 64px rgba(32, 54, 109, 0.15), 0 4px 16px rgba(32, 54, 109, 0.07); --shadow-gelb: 0 10px 28px rgba(252, 193, 31, 0.35); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* Max Width Container */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1400px; /* Header-Höhe (für Anker-Offsets) */ --header-offset: 96px; } /* ============================================================================= * Projekt-Tokens Web-Formulare — semantische Ebene * ============================================================================= * Ab hier projektspezifisch (NICHT aus dem Marken-Repo generiert; beim * Re-Sync der Marken-Tokens nur den Block OBERHALB dieser Marke ersetzen). * * Alle Komponenten-CSS (app.css) nutzt AUSSCHLIESSLICH diese semantischen * Tokens. Der Dark Mode (M8) tauscht rein deren Werte über * [data-theme="dark"] — kein Komponenten-CSS muss dafür angefasst werden. * ========================================================================== */ :root { /* Flächen */ --flaeche: var(--grau-050); /* Seitenhintergrund */ --flaeche-karte: var(--farbe-weiss); /* Karten, Panels */ --flaeche-kopf: var(--farbe-weiss); /* Kopfleiste */ --flaeche-dezent: var(--grau-100); /* leichte Abstufung (Hover, Zebra) */ /* Text */ --text: var(--farbe-text); --text-dezent: var(--text-hell); --ueberschrift: var(--farbe-navy); /* Rahmen und Linien */ --rahmen: var(--grau-200); --rahmen-stark: var(--navy-100); /* Eingabefelder (Optik nach Bewerbungsbogen-Referenz) */ --feld-hintergrund: #f7f8fc; --feld-rahmen: #e4e8f4; --feld-text: var(--farbe-text); /* Aktionen */ --primaer: var(--farbe-gelb); /* Primäraktion (Gelb, Navy-Text) */ --primaer-text: var(--farbe-navy); --sekundaer: var(--farbe-navy); /* Arbeits-/Sekundärfarbe */ --sekundaer-text: var(--farbe-weiss); --link: var(--blau-800); --fokus: var(--pink-700); /* Fokus-Ringe, aktive Details */ /* Statusfarben */ --erfolg: #2e7d4f; --fehler: #b3364b; --gefahr-text: var(--farbe-weiss); /* Schrift auf --fehler (Löschknopf) */ /* Maße */ --kopf-hoehe: 65px; /* Kopfleiste: min-height 64px + Linie */ } /* ============================================================================= * Zusätzliche semantische Tokens (Meldungen, Akzente, Fokus) * ========================================================================== */ :root { --nav-aktiv: var(--navy-050); --abzeichen-flaeche: var(--navy-100); --abzeichen-text: var(--farbe-navy); --akzent-text: var(--pink-700); /* Untertitel-Badge, Rollen-Labels */ --akzent-flaeche: var(--pink-050); --fokus-ring: var(--blau-100); --hinweis-flaeche: var(--gelb-050); --hinweis-rahmen: var(--gelb-100); --erfolg-flaeche: #eef7f1; --erfolg-rahmen: #cfe7d8; --fehler-flaeche: #fdf0f2; --fehler-rahmen: #f3cdd5; /* Notiz-Hervorhebung: Texte in eckigen Klammern (offene Stellen, KONZEPT 6.2). Aquamarine als Markierung; auf Hell für AA-Kontrast abgedunkelte Schrift. */ --notiz-text: #0b7a63; --notiz-flaeche: rgba(127, 255, 212, 0.34); /* Feiner Rand um runde Avatare (Profilbild): hell nicht nötig. */ --avatar-rand: transparent; } /* ============================================================================= * Dark Mode — dunkle Palette (KONZEPT 11.2) * ============================================================================= * Markenseitig nicht definiert, hier projektspezifisch festgelegt: Flächen aus * den Navy-Tiefen, Gelb bleibt Primäraktion, Feld-Hintergründe dunkel mit * erkennbarem Rahmen. Anspruch: WCAG AA für Text und Bedienelemente. * Reiner Token-Tausch — kein Komponenten-CSS wird angefasst. * ========================================================================== */ @media screen { /* Druck immer hell (E4): am Papier gilt nur die helle Palette */ [data-theme="dark"] { /* Native Bedienelemente (Datumspicker, Scrollbalken) dunkel rendern */ color-scheme: dark; /* Flächen */ --flaeche: var(--navy-950); --flaeche-karte: var(--navy-900); --flaeche-kopf: var(--navy-900); --flaeche-dezent: rgba(255, 255, 255, 0.07); /* Text */ --text: var(--text-auf-dunkel); --text-dezent: rgba(255, 255, 255, 0.62); --ueberschrift: var(--text-auf-dunkel-stark); /* Rahmen und Linien */ --rahmen: #2c3f74; --rahmen-stark: #3d5391; /* Eingabefelder: dunkel, mit erkennbarem Rahmen */ --feld-hintergrund: #131f42; --feld-rahmen: #3a4e88; --feld-text: var(--text-auf-dunkel); /* Aktionen: Gelb bleibt die Primäraktion */ --sekundaer: var(--navy-600); --sekundaer-text: var(--farbe-weiss); --link: #8ec3e6; --fokus: var(--farbe-pink); /* Statusfarben */ --erfolg: #8fd8ac; --fehler: #ff9fac; /* --fehler ist hier ein helles Rosa: die Schrift darauf muss dunkel sein. */ --gefahr-text: var(--navy-950); /* Zusatz-Tokens */ --nav-aktiv: rgba(255, 255, 255, 0.09); --abzeichen-flaeche: var(--navy-600); --abzeichen-text: var(--farbe-weiss); --akzent-text: #f795c3; --akzent-flaeche: rgba(237, 110, 167, 0.16); --fokus-ring: rgba(92, 160, 203, 0.4); --hinweis-flaeche: rgba(252, 193, 31, 0.14); --hinweis-rahmen: rgba(252, 193, 31, 0.35); --erfolg-flaeche: rgba(46, 125, 79, 0.28); --erfolg-rahmen: rgba(143, 216, 172, 0.35); --fehler-flaeche: rgba(179, 54, 75, 0.3); --fehler-rahmen: rgba(255, 159, 172, 0.35); /* Notiz-Hervorhebung: helles Aquamarine auf dunkler Fläche (guter Kontrast). */ --notiz-text: #7fffd4; --notiz-flaeche: rgba(127, 255, 212, 0.15); /* Avatar-Rand: die Nachthimmel der Motive heben sich so von den Karten ab. */ --avatar-rand: rgba(255, 255, 255, 0.16); } } /* ============================================================================= * Fachbereichs-Überblick: Kennzahlfelder und Status-Abzeichen * ============================================================================= * Nur für fachbereich.php (KONZEPT-FACHBEREICH 7.3). Die Kennzahlfelder liegen * auf einer weichen blauen Fläche mit feinem Rand; die Abzeichen tragen je * Status eine eigene Flächen- und Textfarbe, damit „einsatzbereit“, „Pause“ * und „noch nicht eingeordnet“ auch ohne Lesen unterscheidbar sind. * * Alle Paare erreichen auf ihrer Fläche mindestens 4,5 : 1 (WCAG AA für kleine * Schrift). Eine Abweichung vom Klick-Dummy: dessen Pink für „noch nicht * eingeordnet“ (--pink-700 auf --pink-050) erreicht nur 3,97 : 1, hier steht * deshalb der dunklere Ton #a93368 (5,7 : 1). * ========================================================================== */ :root { --kennzahl-flaeche: var(--blau-050); --kennzahl-rahmen: #e3eef6; --st-bereit-flaeche: #eef7f1; --st-bereit-text: #256b43; --st-belegt-flaeche: var(--navy-100); --st-belegt-text: var(--farbe-navy); --st-teil-flaeche: var(--blau-100); --st-teil-text: #245b7d; --st-eignung-flaeche: #efe8f5; --st-eignung-text: var(--violett-800); --st-schulung-flaeche: var(--blau-050); --st-schulung-text: var(--blau-800); --st-bewerbung-flaeche: var(--grau-100); --st-bewerbung-text: var(--farbe-text); --st-pause-flaeche: var(--gelb-100); --st-pause-text: #7a5b00; --st-ende-flaeche: var(--grau-100); --st-ende-text: var(--text-hell); --st-offen-flaeche: var(--pink-050); --st-offen-text: #a93368; } @media screen { /* Druck immer hell (E4): am Papier gilt nur die helle Palette */ [data-theme="dark"] { --kennzahl-flaeche: rgba(92, 160, 203, 0.12); --kennzahl-rahmen: rgba(92, 160, 203, 0.22); --st-bereit-flaeche: rgba(46, 125, 79, 0.3); --st-bereit-text: #9fe0b8; --st-belegt-flaeche: var(--navy-600); --st-belegt-text: #ffffff; --st-teil-flaeche: rgba(92, 160, 203, 0.28); --st-teil-text: #a9d3ee; --st-eignung-flaeche: rgba(109, 73, 139, 0.4); --st-eignung-text: #d3b9ea; --st-schulung-flaeche: rgba(92, 160, 203, 0.16); --st-schulung-text: #8ec3e6; --st-bewerbung-flaeche: rgba(255, 255, 255, 0.08); --st-bewerbung-text: var(--text-auf-dunkel); --st-pause-flaeche: rgba(252, 193, 31, 0.2); --st-pause-text: #ffd766; --st-ende-flaeche: rgba(255, 255, 255, 0.06); --st-ende-text: rgba(255, 255, 255, 0.72); --st-offen-flaeche: rgba(237, 110, 167, 0.18); --st-offen-text: #f795c3; } } /* ============================================================================= * Chart-Farben des Fachbereichs (KONZEPT-FACHBEREICH 7.3, „Charts, Technik") * ============================================================================= * Nur für die vier Chart-Karten des Überblicks. Farbe steht ausschließlich auf * den Marken (Linie, Säule, Segment), aller Text in den Texttokens. * * Kontrastverhältnisse gegen den Kartenhintergrund (hell Weiß, dunkel * Navy-900 #182852), gerechnet nach WCAG: * * --chart-1 Blau 6,07 : 1 (hell) 3,77 : 1 (dunkel) * --chart-2 Pink 4,34 : 1 4,20 : 1 * --chart-3 Gelb 2,27 : 1 5,54 : 1 * --chart-grau 3,46 : 1 4,10 : 1 * Blaustufen 1 bis 4 3,31 / 5,30 / 7,95 / 11,60 : 1 (hell) * 11,50 / 8,31 / 5,81 / 4,28 : 1 (dunkel) * * Zwei bewusste Ausnahmen von der 3:1-Regel: * - Gelb erreicht auf Weiß nur 2,27:1 und steht deshalb ausschließlich mit * direkter Beschriftung im Segment, nie als alleiniger Träger einer Aussage. * - --chart-flaeche ist mit 10 % Deckung Schmuck unter der Linie (1,14:1); * die Aussage trägt die 2px-Linie darüber. * Der Grauton ist gegenüber dem Klick-Dummy (#b5b5b3, nur 2,05:1) abgedunkelt. * ========================================================================== */ :root { --chart-1: #3d5fb0; --chart-2: #c94b86; --chart-3: #d9a404; --chart-3-text: #111d3d; --chart-grau: #8a8a88; --chart-flaeche: rgba(61, 95, 176, 0.10); /* Blaustufen des Familienbalkens, heller nach dunkler, je mit Textfarbe */ --chart-blau-1: #6f8dca; --chart-blau-1-text: #111d3d; --chart-blau-2: #4a68b8; --chart-blau-2-text: #ffffff; --chart-blau-3: #2f4d99; --chart-blau-3-text: #ffffff; --chart-blau-4: #20366d; --chart-blau-4-text: #ffffff; } @media screen { /* Druck immer hell (E4): am Papier gilt nur die helle Palette */ [data-theme="dark"] { --chart-1: #5b80d8; --chart-2: #dc5f9a; --chart-3: #c99a12; --chart-3-text: #111d3d; --chart-grau: #8089a0; --chart-flaeche: rgba(91, 128, 216, 0.16); /* Auf dunklem Grund tragen alle Stufen dunkle Schrift. */ --chart-blau-1: #dfe6fa; --chart-blau-1-text: #111d3d; --chart-blau-2: #b3c5f1; --chart-blau-2-text: #111d3d; --chart-blau-3: #8aa4e4; --chart-blau-3-text: #111d3d; --chart-blau-4: #6b8ad9; --chart-blau-4-text: #111d3d; } }