/* unterhaltsrechner.info — the story kit's look (includes/story.php, docs/STORY.md), in the "Farbregister"
   look (design/DESIGN.md): every chart a raised white sheet wider than the reading column, its marks in the
   page's colour, the sun and the chart colours, every word on the sheet itself. Without script every chart
   shows its last state, fully grown; with it (story.js) marks grow as the chart comes into view and a story's
   chart changes step by step. Under reduced motion nothing moves by itself. Uses the theme's tokens (site.css). */

@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 --sp { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --kv { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --kw { syntax: "<number>"; inherits: false; initial-value: 0; }

/* The chart colours a series may take (marks only, never under words). */
.c-acc { --sc: var(--acc); } .c-pop { --sc: var(--pop); } .c-sonne { --sc: var(--d-sonne); } .c-blau { --sc: var(--d-blau); }
.c-orange { --sc: var(--d-orange); } .c-himmel { --sc: var(--d-himmel); } .c-gruen { --sc: var(--d-gruen); } .c-beere { --sc: var(--d-beere); } .c-grau { --sc: var(--d-grau); }

/* ---- A chart: a raised sheet, wider than the text, centred on the page ---- */
.ch { container-type: inline-size; margin: var(--sp-7) 0; padding: var(--sp-5) var(--sp-4) var(--sp-4); background: var(--sheet); color: var(--ink); border-radius: var(--r-2); box-shadow: var(--shadow-lift); font-family: var(--font-ui); }
.entry__body > .prose > .ch, .entry__body > .prose > .ust, .entry__body > .prose > .ust-switch { grid-column: full; justify-self: center; width: 100%; max-width: 72rem; position: relative; z-index: 9; }
/* On a phone a chart takes the whole screen but a 6 px margin (the grid would otherwise shrink it to its words). */
@media (max-width: 759px) { .entry__body > .prose > .ch, .entry__body > .prose > .ust-switch { justify-self: start; width: calc(100% + 2 * var(--gutter) - 12px); max-width: none; margin-left: calc(-1 * var(--gutter) + 6px); margin-right: 0; } .entry__body > .prose > .ust { justify-self: stretch; } }
@media (min-width: 720px) { .ch { padding: var(--sp-6) var(--sp-6) var(--sp-5); } }
.ch__head { margin: 0 0 var(--sp-5); max-width: 48rem; }
.ch__kicker { display: inline-block; margin: 0 0 var(--sp-2); padding: 4px 10px; border-radius: 6px; background: var(--acc-wash); font: 900 var(--fs-small)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--acc-ink); }
.ch__title { margin: 0; font: 900 clamp(24px, 2.2vw + 15px, 38px)/1.04 var(--font-ui); font-stretch: 84%; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
.ch__title b { color: var(--acc-ink); font-weight: 900; }
.ch__body { position: relative; }
.ch__say { margin: 0 0 var(--sp-4); padding: 8px 12px; border-radius: 8px; background: var(--pop); color: var(--pop-ink); font: 800 17px/1.35 var(--font-ui); box-shadow: inset 0 -3px 0 var(--pop-edge); }
.ch__axis { margin: var(--sp-3) 0 0; font: 600 var(--fs-small)/1.4 var(--font-ui); color: var(--ink-2); }
.ch__note { margin: var(--sp-5) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--rule); font: 400 var(--fs-small)/1.5 var(--font-ui); color: var(--ink-2); max-width: 56rem; }
.ch__note b { color: var(--ink); font-weight: 800; }
.ch .is-off { opacity: 0; visibility: hidden; }

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

/* ---- Stacked bars (across) and columns (up) ---- */
.sb__key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 var(--sp-4); padding: 0; list-style: none; font: 700 var(--fs-small)/1.3 var(--font-ui); color: var(--ink); }
.sb__key li { display: inline-flex; align-items: center; gap: 7px; }
.sb__key i { width: 16px; height: 16px; border-radius: 4px; background: var(--sc); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(0, 0, 0, .14); }
.sb__s { position: absolute; background: var(--sc); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), inset 0 0 0 1px rgba(0, 0, 0, .12); }
.sb__v { position: absolute; z-index: 5; font: 850 17px/1 var(--font-ui); font-feature-settings: var(--num); white-space: nowrap; color: var(--ink); background: var(--sheet); padding: 2px 4px; border-radius: 4px; }
.sb__ref { position: absolute; z-index: 4; pointer-events: none; }
.sb__ref span { position: absolute; font: 800 var(--fs-small)/1.2 var(--font-ui); color: var(--ink); background: var(--sheet); padding: 2px 6px; border-radius: 4px; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--ink); }

