/* wohngeld-rechner.info — the story kit's look (includes/story.php, docs/STORY.md) in the owner's whatstoresareopen
   design language (design/DESIGN.md, 8 Nov 2026): every chart a white card with a soft 1 px border and round corners,
   as wide as the text column; a mono kicker, an Archivo 800 title, mono axis words, units and the source stamp. Marks:
   bars and blocks in ink, grey for context; the marked item in the yellow shelf tag with an ink outline (yellow is
   never text: a marked label or value is ink, bold, on the soft yellow); today's law ("gilt") in the board's green;
   the 2027 bill always dashed in its burnt orange, with "Entwurf – kein Gesetz" as a dashed chip like the board's
   PENDING. Without script every chart shows its last state, fully grown; with it (story.js) marks grow once as the
   chart comes into view and a story's chart changes step by step. Motion only under .wgr-st-bewegt (set by story.js
   when the reader has not asked for reduced motion). Nothing under 15 px.

   The theme's tokens are read with whatstoresareopen's names (--card, --paper, --line, --tag, --open, --mono …; the
   theme defines them, site.css), each with a fallback: this site's older token where it has one, then a value. Every
   rule starts with the kit's own class (.wgr-ch, .wgr-pst, .wgr-sw), so the theme's .prose rules for lists and tables
   never reach a chart. */

