/* * Gemeinsame Grundlage aller Seiten von empfehlungen. * * Farben stehen ausschliesslich hier als Tokens. Wer den Ton der Oberflaeche * aendern will, fasst nur die :root-Bloecke an, nie die Bausteine weiter * unten. * * Der Dunkelmodus greift auf zwei Wegen: automatisch ueber die * Systemeinstellung, und manuell ueber data-theme am -Element. Die * manuelle Wahl gewinnt in beide Richtungen -- deshalb sind die Systemregeln * mit :not([data-theme=...]) abgesichert. */ :root { /* Flaechen */ --bg: #fafafa; --surface: #ffffff; --surface-2: #f4f4f5; --surface-hover: #f4f4f5; /* Linien */ --border: #e4e4e7; --border-strong: #d4d4d8; /* Schrift */ --text: #18181b; --text-muted: #71717a; --text-subtle: #a1a1aa; /* Akzent -- sparsam einsetzen, nur fuer die jeweils wichtigste Aktion */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-text: #ffffff; --accent-soft: #eff6ff; --accent-ring: rgba(37, 99, 235, 0.25); /* Zustaende. Die drei Status eines Eintrags bekommen je einen eigenen Ton: zustande gekommen, noch offen, nicht zustande gekommen. */ --danger: #dc2626; --danger-hover: #b91c1c; --danger-soft: #fef2f2; --success: #16a34a; --success-soft: #f0fdf4; --warning: #b45309; --warning-soft: #fffbeb; /* Form */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #09090b; --surface: #18181b; --surface-2: #27272a; --surface-hover: #27272a; --border: #27272a; --border-strong: #3f3f46; --text: #fafafa; --text-muted: #a1a1aa; --text-subtle: #71717a; --accent: #3b82f6; --accent-hover: #60a5fa; --accent-text: #ffffff; --accent-soft: rgba(59, 130, 246, 0.12); --accent-ring: rgba(59, 130, 246, 0.35); --danger: #ef4444; --danger-hover: #f87171; --danger-soft: rgba(239, 68, 68, 0.12); --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.12); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); } } :root[data-theme="dark"] { --bg: #09090b; --surface: #18181b; --surface-2: #27272a; --surface-hover: #27272a; --border: #27272a; --border-strong: #3f3f46; --text: #fafafa; --text-muted: #a1a1aa; --text-subtle: #71717a; --accent: #3b82f6; --accent-hover: #60a5fa; --accent-text: #ffffff; --accent-soft: rgba(59, 130, 246, 0.12); --accent-ring: rgba(59, 130, 246, 0.35); --danger: #ef4444; --danger-hover: #f87171; --danger-soft: rgba(239, 68, 68, 0.12); --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.12); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); } /* ---------- Grundlagen ---------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; } } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.011em; color: var(--text); } h1 { font-size: 1.5rem; } h2 { font-size: 1.35rem; } h3 { font-size: 0.9rem; } a { color: var(--accent); } /* ---------- Bausteine ---------- */ .karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .feld-label, label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; } input, select, textarea { width: 100%; padding: 9px 12px; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color 0.15s, box-shadow 0.15s; } input::placeholder, textarea::placeholder { color: var(--text-subtle); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } /* Ankreuz- und Auswahlfelder sind so breit wie ihr Kaestchen. Ohne diese Ausnahme zoege die Regel oben sie ueber die ganze Zeile. */ input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; accent-color: var(--accent); } textarea { resize: vertical; } select { appearance: none; /* Pfeil als Datenurl, damit keine externe Datei noetig ist. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; cursor: pointer; } button, .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid transparent; padding: 9px 14px; transition: background 0.15s, border-color 0.15s, color 0.15s; } button:focus-visible, .knopf:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } button:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--accent-text); } .btn-primary:not(:disabled):hover { background: var(--accent-hover); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:not(:disabled):hover { background: var(--surface-hover); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:not(:disabled):hover { background: var(--surface-hover); color: var(--text); } .btn-danger { background: var(--danger); color: #ffffff; } .btn-danger:not(:disabled):hover { background: var(--danger-hover); } .btn-danger-outline { background: transparent; color: var(--danger); border-color: var(--border-strong); } .btn-danger-outline:not(:disabled):hover { background: var(--danger-soft); border-color: var(--danger); } /* Symbole erben die Textfarbe und skalieren mit der Schrift. */ .ico { width: 1em; height: 1em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Themenumschalter ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); } .theme-toggle:hover { background: var(--surface-hover); color: var(--text); } .theme-toggle .ico { width: 17px; height: 17px; } /* Sonne im Dunkelmodus, Mond im Hellmodus. */ .theme-toggle .ico-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .ico-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; } } :root[data-theme="dark"] .theme-toggle .ico-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; } :root[data-theme="light"] .theme-toggle .ico-sun { display: none; } :root[data-theme="light"] .theme-toggle .ico-moon { display: block; }