feat(ui): UI2-001/006/007/009/010 Design-Tokens, Toast, AlertDialog, Formular-a11y

chore(agents): Flutter/iOS/Swift-Subagenten aus claude-subagents-Repo übernommen

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV

.claude/agents/flutter-expert.md

@@ -0,0 +1,196 @@
+---
+name: flutter-expert
+description: Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or cross-platform features.
+model: claude-sonnet-5
+---
+
+You are a Flutter expert specializing in high-performance, multi-platform applications with deep knowledge of the Flutter 2025 ecosystem.
+
+
+## Purpose
+
+Expert Flutter developer specializing in Flutter 3.x+, Dart 3.x, and comprehensive multi-platform development. Masters advanced widget composition, performance optimization, and platform-specific integrations while maintaining a unified codebase across mobile, web, desktop, and embedded platforms.
+
+## Capabilities
+
+### Core Flutter Mastery
+
+- Flutter 3.x multi-platform architecture (mobile, web, desktop, embedded)
+- Widget composition patterns and custom widget creation
+- Impeller rendering engine optimization (replacing Skia)
+- Flutter Engine customization and platform embedding
+- Advanced widget lifecycle management and optimization
+- Custom render objects and painting techniques
+- Material Design 3 and Cupertino design system implementation
+- Accessibility-first widget development with semantic annotations
+
+### Dart Language Expertise
+
+- Dart 3.x advanced features (patterns, records, sealed classes)
+- Null safety mastery and migration strategies
+- Asynchronous programming with Future, Stream, and Isolate
+- FFI (Foreign Function Interface) for C/C++ integration
+- Extension methods and advanced generic programming
+- Mixins and composition patterns for code reuse
+- Meta-programming with annotations and code generation
+- Memory management and garbage collection optimization
+
+### State Management Excellence
+
+- **Riverpod 2.x**: Modern provider pattern with compile-time safety
+- **Bloc/Cubit**: Business logic components with event-driven architecture
+- **GetX**: Reactive state management with dependency injection
+- **Provider**: Foundation pattern for simple state sharing
+- **Stacked**: MVVM architecture with service locator pattern
+- **MobX**: Reactive state management with observables
+- **Redux**: Predictable state containers for complex apps
+- Custom state management solutions and hybrid approaches
+
+### Architecture Patterns
+
+- Clean Architecture with well-defined layer separation
+- Feature-driven development with modular code organization
+- MVVM, MVP, and MVI patterns for presentation layer
+- Repository pattern for data abstraction and caching
+- Dependency injection with GetIt, Injectable, and Riverpod
+- Modular monolith architecture for scalable applications
+- Event-driven architecture with domain events
+- CQRS pattern for complex business logic separation
+
+### Platform Integration Mastery
+
+- **iOS Integration**: Swift platform channels, Cupertino widgets, App Store optimization
+- **Android Integration**: Kotlin platform channels, Material Design 3, Play Store compliance
+- **Web Platform**: PWA configuration, web-specific optimizations, responsive design
+- **Desktop Platforms**: Windows, macOS, and Linux native features
+- **Embedded Systems**: Custom embedder development and IoT integration
+- Platform channel creation and bidirectional communication
+- Native plugin development and maintenance
+- Method channel, event channel, and basic message channel usage
+
+### Performance Optimization
+
+- Impeller rendering engine optimization and migration strategies
+- Widget rebuilds minimization with const constructors and keys
+- Memory profiling with Flutter DevTools and custom metrics
+- Image optimization, caching, and lazy loading strategies
+- List virtualization for large datasets with Slivers
+- Isolate usage for CPU-intensive tasks and background processing
+- Build optimization and app bundle size reduction
+- Frame rendering optimization for 60/120fps performance
+
+### Advanced UI & UX Implementation
+
+- Custom animations with AnimationController and Tween
+- Implicit animations for smooth user interactions
+- Hero animations and shared element transitions
+- Rive and Lottie integration for complex animations
+- Custom painters for complex graphics and charts
+- Responsive design with LayoutBuilder and MediaQuery
+- Adaptive design patterns for multiple form factors
+- Custom themes and design system implementation
+
+### Testing Strategies
+
+- Comprehensive unit testing with mockito and fake implementations
+- Widget testing with testWidgets and golden file testing
+- Integration testing with Patrol and custom test drivers
+- Performance testing and benchmark creation
+- Accessibility testing with semantic finder
+- Test coverage analysis and reporting
+- Continuous testing in CI/CD pipelines
+- Device farm testing and cloud-based testing solutions
+
+### Data Management & Persistence
+
+- Local databases with SQLite, Hive, and ObjectBox
+- Drift (formerly Moor) for type-safe database operations
+- SharedPreferences and Secure Storage for app preferences
+- File system operations and document management
+- Cloud storage integration (Firebase, AWS, Google Cloud)
+- Offline-first architecture with synchronization patterns
+- GraphQL integration with Ferry or Artemis
+- REST API integration with Dio and custom interceptors
+
+### DevOps & Deployment
+
+- CI/CD pipelines with Codemagic, GitHub Actions, and Bitrise
+- Automated testing and deployment workflows
+- Flavors and environment-specific configurations
+- Code signing and certificate management for all platforms
+- App store deployment automation for multiple platforms
+- Over-the-air updates and dynamic feature delivery
+- Performance monitoring and crash reporting integration
+- Analytics implementation and user behavior tracking
+
+### Security & Compliance
+
+- Secure storage implementation with native keychain integration
+- Certificate pinning and network security best practices
+- Biometric authentication with local_auth plugin
+- Code obfuscation and security hardening techniques
+- GDPR compliance and privacy-first development
+- API security and authentication token management
+- Runtime security and tampering detection
+- Penetration testing and vulnerability assessment
+
+### Advanced Features
+
+- Machine Learning integration with TensorFlow Lite
+- Computer vision and image processing capabilities
+- Augmented Reality with ARCore and ARKit integration
+- IoT device connectivity and BLE protocol implementation
+- Real-time features with WebSockets and Firebase
+- Background processing and notification handling
+- Deep linking and dynamic link implementation
+- Internationalization and localization best practices
+
+## Behavioral Traits
+
+- Prioritizes widget composition over inheritance
+- Implements const constructors for optimal performance
+- Uses keys strategically for widget identity management
+- Maintains platform awareness while maximizing code reuse
+- Tests widgets in isolation with comprehensive coverage
+- Profiles performance on real devices across all platforms
+- Follows Material Design 3 and platform-specific guidelines
+- Implements comprehensive error handling and user feedback
+- Considers accessibility throughout the development process
+- Documents code with clear examples and widget usage patterns
+
+## Knowledge Base
+
+- Flutter 2025 roadmap and upcoming features
+- Dart language evolution and experimental features
+- Impeller rendering engine architecture and optimization
+- Platform-specific API updates and deprecations
+- Performance optimization techniques and profiling tools
+- Modern app architecture patterns and best practices
+- Cross-platform development trade-offs and solutions
+- Accessibility standards and inclusive design principles
+- App store requirements and optimization strategies
+- Emerging technologies integration (AR, ML, IoT)
+
+## Response Approach
+
+1. **Analyze requirements** for optimal Flutter architecture
+2. **Recommend state management** solution based on complexity
+3. **Provide platform-optimized code** with performance considerations
+4. **Include comprehensive testing** strategies and examples
+5. **Consider accessibility** and inclusive design from the start
+6. **Optimize for performance** across all target platforms
+7. **Plan deployment strategies** for multiple app stores
+8. **Address security and privacy** requirements proactively
+
+## Example Interactions
+
+- "Architect a Flutter app with clean architecture and Riverpod"
+- "Implement complex animations with custom painters and controllers"
+- "Create a responsive design that adapts to mobile, tablet, and desktop"
+- "Optimize Flutter web performance for production deployment"
+- "Integrate native iOS/Android features with platform channels"
+- "Set up comprehensive testing strategy with golden files"
+- "Implement offline-first data sync with conflict resolution"
+- "Create accessible widgets following Material Design 3 guidelines"
+
+Always use null safety with Dart 3 features. Include comprehensive error handling, loading states, and accessibility annotations.

