/* VoltWatch – Basis-Stylesheet (KONZEPT §21). Keine externen Schriften, keine Inline-Styles (CSP §28.3). */

/* --- Tokens (§21.1, E-17) --------------------------------------------------------------------- */
:root {
    --color-background:     #f7f9fc;
    --color-surface:        #ffffff;
    --color-surface-soft:   #f1f5f9;
    --color-text:           #0f172a;
    --color-text-muted:     #475569;
    --color-primary:        #2563eb;
    --color-primary-strong: #1d4ed8;
    --color-secondary:      #06b6d4;
    --color-secondary-text: #0e7490;
    --color-positive:       #10b981;
    --color-positive-text:  #047857;
    --color-warning:        #f59e0b;
    --color-warning-text:   #b45309;
    --color-critical:       #ef4444;
    --color-critical-text:  #b91c1c;
    --color-border:         #e2e8f0;
    --color-border-strong:  #64748b;
    --color-focus:          #1d4ed8;

    --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-sm: 0.875rem;   /* 14 px */
    --font-size-md: 1rem;       /* 16 px */
    --font-size-lg: 1.125rem;   /* 18 px */
    --font-size-xl: 1.25rem;    /* 20 px */
    --font-size-2xl: 1.5rem;    /* 24 px */
    --font-size-3xl: 2rem;      /* 32 px */
    --font-size-4xl: 2.5rem;    /* 40 px */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    --radius-sm: 8px;
    --radius-md: 12px;
    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
    --content-max: 75rem;       /* 1 200 px */
    --header-height: 3.5rem;
}

/* --- Basis ----------------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + var(--space-4)); /* Fokus nicht verdeckt (WCAG 2.4.11) */
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-system);
    font-size: var(--font-size-md);
    line-height: 1.5;
}

h1, h2, h3 {
    line-height: 1.25;
    margin: var(--space-8) 0 var(--space-3);
}

h1 { font-size: var(--font-size-3xl); margin-top: var(--space-6); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }

p, ul, ol {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--color-primary);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--color-primary-strong);
}

img, svg {
    max-width: 100%;
}

table, .tabular {
    font-variant-numeric: tabular-nums;
}

/* Sichtbarer Fokus: 2 px, Abstand 2 px (§24) */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

main:focus {
    outline: none;
}

/* --- Layout (§21.4) --------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.site-main {
    flex: 1 0 auto;
    padding-bottom: var(--space-12);
}

/* --- Skip-Link -------------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -10rem;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    color: var(--color-primary-strong);
    border: 2px solid var(--color-focus);
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    top: var(--space-2);
}

/* --- Kopfzeile und Navigation (§20.1) ---------------------------------------------------------- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    min-height: var(--header-height);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: 700;
    text-decoration: none;
}

.wordmark__icon {
    color: var(--color-primary);
}

.site-nav {
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-1);
    color: var(--color-text);
    text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
    color: var(--color-primary-strong);
    text-decoration: underline;
}

.site-nav__list--wide {
    display: none;
}

.site-nav__menu summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.site-nav__menu[open] .site-nav__list {
    flex-direction: column;
    padding: var(--space-2) 0;
}

.site-header__state {
    flex-basis: 100%;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .site-nav__list--wide {
        display: flex;
    }

    .site-nav__menu {
        display: none;
    }

    .site-header__state {
        flex-basis: auto;
    }
}

/* --- Hinweisbänder (§21.5): Symbol + Text, nie nur Farbe --------------------------------------- */
.banners {
    border-bottom: 1px solid var(--color-border);
}

.banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
}

.banner__icon {
    flex: none;
    margin-top: 0.125rem;
}

.banner--demo {
    background: var(--color-surface-soft);
    color: var(--color-text);
}

.banner--draft,
.banner--stale,
.banner--maintenance {
    background: #fffbeb;
    color: var(--color-warning-text);
}

/* --- Inhalt ----------------------------------------------------------------------------------- */
.prose {
    max-width: 46rem;
}

.lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

.missing {
    color: var(--color-critical-text);
    font-style: italic;
}

.error-page__code {
    margin: var(--space-8) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    font-variant-numeric: tabular-nums;
}

