/* Grüne Stories: corporate design of Die Grünen (gruenintern/design/README.md) */

@font-face { font-family: "Gotham Narrow"; font-weight: 400; font-display: swap; src: url(/fonts/GothamNarrow-Book.woff2) format("woff2"); ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Gotham Narrow"; font-weight: 700; font-display: swap; src: url(/fonts/GothamNarrow-Bold.woff2) format("woff2"); ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Gotham Narrow"; font-weight: 900; font-display: swap; src: url(/fonts/GothamNarrow-Ultra.woff2) format("woff2"); ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Vollkorn"; font-style: italic; font-weight: 900; font-display: swap; src: url(/fonts/Vollkorn-BlackItalic.woff2) format("woff2"); }
/* Fallback for characters Gotham lacks (ẞ and others). */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 400 500; font-display: swap; src: url(/fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 400 500; font-display: swap; src: url(/fonts/barlow-semi-condensed-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+2070-209F; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(/fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(/fonts/barlow-semi-condensed-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+2070-209F; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 800 900; font-display: swap; src: url(/fonts/barlow-semi-condensed-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 800 900; font-display: swap; src: url(/fonts/barlow-semi-condensed-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+2070-209F; }

:root {
  --green-dark: #257639;
  --green-light: #56af31;
  --green-deep: #1c5c2c;
  --yellow: #ffed00;
  --magenta: #e6007e;
  --white: #ffffff;
  --text: #1a1a1a;
  --text-muted: #555555;
  --surface: #f2f6f0;
  --line: #b9cdb3;

  --font-sans: "Gotham Narrow", "Barlow Semi Condensed", Tahoma, "Arial Narrow", sans-serif;
  --font-accent: "Vollkorn", Georgia, serif;
  --lh-headline: 0.9;
  --lh-headline-accent: 1.05;
  --lh-body: 1.3;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --page-max: 96rem;
  --page-pad: clamp(1rem, 4vw, 4.25rem);
  --text-max: 40rem;
  --logo-m: clamp(0.75rem, 1.5vw, 1rem);
  --logo-size: calc(2.5 * var(--logo-m));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--white);
}

h1, h2, h3, p, ol, ul, blockquote, figure { margin: 0; }
strong { font-weight: 700; }
a { color: var(--green-dark); text-underline-offset: 0.15em; }
a:hover { color: var(--green-deep); }
:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 3px; }
main:focus { outline: none; }

.frame {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.skip {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  color: var(--green-dark);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Header and footer */

.masthead { background: var(--green-dark); color: var(--white); }
.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--logo-size) + 2 * var(--logo-m) + 0.5rem);
}
.masthead__home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--white);
  text-decoration: none;
}
.masthead__logo { height: var(--logo-size); width: auto; }
.masthead__title { font-weight: 700; font-size: 1.375rem; line-height: 1; }
.nav a { color: var(--white); font-weight: 700; text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.masthead :focus-visible { outline-color: var(--white); }

.footer { margin-top: var(--space-6); border-top: 1px solid var(--line); }
.footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  font-size: 1rem;
}
.footer__nav { display: flex; gap: var(--space-4); }
@media (max-width: 40rem) {
  .footer__row, .footer__nav { flex-direction: column; }
  .footer__nav { gap: var(--space-2); }
}

/* Headlines: Gotham Narrow Ultra, one accent word in Vollkorn Black Italic */

.headline {
  font-weight: 900;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: var(--lh-headline-accent);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.headline__accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 900;
  color: var(--yellow);
}

/* Start page: one story as a city paper front page, then the story rows.
   All covers sit in the same grid cell, so the stage is as high as the highest one and nothing jumps.
   Which one shows comes from --cover-<slug> on the root (visible or hidden), set by /js/cover.js before
   the first paint; without JavaScript the default cover keeps its fallback "visible". */

.defs { position: absolute; }
.cover-frame { padding-top: var(--space-5); }
.cover {
  --pad: var(--space-3);
  position: relative;
  padding: var(--pad);
  background: var(--green-dark);
  color: var(--white);
  overflow: hidden;
  container-type: inline-size;
}
.cover__stack { display: grid; }
.cover__stack > * { grid-area: 1 / 1; visibility: var(--shown, visible); }
.cover :focus-visible { outline-color: var(--yellow); }

/* The other stories as small hints at the very top */
.hints { list-style: none; padding: 0 0 var(--space-3); display: grid; gap: var(--space-2); align-content: start; }
.cover__hints { border-bottom: 2px solid rgba(255, 255, 255, 0.35); }
.hints a { display: block; color: var(--white); font-size: 0.9375rem; line-height: 1.2; text-decoration: none; }
.hints b { color: var(--yellow); font-weight: 700; }
.hints a:hover span { text-decoration: underline; }

.cover__head { position: relative; display: grid; gap: var(--space-1); padding-block: var(--space-3) var(--space-4); }
.cover__title { font-weight: 900; font-size: calc((100cqi - 2 * var(--pad)) / 5.45); line-height: 0.82; letter-spacing: -0.03em; white-space: nowrap; }
.cover__claim { font-size: 1rem; font-weight: 700; color: var(--yellow); }

.cover__stage { display: grid; gap: var(--space-4); align-content: start; }

/* The photo as if torn from a paper: white margin, ragged edge, laid on slightly askew */
.clip { position: relative; margin-inline: 0.4rem; transform: rotate(-2.2deg); filter: drop-shadow(0 0.6rem 0.9rem rgba(0, 0, 0, 0.35)); }
.clip__paper {
  padding: 0.7rem;
  background: var(--white);
  clip-path: polygon(0% 0.81%, 3.57% 0.43%, 7.14% 1.53%, 10.71% 0.26%, 14.29% 1.28%, 17.86% 0.9%, 21.43% 0.23%, 25% 1.22%, 28.57% 0.18%, 32.14% 1.05%, 35.71% 0.25%, 39.29% 0.3%, 42.86% 1.03%, 46.43% 1.92%, 50% 0.37%, 53.57% 0.59%, 57.14% 1.48%, 60.71% 2.18%, 64.29% 1.37%, 67.86% 0.97%, 71.43% 2.25%, 75% 0.2%, 78.57% 1.99%, 82.14% 0.74%, 85.71% 0.42%, 89.29% 0.36%, 92.86% 0.78%, 96.43% 1.9%, 100% 0.5%, 98.98% 3.57%, 99.11% 7.14%, 98.52% 10.71%, 98.91% 14.29%, 97.84% 17.86%, 97.83% 21.43%, 98.15% 25%, 99.2% 28.57%, 98.64% 32.14%, 98.39% 35.71%, 98.99% 39.29%, 98.7% 42.86%, 98.36% 46.43%, 99.45% 50%, 99.24% 53.57%, 98.24% 57.14%, 98.96% 60.71%, 98.86% 64.29%, 99.63% 67.86%, 99.3% 71.43%, 98.33% 75%, 99.86% 78.57%, 97.96% 82.14%, 98.62% 85.71%, 99.37% 89.29%, 98.03% 92.86%, 98.78% 96.43%, 100% 97.79%, 96.43% 99.17%, 92.86% 99.38%, 89.29% 98.96%, 85.71% 99.63%, 82.14% 98.39%, 78.57% 99.23%, 75% 99.01%, 71.43% 98.98%, 67.86% 98.7%, 64.29% 99.55%, 60.71% 99.78%, 57.14% 98.74%, 53.57% 99.16%, 50% 97.83%, 46.43% 99.24%, 42.86% 99.12%, 39.29% 99.88%, 35.71% 99.51%, 32.14% 98.33%, 28.57% 98.55%, 25% 99.17%, 21.43% 97.75%, 17.86% 98.72%, 14.29% 98.07%, 10.71% 97.96%, 7.14% 97.83%, 3.57% 99.39%, 0% 97.98%, 0.64% 96.43%, 0.96% 92.86%, 2.02% 89.29%, 0.28% 85.71%, 1.09% 82.14%, 1.31% 78.57%, 2.04% 75%, 1.9% 71.43%, 2% 67.86%, 0.71% 64.29%, 1.01% 60.71%, 0.89% 57.14%, 2.05% 53.57%, 2.21% 50%, 0.43% 46.43%, 0.49% 42.86%, 0.61% 39.29%, 0.61% 35.71%, 1.17% 32.14%, 1.4% 28.57%, 0.68% 25%, 0.11% 21.43%, 1.02% 17.86%, 0.91% 14.29%, 1.35% 10.71%, 2.2% 7.14%, 1.62% 3.57%);
}
/* A hidden cover does not render its photo, so a lazy picture loads only when its cover is shown. */
.clip__photo { position: relative; aspect-ratio: 800 / 696; content-visibility: var(--shown, visible); }
.clip__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Yellow marker loop around one detail of the photo */
.clip__marker { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.clip__marker path { fill: none; stroke: var(--yellow); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; }
.clip__credit { position: absolute; left: 0; bottom: 0; padding: 0.1rem 0.4rem; font-size: 0.6875rem; color: var(--white); background: rgba(0, 0, 0, 0.45); }

/* Magenta stamp, its centre at --sx/--sy of the photo */
.stamp {
  position: absolute;
  left: calc(0.7rem + (100% - 1.4rem) * var(--sx) / 100);
  top: calc(0.7rem + (100% - 1.4rem) * var(--sy) / 100);
  transform: translate(-50%, -50%) rotate(-9deg);
  padding: 0.35rem 0.7rem 0.45rem;
  border: 0.25rem solid var(--magenta);
  outline: 0.125rem solid var(--magenta);
  outline-offset: 0.2rem;
  background: rgba(255, 255, 255, 0.55);
  color: var(--magenta);
  font-weight: 900;
  font-size: clamp(1.375rem, 3.6cqi, 2.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  /* No automatic wrapping, but a line break in the stamp text starts a second line */
  white-space: pre;
  text-align: center;
  filter: url(#tinte);
}

.lead a { display: grid; gap: var(--space-3); color: var(--white); text-decoration: none; }
.lead__name { font-family: var(--font-accent); font-style: italic; font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--yellow); }
/* Longer headlines set smaller, so every cover needs about the same height (--len: characters) */
.lead__line { --fit: min(1, 48 / var(--len, 48)); font-weight: 900; font-size: clamp(2.5rem, 9.5cqi * var(--fit), 6.5rem); line-height: 0.9; letter-spacing: -0.025em; text-wrap: balance; }
.lead__sub { max-width: 30rem; font-size: 1.1875rem; }
.lead a:hover .lead__line { text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 0.1em; }
.lead a:hover { color: var(--white); }

@media (min-width: 60rem) {
  .cover { --pad: var(--space-5); padding-top: var(--space-4); }
  .hints { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }
  .cover__head { padding-block: var(--space-4); z-index: 0; }
  /* The photo reaches up into the head, so the claim stays within the left column. */
  .cover__claim { max-width: max(calc((100% - var(--space-5)) * 5 / 11), 26rem); }
  /* A narrower photo is less tall, so the text, flush with its foot, starts closer to the claim. */
  .cover__stage { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: var(--space-5); }
  .lead { order: -1; padding-bottom: var(--space-3); }
  .lead__line { font-size: clamp(2.75rem, 6.4cqi * var(--fit), 6rem); }
  /* The photo reaches up into the head, less on narrow screens where the claim runs wider than its column. */
  .clip { z-index: 1; margin: clamp(-4.5rem, 30.9rem - 60cqi, -1.5rem) 0 calc(-1 * var(--space-4)); }
}

/* Story rows: the first story leads across the width, the others share a 7:5 row.
   Each story may bring a small picture drawn from its own numbers (stories/<slug>/kachel.html.j2). */
.tiles { padding-top: var(--space-6); }
.tiles__list {
  list-style: none;
  padding: 0;
  display: grid;
  align-items: start;
  gap: var(--space-6);
}
@media (min-width: 48rem) { .tiles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }
@media (min-width: 72rem) { .tiles__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { position: relative; display: grid; gap: var(--space-4); align-content: start; }
.tile__text { display: grid; gap: var(--space-2); max-width: var(--text-max); }
.tile__title { font-weight: 900; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: var(--lh-headline-accent); text-wrap: balance; }
.tile__title a { color: var(--text); text-decoration: none; }
/* The whole row opens the story; the title stays the one link. */
.tile__title a::after { content: ""; position: absolute; inset: 0; }
.tile:hover .tile__title a { color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 3px; }
.tile__stand { color: var(--text-muted); font-size: 0.875rem; }
.tiles__empty { color: var(--text-muted); font-size: 1rem; }

/* All stories equal: the picture on top, aligned to a common baseline, the text below. */
.tile .kfig { order: -1; display: grid; align-content: end; }
@media (min-width: 48rem) { .tile .kfig { min-height: 16.5rem; } }

.kfig { margin: 0; }
.kfig__cap { font-size: 0.875rem; color: var(--text-muted); }

/* Cycling: the 100 problem spots as in the story, key beside the grid */
.kfig--waffle { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: end; }
.kfig__waffle { display: block; width: 100%; height: auto; }
.kfig--waffle .kfig__cap { display: grid; gap: var(--space-1); color: var(--text); font-size: 1rem; }
.kfig__intro { margin-bottom: var(--space-2); font-size: 0.875rem; color: var(--text-muted); }
.kfig__key { display: flex; align-items: baseline; gap: var(--space-2); }
.kfig__key strong { font-weight: 900; font-size: 1.75rem; line-height: 1; color: var(--green-dark); flex: none; width: 1.3em; font-variant-numeric: tabular-nums; }
.kfig__key .waffle__key { margin-top: 0; align-self: center; }
@media (min-width: 48rem) { .kfig--waffle { grid-template-columns: minmax(0, 15rem) minmax(0, 13rem); } }

/* Democracy: each attempt on one line, only the first one reached the ballot */
.kruns { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--space-2); border-top: 2px solid var(--line); }
.kruns__run { position: relative; display: grid; align-content: start; gap: var(--space-1); padding-top: 1.25rem; }
.kruns__run::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0.2rem;
  width: 0.375rem;
  height: 1.25rem;
  border-radius: 1px;
  background: var(--green-deep);
}
.kruns__run--held::before { top: -0.6rem; left: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--green-dark); }
.kruns__year { font-weight: 900; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1; letter-spacing: -0.02em; color: var(--green-dark); }
.kruns__end { font-size: 0.875rem; line-height: 1.2; overflow-wrap: break-word; hyphens: manual; }
.kruns__run--held .kruns__end { font-weight: 700; }
/* In the narrow tile column the five attempts stand one below the other along a vertical line */
@media (min-width: 0) {
  .kruns { grid-template-columns: 1fr; row-gap: var(--space-2); border-top: 0; border-left: 2px solid var(--line); padding-left: var(--space-3); }
  .kruns__run { grid-template-columns: 3.75rem minmax(0, 1fr); align-items: baseline; column-gap: var(--space-2); padding-top: 0; }
  .kruns__run::before { top: 0.35rem; left: calc(-1 * var(--space-3) - 0.25rem); width: 0.375rem; height: 0.9rem; }
  .kruns__run--held::before { top: 0.25rem; left: calc(-1 * var(--space-3) - 0.6rem); width: 1.1rem; height: 1.1rem; }
  .kruns__end { hyphens: none; }
}
.kfig--runs .kfig__cap { margin-top: var(--space-3); }

/* Westring: the cost staircase, two steps from the story, bar heights true to scale */
.kcost { display: flex; align-items: flex-end; gap: 3px; }
.kcost__step { display: grid; justify-items: start; gap: var(--space-1); width: 6rem; }
.kcost__sum { font-weight: 900; font-size: 1.25rem; line-height: 1; white-space: nowrap; color: var(--green-deep); }
.kcost__bar { display: block; width: 100%; height: calc(var(--v) / 1300 * 12rem); background: var(--green-dark); }
.kcost__step:first-child .kcost__bar { background: var(--green-light); }
.kcost__year { font-size: 0.875rem; color: var(--text-muted); }
.kfig--cost .kfig__cap { margin-top: var(--space-2); }

@supports selector(:has(*)) {
  .tile__title a:focus-visible { outline: none; }
  .tile:has(.tile__title a:focus-visible) { outline: 3px solid var(--green-dark); outline-offset: 0.5rem; }
}

/* Story: green head, text in reading width */

.story-head { background: var(--green-dark); color: var(--white); padding-block: var(--space-6) var(--space-5); }
.story-head .headline { max-width: 18ch; }
.story-head__teaser { margin-top: var(--space-4); max-width: var(--text-max); font-size: 1.25rem; }
.story-head__stand { margin-top: var(--space-3); font-size: 1rem; }
.story-head a { color: var(--white); font-weight: 700; }
.story-head :focus-visible { outline-color: var(--white); }

.story-layout {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-5) var(--page-pad) 0;
}
.story h2 { scroll-margin-top: var(--space-4); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Chapter list: folded under the head on narrow screens; from 68rem a quiet rail in its own column right of the text.
   Wide graphics stay in the text column, so they never run under the rail. */
.toc__title { font-weight: 700; font-size: 1rem; color: var(--green-dark); }
.toc__list { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.toc__list a {
  display: block;
  padding: 0.4rem 0 0.4rem var(--space-3);
  border-left: 2px solid var(--line);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--text-muted);
  text-decoration: none;
}
.toc__list a:hover { color: var(--green-dark); text-decoration: underline; }
.toc__list a[aria-current] { border-left: 4px solid var(--green-dark); padding-left: calc(var(--space-3) - 2px); color: var(--text); font-weight: 700; }
.toc--fold { margin-bottom: var(--space-5); border-block: 1px solid var(--line); padding-block: var(--space-2); }
.toc--fold summary { cursor: pointer; padding-block: var(--space-1); }
.toc--fold[open] .toc__list { margin-bottom: var(--space-2); }
.toc--side { display: none; }
@media (min-width: 68rem) {
  .story-layout--toc { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; column-gap: var(--space-5); align-items: start; }
  .story-layout--toc .story { grid-column: 1; grid-row: 1; min-width: 0; }
  .toc--fold { display: none; }
  .toc--side { display: block; grid-column: 2; grid-row: 1; position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; padding-top: var(--space-1); }
}
.story > *, .story section > * { max-width: var(--text-max); }
.story .wide { max-width: none; }
.story p + p { margin-top: var(--space-3); }
.story h2 {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--green-dark);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: var(--lh-headline-accent);
  text-wrap: balance;
}
.story > h2:first-child, .story > section:first-child > h2:first-child { margin-top: 0; }
.story h3 { margin: var(--space-5) 0 var(--space-3); font-weight: 900; font-size: 1.5rem; line-height: 1.1; text-wrap: balance; }
.story figure { margin-block: var(--space-5); }
.story figcaption { margin-top: var(--space-2); font-size: 1rem; color: var(--text-muted); }

