{
  "locals": {
    "t": {
      "meta": {
        "title": "HTML-Grundlagen: Webentwicklung mit nativen Browser-Features",
        "description": "Lerne native HTML-Capabilities und Progressive Enhancement Patterns. Diese Anleitung zeigt, wie eingebaute Browser-Features Komplexität reduzieren, Performance verbessern und wartbareren Code schaffen."
      },
      "hero": {
        "title": "🚀 HTML-Grundlagen",
        "subtitle": "Lerne native HTML-Capabilities und Progressive Enhancement Patterns. Diese Anleitung zeigt, wie eingebaute Browser-Features Komplexität reduzieren, Performance verbessern und wartbareren Code schaffen."
      },
      "sections": {
        "disclosure": {
          "title": "🎯 Aufklappbare Bereiche (Details/Summary)",
          "js_title": "JavaScript-Implementierung",
          "js_badge": "KOMPLEX",
          "js_warning": "Aufwand: Manuelle ARIA-Verwaltung, Tastatur-Events, Fokus-Management und Screen Reader Kompatibilität erforderlich.",
          "js_content1": "Custom Aufklapp-Implementierungen erfordern umfassendes Event-Handling, State-Synchronisation zwischen Komponenten und sorgfältige Beachtung von Accessibility-Anforderungen inklusive ARIA-Attributen und Tastatur-Navigation.",
          "js_content2": "State-Management über mehrere aufklappbare Bereiche führt zu Komplexität in Event-Koordination, Memory-Management und Performance-Optimierung, besonders bei dynamischem Content-Loading.",
          "js_cons_title": "❌ Architektur-Komplexität:",
          "js_cons": [
            "Event-Delegation und Memory-Leak-Prävention",
            "ARIA State-Synchronisation und Keyboard-Trap-Management",
            "Cross-Browser-Kompatibilität und Polyfill-Anforderungen"
          ],
          "native_title": "Native Details/Summary Elemente",
          "native_badge": "ZERO-JS",
          "native_note": "Plattform-Integration: Eingebaute ARIA-Semantik, Tastatur-Navigation, Screen Reader Support und browser-optimierte Animationen.",
          "native_semantic_title": "Semantische HTML-Architektur",
          "native_semantic_content": "Das HTML5 details/summary Pattern bietet deklarative Progressive Disclosure ohne JavaScript-Dependencies. Browser-Engines handhaben State-Management, Accessibility und User-Interaction nach Plattform-Konventionen.",
          "native_enhancement_title": "Progressive Enhancement Vorteile",
          "native_enhancement_content": "Start mit funktionalem HTML sorgt für graceful degradation in allen Umgebungen. CSS und JavaScript werden zu Enhancement-Layern statt funktionalen Anforderungen - verbessert Zuverlässigkeit und reduziert Technical Debt.",
          "native_performance_title": "Performance-Charakteristika",
          "native_performance_content": "Native Elemente eliminieren Bundle-Size-Overhead, reduzieren Runtime-Memory-Consumption und nutzen Browser-Optimierungen, die Custom Implementations nicht verfügbar sind. Hardware-Acceleration und effizientes Event-Handling sind eingebaut.",
          "native_pros_title": "✅ Plattform-Vorteile:",
          "native_pros": [
            "Zero JavaScript Footprint mit voller Accessibility-Compliance",
            "Browser-native Performance-Optimierungen und Hardware-Acceleration",
            "Konsistentes Cross-Platform-Verhalten ohne Maintenance-Overhead"
          ]
        },
        "modals": {
          "title": "🪟 Modal Dialog Patterns",
          "js_title": "Custom Modal Implementierung",
          "js_badge": "BRÜCHIG",
          "js_warning": "Kritische Anforderungen: Focus-Trapping, inerte Hintergrund-Inhalte, ESC-Key-Handling, Backdrop-Click-Management und ARIA Modal-Semantik.",
          "js_button": "Custom Modal starten",
          "js_modal_title": "Custom Modal Architektur",
          "js_modal_content": "Dieser Ansatz erfordert Modal-Stack-Management, Verhinderung von Hintergrund-Interaktion, Koordination von Focus-Management und ordnungsgemäßes Cleanup zur Vermeidung von Memory-Leaks und Accessibility-Verletzungen.",
          "js_modal_issue": "Kritisches Problem: Hintergrund-Content bleibt für Screen Reader und Tastatur-Navigation ohne explizites Inert-Management zugänglich.",
          "js_modal_close": "Modal schließen",
          "js_cons_title": "❌ Implementierungs-Herausforderungen:",
          "js_cons": [
            "Focus-Trap-Implementierung und Wiederherstellungs-Komplexität",
            "Modal-Stack-Management und Z-Index-Koordination",
            "Event-Cleanup und Memory-Leak-Prävention"
          ],
          "native_title": "Native Dialog Element",
          "native_badge": "ROBUST",
          "native_note": "Eingebaute Capabilities: Automatisches Focus-Trapping, Inert-Background-Management, ESC-Key-Support und ordnungsgemäße Modal-Semantik.",
          "native_button": "Native Dialog starten",
          "native_dialog_title": "Native Dialog Element",
          "native_dialog_content": "Das HTML5 Dialog-Element bietet robuste Modal-Funktionalität mit automatischem Focus-Management, Backdrop-Interaction-Handling und ordnungsgemäßer Accessibility-Semantik in der Browser-Engine.",
          "native_dialog_advantage": "Schlüssel-Vorteil: Hintergrund-Content wird automatisch inert, verhindert Interaktion und Screen Reader Zugriff ohne zusätzliche Implementierung.",
          "native_dialog_close": "Dialog schließen",
          "native_pros_title": "✅ Engine-Level Features:",
          "native_pros": [
            "Automatisches Focus-Trapping mit ordnungsgemäßer Wiederherstellung",
            "Eingebautes ESC-Key-Handling und Backdrop-Click-Support",
            "Modal-Semantik und Inert-Background-Management"
          ]
        },
        "validation": {
          "title": "📝 Constraint Validation Patterns",
          "js_title": "Custom Validierungs-Logik",
          "js_badge": "FRAGIL",
          "js_warning": "Validierungs-Komplexität: Custom Error-Messaging, Timing-Koordination, Accessibility-Announcements und Server-Client-Synchronisation.",
          "js_email_label": "E-Mail-Validierung",
          "js_email_error": "Ungültiges E-Mail-Format erkannt",
          "js_regex_label": "Pattern-Matching (UUID)",
          "js_regex_error": "UUID-Format erforderlich: 8-4-4-4-12 Hex-Ziffern",
          "js_submit": "Formular validieren",
          "js_cons_title": "❌ Validierungs-Brüchigkeit:",
          "js_cons": [
            "Regex-Patterns verpassen Edge Cases und Internationalisierung",
            "Error-Timing und Accessibility-Announcement-Koordination",
            "Client-Server-Validierungs-Drift und Synchronisations-Issues"
          ],
          "native_title": "Constraint Validation API",
          "native_badge": "SPEC-KONFORM",
          "native_note": "Standards-basiert: Automatische Error-Announcements, internationalisierte Messages und CSS-Pseudo-Class-Integration.",
          "native_email_label": "E-Mail-Validierung",
          "native_email_placeholder": "entwickler@beispiel.org",
          "native_uuid_label": "UUID Pattern",
          "native_uuid_placeholder": "550e8400-e29b-41d4-a716-446655440000",
          "native_uuid_title": "Gib ein gültiges UUID-Format ein (z.B. 550e8400-e29b-41d4-a716-446655440000)",
          "native_api_label": "API Endpoint URL",
          "native_api_placeholder": "https://api.beispiel.org/v1",
          "native_submit": "Formular absenden",
          "native_pros_title": "✅ Spezifikations-Konformität:",
          "native_pros": [
            "RFC-konforme Validierungs-Pattern mit Internationalisierung",
            "Automatische Error-Messages in der bevorzugten Sprache des Users",
            "CSS-Pseudo-Classes (:valid, :invalid) für Styling-Integration"
          ]
        },
        "progress": {
          "title": "📊 Progress Indication Patterns",
          "js_title": "Custom Progress Implementierung",
          "js_badge": "SEMANTIK-LEER",
          "js_warning": "Accessibility-Gap: Keine semantische Bedeutung ohne explizite ARIA-Implementierung und Screen Reader Progress-Announcements.",
          "js_text": "Build-Progress:",
          "js_button": "Build-Prozess starten",
          "js_cons_title": "❌ Semantische Limitierungen:",
          "js_cons": [
            "Keine inhärente semantische Bedeutung für Assistive Technologies",
            "Manuelles ARIA Live-Region-Management für Progress-Updates",
            "Custom Animation-Performance und Value-Interpolation"
          ],
          "native_title": "Native Progress Element",
          "native_badge": "SEMANTISCH",
          "native_note": "Semantische Integration: Eingebaute Progress-Role, automatische ARIA-Value-Announcements und Indeterminate-State-Support.",
          "native_compilation": "Kompilierungs-Progress",
          "native_compilation_text": "75% vollständig",
          "native_indeterminate": "Unbestimmte Operation (wird verarbeitet)",
          "native_indeterminate_text": "Verarbeite Dependencies...",
          "native_dynamic": "Dynamischer Progress:",
          "native_button": "Prozess starten",
          "native_pros_title": "✅ Semantische Vorteile:",
          "native_pros": [
            "Eingebaute Progress-Role mit automatischen Value-Announcements",
            "Indeterminate-State-Support für Operations unbekannter Dauer",
            "Plattform-optimiertes Rendering und Animation-Performance"
          ]
        },
        "temporal": {
          "title": "📅 Temporal Input Patterns",
          "js_title": "Custom Date Picker",
          "js_badge": "SCHWERGEWICHTIG",
          "js_warning": "Implementierungs-Umfang: Kalender-Widget-Architektur, Tastatur-Navigation, Internationalisierung, Timezone-Handling und Mobile-Touch-Optimierung.",
          "js_label": "Deployment-Datum (Custom)",
          "js_placeholder": "JJJJ-MM-TT",
          "js_picker_content": "[Kalender-Widget-Implementierung]\nBenötigt: Date-Manipulation-Library, Internationalisierung,\nTastatur-Navigation, Mobile-Gesture-Handling,\nTimezone-Berechnungen, Accessibility-Compliance.",
          "js_cons_title": "❌ Implementierungs-Overhead:",
          "js_cons": [
            "Große JavaScript-Libraries und komplexe Kalender-Logik",
            "Mobile-UX-Inkonsistenz mit Plattform-Date-Pickern",
            "Internationalisierungs-Komplexität und Timezone-Edge-Cases"
          ],
          "native_title": "Native Temporal Inputs",
          "native_badge": "PLATTFORM-NATIV",
          "native_note": "OS-Integration: Plattform-konsistente UI, automatische Tastatur-Navigation, eingebaute Validierung und Internationalisierungs-Support.",
          "native_release_label": "Release-Datum",
          "native_timestamp_label": "Build-Timestamp",
          "native_window_label": "Deployment-Fenster",
          "native_pros_title": "✅ Plattform-Integration:",
          "native_pros": [
            "Zero-Bundle-Impact mit nativer OS-Picker-Integration",
            "Automatische Validierung und Internationalisierungs-Support",
            "Konsistente UX entsprechend Plattform-Konventionen"
          ]
        },
        "autocomplete": {
          "title": "🔍 Autocomplete Patterns",
          "js_title": "Custom Autocomplete",
          "js_badge": "INTERAKTIONS-SCHWER",
          "js_warning": "Interaktions-Komplexität: Dropdown-Positionierung, Tastatur-Navigation, ARIA-Combobox-Implementierung und Mobile-Touch-Handling.",
          "js_label": "Framework-Suche (Custom)",
          "js_placeholder": "Framework-Name eingeben...",
          "js_cons_title": "❌ Interaktions-Management:",
          "js_cons": [
            "Komplexe ARIA-Combobox-Implementierung und State-Management",
            "Dropdown-Positionierung und Viewport-Kollisions-Erkennung",
            "Mobile-Keyboard-Optimierung und Touch-Event-Handling"
          ],
          "native_title": "Native Datalist Element",
          "native_badge": "ZERO-CONFIG",
          "native_note": "Native Combobox: Eingebaute ARIA-Combobox-Semantik, Tastatur-Navigation und plattform-konsistente Interaktions-Pattern.",
          "native_framework_label": "JavaScript Framework",
          "native_framework_placeholder": "Framework auswählen oder eingeben...",
          "native_language_label": "Programmiersprache",
          "native_language_placeholder": "Sprache auswählen...",
          "native_pros_title": "✅ Zero-Configuration Vorteile:",
          "native_pros": [
            "Native Combobox-Semantik mit automatischem ARIA-Support",
            "Plattform-konsistente Tastatur- und Interaktions-Pattern",
            "Formular-Validierungs-Integration und graceful Degradation"
          ]
        }
      },
      "summary": {
        "title": "HTML-First Development",
        "content": "Native HTML-Elemente repräsentieren Jahre von Browser-Engineering, Accessibility-Forschung und Web-Standards-Evolution. Sie bieten robuste Funktionalität mit minimalem Implementierungs-Overhead und maximaler Kompatibilität.",
        "approach_title": "Der Progressive Enhancement Ansatz:",
        "approach_items": [
          "Baue mit semantischem HTML, das universell funktioniert",
          "Verbessere das visuelle Design durch CSS ohne Funktionalitäts-Brüche",
          "Schichte JavaScript für komplexe Interaktionen, wo native Capabilities unzureichend sind"
        ],
        "closing": "Nutze Browser-Engines statt ihre Funktionalität zu reimplementieren. Deine Codebase wird wartbarer, deine User haben bessere Experiences.",
        "quote": "Die anspruchsvollste Architektur ist oft die, die existierende, gut getestete Komponenten nutzt. Native HTML-Elemente bieten Jahrzehnte von Optimierung und Accessibility-Engineering—baue auf diesem Fundament auf, nicht darum herum."
      }
    },
    "lang": "de",
    "dir": "ltr"
  }
}