.error-page__request-id {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

/* --- Fußzeile --------------------------------------------------------------------------------- */
.site-footer {
    padding: var(--space-8) 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-primary-strong);
}

.site-footer__sources {
    margin: 0;
}

/* --- Bewegung (§23): nur mit JavaScript und ohne prefers-reduced-motion ------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

.motion-paused * {
    animation-play-state: paused !important;
}

/* --- Abschnitte, Raster, Karten (§21.4, §21.5) ------------------------------------------------- */
.section { margin-top: var(--space-12); }
.section > h2 { margin-top: 0; }
.section__terms { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.section__more { margin-top: var(--space-4); }
.section__state { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.card-grid--insights { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.card-grid > li { display: flex; min-width: 0; }
.card-grid > li > * { flex: 1; }

.ranking-grid,
.figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-4);
}

.figure-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }

.country-card,
.insight-card,
.ranking,
.figure {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    min-width: 0;
}

/* --- Hero (§20.2 Nr. 1, §23): Bewegung nur mit motion-enabled (JavaScript) ------------------------ */
.hero {
    position: relative;
    overflow: hidden;
    margin: var(--space-6) 0 0;
    padding: var(--space-6) var(--space-4) var(--space-8);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #eef4ff 0%, var(--color-surface-soft) 100%);
}

.hero__net { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__lines path { fill: none; stroke: #c7d7f2; stroke-width: 1; }
.hero__dot { fill: var(--color-secondary); opacity: 0; }
.hero__content { position: relative; max-width: 46rem; }
.hero__title { margin-top: 0; }
.hero__scope { font-size: var(--font-size-lg); color: var(--color-text-muted); }
.motion-toggle { margin-bottom: var(--space-4); }

.motion-enabled .hero__dot { opacity: 0.9; }
.motion-enabled .hero__dot--1 { animation: vw-dot-x 16s linear infinite; }
.motion-enabled .hero__dot--2 { animation: vw-dot-x 22s linear -6s infinite; }
.motion-enabled .hero__dot--3 { animation: vw-dot-x 19s linear -11s infinite; }
.motion-enabled .hero__dot--4 { animation: vw-dot-y 11s linear -2s infinite; }
.motion-enabled .hero__dot--5 { animation: vw-dot-y 14s linear -7s infinite; }
.motion-enabled .hero__dot--6 { animation: vw-dot-y 9s linear -4s infinite; }

@keyframes vw-dot-x {
    from { transform: translateX(0); }
    to { transform: translateX(1200px); }
}

@keyframes vw-dot-y {
    from { transform: translateY(0); }
    to { transform: translateY(360px); }
}

/* --- Schaltflächen ----------------------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.button:hover { background: var(--color-primary-strong); }
.button--secondary { background: var(--color-surface); color: var(--color-primary-strong); border-color: var(--color-border-strong); }
.button--secondary:hover { background: var(--color-surface-soft); }
.button--small { min-height: 36px; padding: 0 var(--space-3); font-size: var(--font-size-sm); }
.button[hidden] { display: none; }

/* --- Datenstand und Frische (§15.3): immer Symbol + Text ----------------------------------------- */
.data-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    margin: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.data-state__label { font-weight: 600; }
.data-state--current .status-icon, .data-state--current .data-state__label { color: var(--color-positive-text); }
.data-state--delayed .status-icon, .data-state--delayed .data-state__label { color: var(--color-warning-text); }
.data-state--stale .status-icon, .data-state--stale .data-state__label,
.data-state--unavailable .status-icon, .data-state--unavailable .data-state__label { color: var(--color-critical-text); }
.status-icon { flex: none; }
.site-header__state .data-state { margin: 0; }
.relative-time { color: var(--color-text-muted); }

.notice {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

.notice--stale { color: var(--color-warning-text); }

/* --- Länderkarte und Kennzahlen ------------------------------------------------------------------ */
.country-card { display: flex; flex-direction: column; gap: var(--space-2); }
.country-card__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-size-xl); }
.country-card__title a { color: var(--color-text); text-decoration: none; }
.country-card__title a:hover { text-decoration: underline; }
.flag { flex: none; border: 1px solid var(--color-border); border-radius: 2px; }
.country-heading { display: flex; align-items: center; gap: var(--space-3); }

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--space-3);
    margin: 0;
}