.sb--bars { --lw: 9rem; --tw: .8; }
.sb--bars.sb--long { --lw: 13rem; }
.sb--bars .sb__plot { position: relative; display: grid; gap: 10px; padding-top: 30px; }
.sb--bars .sb__row { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); gap: 12px; align-items: center; min-height: 40px; }
.sb--bars .sb__l { font: 750 16px/1.15 var(--font-ui); text-align: right; color: var(--ink); }
.sb--bars .sb__t { position: relative; height: 34px; }
.sb--bars .sb__t::before { content: ""; position: absolute; left: 0; top: -4px; bottom: -4px; border-left: 2px solid var(--line); }
.sb--bars .sb__s { top: 0; bottom: 0; left: calc(var(--x) * var(--g, 1) * var(--tw) * 100%); width: calc(var(--k) * var(--g, 1) * var(--tw) * 100%); border-right: 2px solid var(--sheet); }
.sb--bars .sb__s:first-child { border-radius: 3px 0 0 3px; }
.sb--bars .sb__v { top: 50%; left: calc(var(--kw, var(--k)) * var(--g, 1) * var(--tw) * 100%); transform: translate(8px, -50%); }
.sb--bars .sb__ref { top: 0; bottom: 0; left: calc(var(--lw) + 12px + (100% - var(--lw) - 12px) * var(--tw) * var(--x)); border-left: 3px dashed var(--ink); }
.sb__ref { --rp: var(--x); }   /* the line's place, passed on to its label (--x does not inherit) */
.sb--bars .sb__ref span { top: 0; left: 0; transform: translateX(calc(var(--rp, 0) * -100%)); }
.sb__row.is-hi .sb__l, .sb__row.is-hi .sb__v { background: var(--pop); color: var(--pop-ink); font-weight: 900; border-radius: 6px; box-shadow: inset 0 -3px 0 var(--pop-edge); }
.sb--bars .sb__row.is-hi .sb__l { justify-self: end; padding: 3px 8px; }
.sb__row.is-hi .sb__v { padding: 3px 7px; }
/* A marked row's parts keep their own colours (a sun-yellow part too), framed in ink. */
.sb__row.is-hi .sb__s { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 0 0 2px var(--ink); z-index: 1; }
@container (max-width: 560px) {
	.sb--bars { --lw: 0px; --tw: .7; }
	.sb--bars .sb__row.is-hi .sb__l { justify-self: start; }
	.sb--bars .sb__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.sb--bars .sb__l { text-align: left; font-size: 15px; }
	.sb--bars .sb__t { height: 28px; }
	.sb--bars .sb__ref { left: calc((100%) * var(--tw) * var(--x)); }
	.sb--bars .sb__v { left: calc(var(--kv, var(--k)) * var(--g, 1) * var(--tw) * 100%); }
	.sb__v { font-size: 16px; }
}