.refs { font-size: 0.7em; line-height: 0; font-weight: 700; }
.view .ref + .ref::before { color: inherit; }
.ref { margin-left: 0.1em; text-decoration: none; }
.ref + .ref::before { content: ","; color: var(--text-muted); margin-right: 0.1em; }

/* Our view: always on dark green, the evaluation set apart from the facts */
.view {
  margin-block: var(--space-5);
  padding: var(--space-4);
  background: var(--green-dark);
  color: var(--white);
}
.view__label { font-weight: 900; font-size: 1.375rem; line-height: 1; margin-bottom: var(--space-3); }
.view a { color: var(--white); }
.view :focus-visible { outline-color: var(--white); }
.view blockquote, .voice {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 900;
  font-size: 1.375rem;
  line-height: 1.25;
}
.voice { margin-block: var(--space-5); color: var(--green-dark); }
.voice footer { margin-top: var(--space-2); font-family: var(--font-sans); font-style: normal; font-weight: 700; font-size: 1rem; color: var(--text); }
@media (min-width: 48rem) { .view { padding: var(--space-5); } }

/* Sources */

.belege { margin-top: var(--space-6); padding-block: var(--space-5); background: var(--surface); }
.belege h2 { font-weight: 900; font-size: 1.75rem; }
.belege__intro { margin-top: var(--space-2); max-width: var(--text-max); }
.belege__list { margin-top: var(--space-4); padding-left: 2.25rem; max-width: 52rem; display: grid; gap: var(--space-3); font-size: 1rem; }
.belege__list li::marker { font-weight: 700; color: var(--green-dark); }
.belege__src { color: var(--text-muted); overflow-wrap: anywhere; }
.belege li:target { outline: 3px solid var(--green-light); outline-offset: 6px; }

