/* =============================
   Schriftgrößen
============================= */
body.font-normal {
    font-size: 16px !important;
}

body.font-large {
    font-size: 18px !important;
}

body.font-x-large {
    font-size: 20px !important;
}

/* =============================
     Hoher Kontrast
  ============================= */
body.high-contrast,
body.high-contrast * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

body.high-contrast *:focus {
    outline: 3px dashed yellow !important;
}

/* =============================
     Fokus-Sichtbarkeit
  ============================= */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 3px;
    box-shadow: none !important;
}

/* =============================
     Tastaturnavigation
  ============================= */
body.keyboard-nav a:focus,
body.keyboard-nav button:focus,
body.keyboard-nav input:focus,
body.keyboard-nav textarea:focus,
body.keyboard-nav select:focus {
    outline: 3px solid #ff9800 !important;
    outline-offset: 2px;
    background-color: #fff3e0 !important;
    color: #000 !important;
}

body.keyboard-nav.high-contrast *:focus {
    outline: 3px dashed yellow !important;
    background-color: #000 !important;
    color: #fff !important;
}

/* Dropdowns per Tastatur sichtbar machen */
body.keyboard-nav #mainmenu li:focus-within>ul,
body.keyboard-nav #mainmenu li:focus-within>.submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

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

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =============================
     Screenreader-only Bereich
  ============================= */
.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;
}

/* Optional sichtbare Live-Region */
[aria-live] {
    margin-top: 10px;
    font-weight: bold;
}

/* =============================
     Dyslexie-freundliche Schrift
  ============================= */
@import url('https://cdn.jsdelivr.net/npm/open-dyslexic@0.1.1/open-dyslexic.css');

body.dyslexic-font {
    font-family: "OpenDyslexic", Arial, sans-serif !important;
}

/* =============================
     Mauszeiger-Hervorhebung
  ============================= */
body.cursor-highlight {
    cursor: none !important;
}

.cursor-ring {
    position: fixed;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border: 3px solid red;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
}

/* =============================
     Linkziel-Anzeige (🔗, ⬇️, ✉️, →)
  ============================= */
body.link-hints a[target="_blank"]::after {
    content: " 🔗";
    font-size: 0.9em;
}

body.link-hints a[download]::after {
    content: " ⬇️";
    font-size: 0.9em;
}

body.link-hints a[href^="mailto:"]::after {
    content: " ✉️";
    font-size: 0.9em;
}

body.link-hints a:not([href^="mailto:"]):not([download]):not([target="_blank"])::after {
    content: " →";
    font-size: 0.9em;
}

/* Sichtbar machen zum Debuggen */
body.link-hints a::after {
    margin-left: 4px;
}

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

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #005fcc;
    color: white;
    padding: 0.5em;
}

input:invalid,
textarea:invalid,
select:invalid {
    border: 2px solid red;
    background-color: #ffe6e6;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}