.sb--columns { --th: .84; }
.sb--columns .sb__plot { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(3px, 1.2cqi, 12px); height: clamp(230px, 46cqi, 380px); margin: 10px 0 36px; border-bottom: 2px solid var(--line); }
.sb--columns .sb__row { position: relative; height: 100%; }
.sb--columns .sb__t { position: absolute; inset: 0; }
.sb--columns .sb__s { left: 0; right: 0; bottom: calc(var(--x) * var(--g, 1) * var(--th) * 100%); height: calc(var(--k) * var(--g, 1) * var(--th) * 100%); border-top: 2px solid var(--sheet); }
.sb--columns .sb__s:first-child { border-top: 0; }
.sb--columns .sb__s:last-of-type { border-radius: 4px 4px 0 0; }
.sb--columns .sb__v { left: 50%; bottom: calc(var(--kv, var(--k)) * var(--g, 1) * var(--th) * 100%); transform: translate(-50%, -6px); font-size: 15px; }
.sb--columns .is-first .sb__v { left: 0; transform: translate(0, -6px); }
.sb--columns .is-last .sb__v { left: auto; right: 0; transform: translate(0, -6px); }
.sb--columns .sb__l { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font: 750 15px/1 var(--font-ui); font-feature-settings: var(--num); color: var(--ink); white-space: nowrap; }
.sb--columns .sb__ref { left: 0; right: 0; bottom: calc(var(--x) * var(--th) * 100%); border-top: 3px dashed var(--ink); }
.sb--columns .sb__ref span { display: none; }   /* named in the key instead (.sb__keyref) */
.sb__key .sb__keyref i { width: 24px; height: 0; border-radius: 0; background: none; box-shadow: none; border-top: 3px dashed var(--ink); }
.sb--columns .sb__ref.is-left span { right: auto; left: 0; }
.sb--columns .sb__row.is-hi .sb__l { padding: 3px 6px; }
/* Where the columns are narrow, every other figure (the table under the chart has them all), then only the marked ones and the ends. */
@container (max-width: 980px) { .sb--columns .sb__row.is-alt:not(.is-hi):not(.is-end) .sb__v { display: none; } }
/* Long column names tilt on a narrow chart; with many columns every other name goes (the marked ones and the ends stay). */
@container (max-width: 640px) {
	.sb--tilt .sb__plot { margin-bottom: calc(var(--tl, 8) * .36em + 22px); margin-left: calc(var(--tl, 8) * .44em); }
	.sb--tilt .sb__l { left: 50%; transform: translateX(-100%) rotate(-40deg); transform-origin: 100% 0; margin-top: 8px; }
}
@container (max-width: 520px) { .sb--many .sb__row.is-alt:not(.is-hi):not(.is-end) .sb__l { visibility: hidden; } }
@container (max-width: 640px) {
	.sb--columns .sb__row:not(.is-hi):not(.is-end) .sb__v, .sb--columns .sb__row.is-near:not(.is-hi) .sb__v { display: none; }
	.sb--columns .sb__plot { gap: 3px; }
}

/* ---- Big numbers: lit tiles ---- */
.nb { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.nb__c { container-type: inline-size; padding: var(--sp-4) var(--sp-4) var(--sp-4); border-radius: var(--r-2); background: var(--acc-wash); box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--acc) 45%, transparent); }
.nb__c:first-child { background: var(--pop); box-shadow: inset 0 -5px 0 var(--pop-edge); }
.nb__n { display: block; font: 900 min(68px, 25cqi)/.95 var(--font-ui); font-stretch: 80%; letter-spacing: -.03em; color: var(--acc-ink); font-feature-settings: var(--num); white-space: nowrap; }
.nb__c:first-child .nb__n { color: var(--pop-num); }
.nb__w { display: block; margin-top: var(--sp-3); font: 650 16px/1.35 var(--font-ui); color: var(--ink); }
.nb__c:first-child .nb__w { color: var(--pop-ink); }