/* Plain pages and chronicle */

.page { padding-top: var(--space-5); }
.page .headline { color: var(--green-dark); }
.crumbs { margin-bottom: var(--space-2); font-weight: 700; }
.prose { max-width: calc(var(--text-max) + 2 * var(--page-pad)); margin-inline: 0; }
.prose h2 { margin: var(--space-5) 0 var(--space-2); font-weight: 900; font-size: 1.5rem; }
.prose .headline + * { margin-top: var(--space-4); }
.prose p + p { margin-top: var(--space-3); }
.page__lead { font-size: 1.25rem; }

.yearnav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: var(--space-2) var(--space-4);
  overflow-x: auto;
  margin-top: var(--space-4);
  padding-block: var(--space-3);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.year { margin-top: var(--space-5); scroll-margin-top: 4rem; }
/* The year is the one loud element of the chronicle: a real sequence, set big. */
.year h2 {
  color: var(--green-dark);
  font-weight: 900;
  font-size: clamp(3.5rem, 12vw, 7rem);
  line-height: var(--lh-headline);
  letter-spacing: -0.02em;
}
.chronicle { list-style: none; padding: 0; margin-top: var(--space-3); display: grid; gap: var(--space-4); }
.chronicle__item {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  scroll-margin-top: 4rem;
}
@media (min-width: 48rem) { .chronicle__item { grid-template-columns: 11rem minmax(0, var(--text-max)); } }
.chronicle__item:target { outline: 3px solid var(--green-light); outline-offset: 6px; }
.chronicle__date { font-weight: 700; color: var(--green-dark); }
.chronicle__kind { font-size: 1rem; color: var(--text-muted); }
.chronicle__quote {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 3px solid var(--green-light);
  font-size: 1rem;
  color: var(--text-muted);
}
.chronicle__src { margin-top: var(--space-2); font-size: 1rem; overflow-wrap: anywhere; }

