/**
 * DINtheme Barrierefreiheit - Basis-Stylesheet
 *
 * WCAG 2.2 AAA & EN 301 549 konform
 *
 * @package DINtheme
 */

/* ==========================================================================
   CSS Custom Properties (Variablen)
   ========================================================================== */

:root {
    /* Fokus-Variablen werden aus Breakdance Global Settings geladen */
    /* Keine hardcodierten Werte hier - diese würden die Global Settings überschreiben */

    /* Skip-Links */
    --dt-skip-link-bg: #000000;
    --dt-skip-link-color: #ffffff;
    --dt-skip-link-padding: 1rem 2rem;
    --dt-skip-link-z-index: 999999;

    /* Schriftgrößen-Skalierung */
    --dt-font-size-base: 1rem;
    --dt-font-size-multiplier: 1;

    /* Touch-Targets */
    --dt-touch-target-min: 44px;

    /* Übergänge */
    --dt-transition-duration: 300ms;
    --dt-transition-timing: ease-in-out;

    /* Farben (Standard-Palette) */
    --dt-color-text: #1a1a1a;
    --dt-color-text-contrast: #000000;
    --dt-color-background: #ffffff;
    --dt-color-background-contrast: #ffffff;
    --dt-color-primary: #0056b3;
    --dt-color-primary-contrast: #003d82;
    --dt-color-primary-text: #ffffff;
}

/* ==========================================================================
   Kontrastmodus
   ========================================================================== */

/* Kontrastmodus-Farbwechsel wird in outputCssVariables() (Base.php) gehandhabt */

/* ==========================================================================
   Reduzierte Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --dt-transition-duration: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Fokus-Indikatoren
   ========================================================================== */

/* ============================================================================
   FOKUS-INDIKATOREN - ZWINGEND FÜR ALLE ELEMENTE
   Konsolidiert: Eine Regel für alle fokussierbaren Elemente
   ============================================================================ */

