/* ============================================================================= Design-Grundlagen — Familien-Board (T-14) Vier Entscheidungen, aus denen alles Weitere folgt: eine Typo-Skala, ein Raster, eine Palette, ein Bewegungsmodell. Dazu Trefferflächen für Kinderhände. Reine CSS Custom Properties, kein Framework. Diese Datei legt NUR die Grundlage. Die Flächen (Board, Modals, Auth) werden in eigenen Tickets darauf umgestellt. Wo ein bestehender Wert nicht auf die Skala passt, steht in style.css ein TODO-token-Kommentar. Kontext: Wandtablet im Flur. Gegenlicht am Vormittag, Halbdunkel am Abend, Kinderfinger, Blickabstand zwischen 0,5 m (Antippen) und 2 m (Vorbeigehen). Begründungen siehe DESIGN-TOKENS.md. ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. TYPO — eine Skala, Verhältnis 1.25 (große Terz) Alle Stufen aus Basis × 1.25^n abgeleitet, nicht einzeln geraten. Basis = 1rem = 16px (Browser-Default, damit Nutzer-Zoom greift). Lesbarkeit auf Distanz ist gestuft, nicht pauschal: aus 2 m ist auf einem 10"-Tablet nur die Glance-Ebene lesbar (Uhr, Name, erledigt ja/nein) — die braucht --text-3xl aufwärts. Aufgabentexte werden im Antipp-Abstand (~0,5 m) gelesen und liegen ab --text-lg richtig. Aufgabentitel stehen heute auf 1.03rem, also eine Stufe zu tief. --------------------------------------------------------------------------- */ --text-2xs: 0.64rem; /* 10.24px 1.25^-2 nur Versalien-Label, nie Fließtext */ --text-xs: 0.8rem; /* 12.8px 1.25^-1 Meta, Wochentagskürzel */ --text-base: 1rem; /* 16px 1.25^0 Basis, Fließtext */ --text-lg: 1.25rem; /* 20px 1.25^1 Aufgabentitel, Personennamen */ --text-xl: 1.5625rem; /* 25px 1.25^2 Überschriften */ --text-2xl: 1.9531rem; /* 31.25px 1.25^3 Glance-Ebene ab hier */ --text-3xl: 2.4414rem; /* 39.06px 1.25^4 Uhr */ --text-4xl: 3.0518rem; /* 48.83px 1.25^5 Reserve */ --font-family-base: "Inter", "Avenir Next", "Segoe UI", -apple-system, system-ui, sans-serif; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-bold: 700; --font-weight-black: 800; --leading-tight: 1.2; /* Überschriften, Uhr */ --leading-normal: 1.45; /* Fließtext */ /* Zahlen und Namen: tabellarische Ziffern, damit beim 20-Sekunden-Refresh nichts springt (Uhr, Streak-Zähler, Fortschritt). Gilt für jede Stelle, die sich ohne Zutun des Nutzers neu schreibt. */ --font-numeric: tabular-nums; /* --------------------------------------------------------------------------- 2. RASTER — eine Grundeinheit, 4px Jeder Abstand ist ein Vielfaches von 4px. Keine Zwischenwerte. 4px statt 8px, weil das Board bereits dicht steht und 8px als kleinste Einheit die vorhandenen Kartenabstände nicht abbilden könnte. --------------------------------------------------------------------------- */ --space-unit: 4px; --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-16: 64px; /* Radien — ebenfalls auf dem Raster */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 28px; --radius-pill: 999px; --radius-circle: 50%; /* --------------------------------------------------------------------------- 3. PALETTE — zwei Lichtsituationen, semantisch benannt Kontraste gegen die dunkelste helle Fläche gerechnet (--color-surface-sunken #f1f3fa); auf Karte und Weiß liegen sie entsprechend höher. WCAG AA (4.5:1 Text, 3:1 Bedienelement-Grenze) ist die Untergrenze, nicht das Ziel. Angegeben ist jeweils: Weiß / Karte / Seite. Farbe trägt nie allein eine Information — zu jeder Zustandsfarbe gehört ein nicht-farbiger Träger, siehe Block 3b. --------------------------------------------------------------------------- */ /* Flächen — Weiß auf einem sehr leicht blaustichigen Grund. Der Verlauf im Hintergrund ist weg: ruhige Flächen lassen die Personenfarben wirken, statt mit ihnen zu konkurrieren. */ --color-surface: #ffffff; /* Karte, Modal, Seitenleiste */ --color-surface-raised: #f7f8fb; /* Aufgabenkarte auf der Spalte */ --color-surface-sunken: #f2f4f9; /* Seitenhintergrund */ --color-surface-warm: #f8f3ea; /* warme Auszeichnungsfläche */ /* Text */ --color-text: #1a1b1f; /* 16.3 auf Weiß AAA */ --color-text-muted: #61656e; /* 5.9 / 5.6 / 5.4 AA */ --color-text-on-fill: #ffffff; /* Ränder — haarfein statt sichtbar. Eine Grenze soll die Karte begrenzen, nicht sie einrahmen; Tiefe kommt aus dem Schatten. */ --color-border: rgba(26, 27, 31, 0.08); --color-border-strong: rgba(26, 27, 31, 0.22); /* Eingabefelder, Bedienelement-Grenzen */ /* Akzent — EIN Blau statt eines Verlaufs. Es trägt die Bedienoberfläche (Navigation, Knöpfe, Auswahl) und hält sich farblich aus dem Weg der Personenfarben heraus, die violett bis rot laufen. */ --color-accent: #1858c8; /* 6.6 auf Weiß AA als Text und Fläche */ --color-accent-ink: #14479f; /* 9.0 – für Text auf hellem Akzentgrund */ --color-accent-soft: #e8f0fd; /* Auswahlfläche */ --color-accent-line: rgba(24, 88, 200, 0.24); --color-accent-alt: #0f7ea8; /* zweite Akzentfarbe, sparsam */ /* Zustand: Erfolg */ --color-success: #10b981; --color-success-fill: #0c875e; /* weiße Glyphe darauf: 4.52 AA */ --color-success-ink: #0b7d57; /* 5.14 AA als Text */ --color-success-soft: #eefaf4; --color-success-line: #cbeadb; /* Zustand: Warnung / Auszeichnung (alles erledigt, Streak) */ --color-warning: #e5941b; --color-warning-ink: #8a5a09; /* 5.6 AA als Text */ --color-warning-soft: #fdf4e4; --color-warning-line: #f0dcb4; /* Zustand: Fehler / Zerstörend */ --color-danger: #d92d20; --color-danger-ink: #b42318; /* 6.0 AA */ --color-danger-soft: #fdeceb; --color-danger-line: #f4c5c1; /* Schatten — gestaffelt statt einer weichen Wolke: eine feine Kontur plus ein weiter, sehr schwacher Schlagschatten. Das trägt auf einem Wandtablet im Gegenlicht besser als ein einzelner großer Schatten. */ --shadow-sm: 0 1px 2px rgba(20, 25, 45, 0.05); --shadow-card: 0 1px 2px rgba(20, 25, 45, 0.05), 0 8px 24px rgba(20, 25, 45, 0.06); --shadow-lift: 0 2px 4px rgba(20, 25, 45, 0.06), 0 16px 40px rgba(20, 25, 45, 0.10); --shadow-modal: 0 32px 80px rgba(16, 21, 40, 0.28); /* --------------------------------------------------------------------------- 3b. NICHT-FARBIGE TRÄGER Zu jeder Zustandsfarbe gehört ein Symbol, damit Rot/Grün-Blinde und Blicke ins Gegenlicht dieselbe Information bekommen. Verwendung: .foo::before { content: var(--symbol-success); } Regel: Zustand = Farbe + Symbol + Text. Zwei von dreien reichen, Farbe allein nie. --------------------------------------------------------------------------- */ --symbol-success: "✓"; --symbol-warning: "★"; --symbol-danger: "×"; --symbol-paused: "‖"; --symbol-open: "○"; /* --------------------------------------------------------------------------- 4. BEWEGUNG — Dauer, Kurve, Richtung Kurz = direkte Quittung auf eine Berührung (Skalieren beim Antippen). Mittel = Zustandswechsel im Blickfeld (Farbe, Rand, Deckkraft). Lang = etwas kommt oder geht (Fortschritt, Banner, Modal). Richtung: Eintretendes steigt um --motion-distance auf und blendet ein, Austretendes sinkt darum ab. Nie seitwärts, außer als Fehler-Rückmeldung (PIN-Shake). Bewegung folgt der Ursache — was der Finger anfasst, bewegt sich dorthin, wo der Finger war. --------------------------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 400ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* raus, abbremsend */ --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1); /* mit Überschwingen */ --ease-default: ease; /* Bestand */ --motion-distance: 8px; /* 2 × Grundeinheit */ /* --------------------------------------------------------------------------- 5. TREFFERFLÄCHEN — Kinderhände Ein Kinderzeigefinger trifft ungenauer als ein Mauszeiger und steht dabei schräg zum Bildschirm. --tap-min ist die Untergrenze (WCAG 2.5.5), --tap-child die Zielgröße für alles, was Kinder regelmäßig antippen. --tap-gap-distinct gilt zwischen Elementen, die VERSCHIEDENES tun (z.B. Bearbeiten neben Löschen). Gleichartige Nachbarn — Ziffern eines Nummernfelds, Wochentage — dürfen auf --tap-gap zusammenrücken. --------------------------------------------------------------------------- */ --tap-min: 44px; /* Untergrenze, WCAG 2.5.5 */ --tap-child: 64px; /* Zielgröße Kinderhand */ --tap-gap: 8px; /* gleichartige Nachbarn */ --tap-gap-distinct: 16px; /* Nachbarn mit verschiedener Wirkung */ } /* ----------------------------------------------------------------------------- Bewegung abschalten, wenn das System danach fragt. Setzt die Tokens auf 0 und überschreibt zusätzlich alles, was noch mit festen Werten arbeitet — solange die Flächen nicht umgestellt sind, ist der Holzhammer hier der ehrlichere Weg. Hinweis: Das Konfetti wird per Canvas in app.js gezeichnet und ist von CSS nicht erreichbar. Es respektiert prefers-reduced-motion derzeit NICHT — das gehört in ein eigenes Ticket (Bedienlogik). ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0s; --duration-base: 0s; --duration-slow: 0s; --motion-distance: 0px; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }