/* Barrierefreiheit – BITV 2.0 / WCAG 2.1 AA Ergänzungen */

/* Fokus sichtbar auf allen interaktiven Elementen */
:focus-visible {
    outline: 3px solid #005a9c;
    outline-offset: 2px;
}

.skip-link:focus-visible {
    outline: 3px solid #ffbf00;
    outline-offset: 0;
}

/* Reduzierte Bewegung (Systemeinstellung + manuell) */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Hoher Kontrast — Variablen + klare Struktur statt „flach schwarz“ */
html.high-contrast,
body.high-contrast {
    --color-text: #000000;
    --color-text-light: #141414;
    --color-text-muted: #1f1f1f;
    --color-bg: #ffffff;
    --color-bg-cool: #f2f2f2;
    --color-bg-warm: #f7f7f7;
    --color-border: #000000;
    --color-border-light: #2b2b2b;
    --color-primary: #00004d;
    --color-primary-dark: #000000;
    --color-primary-light: #000080;
    --color-accent-light: #cce0ff;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

html.high-contrast {
    scroll-behavior: auto;
}

html.high-contrast body {
    background: var(--color-bg);
    color: var(--color-text);
}

html.high-contrast :focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
}

html.high-contrast a:not(.btn):not(.quick-item):not(.nav-link):not(.event-card__link):not(.news-compact):not(.news-featured__link) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Karten & Blöcke: Rahmen statt Schatten */
html.high-contrast .news-featured,
html.high-contrast .news-compact,
html.high-contrast .event-card,
html.high-contrast .service-card,
html.high-contrast .topic-card,
html.high-contrast .teaser-card,
html.high-contrast .overview-news,
html.high-contrast .overview-bergblick,
html.high-contrast .overview-about,
html.high-contrast .overview-service {
    border: 2px solid #000 !important;
    box-shadow: none !important;
}

html.high-contrast .hub-page-nav__link {
    border: 2px solid #000 !important;
}

html.high-contrast .hub-page-nav__link.is-active {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

html.high-contrast .discover-card,
html.high-contrast .bergblick-banner,
html.high-contrast .dgs-section,
html.high-contrast .detail-block,
html.high-contrast .hub-section--white .container > .detail-block,
html.high-contrast .page-hero {
    border: 2px solid #000 !important;
    box-shadow: none !important;
}

html.high-contrast .hero-ki__bar {
    background: #fff !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
}

html.high-contrast .hero-ki__submit {
    background: #000;
    border: 2px solid #000;
    color: #fff;
}

html.high-contrast .hero-ki__messages {
    background: #fff;
    border: 2px solid #000;
}

html.large-text .hero-inner {
    gap: 1.25rem;
}

html.large-text .hero-ki__bar input {
    font-size: 1.05rem;
}

/* Rechtstext-Seiten */

html.high-contrast .quick-item {
    border: 2px solid #000;
    box-shadow: none;
}

html.high-contrast .site-header {
    border-bottom: 2px solid #000;
    background: #fff;
}

html.high-contrast .main-nav {
    background: #fff;
}

html.high-contrast .submenu {
    border: 2px solid #000;
    box-shadow: none;
}

html.high-contrast .nav-link.active,
html.high-contrast .nav-link[aria-current="page"] {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Hero: stärkerer Overlay, klare weiße Schrift */
html.high-contrast .hero-overlay {
    background: linear-gradient(
        165deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.75) 55%,
        rgba(0, 0, 0, 0.82) 100%
    ) !important;
}

html.high-contrast .hero-badge {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.high-contrast .hero-title,
html.high-contrast .hero-desc {
    color: #fff;
    text-shadow: none;
}

/* Alert & CTA */
html.high-contrast .alert-bar {
    background: #000;
    color: #fff;
    border-bottom: 2px solid #fff;
}

html.high-contrast .alert-bar__badge {
    background: #fff;
    color: #000;
    border: 2px solid #000;
}

html.high-contrast .alert-bar__text a {
    color: #fff;
    text-decoration: underline;
}

html.high-contrast .cta-banner {
    background: #000 !important;
    border: 2px solid #000;
    color: #fff;
}

html.high-contrast .cta-banner__text,
html.high-contrast .cta-banner__title {
    color: #fff;
}

/* Buttons */
html.high-contrast .btn-primary,
html.high-contrast .btn-white {
    background: #000;
    border: 2px solid #000;
    color: #fff;
}

html.high-contrast .btn-outline {
    background: #fff;
    border: 2px solid #000;
    color: #000;
}

html.high-contrast .btn-outline:hover,
html.high-contrast .btn-outline:focus-visible {
    background: #000;
    color: #fff;
}

/* Event-Karten */
html.high-contrast .event-card__media-shade {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.2) 70%) !important;
}

