/* MarkiMedia — alle Farben (Darkmode seit 19.09.2026) ------------------------------------------------------------------ Entwurf: DARKMODE-ENTWURF.md (verbindlich). Diese Datei wird in index.html als ERSTE Stildatei geladen. stil.css, chat.css und dreid.css benutzen nur noch diese Token; feste Farben stehen dort nur noch, wo sie in beiden Modi richtig sind (Knopfverlauf mit weisser Schrift, grosse Bildansicht, Vorstart-Balken, Google-Knopf hell ...). Aufbau: :root hell — die Werte von vorher, Pixel fuer Pixel @media screen + Geraet dunkel dunkel, solange nichts gewaehlt ist ("Automatisch") @media screen + data-theme dunkel, feste Wahl "Dunkel" Die Liste in BEIDEN Dunkel-Bloecken muss IDENTISCH sein (Namen und Werte) — werkzeug\pruefen-darkmode.mjs vergleicht sie. Gedruckt wird immer hell: Beide Dunkel-Bloecke gelten nur fuer `screen`. Warum nicht light-dark(): Safari kennt es erst ab 17.5. Auf aelteren iPhones waeren alle Token ungueltig, und die Seite verloere auch HELL ihre Farben. Die doppelte Liste ist der sichere Preis dafuer. Zur Spezifitaet: :root ist (0,1,0), die beiden Dunkel-Selektoren sind (0,2,0). Die dunklen Werte gewinnen also unabhaengig von der Reihenfolge der Dateien. --tint und --schatten: Zarte Fuellungen nehmen --tint (wird im Dunkeln hell), Schatten und Schleier nehmen --schatten (bleibt im Dunkeln schwarz). Ohne diese Trennung leuchteten die Schatten im Dunkeln weiss. */ :root { /* Markenfarben aus dem Logo-Verlauf. Cyan ist auf Weiss zu hell fuer Text — dafuer gibt es --akzent. */ --violett: #7b1ff0; --blau: #2563eb; --cyan: #22d3ee; --akzent: #1741c9; /* Links, Fokusring, aktive Punkte */ --akzent-rgb: 29, 78, 216; /* zarte Akzent-Toene: rgba(var(--akzent-rgb), .05) */ --auf-akzent: #ffffff; /* Schrift auf --akzent (Korbzahl) */ --grund: #ffffff; --flaeche: #f4f7fc; --karte: #ffffff; --rand: #d5dde9; --randstark: #9aa9c4; /* Rand der Eingabefelder (seit 19.09.2026): mindestens 3:1 gegen den Grund (WCAG 1.4.11). #7c8aa5 hat 3,48:1 auf Weiss; vorher standen die Felder auf --randstark (2,37:1) bzw. im Anmeldefenster auf --rand (1,37:1). Markus hat auf die Frage nicht geantwortet, es gilt die Empfehlung aus DARKMODE-ENTWURF.md Abschnitt 9. */ --feldrand: #7c8aa5; --bildrand: #d5dde9; /* Rahmen der Bildschirmfotos (hell = --rand) */ --text: #0b1220; --leise: #3c465c; /* Zweitschrift ("text-leise") */ --grau: #64748b; /* Chip "privat" */ --tint: 11, 18, 32; /* NUR zarte Fuellungen: rgba(var(--tint), .04) */ --schatten: 11, 18, 32; /* Schatten und Schleier */ --kopf-glas: rgba(255, 255, 255, .93); --fussleiste: #eaeff8; --bildgrund: #e9edf2; /* Platzhalter hinter den 3D-Bildern */ --gut: #047857; --gut-rgb: 4, 120, 87; /* Nur fuer die gruenen Chips auf gruen hinterlegter Flaeche (seit 20.09.2026). --gut #047857 auf rgba(4,120,87,.10) ueber --flaeche ergibt #dceaec und damit 4,45:1 — knapp unter den geforderten 4,5. #046c4e hat auf derselben Flaeche 5,24:1 und auf --grund 5,60:1; auf weiss gemessen liegen beide Toene gleich ruhig. Alles andere Gruene (Marken-Chip "fertig" 4,71:1, Druckbett im 3D-Fenster) bleibt auf --gut. Dunkel ist kein Ton noetig: dort sind es 7,77:1. */ --gut-chip: #046c4e; --warn: #b45309; --warn-rgb: 180, 83, 9; --warn-stark: #92400e; /* Text in Warnkaesten */ --warn-rand: rgba(217, 119, 6, .38); --warn-flaeche: rgba(251, 191, 36, .10); --fehler: #b91c1c; --fehler-rgb: 220, 38, 38; --fehler-flaeche: #fdf2f2; --fehler-rand: #f0c9c9; --gefahr-rand: #e6b8ba; /* Block "Konto loeschen" */ --meldung-grund: #0b1220; --meldung-text: #ffffff; /* Drei Verlaeufe statt einem. Cyan ist auf Weiss zu hell: als Schrift blass, als Knopfgrund mit weisser Schrift unlesbar. Deshalb gibt es ihn nur noch als Zierde. Der Knopfverlauf bleibt in beiden Modi gleich (weisse Schrift darauf 6,7-7,1:1). */ --verlauf: linear-gradient(100deg, var(--violett), var(--blau) 55%, var(--cyan)); --verlauf-text: linear-gradient(100deg, #6d28d9, #1d4ed8 85%); --verlauf-knopf: linear-gradient(100deg, #6d28d9, #1d4ed8); color-scheme: light; } /* ── Dunkel, Fall 1: "Automatisch" und das Geraet ist dunkel ───────── Ohne Attribut entscheidet die Media-Query; ein Wechsel am Geraet (etwa abends) greift sofort, auch ohne JavaScript. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --akzent: #8fb0ff; --akzent-rgb: 143, 176, 255; --auf-akzent: #0b1220; --grund: #0b1220; --flaeche: #0f1729; --karte: #141d31; --rand: #26324a; --randstark: #5d6b86; --feldrand: #5d6b86; --bildrand: #33415c; --text: #e8edf7; --leise: #aab4c8; --grau: #94a3b8; --tint: 226, 232, 245; --schatten: 0, 0, 0; --kopf-glas: rgba(11, 18, 32, .9); --fussleiste: #080c16; --bildgrund: #1b2436; --gut: #34d399; --gut-rgb: 52, 211, 153; --gut-chip: #34d399; --warn: #fbbf24; --warn-rgb: 251, 191, 36; --warn-stark: #fcd34d; --warn-rand: rgba(251, 191, 36, .38); --warn-flaeche: rgba(251, 191, 36, .10); --fehler: #f87171; --fehler-rgb: 248, 113, 113; --fehler-flaeche: #2a1822; --fehler-rand: #7f1d1d; --gefahr-rand: #7f1d1d; --meldung-grund: #e8edf7; --meldung-text: #0b1220; --verlauf-text: linear-gradient(100deg, #b794f6, #7ea6ff 85%); color-scheme: dark; } } /* ── Dunkel, Fall 2: feste Wahl "Dunkel" (Schalter, data-theme) ────── DIESELBE Liste wie oben. */ @media screen { :root[data-theme="dark"] { --akzent: #8fb0ff; --akzent-rgb: 143, 176, 255; --auf-akzent: #0b1220; --grund: #0b1220; --flaeche: #0f1729; --karte: #141d31; --rand: #26324a; --randstark: #5d6b86; --feldrand: #5d6b86; --bildrand: #33415c; --text: #e8edf7; --leise: #aab4c8; --grau: #94a3b8; --tint: 226, 232, 245; --schatten: 0, 0, 0; --kopf-glas: rgba(11, 18, 32, .9); --fussleiste: #080c16; --bildgrund: #1b2436; --gut: #34d399; --gut-rgb: 52, 211, 153; --gut-chip: #34d399; --warn: #fbbf24; --warn-rgb: 251, 191, 36; --warn-stark: #fcd34d; --warn-rand: rgba(251, 191, 36, .38); --warn-flaeche: rgba(251, 191, 36, .10); --fehler: #f87171; --fehler-rgb: 248, 113, 113; --fehler-flaeche: #2a1822; --fehler-rand: #7f1d1d; --gefahr-rand: #7f1d1d; --meldung-grund: #e8edf7; --meldung-text: #0b1220; --verlauf-text: linear-gradient(100deg, #b794f6, #7ea6ff 85%); color-scheme: dark; } } /* ── Logo-Paar ────────────────────────────────────────────────────── Hell: markimedia-logo-dunkel.png (dunkles "Marki" — der Dateiname meint die SCHRIFT, nicht den Grund). Dunkel: markimedia-logo.png, das Original mit weissem "Marki". Das helle steht in index.html und konto.js unveraendert an erster Stelle, das dunkle als Geschwister dahinter mit loading="lazy" — im hellen Modus wird es nie geladen. !important, weil "#kopf .mm-logo-shimmer-img" und ".kb-logo img" selbst display: block setzen. Die Alphakanaele beider Dateien sind gleich, die Maske des Silberreflexes (stil.css) passt also auf beide. */ .logo-auf-dunkel { display: none !important; } @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-auf-dunkel { display: block !important; } :root:not([data-theme="light"]) .mm-logo-shimmer-img:not(.logo-auf-dunkel), :root:not([data-theme="light"]) .fusslogo:not(.logo-auf-dunkel), :root:not([data-theme="light"]) .kb-logo img:not(.logo-auf-dunkel) { display: none !important; } } @media screen { :root[data-theme="dark"] .logo-auf-dunkel { display: block !important; } :root[data-theme="dark"] .mm-logo-shimmer-img:not(.logo-auf-dunkel), :root[data-theme="dark"] .fusslogo:not(.logo-auf-dunkel), :root[data-theme="dark"] .kb-logo img:not(.logo-auf-dunkel) { display: none !important; } } /* ── Mit Google anmelden: Googles "Dark theme" ─────────────────────── developers.google.com/identity/branding-guidelines (gelesen 18.09.2026): Light #FFFFFF / Rand #747775 / Schrift #1F1F1F (steht woertlich in stil.css), Dark #131314 / Rand #8E918F / Schrift #E3E3E3 — "Choose the button in the right color mode". Das G bleibt vierfarbig. Ueberfahren dunkel: 8 % #E3E3E3 ueber #131314. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .googleknopf { background: #131314; border-color: #8e918f; color: #e3e3e3; } :root:not([data-theme="light"]) .googleknopf:hover { background: #242425; box-shadow: none; } } @media screen { :root[data-theme="dark"] .googleknopf { background: #131314; border-color: #8e918f; color: #e3e3e3; } :root[data-theme="dark"] .googleknopf:hover { background: #242425; box-shadow: none; } } /* ── 3D-Fenster: ein Rand im Dunkeln ──────────────────────────────── Das Fenster ist --grund und hat keinen Rand; hell traegt es der Schatten. Im Dunkeln lag es (#0b1220) fast farbgleich auf der abgedunkelten Seite dahinter (etwa #0a0e19) — dieselbe Lage wie bei der Klappe im Menue. Ein Ring aus --rand statt eines Randes: Er nimmt keinen Platz, das Fenster bleibt Pixel fuer Pixel so gross wie hell. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #dreidFenster { box-shadow: 0 0 0 1px var(--rand), 0 30px 80px rgba(0, 0, 0, .35); } } @media screen { :root[data-theme="dark"] #dreidFenster { box-shadow: 0 0 0 1px var(--rand), 0 30px 80px rgba(0, 0, 0, .35); } } /* ── Platzhalter im Dunkeln (seit 19.09.2026) ─────────────────────── Newsletter-Feld und 3D-Suche hatten keinen eigenen Platzhalter-Ton. Die Browser-Vorgabe #757575 hat auf dem dunklen Grund nur 4,06:1 (Soll 4,5:1). Im Dunkeln deshalb fuer ALLE Felder wie im Chat (chat.css): --leise mit .8, rund 5,6:1 — auch fuer spaetere Felder. Hell bleibt die Vorgabe (4,61:1), das helle Bild aendert sich nicht. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ::placeholder { color: var(--leise); opacity: .8; } } @media screen { :root[data-theme="dark"] ::placeholder { color: var(--leise); opacity: .8; } } /* ── 3D-Vorschaubilder im Dunkeln etwas zuruecknehmen (seit 19.09.2026) ── Die Renders haben einen fast weissen Hintergrund (etwa #eceff4). Auf dem dunklen Grund zogen 16 helle Kacheln mehr Blick als Ueberschrift und Suche. Betroffen sind nur die Kacheln (Raster /3d und Streifen auf der Startseite); die grosse Ansicht und das 3D-Fenster zeigen das Bild unveraendert. Das Zeichen-Schild auf der Kachel bleibt hell. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .d3-kartenbild > img { filter: brightness(.85); } } @media screen { :root[data-theme="dark"] .d3-kartenbild > img { filter: brightness(.85); } } /* ── Umschalten ohne gestaffeltes Umblenden ───────────────────────── app.js (themaSetzen) setzt die Klasse fuer 60 ms. Sonst blendeten die Bauteile mit eigenen Uebergaengen (48 transition-Angaben in den drei Stildateien) nacheinander um. */ .thema-wechselt, .thema-wechselt *, .thema-wechselt *::before, .thema-wechselt *::after { transition: none !important; }