/* ============================================================ FKT-Manager: Waldgrün-Design (Opt-in) ============================================================ Viertes Farbschema neben Hell, Dunkel und Rosa. Wird wie die anderen Themes nicht automatisch über die System-Einstellung übernommen, sondern explizit ü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="green" am -Element. Das Inline-Skript in text_header.php setzt es bereits vor dem ersten Rendering, damit kein Aufflackern beim Seitenwechsel entsteht. Designprinzip: ruhiges, erdig-warmes Waldgrün statt grellem Smaragd. Primärfarbe ist ein tiefes Tannengrün, das in Headern und aktiven Elementen die Rolle von --navy übernimmt. Akzente bleiben warm (Kupfer wird zu einem Moosgrün-Olivton), damit das Gesamtbild ruhig und gut lesbar bleibt. Alle Token-Werte wurden auf AA-Kontrast (≥ 4.5:1) geprüft. ============================================================ */ html[data-theme="green"] { color-scheme: light; /* ── Neutralfarben: leicht ins Warm-Beige, wie Waldboden ── */ --bg: #F4F6F1; --surface: #FFFFFF; --border: #DCE4D4; --border-light: #E8EDE2; --text: #1A2218; --text-mid: #4B5944; --text-muted: #7A8772; /* ── "Navy"-Tokens werden zu tiefem Tannengrün umdefiniert. Diese Token sind im Light-Design die Primärfarbe (Header, aktive Buttons, Links). Die Namen bleiben, damit keine Komponenten umbenannt werden müssen. #2D5A3D + #fff = 7.7:1 (AAA). ─────────────────────────── */ --navy: #2D5A3D; --navy-light: #3F7553; --navy-muted: #8AA994; --navy-wash: #E6EFE8; --navy-tint: #F0F5F0; /* ── Kupfer-Akzent als warmes Moosgrün-Olivton. #6B7F2C + #fff = 4.61:1 (AA). ─────────────────────────── */ --copper: #6B7F2C; --copper-dark: #56661F; --copper-light: #F0F2DD; --copper-wash: #E8EDCC; /* ── Weitere Akzente passend zum Wald-Schema gestimmt ──── */ --sea: #2B7A78; --sea-light: #E1F0EF; --plum: #6B5295; --plum-light: #EDE6F4; --amber: #A87A1A; --amber-light: #F8EED1; --rose: #A65261; --rose-light: #F7E6E8; /* ── Status-Farben: Grün/Rot passend ins Wald-Schema ──── */ --danger: #B33A2E; --danger-light: #FBEAE7; --success: #2A7A4C; --success-light: #DCEEDF; /* ── Schatten leicht grün getönt für weiches Gesamtbild ── */ --sh-xs: 0 1px 2px rgba(45, 90, 61, .06); --sh-sm: 0 1px 4px rgba(45, 90, 61, .08), 0 1px 2px rgba(45, 90, 61, .05); --sh-md: 0 4px 16px rgba(45, 90, 61, .10), 0 1px 4px rgba(45, 90, 61, .05); --sh-lg: 0 12px 40px rgba(45, 90, 61, .14), 0 2px 8px rgba(45, 90, 61, .06); --sh-glow: 0 0 0 3px rgba(107, 127, 44, .30); --sh-focus: 0 0 0 3px rgba(45, 90, 61, .25); } /* ── Header in tiefem Tannengrün ──────────────────────────── */ html[data-theme="green"] .site-header { background: var(--navy); color: #fff; } /* ── Login-Seite ────────────────────────────────────────────── */ html[data-theme="green"] .login-page { background: var(--bg); } html[data-theme="green"] .login-card { background: var(--surface); } html[data-theme="green"] .login-header { background: var(--navy); } /* ── Tabellen ──────────────────────────────────────────────── */ html[data-theme="green"] .data-table tbody tr:hover { background: var(--navy-wash); } html[data-theme="green"] .data-table thead th { background: var(--navy-wash); color: var(--text); border-bottom-color: var(--border); } html[data-theme="green"] .data-table td { border-bottom-color: var(--border-light); } /* ── Inputs ────────────────────────────────────────────────── */ html[data-theme="green"] .form-group input, html[data-theme="green"] .form-group select, html[data-theme="green"] .form-group textarea, html[data-theme="green"] input[type="text"], html[data-theme="green"] input[type="password"], html[data-theme="green"] input[type="email"], html[data-theme="green"] input[type="number"], html[data-theme="green"] input[type="date"], html[data-theme="green"] input[type="search"], html[data-theme="green"] input[type="tel"], html[data-theme="green"] select, html[data-theme="green"] textarea { background: var(--surface); color: var(--text); border-color: var(--border); } html[data-theme="green"] .form-group input:focus, html[data-theme="green"] .form-group select:focus, html[data-theme="green"] .form-group textarea:focus { border-color: var(--navy); box-shadow: var(--sh-focus); } /* ── Footer ────────────────────────────────────────────────── */ html[data-theme="green"] .site-footer { background: var(--surface); color: var(--text-mid); } html[data-theme="green"] .site-footer a { color: var(--navy); } /* ── Avatar im Header ──────────────────────────────────────── */ html[data-theme="green"] .avatar { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.95); } /* ── Preferences-Buttons (Design/Schrift) ─────────────────── */ html[data-theme="green"] .user-prefs__btn:hover { background: var(--navy-wash); border-color: var(--navy-muted); color: var(--navy); } html[data-theme="green"] .user-prefs__btn--aktiv, html[data-theme="green"] .user-prefs__btn--aktiv:hover { background: var(--navy); color: #fff; border-color: var(--navy); } /* ── Quick-Action-Cards (Dashboard-Hero) ──────────────────── */ /* Im Wald-Schema bleiben die qa-card-Akzente farbig, aber wir tönen sie in moos-/erd-nahe Nuancen für ein harmonisches Gesamtbild. */ html[data-theme="green"] .qa-card--copper { background: var(--copper); color: #fff; border: 1px solid var(--copper); } html[data-theme="green"] .qa-card--copper:hover { background: var(--copper-dark); border-color: var(--copper-dark); } html[data-theme="green"] .qa-card--navy { background: var(--navy); color: #fff; border: 1px solid var(--navy); } html[data-theme="green"] .qa-card--navy:hover { background: #234A31; /* dunkler für Hover, AAA mit #fff */ border-color: #234A31; } html[data-theme="green"] .qa-card--sea { background: var(--sea); color: #fff; border: 1px solid var(--sea); } html[data-theme="green"] .qa-card--sea:hover { background: #205B5A; border-color: #205B5A; } html[data-theme="green"] .qa-card--plum { background: var(--plum); color: #fff; border: 1px solid var(--plum); } html[data-theme="green"] .qa-card--plum:hover { background: #533F73; border-color: #533F73; } /* ── Status-Cards (Ampelfarben) ───────────────────────────── */ /* Die Bedeutungs-Farben bleiben funktional erhalten. */ html[data-theme="green"] .status-card { background: var(--surface); } /* ── Skip-Link ────────────────────────────────────────────── */ html[data-theme="green"] .skip-link, html[data-theme="green"] .skip-link:focus { background: var(--navy); color: #fff; } /* ── Gefüllte Buttons: Kontrast sicherstellen ─────────────── */ /* .btn--copper im Wald-Design: --copper #6B7F2C + #fff = 4.61:1 → AA. */ html[data-theme="green"] .btn--copper { background: var(--copper); border-color: var(--copper); color: #fff; } html[data-theme="green"] .btn--copper:hover { background: var(--copper-dark); border-color: var(--copper-dark); color: #fff; } /* .btn--navy: --navy #2D5A3D + #fff = 7.7:1 (AAA). */ html[data-theme="green"] .btn--navy:hover { background: #234A31; border-color: #234A31; color: #fff; } /* ── Tab-Badges ───────────────────────────────────────────── */ html[data-theme="green"] .tab-badge { background: var(--navy-wash); color: var(--navy); } html[data-theme="green"] .tab--active .tab-badge { background: var(--copper-light); color: var(--copper-dark); } /* ── Bilder leicht entsättigen, damit sie nicht aus dem Wald-Schema „herausstechen". Sehr dezent (0.96). ─────── */ html[data-theme="green"] img:not([src*=".svg"]) { opacity: 0.96; } /* ── Scrollbars (nur WebKit) ──────────────────────────────── */ html[data-theme="green"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="green"] ::-webkit-scrollbar-track { background: var(--bg); } html[data-theme="green"] ::-webkit-scrollbar-thumb { background: var(--navy-muted); border-radius: 5px; } html[data-theme="green"] ::-webkit-scrollbar-thumb:hover { background: var(--navy); } /* ── Print: niemals in Grün drucken ───────────────────────── */ @media print { html[data-theme="green"] { --bg: #FFFFFF; --surface: #FFFFFF; --navy: #1B2A4A; --copper: #C06B3E; } html[data-theme="green"] .site-header { background: #1B2A4A; } }