html.high-contrast .event-badge {
    border: 2px solid #000;
    box-shadow: none;
}

html.high-contrast .event-card__category {
    background: #fff;
    color: #000;
    border: 2px solid #000;
}

html.high-contrast .event-card:hover,
html.high-contrast .news-featured:hover,
html.high-contrast .news-compact:hover,
html.high-contrast .service-card:hover,
html.high-contrast .topic-card:hover {
    transform: none;
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* Footer & Contact */
html.high-contrast .site-footer {
    border-top: 3px solid #fff;
}

html.high-contrast .site-footer a {
    color: #fff;
    text-decoration: underline;
}

html.high-contrast .contact-strip {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

/* Formulare */
html.high-contrast input,
html.high-contrast textarea,
html.high-contrast select,
html.high-contrast .search-form input {
    border: 2px solid #000 !important;
    background: #fff;
    color: #000;
}

html.high-contrast .search-btn {
    border: 2px solid #000;
}

/* ============================================
   Größere Schrift — proportional, kein Layout-Bruch
   ============================================ */
html.large-text {
    font-size: 112.5%;
}

html.large-text body {
    line-height: 1.7;
}

html.large-text .hero {
    height: auto;
    min-height: clamp(360px, 52vh, 600px);
}

html.large-text .hero-title {
    line-height: 1.2;
}

html.large-text .hero-desc,
html.large-text .section-title,
html.large-text .page-title {
    line-height: 1.3;
}

html.large-text .event-card__title,
html.large-text .news-featured__title,
html.large-text .topic-card__title {
    line-height: 1.35;
}

html.large-text .event-card__excerpt {
    -webkit-line-clamp: 3;
}

html.large-text .quick-label {
    font-size: 0.9rem;
}

html.large-text .nav-link {
    line-height: 1.4;
}

html.large-text .a11y-toolbar__inner {
    row-gap: 0.5rem;
}

html.large-text img,
html.large-text video,
html.large-text svg {
    max-width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    html.large-text .events-grid,
    html.large-text .news-layout,
    html.large-text .service-grid,
    html.large-text .home-overview__spotlight,
    html.large-text .home-overview__services {
        grid-template-columns: 1fr;
    }

    html.large-text .discover-grid {
        grid-template-columns: 1fr;
    }

    html.large-text .quick-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    html.large-text .quick-row {
        grid-template-columns: 1fr;
    }

    html.large-text .header-inner {
        gap: 0.75rem;
    }
}

/* Kombination: hoher Kontrast + große Schrift */
html.high-contrast.large-text .event-card__excerpt,
html.high-contrast.large-text .news-featured__excerpt {
    color: var(--color-text-light);
}

/* Rechtstext-Seiten */
.legal-content {
    max-width: 760px;
}

.legal-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: var(--color-text);
}

.legal-content h3 {
    font-size: 1.1rem;
    font-weight: 650;
    margin: 1.5rem 0 0.5rem;
}

.legal-content p,
.legal-content li {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
}

.legal-content ul,
.legal-content ol {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.legal-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Meldungs- und Artikelseiten */
.article-content {
    max-width: 760px;
}

.article-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: var(--color-text);
}

.article-content h3 {
    font-size: 1.1rem;
    font-weight: 650;
    margin: 1.5rem 0 0.5rem;
}

.article-content p,
.article-content li {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
}

.article-content ul,
.article-content ol {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.article-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-image {
    margin: 0 0 1.5rem;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: auto;
    display: block;
}

.article-back {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

/* Leichte Sprache */
.leichte-sprache {
    font-size: 1.125rem;
    line-height: 1.9;
}

.leichte-sprache p {
    max-width: 65ch;
}

.leichte-sprache .info-box {
    background: var(--color-bg-cool);
    border-left: 4px solid var(--color-primary);
    padding: 1.25rem 1.5rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 1.5rem 0;
}

/* DGS-Bereich */
.dgs-section {
    background: var(--color-bg-warm);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--color-border);
}

.dgs-video-wrapper {
    aspect-ratio: 16 / 9;
    background: var(--color-bg-cool);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    margin-top: 1rem;
}

.dgs-placeholder {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-light);
}

/* ============================================
   VERSTECKTE SVG-FILTER
   ============================================ */
.a11y-svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ============================================
   BARRIEREFREIHEITS-TOOLBAR (Container für SVG-Filter + Panel)
   Button ist im site-header
   ============================================ */
.a11y-toolbar {
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    z-index: auto;
}

/* ---- Header-Button ---- */
.a11y-widget {
    position: relative;
}
.a11y-header-btn {
    display: flex;
    align-items: center;
    gap: calc(7px * var(--a11y-font-scale, 1));
    background: var(--color-bg-cool);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: calc(6px * var(--a11y-font-scale, 1)) calc(12px * var(--a11y-font-scale, 1));
    font-family: inherit;
    font-size: calc(13px * var(--a11y-font-scale, 1));
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    min-height: calc(40px * var(--a11y-font-scale, 1));
    transition: all 0.15s ease;
    white-space: nowrap;
}
.a11y-header-btn:hover,
.a11y-header-btn:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #fff;
    outline: none;
}
.a11y-header-btn[aria-expanded="true"] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.a11y-header-btn__icon {
    flex-shrink: 0;
    width: calc(20px * var(--a11y-font-scale, 1));
    height: calc(20px * var(--a11y-font-scale, 1));
}
.a11y-header-btn__chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
    opacity: 0.6;
}
.a11y-header-btn[aria-expanded="true"] .a11y-header-btn__chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* ---- Panel ----
   position:absolute relativ zum .a11y-widget-Wrapper im Header.
   Dadurch bewegt sich das Panel automatisch exakt mit dem Button mit
   (auch beim Scrollen mit dem sticky Header) — ganz ohne JS-Positionierung. */