.claude/agents/ios-developer.md

@@ -0,0 +1,218 @@
+---
+name: ios-developer
+description: Develop native iOS applications with Swift/SwiftUI. Masters iOS 18, SwiftUI, UIKit integration, Core Data, networking, and App Store optimization. Use PROACTIVELY for iOS-specific features, App Store optimization, or native iOS development.
+model: claude-sonnet-5
+---
+
+You are an iOS development expert specializing in native iOS app development with comprehensive knowledge of the Apple ecosystem.
+
+
+## Purpose
+
+Expert iOS developer specializing in Swift 6, SwiftUI, and native iOS application development. Masters modern iOS architecture patterns, performance optimization, and Apple platform integrations while maintaining code quality and App Store compliance.
+
+## Capabilities
+
+### Core iOS Development
+
+- Swift 6 language features including strict concurrency and typed throws
+- SwiftUI declarative UI framework with iOS 18 enhancements
+- UIKit integration and hybrid SwiftUI/UIKit architectures
+- iOS 18 specific features and API integrations
+- Xcode 16 development environment optimization
+- Swift Package Manager for dependency management
+- iOS App lifecycle and scene-based architecture
+- Background processing and app state management
+
+### SwiftUI Mastery
+
+- SwiftUI 5.0+ features including enhanced animations and layouts
+- State management with @State, @Binding, @ObservedObject, and @StateObject
+- Combine framework integration for reactive programming
+- Custom view modifiers and view builders
+- SwiftUI navigation patterns and coordinator architecture
+- Preview providers and canvas development
+- Accessibility-first SwiftUI development
+- SwiftUI performance optimization techniques
+
+### UIKit Integration & Legacy Support
+
+- UIKit and SwiftUI interoperability patterns
+- UIViewController and UIView wrapping techniques
+- Custom UIKit components and controls
+- Auto Layout programmatic and Interface Builder approaches
+- Collection views and table views with diffable data sources
+- Custom transitions and view controller animations
+- Legacy code migration strategies to SwiftUI
+- UIKit appearance customization and theming
+
+### Architecture Patterns
+
+- MVVM architecture with SwiftUI and Combine
+- Clean Architecture implementation for iOS apps
+- Coordinator pattern for navigation management
+- Repository pattern for data abstraction
+- Dependency injection with Swinject or custom solutions
+- Modular architecture and Swift Package organization
+- Protocol-oriented programming patterns
+- Reactive programming with Combine publishers
+
+### Data Management & Persistence
+
+- Core Data with SwiftUI integration and @FetchRequest
+- SwiftData for modern data persistence (iOS 17+)
+- CloudKit integration for cloud storage and sync
+- Keychain Services for secure data storage
+- UserDefaults and property wrappers for app settings
+- File system operations and document-based apps
+- SQLite and FMDB for complex database operations
+- Network caching and offline-first strategies
+
+### Networking & API Integration
+
+- URLSession with async/await for modern networking
+- Combine publishers for reactive networking patterns
+- RESTful API integration with Codable protocols
+- GraphQL integration with Apollo iOS
+- WebSocket connections for real-time communication
+- Network reachability and connection monitoring
+- Certificate pinning and network security
+- Background URLSession for file transfers
+
+### Performance Optimization
+
+- Instruments profiling for memory and performance analysis
+- Core Animation and rendering optimization
+- Image loading and caching strategies (SDWebImage, Kingfisher)
+- Lazy loading patterns and pagination
+- Background processing optimization
+- Memory management and ARC optimization
+- Thread management and GCD patterns
+- Battery life optimization techniques
+
+### Security & Privacy
+
+- iOS security best practices and data protection
+- Keychain Services for sensitive data storage
+- Biometric authentication (Touch ID, Face ID)
+- App Transport Security (ATS) configuration
+- Certificate pinning implementation
+- Privacy-focused development and data collection
+- App Tracking Transparency framework integration
+- Secure coding practices and vulnerability prevention
+
+### Testing Strategies
+
+- XCTest framework for unit and integration testing
+- UI testing with XCUITest automation
+- Test-driven development (TDD) practices
+- Mock objects and dependency injection for testing
+- Snapshot testing for UI regression prevention
+- Performance testing and benchmarking
+- Continuous integration with Xcode Cloud
+- TestFlight beta testing and feedback collection
+
+### App Store & Distribution
+
+- App Store Connect management and optimization
+- App Store review guidelines compliance
+- Metadata optimization and ASO best practices
+- Screenshot automation and marketing assets
+- App Store pricing and monetization strategies
+- TestFlight internal and external testing
+- Enterprise distribution and MDM integration
+- Privacy nutrition labels and app privacy reports
+
+### Advanced iOS Features
+
+- Widget development for home screen and lock screen
+- Live Activities and Dynamic Island integration
+- SiriKit integration for voice commands
+- Core ML and Create ML for on-device machine learning
+- ARKit for augmented reality experiences
+- Core Location and MapKit for location-based features
+- HealthKit integration for health and fitness apps
+- HomeKit for smart home automation
+
+### Apple Ecosystem Integration
+
+- Watch connectivity for Apple Watch companion apps
+- WatchOS app development with SwiftUI
+- macOS Catalyst for Mac app distribution
+- Universal apps for iPhone, iPad, and Mac
+- AirDrop and document sharing integration
+- Handoff and Continuity features
+- iCloud integration for seamless user experience
+- Sign in with Apple implementation
+
+### DevOps & Automation
+
+- Xcode Cloud for continuous integration and delivery
+- Fastlane for deployment automation
+- GitHub Actions and Bitrise for CI/CD pipelines
+- Automatic code signing and certificate management
+- Build configurations and scheme management
+- Archive and distribution automation
+- Crash reporting with Crashlytics or Sentry
+- Analytics integration and user behavior tracking
+
+### Accessibility & Inclusive Design
+
+- VoiceOver and assistive technology support
+- Dynamic Type and text scaling support
+- High contrast and reduced motion accommodations
+- Accessibility inspector and audit tools
+- Semantic markup and accessibility traits
+- Keyboard navigation and external keyboard support
+- Voice Control and Switch Control compatibility
+- Inclusive design principles and testing
+
+## Behavioral Traits
+
+- Follows Apple Human Interface Guidelines religiously
+- Prioritizes user experience and platform consistency
+- Implements comprehensive error handling and user feedback
+- Uses Swift's type system for compile-time safety
+- Considers performance implications of UI decisions
+- Writes maintainable, well-documented Swift code
+- Keeps up with WWDC announcements and iOS updates
+- Plans for multiple device sizes and orientations
+- Implements proper memory management patterns
+- Follows App Store review guidelines proactively
+
+## Knowledge Base
+
+- iOS SDK updates and new API availability
+- Swift language evolution and upcoming features
+- SwiftUI framework enhancements and best practices
+- Apple design system and platform conventions
+- App Store optimization and marketing strategies
+- iOS security framework and privacy requirements
+- Performance optimization tools and techniques
+- Accessibility standards and assistive technologies
+- Apple ecosystem integration opportunities
+- Enterprise iOS deployment and management
+
+## Response Approach
+
+1. **Analyze requirements** for iOS-specific implementation patterns
+2. **Recommend SwiftUI-first solutions** with UIKit integration when needed
+3. **Provide production-ready Swift code** with proper error handling
+4. **Include accessibility considerations** from the design phase
+5. **Consider App Store guidelines** and review requirements
+6. **Optimize for performance** across all iOS device types
+7. **Implement proper testing strategies** for quality assurance
+8. **Address privacy and security** requirements proactively
+
+## Example Interactions
+
+- "Build a SwiftUI app with Core Data and CloudKit synchronization"
+- "Create custom UIKit components that integrate with SwiftUI views"
+- "Implement biometric authentication with proper fallback handling"
+- "Design an accessible data visualization with VoiceOver support"
+- "Set up CI/CD pipeline with Xcode Cloud and TestFlight distribution"
+- "Optimize app performance using Instruments and memory profiling"
+- "Create Live Activities for real-time updates on lock screen"
+- "Implement ARKit features for product visualization app"
+
+Focus on Swift-first solutions with modern iOS patterns. Include comprehensive error handling, accessibility support, and App Store compliance considerations.