/* Eye-catcher of the cycling story: 100 problem spots as a 10 x 10 grid */
.waffle { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 48rem) { .waffle { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.waffle__grid { width: 100%; max-width: 22rem; height: auto; }
.waffle__cell--u, .waffle__key--u { fill: var(--green-dark); background: var(--green-dark); }
.waffle__cell--o, .waffle__key--o { fill: var(--green-light); background: var(--green-light); }
.waffle__cell--f { fill: var(--white); stroke: var(--green-dark); stroke-width: 2; }
.waffle__key--f { background: var(--white); border: 2px solid var(--green-dark); }
.waffle__legend { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: 1rem; }
.waffle__legend li { display: flex; align-items: baseline; gap: var(--space-2); }
.waffle__legend strong { font-weight: 900; font-size: 1.75rem; line-height: 1; color: var(--green-dark); min-width: 2.2ch; }
.waffle__key { flex: none; width: 1rem; height: 1rem; border-radius: 2px; align-self: flex-start; margin-top: 0.55rem; }
.waffle figcaption { grid-column: 1 / -1; }

/* Eye-catcher of the democracy story: each attempt at a referendum and where it ended */
.runs__list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.run { display: grid; gap: var(--space-1) var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
@media (min-width: 48rem) { .run { grid-template-columns: 8.5rem minmax(0, 1fr); } }
.run__year { font-weight: 900; font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: var(--lh-headline); letter-spacing: -0.02em; color: var(--green-dark); }
.run__title { font-weight: 900; font-size: 1.375rem; line-height: 1.1; }
.run__count { margin-top: var(--space-1); font-size: 1rem; color: var(--text-muted); }
.run__steps { list-style: none; padding: 0; margin-top: var(--space-3); display: grid; gap: var(--space-2); font-size: 1rem; }
.run__step { position: relative; padding-left: 1.75rem; hyphens: auto; overflow-wrap: break-word; }
.run__step::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.3em;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--green-dark);
  border-radius: 50%;
  background: var(--white);
}
.run__end { font-weight: 700; }
/* Only the one attempt that reached the ballot ends in a filled dot; every stop is a magenta bar. */
.run--held .run__end::before { background: var(--green-dark); }
.run--stopped .run__end::before, .run--rule .run__end::before {
  top: 0.15em;
  width: 0.4rem;
  height: 1.1em;
  left: 0.375rem;
  border: 0;
  border-radius: 1px;
  background: var(--magenta);
}
@media (min-width: 60rem) {
  .run__steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .run__step { padding: 1.75rem var(--space-3) 0 0; }
  .run__step::before { top: 0; left: 0; }
  .run__step:not(:last-child)::after { content: ""; position: absolute; top: 0.5rem; left: 0.75rem; right: 0; height: 2px; background: var(--line); }
  .run--stopped .run__end::before, .run--rule .run__end::before { top: -0.2rem; left: 0.2rem; height: 1.2rem; }
}
.runs figcaption { margin-top: var(--space-4); }

/* Portrait next to Helge's own quote: photo above on phones, beside the quote from 48rem */
.portrait-quote { display: grid; gap: var(--space-3) var(--space-4); align-items: end; margin-block: var(--space-5); }
@media (min-width: 48rem) { .portrait-quote { grid-template-columns: 14rem minmax(0, 1fr); } }
.portrait-quote .voice { margin-block: 0; }
.story .portrait { margin-block: 0; max-width: 18rem; }
.portrait img { display: block; width: 100%; height: auto; border-radius: 2px; }
.portrait figcaption { margin-top: var(--space-1); font-size: 0.875rem; }

/* Own documentary photos: quieter than the eye-catcher, caption beside the picture from 48rem */
.photo { display: grid; gap: var(--space-2) var(--space-4); align-items: end; }
.photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.photo picture { max-width: 18rem; }
@media (min-width: 48rem) {
  .photo { grid-template-columns: 16rem minmax(0, 1fr); }
  .story .photo figcaption { margin-top: 0; padding-bottom: var(--space-1); }
}
.photo--quer picture { max-width: none; }
@media (min-width: 48rem) { .photo--quer { grid-template-columns: minmax(0, 1fr); } .story .photo--quer figcaption { padding-bottom: 0; } }
.credit { display: block; margin-top: var(--space-1); font-size: 0.875rem; }

/* Westring: the link at the end looks like the page of the initiative itself (colours, type and
   cost ladder of westring.at); the pointer near the top carries the same road marking, quietly. */
.wr-link, .wr-hint, .tally {
  --wr-asphalt: #34383c;
  --wr-asphalt-deep: #26292c;
  --wr-mark: #f2c200;
  --wr-ink: #1d2124;
  --wr-light: #e8eae6;
  --wr-muted: #c9cdc6;
  --wr-head: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
}
.wr-hint { position: relative; margin-top: var(--space-4); padding-left: calc(0.5rem + var(--space-3)); font-size: 1rem; }
.wr-hint::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.5rem;
  background: var(--wr-asphalt) repeating-linear-gradient(180deg, transparent 0 0.2rem, var(--wr-mark) 0.2rem 0.65rem, transparent 0.65rem 0.9rem) center / 2px 100% no-repeat;
}
.story p.wr-hint { margin-top: var(--space-4); }