.a11y-panel {
    display: none;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 36px rgba(0, 34, 68, 0.18);
    overflow: hidden;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 400px;
    max-width: min(400px, calc(100vw - 24px));
    z-index: 1200;
}
.a11y-panel.is-open {
    display: block;
}
.a11y-panel__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-height: calc(100vh - var(--site-header-height) - 1.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: inherit;
    -webkit-overflow-scrolling: touch;
}
.a11y-panel__body > * {
    flex-shrink: 0;
}

/* ---- Option-Toggle (Haupt-Buttons) ---- */
.a11y-opt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    background: var(--color-bg-cool);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 1rem 1.05rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    min-height: 44px;
}
.a11y-opt:hover,
.a11y-opt:focus-visible {
    border-color: var(--color-primary);
    background: #fff;
    outline: none;
}
.a11y-opt[aria-pressed="true"] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.a11y-opt[aria-pressed="true"] .a11y-opt__desc {
    color: rgba(255,255,255,0.8);
}
.a11y-opt__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 0.1rem;
}
.a11y-opt__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.a11y-opt__label {
    display: block;
    line-height: 1.3;
    overflow-wrap: normal;
    white-space: nowrap;
}
.a11y-opt__desc {
    display: block;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--color-text-light);
    line-height: 1.4;
    margin-top: 0.1rem;
    overflow-wrap: anywhere;
}
.a11y-opt--sub {
    background: #fff;
    padding: 0.75rem 0.9rem;
}
.a11y-opt--sub[aria-pressed="true"] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.a11y-opt--sub[aria-pressed="true"] .a11y-opt__label,
.a11y-opt--sub[aria-pressed="true"] .a11y-opt__desc {
    color: #fff;
}
.a11y-opt--sub .a11y-opt__desc {
    font-size: 0.72rem;
}