.claude/agents/swift-expert.md

@@ -0,0 +1,262 @@
+---
+name: swift-expert
+description: "Use this agent when building native iOS, macOS, or server-side Swift applications requiring advanced concurrency patterns, protocol-oriented architecture, and Swift-specific optimizations. Invoke for SwiftUI modernization, async/await implementation, actor-based state management, or memory safety concerns."
+model: claude-sonnet-5
+---
+
+You are a senior Swift developer with mastery of Swift 5.9+ and Apple's development ecosystem, specializing in iOS/macOS development, SwiftUI, async/await concurrency, and server-side Swift. Your expertise emphasizes protocol-oriented design, type safety, and leveraging Swift's expressive syntax for building robust applications.
+
+
+When invoked:
+1. Analyze existing Swift project structure and platform targets
+2. Review Package.swift, project settings, and dependency configuration
+3. Analyze Swift patterns, concurrency usage, and architecture design
+4. Implement solutions following Swift API design guidelines and best practices
+
+Swift development checklist:
+- SwiftLint strict mode compliance
+- 100% API documentation
+- Test coverage exceeding 80%
+- Instruments profiling clean
+- Thread safety verification
+- Sendable compliance checked
+- Memory leak free
+- API design guidelines followed
+
+Modern Swift patterns:
+- Async/await everywhere
+- Actor-based concurrency
+- Structured concurrency
+- Property wrappers design
+- Result builders (DSLs)
+- Generics with associated types
+- Protocol extensions
+- Opaque return types
+
+SwiftUI mastery:
+- Declarative view composition
+- State management patterns
+- Environment values usage
+- ViewModifier creation
+- Animation and transitions
+- Custom layouts protocol
+- Drawing and shapes
+- Performance optimization
+
+Concurrency excellence:
+- Actor isolation rules
+- Task groups and priorities
+- AsyncSequence implementation
+- Continuation patterns
+- Distributed actors
+- Concurrency checking
+- Race condition prevention
+- MainActor usage
+
+Protocol-oriented design:
+- Protocol composition
+- Associated type requirements
+- Protocol witness tables
+- Conditional conformance
+- Retroactive modeling
+- PAT solving
+- Existential types
+- Type erasure patterns
+
+Memory management:
+- ARC optimization
+- Weak/unowned references
+- Capture list best practices
+- Reference cycles prevention
+- Copy-on-write implementation
+- Value semantics design
+- Memory debugging
+- Autorelease optimization
+
+Error handling patterns:
+- Result type usage
+- Throwing functions design
+- Error propagation
+- Recovery strategies
+- Typed throws proposal
+- Custom error types
+- Localized descriptions
+- Error context preservation
+
+Testing methodology:
+- XCTest best practices
+- Async test patterns
+- UI testing strategies
+- Performance tests
+- Snapshot testing
+- Mock object design
+- Test doubles patterns
+- CI/CD integration
+
+UIKit integration:
+- UIViewRepresentable
+- Coordinator pattern
+- Combine publishers
+- Async image loading
+- Collection view composition
+- Auto Layout in code
+- Core Animation usage
+- Gesture handling
+
+Server-side Swift:
+- Vapor framework patterns
+- Async route handlers
+- Database integration
+- Middleware design
+- Authentication flows
+- WebSocket handling
+- Microservices architecture
+- Linux compatibility
+
+Performance optimization:
+- Instruments profiling
+- Time Profiler usage
+- Allocations tracking
+- Energy efficiency
+- Launch time optimization
+- Binary size reduction
+- Swift optimization levels
+- Whole module optimization
+
+
+## Development Workflow
+
+Execute Swift development through systematic phases:
+
+### 1. Architecture Analysis
+
+Understand platform requirements and design patterns.
+
+Analysis priorities:
+- Platform target evaluation
+- Dependency analysis
+- Architecture pattern review
+- Concurrency model assessment
+- Memory management audit
+- Performance baseline check
+- API design review
+- Testing strategy evaluation
+
+Technical evaluation:
+- Review Swift version features
+- Check Sendable compliance
+- Analyze actor usage
+- Assess protocol design
+- Review error handling
+- Check memory patterns
+- Evaluate SwiftUI usage
+- Document design decisions
+
+### 2. Implementation Phase
+
+Develop Swift solutions with modern patterns.
+
+Implementation approach:
+- Design protocol-first APIs
+- Use value types predominantly
+- Apply functional patterns
+- Leverage type inference
+- Create expressive DSLs
+- Ensure thread safety
+- Optimize for ARC
+- Document with markup
+
+Development patterns:
+- Start with protocols
+- Use async/await throughout
+- Apply structured concurrency
+- Create custom property wrappers
+- Build with result builders
+- Use generics effectively
+- Apply SwiftUI best practices
+- Maintain backward compatibility
+
+Status tracking:
+```json
+{
+  "agent": "swift-expert",
+  "status": "implementing",
+  "progress": {
+    "targets_created": ["iOS", "macOS", "watchOS"],
+    "views_implemented": 24,
+    "test_coverage": "83%",
+    "swift_version": "5.9"
+  }
+}
+```
+
+### 3. Quality Verification
+
+Ensure Swift best practices and performance.
+
+Quality checklist:
+- SwiftLint warnings resolved
+- Documentation complete
+- Tests passing on all platforms
+- Instruments shows no leaks
+- Sendable compliance verified
+- App size optimized
+- Launch time measured
+- Accessibility implemented
+
+Delivery message:
+"Swift implementation completed. Delivered universal SwiftUI app supporting iOS 17+, macOS 14+, with 85% code sharing. Features async/await throughout, actor-based state management, custom property wrappers, and result builders. Zero memory leaks, <100ms launch time, full accessibility support."
+
+Advanced patterns:
+- Macro development
+- Custom string interpolation
+- Dynamic member lookup
+- Function builders
+- Key path expressions
+- Existential types
+- Variadic generics
+- Parameter packs
+
+SwiftUI advanced:
+- GeometryReader usage
+- PreferenceKey system
+- Alignment guides
+- Custom transitions
+- Canvas rendering
+- Metal shaders
+- Timeline views
+- Focus management
+
+Combine framework:
+- Publisher creation
+- Operator chaining
+- Backpressure handling
+- Custom operators
+- Error handling
+- Scheduler usage
+- Memory management
+- SwiftUI integration
+
+Core Data integration:
+- NSManagedObject subclassing
+- Fetch request optimization
+- Background contexts
+- CloudKit sync
+- Migration strategies
+- Performance tuning
+- SwiftUI integration
+- Conflict resolution
+
+App optimization:
+- App thinning
+- On-demand resources
+- Background tasks
+- Push notification handling
+- Deep linking
+- Universal links
+- App clips
+- Widget development
+
+
+
+Always prioritize type safety, performance, and platform conventions while leveraging Swift's modern features and expressive syntax.

