/* farben.css - gemeinsame Farbpalette des Portals (17.09.2026) Vorher hatte jede Seite ihre eigenen Farben: 390 verschiedene Werte an 1344 Stellen. Jetzt gibt es 40 benannte Farben. Wer etwas umfaerben will, aendert es HIER - und nur hier. Der Dunkelmodus ist genau dieselbe Liste mit anderen Werten. */ :root { --karte: #ffffff; /* Kartenflaeche, Eingabefelder */ --flaeche: #f6f8fa; /* Seitenhintergrund */ --flaeche-2: #eef1f5; /* abgesetzte Zeilen, graue Chips */ --linie: #e3e9ef; /* Trennlinien, Rahmen */ --linie-kraeftig: #c4ccd6; /* betonte Rahmen */ --text: #1f2a44; /* normale Schrift */ --text-stark: #12211e; /* Titel, betonte Schrift */ --text-mittel: #5a6b80; /* zweite Ebene */ --text-leise: #8a97a8; /* Hinweise, Platzhalter */ --grau-dunkel: #333333; /* dunkles Grau, aeltere Seiten */ --grau: #8a8a8a; /* mittleres Grau */ --stein: #4e5a58; /* Termin-Plakette, graugruen */ --stein-hell: #7a8a86; /* graugruen, heller */ --akzent: #1fbfa0; /* Bopp-Tuerkis */ --akzent-dunkel: #178f78; /* Knopf gedrueckt, Hover */ --akzent-tief: #0e6f5c; /* Schrift auf hellem Tuerkis */ --akzent-hell: #f2fbf9; /* zarte Tuerkis-Flaeche */ --akzent-flaeche: #d9f2ec; /* Tuerkis-Chip */ --akzent-zart: #9fd6c6; /* tuerkiser Rahmen, zart */ --gut: #2e9e5b; /* erledigt, in Ordnung */ --gut-hell: #e8f7ee; /* gruene Flaeche */ --gut-zart: #8fce9f; /* gruener Rahmen, zart */ --warnung: #f5a623; /* Achtung, wartend */ --warnung-dunkel: #b26a00; /* Schrift auf gelber Flaeche */ --warnung-hell: #fff6e0; /* gelbe Flaeche */ --warnung-zart: #f0c869; /* gelber Rahmen, zart */ --gelb: #e8c200; /* Markierungen, Stift */ --gelb-dunkel: #8a6d00; /* Schrift auf Gelb */ --sand: #f0dfa0; /* Notizzettel, Markierung */ --sand-hell: #fff7d6; /* Notizflaeche, sehr hell */ --fehler: #dc4030; /* Fehler, ueberfaellig */ --fehler-dunkel: #a5291c; /* Schrift auf rotem Grund */ --fehler-hell: #fdecea; /* rote Flaeche */ --fehler-zart: #f0b6a8; /* roter Rahmen, zart */ --info: #3a6fd0; /* Verweise, blaue Knoepfe */ --info-dunkel: #2f5fb0; /* blauer Knopf gedrueckt */ --info-hell: #eef4ff; /* blaue Flaeche */ --info-zart: #b9cdf0; /* blauer Rahmen, zart */ --violett: #7c5cc4; /* Sonderfaelle, Muster */ --schwarz: #000000; /* Schatten, bleibt schwarz */ color-scheme: light; } /* Dunkelmodus. Gesetzt wird das Merkmal data-thema am durch thema.js. */ html[data-thema="dunkel"] { --karte: #1b2129; --flaeche: #141920; --flaeche-2: #232b35; --linie: #2f3945; --linie-kraeftig: #44505f; --text: #e6ecf3; --text-stark: #f4f8fb; --text-mittel: #b3bece; --text-leise: #8d9aab; --grau-dunkel: #d4dae1; --grau: #9aa3ad; --stein: #c2cdc9; --stein-hell: #94a39e; --akzent: #2fd3b3; --akzent-dunkel: #1fae92; --akzent-tief: #17806b; --akzent-hell: #16302b; --akzent-flaeche: #1d4038; --akzent-zart: #2a5f52; --gut: #3fbe74; --gut-hell: #16301f; --gut-zart: #2f6b40; --warnung: #f7b23f; --warnung-dunkel: #d98c1f; --warnung-hell: #33270d; --warnung-zart: #8a6a22; --gelb: #efd033; --gelb-dunkel: #c2a01f; --sand: #6b5a28; --sand-hell: #3a3116; --fehler: #f0604f; --fehler-dunkel: #c94a3a; --fehler-hell: #3a1c18; --fehler-zart: #7a3a2e; --info: #5b8ee8; --info-dunkel: #4a7ad2; --info-hell: #17243a; --info-zart: #3a4e70; --violett: #9b7fe0; --schwarz: #000000; color-scheme: dark; } /* Auffangnetz fuer alles, was seine Farbe sonst vom Browser bekommt: leere Formularfelder, Seiten ohne eigene Hintergrundangabe. ALLES hier steht in :where() und hat damit Spezifitaet null - jede Regel der Seite selbst gewinnt. Ohne das faerbte diese Regel den tuerkisen Anmelden-Knopf grau, weil "html[data-thema] button" staerker ist als ".btn-primary" (gesehen am 17.09.2026). */ html[data-thema="dunkel"] :where(body) { background: var(--flaeche); color: var(--text); } html[data-thema="dunkel"] :where(input, textarea, select) { background-color: var(--karte); color: var(--text); border-color: var(--linie); } html[data-thema="dunkel"] :where(input, textarea)::placeholder { color: var(--text-leise); } /* Fotos, Skizzen und Unterschriften bleiben, wie sie sind - nur ihr Rahmen wird ruhiger. */ html[data-thema="dunkel"] :where(img, canvas) { border-color: var(--linie); } /* Der Schalter selbst (thema.js baut ihn ein). */ .thema-schalter { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-left: 8px; border: 1px solid var(--linie-kraeftig); border-radius: 50%; background: var(--karte); color: var(--text); cursor: pointer; line-height: 1; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.12); } .thema-schalter:hover { border-color: var(--akzent); color: var(--akzent); } .thema-schalter svg { width: 18px; height: 18px; display: block; } /* Seiten ohne Kopfzeile (Anmeldung, Passwort): der Knopf schwebt in der Ecke. Etwas tiefer als ganz oben, damit er im Testsystem nicht unter dem roten Band klemmt. */ .thema-schalter.schwebend { position: fixed; top: 44px; right: 16px; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,.25); } @media print { .thema-schalter { display: none !important; } }