/* ---- The mind map ---- */
.k-1 { --tc: var(--acc); } .k-2 { --tc: var(--d-orange); } .k-3 { --tc: var(--d-gruen); } .k-4 { --tc: var(--d-beere); } .k-5 { --tc: var(--d-himmel); } .k-6 { --tc: var(--sun-edge); }
.mm { container: mm / inline-size; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.mm__wide { display: none; position: relative; }
.mm__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; clip-path: inset(0 calc(50% - var(--g, 1) * 50%)); }
.mm__ln { fill: none; stroke: var(--tc, var(--line)); stroke-width: 2; }
.mm__ln--b { stroke-width: 5; stroke-linecap: round; }
.mm__c, .mm__b, .mm__l { position: absolute; margin: 0; }
.mm__c { left: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 16px 20px 18px; border-radius: 18px; background: var(--banner); color: var(--banner-ink); text-align: center; inline-size: max-content; max-inline-size: 20rem; box-shadow: var(--shadow-deep), inset 0 -6px 0 rgba(0, 0, 0, .22); }
.mm__c b { display: block; font: 900 clamp(22px, 2.4cqi, 28px)/1.05 var(--font-ui); font-stretch: 84%; letter-spacing: -.01em; }
.mm__c small { display: block; margin-top: 6px; font: 650 var(--fs-small)/1.25 var(--font-ui); color: var(--banner-ink-2); }
.mm__b { left: calc(var(--x) * 100%); transform: translate(-50%, -50%); z-index: 2; padding: 8px 14px 10px; border-radius: 12px; background: var(--sheet); border: 3px solid var(--tc); box-shadow: inset 0 -5px 0 var(--tc), var(--shadow); text-align: center; max-inline-size: 15rem; }
.mm__b b { display: block; font: 850 17px/1.15 var(--font-ui); color: var(--ink); }
.mm__l { left: calc(var(--x) * 100%); transform: translate(0, -50%); padding-left: 16px; font: 650 16px/1.2 var(--font-ui); color: var(--ink); inline-size: max-content; max-inline-size: 19.5%; }
.mm__l::before { content: ""; position: absolute; left: -5px; top: 50%; inline-size: 10px; block-size: 10px; margin-top: -5px; border-radius: 50%; background: var(--tc); }
.mm__l--l { transform: translate(-100%, -50%); padding: 0 16px 0 0; text-align: right; }
.mm__l--l::before { left: auto; right: -5px; }
.ch.is-ready .mm__b, .ch.is-ready .mm__l { opacity: 0; }
.ch.is-ready.is-in .mm__b, .ch.is-ready.is-in .mm__l { opacity: 1; transition: opacity .4s ease calc(.3s + var(--i) * 120ms); }
.mm__tc { margin: 0 0 var(--sp-4); padding: 14px 16px; border-radius: 14px; background: var(--banner); color: var(--banner-ink); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22); }
.mm__tc b { font: 900 25px/1.1 var(--font-ui); font-stretch: 86%; }
.mm__tc small { display: block; font: 650 var(--fs-small)/1.3 var(--font-ui); margin-top: 4px; color: var(--banner-ink-2); }
.mm__tree ul { list-style: none; margin: 0; padding: 0; }
.mm__tb { position: relative; border-left: 6px solid var(--tc); border-radius: 4px; padding: 2px 0 6px 14px; margin: 0 0 var(--sp-4); }
.mm__tb > p { margin: 0 0 4px; }
.mm__tb > p b { font: 850 18px/1.2 var(--font-ui); }
.mm__tb li { position: relative; padding: 3px 0 3px 16px; font: 550 16px/1.35 var(--font-ui); }
.mm__tb li::before { content: ""; position: absolute; left: 0; top: 10px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--tc); }
@container mm (min-width: 1000px) { .mm__wide { display: block; } .mm__tree { display: none; } }

