/* ============================================================
   WCAG AA – Globale Fokus- und Accessibility-Stile
   ============================================================ */

/* Skip-Link: versteckt, nur bei Fokus sichtbar */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.2s;
}

.main_hero_text {
    font-size: var(--fs-900);
}

.skip-link:focus {
    top: 0;
}

/* Globaler Fokus-Indikator für alle interaktiven Elemente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--primary-accent, #3E9CFF);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Windows High Contrast Mode Fallback */
@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid ButtonText;
    }
}

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

/* ============================================================
   WCAG AA – Kontrast-Button: fixiert oben rechts
   ============================================================ */
#accessibility-bar {
    position: fixed;
    top: 70px;
    right: 10px;
    z-index: 9999;
    display: flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    gap: 0;
}

.accessibility-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    color: #1a1a1a;
    line-height: 1;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.accessibility-btn:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.accessibility-btn[aria-pressed="true"] {
    background: #1a1a1a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Текст скрыт — только иконка */
.accessibility-btn__label {
    display: none;
}

/* ============================================================
   WCAG AA – Hoher Kontrast (body.high-contrast)
   Design: Dunkel-Navy + weißer Hintergrund — bleibt im
   gleichen blauen Stil des Originals, nur kontrastreicher.
   Alle Kontrastwerte erfüllen WCAG AA (≥ 4.5:1 für Text).
   ============================================================ */
body.high-contrast {
    /* CSS-Variablen-Overrides */
    --fc-primary:        #000000;
    --fc-dark:           #000000;
    --fc-sky:            #ffffff;
    --fc-nav:            #000000;
    --fc-white:          #ffffff;
    --fc-black:          #000000;
    --fc-grey:           #333333;
    --primary-accent:    #000000;
    --clr-primary-dark:  #000000;
    --clr-primary-white: #ffffff;
    --clr-primary-light: #ffffff;
    --clr-border:        #000000;
    background-color: #ffffff;
    color: #000000;
}

/* Normaler Fließtext — NUR im Inhaltsbereich, nicht in Header/Footer */
body.high-contrast #main-content p,
body.high-contrast #main-content li,
body.high-contrast #main-content span,
body.high-contrast #main-content div,
body.high-contrast #main-content td,
body.high-contrast #main-content th,
body.high-contrast #content p,
body.high-contrast #content li,
body.high-contrast #content span,
body.high-contrast #content div,
body.high-contrast #content td,
body.high-contrast #content th {
    color: #000000;
}

/* Schwarzer Text für alles im Header */
/* body.high-contrast header *,
body.high-contrast header a,
body.high-contrast header span,
body.high-contrast header div,
body.high-contrast header li,
body.high-contrast header p {
    color: #000000 !important;
} */

/* Telefon-Link */
body.high-contrast header .button_navigation a.telefon_nav,
body.high-contrast header #header_3 a.telefon_nav,
body.high-contrast header #header_3 a {
    color: #000000 !important;
    background: unset !important;
    border: none !important;
}

/* Status-Label (geöffnet/geschlossen) im Header */
body.high-contrast header .status-container span,
body.high-contrast header #header_3 .status-container span {
    color: #000000 !important;
}

/* Links — schwarz mit Unterstreichung */
body.high-contrast a {
    color: #000000;
    text-decoration: underline;
}

body.high-contrast a:hover {
    color: #333333;
    text-decoration: underline;
}

body.high-contrast a:visited {
    color: #222222;
}

/* Buttons & CTA — weiß mit schwarzem Rand */
body.high-contrast button,
body.high-contrast .btn,
body.high-contrast [type="button"],
body.high-contrast [type="submit"],
body.high-contrast .button_navigation a,
body.high-contrast .collection_container {
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 8px;;
}
body.home,
.col_subsite {
    button.seasonal-nav,
    button,
    .btn,
    [type="button"],
    [type="submit"],
    .button_navigation a,
    .collection_container {
        transition: transform 0.3s ease;
    }
}

body.home,
.col_subsite{
    button:hover,
    .btn:hover,
    [type="button"]:hover,
    [type="submit"]:hover,
    .button_navigation a:hover,
    .collection_container:hover {
        transform: scale(1.01);
    }
}
    

body.high-contrast #header_2 .Hauptnavigation ul.level_1 a{
    color: #000000 ;
}

body.high-contrast .contact_bot_footer .collection_container {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
}

body.high-contrast button:hover,
body.high-contrast .btn:hover,
body.high-contrast .collection_container:hover {
    border-color: #000000 !important;
}

/* Header — weißer Hintergrund, schwarzer Text */
body.high-contrast header,
body.high-contrast #header_2,
body.high-contrast .hamburger-menu {
    background: #ffffff !important;
    color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
}

