/* Jahresansicht: eine Erzählung in einer Spalte, vom Geldeingang über die Aufteilung bis zum
   kritischen Blick. Nutzt die Farb-Tokens aus style.css und ergänzt eigene. */
.yv {
  --paper: var(--surface-1);
  --ground: var(--surface-0);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-muted);
  --rule: var(--border);
  --accent-soft: #e3eefb;
  --flag: #b4461b;
  --fee-hv: #9db8d9; --fee-bv: #2a78d6; --fee-ins: #eda100; --fee-ref: #b9c0cc;
  --th-notlagen-bg: #fdf1d6; --th-notlagen: #9a6200;
  --th-gesundheit-bg: #fde4ea; --th-gesundheit: #b8325a;
  --th-wohnen-bg: #fde9dc; --th-wohnen: #ad4d18;
  --th-lernen-bg: #e1edfb; --th-lernen: #1f63b8;
  --th-klima-bg: #ddf3e6; --th-klima: #1a7a47;
  --th-vielfalt-bg: #ece6fb; --th-vielfalt: #6a46c9;
  --th-mitreden-bg: #dff2f4; --th-mitreden: #1d7383;
  --font-display: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.875rem; --step-0: 1.0625rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.6rem; --step-4: 3.4rem;

  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .yv {
    --accent-soft: #1b2a40;
    --flag: #f08a5d;
    --fee-hv: #4d6687; --fee-bv: #5a9ef0; --fee-ins: #c98500; --fee-ref: #59616f;
    --th-notlagen-bg: #382d13; --th-notlagen: #f3b843;
    --th-gesundheit-bg: #3b1d27; --th-gesundheit: #f07a9a;
    --th-wohnen-bg: #3b2517; --th-wohnen: #f0965e;
    --th-lernen-bg: #16283d; --th-lernen: #6aa6f0;
    --th-klima-bg: #15312a; --th-klima: #5cc792;
    --th-vielfalt-bg: #29203f; --th-vielfalt: #a88bf0;
    --th-mitreden-bg: #132e33; --th-mitreden: #5cc0cf;
  }
}

.yv h1, .yv h2, .yv h3, .yv h4 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; margin: 0; }
.yv h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.01em; }
.yv h2 { font-size: var(--step-2); font-weight: 800; }
.yv h3 { font-size: var(--step-1); font-weight: 600; }
.yv p { margin: 0; max-width: 68ch; }
.yv .eyebrow { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.yv .lead { font-size: var(--step-1); color: var(--ink-2); margin: 0; }
.yv .muted { color: var(--ink-3); }
.yv .small { font-size: var(--step--1); }
.yv .num { font-variant-numeric: tabular-nums; }
.yv .sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; transform: translateY(2px); flex: none; }
.yv [hidden] { display: none !important; }
/* Kategoriefarben mit höherer Spezifität als die Button-Rücksetzung */
.yv .c0 { background: var(--series-1); }
.yv .c1 { background: var(--series-2); }
.yv .c2 { background: var(--series-3); }
.yv .c3 { background: var(--series-4); }
.yv .c4 { background: var(--series-5); }
.yv .c5 { background: var(--series-6); }
.yv .c6 { background: var(--series-7); }
.yv .c7 { background: var(--series-8); }
.yv button { font: inherit; padding: 0; border: 0; background: none; color: inherit; border-radius: 0; max-width: none; }

/* Einstieg */
.yv .hero { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.yv .hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.yv .pager { display: flex; gap: 16px; font-size: var(--step--1); }
.yv .hero-figures { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline; }
.yv .hero-figures .big { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; }
.yv .hero-figures .side { display: flex; flex-direction: column; }
.yv .hero-figures .side b { font-family: var(--font-display); font-size: var(--step-2); }
.yv .toc { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step--1); }
.yv .toc a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.yv .toc a.toc-critical { color: var(--flag); }

/* Abschnitte */
.yv .block { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 24px 20px; display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 16px; }
.yv .block-head { display: flex; flex-direction: column; gap: 6px; }
.yv .note-box { background: var(--accent-soft); border-radius: 8px; padding: 10px 14px; font-size: var(--step--1); color: var(--ink-2); }