@property --g { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --k { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --x { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --y { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --z { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --xa { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --xb { syntax: "<number>"; inherits: true; initial-value: 0; }

.wgr-ch, .wgr-pst, .wgr-sw, .wgr-st-fehler {
	--st-paper: var(--card, var(--sheet, #FFFFFF));               /* the chart's card: every label's halo sits on it */
	--st-panel: var(--paper, #F6F6F2);                            /* the page; a 3D drawing's floor; a big number's tile */
	--st-ink: var(--ink, #121212);
	--st-ink-2: var(--text, var(--ink-2, #3D3F43));
	--st-ink-3: var(--subtle, var(--ink-3, #6B6E73));
	--st-muted: var(--muted, var(--ink-2, #55575C));
	--st-link: var(--ink, #121212);
	--st-rule: var(--line, var(--rule, #E2E2DC));
	--st-hair: var(--line-soft, var(--hair, #EEEEE8));
	--st-input: var(--line-input, #D5D5CE);
	--st-acc: var(--open, var(--acc, #136F3A));                   /* today's law, "gilt", the main series */
	--st-acc-ink: var(--open-ink, var(--acc-ink, #0E5A2F));       /* green as words */
	--st-mark: var(--tag, #FFD43B);                               /* the marked item: the shelf tag */
	--st-mark-soft: var(--tag-soft, #FFF3C4);                     /* a marked label's or value's ground */
	--st-block: color-mix(in srgb, var(--ink, #121212) 46%, var(--card, #FFFFFF));   /* a 3D block's mid grey */
	--st-bar: var(--bar, #BDBDB5);                                /* the context: grey */
	--st-bar-2: var(--bar-2, #DCDCD5);
	--st-cut: var(--cut, #8A3306);                                /* the 2027 bill ONLY */
	--st-cut-soft: var(--cut-soft, #FCEEE6);
	--st-shadow: var(--shadow-ink, rgba(18, 18, 18, .22));
	--st-sans: var(--font, var(--font-sans, "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
	--st-mono: var(--mono, "DM Mono", ui-monospace, Menlo, monospace);
	--st-min: var(--fs-min, 15px);
	--st-tap: var(--tap, 48px);
	--st-display: var(--fs-display, clamp(64px, 9vw + 24px, 140px));
}

/* ---- A chart: a white card as wide as the text column ----
   The theme gives its text column (.prose) the chart width, --chart-w (100 %: the column, beside the right rail on a
   wide screen); a chart that stands in the text takes it. A story's or a button row's own chart is the card; the
   story itself (its steps) and the buttons stand on the page. */
.prose > .wgr-ch, .prose > .wgr-pst, .prose > .wgr-sw { position: relative; inline-size: var(--chart-w, 100%); max-inline-size: none; margin-inline: calc((100% - var(--chart-w, 100%)) / 2); }
figure.wgr-ch { container-type: inline-size; margin: 2em 0; padding: clamp(12px, 3vw, 24px); font-family: var(--st-sans); color: var(--st-ink); background: var(--st-paper); border: 1px solid var(--st-rule); border-radius: 20px; }
.wgr-ch .st-head { margin: 0 0 18px; max-inline-size: 46rem; }
.wgr-ch .st-kicker { margin: 0 0 8px; font: 500 var(--st-min)/1.3 var(--st-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--st-muted); }
.wgr-ch .st-title { margin: 0; font: 800 clamp(22px, 1vw + 16px, 28px)/1.15 var(--st-sans); letter-spacing: -.02em; color: var(--st-ink); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.wgr-ch .st-title b { font-weight: 850; color: var(--st-ink); box-shadow: inset 0 -.3em 0 var(--st-mark); }
.wgr-ch .st-body { position: relative; }
.wgr-ch .st-say { margin: 0 0 16px; font: 700 17px/1.3 var(--st-sans); color: var(--st-ink); }
.wgr-ch .st-say::before { content: ""; display: inline-block; inline-size: 14px; block-size: 14px; margin-right: 8px; vertical-align: -1px; border-radius: 3px; background: var(--st-ink); }
.wgr-ch .st-entwurf { margin: 0 0 16px; font: 400 16px/1.5 var(--st-sans); color: var(--st-ink-2); }
/* "Entwurf – kein Gesetz": the board's dashed PENDING chip, in the bill's burnt orange */
.wgr-ch .st-entwurf > span:first-child { display: inline-block; margin-right: 6px; padding: 5px 8px 4px; font: 900 var(--st-min)/1 var(--st-sans); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--st-cut); background: var(--st-cut-soft); border: 1.5px dashed var(--st-cut); border-radius: 6px; vertical-align: 1px; }
.wgr-ch .st-axis { margin: 12px 0 0; font: 400 var(--st-min)/1.45 var(--st-mono); color: var(--st-muted); }
/* the source line: the board's source stamp, "QUELLE" in mono */
.wgr-ch .st-cap { margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--st-hair); font: 400 var(--st-min)/1.5 var(--st-sans); color: var(--st-muted); max-inline-size: 52rem; }
.wgr-ch .st-cap a, .wgr-pst .st-pst__src a { color: var(--st-ink); font-weight: 600; }
.wgr-ch .st-cap b, .wgr-pst .st-pst__src b { font: 500 var(--st-min)/1 var(--st-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink); }
.wgr-ch .st-note { color: var(--st-ink); }
.wgr-ch .st-vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wgr-ch .is-off { opacity: 0; visibility: hidden; }
.wgr-ch svg [hidden] { display: none; }
.wgr-ch ul, .wgr-ch li { margin: 0; padding: 0; list-style: none; }
.wgr-st-fehler { border: 2px solid #b00020; color: #b00020; background: #fff; border-radius: 12px; padding: 8px 12px; font-size: 15px; }

/* Growing into view: --g goes from 0 to 1 (story.js); the server's drawing is fully grown. */
.wgr-st-bewegt .wgr-ch.is-ready { --g: 0; }
.wgr-st-bewegt .wgr-ch.is-ready.is-in { --g: 1; transition: --g 1.4s cubic-bezier(.22, .7, .2, 1); }
.wgr-st-bewegt .wgr-ch [data-k], .wgr-st-bewegt .wgr-ch [data-x], .wgr-st-bewegt .wgr-ch [data-y], .wgr-st-bewegt .wgr-ch [data-z], .wgr-st-bewegt .wgr-ch [data-xa], .wgr-st-bewegt .wgr-ch [data-xb] {
	transition: --k .75s cubic-bezier(.3, .7, .2, 1), --x .75s cubic-bezier(.3, .7, .2, 1), --y .75s cubic-bezier(.3, .7, .2, 1), --z .75s cubic-bezier(.3, .7, .2, 1), --xa .75s cubic-bezier(.3, .7, .2, 1), --xb .75s cubic-bezier(.3, .7, .2, 1), opacity .45s ease, background-color .4s ease;
}
.wgr-st-bewegt .wgr-ch [data-on], .wgr-st-bewegt .wgr-ch [data-hi] { transition: opacity .45s ease, background-color .4s ease, color .3s ease; }

/* ---- Big bars: ink; the marked one the shelf tag with an ink edge ---- */
.wgr-ch .st-br-plot { --rh: 46px; --lw: 4.6rem; --tw: .84; position: relative; block-size: calc(var(--rows) * var(--rh)); }
.wgr-ch .st-br-plot--long { --lw: 11.5rem; }
.wgr-ch .st-br { position: absolute; inset-inline: 0; top: calc(var(--y) * var(--rh)); block-size: var(--rh); display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); align-items: center; gap: 12px; }
.wgr-ch .st-br__l { font: 700 17px/1.1 var(--st-sans); text-align: right; color: var(--st-ink); }
.wgr-ch .st-br__t { position: relative; block-size: 100%; }
.wgr-ch .st-br__t::before { content: ""; position: absolute; inset-block: 0; left: calc(var(--zero) * var(--tw) * 100%); border-left: 1px solid var(--st-ink-3); }
.wgr-ch .st-br__f { position: absolute; top: 20%; block-size: 60%; left: calc(var(--zero) * var(--tw) * 100%); inline-size: calc(var(--tw) * 100%); background: var(--st-ink); border-radius: 0 3px 3px 0; transform-origin: 0 50%; transform: scaleX(calc(var(--k) * var(--g, 1))); }
.wgr-ch .st-br__v { position: absolute; z-index: 3; background: var(--st-paper); padding: 1px 4px; border-radius: 4px; top: 50%; left: calc((var(--zero) + var(--k) * var(--g, 1)) * var(--tw) * 100%); transform: translate(8px, -50%); font: 750 17px/1 var(--st-sans); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--st-ink); }
.wgr-ch .st-br.is-neg .st-br__v { left: calc(var(--zero) * var(--tw) * 100%); }
.wgr-ch .st-br.is-hi .st-br__f { background: var(--st-mark); box-shadow: inset 0 0 0 1.5px var(--st-ink); }
.wgr-ch .st-br.is-hi .st-br__l { color: var(--st-ink); font-weight: 850; }
.wgr-ch .st-br.is-hi .st-br__v { color: var(--st-ink); font-weight: 850; background: var(--st-mark-soft); }
.wgr-ch .st-br-ref { position: absolute; z-index: 1; top: -30px; bottom: 0; left: calc(var(--lw) + 12px + (100% - var(--lw) - 12px) * var(--tw) * var(--x)); border-left: 2px dashed var(--st-ink); pointer-events: none; }
.wgr-ch .st-br-ref span { position: absolute; top: 0; left: 6px; font: 400 var(--st-min)/1.2 var(--st-mono); color: var(--st-ink); white-space: nowrap; background: var(--st-paper); padding-right: 4px; }
.wgr-ch .st-br-ref.is-left span { left: auto; right: 6px; padding: 0 0 0 4px; }
/* a reference line's label stands above the plot: room for it under the title */
.wgr-ch .st-br-plot:has(.st-br-ref) { margin-top: 36px; }
@container (max-width: 560px) {
	.wgr-ch .st-br-plot { --rh: 40px; --lw: 3.4rem; --tw: .68; }
	.wgr-ch .st-br-plot--long { --rh: 58px; --lw: 0px; }
	.wgr-ch .st-br-plot--long .st-br { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0; align-items: stretch; }
	.wgr-ch .st-br-plot--long .st-br__l { position: relative; z-index: 2; justify-self: start; text-align: left; margin-top: 4px; padding-right: 4px; background: var(--st-paper); }   /* over a reference line, never under it */
	.wgr-ch .st-br-plot--long .st-br__f { top: 12%; block-size: 70%; }
	.wgr-ch .st-br__l, .wgr-ch .st-br__v { font-size: 16px; }
}

/* ---- Dumbbells: today ("gilt") a green dot, the other a ring; a ring from the bill dashed in its burnt orange ---- */
.wgr-ch .st-db__key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 16px; font: 700 16px/1.2 var(--st-sans); }
.wgr-ch .st-db__key > span { display: inline-flex; align-items: center; gap: 8px; }
.wgr-ch .st-db__key i { inline-size: 16px; block-size: 16px; border-radius: 50%; }
.wgr-ch .st-db__ka i { background: var(--st-acc); }
.wgr-ch .st-db__kb i { background: var(--st-paper); border: 3px solid var(--st-ink); }
.wgr-ch .st-db__kb.is-bill i { border-color: var(--st-cut); border-style: dashed; }
.wgr-ch .st-db__kb.is-bill b { color: var(--st-cut); }
.wgr-ch .st-db-plot { --rh: 54px; --lw: 9rem; position: relative; }
.wgr-ch .st-db-row { position: relative; block-size: var(--rh); display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); gap: 16px; align-items: center; border-bottom: 1px solid var(--st-hair); }
.wgr-ch .st-db-row:last-child { border-bottom: 0; }
.wgr-ch .st-db__l { position: relative; z-index: 2; justify-self: end; background: var(--st-paper); padding: 1px 5px; border-radius: 4px; font: 700 17px/1.15 var(--st-sans); text-align: right; }
.wgr-ch .st-db__t { position: relative; block-size: 100%; margin-inline: 6rem; }   /* room for an amount with cents ("225,40 €") beside its dot */
.wgr-ch .st-db__seg { position: absolute; top: calc(50% - 3px); block-size: 6px; border-radius: 3px; left: calc(min(var(--xa), var(--xb)) * 100%); inline-size: calc(max(var(--xa) - var(--xb), var(--xb) - var(--xa)) * 100% * var(--g, 1)); background: var(--st-bar); }
.wgr-ch .st-db-row.is-flip .st-db__seg { left: auto; right: calc((1 - max(var(--xa), var(--xb))) * 100%); }
.wgr-ch .st-db__a, .wgr-ch .st-db__b { position: absolute; top: 50%; inline-size: 20px; block-size: 20px; margin: -10px 0 0 -10px; border-radius: 50%; }
.wgr-ch .st-db__a { left: calc(var(--xa) * 100%); background: var(--st-acc); z-index: 2; }
.wgr-ch .st-db__b { left: calc(var(--xb) * 100%); background: var(--st-paper); border: 3px solid var(--st-ink); }
.wgr-ch .st-db-row.is-bill .st-db__b { border-color: var(--st-cut); border-style: dashed; }
.wgr-ch .st-db-row.is-same .st-db__b { inline-size: 30px; block-size: 30px; margin: -15px 0 0 -15px; }
.wgr-ch .st-db__va, .wgr-ch .st-db__vb { position: absolute; z-index: 3; background: var(--st-paper); padding: 1px 4px; border-radius: 4px; top: 50%; font: 750 16px/1 var(--st-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wgr-ch .st-db__va { left: calc(var(--xa) * 100%); transform: translate(calc(-100% - 16px), -50%); color: var(--st-acc-ink); }
.wgr-ch .st-db__vb { left: calc(var(--xb) * 100%); transform: translate(16px, -50%); color: var(--st-ink); }
.wgr-ch .st-db-row.is-flip .st-db__va { transform: translate(calc(-100% - 16px), -50%); }
.wgr-ch .st-db-row.is-flip .st-db__vb { transform: translate(16px, -50%); }
.wgr-ch .st-db-row:not(.is-flip) .st-db__va { transform: translate(16px, -50%); }
.wgr-ch .st-db-row:not(.is-flip) .st-db__vb { transform: translate(calc(-100% - 16px), -50%); }
.wgr-ch .st-db-row.is-same .st-db__vb { display: none; }
.wgr-ch .st-db-row.is-same .st-db__va { transform: translate(20px, -50%); }
.wgr-ch .st-db-row.is-bill .st-db__vb { color: var(--st-cut); }
.wgr-ch .st-db-row.is-hi .st-db__l { color: var(--st-ink); font-weight: 850; background: var(--st-mark-soft); box-shadow: inset 0 -3px 0 var(--st-mark); }
.wgr-st-bewegt .wgr-ch.is-ready .st-db__a, .wgr-st-bewegt .wgr-ch.is-ready .st-db__b { opacity: 0; }
.wgr-st-bewegt .wgr-ch.is-ready.is-in .st-db__a, .wgr-st-bewegt .wgr-ch.is-ready.is-in .st-db__b { opacity: 1; transition: opacity .4s ease .9s; }
@container (max-width: 560px) {
	.wgr-ch .st-db-plot { --rh: 76px; --lw: 0px; }
	.wgr-ch .st-db-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0; align-items: stretch; }
	.wgr-ch .st-db__l { justify-self: start; text-align: left; margin-top: 6px; font-size: 16px; }
	.wgr-ch .st-db__t { margin-inline: 5.4rem; }
	.wgr-ch .st-db__va, .wgr-ch .st-db__vb { font-size: 15px; }
}

/* ---- Slopes: ink lines; a marked line green and heavy, the others grey ---- */
.wgr-ch .st-ln { max-inline-size: 56rem; }
.wgr-ch .st-ln__plot { position: relative; block-size: clamp(240px, 18vw + 150px, 400px); margin: 16px 13rem 8px 5.5rem; }
.wgr-ch .st-ln__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; clip-path: inset(-10px calc((1 - var(--g, 1)) * 100% - 10px) -10px -10px); }
.wgr-ch .st-ln__l { fill: none; stroke: var(--st-ink); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.wgr-ch .st-ln__l.is-hi { stroke: var(--st-acc); stroke-width: 6; }
.wgr-ch .st-ln__d { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); inline-size: 14px; block-size: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--st-ink); box-shadow: 0 0 0 2px var(--st-paper); }
.wgr-ch .st-ln__d.is-hi { background: var(--st-acc); }
.wgr-ch .st-ln__d b { position: absolute; top: 50%; font: 750 17px/1 var(--st-sans); font-variant-numeric: tabular-nums; color: var(--st-ink); background: var(--st-paper); padding: 0 3px; border-radius: 4px; white-space: nowrap; }
.wgr-ch .st-ln__d--a b { right: 100%; transform: translate(-8px, -50%); }
.wgr-ch .st-ln__d--b b { left: 100%; transform: translate(8px, -50%); }
.wgr-ch .st-ln--many .st-ln__d--b b { display: none; }
.wgr-ch .st-ln__name { position: absolute; left: 100%; top: calc(var(--y) * 100%); transform: translate(16px, -50%); font: 700 16px/1.1 var(--st-sans); color: var(--st-ink); white-space: nowrap; }
.wgr-ch .st-ln--many .st-ln__name { transform: translate(16px, -50%); }
.wgr-ch .st-ln__name.is-hi { color: var(--st-acc-ink); font-weight: 900; }
.wgr-ch .st-ln:has(.st-ln__l.is-hi) .st-ln__l:not(.is-hi) { stroke: var(--st-bar); stroke-width: 2.5; }
.wgr-ch .st-ln:has(.st-ln__l.is-hi) .st-ln__d:not(.is-hi) { background: var(--st-bar); }
.wgr-ch .st-ln:has(.st-ln__l.is-hi) .st-ln__name:not(.is-hi) { color: var(--st-ink-2); font-weight: 600; }
.wgr-ch .st-ln__cols { position: relative; block-size: 30px; margin: 12px 13rem 0 5.5rem; font: 500 var(--st-min)/1.2 var(--st-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--st-muted); }
.wgr-ch .st-ln__cols span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-50%); white-space: nowrap; }
.wgr-ch .st-ln__key { display: none; margin: 16px 0 0; flex-direction: column; gap: 4px; font: 650 16px/1.3 var(--st-sans); }
.wgr-ch .st-ln__key li.is-hi { color: var(--st-acc-ink); font-weight: 850; }
.wgr-st-bewegt .wgr-ch.is-ready .st-ln__d { opacity: 0; }
.wgr-st-bewegt .wgr-ch.is-ready.is-in .st-ln__d { opacity: 1; transition: opacity .3s ease 1s, --y .75s ease; }
@container (max-width: 760px) {
	.wgr-ch .st-ln__plot, .wgr-ch .st-ln__cols { margin-left: 4rem; margin-right: 4rem; }
	.wgr-ch .st-ln__name { display: none; }
	.wgr-ch .st-ln__key { display: flex; }
	.wgr-ch .st-ln--many .st-ln__d--a b { display: none; }
	.wgr-ch .st-ln__cols span:first-child { transform: translateX(-30%); }
	.wgr-ch .st-ln__cols span:last-child { transform: translateX(-70%); }
}

/* ---- The waffle: 1,000 squares, the share in green ---- */
.wgr-ch .st-wf__big { margin: 0 0 16px; line-height: 1; }
.wgr-ch .st-wf__num { display: block; font: 900 var(--st-display)/.86 var(--st-sans); font-stretch: 80%; letter-spacing: -.02em; color: var(--st-acc-ink); font-variant-numeric: tabular-nums; }
.wgr-ch .st-wf__of, .wgr-ch .st-wf__lab { display: inline; font: 800 clamp(20px, 1.4vw + 14px, 30px)/1.2 var(--st-sans); letter-spacing: -.01em; color: var(--st-ink); }
.wgr-ch .st-wf__lab { color: var(--st-ink-2); font-weight: 700; }
.wgr-ch .st-wf { margin-top: 20px; }
.wgr-ch .st-wf__svg { display: block; inline-size: 100%; block-size: auto; }
.wgr-ch .st-wf__e { fill: var(--st-bar-2); }
.wgr-ch .st-wf__f { fill: var(--st-acc); }
.wgr-st-bewegt .wgr-ch.is-ready .st-wf__f { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.wgr-st-bewegt .wgr-ch.is-ready.is-in .st-wf__f { opacity: 1; transform: none; transition: opacity .3s ease calc(var(--i) * 1100ms), transform .5s cubic-bezier(.2, .9, .3, 1.4) calc(var(--i) * 1100ms); }
.wgr-st-bewegt .wgr-ch.is-scrub .st-wf__f { opacity: clamp(0, calc((var(--g, 1) * 1.15 - var(--i)) * 18), 1); }
.wgr-ch .st-wf__key { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 400 var(--st-min)/1.4 var(--st-mono); color: var(--st-muted); }
.wgr-ch .st-wf__sw { inline-size: 12px; block-size: 12px; border-radius: 2px; background: var(--st-acc); flex: none; }

/* ---- Big numbers: the board's count tiles (on the page's paper inside the white card), the first in green ---- */
.wgr-ch .st-nb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 12px; }
.wgr-ch .st-nb__c { container-type: inline-size; padding: 18px 18px 16px; background: var(--st-panel); border: 1px solid var(--st-hair); border-radius: 14px; }
.wgr-ch .st-nb__n { display: block; font: 900 min(72px, 26cqi)/.95 var(--st-sans); font-stretch: 80%; letter-spacing: -.01em; color: var(--st-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wgr-ch .st-nb__c:first-child .st-nb__n { color: var(--st-acc-ink); }
.wgr-ch .st-nb__w { display: block; margin-top: 10px; font: 650 16px/1.35 var(--st-sans); color: var(--st-ink-2); max-inline-size: 26ch; }
.wgr-ch .st-nb__w b { color: var(--st-ink); }

/* ---- The grid: rows and columns from the data, each cell as dark as its value (ink into the card), the figure on
   a white chip; the marked cell the shelf tag with an ink edge ---- */
.wgr-ch .st-gr__axes { margin: 0 0 10px; font: 400 var(--st-min)/1.3 var(--st-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--st-muted); }
.wgr-ch .st-gr__ax-n { display: none; }
.wgr-ch .st-gr { display: grid; grid-template-columns: auto repeat(var(--nc), minmax(0, 1fr)); gap: 4px; max-inline-size: 64rem; }
.wgr-ch .st-gr > * { grid-row: var(--gr); grid-column: var(--gc); }
.wgr-ch .st-gr__ch, .wgr-ch .st-gr__rh { display: grid; align-items: center; font: 700 16px/1.2 var(--st-sans); color: var(--st-ink); }
.wgr-ch .st-gr__ch { justify-items: center; padding-bottom: 4px; text-align: center; }
.wgr-ch .st-gr__rh { justify-items: end; padding-right: 8px; text-align: right; max-inline-size: 12rem; }
.wgr-ch .st-gr__sh, .wgr-ch .st-gr__cl { display: none; }
.wgr-ch .st-gr__cell { position: relative; display: grid; place-items: center; min-block-size: 54px; padding: 4px 2px; border-radius: 6px; background: color-mix(in srgb, var(--st-ink) calc(var(--k) * 52% * var(--g, 1) + 5%), var(--st-paper)); }
.wgr-ch .st-gr__cell.is-hi { background: var(--st-mark); box-shadow: inset 0 0 0 2px var(--st-ink); z-index: 1; }
.wgr-ch .st-gr__chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 7px 4px; border-radius: 5px; background: var(--st-paper); color: var(--st-ink); font: 700 16px/1.1 var(--st-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wgr-ch .st-gr__cell.is-hi .st-gr__chip { font-weight: 900; }
.wgr-st-bewegt .wgr-ch.is-ready.is-in .st-gr__cell { transition: background-color .6s ease calc(var(--i) * 500ms), --k .75s ease; }
.wgr-ch .st-gr__units { display: none; }
@container (max-width: 720px) {
	.wgr-ch .st-gr__chip { padding: 2px 4px; font-size: 15px; }
	.wgr-ch .st-gr__u { display: none; }
	.wgr-ch .st-gr__units { display: block; }
}
@container (max-width: 560px) {
	.wgr-ch .st-gr__axes--turn .st-gr__ax-w { display: none; }
	.wgr-ch .st-gr__axes--turn .st-gr__ax-n { display: inline; }
	.wgr-ch .st-gr--turn { grid-template-columns: auto repeat(var(--nr), minmax(0, 1fr)); gap: 3px; }
	.wgr-ch .st-gr--turn > * { grid-row: var(--gc); grid-column: var(--gr); }
	.wgr-ch .st-gr--turn .st-gr__lg { display: none; }
	.wgr-ch .st-gr--turn .st-gr__sh { display: inline; }
	.wgr-ch .st-gr--turn .st-gr__rh { justify-items: center; padding: 0 0 4px; text-align: center; }
	.wgr-ch .st-gr--turn .st-gr__ch { justify-items: end; padding: 0 6px 0 0; }
	.wgr-ch .st-gr--turn .st-gr__cell { min-block-size: 44px; padding: 2px 1px; border-radius: 4px; }
	.wgr-ch .st-gr--turn .st-gr__chip { padding: 2px 3px; }
	.wgr-ch .st-gr--cards { display: flex; flex-wrap: wrap; gap: 4px; }
	.wgr-ch .st-gr--cards .st-gr__corner, .wgr-ch .st-gr--cards .st-gr__ch { display: none; }
	.wgr-ch .st-gr--cards .st-gr__rh { flex: 0 0 100%; justify-items: start; max-inline-size: none; margin-top: 10px; padding: 0; text-align: left; }
	.wgr-ch .st-gr--cards .st-gr__cell { flex: 1 1 4.4rem; min-block-size: 46px; }
	.wgr-ch .st-gr--cards .st-gr__chip { flex-direction: column; align-items: center; gap: 0; }
	.wgr-ch .st-gr--cards .st-gr__cl { display: block; font-weight: 650; color: var(--st-ink-2); }
}

/* ---- 3D: lit blocks on a floor (the page's paper with a faint grid), in mid grey; the marked one the shelf tag;
   the Mietenstufen in their own scale (pale yellow to dark green); today green, the bill burnt orange ---- */
.wgr-ch .st-b3-scene { position: relative; max-inline-size: var(--b3w, 100%); margin-inline: auto; container-type: inline-size; overflow: hidden; perspective: 2400px; perspective-origin: 50% 0%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; background: var(--st-paper); border-radius: 12px; }
.wgr-ch .st-b3-scene.is-dragging { cursor: grabbing; }
.wgr-ch .st-b3-scene:focus-visible { outline: 3px solid var(--st-ink); outline-offset: 4px; }
.wgr-ch .st-b3-stage { --u: calc(100cqi / var(--unit)); position: absolute; left: 50%; top: var(--top, 58%); inline-size: calc(var(--W) * var(--u)); block-size: calc(var(--D) * var(--u)); margin-left: calc(var(--W) * var(--u) / -2); margin-top: calc(var(--D) * var(--u) / -2); transform-style: preserve-3d; transform: rotateX(var(--rx, 58deg)) rotateZ(var(--rz, -38deg)); }
.wgr-ch .st-b3-floor { position: absolute; inset: calc(var(--u) * -.35); border-radius: calc(var(--u) * .12); background-color: var(--st-panel); background-image: linear-gradient(var(--st-rule) 1px, transparent 1px), linear-gradient(90deg, var(--st-rule) 1px, transparent 1px); background-size: calc(var(--u) * .5) calc(var(--u) * .5); background-position: calc(var(--u) * .35) calc(var(--u) * .35); }
.wgr-ch .st-b3 { --bc: var(--st-block); --h: calc(var(--k) * var(--g, 1) * var(--H) * var(--u)); position: absolute; left: calc(var(--bx) * var(--u)); top: calc(var(--by) * var(--u)); inline-size: calc(var(--bw) * var(--u)); block-size: calc(var(--bd) * var(--u)); transform-style: preserve-3d; }
.wgr-ch .st-b3 > i { position: absolute; display: block; }
.wgr-ch .st-b3__t { inset: 0; transform: translateZ(var(--h)); background: color-mix(in srgb, var(--bc) 78%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 55%, #fff); }
.wgr-ch .st-b3__l { left: 0; top: 0; block-size: 100%; inline-size: var(--h); transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(to right, color-mix(in srgb, var(--bc) 78%, #000), var(--bc) 75%); }
.wgr-ch .st-b3__r { left: 0; top: 100%; inline-size: 100%; block-size: var(--h); transform-origin: 50% 0; transform: rotateX(90deg); background: linear-gradient(to bottom, color-mix(in srgb, var(--bc) 48%, #000), color-mix(in srgb, var(--bc) 66%, #000) 75%); }
.wgr-ch .st-b3__sh { left: 4%; top: 6%; inline-size: 100%; block-size: calc(94% + var(--h) * .55); background: var(--st-shadow); filter: blur(calc(var(--u) * .09)); transform: translateZ(.5px); }
.wgr-ch .st-b3.is-hi { --bc: var(--st-mark); }
.wgr-ch .st-b3.is-hi .st-b3__t { box-shadow: inset 0 0 0 calc(var(--u) * .04) var(--st-ink); }
.wgr-ch .st-b3.k-s1 { --bc: var(--s1, #FFF1B8); } .wgr-ch .st-b3.k-s2 { --bc: var(--s2, #EFE48A); } .wgr-ch .st-b3.k-s3 { --bc: var(--s3, #C8DB85); }
.wgr-ch .st-b3.k-s4 { --bc: var(--s4, #92C47A); } .wgr-ch .st-b3.k-s5 { --bc: var(--s5, #58A66A); } .wgr-ch .st-b3.k-s6 { --bc: var(--s6, #2B8452); }
.wgr-ch .st-b3.k-s7 { --bc: var(--s7, #0E5A2F); }
/* a marked block of the level scale keeps its level's colour, with an ink frame on its top */
.wgr-ch .st-b3[class*="k-s"].is-hi .st-b3__t { box-shadow: inset 0 0 0 calc(var(--u) * .07) var(--st-ink); }
/* each block's tag: a small white card facing the reader, a rule in the block's colour under it */
.wgr-ch .st-b3__tag { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translateZ(calc(var(--h) + var(--u) * .08)) rotateZ(calc(var(--rz, -38deg) * -1)) rotateX(calc(var(--rx, 58deg) * -1)) translate(-50%, -100%); padding: 4px 9px 4px; background: var(--st-paper); border: 1px solid var(--st-rule); border-bottom: 3px solid var(--bc); border-radius: 6px; box-shadow: 0 6px 14px -8px rgba(18, 18, 18, .4); font: 800 16px/1.1 var(--st-sans); color: var(--st-ink); white-space: nowrap; pointer-events: none; }
.wgr-ch .st-b3.is-hi .st-b3__tag { border-bottom-color: var(--st-ink); background: var(--st-mark-soft); }
.wgr-ch .st-b3__tag span { font-weight: 650; font-variant-numeric: tabular-nums; }
.wgr-ch .st-b3--tagmark:not(.is-hi) .st-b3__tag { display: none; }
.wgr-ch .st-b3--r0 { --bc: var(--st-acc); }
.wgr-ch .st-b3--r1 { --bc: color-mix(in srgb, var(--st-ink) 55%, var(--st-paper)); }
.wgr-ch .st-b3--rbill { --bc: var(--st-cut); }
/* the bill is always dashed: a dashed line round the top of each of its blocks */
.wgr-ch .st-b3--rbill .st-b3__t { outline: 2px dashed color-mix(in srgb, var(--st-cut) 35%, #fff); outline-offset: calc(var(--u) * -.08); }
.wgr-ch .st-b3--r2 { --bc: var(--st-bar); }
.wgr-ch .st-b3-hint { margin: 10px 0 0; font: 400 var(--st-min)/1.4 var(--st-mono); color: var(--st-muted); }
.wgr-ch .st-b3-hint[hidden] { display: none; }
.wgr-ch .st-b3-list { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font: 600 16px/1.35 var(--st-sans); }
.wgr-ch .st-b3-list li::before { content: ""; display: inline-block; vertical-align: -1px; inline-size: 12px; block-size: 12px; margin-right: 6px; border-radius: 3px; background: var(--bc, var(--st-block)); }
.wgr-ch .st-b3-list li.is-hi { font-weight: 850; color: var(--st-ink); }
.wgr-ch .st-b3-list li.is-hi::before { background: var(--st-mark); box-shadow: inset 0 0 0 1.5px var(--st-ink); }
.wgr-ch .st-b3-list li.k-s1 { --bc: var(--s1, #FFF1B8); } .wgr-ch .st-b3-list li.k-s2 { --bc: var(--s2, #EFE48A); } .wgr-ch .st-b3-list li.k-s3 { --bc: var(--s3, #C8DB85); }
.wgr-ch .st-b3-list li.k-s4 { --bc: var(--s4, #92C47A); } .wgr-ch .st-b3-list li.k-s5 { --bc: var(--s5, #58A66A); } .wgr-ch .st-b3-list li.k-s6 { --bc: var(--s6, #2B8452); }
.wgr-ch .st-b3-list li.k-s7 { --bc: var(--s7, #0E5A2F); }
.wgr-ch .st-b3-list li[class*="k-s"]::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-ink) 25%, transparent); }
.wgr-ch .st-b3-list--rows { display: grid; gap: 6px; }
.wgr-ch .st-b3-list--rows li::before { display: none; }
.wgr-ch .st-b3-list--rows .st-b3-row[class*="st-b3-row--"]::before { display: inline-block; }
.wgr-ch .st-b3-list .st-b3-row--0::before { background: var(--st-acc); }
.wgr-ch .st-b3-list .st-b3-row--1::before { background: color-mix(in srgb, var(--st-ink) 55%, var(--st-paper)); }
.wgr-ch .st-b3-list .st-b3-row--bill::before { background: var(--st-cut); }
.wgr-ch .st-b3-list .st-b3-row--2::before { background: var(--st-bar); }
.wgr-ch .st-b3-list--rows .st-b3-row > span { white-space: nowrap; }
.wgr-ch .st-b3-list--rows .st-b3-row > span.is-hi { color: var(--st-ink); font-weight: 850; background: var(--st-mark-soft); border-radius: 4px; padding: 0 4px; }
.wgr-ch .st-b3-scene--field { --b3w: 50rem; }
.wgr-ch .st-b3-scene--row, .wgr-ch .st-b3-scene--rows { --b3w: 52rem; }
@container (max-width: 560px) {
	.wgr-ch .st-b3__tag { font-size: 15px; }
	.wgr-ch .st-b3-scene--rows .st-b3__tag, .wgr-ch .st-b3-scene--many .st-b3:not(.is-hi) .st-b3__tag { display: none; }
}

/* ---- A story: steps beside a chart that stays on screen ---- */
.wgr-pst { position: relative; margin-block: 2em; }
.wgr-pst .st-pst__graphic { margin: 0 0 24px; }
.wgr-pst .st-pst__graphic .wgr-ch { margin: 0; }
.wgr-pst .st-pst__step > p { margin: 0 0 1em; }
.wgr-pst.is-live .st-pst__graphic { position: sticky; top: 0; z-index: 3; margin: 0; background: var(--st-panel); }
.wgr-pst.is-live .st-pst__steps { position: relative; z-index: 1; }
.wgr-pst.is-live .st-pst__step { padding: 0 0 46vh; }
.wgr-pst.is-live .st-pst__step:last-child { padding-bottom: 18vh; }
.wgr-pst.is-live .st-pst__step > :last-child { margin-bottom: 0; }
.wgr-pst.is-live .st-pst__step > p { color: var(--st-ink-3); }
.wgr-st-bewegt .wgr-pst.is-live .st-pst__step > p { transition: color .3s ease; }
.wgr-pst.is-live .st-pst__step.is-active > p { color: var(--st-ink); }
.wgr-pst.is-live .st-pst__step a { scroll-margin-top: calc(var(--gh, 0px) + 16px); }
.wgr-pst .st-pst__src { display: none; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--st-hair); font: 400 var(--st-min)/1.5 var(--st-sans); color: var(--st-muted); }
.wgr-pst--text { margin-block: 24px; }
@media (max-width: 899px) {
	.wgr-pst.is-live .st-pst__graphic { padding: 8px 0 12px; }
	.wgr-pst.is-live .st-head { margin-bottom: 12px; }
	.wgr-pst.is-live .st-title { font-size: 21px; }
	.wgr-pst.is-live .st-cap, .wgr-pst.is-live .st-b3-hint, .wgr-pst.is-live .st-entwurf__t { display: none; }
	.wgr-pst.is-live .st-entwurf { margin-bottom: 10px; }
	.wgr-pst.is-live .st-pst__src { display: block; }
	.wgr-pst.is-live .st-pst__steps { padding-top: 24px; }
	.wgr-pst.is-live .st-pst__step { padding-left: 16px; border-left: 3px solid var(--st-rule); }
	.wgr-pst.is-live .st-pst__step.is-active { border-left-color: var(--st-mark); }
	.wgr-pst.is-live .st-wf__num { font-size: 72px; }
}
/* Signed-in editors: below WordPress's bar where it stays on screen (46 px from 601 px, 32 px from 783 px). */
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .wgr-pst.is-live .st-pst__graphic { top: 46px; } }
@media (min-width: 783px) and (max-width: 899px) { .admin-bar .wgr-pst.is-live .st-pst__graphic { top: 32px; } }
@media (min-width: 900px) {
	.wgr-pst.is-live .st-pst__body { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
	.wgr-pst.is-live .st-pst__graphic { grid-column: 2; grid-row: 1; top: max(16px, calc(50vh - 300px)); }
	.wgr-pst.is-live .st-pst__steps { grid-column: 1; grid-row: 1; padding-top: 34vh; }
	.wgr-pst.is-live .st-pst__step > p { font-size: 18px; line-height: 1.6; padding: 4px 0 4px 16px; border-left: 3px solid var(--st-rule); }
	.wgr-pst.is-live .st-pst__step.is-active > p { border-left-color: var(--st-mark); }
	.wgr-pst.is-live .st-pst__step > p + * { margin-top: .8em; }
}
/* A story's chart that shows the bill in some steps keeps its label "Entwurf – kein Gesetz" on a phone too (only the
   line after it goes, to fit). */
.wgr-pst.is-live .wgr-ch .st-cap { font-size: var(--st-min); }

/* ---- Buttons that choose a state: the board's filter chips ---- */
.wgr-sw { margin-block: 2em; }
.wgr-sw .wgr-ch { margin: 0; }
.wgr-sw .st-sw__bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wgr-sw .st-sw__bar[hidden] { display: none; }
.wgr-sw .st-sw__b { display: inline-flex; align-items: center; min-block-size: var(--st-tap); padding: 0 18px; border: 1.5px solid var(--st-input); border-radius: 999px; background: var(--st-paper); color: var(--st-ink); font: 650 16px/1 var(--st-sans); cursor: pointer; }
.wgr-sw .st-sw__b:hover { border-color: var(--st-ink); }
.wgr-sw .st-sw__b[aria-pressed="true"] { background: var(--st-ink); border-color: var(--st-ink); color: var(--st-paper); font-weight: 750; }
.wgr-sw .st-sw__b:focus-visible { outline: 3px solid var(--st-ink); outline-offset: 2px; }
.wgr-sw .st-sw__texts { max-inline-size: var(--measure, 46rem); margin: 20px 0 0; }
.wgr-sw.is-live .st-sw__text[hidden] { display: none; }
.wgr-sw .st-sw__text > :last-child { margin-bottom: 0; }

/* The reading map is a card in the right rail now (the theme): no chart passes over it, so story.js's class
   (wgr-st-away) changes nothing. */

@media print {
	.wgr-ch, .wgr-ch.is-ready, .wgr-ch.is-scrub { --g: 1 !important; }
	.wgr-ch .st-wf__f, .wgr-ch .st-db__a, .wgr-ch .st-db__b, .wgr-ch .st-ln__d { opacity: 1 !important; transform: none !important; }
	.wgr-pst.is-live .st-pst__graphic { position: static; }
	.wgr-ch .st-b3-hint, .wgr-sw .st-sw__bar { display: none !important; }
	.wgr-sw .st-sw__text[hidden] { display: block !important; }
}