.settings-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---------- Farben ---------- Zwei Ansichten, eine Regelmenge: unter dieser Stelle steht keine Farbe mehr fest, alles greift auf die Tokens hier zu. Eine helle Ansicht ist damit ein zweiter Wertesatz und keine zweite Datei. Dunkel steht in :root und ist damit der Wert, der ohne Attribut gilt. Hell kommt ueber data-theme="light" an . Bewusst KEIN @media (prefers-color-scheme): welche Ansicht gilt, entscheidet public/js/theme.js - ohne eigene Wahl folgt es der Systemeinstellung, ein Klick auf den Umschalter legt sie fest. Stuende die Systemabfrage hier, braeuchte sie einen zweiten Block mit denselben 19 Farbwerten, und ein geaenderter Hexwert waere an einer der beiden Stellen vergessen. Das Skript blockiert ohnehin schon vor dem ersten Zeichnen. */ :root { --bg: #14181d; --surface: #1b2127; --surface-alt: #20272e; --border: #2b333b; --text: #ece8e1; --text-dim: #8b9199; --accent: #c1793d; --accent-dim: #8c5a2c; --success: #6fa37b; --danger: #d4766b; --warning: #d9a54b; --radius: 6px; /* Der Akzent traegt zwei Rollen: Schriftfarbe auf dem Untergrund UND Flaeche des Hauptknopfes. --on-accent ist die Schrift AUF dieser Flaeche und laesst sich nicht aus --text ableiten: im Dunklen ist sie dunkel, im Hellen hell. */ --accent-hover: #d4884c; --on-accent: #14181d; /* Durchscheinende Flaechen und Schatten brauchen je Ansicht eine eigene Deckkraft: 12 % Gruen fallen auf dunklem Grund auf, auf hellem nicht, und ein Schatten aus 35 % Schwarz wirkt im Hellen wie ein Fleck. */ --tint-success: rgba(111, 163, 123, 0.12); --tint-danger: rgba(212, 118, 107, 0.12); --pulse-ring: rgba(111, 163, 123, 0.5); --menu-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); --login-glow: rgba(193, 121, 61, 0.08); /* Der Pfeil der Auswahlfelder ist eine Bilddatei, seine Farbe steht also in der URL und nicht in einer Eigenschaft - er muss als ganzes Token ausgetauscht werden. %23 ist das # der Farbe. */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238b9199' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Die aufgeklappte Liste eines