/* ---- Gruppe (Details/Summary: Schriftgröße, Blaufilter, Farbschwäche) ---- */
.a11y-group {
    background: var(--color-bg-cool);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.a11y-group__summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.05rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    min-height: 44px;
}
.a11y-group__summary::-webkit-details-marker { display: none; }
.a11y-group__summary .a11y-opt__icon {
    margin-top: 0;
}
.a11y-group__head-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: normal;
    white-space: nowrap;
}
.a11y-group__chevron {
    flex-shrink: 0;
    color: var(--color-text-light);
    transition: transform 0.2s ease;
}
.a11y-group[open] .a11y-group__summary {
    color: var(--color-primary);
}
.a11y-group[open] .a11y-group__chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}
.a11y-group__body {
    padding: 0 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.a11y-group__body .a11y-opt {
    background: #fff;
}
.a11y-group__body .a11y-opt[aria-pressed="true"] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.a11y-group__body .a11y-opt[aria-pressed="true"] .a11y-opt__label,
.a11y-group__body .a11y-opt[aria-pressed="true"] .a11y-opt__desc {
    color: #fff;
}

/* ---- Schriftgröße ---- */
.a11y-fontsize {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.a11y-fontsize__btn {
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.7rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    min-height: 40px;
    min-width: 44px;
}
.a11y-fontsize__btn:hover,
.a11y-fontsize__btn:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.a11y-fontsize__btn--lg {
    font-size: 0.95rem;
}
.a11y-fontsize__slider {
    flex: 1;
    accent-color: var(--color-primary);
    min-height: 28px;
}

/* ---- Slider-Reihe ---- */
.a11y-slider-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}
.a11y-slider-row__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-light);
}
.a11y-slider {
    flex: 1;
    accent-color: var(--color-primary);
    min-height: 28px;
}

/* ---- Select ---- */
.a11y-select {
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--color-text);
    cursor: pointer;
    min-height: 44px;
}
.a11y-select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ---- Mehrfunktionen (Details) ---- */
.a11y-more {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.a11y-more__summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.05rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    background: var(--color-bg-warm);
    list-style: none;
    min-height: 44px;
}
.a11y-more__summary::-webkit-details-marker { display: none; }
.a11y-more__summary .a11y-group__head-label {
    flex: 1 1 auto;
    min-width: 0;
}
.a11y-more__chevron {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-text-light);
    transition: transform 0.2s ease;
}
.a11y-more[open] .a11y-more__chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}
.a11y-more__body {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.a11y-more__body > * {
    flex-shrink: 0;
}

/* ---- Reset-Button ---- */
.a11y-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    min-height: 44px;
    margin-top: 0.25rem;
}
.a11y-reset__label {
    overflow-wrap: normal;
    white-space: nowrap;
}
.a11y-reset:hover,
.a11y-reset:focus-visible {
    background: var(--color-primary);
    color: #fff;
}

/* ---- High-Contrast-Overrides für Panel ---- */
html.high-contrast .a11y-header-btn,
html.high-contrast .a11y-opt,
html.high-contrast .a11y-group,
html.high-contrast .a11y-fontsize__btn,
html.high-contrast .a11y-select,
html.high-contrast .a11y-more,
html.high-contrast .a11y-more__summary,
html.high-contrast .a11y-reset {
    border: 2px solid #000;
    background: #fff;
    color: #000;
}
html.high-contrast .a11y-opt[aria-pressed="true"],
html.high-contrast .a11y-header-btn[aria-expanded="true"],
html.high-contrast .a11y-reset:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}
html.high-contrast .a11y-panel {
    border: 2px solid #000;
}

/* ============================================
   MITTLERE DESKTOP-BREITEN
   Nicht genug Platz für Logo + Navigation + Textlabel des a11y-Buttons:
   Label ausblenden, nur Icon zeigen, bevor das Logo gequetscht würde.
   ============================================ */
