/* The explainer kit (docs/KIT.md, design/DESIGN.md §6). Colours and fonts are the theme's tokens; every
   selector starts with .wgr-kit. Phone first: nothing under 15 px, nothing wider than the screen, no text
   on a level colour or a hatch. Motion: only .wgr-kit-bewegt (set by kit.js without reduced motion). */

.wgr-kit { margin: 0 0 32px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius, 4px); padding: clamp(12px, 3vw, 28px); color: var(--ink); max-width: 48rem; }
.wgr-kit [hidden] { display: none !important; }
.wgr-kit__titel { margin: 0 0 8px !important; font: 700 20px/1.3 var(--font-text) !important; letter-spacing: 0; }
.wgr-kit__text { font-size: 16px; color: var(--ink-2); margin: 0 0 12px; }
.wgr-kit__quelle { font-size: 15px; line-height: 1.45; color: var(--ink-2); margin: 12px 0 0; padding-left: 12px; border-left: 2px solid var(--rule); }
.wgr-kit__quelle a { color: var(--ink-2); }
.wgr-kit__quelle b { color: var(--ink); }
.wgr-kit__label, .wgr-kit__muster { display: inline-block; font: 700 15px/1 var(--font-text); letter-spacing: .05em; text-transform: uppercase; border: 1.5px solid var(--ink); padding: 5px 7px 4px; border-radius: 2px; vertical-align: 1px; }
.wgr-kit__entwurf { display: inline-block; font: 700 15px/1 var(--font-text); letter-spacing: .03em; text-transform: uppercase; color: var(--cut); background: var(--cut-soft); border: 1px dashed var(--cut); padding: 5px 7px 4px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.wgr-kit__status { font-size: 15px; color: var(--ink-2); margin: 0 0 12px; }
.wgr-kit__beispiel { font-size: 16px; margin: 0 0 12px; }
.wgr-kit__beispiel em { font-style: normal; color: var(--blue); }
.wgr-kit__fehler { border: 2px solid #b00020; color: #b00020; background: #fff; padding: 8px 12px; font-size: 15px; }
.wgr-kit__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wgr-kit__hand, .wgr-kit--notiz { font: 400 17px/1.7 var(--font-hand); color: var(--blue); }
.wgr-kit__ergebniszeile { font-size: 19px; margin: 0 0 8px; }
.wgr-kit__ergebniszeile b { font: 800 26px/1.2 var(--font-head); background: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 92%, transparent 92%); }


/* 1. map */
.wgr-kit--karte { max-width: none; }
.wgr-kit__karte { max-width: 34rem; margin: 0 auto; aspect-ratio: 860 / 1160; cursor: pointer; }
.wgr-kit__karte img, .wgr-kit__karte svg { display: block; width: 100%; height: 100%; }
.wgr-kit__karte path.wgr-kit__gewaehlt { stroke: var(--ink) !important; stroke-width: 2.5px !important; }
.wgr-kit__umschalter { display: flex; flex-wrap: wrap; border: 1.5px solid var(--line); border-radius: var(--radius, 4px); width: fit-content; max-width: 100%; overflow: hidden; margin: 0 0 12px; }
.wgr-kit__umschalter button { font: 700 15px/1.2 var(--font-text); color: var(--ink); background: var(--sheet); border: 0; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.wgr-kit__umschalter button + button { border-left: 1.5px solid var(--line); }
.wgr-kit__umschalter button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.wgr-kit__karteninfo { min-height: 1.5em; margin: 12px 0; font-size: 16px; text-align: center; }
.wgr-kit__karteninfo:empty { min-height: 0; margin: 4px 0; }
.wgr-kit__legende { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 0 auto 6px; padding: 0; max-width: 34rem; }
.wgr-kit__legende--5 { grid-template-columns: repeat(5, 1fr); }
.wgr-kit__legende li { display: grid; justify-items: center; gap: 2px; font-size: 15px; }
.wgr-kit__legende b { font: 700 17px/1.1 var(--font-head); }
.wgr-kit__legende small { font-size: 15px; color: var(--ink-2); }
.wgr-kit__fleck { display: inline-block; width: 100%; height: 16px; border: 1px solid var(--rule); }
.wgr-kit__fleck--s1 { background: var(--s1); } .wgr-kit__fleck--s2 { background: var(--s2); } .wgr-kit__fleck--s3 { background: var(--s3); } .wgr-kit__fleck--s4 { background: var(--s4); }
.wgr-kit__fleck--s5 { background: var(--s5); } .wgr-kit__fleck--s6 { background: var(--s6); } .wgr-kit__fleck--s7 { background: var(--s7); }
.wgr-kit__fleck--dm2 { background: var(--cut); } .wgr-kit__fleck--dm1 { background: var(--dm1); } .wgr-kit__fleck--d0 { background: var(--paper); } .wgr-kit__fleck--dp1 { background: var(--s4); } .wgr-kit__fleck--dp2 { background: var(--s7); }

.wgr-kit__legendetext { font-size: 15px; color: var(--ink-2); text-align: center; max-width: 34rem; margin: 4px auto 0; }
.wgr-kit__suche { display: grid; gap: 6px; margin: 0 0 16px; max-width: 22rem; }
.wgr-kit__suche label { font-weight: 700; font-size: 16px; }
.wgr-kit__suche input { font: 400 19px/1.2 var(--font-text); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line); border-radius: var(--radius, 4px); min-height: 50px; padding: 10px 12px; }
.wgr-kit__liste { list-style: none; margin: 0; padding: 4px 0; border: 1.5px solid var(--line); border-radius: var(--radius, 4px); background: var(--sheet); }
.wgr-kit__liste li { padding: 10px 12px; cursor: pointer; font-size: 16px; }
.wgr-kit__liste li span { color: var(--ink-2); font-size: 15px; }
.wgr-kit__liste li em { font-style: normal; font-weight: 700; }
.wgr-kit__liste li:hover { background: var(--blue-soft); }
.wgr-kit__treffer small { display: block; font-size: 15px; color: var(--ink-2); }


/* 2. count bars */
.wgr-kit__treppe { display: grid; gap: 10px; margin: 8px 0 12px; }
.wgr-kit__stufe { display: grid; grid-template-columns: 2.4rem 1fr; row-gap: 3px; align-items: center; }
.wgr-kit__stufe > b { grid-row: span 2; font: 700 19px/1 var(--font-head); }
.wgr-kit__balken { position: relative; height: 18px; width: calc((100% - 3.6rem) * var(--n) / 100); min-width: 2px; background: var(--s5); }
.wgr-kit__balken i { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); font: normal 400 15px/1 var(--font-num); white-space: nowrap; color: var(--ink); }
.wgr-kit__balken--e { height: 14px; background: repeating-linear-gradient(135deg, var(--cut) 0 2px, transparent 2px 6px); border: 1.5px solid var(--cut); }
.wgr-kit__schluessel { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; color: var(--ink-2); margin: 0; }
.wgr-kit__schluessel span { display: inline-flex; align-items: center; gap: 8px; }
.wgr-kit__s-h, .wgr-kit__s-e { display: inline-block; width: 22px; height: 12px; }
.wgr-kit__s-h { background: var(--s5); }
.wgr-kit__s-e { background: repeating-linear-gradient(135deg, var(--cut) 0 2px, transparent 2px 6px); border: 1.5px solid var(--cut); }
.wgr-kit-bewegt .wgr-kit__treppe .wgr-kit__balken { transform-origin: left; transform: scaleX(.02); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.wgr-kit-bewegt .wgr-kit__treppe.wgr-kit-da .wgr-kit__balken { transform: none; }

/* 3. formula */
.wgr-kit__formel { display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline; gap: 0 .08em; font: 600 clamp(19px, 6.2vw, 44px)/1.5 var(--font-head); margin: 4px 0 12px; white-space: nowrap; font-variant-numeric: lining-nums; }
.wgr-kit__formel .o { color: var(--ink-2); font-weight: 500; }
.wgr-kit__formel .m { box-shadow: inset 0 -.32em 0 var(--blue-soft); padding: 0 .05em; }
.wgr-kit__formel .y { box-shadow: inset 0 -.32em 0 var(--marker); padding: 0 .05em; }
.wgr-kit__abc { font: 400 16px/1.5 var(--font-num); text-align: center; margin: 0 0 12px; }
.wgr-kit__notizen { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.wgr-kit__notizen li { padding: 10px 14px; border-left: 4px solid var(--rule); background: var(--paper); font-size: 16px; }
.wgr-kit__notizen b { font-family: var(--font-head); font-size: 19px; }
.wgr-kit__n-m { border-left-color: var(--blue) !important; }
.wgr-kit__n-y { border-left-color: var(--y-edge) !important; }


.wgr-kit-bewegt [data-schritt] { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.wgr-kit-bewegt [data-schritt].wgr-kit-da { opacity: 1; transform: none; }

/* 4. tables */
.wgr-kit__tabellen { margin: 0 0 4px; overflow-x: auto; }
.wgr-kit__tabelle { width: 100%; border-collapse: collapse; font-size: clamp(15px, 2.2vw, 16px); letter-spacing: -.01em; line-height: 1.35; background: var(--sheet); }
.wgr-kit__tabelle th, .wgr-kit__tabelle td { padding: 9px clamp(2px, 1vw, 12px); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.wgr-kit__tabelle thead th { font-size: 15px; color: var(--ink-2); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.wgr-kit__tabelle .n { text-align: right; font-variant-numeric: proportional-nums lining-nums; white-space: nowrap; }
.wgr-kit__tabelle tbody th small { display: block; font-weight: 400; color: var(--ink-2); font-size: 15px; }
.wgr-kit__ist { background: var(--marker); font-weight: 700; outline: 2px solid var(--ink); outline-offset: -2px; }
.wgr-kit__weitere th, .wgr-kit__weitere td { color: var(--ink-2); }

.wgr-kit__zaehlt-ja { font-weight: 700; background: var(--blue-soft); }
.wgr-kit__zaehlt-nein { color: var(--ink-2); }
.wgr-kit__zaehlt-ja small, .wgr-kit__zaehlt-nein small { display: block; font-weight: 400; font-size: 15px; color: var(--ink-2); }

/* 5. proofreader's sheet */
.wgr-kit__fahne { list-style: none; padding: 0; margin: 0 0 8px; }
.wgr-kit__fahne li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "was was" "alt neu" "warum warum"; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.wgr-kit__fahne .was { grid-area: was; font-size: 16px; }
.wgr-kit__fahne .alt { grid-area: alt; font: 400 17px/1.2 var(--font-num); color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--cut); text-decoration-thickness: 2px; white-space: nowrap; }
.wgr-kit__fahne .neu { grid-area: neu; font: 700 21px/1.2 var(--font-head); color: var(--cut); white-space: nowrap; }
.wgr-kit__fahne .warum { grid-area: warum; font-size: 15px; color: var(--ink-2); }
.wgr-kit__fahne-summe { border-top: 2px solid var(--ink) !important; }
.wgr-kit__fahne-summe .was { font-weight: 700; }
.wgr-kit__fahne-summe .neu { font-size: 26px; }


/* 6. calendar */
.wgr-kit__antrag { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: var(--paper); padding: 12px; border-radius: var(--radius, 4px); }
.wgr-kit__antrag p { margin: 0; font-size: 16px; }
.wgr-kit__datum { font: 700 32px/1 var(--font-head); color: var(--blue); text-align: center; border: 2px solid var(--blue); border-radius: 50%; width: 72px; height: 72px; display: grid; place-items: center; align-content: center; }
.wgr-kit__datum small { font: 400 15px/1 var(--font-text); color: var(--ink-2); }
/* .wgr-kit in front: the theme's .prose ol and .prose li (0,1,1) indented the tiles and put 8 px under each row */
.wgr-kit .wgr-kit__monate { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 6px; }
.wgr-kit .wgr-kit__monate > li { margin: 0; }
.wgr-kit__monat { border: 1px solid var(--rule); border-top: 6px solid var(--s3); padding: 6px 8px 8px; }
.wgr-kit__monat b { display: block; font: 700 16px/1.1 var(--font-head); }
.wgr-kit__monat small { display: block; font-size: 15px; color: var(--ink-2); }
.wgr-kit__monat span { display: block; font-size: 15px; color: var(--blue); margin-top: 4px; line-height: 1.25; }
.wgr-kit__monat--start { border-top-color: var(--blue); outline: 2px solid var(--blue); outline-offset: -1px; }
.wgr-kit__monat--danach { border-top-color: var(--rule); border-style: dashed; }
.wgr-kit__monat--danach span, .wgr-kit__monat--danach b { color: var(--ink-2); }


/* 7. folder of papers */
.wgr-kit__blaetter { list-style: none; padding: 30px 0 0; margin: 0; counter-reset: blatt; }
.wgr-kit__blatt { counter-increment: blatt; position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: 0 var(--radius, 4px) var(--radius, 4px) var(--radius, 4px); padding: 10px 14px; box-shadow: var(--shadow); }
/* Two classes, so the article's own list spacing (li: 0 0 8px) cannot put a tab on the sheet above it. */
.wgr-kit__blaetter > .wgr-kit__blatt { margin: 32px 0 0; }
.wgr-kit__blaetter > .wgr-kit__blatt:first-child { margin-top: 0; }
/* The tabs step to the right, 52 px apart, but never past the sheet: on a narrow sheet the step is a fifth of
   what is left after one tab (sheet 6 and later share the last place). */
.wgr-kit__blatt::before { content: counter(blatt); position: absolute; top: -24px; left: calc(-1px + var(--reiter, 0) * min(52px, (100% - 46px) / 5)); height: 24px; min-width: min(44px, (100% - 46px) / 5 - 4px); padding: 3px 6px 0; font: 700 15px/1.2 var(--font-text); background: var(--blue-soft); border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--radius, 4px) var(--radius, 4px) 0 0; text-align: center; }
.wgr-kit__blatt:nth-child(2) { --reiter: 1; } .wgr-kit__blatt:nth-child(3) { --reiter: 2; } .wgr-kit__blatt:nth-child(4) { --reiter: 3; } .wgr-kit__blatt:nth-child(5) { --reiter: 4; } .wgr-kit__blatt:nth-child(n+6) { --reiter: 5; }
.wgr-kit__blatt b { font-size: 17px; }
.wgr-kit__blatt em { font-style: normal; color: var(--blue); }
.wgr-kit__blatt span { display: block; font-size: 15px; color: var(--ink-2); }

/* 8. kitchen table */
.wgr-kit--haushalt .wgr-kit__hand { text-align: center; margin: 0; }
.wgr-kit__tisch { display: block; width: 100%; max-width: 30rem; margin: 0 auto 8px; }
.wgr-kit__platte { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.wgr-kit__blattt { fill: var(--sheet); stroke: var(--line); stroke-width: 1.2; }
.wgr-kit__zeilen { stroke: var(--rule); stroke-width: 3; stroke-linecap: round; fill: none; }
.wgr-kit__stuhl rect { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.6; }
.wgr-kit-bewegt .wgr-kit__stuhl rect { transition: transform .3s; }
.wgr-kit__stuhl--weg rect { fill: none; stroke: var(--ink-2); stroke-dasharray: 5 4; transform: translateX(14px); }

.wgr-kit__leute { list-style: none; padding: 0; margin: 0 auto 12px; max-width: 30rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 8px; }
.wgr-kit__person { display: grid; gap: 2px; width: 100%; text-align: left; font: 400 15px/1.35 var(--font-text); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--radius, 4px); padding: 8px 10px; }
.wgr-kit__person:not([disabled]) { cursor: pointer; border-color: var(--line); }
.wgr-kit__person b { font-size: 17px; }
.wgr-kit__ja { font-weight: 700; }
.wgr-kit__nein { font-weight: 700; color: var(--ink-2); }
.wgr-kit__mietet { font-size: 15px; color: var(--ink-2); margin: 0 auto 6px; max-width: 30rem; }
.wgr-kit__miete { display: flex; max-width: 30rem; margin: 0 auto 10px; border: 1.5px solid var(--ink); }
.wgr-kit__miete span { padding: 10px 12px; font: 400 16px/1.2 var(--font-num); min-width: 0; overflow-wrap: anywhere; }
.wgr-kit__miete-ja { background: var(--fill-strong); color: var(--on-fill-strong); border-right: 1.5px solid var(--ink); }
.wgr-kit__miete-nein { background: var(--paper); color: var(--ink-2); }

.wgr-kit__summe { max-width: 30rem; margin: 0 auto 4px; font-size: 17px; }

/* 9. fork */
.wgr-kit__weiche { list-style: none; padding: 0; margin: 0; }
.wgr-kit__frage { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius, 4px); padding: 12px 14px 12px 52px; margin: 0; }
.wgr-kit__frage b { display: block; font-size: 17px; margin-bottom: 4px; }
.wgr-kit__frage span:not(.wgr-kit__nr) { font-size: 16px; }
.wgr-kit__nr { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); font: 700 16px/24px var(--font-text); text-align: center; }
.wgr-kit__gleis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; padding-left: 26px; position: relative; }
.wgr-kit__gleis::before { content: ""; position: absolute; left: 27px; top: 0; height: 22px; border-left: 2px solid var(--ink); }
.wgr-kit__ast { position: relative; padding-top: 30px; font-size: 16px; }
.wgr-kit__ast::before { content: ""; position: absolute; top: 0; height: 22px; border-top: 2px solid var(--ink); }
.wgr-kit__ast:first-child::before { left: 1px; width: 50%; border-left: 2px solid var(--ink); border-top-left-radius: 10px; }
.wgr-kit__ast:last-child::before { left: -50%; width: 50%; border-right: 2px solid var(--ink); border-top-right-radius: 10px; }
.wgr-kit__ast > span { display: block; font-weight: 700; margin-bottom: 4px; }
.wgr-kit__ziel { margin: 0; border: 1.5px solid var(--ink); border-radius: var(--radius, 4px); padding: 8px 10px; background: var(--sheet); }
.wgr-kit__ziel--wg { background: var(--blue-soft); border-color: var(--blue); }
.wgr-kit__ziel--weiter { border-style: dashed; }