.kpi dt, .facts dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.kpi dd, .facts dd { margin: 0; font-weight: 600; }
.kpi--primary { grid-column: 1 / -1; }
.kpi__value, .kpi--primary dd { font-size: var(--font-size-2xl); font-weight: 700; }
.kpi__sub { display: block; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 400; }

.country-card__spark { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.sparkline { width: 7.5rem; height: 2rem; flex: none; }
.sparkline__line { fill: none; stroke-width: 2; }
.country-card__spark-end { color: var(--color-text); font-weight: 600; }
.country-card__more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); }

/* --- Insight-Karte und Teilen (§20.2, §26) ------------------------------------------------------- */
.insight-card { display: flex; flex-direction: column; gap: var(--space-2); }
.insight-card--main { padding: var(--space-6); border-color: #c7d7f2; }
.insight-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.125rem var(--space-2);
    border-radius: 999px;
    background: var(--color-surface-soft);
    color: var(--color-text);
    font-weight: 600;
}

.insight-card__historical { font-style: italic; }
.insight-card__title { margin: 0; font-size: var(--font-size-lg); }
.insight-card--main .insight-card__title { font-size: var(--font-size-2xl); }
.insight-card__title a { color: var(--color-text); text-decoration: none; }
.insight-card__title a:hover { color: var(--color-primary-strong); text-decoration: underline; }
.insight-card__body { margin: 0; }
.insight-card__values { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.insight-card__values dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.insight-card__values dd { margin: 0; font-weight: 600; }
.insight-card__value { font-size: var(--font-size-xl); }
.insight-card__state { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.share {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.share__permalink { display: inline-flex; align-items: center; min-height: 36px; }
.share__status { margin: 0; color: var(--color-positive-text); }
.share__status:empty { display: none; }
.share__text { flex-basis: 100%; }
.share__text summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; }
.share__textarea { width: 100%; font: inherit; padding: var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }

/* --- Begriffs-Popover (§24) ----------------------------------------------------------------------- */
.term__button {
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary-strong);
    font: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

.term__popover {
    max-width: min(24rem, calc(100vw - 2rem));
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-sm);
}

/* --- Auswahl (Kennzahl, Karte, Zeitraum) ---------------------------------------------------------- */
.choices__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }

