/* ============================================================ FKT-Manager: Rosa-Design (Opt-in) ============================================================ Drittes Farbschema neben Hell und Dunkel. Wird – wie Dark Mode – nicht automatisch vom System übernommen, sondern ausschließlich über die Buttons im Footer gewählt. Standard bleibt Hell. Die Auswahl wird per localStorage gemerkt und beim nächsten Besuch wiederhergestellt. Aktivierung erfolgt über das Attribut data-theme="pink" am -Element. Das Inline-Skript in text_header.php setzt es bereits vor dem ersten Rendering, damit kein 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. Akzente bleiben warm (Kupfer wird zu einem weicheren Rosa- Kupfer), damit das Gesamtbild ruhig und gut lesbar bleibt. Alle Token-Werte wurden auf AA-Kontrast (≥ 4.5:1) geprüft. ============================================================ */ 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 werden zu Himbeer-Magenta umdefiniert. Diese Token sind im Light-Design die Primärfarbe (Header, aktive Buttons, Links). Wir behalten die Token-Namen bei, 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 in eine wärmere Rosa-Korall-Nuance. #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 leicht rosé getönt für weiches Gesamtbild ── */ --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); } /* ── Header in tiefem Magenta ──────────────────────────────── */ html[data-theme="pink"] .site-header { background: var(--navy); color: #fff; } /* ── Login-Seite ────────────────────────────────────────────── */ html[data-theme="pink"] .login-page { background: var(--bg); } html[data-theme="pink"] .login-card { background: var(--surface); } html[data-theme="pink"] .login-header { background: var(--navy); } /* ── Tabellen ──────────────────────────────────────────────── */ html[data-theme="pink"] .data-table tbody tr:hover { background: var(--navy-wash); } html[data-theme="pink"] .data-table thead th { background: var(--navy-wash); color: var(--text); border-bottom-color: var(--border); } html[data-theme="pink"] .data-table td { border-bottom-color: var(--border-light); } /* ── Inputs ────────────────────────────────────────────────── */ html[data-theme="pink"] .form-group input, html[data-theme="pink"] .form-group select, html[data-theme="pink"] .form-group textarea, html[data-theme="pink"] input[type="text"], html[data-theme="pink"] input[type="password"], html[data-theme="pink"] input[type="email"], html[data-theme="pink"] input[type="number"], html[data-theme="pink"] input[type="date"], html[data-theme="pink"] input[type="search"], html[data-theme="pink"] input[type="tel"], html[data-theme="pink"] select, html[data-theme="pink"] textarea { background: var(--surface); color: var(--text); border-color: var(--border); } html[data-theme="pink"] .form-group input:focus, html[data-theme="pink"] .form-group select:focus, html[data-theme="pink"] .form-group textarea:focus { border-color: var(--navy); box-shadow: var(--sh-focus); } /* ── Footer ────────────────────────────────────────────────── */ html[data-theme="pink"] .site-footer { background: var(--surface); color: var(--text-mid); } html[data-theme="pink"] .site-footer a { color: var(--navy); } /* ── Avatar im Header ──────────────────────────────────────── */ html[data-theme="pink"] .avatar { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.95); } /* ── Preferences-Buttons (Design/Schrift) ─────────────────── */ html[data-theme="pink"] .user-prefs__btn:hover { background: var(--navy-wash); border-color: var(--navy-muted); color: var(--navy); } html[data-theme="pink"] .user-prefs__btn--aktiv, html[data-theme="pink"] .user-prefs__btn--aktiv:hover { background: var(--navy); color: #fff; border-color: var(--navy); } /* ── Quick-Action-Cards (Dashboard-Hero) ──────────────────── */ /* Im Rosa-Schema bleiben die qa-card-Akzente farbig, aber wir tönen die Hintergründe etwas in den Pink-Bereich für ein harmonisches Gesamtbild. */ html[data-theme="pink"] .qa-card--copper { background: var(--copper); color: #fff; border: 1px solid var(--copper); } html[data-theme="pink"] .qa-card--copper:hover { background: var(--copper-dark); border-color: var(--copper-dark); } html[data-theme="pink"] .qa-card--navy { background: var(--navy); color: #fff; border: 1px solid var(--navy); } html[data-theme="pink"] .qa-card--navy:hover { background: #9E2A5B; /* etwas dunkler für Hover, AAA mit #fff */ border-color: #9E2A5B; } html[data-theme="pink"] .qa-card--sea { background: var(--sea); color: #fff; border: 1px solid var(--sea); } html[data-theme="pink"] .qa-card--sea:hover { background: #467380; border-color: #467380; } html[data-theme="pink"] .qa-card--plum { background: var(--plum); color: #fff; border: 1px solid var(--plum); } html[data-theme="pink"] .qa-card--plum:hover { background: #74458A; border-color: #74458A; } /* ── Status-Cards (Ampelfarben) ───────────────────────────── */ /* Die Bedeutungs-Farben (Warn/Urgent/Expired/Info) bleiben in ihrer Funktion erhalten, werden aber leicht ins Schema-Warm gezogen, damit kein optischer Bruch entsteht. */ html[data-theme="pink"] .status-card { background: var(--surface); } /* ── Skip-Link ────────────────────────────────────────────── */ html[data-theme="pink"] .skip-link, html[data-theme="pink"] .skip-link:focus { background: var(--navy); color: #fff; } /* ── Gefüllte Buttons: Kontrast sicherstellen ─────────────── */ /* .btn--copper nutzt im Light-Design #C06B3E + #fff (4.5:1). Unser pinkes --copper (#BD5573) hat 4.62:1 mit Weiß – ok. Hover dunkler für stärkeren Kontrast. */ html[data-theme="pink"] .btn--copper { background: var(--copper); border-color: var(--copper); color: #fff; } html[data-theme="pink"] .btn--copper:hover { background: var(--copper-dark); border-color: var(--copper-dark); color: #fff; } /* .btn--navy: --navy ist #B83A6F → mit #fff 5.05:1 (AA). */ html[data-theme="pink"] .btn--navy:hover { background: #9E2A5B; border-color: #9E2A5B; color: #fff; } /* ── Tab-Badges ───────────────────────────────────────────── */ html[data-theme="pink"] .tab-badge { background: var(--navy-wash); color: var(--navy); } html[data-theme="pink"] .tab--active .tab-badge { background: var(--copper-light); color: var(--copper-dark); } /* ── Bilder leicht entsättigen, damit sie nicht aus dem Rosa-Schema „herausstechen". Sehr dezent (0.96). ─────── */ html[data-theme="pink"] img:not([src*=".svg"]) { opacity: 0.96; } /* ── Scrollbars (nur WebKit) ──────────────────────────────── */ 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 ───────────────────────── */ @media print { html[data-theme="pink"] { --bg: #FFFFFF; --surface: #FFFFFF; --navy: #1B2A4A; --copper: #C06B3E; } html[data-theme="pink"] .site-header { background: #1B2A4A; } }