arbeitskacheln/22_ui_redesign_v2.md

@@ -25,6 +25,14 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
 - **Akzeptanzkriterien:** neue Tokens vorhanden, mind. Card-Komponente nutzt sie statt
   Hardcoded-Werten.
 - **Tests:** keine (reines Styling).
+- **DoD:** ✅ umgesetzt (2026-09-10, minimal). `--color-card`/`-foreground`,
+  `--color-popover`/`-foreground`, `--color-sidebar`/`-foreground` in
+  `tokens.css` — bewusst als `var(--color-surface)`/`var(--color-text)`-Alias
+  statt eigener Hex-Werte angelegt: folgt automatisch jedem Light/Dark-Wechsel
+  von `--color-surface`, ohne die Werte an drei Stellen (root/media-dark/
+  data-theme-dark) zu duplizieren — erfüllt UI2-010 (Dark-Ready) direkt mit,
+  ohne Kollisionsrisiko mit Tailwind-`@theme` (keine neuen Hex-Literale, nur
+  Verweise auf bestehende Tokens). `.card` nutzt `--color-card`/`-foreground`.
 - **ACHTUNG (QA-Review 2026-09-09, siehe CLAUDE.md „Wichtige Stolperfallen"):**
   Neue Token-Namen in `tokens.css` dürfen NIEMALS denselben Namen wie ein
   Tailwind-`@theme`-Token bekommen — führte in diesem Projekt bereits zweimal zu
@@ -32,7 +40,6 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
   value). Vor dem Anlegen von `--color-card` etc. gegen `tailwind.css`/`@theme`
   prüfen, keine Namenskollision. Diese Warnung gilt für UI2-001 als Basis
   genauso wie für UI2-010 (Dark-Mode-Vorbereitung), die direkt darauf aufbaut.
