Decks fühlen sich jetzt wie echte Karten an, statt flacher Boxen.
Eine zentrale CardSurface-Komponente trägt die Karten-Optik
(Border, Radius 0.875rem, Shadow, Color-Stripe links) — drei
Sizes (md/lg/hero), drei Konsumenten, ein visuelles Familien-Set.
Komponenten:
- CardSurface.svelte Foundation für jede Card-Erscheinung in Cards
- DeckStack.svelte 5:7-Stapel mit 3 deterministisch tilted
Hintergrund-Layern (cyrb53-Hash der Deck-ID,
reproduzierbar pro Mount), Color-Stripe-Akzent,
Title/Description/Card-Count/Due-Badge
- DeckGrid.svelte Auto-fill responsive Grid; selectedId-Prop
triggert Stufe-1-Animation (others fade-out,
selected scale-up)
- DeckFan.svelte Auffächer-Detail-View (Hand of Cards) mit
Top-7-Karten als Spread, Mount-Animation
gestapelt → fanned via doppeltem rAF +
cubic-bezier-Transition
- utils/deck-tilt.ts cyrb53 + stackLayers für Pseudo-Random-Tilts
Routing-Wechsel: Klick auf Deck-Stack → 220ms Stufe-1-Fade →
goto('/study/<id>') direkt in den Lernmodus. Detail-View
(/decks/<id>) bleibt erreichbar über "Karten verwalten →"-Link
in der Study-Sidebar.
Lernmodus visuell als Karte:
- Globale Header (Logo + Nav + Sprach-Switcher) im Lernmodus
ausgeblendet (routes/+layout.svelte detektiert /study/<deckId>
per Regex), volle Konzentration auf die Karte
- Lern-Karte ist CardSurface size="hero" mit aspect-ratio 5:7
(Portrait, gleiches Verhältnis wie Deck-Stacks und Fan-Karten)
- Color-Stripe links zeigt die Deck-Farbe — visuelle Bindung an
Herkunft
- Sidebar oben links absolute-positioniert: ← Decks, Deck-Name,
Fortschritt, Karten verwalten → — kompakter UI-Block, der die
Karten-Zentrierung NICHT beeinflusst (Karte bleibt geometrisch
Bildschirm-Mitte)
- Reveal-Button + 4er-Grade-Grid (Wieder/Schwer/Gut/Leicht) als
Aktions-Leiste UNTER der Karte — keine weiteren Karten, ein
Review = eine Karte
Mobile (≤720px): Sidebar wird zur horizontalen Zeile oben, Karte
rückt darunter durch padding-top: 6.5rem.
Reduced-motion durchgängig respektiert (keine Tilts, keine Hover-
Lifts, keine Fan-Spread-Animation, kein Card-Transition).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Globaler :focus-visible-Outline (var(--color-primary), 2px) — Tailwind 4
strippt die Browser-Defaults, ohne Fokus-Ring sind Tastatur-Nutzer blind.
.sr-only-Utility (Standard-Rezept) und .skip-link in app.css. prefers-
reduced-motion: schaltet alle Transitions/Animationen auf 0.01ms.
Layout: Skip-Link "Zum Inhalt springen" → #main, main bekommt tabindex="-1"
und id, html-lang wird via $effect reaktiv mit i18n.current synchronisiert
(Initial-SSR rendert "de", Browser zieht nach).
Header: nav-aria-label aus i18n (common.main_nav), Locale-Switcher-Label
aus common.language_switcher. ToastStack: role=region + aria-live=polite,
einzelne Toasts role=alert (error) bzw. status (success/warning), Schließen-
Button-Label i18n-konform.
Hover-only Delete-Buttons (Decks-Liste, Deck-Detail-Karten) bekommen
focus-visible:opacity-100 — bisher waren sie für Tastatur-Nutzer
unsichtbar. opacity-0 statt hidden, damit Tab-Order intakt bleibt.
svelte-check 379 files 0 errors, prod-Build sauber.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
