/* PFIFF v1 | Sprint D | Status: Stable | LastEdit: 2026-08-29 */ /* Reset, Farbmarken, Typografie. Keine Komponenten- oder Bildschirmregel hier — siehe components.css und screens.css. Dunkel ist der Grundfall (0.13), Hell die Alternative. */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, p, ul, ol, li, figure, details, summary { margin: 0; padding: 0; } ul, ol { list-style: none; } summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } :root { /* Grundfarben — dunkel */ --pf-grund: #0d1b2e; --pf-flaeche: #16273d; --pf-flaeche-2: #12203a; --pf-linie: #22364f; --pf-linie-leise: #1c2c47; --pf-umriss: #3a4f6d; --pf-text: #f2f6fb; --pf-text-2: #e4ecf6; --pf-text-leise: #95a9c4; --pf-text-still: #7f93ae; --pf-text-schwach: #64799a; /* Zustände — dunkel */ --pf-korrekt: #2fa36b; --pf-korrekt-flaeche: #12321f; --pf-korrekt-text: #d8f5e4; --pf-fehler: #d1495b; --pf-fehler-flaeche: #4a1b25; --pf-fehler-text: #ffe0e5; --pf-warnung: #e0a33c; --pf-akzent: #4f8fe0; --pf-akzent-flaeche: #1b4ea8; --pf-akzent-text: #0d1b2e; /* Modulpalette, sechs Plätze nach reihenfolge — nie an einen Modulnamen gebunden */ --pf-modul-0: #4fb3a2; --pf-modul-1: #e0a33c; --pf-modul-2: #b98bd9; --pf-modul-3: #d1748f; --pf-modul-4: #6fa8dc; --pf-modul-5: #8fbf6a; /* Radien */ --pf-radius-karte: 21px; --pf-radius-option: 18px; --pf-radius-chip: 9px; --pf-radius-balken: 999px; /* Typografie */ --pf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --pf-font-mono: ui-monospace, Menlo, monospace; --pf-fs-klein: calc(15px * var(--pf-schrift-skala)); --pf-fs-text: calc(17px * var(--pf-schrift-skala)); --pf-fs-gross: calc(19px * var(--pf-schrift-skala)); --pf-fs-frage: calc(23px * var(--pf-schrift-skala)); --pf-fs-titel: calc(32px * var(--pf-schrift-skala)); /* Touchziele — übererfüllt die 44px-Untergrenze aus Abschnitt 3 bewusst */ --pf-touch-option: 56px; --pf-touch-button: 58px; --pf-touch-kasten: 28px; --pf-schatten: 0 18px 44px rgba(13, 27, 46, 0.28); /* Schriftskala: 1 im Grundfall, größer über html.pf-gross (Einstellungen). Alle pf-fs-* Größen rechnen darüber, damit "Große Schrift" jede Stelle in einem Schritt erfasst. */ --pf-schrift-skala: 1; } /* DECISION: Eine Klasse auf statt ein Media Query — "Große Schrift" ist eine bewusste Nutzerentscheidung aus den Einstellungen, keine Geräteeigenschaft. */ html.pf-gross { --pf-schrift-skala: 1.18; } @media (prefers-color-scheme: light) { :root { --pf-grund: #f4f6fa; --pf-flaeche: #ffffff; --pf-flaeche-2: #e6ebf3; --pf-linie: #dde3ec; --pf-linie-leise: #e3e8f0; --pf-umriss: #9aa8bd; --pf-text: #10203a; --pf-text-2: #1b2b45; --pf-text-leise: #41516a; --pf-text-still: #5b6b82; --pf-text-schwach: #9aa8bd; --pf-korrekt: #1f8a5a; --pf-korrekt-flaeche: #e6f6ed; --pf-korrekt-text: #0d3d29; --pf-fehler: #b8323f; --pf-fehler-flaeche: #fdeaec; --pf-fehler-text: #5c1017; --pf-warnung: #c78418; --pf-akzent: #2f6fd8; --pf-akzent-flaeche: #e8f0fd; --pf-akzent-text: #ffffff; --pf-modul-0: #1f8a7a; --pf-modul-1: #c78418; --pf-modul-2: #8a5cc0; --pf-modul-3: #b85a74; --pf-modul-4: #3d74b0; --pf-modul-5: #5f8f3f; --pf-schatten: 0 18px 44px rgba(13, 27, 46, 0.16); } } /* Ein manueller Hell/Dunkel-Schalter ist nicht Teil dieses Sprints (Sprint 6: Einstellungen); die App folgt ausschließlich prefers-color-scheme. */ body { background: var(--pf-grund); color: var(--pf-text); font: var(--pf-fs-text) / 1.5 var(--pf-font); -webkit-text-size-adjust: 100%; } h1, h2, h3 { font-family: var(--pf-font); font-weight: 700; letter-spacing: -0.01em; } /* Zahlen, IDs und Rubrikzeilen: monospace, Großbuchstaben, weite Laufweite. */ .pf-mono { font-family: var(--pf-font-mono); text-transform: uppercase; letter-spacing: 0.13em; font-weight: 600; }