/* 10. Bescheid */
.wgr-kit__bescheid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.wgr-kit__brief { position: relative; background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 20px 16px; font-size: 15px; line-height: 1.5; }
.wgr-kit__brief p { margin: 0 0 8px; }
.wgr-kit__muster { position: absolute; top: 12px; right: 12px; }
.wgr-kit__absender { color: var(--ink-2); max-width: 70%; }
.wgr-kit__betreff { font-weight: 700; font-size: 16px; }
.wgr-kit__bzeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; border-bottom: 1px solid var(--rule); padding: 6px 0; }
.wgr-kit__bzeile span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
.wgr-kit__brief mark { background: var(--marker); color: var(--ink); padding: 0 2px; }
.wgr-kit__brief i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: var(--sheet); font: normal 700 14px/1 var(--font-text); margin-left: 6px; }
.wgr-kit__randnotizen { margin: 0; padding-left: 1.4em; font-size: 16px; }
.wgr-kit__randnotizen li { margin-bottom: 8px; }
.wgr-kit__randnotizen li::marker { color: var(--blue); font-weight: 700; }


/* 11. need bar */
.wgr-kit__bedarfsbalken { position: relative; padding-top: 30px; margin: 4px 0 12px; }
.wgr-kit__teile { display: flex; height: 48px; border: 2px solid var(--ink); }
.wgr-kit__teil { border-right: 2px solid var(--sheet); min-width: 0; }
.wgr-kit__teil--ek { background: var(--s2); } .wgr-kit__teil--kg { background: var(--s3); } .wgr-kit__teil--wg { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); } .wgr-kit__teil--kiz { background: var(--marker); }
.wgr-kit__teil--fehlt { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 9px); }
.wgr-kit__bedarfslinie { position: absolute; top: 0; bottom: -6px; border-left: 3px solid var(--ink); }
.wgr-kit__bedarfslinie b { position: absolute; top: 0; right: 6px; white-space: nowrap; font: 700 15px/1.2 var(--font-text); }
.wgr-kit__fleck--ek { background: var(--s2); } .wgr-kit__fleck--kg { background: var(--s3); } .wgr-kit__fleck--wg { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); } .wgr-kit__fleck--kiz { background: var(--marker); }
.wgr-kit__buch { width: 100%; border-collapse: collapse; font-size: 16px; }
.wgr-kit__buch td { padding: 7px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.wgr-kit__buch td.n { text-align: right; white-space: nowrap; font-family: var(--font-num); padding-left: 12px; }
.wgr-kit__buch i.wgr-kit__fleck { width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; }
.wgr-kit__buch .op { color: var(--ink-2); font-family: var(--font-num); margin-right: 4px; }
.wgr-kit__summe-zeile td { font-weight: 700; border-bottom: 3px double var(--ink); }
.wgr-kit__urteil { font-size: 16px; margin: 10px 0 0; }

/* 13. Rechenweg */
.wgr-kit__vergleich { background: var(--cut-soft); border-left: 3px solid var(--cut); padding: 10px 14px; font-size: 16px; margin: 12px 0 0; }
.wgr-kit__vergleich b { color: var(--cut); }
.wgr-kit__rechenweg .wgr-wohngeld__buch { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.wgr-kit__rechenweg caption { text-align: left; font-weight: 700; padding: 14px 0 4px; font-size: 16px; }
.wgr-kit__rechenweg td { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.wgr-kit__rechenweg small { display: block; color: var(--ink-2); font-size: 15px; }
.wgr-kit__rechenweg .wgr-wohngeld__head td { font-weight: 700; border-bottom: 0; padding-bottom: 0; }
.wgr-kit__rechenweg .wgr-wohngeld__sub td { padding-left: 14px; }
.wgr-kit__rechenweg .wgr-wohngeld__sum td { font-weight: 700; border-bottom: 3px double var(--ink); }

/* 14., 15. source and note */
.wgr-kit--quelle { background: transparent; border: 0; padding: 0; }
.wgr-kit__zitat { margin: 0 0 4px; font: 500 19px/1.45 var(--font-head); border-left: 4px solid var(--rule); background: var(--sheet); padding: 12px 16px; }
.wgr-kit--notiz { background: transparent; border: 0; padding: 0 0 0 30px; position: relative; max-width: 30rem; }
.wgr-kit--notiz::before { content: ""; position: absolute; left: 4px; top: .25em; width: 18px; height: 18px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; border-bottom-left-radius: 14px 10px; transform: rotate(-8deg); }
.wgr-kit--notiz-entwurf { color: var(--cut); }

/* 12. what counts where: one card per check */
.wgr-kit__karten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin: 0 0 4px; }
.wgr-kit__pruefung { border-top: 2px solid var(--ink); padding: 8px 0 0; }
.wgr-kit__pruefung h4 { margin: 0 0 6px; font: 700 17px/1.3 var(--font-text); }
.wgr-kit__pruefung h4 small { display: block; font-weight: 400; font-size: 15px; color: var(--ink-2); }
.wgr-kit__pruefung dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.wgr-kit__pruefung dt { font-size: 15px; color: var(--ink-2); font-weight: 700; }
.wgr-kit__pruefung dd { margin: 0; font-size: 16px; padding: 0 6px; }

/* 9b. fork, answered question by question (kit.js adds .wgr-kit__weiche--js): the reader throws the switch
   with the Ja / Nein levers; the track taken is inked in Königsblau, the other one fades to a dashed pencil
   line (text stays --ink-2, 9:1), and the next question or the end it leads to is framed. */
.wgr-kit__hebel { display: block; font: 700 16px/1.2 var(--font-text); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line); border-radius: var(--radius, 4px); min-height: 44px; min-width: 72px; padding: 8px 14px; margin: 0 0 6px; cursor: pointer; }
.wgr-kit__hebel[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.wgr-kit__hebel:disabled { cursor: default; color: var(--ink-2); border-color: var(--rule); border-style: dashed; }
.wgr-kit__hebel:focus-visible, .wgr-kit__neu:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wgr-kit__auch { display: block; margin-top: 6px; padding-top: 6px; border-top: 1.5px dashed var(--ink-2); font-size: 15px; color: var(--ink-2); }
.wgr-kit__ast--gewaehlt::before { border-color: var(--blue) !important; border-width: 3px !important; }
.wgr-kit__ast--gewaehlt > .wgr-kit__ziel { border-color: var(--blue); border-width: 2px; }
.wgr-kit__ast--aus::before { border-color: var(--rule) !important; border-style: dashed !important; }
.wgr-kit__ast--aus > .wgr-kit__ziel { border-color: var(--rule); border-style: dashed; background: var(--sheet); color: var(--ink-2); }
.wgr-kit__ziel--hier { outline: 3px solid var(--blue); outline-offset: 3px; }
.wgr-kit__weiche--js > li.wgr-kit__frage--offen > .wgr-kit__frage { background: var(--sheet); border-style: dashed; color: var(--ink-2); }
.wgr-kit__weiche--js > li.wgr-kit__frage--offen .wgr-kit__ast::before, .wgr-kit__weiche--js > li.wgr-kit__frage--offen > .wgr-kit__gleis::before { border-color: var(--rule); }
.wgr-kit__weiche--js > li.wgr-kit__frage--offen .wgr-kit__ziel { border-color: var(--rule); color: var(--ink-2); background: var(--sheet); }
.wgr-kit__weiche--js > li.wgr-kit__frage--jetzt > .wgr-kit__frage { border: 2px solid var(--blue); }
.wgr-kit__weiche--js > li.wgr-kit__frage--jetzt .wgr-kit__nr { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.wgr-kit__weg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.wgr-kit__weg p { margin: 0; font-size: 16px; flex: 1 1 14rem; }
.wgr-kit__neu { font: 700 16px/1.3 var(--font-text); color: var(--blue); background: none; border: 0; padding: 10px 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wgr-kit-bewegt .wgr-kit__weiche--js .wgr-kit__ast::before, .wgr-kit-bewegt .wgr-kit__weiche--js .wgr-kit__ziel, .wgr-kit-bewegt .wgr-kit__weiche--js .wgr-kit__frage { transition: border-color .3s ease, color .3s ease, background-color .3s ease; }

/* 6b. calendar: the month picker (kit.js), the renewal month (§ 22 Abs. 4, when the rules have it) and the key under the tiles */
.wgr-kit__wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.wgr-kit__wahl label { font-weight: 700; font-size: 16px; }
.wgr-kit__wahl select { font: 400 17px/1.2 var(--font-text); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line); border-radius: var(--radius, 4px); min-height: 44px; padding: 8px 10px; max-width: 100%; }
.wgr-kit__wahl select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wgr-kit__monat--weiter { border-top-color: var(--blue); background: var(--blue-soft); }
.wgr-kit__monat--weiter span { color: var(--ink); font-weight: 700; }
/* the key under the planner: what the renewal tile and the dashed tile rest on, each with its law or advice */
.wgr-kit .wgr-kit__kalkey { list-style: none; margin: 4px 0 0; padding: 0; font-size: 16px; line-height: 1.45; }
.wgr-kit .wgr-kit__kalkey li { position: relative; margin: 0 0 8px; padding-left: 26px; }
.wgr-kit__kalfleck { position: absolute; left: 0; top: .2em; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid var(--rule); }
.wgr-kit__kalfleck--weiter { background: var(--blue-soft); border-top: 4px solid var(--blue); }
.wgr-kit__kalfleck--danach { border-style: dashed; border-top: 4px dashed var(--rule); }
/* (.wgr-kit__antrag p set the circled day to 16 px: the circle keeps its own size) */
.wgr-kit__antrag .wgr-kit__datum { font-size: 32px; }
.wgr-kit__antrag .wgr-kit__datum--monat { font-size: 21px; line-height: 1.05; }

/* 16. topic map: the centre circled in ink, its branches and their points on ink lines. Wide (from 720 px):
   left to right, each list of points beside its branch. Narrow: each list wraps under its branch, a tree down
   the page. Real nested lists with CSS lines, readable with no script. No media query (the module check reads
   kit.css rule by rule): --mm-x is far above 0 on a wide screen and far below on a narrow one, and clamp()
   turns it into "this much when wide, nothing when narrow" (or the other way round). Every line meets its
   words at the middle of their first line (--mm-y). */
.wgr-kit__mm { --mm-x: calc((100vw - 720px) * 999); --mm-gap: clamp(0px, var(--mm-x), 24px); --mm-stub: clamp(0px, var(--mm-x) * -1, 12px); }
/* .wgr-kit in front: the theme's .prose ul (0,1,1) indented the map and gave it a bottom margin, and .prose li
   a margin under each item. The nested lists set their own margins below (0,2,0), so they stay as they are. */
.wgr-kit .wgr-kit__mm, .wgr-kit__mm ul { list-style: none; margin: 0; padding: 0; }
.wgr-kit .wgr-kit__mm li { margin: 0; }
.wgr-kit__mm a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; -webkit-hyphens: auto; hyphens: auto; }
.wgr-kit__mm .wgr-kit__mm-mitte, .wgr-kit__mm .wgr-kit__mm-ast { display: flex; flex-wrap: wrap; align-items: flex-start; }
.wgr-kit__mm .wgr-kit__mm-mitte { padding: 0; }
.wgr-kit__mm-knoten { font-size: 17px; line-height: 1.35; }
.wgr-kit__mm-mitte > .wgr-kit__mm-knoten { position: relative; flex: 0 1 auto; max-width: min(17rem, 100%); font: 700 clamp(18px, 5.6vw, 23px)/1.2 var(--font-head); padding: 12px 18px; text-align: center; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; }
.wgr-kit__mm-mitte > .wgr-kit__mm-notiz { padding-bottom: 8px; }   /* the trunk never touches the centre's note */
.wgr-kit__mm-mitte > .wgr-kit__mm-knoten::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--blue); border-radius: 50%; transform: rotate(-3deg); pointer-events: none; }
.wgr-kit__mm-zweig { flex: 0 1 auto; max-width: clamp(12.5rem, 12.5rem - var(--mm-x), 100%); display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.wgr-kit__mm-zweig > .wgr-kit__mm-knoten { font-weight: 700; font-size: 18px; }
.wgr-kit__mm-notiz { flex: 1 0 100%; display: block; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.wgr-kit__mm-falt { position: relative; font: 700 19px/1 var(--font-num); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line); border-radius: var(--radius, 4px); width: 30px; height: 30px; padding: 0; cursor: pointer; }
.wgr-kit__mm-falt::after { content: ""; position: absolute; inset: -8px; }   /* a 44 px target; the box stays small so the line still meets the words */
.wgr-kit__mm-falt[aria-expanded="false"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.wgr-kit__mm-falt:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* a list beside its node when wide (flex-basis 0, it takes the rest of the row), under it when narrow (100%) */
.wgr-kit__mm .wgr-kit__mm-aeste, .wgr-kit__mm .wgr-kit__mm-blaetter { position: relative; flex: 1 1 clamp(0px, var(--mm-x) * -1, 100%); min-width: 0; margin: var(--mm-stub) 0 0 clamp(14px, 14px + var(--mm-x), 24px); padding: 0; }
.wgr-kit__mm .wgr-kit__mm-aeste { flex-basis: 100%; margin-top: calc(var(--mm-stub) - clamp(0px, var(--mm-x) * -1, 4px)); }   /* the branches always start below the centre: a long centre beside them left the points two letters wide */
/* the line from the node to its list: across when wide, down when narrow */
.wgr-kit__mm-aeste::before, .wgr-kit__mm-blaetter::before { content: ""; position: absolute; right: 100%; top: calc(var(--mm-y0) - 1px); width: var(--mm-gap); border-top: 2px solid var(--ink); }
.wgr-kit__mm-aeste::after, .wgr-kit__mm-blaetter::after { content: ""; position: absolute; left: 0; bottom: 100%; height: var(--mm-stub); border-left: 2px solid var(--ink); }
.wgr-kit__mm-aeste { --mm-y0: 26px; }
.wgr-kit__mm-blaetter { --mm-y0: 22px; }
.wgr-kit__mm-blaetter::before, .wgr-kit__mm-blaetter::after { border-color: var(--ink-2); }
.wgr-kit__mm-aeste > li { --mm-y: 26px; padding: 14px 0 0 28px; position: relative; }
.wgr-kit__mm-blaetter > li { --mm-y: 22px; box-sizing: border-box; min-height: 44px; padding: 10px 0 0 24px; position: relative; }
/* wide: 10 px higher, so the line across from the branch (--mm-y0) still meets its words */
.wgr-kit__mm .wgr-kit__mm-blaetter { margin-top: calc(var(--mm-stub) + clamp(0px, var(--mm-x) * -1, 4px) - clamp(0px, var(--mm-x), 10px)); }
/* tap targets of 44 px and more: a point's link covers its whole row (each row is at least 44 px tall and the
   rows do not overlap); a branch's link reaches 44 px around its words; the centre's covers its circle */
.wgr-kit__mm-blaetter > li a::after, .wgr-kit__mm-mitte > .wgr-kit__mm-knoten a::after { content: ""; position: absolute; inset: 0; }
.wgr-kit__mm-zweig > .wgr-kit__mm-knoten { position: relative; }
.wgr-kit__mm-zweig > .wgr-kit__mm-knoten a::after { content: ""; position: absolute; left: 0; right: 0; top: min(0px, (100% - 44px) / 2); bottom: min(0px, (100% - 44px) / 2); }
/* each item: a tick in from the trunk at --mm-y; the trunk runs on to the next item; the last one turns in with a curve */
.wgr-kit__mm-aeste > li::before, .wgr-kit__mm-blaetter > li::before { content: ""; position: absolute; left: 0; top: calc(var(--mm-y) - 1px); width: 20px; border-top: 2px solid var(--ink); }
.wgr-kit__mm-blaetter > li::before { width: 16px; border-color: var(--ink-2); }
.wgr-kit__mm-aeste > li::after, .wgr-kit__mm-blaetter > li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--ink); }
.wgr-kit__mm-blaetter > li::after { border-color: var(--ink-2); }
/* wide: the trunk starts at the first tick (the line from the node meets it there); narrow: at the top */
.wgr-kit__mm-aeste > li:first-child::after, .wgr-kit__mm-blaetter > li:first-child::after { top: clamp(0px, var(--mm-x), var(--mm-y)); }
.wgr-kit__mm-aeste > li:last-child::after, .wgr-kit__mm-blaetter > li:last-child::after { display: none; }
.wgr-kit__mm-aeste > li:last-child::before, .wgr-kit__mm-blaetter > li:last-child::before { box-sizing: border-box; top: 0; height: calc(var(--mm-y) + 1px); border-left: 2px solid; border-left-color: inherit; border-bottom-left-radius: 12px; border-top: 0; border-bottom: 2px solid; }
.wgr-kit__mm-aeste > li:last-child::before { border-color: var(--ink); }
.wgr-kit__mm-blaetter > li:last-child::before { border-color: var(--ink-2); }
/* wide, a single item: just the line across, no curve */
.wgr-kit__mm-aeste > li:only-child::before, .wgr-kit__mm-blaetter > li:only-child::before { border-left-width: clamp(0px, var(--mm-x) * -1, 2px); border-bottom-left-radius: clamp(0px, var(--mm-x) * -1, 12px); }
/* the one arrival: the lines are drawn as with a pen, branch after branch (never under reduced motion) */
.wgr-kit-bewegt .wgr-kit__mm li::before, .wgr-kit-bewegt .wgr-kit__mm li::after, .wgr-kit-bewegt .wgr-kit__mm-aeste::before, .wgr-kit-bewegt .wgr-kit__mm-aeste::after, .wgr-kit-bewegt .wgr-kit__mm-blaetter::before, .wgr-kit-bewegt .wgr-kit__mm-blaetter::after {
	transition: clip-path .45s ease-out; transition-delay: calc(var(--i, 0) * 110ms + var(--mm-d, 0ms));
}
.wgr-kit-bewegt .wgr-kit__mm-blaetter { --mm-d: 280ms; }
.wgr-kit-bewegt .wgr-kit__mm:not(.wgr-kit-da) li::before, .wgr-kit-bewegt .wgr-kit__mm:not(.wgr-kit-da) .wgr-kit__mm-aeste::before, .wgr-kit-bewegt .wgr-kit__mm:not(.wgr-kit-da) .wgr-kit__mm-blaetter::before { clip-path: inset(0 100% 0 0); }
.wgr-kit-bewegt .wgr-kit__mm:not(.wgr-kit-da) li::after, .wgr-kit-bewegt .wgr-kit__mm:not(.wgr-kit-da) .wgr-kit__mm-aeste::after, .wgr-kit-bewegt .wgr-kit__mm:not(.wgr-kit-da) .wgr-kit__mm-blaetter::after { clip-path: inset(0 0 100% 0); }
.wgr-kit-bewegt .wgr-kit__mm:not(.wgr-kit-da) .wgr-kit__mm-mitte > .wgr-kit__mm-knoten::before { clip-path: inset(0 0 0 100%); }
.wgr-kit-bewegt .wgr-kit__mm-mitte > .wgr-kit__mm-knoten::before { transition: clip-path .5s ease-out; }

