/* Accessibility Widget – Osnaboard (visuell an Cookiebanner angelehnt) */

/* OpenDyslexic – eingebettet via CDN */
@font-face {
    font-family: 'OpenDyslexic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic/web/OpenDyslexic-Regular.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic/web/OpenDyslexic-Regular.woff') format('woff');
}

/* Container wie Cookiebanner */
.a11y-banner {
    position: fixed;
    left: 32px;
    right: 32px;
    bottom: 32px;
    z-index: 9999;
    background: rgba(24, 26, 32, 0.98);
    border: 2.5px solid var(--osnaboard-s-heading, #3b82f6);
    box-shadow: 0 8px 48px 0 rgba(30, 32, 41, 0.32);
    font-family: 'Inter', Arial, sans-serif;
    padding: 0;
    margin: 0;
    border-radius: 32px;
    max-width: 520px;
    min-width: 300px;
    transition: box-shadow 0.3s, transform 0.3s;
    animation: a11y-fadein-up 0.7s cubic-bezier(.4, 1.6, .6, 1);
}

@media (max-width: 700px) {
    .a11y-banner {
        left: 2vw;
        right: 2vw;
        bottom: 2vw;
        max-width: 98vw;
        min-width: unset;
        border-radius: 18px;
    }
}

@keyframes a11y-fadein-up {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* Inhalt an Cookie-Styles angelehnt: wir nutzen vorhandene Klassen .cookie-... */
.a11y-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    color: #fff;
    text-align: left;
}

/* Floating Button analog */
.a11y-floating-btn {
    position: fixed;
    left: 96px;
    /* etwas rechts vom Cookie-Button, damit sie sich nicht überlagern */
    bottom: 32px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    border: 2.5px solid var(--osnaboard-s-heading, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    transition: border-color 0.18s, background 0.18s, transform 0.16s;
    animation: a11yBtnFadeIn 0.5s cubic-bezier(.4, 1.6, .6, 1);
}

.a11y-floating-btn .fa-universal-access {
    font-size: 2rem;
    color: var(--osnaboard-s-heading, #3b82f6);
    transition: color 0.18s;
}

/* Höhere Spezifität, damit globale button:hover-Regeln aus style.css nicht übersteuern */
button.a11y-floating-btn:hover,
button.a11y-floating-btn:focus {
    border-color: var(--osnaboard-s-heading, #3b82f6) !important;
    transform: scale(1.07);
}

/* Icon-Farbe bleibt auf Hover/Focus unverändert */
button.a11y-floating-btn:hover .fa-universal-access,
button.a11y-floating-btn:focus .fa-universal-access {
    color: var(--osnaboard-s-heading, #3b82f6) !important;
}

/* Kurzzeitig Hover-Effekte deaktivieren, wenn Banner schließt */
button.a11y-floating-btn.no-hover {
    pointer-events: none;
}

@media (max-width: 700px) {
    .a11y-floating-btn {
        left: auto;
        right: 2vw;
        bottom: 2vw;
        /* Mobil: unten rechts positioniert */
        width: 48px;
        height: 48px;
    }
}

@keyframes a11yBtnFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(40px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* Lightmode Varianten */
body.lightmode .a11y-banner {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--osnaboard-s-heading, #2563eb);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
}

body.lightmode .a11y-content {
    color: var(--osnaboard-s-text, #111827);
}

/* Lightmode Varianten für den Floating-Button analog Cookie-Button */
body.lightmode .a11y-floating-btn {
    border-color: #2d7f83;
    background: transparent;
}

body.lightmode .a11y-floating-btn .fa-universal-access {
    color: #2d7f83;
}

/* Screenreader-only utility */
.sr-only {
    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;
}

/* Accessibility-Effekte am Dokumentkörper */
body.a11y-text-lg {
    font-size: 112.5%;
}

body.a11y-text-xl {
    font-size: 125%;
}

/* Kompaktes Segment-Control für Textgröße (M/L/XL) */
.a11y-size-group {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    overflow: hidden;
}

.a11y-size-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.a11y-size-group label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .75rem;
    min-width: 44px;
    /* Zielgröße für Touch */
    font-size: .95rem;
    line-height: 1;
    font-weight: 600;
    background: rgba(31, 41, 55, 0.5);
    color: #e5e7eb;
    border-right: 1px solid rgba(148, 163, 184, 0.25);
    cursor: pointer;
    user-select: none;
    transition: background .2s ease, color .2s ease;
}

.a11y-size-group label:last-of-type {
    border-right: 0;
}

.a11y-size-group label:hover {
    background: rgba(31, 41, 55, 0.7);
}

.a11y-size-group input[type="radio"]:focus-visible+label {
    outline: 2px solid var(--osnaboard-s-heading, #3b82f6);
    outline-offset: 2px;
}

.a11y-size-group input[type="radio"]:checked+label {
    background: var(--osnaboard-s-success, #2d7f83);
    color: #ffffff;
}

/* Lightmode Varianten für Segment-Control */
body.lightmode .a11y-size-group {
    border-color: rgba(0, 0, 0, 0.12);
}

body.lightmode .a11y-size-group label {
    background: #f3f4f6;
    color: #111827;
    border-right-color: rgba(0, 0, 0, 0.08);
}

body.lightmode .a11y-size-group label:hover {
    background: #e5e7eb;
}

body.lightmode .a11y-size-group input[type="radio"]:checked+label {
    background: var(--osnaboard-s-heading, #2563eb);
    color: #ffffff;
}

/* Dyslexie-Schrift anwenden */
body.a11y-dyslexic {
    font-family: 'OpenDyslexic', 'Inter', Arial, sans-serif !important;
    letter-spacing: 0.01em;
}

/* Hoher Kontrast: Baseline-Verbesserungen */
body.a11y-contrast {
    background-color: #0b0b0b !important;
    color: #ffffff !important;
}

body.a11y-contrast a {
    color: #93c5fd !important;
    text-decoration: underline;
}

body.a11y-contrast .stg-container,
body.a11y-contrast header,
body.a11y-contrast footer,
body.a11y-contrast section,
body.a11y-contrast .card,
body.a11y-contrast .cookie-consent-banner,
body.a11y-contrast .a11y-banner {
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Links unterstreichen */
body.a11y-underline-links a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* Fokus sichtbar: generische Outlines für viele Fokus-Targets */
body.a11y-focus-visible :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #f59e0b !important;
    /* Amber */
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Bewegungen reduzieren */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Skip-Link: sichtbar beim Fokus, permanent sichtbar im Screenreader-Modus */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: .6rem 1rem;
    background: #111827;
    color: #fff;
    border: 2px solid var(--osnaboard-s-heading, #3b82f6);
    border-radius: 8px;
    z-index: 10002;
}

.skip-link:focus {
    left: 16px;
    top: 16px;
}

body.a11y-screenreader .skip-link {
    left: 16px;
    top: 16px;
}