/* Mischfeld – Gestaltungssystem: Token
*
* Die eine Stelle, an der Farbe, Schrift und Maß stehen. Alles andere im
* System – und alles in den Werkzeugen – liest von hier.
*
* Einbinden VOR jedem anderen Blatt:
*
*
*
* Warum Token und nicht Literale: Die vier Arbeitsflächen standen in mapfit
* anfangs an achtzig Stellen als #fff und #f6f8fa im Blatt. Ein zweites Thema
* hätte jede davon einzeln anfassen müssen.
*
* Diese Datei enthält NUR Deklarationen von Eigenschaften – keine Regel, die
* etwas malt. Sie lässt sich damit gefahrlos in ein bestehendes Projekt
* einhängen, auch wenn dessen Gestaltung noch nicht umgestellt ist.
*/
/* ==========================================================================
1. Helles Thema – die Vorgabe
========================================================================== */
:root {
color-scheme: light;
/* --- Arbeitsflächen ----------------------------------------------------
Vier Werte, aus denen sich Spalte, Karten, Knöpfe und Dialoge
zusammensetzen:
--flaeche Karten, Knöpfe, Dialoge – worauf gelesen wird
--flaeche-tief der Grund dahinter, eine Stufe zurückgenommen
--flaeche-hover dieselbe Fläche unter dem Zeiger
--text die Schrift darauf */
--flaeche: #fff;
--flaeche-tief: #f6f8fa;
--flaeche-hover: #eef1f4;
--text: #1f2328;
--border: #d0d7de;
--muted: #57606a;
/* Der Grund einer Werkzeugleiste oder -spalte – einen Hauch grüner als die
Arbeitsfläche, damit sie sich als eigener Streifen liest und erkennbar
aus dem Mischfeld kommt. */
--flaeche-leiste: #f4f7f3;
/* Die hervorgehobene Zeile: der angewählte Eintrag, die beschreibbare
Zelle, der Treffer einer Suche. */
--betont: #ddf4ff;
/* Die gewählte Zeile in Markenton – für Auswahlen, bei denen genau ein
Eintrag „der bearbeitete" ist. Heller als --betont und grün statt blau:
Blau heißt „anfassbar", dieses Grün heißt „das hier ist gemeint". */
--gewaehlt: #e8f1e9;
/* Die getönten Hauchflächen je Bedeutungsfarbe – Marken, Statusabzeichen,
Meldungen, die Fehlerzeile der Anmeldemaske. Ins System geholt am
19.08.2026: zweimal umgesetzt (Tagwerk 10.08., seitenblick 12.08.) und
in Patientensim/Wachplan bis dahin nur über einen Fallback benutzt.
--grau-hauch ist dieselbe Fläche wie --flaeche-hover, --gruen-hauch
dieselbe wie --gewaehlt – zwei Namen für je einen Wert, weil die Blätter
der Werkzeuge beide führen; neue Regeln nehmen die Hauch-Namen. */
--grau-hauch: #eef1f4;
--gruen-hauch: #e8f1e9;
--rot-hauch: #fdf0ef;
--gelb-hauch: #fdf6e3;
--blau-hauch: #eaf2fd;
/* --- Die Tinte der Marke ------------------------------------------------
Kopf und Fußzeile tragen sie und rahmen damit die helle Arbeitsfläche.
Das ist das wiedererkennbarste Merkmal der Familie – ein Werkzeug ohne
diesen Rahmen sieht nicht mehr nach Mischfeld aus. */
--tinte: #0e1710; /* Kopf */
--tinte-hoch: #1a2a1f; /* Knöpfe und Felder AUF der Tinte */
--tinte-tief: #0a110c; /* Fußzeile – die tiefste Stufe */
--tinte-linie: #24382c; /* Kanten und Rahmen auf der Tinte */
--tinte-text: #e8eee2;
--tinte-leise: #a4b49e; /* Nebenangaben und Verweise auf der Tinte */
/* --- Signalfarben, je in ZWEI Fassungen ---------------------------------
Ein Ton für beide Gründe gibt es nicht: Auf der dunklen Tinte des Kopfes
verschwindet das tiefe Grün fast, auf der hellen Spalte überstrahlt das
helle. Wer eine Signalfarbe auf dunklen Grund setzt, nimmt die helle
Fassung – und umgekehrt. Das gilt für Grün wie für Rot. */
--gruen: #4fc662; /* Akzent auf dunklem Grund */
--gruen-hell: #6fd97f; /* derselbe, überfahren */
--gruen-tief: #2f7a3e; /* derselbe Akzent auf hellem Grund */
--gruen-tiefer: #286a36; /* derselbe, überfahren */
--rot: #ff7b72; /* Warnung auf dunklem Grund */
--rot-tief: #cf222e; /* Warnung auf hellem Grund */
/* Blau gehört den Bedienelementen: Fokus, Griffe, angefasste Kanten.
Grün gehört dem Gelesenen – Verweise in Texten sind grün, nicht blau,
sonst sieht Fließtext aus wie ein Werkzeug. */
--blau: #0969da;
--blau-kante: #8c959f; /* neutrale Kante beim Überfahren */
/* Gelb heißt „dieser Modus läuft" – ein Zustand, kein nächster Schritt. */
--gelb: #bf8700;
--gelb-tief: #a97700; /* derselbe, überfahren */
--gelb-hell: #f5b73a; /* auf dunklem Grund */
/* --- Schriften ----------------------------------------------------------
Der Arbeitsbereich bleibt Systemschrift – dort wird bedient. Die Serifen
tragen Markenwort und Überschriften der Leseseiten – dort wird gelesen. */
--schrift-bedienung: "Segoe UI", Arial, sans-serif;
--schrift-lesen: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--schrift-anzeige: "Iowan Old Style", "Palatino Linotype", Palatino,
"Book Antiqua", Georgia, serif;
--schrift-fest: Consolas, "SF Mono", Menlo, monospace;
/* --- Größen -------------------------------------------------------------
Vier Stufen, mehr braucht die Bedienung nicht. Fließtext auf Leseseiten
steht bei 15px/1.65 und gehört nicht in diese Reihe – gelesen wird
anders als bedient. */
--gr-bedienung: 13px; /* Beschriftungen, Knöpfe, Eingaben */
--gr-neben: 12px; /* Hinweise, Tabellen, Nebenangaben */
--gr-klein: 11px; /* Zustandszeilen, Tastenkürzel */
--gr-winzig: 10px; /* Quellenvermerke Dritter */
/* --- Rundungen ----------------------------------------------------------
Je größer die Fläche, desto größer der Radius. */
--rund-klein: 4px; /* Zellen, kleine Felder, Tastenkappen */
--rund: 6px; /* Knöpfe, Eingaben, Menüeinträge */
--rund-gross: 8px; /* Aufsätze, aufklappende Menüs */
--rund-karte: 12px; /* Karten und Dialoge */
--rund-pille: 999px; /* Pillen und Fortschrittsbalken */
/* --- Takt ---------------------------------------------------------------
Der Abstand ist die Aussage: 10px trennt Zeilen einer Karte, 12px trennt
Karten, 14px ist die Polsterung einer Karte. Wer davon abweicht, sagt
damit „das gehört woanders hin" – also nur dann. */
--luft-eng: 6px;
--luft: 10px;
--luft-weit: 12px;
--polster: 14px;
/* --- Schatten -----------------------------------------------------------
Drei Höhen. Was höher liegt, wirft weiter. */
--schatten-klein: 0 1px 4px rgba(0, 0, 0, .2); /* Griffe, Marker */
--schatten: 0 4px 14px rgba(0, 0, 0, .18); /* Menüs, Aufsätze */
--schatten-hoch: 0 12px 40px rgba(0, 0, 0, .22); /* Dialoge */
/* Der gedämpfte Grund hinter einem Dialog: Er dämpft die Anwendung, statt
sie zu verdecken – worüber gefragt wird, soll sichtbar bleiben. */
--schleier: rgba(14, 23, 16, .38);
/* --- Zeichnungen als Data-URL -------------------------------------------
Der Doppelpfeil eines Klappgriffs. Als Zeichnung und nicht als
Schriftzeichen: Das « einer Schrift sitzt auf der Grundlinie und damit
sichtbar neben der Kreismitte. Diese Form ist um (8,8) konstruiert und
bleibt in jeder Drehlage mittig.
Die Strichfarbe ist eingebacken – deshalb steht dieselbe Zeichnung im
dunklen Thema noch einmal, sonst wären die Griffe dort blind. */
--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.75 4.5 4.25 8 7.75 11.5M11.75 4.5 8.25 8 11.75 11.5' fill='none' stroke='%2357606a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--chevron-kraeftig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.75 4.5 4.25 8 7.75 11.5M11.75 4.5 8.25 8 11.75 11.5' fill='none' stroke='%231f2328' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ==========================================================================
2. Dunkles Thema
==========================================================================
Der Grund ist kein Geschmack: Ein Werkzeug, das den ganzen Tag offensteht
und im Einsatz auch nachts, blendet mit einer weißen Vollfläche nicht nur –
es zerstört die Dunkeladaption, und danach liest man das Papier schlechter
als vorher.
Drei Stände, gewählt über einen Knopf im Kopf: `System` (Vorgabe), `Hell`,
`Dunkel`. Wer sein Betriebssystem dunkel stellt, hat die Entscheidung meist
schon getroffen; wer aber im hellen Büro an einem dunkel eingestellten
Rechner sitzt, soll sie überstimmen können, ohne das System umzustellen.
Die Wahl steht als `data-thema` am und liegt im localStorage –
Arbeitsplatz, nicht Projekt.
Was NICHT mitgeht, und zwar mit Absicht:
* Kopf und Fußzeile – sie tragen ohnehin die Tinte der Marke.
* Das Druckblatt – gedruckt wird auf weißes Papier. Ein dunkles Blatt
wäre kein Thema, sondern ein Fehler.
* Fremdinhalte (Basiskarten, eingebettete Dokumente). Sie kommen, wie
sie kommen.
* Was ÜBER Fremdinhalt liegt: Solche Aufsätze setzen ihren Grund als
rgba(255,255,255,.92) plus backdrop-filter, nicht über ein Token. Sie
müssen sich gegen den Inhalt behaupten, nicht gegen die Oberfläche.
Die Token werden umdefiniert, nicht die Regeln überschrieben: Damit gilt
das Thema überall dort, wo eine Fläche schon als Token gesetzt ist – auch
in allem, was später dazukommt. */
/* Die dunkle Palette – EINMAL benannt, zweimal zugewiesen.
Zweimal, weil CSS keine Möglichkeit hat, dieselbe Regel unter einer
Medienbedingung UND unter einem Attribut zu führen: Der Systemfall steht in
@media, die ausdrückliche Wahl an [data-thema]. Was sich dabei wiederholt,
sind nur die Zuweisungen; die Farbwerte stehen an genau einer Stelle. */
:root {
--d-flaeche: #1b201d;
--d-flaeche-tief: #121614;
--d-flaeche-hover: #262d29;
--d-text: #e6ebe4;
--d-border: #333c37;
--d-muted: #9aa79c;
--d-flaeche-leiste: #171d19;
--d-betont: #1e3a4a;
--d-gewaehlt: #1e2f22;
--d-grau-hauch: #262d29;
--d-gruen-hauch: #1e2f22;
--d-rot-hauch: #3a1d1c;
--d-gelb-hauch: #3a3010;
--d-blau-hauch: #182c44;
/* Blau ist für helle Flächen gemischt; auf dunklem Grund gilt die helle
Fassung (Tagwerk/seitenblick seit 12.08.2026). Gelb bleibt OFFEN: Tagwerk
und seitenblick nennen die Grundfarbe --gelb-tief und schalten sie auf
#f5b73a; hier heißt --gelb-tief die überfahrene Stufe. Erst den Namen
klären, dann den Dunkelwert setzen – sonst färbt sich ein Modusknopf um. */
--d-blau: #58a6ff;
--d-blau-kante: #6f7d73;
/* Das tiefe Grün und das tiefe Rot sind für helle Flächen gemischt und
verschwinden auf dunklem Grund fast – dort gelten hellere Fassungen. */
--d-gruen-tief: #3f9e52;
--d-gruen-tiefer: #4bb060;
--d-rot-tief: #ff8a80;
--d-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.75 4.5 4.25 8 7.75 11.5M11.75 4.5 8.25 8 11.75 11.5' fill='none' stroke='%239aa79c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--d-chevron-kraeftig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.75 4.5 4.25 8 7.75 11.5M11.75 4.5 8.25 8 11.75 11.5' fill='none' stroke='%23e6ebe4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Nicht schwarz: Weiß auf Schwarz flimmert bei langem Lesen. Die Flächen sind
kühle Grautöne mit einem Hauch der Markentinte, damit Kopf und
Arbeitsbereich zusammengehören. */
@media (prefers-color-scheme: dark) {
/* Der Systemfall – aber nur, solange nicht ausdrücklich hell gewählt ist. */
:root:not([data-thema="hell"]) {
color-scheme: dark;
--flaeche: var(--d-flaeche);
--flaeche-tief: var(--d-flaeche-tief);
--flaeche-hover: var(--d-flaeche-hover);
--text: var(--d-text);
--border: var(--d-border);
--muted: var(--d-muted);
--flaeche-leiste: var(--d-flaeche-leiste);
--betont: var(--d-betont);
--gewaehlt: var(--d-gewaehlt);
--grau-hauch: var(--d-grau-hauch);
--gruen-hauch: var(--d-gruen-hauch);
--rot-hauch: var(--d-rot-hauch);
--gelb-hauch: var(--d-gelb-hauch);
--blau-hauch: var(--d-blau-hauch);
--blau: var(--d-blau);
--blau-kante: var(--d-blau-kante);
--gruen-tief: var(--d-gruen-tief);
--gruen-tiefer: var(--d-gruen-tiefer);
--rot-tief: var(--d-rot-tief);
--chevron: var(--d-chevron);
--chevron-kraeftig: var(--d-chevron-kraeftig);
}
}
/* Die ausdrückliche Wahl – sie gilt auch auf einem hell eingestellten System. */
:root[data-thema="dunkel"] {
color-scheme: dark;
--flaeche: var(--d-flaeche);
--flaeche-tief: var(--d-flaeche-tief);
--flaeche-hover: var(--d-flaeche-hover);
--text: var(--d-text);
--border: var(--d-border);
--muted: var(--d-muted);
--flaeche-leiste: var(--d-flaeche-leiste);
--betont: var(--d-betont);
--gewaehlt: var(--d-gewaehlt);
--grau-hauch: var(--d-grau-hauch);
--gruen-hauch: var(--d-gruen-hauch);
--rot-hauch: var(--d-rot-hauch);
--gelb-hauch: var(--d-gelb-hauch);
--blau-hauch: var(--d-blau-hauch);
--blau: var(--d-blau);
--blau-kante: var(--d-blau-kante);
--gruen-tief: var(--d-gruen-tief);
--gruen-tiefer: var(--d-gruen-tiefer);
--rot-tief: var(--d-rot-tief);
--chevron: var(--d-chevron);
--chevron-kraeftig: var(--d-chevron-kraeftig);
}