/* Barrierefreiheit nach WCAG-Richtlinien */

/* Fokus-Umrisse für Tastaturzugriff */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus,
[tabindex]:focus {
    outline: 3px solid #4f94d4 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

.dark a:focus,
.dark button:focus,
.dark input:focus,
.dark select:focus,
.dark textarea:focus,
.dark [role="button"]:focus,
.dark [tabindex]:focus {
    outline: 3px solid #7cb9f1 !important;
    box-shadow: 0 0 0 2px #000 !important;
}

/* Hinzufügen von skip-to-content-Link (wird erst bei Fokussierung sichtbar) */
.skip-to-content {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 9999;
    background: white;
    padding: 1rem;
    border: 2px solid #4f94d4;
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.skip-to-content:focus {
    top: 5px;
    left: 5px;
}

/* Bessere Kontraste für unterschiedliche Textgrößen */
/* Text mit mehr als 18pt (oder 14pt fett) benötigt ein Kontrastverhältnis von 3:1 */
/* Kleinerer Text benötigt ein Kontrastverhältnis von 4,5:1 */
.high-contrast-text {
    color: #000 !important;
}

.dark .high-contrast-text {
    color: #fff !important;
}

/* Verbesserte Kontraste für Placeholder-Text */
input::placeholder,
textarea::placeholder {
    color: #666;
    opacity: 1;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #aaa;
    opacity: 1;
}

/* Aria-Rollen für bessere Screenreader-Unterstützung */
[role="navigation"],
[role="search"],
[role="banner"],
[role="contentinfo"],
[role="main"],
[role="complementary"],
[role="region"] {
    display: block;
}

/* Vermeidung von Farbinformation als einziges Merkmal */
.form-error {
    color: #d30000;
    border-color: #d30000;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23d30000" d="M256 40c118.6 0 216 96.6 216 216 0 119.38-96.6 216-216 216-119.38 0-216-96.62-216-216C40 136.6 136.6 40 256 40zM159.99 162.63L162.63 160c5.12-5.13 13.64-5.13 18.740 0L256 234.63 330.63 160c5.12-5.13 13.64-5.13 18.74 0l2.63 2.63c5.13 5.12 5.13 13.64 0 18.74L277.37 256 352 330.63c5.13 5.12 5.13 13.64 0 18.74l-2.63 2.63c-5.12 5.13-13.64 5.13-18.74 0L256 277.37l-74.63 74.63c-5.12 5.13-13.64 5.13-18.74 0l-2.63-2.63c-5.13-5.12-5.13-13.64 0-18.74L234.63 256 160 181.37c-5.13-5.12-5.13-13.64 0-18.74z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px 15px;
    padding-right: 30px;
}

.form-success {
    color: #007d1b;
    border-color: #007d1b;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23007d1b" d="M256 40c118.6 0 216 96.6 216 216 0 119.38-96.6 216-216 216-119.38 0-216-96.62-216-216C40 136.6 136.6 40 256 40zm133.38 160L226.26 363.12l-91.64-91.64c-3.75-3.75-9.68-4.06-13.88-.68l-14.88 11.31c-4.2 3.38-4.45 9.56-.63 13.19l115.6 127.58c4.17 4.28 10.48 3.88 14.9-.68l178.63-195.14c3.88-4.03 3.57-10.19-.57-13.88l-14.5-11.25c-3.82-3.38-9.75-3.13-13.94.63z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px 15px;
    padding-right: 30px;
}

.dark .form-error,
.dark .form-success {
    filter: brightness(1.3);
}

/* WCAG 2.1 Erweiterungen */

/* Verbesserte Tastatur-Navigation */
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
    outline: none;
    box-shadow: none;
}

[data-js-focus-visible] [data-focus-visible-added] {
    outline: 3px solid #4f94d4 !important;
    outline-offset: 2px !important;
}

/* Vermeidung von ungewolltem Scrolling in zwei Dimensionen */
.prevent-two-dimensional-scroll {
    overflow-x: auto;
    overflow-y: auto;
    white-space: normal;
}

/* Orientierung nicht auf einen spezifischen Bildschirmmodus beschränken */
@media screen and (orientation: portrait), screen and (orientation: landscape) {
    /* Sicherstellen, dass Inhalte in beiden Ansichten nutzbar sind */
    .responsive-orientation {
        max-width: 100%;
        height: auto;
    }
}

/* Benutzerdefinierte Einstellungen für Kontrast werden respektiert */
@media (prefers-contrast: more) {
    :root:not(.high-contrast) {
        --color-primary-500: #0039b3;
        --color-primary-600: #002e8f;
    }
}

/* Unterdrückung von Bildschirmanimationen bei Bedarf (für Nutzer mit Vestibulären Störungen) */
@media (prefers-reduced-motion: reduce), (update: slow) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Bessere Unterstützung für Textabstände, für Nutzer mit Dyslexie oder kognitiven Beeinträchtigungen */
.text-spacing {
    line-height: 1.5;
    letter-spacing: 0.12em;
    word-spacing: 0.16em;
}

/* Hoher Kontrast im Dunklen Modus für Benutzer mit Sehbehinderung */
.dark.high-contrast {
    --color-gray-900: #ffffff;
    --color-gray-800: #f0f0f0;
    --color-gray-100: #000000;
    --color-gray-200: #0a0a0a;
    
    --color-primary-500: #ffcc00;
    --color-primary-700: #ffe066;
}

/* CSS für kontextsensitive Hilfen und Tooltips */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid #ccc;
}

.dark .tooltip .tooltip-text {
    background-color: #333;
    color: #f0f0f0;
    border-color: #555;
}

.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #f0f0f0 transparent transparent transparent;
}

.dark .tooltip .tooltip-text::after {
    border-color: #333 transparent transparent transparent;
}

.tooltip:hover .tooltip-text,
.tooltip:focus .tooltip-text,
.tooltip:focus-within .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Tastaturzugriff für Tooltips */
.tooltip:focus .tooltip-text,
.tooltip-trigger:focus + .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Bessere Unterstützung von mobilen Ansichten */
@media (max-width: 768px) {
    .tooltip .tooltip-text {
        width: 160px;
        margin-left: -80px;
    }
}

/* Verbesserung der Lesbarkeit */
.font-dyslexic {
    font-family: "OpenDyslexic", "Comic Sans MS", sans-serif;
}

.readable-font {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

/* Anpassungen für Tastennavigation */
.keyboard-accessible:focus {
    background-color: #f0f0f0;
    text-decoration: underline;
}

.dark .keyboard-accessible:focus {
    background-color: #333;
}

/* Skip-to-content-Link in dunklem Modus */
.dark .skip-to-content {
    background: #222;
    border: 2px solid #7cb9f1;
    color: #fff;
}