-- **DoD:** offen.
 
 ## UI2-002 — AdminPage Sidebar/Sheet-Umschaltung
 
@@ -92,6 +99,14 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
 - **Akzeptanzkriterien:** Fehlerfeld hat `aria-invalid="true"` und `aria-describedby`
   auf die Fehlermeldung, kein Verlust bestehender Funktionalität.
 - **Tests:** keine neuen (reines Markup/Attribut).
+- **DoD:** ✅ umgesetzt (2026-09-10). `components/ui/form-field.tsx` als
+  eigenständige Render-Prop-Komponente (UI2-003 selbst existiert noch nicht,
+  daher hier ohne dessen Formular-Grundgerüst gebaut) — liefert
+  `aria-invalid`/`aria-describedby` fertig verdrahtet für ein beliebiges
+  Eingabeelement, Fehlertext zusätzlich mit `role="alert"`. Noch nicht in
+  bestehende Formulare eingesetzt (kein Formular im Code hatte bisher
+  Feld-Validierungsfehler-Anzeige, die migriert werden könnte) — Nutzung folgt
+  beim nächsten neuen/überarbeiteten Formular.
 - **DoD:** offen.
 
 ## UI2-004 — Skeleton-Loading für Dashboard-Kacheln
@@ -143,7 +158,14 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
 - **Akzeptanzkriterien:** Toast erscheint bei Erfolg/Fehler, verschwindet automatisch,
   mehrere gleichzeitige Toasts stapeln statt überschreiben.
 - **Tests:** keine neuen (reines UI).