.wr-link {
  display: block;
  margin-block: var(--space-5) 0;
  background: var(--wr-asphalt);
  color: #fff;
  font-family: var(--wr-head);
  text-decoration: none;
}
.wr-link:hover { color: #fff; }
.wr-link:focus-visible { outline-color: var(--green-deep); outline-offset: 4px; }
.wr-link__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem var(--space-4);
  background: var(--wr-asphalt-deep);
}
.wr-link__road { flex: none; width: 1.6rem; height: 0.3rem; background: repeating-linear-gradient(90deg, var(--wr-mark) 0 0.45rem, transparent 0.45rem 0.65rem); }
.wr-link__domain { font-weight: 800; font-size: 1.6rem; line-height: 1; letter-spacing: -0.01em; }
.wr-link__tld { color: var(--wr-mark); }
.wr-link__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-5);
}
.wr-link__text { max-width: 30rem; font-weight: 500; font-size: 1.25rem; line-height: 1.35; color: var(--wr-light); }
.wr-link__ladder { display: grid; border-left: 4px dashed var(--wr-mark); }
.wr-link__step { display: grid; grid-template-columns: 3.2rem auto 1fr; align-items: baseline; gap: 0 0.75rem; padding: 0.15rem 0 0.15rem 1rem; }
.wr-link__year { font-weight: 700; font-size: 1rem; color: var(--wr-muted); }
.wr-link__sum { font-weight: 800; font-size: clamp(1.6rem, calc(var(--v) / 1300 * 15vw), calc(1.4rem + var(--v) * 0.0032rem)); line-height: 0.95; letter-spacing: -0.02em; color: var(--wr-mark); font-variant-numeric: tabular-nums; }
.wr-link__note { font-weight: 500; font-size: 0.95rem; color: var(--wr-muted); }
.wr-link__go {
  justify-self: start;
  padding: 0.6rem 1rem;
  background: var(--wr-mark);
  color: var(--wr-ink);
  font-weight: 700;
  font-size: 1.125rem;
}
.wr-link:hover .wr-link__go { background: #fff; }
.wr-link:hover .wr-link__domain { text-decoration: underline; text-decoration-color: var(--wr-mark); text-decoration-thickness: 3px; text-underline-offset: 0.15em; }
@media (max-width: 30rem) {
  .wr-link__step { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .wr-link__note { grid-column: 2; padding-bottom: 0.4rem; }
}
@media (min-width: 40rem) {
  .wr-link__bar { padding-inline: var(--space-5); }
  .wr-link__hero { gap: var(--space-5); padding: var(--space-5); }
}

/* Eye-catcher of the public transport story: announced dates of the Regional-Stadtbahn drifting upwards.
   Lines live in an SVG stretched to the plot, dots and all text sit on the same percentage grid. */
.drift { display: grid; gap: var(--space-3); }
.drift__legend { list-style: none; padding: 0; display: grid; gap: var(--space-1); font-size: 1rem; }
@media (min-width: 48rem) { .drift__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); } }
.drift__legend li { display: flex; align-items: center; gap: var(--space-2); }
.drift__key { position: relative; flex: none; display: inline-block; width: 2rem; height: 1rem; }
.drift__key::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1.5px); height: 3px; border-radius: 2px; }
.drift__key::after { content: ""; position: absolute; left: calc(50% - 0.4375rem); top: calc(50% - 0.4375rem); width: 0.875rem; height: 0.875rem; box-sizing: border-box; }
.drift__key--bau::before { background: var(--green-dark); height: 4px; top: calc(50% - 2px); }
.drift__key--bau::after { background: var(--green-dark); border-radius: 2px; }
.drift__key--erst::before { background: var(--green-light); }
.drift__key--erst::after { background: var(--green-light); border-radius: 50%; }
.drift__key--ganz::before { height: 0; border-top: 3px dashed var(--green-light); }
.drift__key--ganz::after { background: var(--white); border: 3px solid var(--green-light); border-radius: 50%; }

