/**
 * WCAG 2.2 Level AA - Barrierefreiheits-Erweiterungen
 *
 * Diese Datei ergänzt die Haupt-CSS um WCAG-konforme Styles
 * Primärfarbe: #8b2635 (Kontrast zu weiß: ~7.5:1)
 */

/* ============================================
   SKIP-LINKS (2.4.1 Blöcke umgehen)
   ============================================ */
.skip-links {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--primary, #8b2635);
    color: #ffffff;
    padding: 1rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--radius) 0;
    box-shadow: var(--shadow-lg);
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--warning, #ca8a04);
    outline-offset: 2px;
}

/* ============================================
   FOKUS-STYLES (2.4.7 Fokus sichtbar)
   ============================================ */
*:focus {
    outline: 3px solid var(--primary, #8b2635);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid var(--primary, #8b2635);
    outline-offset: 2px;
}

/* Verbesserte Button-Fokus-States */
.btn:focus-visible,
button:focus-visible {
    outline: 3px solid var(--primary, #8b2635);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(139, 38, 53, 0.25);
}

/* Link-Fokus */
a:focus-visible {
    outline: 3px solid var(--primary, #8b2635);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Formular-Fokus */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary, #8b2635);
    outline-offset: 0;
    border-color: var(--primary, #8b2635);
}

/* ============================================
   2.4.11 Focus Not Obscured (Minimum) – AA (WCAG 2.2)
   ============================================ */
html {
    scroll-padding-top: 80px; /* Höhe des sticky Headers berücksichtigen */
}

/* Fokussierte Elemente hinter sticky Header sichtbar machen */
*:focus-visible {
    scroll-margin-top: 80px;
}

/* ============================================
   2.5.8 Target Size (Minimum) – AA (WCAG 2.2)
   Minimum 24x24px, wir verwenden 44px
   ============================================ */
.btn,
button,
[role="button"],
input[type="checkbox"],
input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
}

/* Sidebar-Links brauchen ebenfalls ausreichende Touch-Targets */
.sidebar-nav a {
    min-height: 44px;
}

/* Checkbox/Radio-Label mit größerem Klickbereich */
.form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-check-input {
    width: 20px;
    height: 20px;
    margin: 0;
}

/* ============================================
   3.2.6 Consistent Help – A (WCAG 2.2)
   Einheitliche Positionierung von Hilfe-Elementen
   ============================================ */
.consistent-help {
    position: relative;
}

/* Hilfe-Links werden immer am gleichen Ort dargestellt */
.consistent-help .help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ============================================
   KONTRAST (1.4.3 Kontrast Minimum - 4.5:1)
   ============================================ */

/* Hochkontrast-Farben für Text */
.text-high-contrast {
    color: #1a1a1a !important; /* Kontrast zu weiß: 16:1 */
}

/* Verbesserte Badge-Kontraste
   Alle Badges haben Kontrast >= 4.5:1 */
.badge {
    font-weight: 600;
}

.badge-warning {
    background-color: #92400e; /* Dunkleres Braun/Orange, Kontrast zu weiß: 7.2:1 */
    color: #ffffff;
}

.badge-info {
    background-color: #1e40af; /* Dunkleres Blau, Kontrast zu weiß: 8.6:1 */
    color: #ffffff;
}

.badge-success {
    background-color: #166534; /* Dunkleres Grün, Kontrast zu weiß: 8.5:1 */
    color: #ffffff;
}

.badge-danger {
    background-color: #991b1b; /* Dunkleres Rot, Kontrast zu weiß: 8.2:1 */
    color: #ffffff;
}

/* Link-Kontrast in verschiedenen Kontexten
   #8b2635 auf weiß: ~7.5:1 - erfüllt WCAG AA */
a {
    color: #8b2635;
}

a:hover {
    color: #6e1e2a; /* Dunklere Variante, Kontrast: ~9.8:1 */
    text-decoration: underline;
}

/* Platzhalter-Text mit ausreichendem Kontrast */
::placeholder {
    color: #6b7280; /* Kontrast zu weiß: 4.6:1 */
    opacity: 1;
}

/* Deaktivierte Elemente deutlich kennzeichnen */
.btn:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   TEXT-SKALIERUNG (1.4.4 Textgröße ändern)
   ============================================ */

/* Alle Schriftgrößen in rem für Skalierbarkeit */
html {
    font-size: 100%; /* 16px Basis, skaliert mit Browser-Einstellungen */
}

/* ============================================
   TEXTABSTÄNDE (1.4.12 Text Spacing)
   ============================================ */

/* Diese Styles müssen auch bei Benutzer-Anpassungen funktionieren */
body {
    line-height: 1.5; /* Minimum für Fließtext */
}

p {
    margin-bottom: 1.5em; /* Absatzabstand: 2x Schriftgröße */
}

/* ============================================
   BEWEGUNG & ANIMATION (2.3.1 Dreimaliges Blitzen)
   ============================================ */

/* Respektiere prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   HOVER/FOKUS-INHALTE (1.4.13)
   ============================================ */

/* Tooltips und Dropdowns bleiben sichtbar */
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    position: absolute;
    content: attr(data-tooltip);
    background: #1a1a1a;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: auto; /* Kann mit Maus erreicht werden */
}

/* ============================================
   SCREENREADER-UTILITIES
   ============================================ */

/* Visuell versteckt, aber für Screenreader zugänglich */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Wird bei Fokus sichtbar */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   TABELLEN-BARRIEREFREIHEIT
   ============================================ */

.table {
    border-collapse: collapse;
}

.table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding: 0.75rem;
    color: var(--gray-700);
}

.table th {
    text-align: left;
    font-weight: 600;
}

.table th[scope="col"] {
    border-bottom: 2px solid var(--gray-300);
}

.table th[scope="row"] {
    border-right: 2px solid var(--gray-300);
}

/* Zebra-Striping für bessere Lesbarkeit */
.table-striped tbody tr:nth-child(odd) {
    background-color: var(--gray-50);
}

/* ============================================
   FORMULARE - FEHLERBEHANDLUNG (3.3.1, 3.3.2)
   ============================================ */

/* Fehlerhafte Felder */
.form-control.is-invalid,
.form-control[aria-invalid="true"] {
    border-color: #991b1b;
    border-width: 2px;
}

.form-control.is-invalid:focus,
.form-control[aria-invalid="true"]:focus {
    outline-color: #991b1b;
    box-shadow: 0 0 0 3px rgba(153, 27, 27, 0.25);
}

/* Fehlermeldungen */
.form-error,
[role="alert"] {
    color: #991b1b;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-error::before {
    content: "\26A0"; /* Warning sign */
}

/* Erfolgsmeldungen */
.form-success {
    color: #166534;
}

/* Pflichtfeld-Kennzeichnung */
.form-label.required::after {
    content: " *";
    color: #991b1b;
}

/* Hilfetexte mit ausreichendem Kontrast */
.form-hint {
    color: #4b5563;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ============================================
   GESETZ-SPEZIFISCHE BARRIEREFREIHEIT
   ============================================ */

/* Gesetzestext mit guter Lesbarkeit */
.gesetz-inhalt {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 75ch; /* Optimale Zeilenlänge */
}

.paragraph-text {
    text-align: left; /* Blocksatz kann für Screenreader problematisch sein */
}

/* Inhaltsverzeichnis als Navigation markieren */
.gesetz-toc[role="navigation"] {
    border-left: 4px solid var(--primary);
}

/* Paragraph-Nummern als Überschriften-Hierarchie */
.paragraph-nr {
    font-size: 1.25rem;
}

/* ============================================
   PRINT-BARRIEREFREIHEIT
   ============================================ */

@media print {
    /* Kontrast für Druck optimieren */
    * {
        color: #000000 !important;
        background: #ffffff !important;
    }

    /* Links mit URL anzeigen */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666666 !important;
    }

    /* Interne Links nicht expandieren */
    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }

    /* Navigations-Elemente ausblenden */
    nav,
    .no-print,
    .skip-links {
        display: none !important;
    }
}

/* ============================================
   HIGH CONTRAST MODE (Windows)
   ============================================ */

@media (forced-colors: active) {
    .btn {
        border: 2px solid currentColor;
    }

    .badge {
        border: 1px solid currentColor;
    }

    .card {
        border: 1px solid currentColor;
    }

    a:focus,
    button:focus {
        outline: 3px solid currentColor;
    }
}