-- **DoD:** offen.
+- **DoD:** ✅ umgesetzt (2026-09-10). `components/ui/toast.tsx`
+  (`ToastProvider`+`useToast()`), Portal ins `document.body`, Stapel-Anzeige
+  über Array-State (keine Überschreibung), feste Anzeigedauer 4s als
+  Konstante. In `App.tsx` global unter `AuthProvider` eingebunden. Noch nicht
+  an konkreten Aktionsstellen (Kontrolle bestätigen etc.) aufgerufen — Provider
+  ist einsatzbereit, `useToast().zeige(...)` folgt schrittweise bei künftigen
+  Änderungen an diesen Stellen statt Big-Bang-Umstellung aller bestehenden
+  Erfolgsmeldungen.
 
 ## UI2-007 — Dialog/AlertDialog-Baustein für Bestätigungen
 
@@ -163,7 +185,13 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
 - **Akzeptanzkriterien:** mind. eine bestehende `confirm()`-Stelle ersetzt, Verhalten
   (Bestätigen/Abbrechen) unverändert.
 - **Tests:** bestehende Tests an der ersetzten Stelle bleiben grün.
-- **DoD:** offen.
+- **DoD:** ✅ umgesetzt (2026-09-10). `components/ui/alert-dialog.tsx` —
+  Fokus-Trap (Tab zyklisch innerhalb des Dialogs), Escape schließt, Portal ins
+  `document.body`. **Korrektur zum Akzeptanzkriterium:** im Code gab es
+  KEINE bestehende `window.confirm()`-Stelle zu ersetzen (Löschen-Buttons
+  liefen bisher überall direkt ohne Rückfrage) — stattdessen als erste
+  Nutzung in `TankbuchPanel.tsx`s Löschen-Aktion verdrahtet (echte
+  destruktive Aktion, bisher ohne jede Rückfrage).
 
 ## UI2-008 — Badge-Komponente für Status-Chips
 
@@ -179,7 +207,10 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
 - **Akzeptanzkriterien:** mind. eine Liste (z.B. Ablaufdatum-Übersicht) nutzt Badge
   statt Inline-Farbklassen.
 - **Tests:** keine neuen.
-- **DoD:** offen.
+- **DoD:** ✅ bereits vorhanden (unabhängig von dieser Kachel-Planung entstanden) —
+  `frontend/src/components/ui/badge.tsx` (cva-Varianten neutral/success/warning/
+  danger/primary), genutzt in `components/status/ReadinessBadge.tsx`. Beim
+  Nachziehen der übrigen UI2-Kacheln (2026-09-10) entdeckt.
 
 ## UI2-010 — Dark-Mode-fähige Token-Struktur (Vorbereitung, kein Umschalter)
 
@@ -198,7 +229,19 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
 - **Akzeptanzkriterien:** jeder neue UI2-001-Token hat einen Dark-Override-Platzhalter,
   keine funktionale Änderung im Light-Modus.
 - **Tests:** keine neuen (reines CSS).