/* 17. the rent levels as a staircase: seven blocks in CSS 3D (no WebGL, no library), each as tall as its
   Höchstbetrag (--h: share of the tallest), in the levels' ink wash, with a paper label in ink on its front.
   It stands at a fixed angle with no script; kit.js adds the household switch, turning (drag, ← →) and
   naming a step (tap, ↑ ↓). The tallest step of the size drawn first is --H; kit.js keeps that scale for the
   other sizes and sets --r (the tallest step shown, in --H) so the stage fits them, never an empty band. The
   faces are all --H tall and squeezed by scaleY(), so a change of height is a transform, never layout; they
   move only with .wgr-kit-bewegt (never under reduced motion). Sizes follow the screen's width by clamp(),
   not by media queries (the module check reads kit.css rule by rule). */
.wgr-kit__t3-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; font-weight: 700; font-size: 16px; }
.wgr-kit__t3-knoepfe { display: flex; gap: 6px; }
.wgr-kit__t3-knoepfe button { font: 700 18px/1 var(--font-text); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line); border-radius: var(--radius, 4px); width: 44px; height: 44px; padding: 0; cursor: pointer; }
.wgr-kit__t3-knoepfe button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.wgr-kit__t3-knoepfe button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wgr-kit__t3-buehne {
	--H: clamp(220px, 26vw, 260px); --T: clamp(46px, 5vw, 64px); --dreh: 10deg; --kipp: -11deg; --pad: clamp(12px, 3vw, 28px); --r: 1;
	position: relative; height: calc(var(--H) * var(--r) + 84px); margin: 0 calc(-1 * var(--pad)); perspective: 1100px; perspective-origin: 50% calc(100% - (var(--H) + 84px) * .85);
	overflow: hidden; contain: layout paint; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.wgr-kit__t3-buehne:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.wgr-kit__t3-buehne[tabindex] { cursor: grab; }
.wgr-kit__t3 { --auf: 1; position: absolute; left: 0; right: 0; bottom: 50px; width: min(546px, calc(100% - 20px)); height: var(--H); margin: 0 auto; transform-style: preserve-3d; transform: rotateX(var(--kipp)) rotateY(var(--dreh)); }
.wgr-kit__t3-stufe { --hh: calc(var(--h) * var(--auf)); position: absolute; bottom: 0; left: calc(var(--i) * 100% / 7); width: calc(100% / 7); height: var(--H); transform-style: preserve-3d; }
.wgr-kit__t3-stufe--s1 { --farbe: var(--s1); } .wgr-kit__t3-stufe--s2 { --farbe: var(--s2); } .wgr-kit__t3-stufe--s3 { --farbe: var(--s3); } .wgr-kit__t3-stufe--s4 { --farbe: var(--s4); }
.wgr-kit__t3-stufe--s5 { --farbe: var(--s5); } .wgr-kit__t3-stufe--s6 { --farbe: var(--s6); } .wgr-kit__t3-stufe--s7 { --farbe: var(--s7); }
/* front and sides: ink on their upright edges only (a squeezed top or bottom border would come out thinner or
   thicker step by step); the top face draws the ridge, the floor the foot */
.wgr-kit__t3-stufe > i { position: absolute; left: 0; bottom: 0; display: block; box-sizing: border-box; border: 0 solid var(--ink); border-width: 0 1px; background-color: var(--farbe); }
.wgr-kit__t3-f { width: 100%; height: var(--H); transform-origin: 50% 100%; transform: translateZ(calc(var(--T) / 2)) scaleY(var(--hh)); }
.wgr-kit__t3-stufe > .wgr-kit__t3-o { width: 100%; height: var(--T); border-width: 1px; transform-origin: 50% 100%; transform: translateY(calc(var(--hh) * var(--H) * -1)) translateZ(calc(var(--T) / 2)) rotateX(90deg); background-image: linear-gradient(rgba(255, 255, 255, .38), rgba(255, 255, 255, .38)); }
.wgr-kit__t3-l, .wgr-kit__t3-r { width: var(--T); height: var(--H); background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)); }
.wgr-kit__t3-l { transform-origin: 0 100%; transform: translateZ(calc(var(--T) / 2)) rotateY(90deg) scaleY(var(--hh)); }
.wgr-kit__t3-r { left: auto !important; right: 0; transform-origin: 100% 100%; transform: translateZ(calc(var(--T) / 2)) rotateY(-90deg) scaleY(var(--hh)); }
.wgr-kit__t3-stufe > .wgr-kit__t3-e { width: 100%; height: 3px; border: 0; border-top: 3px dashed var(--cut); background: none; transform: translateY(calc(var(--e) * var(--auf) * var(--H) * -1 + 3px)) translateZ(calc(var(--T) / 2 + 2px)); pointer-events: none; }
.wgr-kit__t3-schild { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; padding: 3px 0 4px; background: var(--sheet); color: var(--ink); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 400 16px/1.15 var(--font-text); letter-spacing: -.01em; white-space: nowrap; transform: translateY(calc(var(--hh) * var(--H) * -1 + 100% + 4px)) translateZ(calc(var(--T) / 2 + 1px)); }
.wgr-kit__t3-schild b { font: 700 17px/1.05 var(--font-head); }
.wgr-kit__t3-stufe--gewaehlt .wgr-kit__t3-schild { color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); font-weight: 700; }
.wgr-kit__t3-boden { position: absolute; left: -14px; bottom: 0; width: calc(100% + 28px); height: calc(var(--T) + 28px); transform-origin: 50% 100%; transform: translateZ(calc(var(--T) / 2 + 14px)) rotateX(90deg); background: var(--paper); border: 1px solid var(--rule); }
.wgr-kit__t3-info { min-height: 1.45em; margin: 8px 0 4px; font-size: 17px; }
.wgr-kit__t3-info:empty { min-height: 0; margin: 0; }
.wgr-kit__t3-hilfe { font-size: 15px; color: var(--ink-2); margin: 6px 0 0; }
.wgr-kit__t3-text { margin-top: 8px; }
.wgr-kit-bewegt .wgr-kit__t3-stufe > i, .wgr-kit-bewegt .wgr-kit__t3-schild { transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .4s; transition-delay: calc(var(--i) * 70ms); }
/* the stage (flat, not turned) is what comes into view; the steps inside it rise */
.wgr-kit-bewegt .wgr-kit__t3-buehne:not(.wgr-kit-da) .wgr-kit__t3 { --auf: 0; }
.wgr-kit-bewegt .wgr-kit__t3-buehne:not(.wgr-kit-da) .wgr-kit__t3-schild { opacity: 0; }

