/* =====================================================================
   rlv_site_package – Barrierefreiheit (WCAG 2.2 AA)
   Ergänzungen, die das bestehende Layout nicht verändern:
   – Fokusrahmen erscheinen nur bei Tastaturbedienung (:focus-visible),
   – Zusatztexte für Screenreader nutzen .visually-hidden (Bootstrap),
   – neue Bedienelemente (Sprunglink, Karussell-Pause) sind klein bzw.
     erst bei Tastaturfokus sichtbar.
   ===================================================================== */

/* ---- 1. Sichtbarer Tastaturfokus (WCAG 2.4.7 / 2.4.11) ----------------
   Schwarzer Rahmen + weißer Außenring: auf hellem und dunklem Grund
   erkennbar. !important, weil ältere Regeln outline:none setzen. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #fff !important;
}
/* Formularfelder: schlichter Rahmen ohne Außenring (Felder zeigen den Fokus auch bei Mausklick).
   Der Rahmen liegt innen auf dem Feldrand (outline-offset -2px) und kann daher von
   umgebenden Containern nie abgeschnitten werden. */
input:not([type="hidden"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #000 !important;
    outline-offset: -2px !important;
}
/* Kleine Auswahlfelder: Rahmen außen mit Abstand, innen wäre er im Feld nicht erkennbar */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline-offset: 2px !important;
}
/* Programmatisch fokussierte Sprungziele (main, Seitenanfang) ohne Rahmen */
[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* Karussell-Pfeile sind große transparente Flächen: Rahmen innen zeichnen */
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible { outline-offset: -4px !important; }

/* ---- 1b. Fokusrahmen nicht abschneiden (WCAG 2.4.7 / 2.4.11) ----------
   Rahmen werden außerhalb des Elements gezeichnet; Container mit overflow:hidden
   schneiden sie ab. Deshalb:
   – #content-wrapper hat kein overflow-hidden mehr (Layouts), Sicherheitsnetz gegen
     waagerechtes Scrollen nur noch am Fensterrand (clip erzeugt keinen Scroll-Container),
   – lange Links/E-Mail-Adressen im Fließtext brechen um statt die Seite zu verbreitern,
   – Text-&-Bild-Elemente umschließen Floats per flow-root statt overflow:hidden,
   – News-Titel (3 Zeilen, overflow:hidden) bekommen seitlich Platz für den Rahmen,
   – Links in Bildrahmen mit Zuschnitt und in der waagerecht scrollenden
     Themen-Navigation zeichnen den Rahmen innen. */
html { overflow-x: clip; }
#content-main :is(p, li, td, dd, address) a { overflow-wrap: anywhere; }
.ce-textpic,
.ce-image,
.ce-gallery,
.ce-row,
.ce-nowrap .ce-bodytext {
    overflow: visible;
    display: flow-root;
}
/* News-Titel sind auf 3 Zeilen gekürzt (overflow:hidden): seitlich Platz schaffen ohne
   Layoutänderung, Rahmen 2px direkt am Text, ohne weißen Außenring */
body .news-list-view .header h3 {
    padding-inline: 4px;
    margin-inline: -4px;
}
body .news-list-view .header h3 a:focus-visible {
    outline-width: 2px !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
}
.news-img-wrap a:focus-visible {
    outline-offset: -6px !important;
    box-shadow: none !important;
}
/* Themen-Navigation scrollt mobil waagerecht (overflow-x:auto): Rahmen innen im Link */
nav.secondary-navigation .nav-link:focus-visible {
    outline-offset: -3px !important;
    box-shadow: none !important;
}

/* Seit #content-wrapper nicht mehr abschneidet: Bootstrap-Zeilen haben -12px Rand und ragten
   mit Hintergrund heraus (grauer Footer-Kasten, mobil der „Weitere Meldungen laden“-Button).
   Footer schneidet waagerecht selbst ab (Links darin haben 30px Innenabstand), Button bekommt
   mobil den fehlenden rechten Spaltenabstand. Ergebnis wie vorher: bündig mit dem Inhalt. */
#content-wrapper footer { overflow-x: clip; }
@media (max-width: 767.98px) {
    .rlv-news-more { padding-right: 12px; }
}

/* ---- 2. Sprunglink „Zum Inhalt springen“ (WCAG 2.4.1) ----------------
   Unsichtbar, erscheint nur bei Tastaturfokus oben links. */
.rlv-skip-link.visually-hidden-focusable:focus,
.rlv-skip-link.visually-hidden-focusable:focus-within {
    position: fixed !important;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    width: auto !important;
    height: auto !important;
    padding: .75rem 1.25rem !important;
    margin: 0 !important;
    clip: auto !important;
    background: #fff;
    color: #000;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}
/* Startseiten-Link im klassischen Kopf (nur bei Tastaturfokus sichtbar) */
.rlv-home-link.visually-hidden-focusable:focus {
    position: absolute !important;
    top: .5rem;
    left: .5rem;
    z-index: 10;
    width: auto !important;
    height: auto !important;
    padding: .5rem 1rem !important;
    clip: auto !important;
    background: #fff;
    color: #000;
    font-weight: 700;
}

/* ---- 3. Karussell: Pause/Abspielen-Schalter (WCAG 2.2.2) ------------- */
.rlv-carousel-host { position: relative; }
.rlv-carousel-toggle {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .35);
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: #000;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
    transition: opacity .15s ease;
}
.rlv-carousel-toggle:hover,
.rlv-carousel-toggle:focus-visible { opacity: 1; }
/* Banner-Karussell: kleiner Schalter rechts unter dem Banner (im Weißraum, nicht auf der Werbung) */
.rlv-carousel-toggle--below {
    top: 100%;
    bottom: auto;
    right: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 2px;
    font-size: .6rem;
}

/* Karussell mit Punkte-Navigation (z. B. News-Karussell): Schalter direkt neben den Punkten */
.carousel-indicators .rlv-carousel-toggle {
    position: static;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 1.5rem;
    height: 1.5rem;
    margin: 2px 0 0 .5rem;
    font-size: .6rem;
    text-indent: 0;
}

/* Kundenwunsch (19.10.2026): Pause/Abspielen-Schalter ausblenden.
   Das Anhalten bei Tastaturfokus und bei "Bewegung reduzieren" bleibt aktiv (a11y.js).
   Zum Wiedereinblenden diese Regel entfernen. */
.rlv-carousel-toggle {
    display: none !important;
}

/* Themen-Navigation (OG-Profi) liegt mit einer unsichtbaren Fläche über dem Karussell-Kopf
   und blockierte dort Klicks (Punkte, Pause). Nur die Menüpunkte selbst bleiben klickbar. */
nav.secondary-navigation { pointer-events: none; }
nav.secondary-navigation .navbar-nav { pointer-events: auto; }

/* ---- 4. Mindestgröße von Klickflächen (WCAG 2.5.8, 24 × 24 px) -------
   Inline-Padding vergrößert nur die Klickfläche, nicht den Zeilenabstand. */
.rlv-contact__meta a[href^="tel:"] {
    padding-block: 1px;
}
/* „Lesen“-Link liegt über dem Karten-Link (stretched-link), damit er klickbar bleibt */
.article .more-button .more { position: relative; z-index: 2; }

/* ---- 5. Bewegung reduzieren (WCAG 2.3.3, Systemeinstellung) ---------- */
@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}