body.high-contrast header a,
body.high-contrast #header_2 a,
body.high-contrast .hamburger-menu a,
body.high-contrast nav a {
    color: #000000 !important;
}

body.high-contrast nav a:hover,
body.high-contrast nav a:focus {
    color: #333333 !important;
    text-decoration: underline !important;
}

/* Mega-Menü Hintergrund — weiß */
body.high-contrast .header__main-nav {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
}

/* Mega-Menü Links — schwarz */
body.high-contrast .header__main-nav a,
body.high-contrast .header__alllinks a,
body.high-contrast .header__main-nav p,
body.high-contrast .header__main-nav span,
body.high-contrast .header__main-nav li,
body.high-contrast .nav_description_wrapper * {
    color: #000000 !important;
}

/* Logo-Bereich — kein Filter, normales Aussehen */
body.high-contrast #header_1 img {
    filter: none;
}

/* Bilder im Inhaltsbereich leicht schärfer, aber nicht Logo/Icons */
body.high-contrast #main-content img,
body.high-contrast #content img {
    filter: contrast(1.1) saturate(1.1);
}

/* Akzentlinie unter Navpunkten */
body.high-contrast .header__alllinks {
    border-bottom-color: #000000 !important;
}

/* Footer — weißer Hintergrund, schwarzer Text */
body.high-contrast footer,
body.high-contrast #footer,
body.high-contrast #footer-header,
body.high-contrast #privacy-policy {
    background: #ffffff !important;
    color: #000000 !important;
    border-top: 2px solid #000000 !important;
}

body.high-contrast footer a,
body.high-contrast #footer a,
body.high-contrast #footer-header a {
    color: #000000 !important;
    text-decoration: underline;
}

body.high-contrast footer a:hover,
body.high-contrast #footer a:hover {
    color: #333333 !important;
}

/* Eingabefelder */
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.high-contrast input:focus,
body.high-contrast select:focus,
body.high-contrast textarea:focus {
    border-color: #000000 !important;
    outline: 3px solid #000000 !important;
}

/* Trennlinien / Rahmen */
body.high-contrast hr,
body.high-contrast .divider {
    border-color: #000000;
}

/* Bilder leicht schärfer */
body.high-contrast img {
    filter: contrast(1.1) saturate(1.1);
}

/* Top-Bar Container-Hintergrund explizit */
body.high-contrast #header_2 > .container {
    background: #ffffff !important;
}

/* Akzentlinie unter Navpunkten */
body.high-contrast .header__alllinks {
    border-bottom-color: #000000 !important;
}

/* Accessibility-Bar im Kontrast-Modus */
body.high-contrast #accessibility-bar {
    background: transparent;
    border: none;
}

body.high-contrast .accessibility-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #000000;
    border: 2px solid #000000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

body.high-contrast .accessibility-btn[aria-pressed="true"] {
    /* background: #000000; */
    color: #ffffff;
    border-color: #000000;
}

body.high-contrast .col-kalender_outlook .textcontent {
    border: 1px solid var(--clr-primary-dark);
}

body.high-contrast .col-kalender_outlook .textcontent:focus-visible {
    border: 1px solid var(--clr-primary-dark);
}

body.high-contrast .collection_container.Veranstaltung {
    border: 2px solid #000000;
    box-shadow: none;
    overflow: visible;
}

body.high-contrast.veranstaltungen #position {
    gap: 12px;
}

@media (max-width: 992px) {
    body.high-contrast.veranstaltungen #position {
        grid-template-columns: 1fr;
    }
}

/* Statusindikator (Rathaus offen/geschlossen) */
body.high-contrast .status-container span {
    color: inherit !important;
}

/* ============================================================
   WCAG AA – OS-Hochkontrastmodus (prefers-contrast: more)
   ============================================================ */
@media (prefers-contrast: more) {
    :root {
        --fc-primary:     #000000;
        --primary-accent: #000000;
        --clr-primary-light: #ffffff;
    }

    a                  { color: #000000; text-decoration: underline; }
    a:visited          { color: #222222; }
    a:hover            { color: #333333; }

    button, .btn, [type="button"], [type="submit"] {
        background: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }

    input, select, textarea {
        border: 2px solid #000000 !important;
    }
}

/* ============================================================
   WCAG AA – Focus-Indikator erzwingen (überschreibt outline:none
   aus compiled.css / bc-style.min.css / dd.css)
   ============================================================ */
*:focus-visible {
    outline: 3px solid var(--primary-accent, #000000) !important;
    outline-offset: 3px !important;
    border-radius: 2px;
}



@media (forced-colors: active) {
    *:focus-visible {
        outline: 3px solid ButtonText !important;
    }
}