.choices__link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.choices__link:hover { border-color: var(--color-primary); color: var(--color-primary-strong); }
.choices__link[aria-current] { background: var(--color-primary-strong); border-color: var(--color-primary-strong); color: #fff; font-weight: 600; }

/* --- Diagramme (§22, §21.2): Farben über Klassen, keine style-Attribute --------------------------- */
.figure { margin: 0 0 var(--space-4); }
.figure__caption { font-weight: 600; margin-bottom: var(--space-2); }
.figure__chart { position: relative; }
.figure__chart svg { display: block; width: 100%; height: auto; }
.chart { aspect-ratio: 640 / 260; font-size: 11px; }
.chart__grid line { stroke: #e2e8f0; stroke-width: 1; }
.chart__baseline, .chart__tick { stroke: #94a3b8; stroke-width: 1; }
.chart__axis text { fill: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart__direct { font-weight: 700; font-size: 12px; stroke: none; }
.chart__area { stroke: #fff; stroke-width: 0.5; }
.chart__area-label { fill: #fff; font-weight: 700; font-size: 12px; paint-order: stroke; stroke: rgb(15 23 42 / 0.55); stroke-width: 3px; }
.chart__hatch { fill: #475569; }
.chart__negative { opacity: 0.45; }
.chart__crosshair { stroke: #475569; stroke-width: 1; stroke-dasharray: 3 3; }

.chart-tooltip {
    position: absolute;
    top: var(--space-2);
    z-index: 2;
    min-width: 9rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-sm);
    pointer-events: none;
}

.chart-tooltip[hidden] { display: none; }
.chart-tooltip ul { margin: 0; padding: 0; list-style: none; }

.series-de { color: #2a78d6; stroke: #2a78d6; fill: #2a78d6; }
.series-fr { color: #eb6834; stroke: #eb6834; fill: #eb6834; }
.series-nl { color: #1baf7a; stroke: #1baf7a; fill: #1baf7a; }
.series-be { color: #4a3aa7; stroke: #4a3aa7; fill: #4a3aa7; }
.chart__line[class*="series-"], .sparkline__line[class*="series-"] { fill: none; }
.chart__direct[class*="series-"] { stroke: none; }
/* Beschriftungen als Text brauchen 4,5:1 – dunklere Töne derselben Länderfarbe (Linien selbst ≥ 3:1). */
.chart__direct.series-de { fill: #1d5fb0; }
.chart__direct.series-fr { fill: #b7461a; }
.chart__direct.series-nl { fill: #117a55; }

.src-gas { fill: #eb6834; background: #eb6834; }
.src-nuclear { fill: #4a3aa7; background: #4a3aa7; }
.src-coal { fill: #a0522d; background: #a0522d; }
.src-other { fill: #e87ba4; background: #e87ba4; }
.src-biomass { fill: #008300; background: #008300; }
.src-hydro { fill: #1baf7a; background: #1baf7a; }
.src-wind { fill: #2a78d6; background: #2a78d6; }
.src-solar { fill: #eda100; background: #eda100; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend__swatch { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 3px; }
.legend__swatch[class*="series-"] { background-color: currentColor; }

.figure__note { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.figure__table { margin-top: var(--space-3); }
.figure__table summary { display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; color: var(--color-primary-strong); }

/* --- Rangliste und Balken ------------------------------------------------------------------------- */
.ranking__title { margin: 0; font-size: var(--font-size-lg); }
.ranking__sort, .ranking__state { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bars { display: block; width: 100%; height: auto; font-size: 12px; }
.bars__label { fill: var(--color-text); }
.bars__value { fill: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.bars__zero { stroke: #94a3b8; }
.ranking__list { margin: var(--space-2) 0; padding-left: var(--space-6); }
.ranking__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.ranking__more { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Schematische Karte (§22.3) ------------------------------------------------------------------- */
.figure--map .figure__chart { max-width: 40rem; }
.map { aspect-ratio: 518 / 468; font-size: 14px; }
.map__node { stroke: #fff; stroke-width: 2; }
.map__link:focus-visible { outline: none; }
.map__link:focus-visible .map__node, .map__link:hover .map__node { stroke: var(--color-focus); stroke-width: 4; }
.map__name { fill: var(--color-text); font-weight: 700; }
.map__value { fill: var(--color-text); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.map__text--light { fill: #fff; }

.map-q1 { fill: #b7d3f6; background: #b7d3f6; }
.map-q2 { fill: #86b6ef; background: #86b6ef; }
.map-q3 { fill: #5598e7; background: #5598e7; }
.map-q4 { fill: #256abf; background: #256abf; }
.map-q5 { fill: #104281; background: #104281; }
.map-d1 { fill: #9a4a07; background: #9a4a07; }
.map-d2 { fill: #f6ad6b; background: #f6ad6b; }
.map-d3 { fill: #f0efec; background: #f0efec; }
.map-d4 { fill: #86b6ef; background: #86b6ef; }
.map-d5 { fill: #104281; background: #104281; }
.map-none { fill: var(--color-surface-soft); }
.legend__swatch.map-d3 { border: 1px solid #94a3b8; }

.map__flow { fill: none; stroke: #475569; stroke-linecap: round; }
.map__arrowhead { fill: #475569; }
.map__flow-label { fill: var(--color-text); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--color-background); stroke-width: 4px; }

/* Flusspunkte nur mit JavaScript, ohne prefers-reduced-motion und nicht angehalten (§22.3, E-43). */
.map__flow-dots { display: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 13; }
.motion-enabled .map__flow-dots { display: inline; animation: vw-flow 1.4s linear infinite; }

@keyframes vw-flow {
    to { stroke-dashoffset: -14; }
}

/* --- Tabellen ------------------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; max-width: 100%; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.data-table caption { text-align: left; font-weight: 600; padding: var(--space-2) 0; }
.data-table th, .data-table td { padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.data-table thead th { color: var(--color-text-muted); font-weight: 600; }

/* --- Tagesarchiv ---------------------------------------------------------------------------------- */
.archive-list { margin: 0; padding: 0; list-style: none; }
.archive-list__item { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.archive-list__item p { margin: var(--space-1) 0 0; }
.archive-list__date { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
.archive-list__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* --- Seiten aus P7: Rankings, Archiv, Insights, Status, Inhaltsseiten ------------------------------ */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.banner--historical, .banner--superseded { background: var(--color-surface-soft); color: var(--color-text); }
.banner--withdrawn { background: #fef2f2; color: var(--color-critical-text); }
.badge--draft { background: #fffbeb; color: var(--color-warning-text); }
.badge--final { background: #ecfdf5; color: var(--color-positive-text); }
.ranking__bars--wide { max-width: 40rem; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.pager__link { display: inline-flex; align-items: center; min-height: 44px; }
.pager__link--next { margin-left: auto; }
[aria-labelledby="fakten-titel"] .data-table td { white-space: normal; min-width: 8rem; }
.report-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.insight-list { margin: 0; padding: 0; list-style: none; }
.insight-list__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.insight-list__title { margin: 0; font-size: var(--font-size-lg); }
.insight-list__item--withdrawn .insight-list__title a { text-decoration: line-through; }
.state-label { padding: 0.125rem var(--space-2); border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-text); }
.state-label--withdrawn { border-color: var(--color-critical-text); color: var(--color-critical-text); }
.insight-detail { margin-top: var(--space-6); }
.insight-detail__withdrawn { text-decoration-thickness: 2px; }
.notice--withdrawn { background: #fef2f2; color: var(--color-critical-text); }
.notice--withdrawn p { margin: 0; }
.evidence summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.evidence__json { max-height: 30rem; overflow: auto; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-soft); font-size: var(--font-size-sm); white-space: pre; }
.toc ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: 0; list-style: none; }
.definitions dt, .glossary dt { margin-top: var(--space-4); font-weight: 700; }
.definitions dd, .glossary dd { margin: var(--space-1) 0 0; }
.glossary dt:target { background: #fffbeb; }
.rule { margin-top: var(--space-6); }
.rule h3 { margin-bottom: var(--space-1); }
.rule p { margin: var(--space-1) 0 0; }
.rule__meta { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.status-overall { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.status-overall p { margin: var(--space-1) 0 0; }
.status-overall__label { display: flex; gap: var(--space-2); align-items: center; font-size: var(--font-size-xl); font-weight: 700; }
.status-overall--normal .status-overall__label { color: var(--color-positive-text); }
.status-overall--limited .status-overall__label { color: var(--color-warning-text); }
.status-overall--disrupted .status-overall__label, .status-overall--maintenance .status-overall__label { color: var(--color-critical-text); }
.status-overall__checked { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* --- SEO: Brotkrumen und Aktualisierungsdatum (§25.2, §25.7) ------------------------------------------ */
.breadcrumbs { margin-top: var(--space-4); font-size: var(--font-size-sm); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; }
.breadcrumbs__list li { display: inline-flex; align-items: center; }
.breadcrumbs__list li + li::before { content: "›"; margin-right: var(--space-2); color: var(--color-text-muted); }
.breadcrumbs__list a { display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumbs__list a[aria-current] { color: var(--color-text); text-decoration: none; }
.page-updated { margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Lange deutsche Komposita dürfen umbrechen (Reflow bei 320 px, §24). */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

/* Diagramme und Karte sind zweidimensionale Inhalte (WCAG 1.4.10): auf schmalen Bildschirmen mit lesbarer
   Mindestbreite in einem fokussierbaren Scrollbereich; die Tabelle darunter enthält alle Werte. */
@media (max-width: 599px) {
    h1 { font-size: 1.75rem; }
    .figure__chart { overflow-x: auto; }
    .figure__chart .chart { min-width: 34rem; }
    .figure__chart .map { min-width: 24rem; }
}

@media (min-width: 768px) {
    .hero { padding: var(--space-8) var(--space-8) var(--space-12); }
    h1 { font-size: var(--font-size-4xl); }
}