/* Universeller Fokus-Indikator */
*:focus-visible,
.breakdance *:focus-visible {
    outline: var(--dt-focus-ring, 2px solid #000) !important;
    outline-offset: var(--dt-focus-offset, 2px) !important;
    box-shadow: none !important;
}

/* Formularelemente: offset 0 (Outline direkt am Rand) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 0 !important;
}

/* Fokus innerhalb von Containern */
.dt-focus-within:focus-within {
    outline: var(--dt-focus-ring, 2px solid #000) !important;
    outline-offset: var(--dt-focus-offset, 2px) !important;
}

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

.dt-skip-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    pointer-events: none;
}

.dt-skip-link {
    /* Versteckt, aber für Screenreader und Tab-Navigation zugänglich */
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;

    /* Styling */
    padding: 1rem 2rem;
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    white-space: nowrap;
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

    /* Pointer-Events aktivieren für dieses Element */
    pointer-events: auto;
}

/* Skip-Link bei Fokus sichtbar machen - komplett mittig */
.dt-skip-link:focus,
.dt-skip-link:focus-visible {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 999999 !important;
    border-radius: 4px !important;

    /* Größere Darstellung für bessere Sichtbarkeit */
    padding: 1.25rem 2.5rem !important;
    font-size: 1.125rem !important;

    /* Fokus-Indikator aus DINtheme Settings */
    outline: var(--dt-focus-ring, 2px solid #000) !important;
    outline-offset: var(--dt-focus-offset, 2px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   Screenreader-Only / Visuell versteckt
   ========================================================================== */

.dt-sr-only,
.dt-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Bei Fokus wieder sichtbar machen */
.dt-sr-only-focusable:focus,
.dt-sr-only-focusable:active,
.dt-visually-hidden-focusable:focus,
.dt-visually-hidden-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

/* ==========================================================================
   Touch-Targets
   ========================================================================== */

/* Mindestgröße für Touch-Targets (WCAG 2.2 Target Size) */
.dt-touch-target {
    min-width: var(--dt-touch-target-min);
    min-height: var(--dt-touch-target-min);
}

/* Touch-Targets für interaktive Elemente */
@media (pointer: coarse) {
    button,
    [role="button"],
    a,
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: var(--dt-touch-target-min);
    }

    /* Checkboxen und Radios brauchen größeren Klickbereich */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: var(--dt-touch-target-min);
    }
}

/* ==========================================================================
   Schriftgrößen-Skalierung
   ========================================================================== */

html[data-font-size="-2"] { --dt-font-size-multiplier: 0.75; }
html[data-font-size="-1"] { --dt-font-size-multiplier: 0.875; }
html[data-font-size="0"] { --dt-font-size-multiplier: 1; }
html[data-font-size="+1"],
html[data-font-size="1"] { --dt-font-size-multiplier: 1.125; }
html[data-font-size="+2"],
html[data-font-size="2"] { --dt-font-size-multiplier: 1.25; }
html[data-font-size="+3"],
html[data-font-size="3"] { --dt-font-size-multiplier: 1.5; }
html[data-font-size="+4"],
html[data-font-size="4"] { --dt-font-size-multiplier: 2; }

/* Anwendung auf Body - ermöglicht relative Schriftgrößen */
body.dt-font-scaled {
    font-size: calc(var(--dt-font-size-base) * var(--dt-font-size-multiplier));
}

/* ==========================================================================
   Forced Colors Mode (Windows Hochkontrast)
   ========================================================================== */

@media (forced-colors: active) {
    .dt-skip-link {
        border: 2px solid CanvasText;
    }

    *:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }

    .dt-forced-colors-border {
        border: 2px solid CanvasText;
    }
}

/* ==========================================================================
   Kontrastmodus Utilities
   ========================================================================== */

/* Nur im Kontrastmodus sichtbar */
.dt-high-contrast-only {
    display: none;
}

[data-contrast-mode="high"] .dt-high-contrast-only,
.dt-high-contrast .dt-high-contrast-only {
    display: block;
}

/* Nur im Normalmodus sichtbar */
[data-contrast-mode="high"] .dt-normal-contrast-only,
.dt-high-contrast .dt-normal-contrast-only {
    display: none;
}

/* Kontrastmodus: ALLE Links unterstrichen (WCAG 1.4.1 - Farbe nicht als einziges Unterscheidungsmerkmal) */
[data-contrast-mode="high"] a,
[data-contrast-mode="high"] a:link,
[data-contrast-mode="high"] a:visited,
.dt-high-contrast a,
.dt-high-contrast a:link,
.dt-high-contrast a:visited {
    text-decoration: underline !important;
}

@media (prefers-contrast: more) {
    :root:not([data-contrast-mode="normal"]) a,
    :root:not([data-contrast-mode="normal"]) a:link,
    :root:not([data-contrast-mode="normal"]) a:visited {
        text-decoration: underline !important;
    }
}

/* ==========================================================================
   Kontrastmodus-Toggle Button
   ========================================================================== */

.dt-contrast-toggle-button {
    /* Position */
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999998;

    /* Größe & Layout - nur Icon, kreisrund */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;

    /* Styling */
    background-color: #000000;
    color: #ffffff;
    border: 2px solid transparent;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;

    /* Typografie */
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;

    /* Übergänge */
    transition:
        background-color var(--dt-transition-duration) var(--dt-transition-timing),
        color var(--dt-transition-duration) var(--dt-transition-timing),
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

/* Icon */
.dt-contrast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* Tooltip - standardmäßig versteckt */
.dt-contrast-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background-color: #000000;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Tooltip-Pfeil */
.dt-contrast-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #000000;
}

/* Tooltip bei Hover und Fokus anzeigen */
.dt-contrast-toggle-button:hover .dt-contrast-tooltip,
.dt-contrast-toggle-button:focus .dt-contrast-tooltip,
.dt-contrast-toggle-button:focus-visible .dt-contrast-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Tooltip-Text wechseln: Standard = "einschalten" sichtbar */
.dt-tooltip-disable {
    display: none;
}

/* Tooltip-Text wechseln: aktiv = "ausschalten" sichtbar */
.dt-contrast-toggle-button[aria-pressed="true"] .dt-tooltip-enable {
    display: none;
}

.dt-contrast-toggle-button[aria-pressed="true"] .dt-tooltip-disable {
    display: inline;
}

/* Auch bei data-contrast-mode */
[data-contrast-mode="high"] .dt-contrast-toggle-button .dt-tooltip-enable {
    display: none;
}

[data-contrast-mode="high"] .dt-contrast-toggle-button .dt-tooltip-disable {
    display: inline;
}

/* Hover-Effekt */
.dt-contrast-toggle-button:hover {
    background-color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Aktiver Zustand */
.dt-contrast-toggle-button:active {
    transform: translateY(0);
}

/* Fokus-Indikator aus DINtheme Settings */
.dt-contrast-toggle-button:focus-visible {
    outline: var(--dt-focus-ring, 2px solid #000) !important;
    outline-offset: var(--dt-focus-offset, 2px) !important;
    box-shadow: none !important;
}

/* Pressed State (Kontrastmodus aktiv) */
.dt-contrast-toggle-button[aria-pressed="true"] {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}

.dt-contrast-toggle-button[aria-pressed="true"]:hover {
    background-color: #f0f0f0;
}

/* Tooltip im Kontrastmodus anpassen */
.dt-contrast-toggle-button[aria-pressed="true"] .dt-contrast-tooltip,
[data-contrast-mode="high"] .dt-contrast-toggle-button .dt-contrast-tooltip {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
}

.dt-contrast-toggle-button[aria-pressed="true"] .dt-contrast-tooltip::after,
[data-contrast-mode="high"] .dt-contrast-toggle-button .dt-contrast-tooltip::after {
    border-color: transparent transparent transparent #ffffff;
}

/* Kontrastmodus-Anpassung */
[data-contrast-mode="high"] .dt-contrast-toggle-button {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}

[data-contrast-mode="high"] .dt-contrast-toggle-button:hover {
    background-color: #f0f0f0;
}

/* Kontrastmodus: Fokus-Indikator */
[data-contrast-mode="high"] .dt-contrast-toggle-button:focus-visible {
    outline: var(--dt-focus-ring, 2px solid #000) !important;
    outline-offset: var(--dt-focus-offset, 2px) !important;
}

/* Mobile Anpassungen */
@media (max-width: 639px) {
    .dt-contrast-toggle-button {
        bottom: 1rem;
        right: 1rem;
    }

    

    .dt-contrast-toggle-button[aria-pressed="true"] .dt-contrast-tooltip::after,
    [data-contrast-mode="high"] .dt-contrast-toggle-button .dt-contrast-tooltip::after {
        border-color: #ffffff transparent transparent transparent;
    }
}

/* ==========================================================================
   Live-Region für Ankündigungen
   ========================================================================== */

#dt-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .dt-skip-links,
    .dt-contrast-toggle,
    .dt-font-size-widget {
        display: none !important;
    }

    /* Fokus-Styles nicht drucken */
    *:focus-visible {
        outline: none !important;
    }
}