/* start.css · Startseite „Wohin das Geld geht“. Gleiche Welt wie das Band: Papier, Druckschwarz, ein Rot.
 * Jede Zahl auf dieser Seite hat eine amtliche Quelle (Quellenregel in CLAUDE.md). Balken werden mit
 * transform: scaleX gezeichnet (keine Breite animieren), Länge kommt aus --anteil (0 bis 1) im HTML-Stil der Klasse. */

.start-kopf { min-height: calc(100svh - 40px); display: grid; align-items: center; padding-top: calc(var(--kopf-hoehe) + 24px); padding-bottom: clamp(32px, 6svh, 64px); }
.start-kopf .titel { font-size: clamp(2rem, 1.3rem + 3vw, 4.2rem); line-height: 0.98; max-width: 16ch; }
.schuld { margin-top: clamp(18px, 3svh, 32px); }
.schuld-zahl { display: block; font-family: var(--schrift-display); font-weight: 700; font-size: clamp(3.6rem, 1rem + 12vw, 12rem); line-height: 0.86; letter-spacing: -0.025em; color: var(--akzent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.schuld-zahl small { font-size: 0.36em; color: var(--text); letter-spacing: 0; }
.schuld-stand { margin-top: 12px; color: var(--text-2); }
.schuld-stand strong { color: var(--text); }
.kennzahlen { margin: clamp(22px, 4svh, 40px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; border-top: 2px solid var(--text); max-width: 980px; }
.kennzahlen li { padding: 14px 18px 14px 0; }
.kennzahlen b { display: block; font-family: var(--schrift-display); font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.kennzahlen span { display: block; margin-top: 4px; font-size: 0.95rem; color: var(--text-2); line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .js .start-kopf .innen { transform: translateY(calc(var(--p, 0) * -60px)); opacity: calc(1 - var(--p, 0) * 0.8); }
}

/* Abschnittskopf: Aussage als Überschrift, ein Satz, Quelle klein darunter */
.teil h2 { font-size: var(--t-gross); max-width: 22ch; }
.teil-satz { margin-top: 16px; max-width: 44rem; color: var(--text-2); }
.quelle-zeile { margin-top: 18px; font-size: 0.9rem; color: var(--text-3); max-width: 60rem; }
.quelle-zeile a { color: var(--text-2); text-decoration-color: var(--akzent); }
.teil + .teil { border-top: 1px solid var(--linie); }

/* Balkenliste: Name, Betrag, Balken in echtem Verhältnis */
.balken { margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 1000px; }
.balken li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; }
.balken .name { font-size: 1rem; line-height: 1.35; }
.balken .name small { display: block; color: var(--text-3); font-size: 0.85rem; }
.balken .betrag { font-family: var(--schrift-display); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balken .strich { grid-column: 1 / -1; height: 12px; background: var(--grund-2); position: relative; overflow: hidden; }
.balken .strich::before { content: ""; position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(var(--anteil, 0)); }
.balken .hervor .strich::before { background: var(--akzent); }
@media (prefers-reduced-motion: no-preference) {
  .js .balken .strich::before { transform: scaleX(calc(var(--anteil, 0) * min(1, var(--p, 1) * 2.2))); }
}

/* Tabelle für Parteien und Empfänger */
.tabelle-huelle { margin-top: clamp(28px, 4vw, 48px); overflow-x: auto; max-width: 1000px; }
.tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.98rem; }
.tabelle caption { text-align: left; font-family: var(--schrift-display); font-weight: 700; font-size: 1.4rem; padding-bottom: 10px; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle thead th { border-bottom: 2px solid var(--text); font-size: 0.9rem; color: var(--text-2); font-weight: 600; }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; white-space: nowrap; }
.tabelle tbody tr { transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js .tabelle-huelle[data-fortschritt] tbody tr { opacity: calc(0.25 + min(1, var(--p, 1) * 2.4) * 0.75); }
}
.zwei-spalten { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .zwei-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Rechnungshof-Fälle: Betrag groß links, Befund rechts */
.faelle { margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; max-width: 1100px; counter-reset: fall; }
.faelle li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 40px; padding: 26px 0; border-top: 1px solid var(--text); }
@media (min-width: 900px) { .faelle li { grid-template-columns: minmax(200px, 0.38fr) minmax(0, 1fr); } }
.faelle .fall-betrag { font-family: var(--schrift-display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 0.95; color: var(--akzent); font-variant-numeric: tabular-nums; }
.faelle .fall-betrag small { display: block; margin-top: 6px; font-family: var(--schrift-text); font-weight: 400; font-size: 0.85rem; color: var(--text-2); line-height: 1.35; }
.faelle h3 { font-size: 1.5rem; line-height: 1.1; }
.faelle p { margin-top: 8px; color: var(--text-2); max-width: 46rem; }
.faelle .fall-quelle { font-size: 0.9rem; }
.faelle .fall-quelle a { color: var(--text); text-decoration-color: var(--akzent); }
@media (prefers-reduced-motion: no-preference) {
  .js .faelle li { transform: translateX(calc((1 - min(1, var(--p, 1) * 1.6)) * 24px)); }
}

/* Hinweis zum Band: ein Streifen echtes Rot mit Maßstab */
.band-hinweis { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .band-hinweis { grid-template-columns: minmax(0, 1fr) auto; } }
.band-probe { height: clamp(180px, 30vw, 320px); width: clamp(120px, 18vw, 220px); background: var(--akzent); position: relative; justify-self: start; transform-origin: top; }
.band-probe span { position: absolute; left: 12px; bottom: 12px; right: 12px; color: var(--band-weiss); font-family: var(--schrift-display); font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
@media (prefers-reduced-motion: no-preference) {
  .js .band-probe { transform: scaleY(calc(0.3 + min(1, var(--p, 1) * 1.6) * 0.7)); }
}

.quellenregel { margin-top: 18px; padding: 18px 20px; background: var(--grund-2); max-width: 46rem; color: var(--text-2); }
.quellenregel strong { color: var(--text); }

/* Gesamtstaat nach Aufgaben: Prozent groß, Balken in echtem Anteil an 100 % */
.anteile { margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 1000px; }
@media (min-width: 800px) { .anteile { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.anteile li { position: relative; display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 12px 0 16px; border-bottom: 1px solid var(--linie); }
.anteile b { font-family: var(--schrift-display); font-weight: 700; font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.anteile span { line-height: 1.35; }
.anteile small { display: block; color: var(--text-3); font-size: 0.85rem; }
.anteile em { font-style: normal; color: var(--text-2); font-size: 0.92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.anteile li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--akzent); transform-origin: left; transform: scaleX(var(--anteil, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .js .anteile li::after { transform: scaleX(calc(var(--anteil, 0) * min(1, var(--p, 1) * 2.2))); }
}

/* Förderungen: Rangliste mit großen Beträgen */
.rangliste { margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; max-width: 1000px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
.rangliste li { padding: 18px 0; border-top: 2px solid var(--text); }
.rangliste b { display: block; font-family: var(--schrift-display); font-weight: 700; font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.rangliste span { display: block; margin-top: 6px; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .js .rangliste li { transform: translateY(calc((1 - min(1, var(--p, 1) * 1.8)) * 30px)); }
}
.tabelle th small { display: block; color: var(--text-3); font-size: 0.82rem; font-weight: 400; }
.tabelle tbody th { font-weight: 600; }
.spalten-titel { font-size: 1.4rem; margin-bottom: 6px; }
.balken--schmal { margin-top: 18px; }
.beleg a { color: var(--text); }

/* Nachbesserung erster Bildschirm und Tabellen am Handy */
.start-kopf .innen { min-width: 0; }
.start-kopf .titel { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); }
.schuld-zahl { font-size: clamp(3.4rem, 1rem + 9vw, 9rem); white-space: normal; }
.schuld-zahl small { white-space: nowrap; }
.kennzahlen li { padding: 10px 16px 8px 0; }
.start-kopf .handlung { margin-top: 20px; }
@media (max-width: 639px) {
  .tabelle { font-size: 0.9rem; }
  .tabelle th, .tabelle td { padding-right: 8px; }
  .tabelle td.zahl { white-space: nowrap; }
}
.band-probe { min-width: 150px; }
.teil { overflow-x: clip; }   /* einrückende Fälle dürfen am Handy nicht überstehen */

/* Politik: Vergleichszeile grau, Zusatzspalten, schmale Fallliste neben der Tabelle */
.balken .vergleich-zeile .strich::before { background: var(--text-3); }
.balken .vergleich-zeile .name { color: var(--text-2); }
.politik-mehr { margin-top: clamp(36px, 5vw, 64px); }
.politik-mehr p { margin-top: 8px; color: var(--text-2); max-width: 40rem; }
.politik-mehr a { color: var(--text); text-decoration-color: var(--akzent); }
.faelle--schmal { margin-top: 0; }
.faelle--schmal li { grid-template-columns: minmax(0, 1fr) !important; padding: 16px 0; }
.faelle--schmal .fall-betrag { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); }
.start-kopf .kennzahlen { margin-top: clamp(20px, 3svh, 32px); }
@media (max-width: 639px) { .start-kopf .unterzeile { font-size: 1.05rem; } .kennzahlen { grid-template-columns: 1fr 1fr; } .kennzahlen li:last-child { grid-column: 1 / -1; } }