/* Woher: Aufteilung des ÖH-Beitrags */
.yv .fee { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 32px; align-items: center; }
.yv .donut { width: 100%; max-width: 240px; aspect-ratio: 1; display: block; }
.yv .donut .center-big { font-family: var(--font-display); font-weight: 800; font-size: 30px; fill: var(--ink); }
.yv .donut .center-small { font-size: 12px; fill: var(--ink-3); }
.yv .seg-hv { stroke: var(--fee-hv); } .yv .seg-bg-hv { background: var(--fee-hv); }
.yv .seg-bv { stroke: var(--fee-bv); } .yv .seg-bg-bv { background: var(--fee-bv); }
.yv .seg-ins { stroke: var(--fee-ins); } .yv .seg-bg-ins { background: var(--fee-ins); }
.yv .seg-ref { stroke: var(--fee-ref); } .yv .seg-bg-ref { background: var(--fee-ref); }
.yv .fee-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.yv .fee-list li { display: grid; grid-template-columns: 14px 4.6em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.yv .fee-list .amt { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); text-align: right; white-space: nowrap; }
.yv .fee-list .txt { display: flex; flex-direction: column; }
.yv .fee-list .txt span { color: var(--ink-2); font-size: var(--step--1); }
.yv .fee-list li.highlight .amt, .yv .fee-list li.highlight strong { color: var(--fee-bv); }
.yv .deficit { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 14px; }
.yv .deficit b { font-family: var(--font-display); font-size: var(--step-2); white-space: nowrap; }

/* 100 Euro */
.yv .hundred { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; align-items: start; }
.yv .waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 320px; }
.yv .waffle span { aspect-ratio: 1; border-radius: 3px; display: block; }
.yv .legend-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.yv .legend-list li { display: grid; grid-template-columns: 14px 3.6em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.yv .legend-list .eur { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); text-align: right; }
.yv .legend-list .what { display: flex; flex-direction: column; }
.yv .legend-list .what > span { color: var(--ink-2); font-size: var(--step--1); }

/* Bereiche */
.yv .drill-bar { display: flex; height: 48px; border-radius: 8px; overflow: hidden; gap: 2px; }
.yv .drill-bar button { cursor: pointer; min-width: 6px; color: #fff; font-weight: 700; font-size: 0.85rem; }
.yv .drill-bar button[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: -3px; }
.yv .drill-bar button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.yv .drill-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.yv .drill-tabs button { font-size: var(--step--1); border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 4px 12px 4px 8px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.yv .drill-tabs button .sw { transform: none; }
.yv .drill-tabs button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.yv .drill-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.yv .detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; border-top: 4px solid var(--rule); padding-top: 16px; }
.yv .detail-c0 { border-top-color: var(--series-1); } .yv .detail-c1 { border-top-color: var(--series-2); }
.yv .detail-c2 { border-top-color: var(--series-3); } .yv .detail-c3 { border-top-color: var(--series-4); }
.yv .detail-c4 { border-top-color: var(--series-5); } .yv .detail-c5 { border-top-color: var(--series-6); }
.yv .detail-intro { display: flex; flex-direction: column; gap: 10px; }
.yv .detail-intro .amount { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); }
.yv .items { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yv .items .grp { font-size: var(--step--1); font-weight: 700; color: var(--ink-2); padding-top: 8px; display: flex; justify-content: space-between; gap: 12px; }
.yv .rank-row { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr) 7.5em; gap: 12px; align-items: center; }
.yv .rank-row .label { font-size: var(--step--1); line-height: 1.3; }
.yv .rank-row .bar { height: 16px; border-radius: 0 4px 4px 0; min-width: 2px; }
.yv .rank-row .val { text-align: right; font-size: var(--step--1); }
.yv .items .rank-row.in-group .label { padding-left: 12px; }