/* ---- 3D: lit blocks on a floor ---- */
.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; border-radius: var(--r-2); background: linear-gradient(var(--acc-wash), var(--acc-wash)); }
.b3-scene.is-dragging { cursor: grabbing; }
.b3-scene:focus-visible { outline: 3px solid var(--acc-ink); outline-offset: 4px; }
.b3-stage { --u: calc(100cqi / var(--unit)); position: absolute; left: 50%; top: var(--top, 60%); 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, -30deg)); }
.b3-floor { position: absolute; inset: calc(var(--u) * -.4); border-radius: calc(var(--u) * .2); background-color: var(--sheet); background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: calc(var(--u) * .59) calc(var(--u) * .59); background-position: calc(var(--u) * .4) calc(var(--u) * .4); box-shadow: 0 0 0 calc(var(--u) * .06) color-mix(in srgb, var(--acc) 30%, transparent); }
.b3 { --bc: var(--acc); --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; transform: translateZ(calc(var(--z) * var(--g, 1) * var(--H) * var(--u))); }
.b3 > i { position: absolute; display: block; }
.b3__t { inset: 0; transform: translateZ(var(--h)); background: color-mix(in srgb, var(--bc) 72%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 60%, #fff); }
.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) 74%, #000), var(--bc) 80%); }
.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) 46%, #000), color-mix(in srgb, var(--bc) 64%, #000) 80%); }
.b3__sh { left: 6%; top: 8%; inline-size: 100%; block-size: calc(92% + var(--h) * .5); background: rgba(var(--shade), .30); filter: blur(calc(var(--u) * .08)); transform: translateZ(.5px); border-radius: 2px; }
.b3.is-hi { --bc: var(--d-sonne); }
.b3.c-col1 { --bc: var(--f1); } .b3.c-col2 { --bc: var(--f2); } .b3.c-col3 { --bc: var(--f3); } .b3.c-col4 { --bc: var(--f4); } .b3.c-col5 { --bc: var(--f5); } .b3.c-col6 { --bc: var(--f6); }
.b3[class*="c-col"].is-hi { --bc: var(--d-sonne); }
.b3.c-acc { --bc: var(--acc); } .b3.c-sonne { --bc: var(--d-sonne); } .b3.c-himmel { --bc: var(--d-himmel); } .b3.c-beere { --bc: var(--d-beere); } .b3.c-gruen { --bc: var(--d-gruen); } .b3.c-orange { --bc: var(--d-orange); } .b3.c-grau { --bc: var(--d-grau); } .b3.c-blau { --bc: var(--d-blau); }
.b3--layer:not(.b3--base) .b3__sh { display: none; }
/* A day of the calendar: its sides in two layers (lower, upper: --sp is the lower's share, passed to the faces
   as --spl), its top in a light tint of its phase's colour. */