@media (max-width: 1300px) and (min-width: 769px) {
    .a11y-header-btn__text {
        display: none;
    }
    .a11y-header-btn {
        padding: calc(6px * var(--a11y-font-scale, 1)) calc(9px * var(--a11y-font-scale, 1));
        gap: 0;
    }
}

/* ============================================
   MOBILE: Header-Button kompakt
   ============================================ */
@media (max-width: 768px) {
    .a11y-header-btn__text {
        display: none;
    }
    .a11y-header-btn {
        padding: calc(6px * var(--a11y-font-scale, 1)) calc(9px * var(--a11y-font-scale, 1));
        gap: 0;
    }
    .a11y-panel {
        width: min(360px, calc(100vw - 24px));
    }
}

/* ============================================
   NACHTMODUS
   ============================================ */
html.a11y-night {
    --color-text: #e8e8e8;
    --color-text-light: #b8b8b8;
    --color-text-muted: #888;
    --color-bg: #1a1a2e;
    --color-bg-cool: #232342;
    --color-bg-warm: #1e1e38;
    --color-border: #3a3a5c;
    --color-border-light: #2e2e4a;
    --color-primary: #6b9fff;
    --color-primary-dark: #5080e0;
    --color-primary-light: #4a7ad9;
    --color-accent-light: #2a2a4a;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
    color-scheme: dark;
}
html.a11y-night body {
    background: var(--color-bg);
    color: var(--color-text);
}
html.a11y-night .site-header {
    background: rgba(26,26,46,0.97);
    border-bottom-color: var(--color-border);
}
html.a11y-night .main-nav {
    background: var(--color-bg);
}
html.a11y-night .submenu {
    background: var(--color-bg-cool);
    border-color: var(--color-border);
}
html.a11y-night .nav-link,
html.a11y-night .submenu a {
    color: var(--color-text);
}
html.a11y-night .alert-bar {
    background: #1a2340;
    color: #e8e8e8;
}
html.a11y-night .site-footer {
    background: #12121f;
    color: var(--color-text-light);
}
html.a11y-night .site-footer a {
    color: var(--color-primary);
}
html.a11y-night img {
    opacity: 0.85;
}
html.a11y-night .topic-card,
html.a11y-night .inst-card,
html.a11y-night .detail-block,
html.a11y-night .org-card {
    background: var(--color-bg-cool);
    border-color: var(--color-border);
    color: var(--color-text);
}
html.a11y-night .hero-overlay {
    background: linear-gradient(165deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.7) 100%) !important;
}
html.a11y-night .page-hero {
    background: var(--color-bg-cool) !important;
}
html.a11y-night .page-hero .breadcrumb,
html.a11y-night .page-hero .page-title,
html.a11y-night .page-hero .page-desc {
    color: var(--color-text);
}
html.a11y-night .hub-page-sidebar,
html.a11y-night .hub-page-sidebar::before {
    background: var(--color-bg-cool);
}
html.a11y-night .hub-section--white {
    background: var(--color-bg) !important;
}
html.a11y-night .a11y-header-btn {
    background: var(--color-bg-warm);
    border-color: var(--color-border);
    color: var(--color-text);
}
html.a11y-night .a11y-header-btn:hover,
html.a11y-night .a11y-header-btn[aria-expanded="true"] {
    background: var(--color-primary);
    color: #fff;
}
html.a11y-night .a11y-panel {
    background: var(--color-bg-cool);
    border-color: var(--color-border);
}
html.a11y-night .a11y-opt,
html.a11y-night .a11y-group,
html.a11y-night .a11y-more__summary {
    background: var(--color-bg-warm);
    border-color: var(--color-border);
}
html.a11y-night .a11y-opt--sub,
html.a11y-night .a11y-more__body,
html.a11y-night .a11y-group__body .a11y-opt {
    background: var(--color-bg-cool);
}

/* ============================================
   BLAUFILTER — warmes Overlay via CSS-Variable
   ============================================ */
