/**
 * TV 1848 Erlangen - Barrierefreiheit Stylesheet
 *
 * @package TV1848
 * @since 1.0.0
 */

/* ==========================================================================
   Skip Links
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}


/* ==========================================================================
   Focus Styles
   ========================================================================== */

/* Allgemeiner Focus-Style */
:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

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

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Focus für dunkle Hintergründe */
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.bg-primary :focus-visible {
    outline-color: var(--color-secondary);
}

/* Button Focus */
.btn:focus-visible,
button:focus-visible,
[type="submit"]:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(var(--color-primary-rgb), 0.2);
}

.btn-primary:focus-visible {
    outline-color: var(--color-secondary);
}

/* Input Focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

/* Card Focus */
.entry:focus-within {
    box-shadow: var(--shadow-lg), 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}


/* ==========================================================================
   Keyboard Navigation
   ========================================================================== */

/* Tastatur-Navigation Indikator */
.keyboard-navigation *:focus {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}

.keyboard-navigation .site-header *:focus,
.keyboard-navigation .site-footer *:focus {
    outline-color: var(--color-secondary) !important;
}

/* Focus Ring Animation */
@keyframes focus-ring-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(var(--color-primary-rgb), 0.2);
    }
}

.keyboard-navigation a:focus,
.keyboard-navigation button:focus {
    animation: focus-ring-pulse 1.5s ease-in-out infinite;
}


/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --color-primary: #005500;
        --color-gray-500: #333333;
        --color-gray-300: #666666;
    }

    body {
        background: #ffffff;
        color: #000000;
    }

    a {
        color: #0000cc;
        text-decoration: underline;
    }

    a:visited {
        color: #551a8b;
    }

    .btn,
    button {
        border: 2px solid currentColor;
    }

    .entry {
        border: 2px solid #000000;
    }

    img {
        border: 1px solid #000000;
    }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
    .btn,
    button,
    input,
    select,
    textarea {
        border: 2px solid ButtonText;
    }

    a {
        text-decoration: underline;
    }

    :focus {
        outline: 3px solid Highlight;
    }
}


/* ==========================================================================
   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;
    }

    .hero-slider,
    .carousel {
        scroll-snap-type: none;
    }
}


/* ==========================================================================
   Color Blind Support
   ========================================================================== */

/* Zusätzliche visuelle Hinweise neben Farben */
.status-success::before {
    content: "✓ ";
}

.status-error::before {
    content: "✕ ";
}

.status-warning::before {
    content: "⚠ ";
}

.status-info::before {
    content: "ℹ ";
}

/* Links mit Icon kennzeichnen */
a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.8em;
}

a[href$=".pdf"]::after {
    content: " (PDF)";
    font-size: 0.8em;
    font-weight: var(--font-weight-medium);
}

a[href^="mailto:"]::before {
    content: "✉ ";
}

a[href^="tel:"]::before {
    content: "☎ ";
}


/* ==========================================================================
   Screen Reader Only (Visually Hidden)
   ========================================================================== */

.screen-reader-text,
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.screen-reader-text:focus,
.sr-only:focus,
.visually-hidden:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: var(--spacing-2) var(--spacing-4) !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: var(--color-primary);
    color: var(--color-white);
}


/* ==========================================================================
   Text Spacing (WCAG 1.4.12)
   ========================================================================== */

/* Unterstützung für Benutzer-definierte Textabstände */
body {
    line-height: 1.5 !important;
}

p {
    margin-bottom: 2em;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.5em;
}


/* ==========================================================================
   Touch Target Size (WCAG 2.5.5)
   ========================================================================== */

/* Mindestgröße 44x44px für Touch-Targets */
@media (pointer: coarse) {
    a,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-menu a {
        padding: var(--spacing-3) var(--spacing-4);
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 24px;
        height: 24px;
    }
}


/* ==========================================================================
   Form Accessibility
   ========================================================================== */

/* Pflichtfeld-Kennzeichnung */
.required,
[aria-required="true"] + label::after {
    content: " *";
    color: var(--color-error);
}

/* Fehler-States */
[aria-invalid="true"],
.field-error {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.error-message {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-1);
}

.error-message::before {
    content: "⚠ ";
}

/* Erfolgs-States */
[aria-invalid="false"].touched,
.field-success {
    border-color: var(--color-success) !important;
}

/* Fieldset Styling */
fieldset {
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

legend {
    padding: 0 var(--spacing-2);
    font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   ARIA States
   ========================================================================== */

[aria-expanded="false"] + .submenu,
[aria-expanded="false"] + .dropdown-menu {
    display: none;
}

[aria-expanded="true"] + .submenu,
[aria-expanded="true"] + .dropdown-menu {
    display: block;
}

[aria-hidden="true"] {
    display: none !important;
}

[aria-disabled="true"],
[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

[aria-busy="true"] {
    cursor: wait;
}

[aria-current="page"] {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

[aria-current="page"]::before {
    content: "▸ ";
}


/* ==========================================================================
   Live Regions
   ========================================================================== */

[aria-live] {
    position: relative;
}

.live-region-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: border-color var(--transition-fast);
}

[aria-live].updated .live-region-indicator {
    border-color: var(--color-primary);
    animation: live-region-flash 0.5s ease;
}

@keyframes live-region-flash {
    0%, 100% {
        border-color: transparent;
    }
    50% {
        border-color: var(--color-primary);
    }
}


/* ==========================================================================
   Table Accessibility
   ========================================================================== */

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    background: var(--color-gray-100);
}

th, td {
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-gray-300);
}

/* Responsive Table */
@media (max-width: 640px) {
    .responsive-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .responsive-table::before {
        content: "← Horizontal scrollen →";
        display: block;
        text-align: center;
        font-size: var(--font-size-sm);
        color: var(--color-gray-500);
        margin-bottom: var(--spacing-2);
    }
}

/* Row Focus */
tr:focus-within {
    background: rgba(var(--color-primary-rgb), 0.05);
}


/* ==========================================================================
   Image Accessibility
   ========================================================================== */

img:not([alt]) {
    outline: 3px solid var(--color-error);
}

img[alt=""] {
    /* Dekorative Bilder - kein Outline */
}

figure {
    margin: var(--spacing-8) 0;
}

figcaption {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-align: center;
}


/* ==========================================================================
   Link Accessibility
   ========================================================================== */

/* Unterscheidbare Links */
.entry-content a,
.comment-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.entry-content a:hover,
.comment-content a:hover {
    text-decoration-thickness: 2px;
}

/* Visited Links */
.entry-content a:visited {
    color: #6b21a8;
}


/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --color-gray-50: #1f2937;
        --color-gray-100: #374151;
        --color-gray-200: #4b5563;
        --color-gray-300: #6b7280;
        --color-gray-400: #9ca3af;
        --color-gray-500: #d1d5db;
        --color-gray-600: #e5e7eb;
        --color-gray-700: #f3f4f6;
        --color-gray-800: #f9fafb;
        --color-gray-900: #ffffff;

        --color-white: #111827;
        --color-black: #ffffff;
    }

    body {
        background: #111827;
        color: #f3f4f6;
    }

    .entry {
        background: #1f2937;
    }

    img {
        opacity: 0.9;
    }
}