/**
 * ContrastModes.css - Kontrast-Modi
 * ==================================
 * WCAG 1.4.3: Contrast (Minimum) - Level AA
 * WCAG 1.4.6: Contrast (Enhanced) - Level AAA
 *
 * Verschiedene Kontrast-Modi fuer unterschiedliche
 * Beduerfnisse und Praeferenzen.
 *
 * Modi:
 * - dark: Dunkelmodus
 * - high-contrast-light: Hoher Kontrast Hell (Schwarz auf Weiss)
 * - high-contrast-dark: Hoher Kontrast Dunkel (Weiss auf Schwarz)
 * - sepia: Warme Farben (Augenfreundlich)
 * - inverted: Invertierte Farben
 *
 * @version 1.0.0
 * @since TYPO3 13 LTS
 * @author made in nature Projektagentur
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Standard-Werte (Hell/Default) */
    --min-contrast-bg: #ffffff;
    --min-contrast-bg-alt: #f5f5f5;
    --min-contrast-text: #1a1a1a;
    --min-contrast-text-muted: #666666;
    --min-contrast-link: #0066cc;
    --min-contrast-link-visited: #551a8b;
    --min-contrast-link-hover: #004499;
    --min-contrast-border: #cccccc;
    --min-contrast-focus: #005fcc;

    /* Schatten */
    --min-contrast-shadow-color: rgba(0, 0, 0, 0.1);

    /* Transition */
    --min-contrast-transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* ==========================================================================
   Dark Mode
   [data-contrast="dark"]
   ========================================================================== */