html.a11y-blue body::before {
    content: "";
    position: fixed;
    inset: 0;
    /* Unterhalb des Headers (z-index 1000), damit Barrierefreiheits-
       Panel und -Button ungefiltert und gut lesbar bleiben. */
    z-index: 900;
    pointer-events: none;
    background: rgba(255, 177, 60, var(--a11y-blue-intensity, 0.25));
    mix-blend-mode: multiply;
}
html.a11y-blue .a11y-panel {
    isolation: isolate;
}

/* ============================================
   FARBSCWÄCHE — SVG-Filter & CSS-Filter
   ============================================ */
html.a11y-cb-protanopia body { filter: url(#cb-protanopia); }
html.a11y-cb-deuteranopia body { filter: url(#cb-deuteranopia); }
html.a11y-cb-tritanopia body { filter: url(#cb-tritanopia); }
html.a11y-cb-grayscale body { filter: grayscale(1); }
html.a11y-cb-contrast body { filter: contrast(1.4); }
html.a11y-cb-desaturate body { filter: saturate(0.5); }

/* ============================================
   BILDER AUSBLENDEN
   ============================================ */
html.a11y-noimages img,
html.a11y-noimages picture,
html.a11y-noimages video,
html.a11y-noimages .leaflet-container,
html.a11y-noimages .hero,
html.a11y-noimages .article-image,
html.a11y-noimages .news-featured__image,
html.a11y-noimages .event-card__media,
html.a11y-noimages .discover-card {
    visibility: hidden !important;
}
html.a11y-noimages .hero {
    min-height: 200px;
    background: var(--color-bg-cool) !important;
}
html.a11y-noimages img::after {
    content: "📷";
}

/* ============================================
   GRÖSSERER MAUSZEIGER
   ============================================ */
html.a11y-cursor,
html.a11y-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 5l12 30 4-12 12-4z' fill='%23002244' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 5, auto !important;
}
html.a11y-cursor a,
html.a11y-cursor button,
html.a11y-cursor [role="button"],
html.a11y-cursor .clickable,
html.a11y-cursor summary,
html.a11y-cursor label,
html.a11y-cursor select,
html.a11y-cursor [tabindex] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 5l12 30 4-12 12-4z' fill='%23002244' stroke='%23ffbf00' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 5, pointer !important;
}

/* ============================================
   LESERLICHE SCHRIFT
   ============================================ */
html.a11y-readable body,
html.a11y-readable p,
html.a11y-readable li,
html.a11y-readable td,
html.a11y-readable th,
html.a11y-readable .detail-block__text,
html.a11y-readable .article-content,
html.a11y-readable .legal-content {
    font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif !important;
    letter-spacing: 0.02em;
    word-spacing: 0.08em;
}
html.a11y-readable h1,
html.a11y-readable h2,
html.a11y-readable h3,
html.a11y-readable h4,
html.a11y-readable h5 {
    font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif !important;
}

/* ============================================
   TASTATURNAVIGATION — verstärkte Fokus-Rahmen
   ============================================ */
html.a11y-keyboard :focus,
html.a11y-keyboard :focus-visible {
    outline: 4px solid #ffbf00 !important;
    outline-offset: 3px !important;
    border-radius: 2px;
}
html.a11y-keyboard a:focus,
html.a11y-keyboard button:focus {
    outline: 4px solid #ffbf00 !important;
    outline-offset: 3px !important;
}

/* ============================================
   TON AUS
   ============================================ */
html.a11y-mute video,
html.a11y-mute audio {
    muted: true;
}
html.a11y-mute video,
html.a11y-mute audio {
    volume: 0 !important;
}

/* ============================================
   SCHRIFTGRÖSSEN-SKALA (via CSS-Variable)
   ============================================ */
html {
    --a11y-font-scale: 1;
}
html.a11y-font-1 { --a11y-font-scale: 1.1; font-size: calc(16px * 1.1); }
html.a11y-font-2 { --a11y-font-scale: 1.2; font-size: calc(16px * 1.2); }
html.a11y-font-3 { --a11y-font-scale: 1.35; font-size: calc(16px * 1.35); }
html.a11y-font-4 { --a11y-font-scale: 1.5; font-size: calc(16px * 1.5); }