/* 18. figures as columns in 3D ([wgr_kit_saeulen3d]): the staircase's stage (.wgr-kit__t3-buehne, its
   --H, --T, --dreh, --kipp, perspective and floor), with N columns (--n) of up to three stacked parts.
   A part's faces are all --H tall, lifted by its base (--b) and squeezed by scaleY(--h) from the foot,
   so rising is a transform, never layout. One part: the levels' ink wash across the columns; more parts:
   one colour per part, named in the key. The dashed line is a limit across all columns. Each column's
   name and total stand on a label under it, in front of the floor, so no label hides a thin top part. */
.wgr-kit .wgr-kit__s3-schluessel { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0 0 6px; padding: 0; font-size: 15px; color: var(--ink-2); }
.wgr-kit .wgr-kit__s3-schluessel li { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.wgr-kit__s3-farbe { display: inline-block; width: 18px; height: 14px; border: 1px solid var(--ink); flex: none; }
.wgr-kit__s3-farbe--t1, .wgr-kit__s3-teil--t1 { --farbe: var(--s5); }
.wgr-kit__s3-farbe--t2, .wgr-kit__s3-teil--t2 { --farbe: var(--s2); }
.wgr-kit__s3-farbe--t3, .wgr-kit__s3-teil--t3 { --farbe: var(--s7); }
.wgr-kit__s3-farbe { background: var(--farbe); }
.wgr-kit__t3-buehne.wgr-kit__s3-buehne { height: calc(var(--H) + 112px); }
.wgr-kit__s3 { --auf: 1; position: absolute; left: 0; right: 0; bottom: 70px; width: min(546px, calc(100% - 20px)); height: var(--H); margin: 0 auto; transform-style: preserve-3d; transform: rotateX(var(--kipp)) rotateY(var(--dreh)); }
.wgr-kit__s3-saeule { position: absolute; bottom: 0; left: calc(var(--i) * 100% / var(--n)); width: calc(100% / var(--n)); height: var(--H); transform-style: preserve-3d; }
.wgr-kit__s3-saeule--s1 .wgr-kit__s3-teil { --farbe: var(--s1); } .wgr-kit__s3-saeule--s2 .wgr-kit__s3-teil { --farbe: var(--s2); } .wgr-kit__s3-saeule--s3 .wgr-kit__s3-teil { --farbe: var(--s3); }
.wgr-kit__s3-saeule--s4 .wgr-kit__s3-teil { --farbe: var(--s4); } .wgr-kit__s3-saeule--s5 .wgr-kit__s3-teil { --farbe: var(--s5); } .wgr-kit__s3-saeule--s6 .wgr-kit__s3-teil { --farbe: var(--s6); }
.wgr-kit__s3-saeule--s7 .wgr-kit__s3-teil { --farbe: var(--s7); }
.wgr-kit__s3-teil { --hh: calc(var(--h) * var(--auf)); --bb: calc(var(--b) * var(--auf)); position: absolute; bottom: 0; left: 13%; width: 74%; height: var(--H); transform-style: preserve-3d; }
.wgr-kit__s3-teil > i { position: absolute; left: 0; bottom: 0; display: block; box-sizing: border-box; border: 0 solid var(--ink); border-width: 0 1px; background-color: var(--farbe); }
.wgr-kit__s3-f { width: 100%; height: var(--H); transform-origin: 50% 100%; transform: translateY(calc(var(--bb) * var(--H) * -1)) translateZ(calc(var(--T) / 2)) scaleY(var(--hh)); }
.wgr-kit__s3-l, .wgr-kit__s3-r { width: var(--T); height: var(--H); background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)); }
.wgr-kit__s3-l { transform-origin: 0 100%; transform: translateY(calc(var(--bb) * var(--H) * -1)) translateZ(calc(var(--T) / 2)) rotateY(90deg) scaleY(var(--hh)); }
.wgr-kit__s3-r { left: auto !important; right: 0; transform-origin: 100% 100%; transform: translateY(calc(var(--bb) * var(--H) * -1)) translateZ(calc(var(--T) / 2)) rotateY(-90deg) scaleY(var(--hh)); }
.wgr-kit__s3-teil > .wgr-kit__s3-o { width: 100%; height: var(--T); border-width: 1px; transform-origin: 50% 100%; transform: translateY(calc((var(--bb) + var(--hh)) * var(--H) * -1)) translateZ(calc(var(--T) / 2)) rotateX(90deg); background-image: linear-gradient(rgba(255, 255, 255, .38), rgba(255, 255, 255, .38)); }
.wgr-kit__s3-teil--t2 > .wgr-kit__s3-f, .wgr-kit__s3-farbe--t2 { background-image: repeating-linear-gradient(135deg, var(--s5) 0 2px, transparent 2px 7px); }
.wgr-kit__s3-schild { position: absolute; left: 3%; right: 3%; bottom: 0; display: grid; justify-items: center; padding: 3px 0 4px; background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); font: 400 16px/1.15 var(--font-text); letter-spacing: -.01em; white-space: nowrap; transform: translateY(calc(100% + 8px)) translateZ(calc(var(--T) / 2 + 16px)); }
.wgr-kit__s3-schild b { font: 700 15px/1.05 var(--font-text); }
.wgr-kit__s3-saeule--gewaehlt .wgr-kit__s3-schild { color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); font-weight: 700; }
.wgr-kit__s3-linie { --i: 0; position: absolute; left: -8px; right: -8px; bottom: 0; height: 0; border-top: 3px dashed var(--blue); transform: translateY(calc(var(--y) * var(--auf) * var(--H) * -1)) translateZ(calc(var(--T) / 2 + 3px)); pointer-events: none; }
.wgr-kit__s3-linie span { position: absolute; left: 0; bottom: 4px; background: var(--sheet); color: var(--blue); font: 700 15px/1.2 var(--font-text); padding: 1px 4px; white-space: nowrap; }
.wgr-kit-bewegt .wgr-kit__s3-teil > i, .wgr-kit-bewegt .wgr-kit__s3-schild, .wgr-kit-bewegt .wgr-kit__s3-linie { transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .4s; transition-delay: calc(var(--i) * 90ms); }
.wgr-kit-bewegt .wgr-kit__t3-buehne:not(.wgr-kit-da) .wgr-kit__s3 { --auf: 0; }
.wgr-kit-bewegt .wgr-kit__t3-buehne:not(.wgr-kit-da) .wgr-kit__s3-schild, .wgr-kit-bewegt .wgr-kit__t3-buehne:not(.wgr-kit-da) .wgr-kit__s3-linie span { opacity: 0; }
.wgr-kit .wgr-kit__s3-tabelle thead th { white-space: normal; hyphens: manual; vertical-align: bottom; }
.wgr-kit .wgr-kit__s3-tabelle tbody th { white-space: normal; }
.wgr-kit .wgr-kit__s3-tabelle--zahlen { table-layout: fixed; }
.wgr-kit .wgr-kit__s3-tabelle--zahlen th:first-child { width: 24%; }
.wgr-kit .wgr-kit__s3-tabelle td small { display: block; font-size: 15px; color: var(--ink-2); }