.drift__chart { position: relative; padding: 1.75rem 1.5rem 3.25rem 2.75rem; }
.drift__plot { position: relative; height: clamp(19rem, 62vw, 27rem); }
.drift__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.drift__grid { stroke: var(--line); stroke-width: 1px; }
.drift__today { stroke: var(--magenta); stroke-width: 2px; stroke-dasharray: 5 4; }
.drift__line { fill: none; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round; }
.drift__line--bau { stroke: var(--green-dark); stroke-width: 4px; }
.drift__line--erst { stroke: var(--green-light); }
.drift__line--ganz { stroke: var(--green-light); stroke-dasharray: 6 5; }

.drift__axis { position: absolute; font-size: 0.875rem; color: var(--text-muted); }
.drift__axis--y { top: 0; left: 0; }
.drift__axis--x { bottom: 0; right: 1.5rem; }
.drift__ytick, .drift__xtick, .drift__todaylabel { position: absolute; font-size: 0.875rem; line-height: 1; font-variant-numeric: tabular-nums; }
.drift__ytick { right: calc(100% + 0.5rem); top: calc(var(--y) * 1%); transform: translateY(-50%); color: var(--text-muted); }
.drift__xtick { top: calc(100% + 0.5rem); left: calc(var(--x) * 1%); transform: translateX(-50%); color: var(--text-muted); }
@media (max-width: 40rem) { .drift__xtick--odd { display: none; } }
.drift__todaylabel { left: 0.25rem; top: calc(var(--y) * 1%); transform: translateY(0.3rem); font-weight: 700; color: var(--magenta); }

.drift__pt { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; }
.drift__pt::before { content: ""; position: absolute; left: -0.5rem; top: -0.5rem; width: 1rem; height: 1rem; box-sizing: border-box; box-shadow: 0 0 0 2px var(--white); }
.drift__pt--bau::before { background: var(--green-dark); border-radius: 2px; }
.drift__pt--erst::before { background: var(--green-light); border-radius: 50%; }
.drift__pt--ganz::before { background: var(--white); border: 3px solid var(--green-light); border-radius: 50%; box-shadow: none; }
.drift__val { position: absolute; white-space: nowrap; font-weight: 900; font-size: 1.0625rem; line-height: 1; letter-spacing: -0.01em; color: var(--text); }
.drift__val--r { left: 0.8rem; top: -0.5em; }
.drift__val--l { right: 0.8rem; top: -0.5em; }
.drift__val--o { bottom: 0.8rem; left: 0; transform: translateX(-50%); }
.drift__val--u { top: 0.8rem; left: 0; transform: translateX(-50%); }
.drift__val--or { bottom: 0.8rem; left: -0.5rem; }
/* Last word of each line set big: where the dates stand today */
.drift__val--end { font-size: 1.375rem; }
@media (min-width: 48rem) {
  .drift__chart { padding-left: 3.25rem; }
  .drift__val { font-size: 1.25rem; }
  .drift__val--end { font-size: 1.75rem; }
}

.drift__more { font-size: 1rem; }
.drift__more summary { cursor: pointer; font-weight: 700; color: var(--green-dark); }
.drift__table { margin-top: var(--space-3); width: 100%; border-collapse: collapse; }
.drift__table th, .drift__table td { padding: var(--space-2) var(--space-2) var(--space-2) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); hyphens: auto; }
.drift__table th { font-weight: 700; color: var(--text-muted); border-top: 0; }
.drift__table strong { font-weight: 900; color: var(--green-dark); }
/* On phones each announcement becomes a small block: who and when, the date, what for */
@media (max-width: 40rem) {
  .drift__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .drift__table tr { display: grid; gap: var(--space-1); padding-block: var(--space-2); border-top: 1px solid var(--line); }
  .drift__table td { display: block; padding: 0; border: 0; }
  .drift__table td:first-child { font-size: 0.875rem; color: var(--text-muted); }
}

