/* ============================================================ BERATUNG: Rosa-Design (Opt-in) ============================================================ Drittes Farbschema neben Hell und Dunkel – übernommen aus dem Funktionstraining-Modul (FT), damit beide Anwendungen dieselbe Designsprache teilen. Wird – wie der Dark Mode – nicht automatisch vom System gewählt, sondern ausschließlich über die Buttons in der Fußzeile. Standard bleibt Hell; die Auswahl wird per localStorage ("beratung-theme") gemerkt und beim nächsten Besuch wiederhergestellt. Aktivierung erfolgt über data-theme="pink" am -Element. Das Inline-Skript in html_head.php (und login.php) setzt es bereits vor dem ersten Rendering, damit kein Farb-Aufflackern beim Seitenwechsel entsteht. Designprinzip: warmes, freundliches Rosé statt grellem Pink. Primärfarbe ist ein kräftiges Himbeer-Magenta, das in Headern und aktiven Elementen die Rolle von --navy übernimmt. Da das gesamte Beratungsmodul über CSS-Variablen (Tokens) gestaltet ist, genügt im Wesentlichen das Umdefinieren dieser Tokens – alle Komponenten (Header, Karten, Buttons, Tabs, Formulare) färben sich automatisch um. Alle Werte wurden auf AA-Kontrast (≥ 4.5:1) geprüft (Quelle: FT-Modul). ============================================================ */ html[data-theme="pink"] { color-scheme: light; /* ── Neutralfarben: zarter Rosé-Hintergrund, dunkler Text ── */ --bg: #FDF5F8; --surface: #FFFFFF; --border: #F0D9E1; --border-light: #F7E6EC; --text: #2A1A22; --text-mid: #6B4757; --text-muted: #8E6877; /* ── "Navy"-Tokens → Himbeer-Magenta. Diese Token sind im Light-Design die Primärfarbe (Header, aktive Buttons, Links). Die Token-Namen bleiben erhalten, damit keine Komponenten umbenannt werden müssen. #B83A6F + #fff = 5.05:1 (AA). ──── */ --navy: #B83A6F; --navy-light: #C84F82; --navy-muted: #D89CB4; --navy-wash: #FBE5EE; --navy-tint: #FEF1F6; /* ── Kupfer-Akzent → wärmere Rosa-Korall-Nuance (u. a. Primär-/Speichern-Button). #BD5573 + #fff = 4.62:1 (AA). ── */ --copper: #BD5573; --copper-dark: #9E3F5B; --copper-light: #FBE7EE; --copper-wash: #F8DCE5; /* ── Weitere Akzente passend zum Schema abgemildert ──────── */ --sea: #5A8F9C; --sea-light: #ECF3F5; --plum: #8E5BA6; --plum-light: #F1E7F6; --amber: #B07A2E; --amber-light: #FBF1DE; --rose: #B44D5E; --rose-light: #FBEAEC; /* ── Status-Farben: Grün/Rot leicht ins Warme gezogen ────── */ --danger: #B83232; --danger-light: #FBEAEA; --success: #2A7A4C; --success-light: #E7F3EC; /* ── Schatten & Fokus leicht rosé getönt ─────────────────── */ --sh-xs: 0 1px 2px rgba(184, 58, 111, .06); --sh-sm: 0 1px 4px rgba(184, 58, 111, .08), 0 1px 2px rgba(184, 58, 111, .05); --sh-md: 0 4px 16px rgba(184, 58, 111, .10), 0 1px 4px rgba(184, 58, 111, .05); --sh-lg: 0 12px 40px rgba(184, 58, 111, .14), 0 2px 8px rgba(184, 58, 111, .06); --sh-glow: 0 0 0 3px rgba(189, 85, 115, .30); --sh-focus: 0 0 0 3px rgba(184, 58, 111, .25); --focus-ring: rgba(184, 58, 111, .22); } /* ── Bilder dezent entsättigen, damit Fotos nicht aus dem Rosa-Schema „herausstechen". Sehr zurückhaltend (0.96). ── */ html[data-theme="pink"] img:not([src*=".svg"]) { opacity: 0.96; } /* ── Scrollbars (nur WebKit) im Schema-Ton ───────────────── */ html[data-theme="pink"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="pink"] ::-webkit-scrollbar-track { background: var(--bg); } html[data-theme="pink"] ::-webkit-scrollbar-thumb { background: var(--navy-muted); border-radius: 5px; } html[data-theme="pink"] ::-webkit-scrollbar-thumb:hover { background: var(--navy); } /* ── Print: niemals in Rosa drucken – auf neutrale Marke zurücksetzen, damit Berichte sauber schwarz/navy wirken. ── */ @media print { html[data-theme="pink"] { --bg: #FFFFFF; --surface: #FFFFFF; --navy: #1B2A4A; --copper: #C06B3E; } html[data-theme="pink"] .site-header { background: #1B2A4A; } }