[data-contrast="dark"] {
    --min-contrast-bg: #121212;
    --min-contrast-bg-alt: #1e1e1e;
    --min-contrast-text: #e0e0e0;
    --min-contrast-text-muted: #a0a0a0;
    --min-contrast-link: #6db3f2;
    --min-contrast-link-visited: #ce93d8;
    --min-contrast-link-hover: #90caf9;
    --min-contrast-border: #424242;
    --min-contrast-focus: #90caf9;
    --min-contrast-shadow-color: rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

[data-contrast="dark"] body {
    background-color: var(--min-contrast-bg);
    color: var(--min-contrast-text);
    transition: var(--min-contrast-transition);
}

[data-contrast="dark"] a {
    color: var(--min-contrast-link);
}

[data-contrast="dark"] a:visited {
    color: var(--min-contrast-link-visited);
}

[data-contrast="dark"] a:hover,
[data-contrast="dark"] a:focus {
    color: var(--min-contrast-link-hover);
}

/* Dark Mode - Formularelemente */
[data-contrast="dark"] input,
[data-contrast="dark"] textarea,
[data-contrast="dark"] select {
    background-color: var(--min-contrast-bg-alt);
    color: var(--min-contrast-text);
    border-color: var(--min-contrast-border);
}

[data-contrast="dark"] button {
    background-color: var(--min-contrast-bg-alt);
    color: var(--min-contrast-text);
    border-color: var(--min-contrast-border);
}

/* Dark Mode - Bilder (optional abgedunkelt) */
[data-contrast="dark"] img:not([data-no-filter]) {
    filter: brightness(0.9);
}

/* ==========================================================================
   High Contrast Light (Schwarz auf Weiss)
   [data-contrast="high-contrast-light"]
   ========================================================================== */

[data-contrast="high-contrast-light"] {
    --min-contrast-bg: #ffffff;
    --min-contrast-bg-alt: #ffffff;
    --min-contrast-text: #000000;
    --min-contrast-text-muted: #000000;
    --min-contrast-link: #00008b;
    --min-contrast-link-visited: #800080;
    --min-contrast-link-hover: #0000cd;
    --min-contrast-border: #000000;
    --min-contrast-focus: #0000ff;
    --min-contrast-shadow-color: transparent;

    color-scheme: light;
}

[data-contrast="high-contrast-light"] body {
    background-color: var(--min-contrast-bg);
    color: var(--min-contrast-text);
}

/* High Contrast Light - Links mit dicker Unterstreichung */
[data-contrast="high-contrast-light"] a {
    color: var(--min-contrast-link);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

[data-contrast="high-contrast-light"] a:visited {
    color: var(--min-contrast-link-visited);
}

[data-contrast="high-contrast-light"] a:hover,
[data-contrast="high-contrast-light"] a:focus {
    color: var(--min-contrast-link-hover);
    text-decoration-thickness: 3px;
}

/* High Contrast Light - Erhoehte Focus-Sichtbarkeit */
[data-contrast="high-contrast-light"] :focus-visible {
    outline: 4px solid var(--min-contrast-focus);
    outline-offset: 3px;
}

/* High Contrast Light - Formularelemente */
[data-contrast="high-contrast-light"] input,
[data-contrast="high-contrast-light"] textarea,
[data-contrast="high-contrast-light"] select,
[data-contrast="high-contrast-light"] button {
    border: 2px solid var(--min-contrast-border);
    background-color: var(--min-contrast-bg);
    color: var(--min-contrast-text);
}

/* High Contrast Light - Tabellen */
[data-contrast="high-contrast-light"] table,
[data-contrast="high-contrast-light"] th,
[data-contrast="high-contrast-light"] td {
    border: 2px solid var(--min-contrast-border);
}

/* High Contrast Light - Entferne Schatten */
[data-contrast="high-contrast-light"] * {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* High Contrast Light - Bilder mit Rahmen */
[data-contrast="high-contrast-light"] img {
    border: 1px solid var(--min-contrast-border);
}

/* ==========================================================================
   High Contrast Dark (Weiss auf Schwarz)
   [data-contrast="high-contrast-dark"]
   ========================================================================== */

[data-contrast="high-contrast-dark"] {
    --min-contrast-bg: #000000;
    --min-contrast-bg-alt: #000000;
    --min-contrast-text: #ffffff;
    --min-contrast-text-muted: #ffffff;
    --min-contrast-link: #ffff00;
    --min-contrast-link-visited: #ff69b4;
    --min-contrast-link-hover: #ffff99;
    --min-contrast-border: #ffffff;
    --min-contrast-focus: #00ffff;
    --min-contrast-shadow-color: transparent;

    color-scheme: dark;
}

[data-contrast="high-contrast-dark"] body {
    background-color: var(--min-contrast-bg);
    color: var(--min-contrast-text);
}

/* High Contrast Dark - Links */
[data-contrast="high-contrast-dark"] a {
    color: var(--min-contrast-link);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

[data-contrast="high-contrast-dark"] a:visited {
    color: var(--min-contrast-link-visited);
}

[data-contrast="high-contrast-dark"] a:hover,
[data-contrast="high-contrast-dark"] a:focus {
    color: var(--min-contrast-link-hover);
    text-decoration-thickness: 3px;
}

/* High Contrast Dark - Erhoehte Focus-Sichtbarkeit */
[data-contrast="high-contrast-dark"] :focus-visible {
    outline: 4px solid var(--min-contrast-focus);
    outline-offset: 3px;
}

/* High Contrast Dark - Formularelemente */
[data-contrast="high-contrast-dark"] input,
[data-contrast="high-contrast-dark"] textarea,
[data-contrast="high-contrast-dark"] select,
[data-contrast="high-contrast-dark"] button {
    border: 2px solid var(--min-contrast-border);
    background-color: var(--min-contrast-bg);
    color: var(--min-contrast-text);
}

/* High Contrast Dark - Tabellen */
[data-contrast="high-contrast-dark"] table,
[data-contrast="high-contrast-dark"] th,
[data-contrast="high-contrast-dark"] td {
    border: 2px solid var(--min-contrast-border);
}

/* High Contrast Dark - Entferne Schatten */
[data-contrast="high-contrast-dark"] * {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* High Contrast Dark - Bilder mit Rahmen */
[data-contrast="high-contrast-dark"] img {
    border: 1px solid var(--min-contrast-border);
}

/* ==========================================================================
   Sepia Mode (Augenfreundlich)
   [data-contrast="sepia"]
   ========================================================================== */

[data-contrast="sepia"] {
    --min-contrast-bg: #f5f0e6;
    --min-contrast-bg-alt: #ebe4d4;
    --min-contrast-text: #5c4b37;
    --min-contrast-text-muted: #7a6a52;
    --min-contrast-link: #8b4513;
    --min-contrast-link-visited: #6b3410;
    --min-contrast-link-hover: #a0522d;
    --min-contrast-border: #c4a77d;
    --min-contrast-focus: #8b4513;
    --min-contrast-shadow-color: rgba(92, 75, 55, 0.1);

    color-scheme: light;
}

[data-contrast="sepia"] body {
    background-color: var(--min-contrast-bg);
    color: var(--min-contrast-text);
}

[data-contrast="sepia"] a {
    color: var(--min-contrast-link);
}

[data-contrast="sepia"] a:visited {
    color: var(--min-contrast-link-visited);
}

[data-contrast="sepia"] a:hover,
[data-contrast="sepia"] a:focus {
    color: var(--min-contrast-link-hover);
}

/* Sepia - Formularelemente */
[data-contrast="sepia"] input,
[data-contrast="sepia"] textarea,
[data-contrast="sepia"] select {
    background-color: var(--min-contrast-bg-alt);
    color: var(--min-contrast-text);
    border-color: var(--min-contrast-border);
}

[data-contrast="sepia"] button {
    background-color: var(--min-contrast-bg-alt);
    color: var(--min-contrast-text);
    border-color: var(--min-contrast-border);
}

/* Sepia - Bilder leicht sepia-gefaerbt */
[data-contrast="sepia"] img:not([data-no-filter]) {
    filter: sepia(0.15);
}

/* ==========================================================================
   Inverted Mode (Farben invertiert)
   [data-contrast="inverted"]
   ========================================================================== */

[data-contrast="inverted"] {
    filter: invert(1) hue-rotate(180deg);
}

/* Bilder, Videos und Canvas NICHT invertieren (zurueck-invertieren) */
[data-contrast="inverted"] img,
[data-contrast="inverted"] video,
[data-contrast="inverted"] picture,
[data-contrast="inverted"] picture img,
[data-contrast="inverted"] canvas,
[data-contrast="inverted"] svg:not([data-invert]),
[data-contrast="inverted"] iframe,
[data-contrast="inverted"] [data-no-invert] {
    filter: invert(1) hue-rotate(180deg);
}

/* Wichtig: Geschachtelte Invertierung verhindern */
[data-contrast="inverted"] [data-contrast="inverted"] {
    filter: none;
}

/* ==========================================================================
   Gemeinsame Styles fuer alle Modi
   ========================================================================== */

/* Body Transition */
[data-contrast] body {
    transition: var(--min-contrast-transition);
}

/* Links */
[data-contrast] a {
    color: var(--min-contrast-link);
    transition: color 150ms ease;
}

[data-contrast] a:visited {
    color: var(--min-contrast-link-visited);
}

[data-contrast] a:hover,
[data-contrast] a:focus {
    color: var(--min-contrast-link-hover);
}

/* Text-Auswahl */
[data-contrast] ::selection {
    background-color: var(--min-contrast-focus);
    color: var(--min-contrast-bg);
}

/* Focus-Visible */
[data-contrast] :focus-visible {
    outline-color: var(--min-contrast-focus);
}

/* Horizontale Linien */
[data-contrast] hr {
    border-color: var(--min-contrast-border);
}

/* Blockquotes */
[data-contrast] blockquote {
    border-left-color: var(--min-contrast-border);
    color: var(--min-contrast-text-muted);
}

/* Code */
[data-contrast] code,
[data-contrast] pre {
    background-color: var(--min-contrast-bg-alt);
    border-color: var(--min-contrast-border);
}

/* ==========================================================================
   Windows High Contrast Mode (Forced Colors)
   ========================================================================== */

@media (forced-colors: active) {
    /* System uebernimmt die Kontrolle */
    [data-contrast] body {
        forced-color-adjust: none;
    }

    /* Erzwinge Systemfarben */
    [data-contrast="high-contrast-light"] body,
    [data-contrast="high-contrast-dark"] body {
        background-color: Canvas;
        color: CanvasText;
    }

    [data-contrast="high-contrast-light"] a,
    [data-contrast="high-contrast-dark"] a {
        color: LinkText;
    }

    [data-contrast="high-contrast-light"] :focus-visible,
    [data-contrast="high-contrast-dark"] :focus-visible {
        outline: 3px solid Highlight;
    }
}

/* ==========================================================================
   System-Praeferenzen (ohne explizites data-contrast)
   ========================================================================== */

/* Wenn Benutzer Dark Mode im System bevorzugt */
@media (prefers-color-scheme: dark) {
    :root:not([data-contrast]) {
        --min-contrast-bg: #1a1a1a;
        --min-contrast-bg-alt: #262626;
        --min-contrast-text: #e0e0e0;
        --min-contrast-text-muted: #a0a0a0;
        --min-contrast-link: #6db3f2;
        --min-contrast-link-visited: #ce93d8;
        --min-contrast-link-hover: #90caf9;
        --min-contrast-border: #404040;
        --min-contrast-focus: #60a5fa;
    }
}

/* Wenn Benutzer hohen Kontrast im System bevorzugt */
@media (prefers-contrast: more) {
    :root:not([data-contrast]) {
        --min-contrast-bg: #ffffff;
        --min-contrast-text: #000000;
        --min-contrast-link: #00008b;
        --min-contrast-border: #000000;
    }

    :root:not([data-contrast]) a {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
}

/* Kombination: Dark Mode + High Contrast */
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    :root:not([data-contrast]) {
        --min-contrast-bg: #000000;
        --min-contrast-text: #ffffff;
        --min-contrast-link: #ffff00;
        --min-contrast-border: #ffffff;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-contrast] body,
    [data-contrast] a {
        transition: none;
    }
}

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

@media print {
    /* Alle Modi auf Schwarz-Weiss fuer Druck */
    [data-contrast] body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    [data-contrast] a {
        color: #000000 !important;
        text-decoration: underline !important;
    }

    /* Invertierung fuer Druck entfernen */
    [data-contrast="inverted"] {
        filter: none !important;
    }

    [data-contrast="inverted"] img,
    [data-contrast="inverted"] video {
        filter: none !important;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Hintergrund */
.min-contrast-bg {
    background-color: var(--min-contrast-bg);
}

.min-contrast-bg-alt {
    background-color: var(--min-contrast-bg-alt);
}

/* Text */
.min-contrast-text {
    color: var(--min-contrast-text);
}

.min-contrast-text-muted {
    color: var(--min-contrast-text-muted);
}

/* Border */
.min-contrast-border {
    border-color: var(--min-contrast-border);
}

/* Links */
.min-contrast-link {
    color: var(--min-contrast-link);
}

/* Von Kontrastanpassungen ausschliessen */
.min-contrast-exclude {
    filter: none !important;
}

[data-contrast="inverted"] .min-contrast-exclude {
    filter: invert(1) hue-rotate(180deg) !important;
}