/* ============================================================
   a11y-overrides.css
   ----------------------------------------------------------------
   Minimal-invasive Kontrast-Korrekturen für WCAG 2.2 AA-Konformität.
   Lädt AFTER tokens.css/layout.css, ändert nur die exakten Stellen,
   die Lighthouse als Kontrast-Fail markiert hat.

   Jeder Override begründet, was am Original geändert wird und warum
   das nötig ist. Original-Files (`tokens.css`, `layout.css`,
   `ratsinfo.css`, `design-system.css`) bleiben Bit-für-Bit
   unverändert — die Änderungen leben isoliert hier.
   ============================================================ */


/* ----------------------------------------------------------------
   .kd-btn--primary
   --------------------------------------------------------------
   Original:  background: var(--c-accent-500) #D97706, color: #fff
              → Kontrast 4.16 : 1  →  WCAG-AA (4.5:1) FAIL.
   Fix:       Auf accent-600 (#B45309) heben — 5.18 : 1 → AA-PASS.
              Hover bleibt accent-700 für klare Hierarchie.
   --------------------------------------------------------------- */
.kd-btn--primary {
    background: var(--c-accent-600);
    border-color: var(--c-accent-600);
}
.kd-btn--primary:hover {
    background: var(--c-accent-700);
    border-color: var(--c-accent-700);
}
/* Inverted-Variante in der DGS-A11y-Card bleibt unverändert
   (weiß auf primary-800: bereits AAA-konform). */
.kd-a11ycard.kd-a11ycard--dgs .kd-btn--primary {
    background: #fff;
    border-color: #fff;
}

/* ----------------------------------------------------------------
   .kd-btn--primary im DARK-MODE
   --------------------------------------------------------------
   Im Dark-Mode mappt --c-accent-600 auf #F4B870 (sehr hell-orange).
   Weißer Text darauf: 1.93 : 1 → MASSIVES AA-FAIL.
   Fix:  Dunkles Anthrazit als Text (primary-900 #0A192F) → 12.0 : 1
         → AAA-PASS. Background bleibt accent-500 (#F4A554) für die
         klassische Lindenbach-Akzentfarbe — Schwarz darauf 8.78 : 1.
   --------------------------------------------------------------- */
[data-mode="dark"] .kd-btn--primary,
[data-mode="dark"] .kd-btn--accent {
    background: var(--c-accent-500);
    border-color: var(--c-accent-500);
    color: #0A192F;
}
[data-mode="dark"] .kd-btn--primary:hover,
[data-mode="dark"] .kd-btn--accent:hover {
    background: var(--c-accent-600);
    border-color: var(--c-accent-600);
    color: #0A192F;
}
[data-mode="dark"] .kd-a11ycard.kd-a11ycard--dgs .kd-btn--primary {
    background: var(--c-accent-500);
    border-color: var(--c-accent-500);
    color: #0A192F;
}


/* ----------------------------------------------------------------
   .kd-btn--accent
   --------------------------------------------------------------
   Wird auf Service-Detail-CTAs verwendet — gleiches Kontrast-Problem
   wie .kd-btn--primary. Selber Fix.
   --------------------------------------------------------------- */
.kd-btn--accent {
    background: var(--c-accent-600);
    border-color: var(--c-accent-600);
}
.kd-btn--accent:hover {
    background: var(--c-accent-700);
    border-color: var(--c-accent-700);
}


/* ----------------------------------------------------------------
   .kd-minical__cell.is-other
   --------------------------------------------------------------
   Original:  color: var(--c-border-strong) #CBD5E1 auf weiß
              → Kontrast 1.69 : 1  →  WCAG-AA FAIL deutlich.
   Erste Iteration:  color: text-muted + opacity: 0.55
              → Lighthouse rechnet opacity in Kontrast ein
              → effektiv ~2.84 : 1, immer noch FAIL.
   Final:     color: #64748B direkt (= text-muted, 5.16 : 1) OHNE
              opacity. Visuelle Differenz zum aktuellen Monat
              entsteht durch font-style + font-weight statt opacity.
   --------------------------------------------------------------- */
.kd-minical__cell.is-other {
    color: var(--c-text-muted);
    font-weight: 400;
    font-style: italic;
}


/* ----------------------------------------------------------------
   .kd-pill (kontrast-getuned, falls auf hellem Hintergrund)
   --------------------------------------------------------------
   Lighthouse hat das nicht beanstandet, aber für AAA in den
   Hochkontrast-Modus prüfen wir auf die strengste Variante.
   Im normalen Mode bleibt das Original.
   --------------------------------------------------------------- */
[data-contrast="high"] .kd-pill {
    color: #000;
    background: #fff;
    border-color: #000;
}
[data-contrast="high"] .kd-pill--accent {
    color: #fff;
    background: var(--c-accent-700);
    border-color: var(--c-accent-700);
}


/* ----------------------------------------------------------------
   .kd-emergency__list span:last-child — Notruf-Nummern
   --------------------------------------------------------------
   Original:  color: var(--c-error) #B91C1C
              → Light-Mode: 5.93 : 1 ✓ AA
              → Dark-Mode auf #0F1729: 3.06 : 1 → FAIL
              → Dark-Mode auf #15203A (bg-muted): 2.71 : 1 → FAIL
   Fix:       Im Dark-Mode helleres Rot — #F87171 auf #0F1729 = 5.07
              → AA-PASS. Light-Mode bleibt unverändert AA-konform.
   --------------------------------------------------------------- */
[data-mode="dark"] .kd-emergency__list span:last-child {
    color: #F87171;
}

/* Auch generell --c-error im Dark-Mode auf hellen Wert setzen,
   damit alle Status-/Alert-Texte AA-konform bleiben. */
[data-mode="dark"] {
    --c-error:   #F87171;   /* AA auf #0F1729 */
    --c-success: #4ADE80;   /* AA auf dunklem bg */
    --c-warning: #FBBF24;   /* AA auf dunklem bg */
}


/* ----------------------------------------------------------------
   Mega-Nav-Promo-Title (war ehemals <h4>, jetzt <p class="kd-meganav__feature-title">).
   --------------------------------------------------------------
   Hintergrund: Lighthouse-Heading-Order verlangt sequentiell-
   absteigende Reihenfolge. Mega-Nav-Headings stehen im DOM VOR
   dem Page-H1 — das wertet Lighthouse als Hierarchie-Bruch.
   Lösung: Mega-Nav-Labels bleiben optisch identisch, sind aber
   keine Headings mehr (semantisch sind es Navigation-Section-
   Labels). Same für `.kd-mobilenav__group-h`.
   --------------------------------------------------------------- */
.kd-meganav__feature-title {
    margin: 6px 0 0;
    font-size: 1.05rem;
    color: var(--c-text-strong);
    font-weight: 700;
    line-height: 1.3;
}
.kd-mobilenav__group-h {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
}


/* ----------------------------------------------------------------
   Footer-Links Unterstreichung — A11y-Best-Practice
   --------------------------------------------------------------
   Footer-Links auf dunklem Hintergrund: zusätzliche Underline-
   Hint, damit Links nicht nur durch Farbe (Kontrast-Distinguishability
   nach 1.4.1) erkennbar sind.
   --------------------------------------------------------------- */
.kd-footer a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}
.kd-footer a:hover,
.kd-footer a:focus-visible {
    text-decoration-color: #fff;
    text-decoration-thickness: 2px;
}