/* Angebote */
.yv .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.yv .chips button { font-size: var(--step--1); border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 4px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.yv .chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.yv .chips button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.yv .mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-flow: dense; gap: 10px; }
.yv .tile { border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--tile-bg, var(--accent-soft)); border: 1px solid color-mix(in srgb, var(--tile-ic, var(--rule)) 22%, transparent); min-width: 0; }
.yv .tile.big { grid-column: span 2; }
.yv .tile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.yv .tile .big-ic { font-size: 2.1rem; color: var(--tile-ic, var(--accent)); flex: none; }
.yv .tile.big .big-ic { font-size: 2.8rem; }
.yv .tile .theme { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tile-ic, var(--ink-3)); }
.yv .tile .t-amount { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }
.yv .tile.big .t-amount { font-size: var(--step-2); }
.yv .tile strong { line-height: 1.25; overflow-wrap: break-word; }
.yv .tile p { font-size: var(--step--1); color: var(--ink-2); }
.yv .th-notlagen { --tile-bg: var(--th-notlagen-bg); --tile-ic: var(--th-notlagen); }
.yv .th-gesundheit { --tile-bg: var(--th-gesundheit-bg); --tile-ic: var(--th-gesundheit); }
.yv .th-wohnen { --tile-bg: var(--th-wohnen-bg); --tile-ic: var(--th-wohnen); }
.yv .th-lernen { --tile-bg: var(--th-lernen-bg); --tile-ic: var(--th-lernen); }
.yv .th-klima { --tile-bg: var(--th-klima-bg); --tile-ic: var(--th-klima); }
.yv .th-vielfalt { --tile-bg: var(--th-vielfalt-bg); --tile-ic: var(--th-vielfalt); }
.yv .th-mitreden { --tile-bg: var(--th-mitreden-bg); --tile-ic: var(--th-mitreden); }

/* Teil 2 */
.yv .part-divider { display: flex; flex-direction: column; gap: 8px; padding-top: 28px; margin-top: 12px; border-top: 3px solid var(--ink); }
.yv .part-title { font-size: var(--step-3); font-weight: 800; }
.yv .ranking { display: flex; flex-direction: column; gap: 8px; }
.yv .ranking .rank-row .bar { height: 20px; }
.yv .rank-row.flag .label::after { content: " *"; color: var(--flag); font-weight: 700; }
.yv .callout { border-left: 4px solid var(--flag); padding: 6px 12px; color: var(--ink-2); font-size: var(--step--1); }
.yv .sk-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; height: 220px; }
.yv .sk-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.yv .sk-col .pct { font-size: var(--step--1); font-weight: 700; }
.yv .sk-col .bar { width: 100%; max-width: 64px; border-radius: 4px 4px 0 0; border: 2px solid var(--series-3); }
.yv .sk-col .bar.ja { background: var(--series-3); }
.yv .sk-col .bar.nein { background: repeating-linear-gradient(135deg, var(--series-3) 0 3px, transparent 3px 8px); }
.yv .sk-col .bar.offen { background: transparent; border-style: dashed; }
.yv .sk-col .bar.current { border-color: var(--flag); }
.yv .sk-col .yr { font-size: 0.75rem; color: var(--ink-3); text-decoration: none; }
.yv .sk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); }
.yv .sk-legend span { display: inline-flex; gap: 6px; align-items: center; }
.yv .key { width: 18px; height: 12px; border-radius: 2px; display: inline-block; border: 2px solid var(--series-3); }
.yv .key.solid { background: var(--series-3); }
.yv .key.hatched { background: repeating-linear-gradient(135deg, var(--series-3) 0 2px, transparent 2px 5px); }
.yv .sk-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; }
.yv .sk-example, .yv .sk-points { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.yv .sk-example table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.yv .sk-example td { padding: 3px 0; border-bottom: 1px solid var(--grid); text-align: left; }
.yv .sk-example td:last-child { text-align: right; }
.yv .sk-example tr.big td { font-weight: 700; }
.yv .sk-example tr.sum td { border-top: 2px solid var(--ink-3); border-bottom: 0; font-weight: 700; }
.yv .demands { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }

.yv .yv-footer { color: var(--ink-3); font-size: var(--step--1); display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rule); padding-top: 16px; }

@media (max-width: 680px) {
  .yv .hero-figures .big { font-size: var(--step-3); }
  .yv .hundred, .yv .fee, .yv .detail, .yv .sk-cols { grid-template-columns: minmax(0, 1fr); }
  .yv .donut { max-width: 200px; margin: 0 auto; }
  .yv .rank-row { grid-template-columns: minmax(0, 1fr) 6.5em; }
  .yv .rank-row .bar { grid-column: 1 / -1; grid-row: 2; }
  .yv .tile.big { grid-column: span 1; }
  .yv .drill-bar button { font-size: 0; }
  .yv .sk-chart { gap: 3px; height: 180px; }
  .yv .sk-col .pct { font-size: 0.7rem; }
  .yv .sk-col .yr { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .yv .drill-bar button:hover { filter: brightness(1.08); }
}