/* Small version on the start page tile: same grid, two lines, labels only at the ends */
.kfig--drift { display: grid; gap: var(--space-2); }
.drift--mini .drift__chart { padding: 0.25rem 0.25rem 1.75rem 2.5rem; }
.drift--mini .drift__plot { height: 11.5rem; }
.drift--mini .drift__xtick--odd { display: none; }
.drift--mini .drift__val { font-size: 1rem; }
.kfig--drift .kfig__cap { display: grid; gap: var(--space-1); }
.kfig--drift .kfig__key { align-items: center; color: var(--text); font-size: 0.875rem; }

/* Network map of the Regional-Stadtbahn by Schiene OÖ: at most its own pixel width, wider than the text */
.photo--karte picture { max-width: 62.3125rem; }
.photo--karte img { border-radius: 0; }

/* Bus line 48 as a line band like on a stop display: stacked on phones, across from 48rem.
   Rings mark the ends, ticks the places in between; the 15 single stops are not drawn. */
.l48 { display: grid; gap: var(--space-4); }
.l48__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.l48__badge { display: inline-grid; place-items: center; min-width: 3.25rem; height: 2.5rem; padding-inline: var(--space-2); border-radius: 4px; background: var(--green-dark); color: var(--white); font-weight: 900; font-size: 1.625rem; line-height: 1; }
.l48__fact { font-size: 1rem; color: var(--text-muted); }
.l48__fact strong { font-weight: 900; font-size: 1.75rem; line-height: 1; color: var(--green-dark); font-variant-numeric: tabular-nums; }

.l48__route { position: relative; display: grid; gap: var(--space-3); padding-left: 2.25rem; }
.l48__route::before { content: ""; position: absolute; left: 0.75rem; top: 0.65rem; bottom: 0.65rem; width: 0.5rem; border-radius: 0.25rem; background: var(--green-dark); }
.l48__node { position: relative; font-size: 1.0625rem; line-height: 1.3rem; }
.l48__node::before { content: ""; position: absolute; left: -1.8rem; top: 0.525rem; width: 1.1rem; height: 0.25rem; border-radius: 1px; background: var(--green-dark); }
.l48__node--end { font-weight: 700; }
.l48__node--end::before { left: -2rem; top: -0.1rem; width: 1.5rem; height: 1.5rem; box-sizing: border-box; border: 0.3rem solid var(--green-dark); border-radius: 50%; background: var(--white); }
@media (min-width: 48rem) {
  .l48__route { display: block; height: 6.5rem; padding: 0; }
  .l48__route::before { left: 0.75rem; right: 0.75rem; top: calc(50% - 0.25rem); bottom: auto; width: auto; height: 0.5rem; }
  .l48__node { position: absolute; left: calc(0.75rem + (100% - 1.5rem) * var(--p) / 100); top: 50%; width: 0; height: 0; }
  .l48__node::before { left: -0.125rem; top: -0.55rem; width: 0.25rem; height: 1.1rem; }
  .l48__node--end::before { left: -0.75rem; top: -0.75rem; width: 1.5rem; height: 1.5rem; }
  .l48__name { position: absolute; bottom: 1.1rem; white-space: nowrap; transform: translateX(-50%); }
  .l48__node:nth-child(even) .l48__name { bottom: auto; top: 1.1rem; }
  .l48__node:first-child .l48__name { transform: translateX(-0.75rem); }
  .l48__node:last-child .l48__name { transform: translateX(calc(-100% + 0.75rem)); }
}

/* Below: when the bus was to run, as spans from announcement to target on a common year scale */
.l48__time { display: grid; gap: var(--space-2); }
.l48__plot { display: grid; gap: var(--space-3); }
.l48__row { display: grid; gap: var(--space-1); }
.l48__what { font-size: 1rem; }
.l48__what strong { font-weight: 900; color: var(--green-dark); }
.l48__track {
  position: relative;
  display: block;
  height: 1.75rem;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 7));
  border-right: 1px solid var(--line);
}
.l48__track::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--t) * 1%); border-left: 2px dashed var(--magenta); }
.l48__span { position: absolute; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); top: calc(50% - 2px); height: 4px; background: var(--green-dark); }
.l48__span::before, .l48__span::after { content: ""; position: absolute; top: 50%; box-shadow: 0 0 0 2px var(--white); }
.l48__span::before { left: -0.375rem; width: 0.75rem; height: 0.75rem; margin-top: -0.375rem; border-radius: 50%; background: var(--green-dark); }
.l48__span::after { right: -0.5rem; width: 1rem; height: 1rem; margin-top: -0.5rem; border-radius: 2px; background: var(--green-dark); }
.l48__heute { position: absolute; left: calc(var(--t) * 1% + 0.3rem); top: 0.1rem; font-size: 0.875rem; font-weight: 700; line-height: 1; color: var(--magenta); }
.l48__axis { position: relative; height: 1rem; font-size: 0.875rem; line-height: 1; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.l48__axis span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); }

/* What the city pays: two bars on one scale of 70 million euros, lines every 10.
   The Stadtbahn bar ends in a lid for its cap, the Westring bar is asphalt with the road marking of westring.at. */
