/* ==========================================================
   RWG Accessibility Library
   Version 1.0
========================================================== */

/* ==========================================================
   01 – Sichtbarer Tastaturfokus
========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #f05328 !important;
    outline-offset: 3px !important;
}

/*
 * Elemente beim Anspringen nicht unmittelbar
 * unter einem fixierten Header verstecken.
 */
a,
button,
input,
select,
textarea,
summary,
[role="button"] {
    scroll-margin-top: 120px;
}

/* ==========================================================
   02 – Reduzierte Bewegung
========================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

/* ==========================================================
   03 – Nur für Screenreader sichtbarer Text
========================================================== */

.rwg-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;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * Wird ein verborgenes Element fokussiert,
 * kann es bei Bedarf wieder sichtbar werden.
 */
.rwg-sr-only-focusable:focus,
.rwg-sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}

/* ==========================================================
   04 – Barrierefreies RWG-Orange für Text und Schaltflächen
========================================================== */

:root {
    --rwg-orange-original: #f05328;
    --rwg-orange-accessible: #c63a15;
    --rwg-orange-accessible-hover: #b93413;
}

/* Kleine orange Überschriften auf hellem Hintergrund */
body .rwg-kicker,
body span.rwg-kicker,
body div.rwg-kicker {
    color: var(--rwg-orange-accessible) !important;
}

/* Werte-Popups: orange Schaltflächen mit weißer Schrift */
body .dmpro_popup.rwg-value-more
.dmpro_popup_trigger_button.et_pb_button,
body .rwg-value-more
a.dmpro_popup_trigger_button.et_pb_button {
    background-color: var(--rwg-orange-accessible) !important;
    border-color: var(--rwg-orange-accessible) !important;
    color: #ffffff !important;
}

/* Auch verschachtelte Texte und Pseudoelemente weiß halten */
body .dmpro_popup.rwg-value-more
.dmpro_popup_trigger_button.et_pb_button,
body .dmpro_popup.rwg-value-more
.dmpro_popup_trigger_button.et_pb_button span {
    color: #ffffff !important;
}

/* Hover und Tastaturfokus */
body .dmpro_popup.rwg-value-more
.dmpro_popup_trigger_button.et_pb_button:hover,
body .dmpro_popup.rwg-value-more
.dmpro_popup_trigger_button.et_pb_button:focus-visible {
    background-color: var(--rwg-orange-accessible-hover) !important;
    border-color: var(--rwg-orange-accessible-hover) !important;
    color: #ffffff !important;
}

/* ==========================================================
   05 – Navigation
========================================================== */

/* Aktiver Menüpunkt */
.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a,
.current-menu-parent > a,
.current_page_parent > a {
    color: var(--rwg-orange-accessible) !important;
}