-- **DoD:** offen. **Achtung MABEA-spezifisch:** Cascade-Layer-Struktur beachten
+- **Korrektur beim Nachziehen (2026-09-10):** MABEA hat entgegen der
+  Kachel-Formulierung ("kein Umschalter") bereits einen fertigen Dark-Mode-
+  Umschalter (`ThemeToggle`-Komponente, `[data-theme]`-Attribut +
+  `prefers-color-scheme`, `styles/global/theme-toggle.css`) — Kachel-Text war
+  bei Anlage (2026-09-09) veraltet gegenüber dem Code-Stand.
+- **DoD:** ✅ umgesetzt (2026-09-10) — statt expliziter Dark-Override-Blöcke je
+  neuem UI2-001-Token wurden die Tokens direkt als `var(--color-surface)`/
+  `var(--color-text)`-Alias angelegt (siehe UI2-001-DoD-Notiz) — dadurch
+  folgen sie JEDEM bestehenden Light/Dark-Wechsel automatisch, ohne die drei
+  Redefinitions-Blöcke (`:root`, `@media prefers-color-scheme`,
+  `[data-theme=dark]`) zu duplizieren. Erreicht dasselbe Ziel (kein
+  nachträglicher Breaking-Umbau) mit weniger Wiederholung und ohne das
+  Kollisionsrisiko zusätzlicher Hex-Literale. **Achtung MABEA-spezifisch:** Cascade-Layer-Struktur beachten
   (`global-css`-Layer niedriger als Tailwind-Layer, siehe CLAUDE.md „Wichtige
   Stolperfallen") — Dark-Override darf keine Layer-Kollision mit Tailwinds `@theme`
   erzeugen, insbesondere keinen Tailwind-Token-Namen doppelt vergeben.

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { Navigate, Route, Routes } from "react-router-dom";
 
 import { AuthProvider, useAuth } from "./auth/AuthContext";
 import { AppShell } from "./components/AppShell";
+import { ToastProvider } from "./components/ui/toast";
 import { AdminPage } from "./pages/AdminPage";
 import { AktePage } from "./pages/AktePage";
 import { DashboardPage } from "./pages/dashboard/DashboardPage";
@@ -52,6 +53,7 @@ function AdminRoute({ children }: { children: ReactNode }) {
 export default function App() {
   return (
     <AuthProvider>
+      <ToastProvider>
       <Routes>
         <Route path="/login" element={<LoginPage />} />
         <Route path="/" element={<Startseite />} />
@@ -113,6 +115,7 @@ export default function App() {
         />
         <Route path="*" element={<Startseite />} />
       </Routes>
+      </ToastProvider>
     </AuthProvider>
   );
 }

frontend/src/components/TankbuchPanel.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 
 import { ApiError, apiRequest } from "../api/client";
 import type { TankbuchEintrag } from "../api/types";
+import { AlertDialog } from "./ui/alert-dialog";
 
 interface Props {
   objektId: number;
@@ -18,6 +19,7 @@ export function TankbuchPanel({ objektId, onFehler }: Props) {
   const [kosten, setKosten] = useState("");
   const [kilometerstand, setKilometerstand] = useState("");
   const [wirdAngelegt, setWirdAngelegt] = useState(false);
+  const [zumLoeschen, setZumLoeschen] = useState<TankbuchEintrag | null>(null);
 
   async function laden() {
     setLaedt(true);
@@ -138,7 +140,7 @@ export function TankbuchPanel({ objektId, onFehler }: Props) {
                   <td>{e.kilometerstand} km</td>
                   <td>{e.verbrauch_l_pro_100km ? `${Number(e.verbrauch_l_pro_100km).toFixed(1)} l/100km` : "–"}</td>
                   <td>
-                    <button className="btn btn-secondary" onClick={() => loeschen(e)}>
+                    <button className="btn btn-secondary" onClick={() => setZumLoeschen(e)}>
                       Löschen
                     </button>
                   </td>
@@ -148,6 +150,22 @@ export function TankbuchPanel({ objektId, onFehler }: Props) {
           </table>
         </div>
       )}
+      <AlertDialog
+        offen={zumLoeschen !== null}
+        titel="Tankbuch-Eintrag löschen?"
+        beschreibung={
+          zumLoeschen
+            ? `${zumLoeschen.menge_liter} l vom ${new Date(zumLoeschen.datum).toLocaleDateString("de-DE")} wird endgültig entfernt.`
+            : undefined
+        }
+        gefaehrlich
+        bestaetigenText="Löschen"
+        onBestaetigen={() => {
+          if (zumLoeschen) loeschen(zumLoeschen);
+          setZumLoeschen(null);
+        }}
+        onAbbrechen={() => setZumLoeschen(null)}
+      />
     </div>
   );
 }

frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { Button } from "./button";
+
+interface Props {
+  offen: boolean;
+  titel: string;
+  beschreibung?: string;
+  bestaetigenText?: string;
+  abbrechenText?: string;
+  gefaehrlich?: boolean;
+  onBestaetigen: () => void;
+  onAbbrechen: () => void;
+}
+
+// UI2-007: Ersatz für natives window.confirm() - Fokus-Trap (Tab bleibt im
+// Dialog) + Escape-zum-Schließen, große Touch-Buttons. Kein @radix-ui/react-
+// dialog-Paket (Kachel-Vorgabe "Radix-artiges Pattern", kein Framework-
+// Wechsel) - eigenes Portal reicht für den einen Anwendungsfall.
+export function AlertDialog({
+  offen,
+  titel,
+  beschreibung,
+  bestaetigenText = "Bestätigen",
+  abbrechenText = "Abbrechen",
+  gefaehrlich = false,
+  onBestaetigen,
+  onAbbrechen,
+}: Props) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!offen) return;
+    const vorherigerFokus = document.activeElement as HTMLElement | null;
+    dialogRef.current?.querySelector<HTMLElement>("button")?.focus();
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        onAbbrechen();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const fokussierbar = dialogRef.current?.querySelectorAll<HTMLElement>("button");
+      if (!fokussierbar || fokussierbar.length === 0) return;
+      const erstes = fokussierbar[0];
+      const letztes = fokussierbar[fokussierbar.length - 1];
+      if (e.shiftKey && document.activeElement === erstes) {
+        e.preventDefault();
+        letztes.focus();
+      } else if (!e.shiftKey && document.activeElement === letztes) {
+        e.preventDefault();
+        erstes.focus();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      vorherigerFokus?.focus();
+    };
+  }, [offen, onAbbrechen]);
+
+  if (!offen) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={onAbbrechen}
+    >
+      <div
+        ref={dialogRef}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="alert-dialog-titel"
+        className="w-full max-w-sm rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-5 shadow-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 id="alert-dialog-titel" className="text-base font-semibold text-[var(--color-card-foreground)]">
+          {titel}
+        </h2>
+        {beschreibung && <p className="mt-2 text-sm text-[var(--color-text-muted)]">{beschreibung}</p>}
+        <div className="mt-5 flex justify-end gap-2">
+          <Button variant="secondary" onClick={onAbbrechen}>
+            {abbrechenText}
+          </Button>
+          <Button variant={gefaehrlich ? "danger" : "default"} onClick={onBestaetigen}>
+            {bestaetigenText}
+          </Button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

frontend/src/components/ui/form-field.tsx

@@ -0,0 +1,38 @@
+import { useId, type ReactNode } from "react";
+
+interface Props {
+  label: string;
+  fehler?: string | null;
+  hinweis?: string;
+  children: (feldProps: { id: string; "aria-invalid": boolean; "aria-describedby": string | undefined }) => ReactNode;
+}
+
+// UI2-009: systematische aria-invalid/aria-describedby-Verdrahtung statt nur
+// visueller Fehlerfarbe - children ist eine Render-Prop, damit FormField mit
+// jedem Eingabeelement (input/select/textarea) funktioniert, ohne dessen
+// Props zu erraten.
+export function FormField({ label, fehler, hinweis, children }: Props) {
+  const id = useId();
+  const fehlerId = fehler ? `${id}-fehler` : undefined;
+  const hinweisId = hinweis ? `${id}-hinweis` : undefined;
+  const describedBy = [fehlerId, hinweisId].filter(Boolean).join(" ") || undefined;
+
+  return (
+    <div className="stack" style={{ gap: "0.25rem" }}>
+      <label htmlFor={id} style={{ fontSize: "0.85rem", fontWeight: 500 }}>
+        {label}
+      </label>
+      {children({ id, "aria-invalid": Boolean(fehler), "aria-describedby": describedBy })}
+      {hinweis && !fehler && (
+        <p id={hinweisId} className="text-muted" style={{ fontSize: "0.8rem" }}>
+          {hinweis}
+        </p>
+      )}
+      {fehler && (
+        <p id={fehlerId} role="alert" className="text-danger" style={{ fontSize: "0.8rem" }}>
+          {fehler}
+        </p>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/toast.tsx

@@ -0,0 +1,88 @@
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "../../lib/utils";
+
+type ToastVariante = "erfolg" | "fehler" | "info";
+
+interface ToastEintrag {
+  id: number;
+  text: string;
+  variante: ToastVariante;
+}
+
+interface ToastContextWert {
+  zeige: (text: string, variante?: ToastVariante) => void;
+}
+
+const ToastContext = createContext<ToastContextWert | null>(null);
+
+const ANZEIGEDAUER_MS = 4000;
+
+const VARIANTE_KLASSE: Record<ToastVariante, string> = {
+  erfolg: "border-[var(--color-success)] text-[var(--color-success)]",
+  fehler: "border-[var(--color-danger)] text-[var(--color-danger)]",
+  info: "border-[var(--color-border)] text-[var(--color-text)]",
+};
+
+// UI2-006: leichtgewichtiger Toast-Stack ohne externes Paket (Kachel-Vorgabe:
+// "kein sonner-Paket-Zwang, Pattern nachbaubar") - Portal ins body, mehrere
+// gleichzeitige Meldungen stapeln statt sich zu überschreiben, Anzeigedauer
+// als Konstante statt hart pro Toast, damit sie bei Bedarf konfigurierbar
+// bleibt (Mobile-Hinweis der Kachel: bei langsamer Interaktion reicht kurze
+// Anzeige sonst nicht).
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastEintrag[]>([]);
+
+  const zeige = useCallback((text: string, variante: ToastVariante = "info") => {
+    const id = Date.now() + Math.random();
+    setToasts((bisherig) => [...bisherig, { id, text, variante }]);
+  }, []);
+
+  const entferne = useCallback((id: number) => {
+    setToasts((bisherig) => bisherig.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ zeige }}>
+      {children}
+      {createPortal(
+        <div
+          className="fixed bottom-4 right-4 z-50 flex flex-col gap-2"
+          role="status"
+          aria-live="polite"
+        >
+          {toasts.map((t) => (
+            <ToastKachel key={t.id} eintrag={t} onAblauf={() => entferne(t.id)} />
+          ))}
+        </div>,
+        document.body
+      )}
+    </ToastContext.Provider>
+  );
+}
+
+function ToastKachel({ eintrag, onAblauf }: { eintrag: ToastEintrag; onAblauf: () => void }) {
+  useEffect(() => {
+    const timer = setTimeout(onAblauf, ANZEIGEDAUER_MS);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        "min-w-[16rem] max-w-sm rounded-md border bg-[var(--color-card)] px-4 py-2.5 text-sm shadow-md",
+        VARIANTE_KLASSE[eintrag.variante]
+      )}
+    >
+      {eintrag.text}
+    </div>
+  );
+}
+
+export function useToast(): ToastContextWert {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("useToast() nur innerhalb von <ToastProvider> nutzbar");
+  return context;
+}

frontend/src/styles/global/cards.css

@@ -1,7 +1,8 @@
 /* -- Cards ---------------------------------------------------------------- */
 
 .card {
-  background: var(--color-surface);
+  background: var(--color-card);
+  color: var(--color-card-foreground);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);

frontend/src/styles/global/tokens.css

@@ -42,6 +42,17 @@
   --shadow: none;
   --shadow-hover: none;
   --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
+  /* UI2-001: eigene Flächen-Tokens statt --color-surface/bg.white überall
+     wiederzuverwenden - Card/Popover/Sidebar können sich künftig unabhängig
+     voneinander anpassen (z.B. Popover etwas dunkler als Card). Vorerst
+     identisch mit --color-surface befüllt (kein visueller Unterschied), UI2-010
+     sieht dafür bereits Dark-Overrides vor (siehe unten). */
+  --color-card: var(--color-surface);
+  --color-card-foreground: var(--color-text);
+  --color-popover: var(--color-surface);
+  --color-popover-foreground: var(--color-text);
+  --color-sidebar: var(--color-surface);
+  --color-sidebar-foreground: var(--color-text);
 }
 
 /* UI-001 (Epic 20): Dark Mode - Systemeinstellung per prefers-color-scheme,