.tally__chart { display: grid; gap: var(--space-4); }
.tally__row { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--space-1) var(--space-3); }
.tally__name { grid-column: 1 / -1; font-weight: 900; font-size: 1.375rem; line-height: 1.1; }
.tally__note { display: block; margin-top: 0.15rem; font-weight: 400; font-size: 1rem; line-height: 1.25; color: var(--text-muted); }
.tally__track { position: relative; display: block; height: 2.25rem; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 7)); }
.tally__bar { position: relative; display: block; width: calc(var(--v) / 70 * 100%); height: 100%; }
.tally__row--bahn .tally__bar { background: var(--green-dark); }
.tally__row--bahn .tally__bar::after { content: ""; position: absolute; right: -0.2rem; top: -0.4rem; bottom: -0.4rem; width: 0.4rem; border-radius: 1px; background: var(--green-deep); }
.tally__row--ring .tally__bar { background: var(--wr-asphalt) repeating-linear-gradient(90deg, var(--wr-mark) 0 0.9rem, transparent 0.9rem 1.5rem) 0 50% / 100% 3px no-repeat; }
.tally__sum { font-weight: 900; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.tally__row--ring .tally__sum { color: var(--wr-ink); }
.tally__axis { margin-top: calc(-1 * var(--space-3)); }
.tally__ticks { position: relative; display: block; height: 1rem; font-size: 0.875rem; line-height: 1; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tally__ticks span { position: absolute; left: calc(var(--v) / 70 * 100%); transform: translateX(-50%); }
.tally__ticks span:first-child { transform: none; }
.tally__unit { font-size: 0.875rem; line-height: 1.1; color: var(--text-muted); }

/* Remembrance: one plate per person the street name commission examined, darker the heavier the category.
   Category 1 plates are struck through like a cancelled street sign, the marked plate is Dinghofer. */
.plate { display: block; flex: none; width: 1.75rem; height: 1rem; border-radius: 2px; background-color: var(--plate, var(--white)); }
.plate--k1 { --plate: var(--green-deep); background-image: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--white) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.plate--k2 { --plate: var(--green-dark); }
.plate--k3 { --plate: var(--green-light); }
.plate--k0 { box-shadow: inset 0 0 0 1px var(--line); }
.plate--mark { outline: 2px solid var(--text); outline-offset: 2px; }
.plates__rows { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.plates__row { display: grid; gap: var(--space-2) var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.plates__label { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: var(--space-2); align-items: baseline; }
.plates__n { grid-row: span 2; font-weight: 900; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.plates__name { font-weight: 700; font-size: 1.125rem; line-height: 1.15; }
.plates__note { font-size: 1rem; line-height: 1.25; color: var(--text-muted); }
.plates__set { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 0.2rem; }
@media (min-width: 48rem) { .plates__row { grid-template-columns: 17rem minmax(0, 1fr); } }
.plates figcaption { margin-top: var(--space-4); }

/* Tile: the same 96 plates as one block, key beside it like the cycling tile */
.kfig--plates { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: end; }
.plates__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.plates__grid .plate { width: auto; height: auto; aspect-ratio: 7 / 4; }
.plates__grid .plate--k1 { background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--white) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.plates__grid .plate--mark { outline-width: 1.5px; outline-offset: 1px; }
.kfig--plates .kfig__cap { display: grid; gap: var(--space-1); color: var(--text); font-size: 1rem; }
.kfig--plates .kfig__key { align-items: center; }
.kfig--plates .kfig__key .plate { width: 1.25rem; height: 0.75rem; }
.kfig--plates .kfig__key strong { width: 1.3em; }
@media (min-width: 48rem) { .kfig--plates { grid-template-columns: minmax(0, 13rem) minmax(0, 13rem); } }

/* Walking: targets of the Masterplan Gehen as stretches of pavement. Solid is laid today, light green is planned
   by 2030, the outline by 2040; each row runs to its own largest target, so a short solid part means a big plan. */
.ziele__rows { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.ziele__row { display: grid; gap: var(--space-2) var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.ziele__name { font-weight: 700; font-size: 1.125rem; line-height: 1.15; }
.ziele__track { position: relative; display: block; height: 1.25rem; }
.ziele__seg { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; }
.ziele__seg--c, .ziele__key--c { background: var(--white); box-shadow: inset 0 0 0 2px var(--green-dark); }
.ziele__seg--c { width: var(--c); background-image: repeating-linear-gradient(90deg, transparent 0 calc(1.25rem - 1px), var(--line) calc(1.25rem - 1px) 1.25rem); }
.ziele__seg--b, .ziele__key--b { background: var(--green-light); }
.ziele__seg--b { width: var(--b); }
.ziele__seg--a, .ziele__key--a { background: var(--green-deep); }
.ziele__seg--a { width: var(--a); min-width: 3px; }
.ziele__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); font-variant-numeric: tabular-nums; }
.ziele__num { display: grid; font-weight: 900; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em; }
.ziele__num--a { color: var(--green-deep); }
.ziele__num--b { color: var(--green-dark); }
.ziele__none { font-weight: 400; font-size: 1rem; color: var(--text-muted); }
.ziele__year { font-weight: 400; font-size: 0.875rem; letter-spacing: 0; color: var(--text-muted); }
.ziele__legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); font-size: 1rem; }
.ziele__legend li { display: flex; align-items: center; gap: var(--space-2); }
.ziele__key { display: inline-block; flex: none; width: 1.75rem; height: 1rem; border-radius: 2px; }
@media (min-width: 48rem) {
  .ziele__row { grid-template-columns: minmax(0, 1fr) 19rem; align-items: center; }
  .ziele__name { grid-column: 1 / -1; }
  .ziele__nums { grid-column: 2; grid-row: 2; }
}
.ziele figcaption { margin-top: var(--space-4); }

/* Tile: three of the rows without numbers */
.ziele__rows--mini { gap: var(--space-2); }
.ziele__rows--mini .ziele__row { padding-top: var(--space-2); gap: var(--space-1); }
.ziele__rows--mini .ziele__name { font-size: 0.875rem; font-weight: 400; color: var(--text-muted); }
.ziele__rows--mini .ziele__track { height: 0.9rem; }
.ziele__rows--mini .ziele__seg--c { background-image: none; }
.kfig--ziele { display: grid; gap: var(--space-3); }
.kfig--ziele .kfig__cap { display: grid; gap: var(--space-1); }
.kfig--ziele .kfig__key { align-items: center; color: var(--text); font-size: 0.875rem; }
.kfig--ziele .kfig__key .ziele__key { width: 1.25rem; height: 0.75rem; }