:root {
    --sat-focus-color: #111111;
    --sat-focus-contrast: #ffffff;
    --sat-focus-width: 4px;
    --sat-focus-offset: 4px;
}

/* Skip-Link */
.sat-skiplinks {
    position: relative;
    z-index: 999999;
}

.sat-skiplink,
.sat-skiplink:visited {
    position: fixed;
    left: 16px;
    top: -120px;
    z-index: 999999;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 18px;
    background: #ffffff;
    color: #111111;
    border: 3px solid #111111;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.sat-skiplink:focus,
.sat-skiplink:focus-visible,
.sat-skiplink:active {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
    outline: 4px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #111111, 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* Globaler Tastaturfokus */
.sat-focus-styles :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--sat-focus-width) solid var(--sat-focus-color) !important;
    outline-offset: var(--sat-focus-offset) !important;
    box-shadow: 0 0 0 3px var(--sat-focus-contrast) !important;
}

/* Textlinks im Inhalt etwas kompakter, aber weiterhin klar sichtbar */
.sat-focus-styles :where(main, .site-content, .entry-content) a:focus-visible {
    outline-width: 3px !important;
    outline-offset: 3px !important;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .sat-reduced-motion *,
    .sat-reduced-motion *::before,
    .sat-reduced-motion *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

/* Kleine Touch-Ziele nur für typische Icon-/Toggle-Elemente anheben. */
@media (pointer: coarse) {
    .sat-touch-targets :where(button, [role="button"], .menu-toggle, .search-toggle, .social-navigation a) {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Visuell versteckte, für Screenreader verfügbare Beschriftungen */
.sat-screen-reader-text {
    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;
}

/* Tastatur-geöffnete Dropdowns sichtbar halten, ohne Mausverhalten des Themes zu ersetzen. */
.sat-submenu-open > .sub-menu,
.sat-submenu-open > ul {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Automatisch ergänzte Dateitypen bleiben dezent, aber sichtbar. */
.sat-file-meta {
    white-space: nowrap;
    font-size: .9em;
    font-weight: 600;
}

/* Nutzerpräferenz für erhöhten Kontrast respektieren. */
@media (prefers-contrast: more) {
    .sat-prefer-contrast :where(a:not(.sat-skiplink)) {
        text-decoration-thickness: 2px;
        text-underline-offset: .18em;
    }
    .sat-prefer-contrast :where(button, input, select, textarea, summary, [role="button"]) {
        border-width: max(2px, var(--sat-control-border-width, 2px));
    }
    .sat-prefer-contrast :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline-width: 5px !important;
        outline-offset: 4px !important;
    }
}

/* Wiederverwendbare Screenreader-Hilfsklassen. */
.sat-screenreader-helpers .sat-screen-reader-text-focusable:not(:focus):not(:focus-within) {
    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;
}

/* Ungültige Felder erhalten zusätzlich zur vorhandenen Theme-Darstellung eine robuste Kontur. */
[aria-invalid="true"] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}