/*
 * a11y.css
 * Barrierefreie Farbvarianten - WCAG AA konform
 * Wird NACH cd.css geladen und überschreibt die Farben
 * Mirko Psak, MP Media
 *
 * KONZEPT: Im A11y-Modus nur Schwarz, Weiß, Grau
 * Maximale Kontraste, keine bunten Farben
 */

/* ---------------------------------------------
   DEFAULT: Barrierefrei = Nur Schwarz/Weiß/Grau
   Gelten nur wenn KEIN .cd-bunt auf html ist
--------------------------------------------- */

:root:not(.cd-bunt) {
    /* Grautöne mit besserem Kontrast */
    --flaechenschwarz-light: #595959;  /* War #AAAAAA - jetzt 7:1 auf Weiß */
}

/* Aktiver Topbar-Link: Weiß auf Schwarz statt Rot */
html:not(.cd-bunt) .topbar__menu a.topbar__link--active {
    background-color: var(--schwarz-text);
    color: var(--schwarz);
}

html:not(.cd-bunt) .topbar__menu a.topbar__link--active:hover {
    background-color: var(--lichtgrau);
    color: var(--schwarz);
}

/* Alle bunten Hintergründe → Lichtgrau (sichtbar abgesetzt von Weiß) */
html:not(.cd-bunt) [class*="bg--"]:not(.bg--schwarz):not(.bg--flaechenschwarz):not(.bg--lichtgrau):not(.bg--weiss) {
    background-color: var(--lichtgrau);
}

/* Störer im Hero → Weiß */
html:not(.cd-bunt) .hero__stoerer {
    background-color: var(--schwarz-text);
}

/* Links im Hover: Dunkelgrau statt Rot */
html:not(.cd-bunt) .topbar__menu a:hover {
    color: var(--flaechenschwarz-light);
}

html:not(.cd-bunt) .topbar__menu--right a::after {
    background-color: var(--flaechenschwarz);
}

/* Hero Jumplinks */
html:not(.cd-bunt) .hero__jumplink:hover {
    color: var(--flaechenschwarz-light);
}

/* Buttons: Schwarz/Weiß statt Rot-Fokus */
html:not(.cd-bunt) button:focus-visible,
html:not(.cd-bunt) .btn:focus-visible {
    outline-color: var(--schwarz);
}

/* Inputs auch */
html:not(.cd-bunt) input:focus-visible,
html:not(.cd-bunt) textarea:focus-visible,
html:not(.cd-bunt) select:focus-visible {
    outline-color: var(--schwarz);
    border-color: var(--schwarz);
}

/* Skip-Link */
html:not(.cd-bunt) .skip-link {
    background-color: var(--schwarz);
    color: var(--schwarz-text);
}

html:not(.cd-bunt) .skip-link:focus-visible {
    outline-color: var(--schwarz-text);
}

/* Footer-Links: Hover weiß im A11y-Modus */
html:not(.cd-bunt) .footer__list a:hover,
html:not(.cd-bunt) .footer__bottom-links a:hover {
    color: var(--schwarz-text);
    opacity: 1;
}

html:not(.cd-bunt) .footer__list a::after,
html:not(.cd-bunt) .footer__bottom-links a::after {
    background-color: var(--schwarz-text);
}

/* Schriftgrößen-Slider */
html:not(.cd-bunt) .fontsize__slider:focus-visible {
    outline-color: var(--schwarz-text);
}

/* Timeline-Dots: sichtbar auf weißem Hintergrund */
html:not(.cd-bunt) .timeline__dot[class*="bg--"] {
    background-color: var(--lichtgrau);
}

/* Logokonfigurator-Swatches: unterscheidbar bleiben */
html:not(.cd-bunt) #logokonfigurator .swatch[class*="bg--"] {
    background-color: var(--lichtgrau);
    border: 2px solid var(--schwarz);
}

html:not(.cd-bunt) #logokonfigurator .swatch.active {
    background-color: var(--schwarz);
}

/* Zitatewall Karten-Bars und Rückseiten */
html:not(.cd-bunt) .zitate-card__bar[class*="bg--"],
html:not(.cd-bunt) .zitate-card__back[class*="bg--"] {
    background-color: var(--lichtgrau);
}

/* Abbinder-Buttons */
html:not(.cd-bunt) .abbinder__btn[class*="bg--"] {
    background-color: var(--lichtgrau);
    border: 2px solid var(--schwarz);
}


/* ---------------------------------------------
   BUNT-MODUS: Original CD-Farben
   Wenn .cd-bunt auf html ist, greifen einfach
   die normalen Styles aus cd.css und layout.css
--------------------------------------------- */

.cd-bunt {
    --flaechenschwarz-light: #AAAAAA;
}