/* westring.at: road signage type, asphalt and marking yellow, Danube green */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 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: 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; 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; 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; }
@font-face { font-family: "Vollkorn"; font-weight: 400; font-display: swap; src: url(/fonts/vollkorn-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Vollkorn"; font-weight: 400; font-display: swap; src: url(/fonts/vollkorn-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+2070-209F; }
@font-face { font-family: "Vollkorn"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/vollkorn-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Vollkorn"; font-weight: 600; font-display: swap; src: url(/fonts/vollkorn-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Vollkorn"; font-weight: 600; font-display: swap; src: url(/fonts/vollkorn-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+2070-209F; }

:root {
  --green: #1f5a3a;
  --green-deep: #163f29;
  --leaf: #7fb25a;
  --asphalt: #34383c;
  --asphalt-deep: #26292c;
  --paper: #f6f7f4;
  --line: #d9ddd5;
  --ink: #1d2124;
  --muted: #5b6268;
  --mark: #f2c200;
  --frame: 96rem;
  --pad: clamp(16px, 4vw, 68px);
  --text: 38rem;
  --head: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --body: "Vollkorn", Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--body); }
img { max-width: 100%; height: auto; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--green-deep); }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 0.6em; }
h3 { font-size: 1.35rem; }

.frame { max-width: var(--frame); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: -999px; top: 0; background: var(--mark); color: var(--ink); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* Masthead */
.masthead { background: var(--asphalt-deep); color: #fff; }
.masthead__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; padding-block: 0.5rem; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; font: 800 1.6rem/1 var(--head); letter-spacing: -0.01em; }
.wordmark__tld { color: var(--mark); }
.wordmark__road { width: 1.6rem; height: 0.3rem; background: repeating-linear-gradient(90deg, var(--mark) 0 0.45rem, transparent 0.45rem 0.65rem); }
.nav { display: flex; gap: 0.25rem 1.25rem; flex-wrap: wrap; font: 700 1.05rem/1 var(--head); }
.nav a { color: #fff; text-decoration: none; padding-block: 0.6rem; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--mark); }

/* Hero: the cost ladder is the one loud element */
.hero { background: var(--asphalt); color: #fff; padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; } }
.hero__title { color: #fff; font-size: clamp(2.4rem, 6.5vw, 4.4rem); line-height: 0.95; margin: 0 0 1.25rem; max-width: 14ch; }
.hero__lead { font-size: 1.2rem; max-width: 34rem; margin: 0; color: #e8eae6; }
.ladder { margin: 0; }
.ladder__steps { list-style: none; margin: 0; padding: 0; border-left: 4px dashed var(--mark); }
.ladder__steps li { display: grid; grid-template-columns: 3.4rem auto 1fr; align-items: baseline; gap: 0 0.9rem; padding: 0.15rem 0 0.15rem 1rem; }
.ladder__year { font: 700 1rem/1 var(--head); color: #c9cdc6; font-variant-numeric: tabular-nums; }
.ladder__sum { font: 800 clamp(1.6rem, calc(var(--v) / 1300 * 13vw), calc(1.4rem + var(--v) * 0.0045rem))/0.95 var(--head); color: var(--mark); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ladder__note { font: 500 0.95rem/1.25 var(--head); color: #dfe2dc; }
.ladder figcaption { margin-top: 1rem; font: 500 0.95rem/1.35 var(--head); color: #c9cdc6; max-width: 40rem; }
@media (max-width: 30rem) {
  .ladder__steps li { grid-template-columns: 2.8rem 1fr; }
  .ladder__note { grid-column: 2; padding-bottom: 0.4rem; }
}

/* Construction site today: own photos, documentary, below the cost ladder */
.site-now { background: var(--asphalt-deep); color: #fff; padding-block: 0 clamp(2rem, 4vw, 3rem); }
.site-now__title { color: #fff; font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin: 0; padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 4px dashed var(--mark); }
.site-now__fig { margin: 1rem 0 0; }
.site-now__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .site-now__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-now__grid img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--asphalt); }
.site-now__fig figcaption { margin-top: 0.75rem; font: 500 0.95rem/1.35 var(--head); color: #c9cdc6; max-width: 48rem; }
.site-now__credit { white-space: nowrap; }
.site-now .ref { background: rgba(255, 255, 255, 0.16); color: #fff; }
.site-now .ref:hover { background: var(--mark); color: var(--ink); }

/* Chapter list */
.toc { padding-block: 2rem 0.5rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font: 700 1.05rem/1.2 var(--head); counter-reset: ch; }
.toc li { counter-increment: ch; }
.toc li::before { content: counter(ch) " "; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Story chapters */
.chapter { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.chapter__grid { display: grid; gap: 1rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .chapter__grid { grid-template-columns: minmax(12rem, 18rem) minmax(0, var(--text)); }
  .chapter__head { position: sticky; top: 1.5rem; align-self: start; }
}
.chapter__km { display: block; font: 800 clamp(2.6rem, 5vw, 4rem)/1 var(--head); color: var(--leaf); font-variant-numeric: tabular-nums; margin-bottom: 0.4rem; }
.chapter--pro { background: #eceee9; }
.chapter--demands { background: var(--green); color: #fff; }
.chapter--demands h2, .chapter--demands .chapter__km { color: #fff; }
.chapter--demands .chapter__km { color: var(--mark); }
.chapter--demands a { color: #fff; }

.prose { max-width: var(--text); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.facts { padding-left: 1.2rem; }
.facts li { margin-bottom: 0.5em; }
.facts li::marker { color: var(--green); }

.view { margin: 1.75rem 0; padding: 1.1rem 1.25rem; background: #fff; border-left: 6px solid var(--mark); }
.view p:last-child { margin-bottom: 0; }
.view__label { font: 800 1rem/1 var(--head); color: var(--green); margin: 0 0 0.6rem !important; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.figures__item { margin: 0 !important; padding-top: 0.6rem; border-top: 4px solid var(--green); }
.figures__num { display: block; font: 800 2.4rem/1 var(--head); color: var(--green-deep); font-variant-numeric: tabular-nums; }
.figures__label { font: 500 0.95rem/1.3 var(--head); color: var(--muted); }

.demands { padding-left: 1.4rem; }
.demands li { margin-bottom: 0.9em; }
.demands li::marker { font: 800 1.1rem var(--head); color: var(--mark); }
.demands strong { display: block; font-family: var(--head); font-size: 1.15em; }

/* Source markers */
.refs { font: 700 0.7rem/1 var(--head); white-space: nowrap; vertical-align: super; margin-left: 0.1em; }
.ref { display: inline-block; min-width: 1.35em; padding: 0.12em 0.3em; margin-left: 0.15em; text-align: center; color: var(--green-deep); background: #e3eadf; border-radius: 0.3em; text-decoration: none; }
.ref:hover { background: var(--mark); }
.hero .ref, .chapter--demands .ref { background: rgba(255, 255, 255, 0.16); color: #fff; }
.hero .ref:hover, .chapter--demands .ref:hover { background: var(--mark); color: var(--ink); }

/* Sources list */
.belege { padding-block: 3rem; background: #fff; border-top: 1px solid var(--line); }
.belege__intro { max-width: var(--text); color: var(--muted); }
.belege__list { max-width: 52rem; padding-left: 2.5rem; font-size: 1rem; }
.belege__list li { margin-bottom: 1rem; scroll-margin-top: 2rem; }
.belege__list li::marker { font: 700 0.95rem var(--head); color: var(--green); }
.belege__list li:target { background: #fff6cc; outline: 6px solid #fff6cc; }
.belege__fact { margin: 0; }
.belege__src { margin: 0.2rem 0 0; font: 500 0.95rem/1.35 var(--head); color: var(--muted); }

/* Inner pages */
.page { padding-block: 2.5rem 4rem; }
.page__lead { font-size: 1.2rem; max-width: var(--text); }
.crumbs { font: 700 1rem var(--head); margin: 0 0 0.5rem; }
.notice { max-width: var(--text); padding: 0.9rem 1.1rem; background: #fff6cc; border-left: 6px solid var(--mark); font-size: 1rem; }

.search { margin: 2rem 0 1rem; max-width: 40rem; }
.search label { display: block; font: 700 1.05rem var(--head); margin-bottom: 0.4rem; }
.search input { width: 100%; height: 44px; padding: 0 0.8rem; font: 400 1.05rem var(--body); border: 2px solid var(--asphalt); border-radius: 0; background: #fff; }
.search__hits { list-style: none; padding: 0; max-width: 52rem; }
.search__hits li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.search__hits a { display: block; }
.search__hits small { font: 500 0.9rem var(--head); color: var(--muted); }

.topics { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.topics a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 1rem; background: #fff; border-top: 4px solid var(--green); text-decoration: none; color: var(--ink); font: 700 1.15rem/1.2 var(--head); }
.topics a:hover { border-top-color: var(--mark); }
.topics__count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.topics--small { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 3rem; font: 700 1rem var(--head); }
.topics--small a { padding: 0; background: none; border: 0; color: var(--green); text-decoration: underline; font-size: 1rem; }

.claims { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 56rem; }
.claim { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
@media (min-width: 48rem) { .claim { grid-template-columns: 8rem minmax(0, 1fr); } }
.claim:target { background: #fff6cc; }
.claim__date { margin: 0; font: 700 1rem var(--head); color: var(--green); font-variant-numeric: tabular-nums; }
.claim__text { margin: 0 0 0.5rem; }
.claim__quote { margin: 0 0 0.5rem; padding-left: 0.9rem; border-left: 3px solid var(--line); font-style: italic; font-size: 0.98rem; color: #3b4146; }
.claim__src { margin: 0; font: 500 0.95rem/1.35 var(--head); color: var(--muted); }
.claim__id { color: var(--muted); }

.archive { list-style: none; padding: 0; max-width: 52rem; }
.archive__year { font: 800 1.8rem var(--head); color: var(--leaf); margin: 2rem 0 0.5rem; }
.archive__item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.archive__item time { font: 500 1rem var(--head); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) { .archive__item { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.archived { max-width: var(--text); overflow-wrap: anywhere; }
.archived h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin-top: 1.5rem; }
.archived img { display: block; margin: 1rem 0; }
.archived table { border-collapse: collapse; display: block; overflow-x: auto; }

/* Footer */
.footer { background: var(--green-deep); color: #fff; padding-block: 2rem; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: center; }
.footer__who { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer__who p { margin: 0; font: 500 1rem var(--head); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font: 700 1rem var(--head); }
.footer a { color: #fff; }
@media (max-width: 40rem) { .footer__nav { flex-direction: column; } }

@media (prefers-reduced-motion: no-preference) {
  .ladder__steps li { animation: rise 600ms cubic-bezier(.2,.7,.2,1) both; }
  .ladder__steps li:nth-child(2) { animation-delay: 90ms; }
  .ladder__steps li:nth-child(3) { animation-delay: 180ms; }
  .ladder__steps li:nth-child(4) { animation-delay: 270ms; }
  .ladder__steps li:nth-child(5) { animation-delay: 360ms; }
  .ladder__steps li:nth-child(6) { animation-delay: 450ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(0.6rem); } }
}
@media print {
  .masthead, .toc, .footer, .search { display: none; }
  .hero, .chapter--demands { background: none; color: var(--ink); }
  .hero__title, .chapter--demands h2 { color: var(--ink); }
}

/* Quotes of Green politicians, from the minutes and old press releases */
.voice { margin: 1.75rem 0; padding: 0; border: 0; }
.voice p { margin: 0 0 0.4rem !important; font: 800 clamp(1.4rem, 3vw, 1.8rem)/1.15 var(--head); color: var(--green-deep); }
.voice footer { font: 500 1rem var(--head); color: var(--muted); }

/* Archive: one chronicle by year, facts and press releases together */
.years { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.6rem; }
.years a { display: flex; justify-content: space-between; align-items: baseline; padding: 0.7rem 0.9rem; background: #fff; border-top: 4px solid var(--green); text-decoration: none; color: var(--ink); font: 800 1.3rem/1 var(--head); font-variant-numeric: tabular-nums; }
.years a:hover { border-top-color: var(--mark); }
.years__count { font: 500 0.95rem var(--head); color: var(--muted); }
.chronicle { list-style: none; padding: 0; margin: 1.5rem 0 0; max-width: 56rem; }
.chronicle__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
@media (min-width: 48rem) { .chronicle__item { grid-template-columns: 9rem minmax(0, 1fr); } }
.chronicle__item:target { background: #fff6cc; }
.chronicle__item--post { background: #eceee9; padding-inline: 0.75rem; }
.chronicle__date { margin: 0; font: 700 1rem/1.3 var(--head); color: var(--green); }
.chronicle__kind { margin: 0 0 0.2rem; font: 700 0.85rem var(--head); color: var(--muted); }
.chronicle__text, .chronicle__title { margin: 0 0 0.5rem; }
.chronicle__title a { font: 700 1.15rem/1.25 var(--head); }
.chronicle__quote { margin: 0 0 0.5rem; padding-left: 0.9rem; border-left: 3px solid var(--line); font-style: italic; font-size: 0.98rem; color: #3b4146; }
.chronicle__src { margin: 0; font: 500 0.95rem/1.35 var(--head); color: var(--muted); }
.yearnav { display: flex; justify-content: space-between; margin-top: 2.5rem; font: 800 1.4rem var(--head); }

/* Who runs the site: the citizens' initiative, supported by the Greens */
.wordmark__text { display: flex; flex-direction: column; gap: 0.15rem; }
.wordmark__sub { font: 500 0.8rem/1.1 var(--head); color: #d6d9d3; letter-spacing: 0; }
.footer__who { gap: 0.6rem 1rem; }
.footer__who p { max-width: 36rem; }
.footer__support { font-size: 0.9rem !important; color: #cfe0d5; }