.b3--day { --l1: var(--d-himmel); --l2: var(--acc); --bc: var(--l2); --spl: calc(var(--sp) * 100%); }
.b3--day .b3__l { background: linear-gradient(to right, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 80%), linear-gradient(to right, var(--l1) 0 var(--spl), var(--l2) var(--spl) 100%); }
.b3--day .b3__r { background: linear-gradient(rgba(0, 0, 0, .32), rgba(0, 0, 0, .32)), linear-gradient(to bottom, var(--l1) 0 var(--spl), var(--l2) var(--spl) 100%); }
.b3--day .b3__sh { filter: none; opacity: .5; }
.b3--day, .b3-key li { --tp-vor: color-mix(in srgb, var(--acc) 22%, #fff); --tp-geburt: var(--d-sonne); --tp-nach: color-mix(in srgb, var(--acc) 48%, #fff); --tp-nach12: color-mix(in srgb, var(--d-beere) 45%, #fff); }
.b3--day, .b3-key li { --tp-1: var(--tp-vor); --tp-2: var(--tp-geburt); --tp-3: var(--tp-nach); --tp-4: var(--tp-nach12); --tp-5: color-mix(in srgb, var(--d-himmel) 45%, #fff); --tp-6: var(--d-grau); }
.ph-1 { --tp: var(--tp-1); } .ph-2 { --tp: var(--tp-2); } .ph-3 { --tp: var(--tp-3); } .ph-4 { --tp: var(--tp-4); } .ph-5 { --tp: var(--tp-5); } .ph-6 { --tp: var(--tp-6); }
.pc-acc { --tp: color-mix(in srgb, var(--acc) 55%, #fff); } .pc-pop { --tp: var(--pop); } .pc-sonne { --tp: var(--d-sonne); } .pc-blau { --tp: color-mix(in srgb, var(--d-blau) 55%, #fff); } .pc-orange { --tp: color-mix(in srgb, var(--d-orange) 55%, #fff); }
.pc-himmel { --tp: color-mix(in srgb, var(--d-himmel) 50%, #fff); } .pc-gruen { --tp: color-mix(in srgb, var(--d-gruen) 50%, #fff); } .pc-beere { --tp: color-mix(in srgb, var(--d-beere) 45%, #fff); } .pc-grau { --tp: var(--d-grau); }
.b3-key [class*="ph-"] i, .b3-key [class*="pc-"] i { background: var(--tp); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25); }
.b3--day.ph-vor { --tp: var(--tp-vor); }
.b3--day.ph-geburt { --tp: var(--tp-geburt); }
.b3--day.ph-nach { --tp: var(--tp-nach); }
.b3--day.ph-nach12 { --tp: var(--tp-nach12); }
.b3--day .b3__t { background: var(--tp, var(--l2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.b3__tag { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translateZ(calc(var(--h) + var(--u) * .1)) rotateZ(calc(var(--rz, -30deg) * -1)) rotateX(calc(var(--rx, 58deg) * -1)) translate(var(--tx, -50%), -100%); padding: 5px 10px 6px; border-radius: 8px; background: var(--sheet); border-bottom: 4px solid var(--bc); font: 800 15px/1.15 var(--font-ui); color: var(--ink); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); }
.b3__tag span { font-weight: 900; font-feature-settings: var(--num); }
.b3--edge-l { --tx: -14%; } .b3--edge-r { --tx: -86%; }
.b3--anchor { pointer-events: none; }
.b3-scene--towers .b3__tag { transform: translateZ(calc(var(--H) * var(--u) + var(--u) * (.35 + var(--row, 0) * .24))) rotateZ(calc(var(--rz, -30deg) * -1)) rotateX(calc(var(--rx, 58deg) * -1)) translate(-50%, -100%); }
.b3-scene--towers .b3__tag::after { content: ""; position: absolute; left: calc(50% - 1px); top: 100%; width: 3px; height: max(0px, calc((var(--H) * var(--u) + var(--u) * (.35 + var(--row, 0) * .24) - var(--tt, 0) * var(--g, 1) * var(--H) * var(--u)) * .92)); background: var(--ink); border-radius: 0 0 2px 2px; }
.b3-scene--field .b3__tag { transform: translateZ(calc(var(--H) * var(--u) + var(--u) * .35)) rotateZ(calc(var(--rz, -30deg) * -1)) rotateX(calc(var(--rx, 58deg) * -1)) translate(var(--tx, -50%), -100%); }
.b3-scene--field .b3__tag::after { content: ""; position: absolute; left: calc(-1 * var(--tx, -50%) - 1px); top: 100%; width: 3px; height: calc((var(--H) * var(--u) + var(--u) * .35 - var(--h)) * .92); background: var(--ink); border-radius: 0 0 2px 2px; }
.b3-hint { margin: var(--sp-2) 0 0; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--ink-2); }
.b3-key, .b3-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font: 650 16px/1.35 var(--font-ui); color: var(--ink); }
.b3-key li { display: inline-flex; align-items: center; gap: 7px; }
.b3-key i, .b3-part i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.b3-key .c-col1 i { background: var(--f1); } .b3-key .c-col2 i { background: var(--f2); } .b3-key .c-col3 i { background: var(--f3); } .b3-key .c-col4 i { background: var(--f4); } .b3-key .c-col5 i { background: var(--f5); } .b3-key .c-col6 i { background: var(--f6); }
.b3-key .ph-vor i { background: var(--tp-vor); } .b3-key .ph-geburt i { background: var(--tp-geburt); } .b3-key .ph-nach i { background: var(--tp-nach); } .b3-key .ph-nach12 i { background: var(--tp-nach12); }
.b3-key [class*="ph-"] i { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25); }
.b3-key .ly-1 i { background: var(--d-himmel); width: 10px; height: 20px; } .b3-key .ly-2 i { background: var(--acc); width: 10px; height: 20px; }
.b3-key b { font-weight: 900; font-feature-settings: var(--num); }
.b3-list li.is-off { display: none; }
.b3-list li.is-hi { padding: 6px 12px; border-radius: 10px; background: var(--pop); color: var(--pop-ink); box-shadow: inset 0 -3px 0 var(--pop-edge); }
.b3-list b { font-weight: 900; font-feature-settings: var(--num); }
.b3-list--towers { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.b3-list--towers li { display: grid; gap: 4px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2); background: var(--sheet-2); }
.b3-list--towers li > b { font: 900 18px/1.2 var(--font-ui); }
.b3-part { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.b3-part b { margin-left: auto; }
.b3-part i { background: var(--sc); }
.b3-scene--field { --b3w: 62rem; }
.b3-scene--towers { --b3w: 52rem; }
.b3-scene--calendar { --b3w: 66rem; }
@container (max-width: 560px) { .b3__tag { font-size: 15px; padding: 4px 8px; } .b3-scene--towers .b3__tag { display: none; } }

/* ---- A story: steps beside a chart that stays on screen ---- */
.ust { position: relative; margin-block: var(--sp-7); }
.ust__graphic { margin: 0 0 var(--sp-5); }
.ust__graphic .ch { margin: 0; }
.ust__step > p { margin: 0 0 1em; }
.ust__n { display: none; }
.ust.is-live .ust__graphic { position: sticky; top: 0; z-index: 3; margin: 0; }
.ust.is-live .ust__steps { position: relative; z-index: 1; }
.ust.is-live .ust__step { padding: 0 0 46vh; }
.ust.is-live .ust__step:last-child { padding-bottom: 18vh; }
.ust.is-live .ust__step > :last-child { margin-bottom: 0; }
.ust.is-live .ust__step > p { color: var(--ink-2); transition: color .3s ease; }
.ust.is-live .ust__step.is-active > p { color: var(--ink); }
.ust.is-live .ust__n { display: inline-block; margin: 0 0 8px; padding: 3px 9px; border-radius: 6px; background: var(--sheet-2); color: var(--ink); font: 900 15px/1.2 var(--font-ui); font-feature-settings: var(--num); }
.ust.is-live .ust__step.is-active .ust__n { background: var(--acc-ink); color: var(--on-acc); }
.ust.is-live .ust__step a { scroll-margin-top: calc(var(--gh, 0px) + 16px); }
@media (max-width: 899px) {
	.ust.is-live .ust__graphic { padding: 6px 0 8px; background: var(--page); margin: 0 calc(-1 * var(--gutter)); padding-left: 6px; padding-right: 6px; }
	.ust.is-live .ch { padding: var(--sp-3) var(--sp-3) var(--sp-3); }
	.ust.is-live .ch__head { margin-bottom: var(--sp-2); }
	.ust.is-live .ch__kicker { display: none; }
	.ust.is-live .ch__title { font-size: 16px; font-stretch: 78%; line-height: 1.1; }
	.ust.is-live .ch__say { font-size: 15px; padding: 6px 10px; margin-bottom: var(--sp-2); }
	.ust.is-live .ch__note { display: none; }
	.ust.is-live .sb__key { gap: 0 12px; margin-bottom: var(--sp-2); line-height: 1.2; }
	.ust.is-live .sb__key i { width: 12px; height: 12px; }
	.ust.is-live .sb--bars { --lw: 4.6rem; --tw: .66; }
	.ust.is-live .sb--bars .sb__plot { gap: 4px; padding-top: 24px; }
	.ust.is-live .sb--bars .sb__row { grid-template-columns: var(--lw) minmax(0, 1fr); gap: 8px; min-height: 28px; }
	.ust.is-live .sb--bars .sb__l { text-align: right; }
	.ust.is-live .sb--bars .sb__t { height: 22px; }
	.ust.is-live .sb--bars .sb__ref { left: calc(var(--lw) + 8px + (100% - var(--lw) - 8px) * var(--tw) * var(--x)); }
	.ust.is-live .ch__axis { display: none; }
	.ust.is-live .b3-hint, .ust.is-live .b3-key:not(.b3-key--cal) { display: none; }
	.ust.is-live .b3-list { margin-top: var(--sp-2); font-size: 15px; }
	.ust.is-live .b3-list li.is-hi { padding: 4px 8px; }
	.ust.is-live .sb--columns .sb__plot { height: 190px; margin-top: 4px; }
	.ust.is-live .ust__steps { padding-top: var(--sp-5); }
	.ust.is-live .ust__step { padding-left: var(--sp-4); border-left: 4px solid var(--rule); }
	.ust.is-live .ust__step.is-active { border-left-color: var(--acc); }
}
@media (min-width: 900px) {
	.ust.is-live .ust__body { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: clamp(28px, 3.5vw, 56px); align-items: start; }
	.ust.is-live .ust__graphic { grid-column: 2; grid-row: 1; top: max(16px, calc(50vh - 300px)); }
	.ust.is-live .ust__steps { grid-column: 1; grid-row: 1; padding-top: 30vh; }
	.ust.is-live .ust__step > p { font-size: 19px; line-height: 1.6; padding: 6px 0 6px 18px; border-left: 4px solid var(--rule); }
	.ust.is-live .ust__step.is-active > p { border-left-color: var(--acc); }
	.ust.is-live .ust__step > p + * { margin-top: .8em; }
}
.ust.is-live .ch .ch__note { font-size: var(--fs-small); }
.ust__src { display: none; margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--rule); font: 400 var(--fs-small)/1.5 var(--font-ui); color: var(--ink-2); }
.ust.is-live .ust__src { display: block; }
/* On a wide screen a live story's chart keeps to the screen's height (a 1366 × 768 laptop): its note moves under
   the steps, its columns are lower. */
@media (min-width: 900px) {
	.ust.is-live .ch__note { display: none; }
	.ust.is-live .ch__head { margin-bottom: var(--sp-3); }
	.ust.is-live .sb--columns .sb__plot { height: clamp(200px, 34cqi, 290px); }
	.ust.is-live .sb--bars .sb__plot { gap: 6px; }
	.ust.is-live .sb--bars .sb__row { min-height: 34px; }
}
.ust--text { margin-block: var(--sp-5); }

/* ---- Buttons that choose a state: a row of raised keys inside the chart's sheet, under its head ---- */
.ust-switch { margin-block: var(--sp-7); }
.ust-switch .ch { margin: 0; }
.ust-switch__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: var(--sp-3); border-radius: var(--r-2); background: var(--acc-wash); }
.ust-switch__bar[hidden] { display: none; }
.ust-switch__k { flex: 1 0 100%; font: 850 var(--fs-small)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.ust-switch__b { min-height: 46px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-1); background: var(--sheet); color: var(--ink); font: 800 17px/1 var(--font-ui); font-feature-settings: var(--num); cursor: pointer; box-shadow: inset 0 0 0 2px var(--rule), inset 0 -4px 0 var(--rule); transition: transform .12s ease; }
.ust-switch__b:hover { box-shadow: inset 0 0 0 2px var(--acc), inset 0 -4px 0 var(--acc); }
.ust-switch__b[aria-pressed="true"] { background: var(--acc-ink); color: var(--on-acc); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), 0 4px 10px -4px rgba(var(--shade), .5); }
.ust-switch__b:active { transform: translateY(1px); }
.ust-switch__texts { max-width: var(--measure); margin: var(--sp-5) auto 0; }
.ust-switch.is-live .ust-switch__text[hidden] { display: none; }
.ust-switch__text > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.ch, .ch *, .ust *, .b3-stage, .ust-switch__b { transition: none !important; animation: none !important; }
}
@media print {
	.ch, .ch.is-ready, .ch.is-scrub { --g: 1 !important; }
	.ch.is-ready .mm__b, .ch.is-ready .mm__l { opacity: 1 !important; }
	.ust.is-live .ust__graphic { position: static; }
	.b3-hint, .ust-switch__bar { display: none !important; }
	.ust-switch__text[hidden] { display: block !important; }
}