/* unterhaltsrechner.info – "Farbregister" (design/DESIGN.md, 8 Nov 2026).
   A family's papers live in a binder with coloured register tabs. Here each part of the site has its tab
   colour (Unterhalt kobalt, Familie mandarine, Arbeit smaragd), and the page being read is the open tab:
   its colour floods the top of the page behind the headline, the framed picture and the calculator.
   The answer is a lit, raised sun-yellow card with a huge number; charts (the plugin's story kit) build
   in the page's colours as the reader scrolls. Night blue frames the page top and bottom.

   Every colour, size and space is a token, light and dark; each page takes one of six looks (.look-…,
   functions.php unt_look()). Every word sits on a flat colour at 7:1 or better in both modes (measured:
   design/tools/contrast.py, which reads this file). No text on a pattern, a picture or a gradient.
   Nothing under 15 px. Phone first, nothing sideways.

   The class names are the templates' own (header.php, footer.php, template-parts/entry.php,
   functions.php). The shared vocabulary for calculator modules is the .u-… block near the end
   (DESIGN.md §6); a module styles only its own .unt-<module> classes on top of it and may use the old
   token names (--petrol, --tint, --lineal …), which now follow the page's look. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 400 900; font-stretch: 62% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
	color-scheme: light dark;

	/* Surfaces. Every word sits on one of these, never on a pattern. */
	--page: #F4F6FB;        /* the page under the text: a cool, light grey-blue */
	--sheet: #FFFFFF;       /* raised sheets: the calculator, a chart's card, the picture's frame, cards */
	--sheet-2: #E9EDF6;     /* the register tabs not open, quiet panels */
	--warn-soft: #FFF0DE;   /* behind a warning */

	/* Ink. */
	--ink: #121626;         /* text */
	--ink-2: #3D4357;       /* secondary text */
	--warn: #873800;        /* the word "Achtung", a warning's edge, ENTWURF */
	--rule: #DCE0EA;        /* hairlines; never text */
	--line: #687089;        /* field outlines, axes (non-text) */

	/* Night blue: the line at the top with the independence sentence, and the footer. */
	--night: #10162B;
	--night-ink: #FFFFFF;
	--night-ink-2: #C9CFE3;
	--night-rule: #2E3756;

	/* The sun: the reader's own answer, their row, their mark in a chart. */
	--sun: #FFD23F;
	--sun-edge: #C99700;

	/* The register colours (fixed, both modes): the strip at the top and bottom, the tabs, the icons. */
	--reg-1: #2E58F0;
	--reg-2: #FF7A3D;
	--reg-3: #13A36B;
	--reg-4: #FFD23F;

	/* Colours of a chart's series (marks only, never text): blue, sun, orange, sky, green, berry, grey. */
	--d-blau: #2E58F0; --d-sonne: #FFC928; --d-orange: #FF7A3D; --d-himmel: #4FB6EE; --d-gruen: #19A86B; --d-beere: #C8337C; --d-grau: #A39E95;

	/* The page's look (kobalt here; .look-… below). banner: the coloured band at the top; acc: marks in
	   charts and lines; acc-ink: the look's colour as text (links, labels); acc-wash: a light wash behind
	   notes and table heads; pop: the answer card; on-acc: words on an acc-ink fill (buttons, choices). */
	--banner: #1C3AA9;
	--banner-ink: #FFFFFF;
	--banner-ink-2: #E1E6F8;
	--acc: #2E58F0;
	--acc-ink: #1B3699;
	--acc-wash: #E6ECFF;
	--on-acc: #FFFFFF;
	--pop: #FFD23F;
	--pop-edge: #C99700;
	--pop-ink: #121626;
	--pop-num: #121626;

	--shade: 18, 22, 48;   /* the colour of shadows (r, g, b) */
	--shadow: 0 1px 2px rgba(var(--shade), .08), 0 10px 24px -14px rgba(var(--shade), .45);
	--shadow-lift: 0 2px 4px rgba(var(--shade), .10), 0 22px 40px -20px rgba(var(--shade), .60);
	--shadow-deep: 0 2px 6px rgba(var(--shade), .16), 0 30px 60px -26px rgba(var(--shade), .70);

	/* Type. Archivo: headlines (900, condensed), labels, menus, tables and every amount (tabular,
	   lining; a slashed zero in fields). Literata: what is read. */
	--font-ui: "Archivo", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-text: "Literata", Georgia, "Times New Roman", serif;
	--num: "tnum" 1, "lnum" 1;
	--num-field: "tnum" 1, "lnum" 1, "zero" 1;
	--fs-small: 15px;  /* the smallest text anywhere: captions, sources, labels, tags */
	--fs-ui: 16px;
	--fs-body: 17px;
	--fs-lede: 18px;
	--fs-h3: 21px;
	--fs-h2: 27px;
	--fs-h1: clamp(30px, 8.6vw, 36px);
	--fs-answer: clamp(48px, 15vw, 64px);

	/* Space, measure, corners. */
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
	--gutter: 16px;
	--measure: 40rem;
	--wide: 80rem;
	--r-1: 6px;    /* fields, buttons, tags */
	--r-2: 14px;   /* sheets, cards, the picture's frame */
	--r-3: 20px;   /* the answer card */
	--field-h: 52px;
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23687089' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The looks: each a full set of the page's colour tokens. kobalt is the :root's own. In each look the chart
   colour nearest the look's own (--acc) takes a deeper or paler shade, so every series colour of a chart stays
   apart from every other (design/tools/contrast.py measures it). */
.look-kobalt { --d-blau: #1A2A78; }
.look-himmel {
	--d-himmel: #0A3F63;
	--banner: #6CCBF4; --banner-ink: #121626; --banner-ink-2: #172235;
	--acc: #1689C9; --acc-ink: #0A4F7A; --acc-wash: #E2F4FD; --on-acc: #FFFFFF;
	--pop: #FFD23F; --pop-edge: #C99700; --pop-ink: #121626; --pop-num: #121626;
}
.look-mandarine {
	--d-orange: #7A2A0C;
	--banner: #FF8A4C; --banner-ink: #121626; --banner-ink-2: #24160D;
	--acc: #E35A1A; --acc-ink: #8F3000; --acc-wash: #FFEDE3; --on-acc: #FFFFFF;
	--pop: #A9DEFF; --pop-edge: #3E9BD6; --pop-ink: #121626; --pop-num: #121626;
}
.look-beere {
	--d-beere: #6A1240;
	--banner: #96154F; --banner-ink: #FFFFFF; --banner-ink-2: #FCEAF2;
	--acc: #D02A72; --acc-ink: #8E1450; --acc-wash: #FCE7F0; --on-acc: #FFFFFF;
	--pop: #FFD23F; --pop-edge: #C99700; --pop-ink: #121626; --pop-num: #121626;
}
.look-smaragd {
	--d-gruen: #0A4D32;
	--banner: #075C3E; --banner-ink: #FFFFFF; --banner-ink-2: #EAF7F0;
	--acc: #109964; --acc-ink: #0A5C3D; --acc-wash: #E2F5EC; --on-acc: #FFFFFF;
	--pop: #FFD23F; --pop-edge: #C99700; --pop-ink: #121626; --pop-num: #121626;
}
.look-gras {
	--d-gruen: #0A4D32;
	--banner: #45C97E; --banner-ink: #121626; --banner-ink-2: #12221A;
	--acc: #1E9E57; --acc-ink: #0B5A31; --acc-wash: #E3F7EA; --on-acc: #FFFFFF;
	--pop: #FFD23F; --pop-edge: #C99700; --pop-ink: #121626; --pop-num: #121626;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page: #0C1020; --sheet: #161B2E; --sheet-2: #20273F; --warn-soft: #33210F;
		--ink: #EEF1F8; --ink-2: #BDC4D9; --warn: #FFB37A; --rule: #2A3150; --line: #8A93B0;
		--night: #070A14; --night-ink: #FFFFFF; --night-ink-2: #C3C9DD; --night-rule: #232A45;
		--banner: #182F8C; --banner-ink: #FFFFFF; --banner-ink-2: #D6DDF6;
		--acc: #6C8BFF; --acc-ink: #AFC0FF; --acc-wash: #1B2448; --on-acc: #0C1020;
		--pop: #2E2608; --pop-edge: #FFD23F; --pop-ink: #FFF6D6; --pop-num: #FFD23F;
		--shade: 0, 0, 0;
		--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%238A93B0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	}
	.look-kobalt { --d-blau: #2E58F0; }
	.look-himmel {
		--d-himmel: #1E5F86;
		--banner: #0B4D72; --banner-ink: #FFFFFF; --banner-ink-2: #D2ECFA;
		--acc: #4FB6EE; --acc-ink: #9BD8FA; --acc-wash: #102D40; --on-acc: #0C1020;
		--pop: #2E2608; --pop-edge: #FFD23F; --pop-ink: #FFF6D6; --pop-num: #FFD23F;
	}
	.look-mandarine {
		--d-orange: #FFC6A1;
		--banner: #7E300F; --banner-ink: #FFFFFF; --banner-ink-2: #FFEDE4;
		--acc: #FF8A4C; --acc-ink: #FFB98F; --acc-wash: #3A1C0E; --on-acc: #0C1020;
		--pop: #0E2E44; --pop-edge: #A9DEFF; --pop-ink: #E8F6FF; --pop-num: #A9DEFF;
	}
	.look-beere {
		--d-beere: #F7B3D0;
		--banner: #7A1043; --banner-ink: #FFFFFF; --banner-ink-2: #F8D5E5;
		--acc: #F0609E; --acc-ink: #FFB0D2; --acc-wash: #3A1027; --on-acc: #0C1020;
		--pop: #2E2608; --pop-edge: #FFD23F; --pop-ink: #FFF6D6; --pop-num: #FFD23F;
	}
	.look-smaragd {
		--d-gruen: #A6EBCB;
		--banner: #064A33; --banner-ink: #FFFFFF; --banner-ink-2: #D5EFE2;
		--acc: #2FCB8A; --acc-ink: #8FE6BF; --acc-wash: #0E2E22; --on-acc: #0C1020;
		--pop: #2E2608; --pop-edge: #FFD23F; --pop-ink: #FFF6D6; --pop-num: #FFD23F;
	}
	.look-gras {
		--d-gruen: #A6EBCB;
		--banner: #0F5631; --banner-ink: #FFFFFF; --banner-ink-2: #E3F6EB;
		--acc: #45C97E; --acc-ink: #9BE6BB; --acc-wash: #0F2D1D; --on-acc: #0C1020;
		--pop: #2E2608; --pop-edge: #FFD23F; --pop-ink: #FFF6D6; --pop-num: #FFD23F;
	}
}
@media (min-width: 720px) {
	:root { --gutter: 32px; --fs-body: 18px; --fs-lede: 20px; --fs-h3: 23px; --fs-h2: 36px; --fs-h1: 48px; --fs-answer: 84px; }
}
@media (min-width: 1100px) { :root { --fs-h1: 58px; } }

/* The old names a module may use (DESIGN.md §6), set on body so that they follow the page's look. */
body {
	--petrol: var(--acc-ink); --on-petrol: var(--on-acc); --tint: var(--acc-wash);
	--lineal: var(--pop); --lineal-edge: var(--pop-edge); --band: var(--acc-wash);
	--bg: var(--sheet); --on-acc-old: var(--on-acc);
	/* A 3D field's column colours, in order (the plugin's story.css .c-col1 …): the look's own first, then chart
	   colours of other hues (design/tools/contrast.py keeps them apart). */
	--f1: var(--acc); --f2: var(--d-himmel); --f3: var(--d-beere); --f4: var(--d-grau); --f5: var(--d-orange); --f6: var(--d-gruen);
}
.look-himmel { --f2: var(--d-beere); --f3: var(--d-gruen); --f5: var(--d-orange); --f6: var(--d-blau); }
.look-mandarine { --f5: var(--d-gruen); --f6: var(--d-blau); }
.look-beere { --f3: var(--d-gruen); --f6: var(--d-blau); }
.look-smaragd, .look-gras { --f6: var(--d-blau); }

/* The parts' own colours, for their tabs, icons, cards and lists (fixed in both modes). */
.part--unterhalt, .ic--unterhalt { --pc: #2E58F0; --pc-2: #A7BBFF; }
.part--familie, .ic--familie { --pc: #FF7A3D; --pc-2: #FFC6A8; }
.part--arbeit, .ic--arbeit { --pc: #13A36B; --pc-2: #93E0BE; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0; background: var(--page); color: var(--ink);
	font: 400 var(--fs-body)/1.62 var(--font-text);
	font-variant-numeric: lining-nums;
	hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4;
	overflow-wrap: break-word; font-synthesis: none;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--acc-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; hyphens: manual; -webkit-hyphens: manual; } /* a link's text is often an address: "gesetze-im-interne-t.de" must not happen */
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--acc-ink); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--font-ui); font-stretch: 88%; font-weight: 850; line-height: 1.08; letter-spacing: -.012em; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }
b, strong { font-weight: 700; }
em, i { font-style: normal; font-weight: 600; }   /* no italic face is loaded: emphasis is weight */
::placeholder { color: var(--ink-2); opacity: 1; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--sheet); color: var(--ink); padding: var(--sp-2) var(--sp-4); z-index: 50; font-family: var(--font-ui); }
.skip:focus { left: var(--gutter); }

/* ---------- the register strip: the three parts' colours and the sun, top and bottom of every page ---------- */
.register { display: flex; height: 6px; }
.register i { flex: 1; }
.register i:nth-child(1) { background: var(--reg-1); }
.register i:nth-child(2) { background: var(--reg-2); }
.register i:nth-child(3) { background: var(--reg-3); }
.register i:nth-child(4) { background: var(--reg-4); }

/* ---------- the drawn icons (functions.php unt_icon) ---------- */
.ic { display: block; flex: none; }
.ic * { fill: none; }
.ic .i-f { fill: var(--pc, var(--acc)); }
.ic .i-f2 { fill: var(--pc-2, var(--acc-wash)); }
.ic .i-s { fill: #FFD23F; }
.ic .i-w { fill: #FFFFFF; }
.ic .i-l { stroke: #121626; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.ic .i-dash { stroke-dasharray: 3 4; }
.ic .i-ring { stroke: var(--pc, var(--acc)); stroke-width: 4.5; }
.ic .i-ring--2 { stroke: var(--pc-2, var(--acc-wash)); }

/* ---------- the top: the night line with the independence sentence, the mark and name, the tabs ---------- */
.topline { background: var(--night); color: var(--night-ink-2); }
.topline .wrap { padding-top: 9px; padding-bottom: 9px; }
.indep { margin: 0; font: 500 var(--fs-small)/1.42 var(--font-ui); color: var(--night-ink-2); max-width: 62rem; }
.masthead { background: var(--sheet); box-shadow: 0 1px 0 var(--rule); }
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-width: 0; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.mk-tile { fill: var(--night); }
.mk-sheet { fill: #FFFFFF; }
.mk-grid { fill: none; stroke: #C5CBDB; stroke-width: 1.4; }
.mk-row { fill: #FFD23F; }
.mk-t1 { fill: var(--reg-1); } .mk-t2 { fill: var(--reg-2); } .mk-t3 { fill: var(--reg-3); }
@media (prefers-color-scheme: dark) { .mk-tile { fill: #2A3356; } }
.brand__name { font: 500 21px/1 var(--font-ui); font-stretch: 86%; letter-spacing: -.01em; white-space: nowrap; }
.brand__name b { font-weight: 900; }
.brand__tld { font-weight: 700; color: var(--acc-ink); letter-spacing: 0; }
@media (max-width: 419px) { .brand { gap: 8px; } .brand__mark { width: 34px; height: 34px; } .brand__name { font-size: 19px; font-stretch: 80%; } .site-head__menu { padding: 0 10px; } }
@media (max-width: 339px) { .brand__name { font-size: 17px; font-stretch: 76%; } .brand__mark { width: 30px; height: 30px; } }
.site-head__menu { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--r-1); background: var(--sheet-2); color: var(--ink); font: 800 var(--fs-ui)/1 var(--font-ui); text-decoration: none; }
.site-head__menu svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.site-nav { display: none; }
@media (min-width: 1240px) {
	.masthead { box-shadow: none; }
	.masthead__in { padding-top: 16px; padding-bottom: 6px; }
	.brand__mark { width: 46px; height: 46px; }
	.brand__name { font-size: 27px; }
	.site-head__menu { display: none; }
	.site-nav { display: block; }
	.site-nav ul { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 0 auto; padding-top: 6px; list-style: none; }
	.tab a { display: flex; align-items: center; gap: 7px; min-height: 48px; padding: 7px 12px 8px 8px; border-radius: 12px 12px 0 0; border-top: 4px solid var(--pc, var(--sun)); background: var(--sheet-2); color: var(--ink); font: 750 15px/1.1 var(--font-ui); font-stretch: 92%; text-decoration: none; transition: transform .15s ease, background-color .15s ease; }
	.tab .ic { width: 26px; height: 26px; }
	.tab a:hover { transform: translateY(-2px); background: var(--sheet); }
	.tab a:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
	.tab a[aria-current="page"] { background: var(--banner); color: var(--banner-ink); border-top-color: var(--banner); padding-bottom: 12px; transform: none; font-weight: 850; }
	.tab a[aria-current="page"]:focus-visible { outline-color: var(--banner-ink); }
	.tab--guides { margin-left: auto; }
}

/* ---------- the band: the page's colour behind the trail, the tab, the headline, the summary, the picture,
   the byline and the calculator ---------- */
.banner { background: var(--banner); color: var(--banner-ink); }
.banner :focus-visible { outline-color: var(--banner-ink); }
.page-head { padding: var(--sp-5) 0 var(--sp-6); }
.crumbs ol { margin: 0 0 var(--sp-3); padding: 0; list-style: none; font: 500 var(--fs-small)/1.45 var(--font-ui); color: var(--banner-ink-2); }
.crumbs li { display: inline; }
.crumbs li + li::before { content: "›"; margin: 0 6px; }
.crumbs a { color: var(--banner-ink-2); }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-4); padding: 5px 14px 5px 5px; border-radius: 12px; background: var(--sheet); color: var(--ink); font: 850 var(--fs-small)/1 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; box-shadow: var(--shadow); }
.kicker .ic { width: 32px; height: 32px; }
.page-head__title { margin: 0; color: var(--banner-ink); font-size: var(--fs-h1); font-weight: 900; font-stretch: 82%; line-height: 1.0; letter-spacing: -.02em; max-width: 26ch; }
@media (max-width: 479px) { .page-head__title, .prose :where(h2) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
.lede { margin: var(--sp-4) 0 0; font: 500 var(--fs-lede)/1.5 var(--font-ui); color: var(--banner-ink); max-width: 46rem; }
.lead-pic { margin: var(--sp-5) calc(-1 * var(--gutter)) 0; background: var(--sheet); }
.lead-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sheet-2); }
.lead-pic figcaption { padding: 10px var(--gutter) 12px; font: 400 var(--fs-small)/1.45 var(--font-ui); color: var(--ink-2); }
.page-meta { display: flex; flex-direction: column; gap: 2px; margin: var(--sp-4) 0 0; font: 500 var(--fs-small)/1.45 var(--font-ui); color: var(--banner-ink-2); }
.page-meta a { color: var(--banner-ink-2); font-weight: 750; }
@media (min-width: 720px) {
	.page-head { padding: var(--sp-6) 0 var(--sp-7); }
	.lead-pic { margin: var(--sp-6) 0 0; max-width: 60rem; padding: 10px 10px 0; border-radius: var(--r-2); box-shadow: var(--shadow-deep); }
	.lead-pic img { border-radius: 8px; }
	.lead-pic figcaption { padding: 10px 4px 12px; }
	.page-meta { flex-direction: row; flex-wrap: wrap; gap: 0 var(--sp-3); }
	.page-meta > span + span::before { content: "·"; margin-right: var(--sp-3); }
}

/* ---------- the calculator, on the band: a raised white sheet ---------- */
.tool-band { padding: 0 0 var(--sp-7); }
.tool-band__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); font: 500 var(--fs-small)/1.35 var(--font-ui); color: var(--banner-ink-2); }
.tool-band__label b { padding: 6px 12px 5px; border-radius: var(--r-1); background: var(--pop); color: var(--pop-ink); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 -3px 0 var(--pop-edge); }
.entry--tool .page-head { padding-bottom: var(--sp-6); }

/* ---------- the text, with its route beside it ---------- */
.entry__body { display: grid; grid-template-columns: [full-start text-start] minmax(0, 1fr) [text-end full-end]; padding-top: var(--sp-6); padding-bottom: var(--sp-7); }
.entry__body > .prose { display: contents; }
.entry__body > .prose > * { grid-column: text; min-width: 0; }
.entry__body > .route-wrap { grid-column: full; }
@media (min-width: 760px) {
	.entry__body { grid-template-columns: [full-start] minmax(0, 1fr) [text-start] minmax(0, var(--measure)) [text-end] minmax(0, 1fr) [full-end]; }
}
@media (min-width: 1100px) {
	.entry__body--toc { grid-template-columns: [full-start rail-start] 17rem [rail-end] minmax(var(--sp-6), 1fr) [text-start] minmax(0, var(--measure)) [text-end] minmax(0, 1fr) [full-end]; }
	.entry__body--toc > .route-wrap { grid-column: rail; grid-row: 1 / span 600; }
}
.prose > :first-child { margin-top: 0; }
.page--list .prose, .page .wrap > .prose { max-width: var(--measure); padding: var(--sp-6) 0 var(--sp-7); }
/* Element rules in the text are written with :where(), so they weigh no more than one class: a module's
   .u-… parts inside the text keep their own look. */
.prose :where(h2) { margin: var(--sp-7) 0 var(--sp-4); font-size: var(--fs-h2); font-weight: 900; font-stretch: 84%; letter-spacing: -.018em; line-height: 1.04; color: var(--ink); scroll-margin-top: calc(var(--sp-4) + 76px); }
@media (min-width: 1100px) { .prose :where(h2) { scroll-margin-top: var(--sp-4); } }
.prose :where(h2[data-n]) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; }
.prose :where(h2[data-n])::before { content: attr(data-n); display: grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .2em; margin-top: -.12em; border-radius: 12px; background: var(--acc-ink); color: var(--on-acc); font: 900 .72em/1 var(--font-ui); font-stretch: 90%; font-feature-settings: var(--num); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
.prose :where(h3) { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-h3); font-weight: 800; font-stretch: 92%; letter-spacing: -.005em; line-height: 1.2; }
.prose :where(p, ul, ol, dl) { margin: 0 0 var(--sp-4); }
.prose :where(ul, ol) { padding-left: 1.3em; }
.prose :where(li) { margin: 0 0 var(--sp-2); padding-left: .15em; }
.prose :where(ul > li)::marker { color: var(--acc); font-size: 1.1em; }
.prose :where(ol > li)::marker { color: var(--acc-ink); font-family: var(--font-ui); font-weight: 900; font-feature-settings: var(--num); }
.prose :where(hr) { border: 0; border-top: 2px solid var(--rule); margin: var(--sp-6) 0; }
.prose :where(blockquote) { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--acc-wash); border-left: 5px solid var(--acc); border-radius: 0 var(--r-1) var(--r-1) 0; }
.prose :where(blockquote) p:last-child { margin-bottom: 0; }
.prose :where(table) { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--sheet); font: 400 var(--fs-ui)/1.4 var(--font-ui); font-feature-settings: var(--num); margin: 0 0 var(--sp-4); border-radius: var(--r-1); box-shadow: var(--shadow); overflow: hidden; }
.prose :where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose :where(thead th) { background: var(--acc-wash); font-size: var(--fs-small); font-weight: 800; color: var(--ink); border-bottom: 3px solid var(--acc); }
.prose .num { text-align: right; white-space: nowrap; font-feature-settings: var(--num); }
.prose tr.is-mine > * { background: var(--pop); color: var(--pop-ink); }
.prose :where(figure) { margin: 0 0 var(--sp-5); }
.prose .fig img { display: block; width: 100%; height: auto; border-radius: var(--r-2); }
.checked { font: 600 var(--fs-small)/1.45 var(--font-ui); color: var(--ink-2); border-top: 2px solid var(--rule); padding-top: var(--sp-3); margin-top: var(--sp-6); }
.prose h3.qa__q { font-family: var(--font-ui); }
@media (max-width: 599px) { .prose :where(table) { display: block; overflow-x: auto; } }

/* ---------- the route through the page (its minimap): a bar over the text on a phone, a line of stations
   beside it from 1100 px, each station as long as its section, with what it holds to look at ---------- */
.route-wrap { position: sticky; top: 0; z-index: 8; align-self: start; margin: 0 calc(-1 * var(--gutter)) var(--sp-5); font-family: var(--font-ui); transition: opacity .25s ease; }
.route { display: none; }
.route__k { margin: 0; font: 900 var(--fs-small)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
.route__meta { margin: 2px 0 var(--sp-4); font: 500 var(--fs-small)/1.35 var(--font-ui); color: var(--ink-2); }
.route__list { list-style: none; margin: 0; padding: 0; position: relative; }
.route__st { position: relative; }
.route__st a { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 4px 0 6px; color: var(--ink-2); text-decoration: none; font: 600 var(--fs-small)/1.3 var(--font-ui); min-height: 40px; }
.route__st a:hover .route__t { text-decoration: underline; color: var(--ink); }
.route__n { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sheet); border: 2.5px solid var(--line); color: var(--ink); font: 900 15px/1 var(--font-ui); font-feature-settings: var(--num); }
.route__t { padding-top: 5px; }
.route__has { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.route__g { display: inline-grid; place-items: center; width: 24px; height: 20px; border-radius: 6px; background: var(--acc-wash); box-shadow: inset 0 0 0 1.5px var(--acc); }
.route__g::before { content: ""; width: 14px; height: 14px; background: var(--acc-ink); -webkit-mask: var(--gl) center / contain no-repeat; mask: var(--gl) center / contain no-repeat; }
.route__g--chart { --gl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 12V7h2.5v5zM6 12V3h2.5v9zM10 12V5h2.5v7z'/%3E%3C/svg%3E"); }
.route__g--story { --gl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 2h11v2.4h-11zM1.5 5.8h7v2.4h-7zM1.5 9.6h11V12h-11z'/%3E%3C/svg%3E"); }
.route__g--3d { --gl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1l5.5 2.9v6.2L7 13 1.5 10.1V3.9zM7 2.7L3.4 4.6 7 6.5l3.6-1.9zM2.9 5.8v3.5L6.3 11V7.6zm8.2 0L7.7 7.6V11l3.4-1.7z'/%3E%3C/svg%3E"); }
.route__g--map { --gl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='2.6'/%3E%3Ccircle cx='2' cy='2.5' r='1.7'/%3E%3Ccircle cx='12' cy='2.5' r='1.7'/%3E%3Ccircle cx='2' cy='11.5' r='1.7'/%3E%3Ccircle cx='12' cy='11.5' r='1.7'/%3E%3Cpath d='M2 2.5l5 4.5 5-4.5M2 11.5L7 7l5 4.5' stroke='%23000' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); }
.route__g--numbers { --gl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.2 3.4L4.4 2h1.4v10H4.1V4.1L2.2 5.2zM7.6 12V10.8c2.6-2.3 3.6-3.4 3.6-4.6 0-.8-.5-1.3-1.3-1.3-.8 0-1.4.5-1.7 1.2L7.4 5.4C8 4.2 9 3.5 10.1 3.5c1.6 0 2.8 1.1 2.8 2.6 0 1.5-1.1 2.7-3.1 4.5h3.2V12z'/%3E%3C/svg%3E"); }
.route__g--table { --gl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 2h12v10H1zm1.4 1.4v2.2h3.4V3.4zm4.8 0v2.2h4.4V3.4zM2.4 7v1.6h3.4V7zm4.8 0v1.6h4.4V7zM2.4 10v.6h3.4V10zm4.8 0v.6h4.4V10z'/%3E%3C/svg%3E"); }
.route__st.is-done .route__n { background: var(--acc-ink); border-color: var(--acc-ink); color: var(--on-acc); }
.route__st.is-done .route__t { color: var(--ink); }
.route__st.is-here .route__n { background: var(--pop); border-color: var(--pop-edge); color: var(--pop-ink); box-shadow: 0 0 0 4px var(--acc-wash); }
.route__st.is-here .route__t { color: var(--ink); font-weight: 850; }
.route__st.is-here .route__t::after { content: "Sie sind hier"; display: block; margin-top: 4px; font: 850 15px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: var(--acc-ink); }
.route-bar { background: var(--sheet); box-shadow: 0 1px 0 var(--rule), 0 8px 16px -12px rgba(var(--shade), .5); }
.route-bar summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px var(--sp-3); padding: 8px var(--gutter) 10px; cursor: pointer; list-style: none; min-height: 48px; }
.route-bar summary::-webkit-details-marker { display: none; }
.route-bar summary::after { content: "Öffnen"; grid-row: 1; grid-column: 3; font: 800 var(--fs-small)/1 var(--font-ui); color: var(--acc-ink); text-decoration: underline; }
.route-bar[open] summary::after { content: "Schließen"; }
.route-bar__k { padding: 5px 8px; border-radius: 5px; background: var(--acc-ink); color: var(--on-acc); font: 900 15px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 359px) { .route-bar__k { display: none; } .route-bar summary { grid-template-columns: minmax(0, 1fr) auto; } .route-bar summary::after { grid-column: 2; } }
.route-bar__now { min-width: 0; font: 650 var(--fs-small)/1.3 var(--font-ui); color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.route-bar__dots { grid-column: 1 / -1; display: flex; align-items: center; gap: 3px; height: 6px; }
.route__dot { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--rule); }
.route__dot.is-done { background: var(--acc-ink); }
.route__dot.is-here { background: var(--pop-edge); height: 6px; }
.route-bar nav { padding: var(--sp-2) var(--gutter) var(--sp-3); max-height: 62vh; overflow: auto; border-top: 1px solid var(--rule); }
.route-bar .route__has { display: none; }
@media (min-width: 760px) { .route-wrap { margin-left: 0; margin-right: 0; } .route-bar { border-radius: 0 0 var(--r-1) var(--r-1); } }
@media (min-width: 1100px) {
	.route-wrap { top: var(--sp-5); margin: 0; padding: var(--sp-1) 0 0; max-height: calc(100vh - 48px); overflow: auto; }
	.route { display: block; }
	.route-bar { display: none; }
	.route .route__list::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 22px; border-left: 3px solid var(--rule); border-radius: 2px; }
	.route .route__st a { padding-bottom: calc(6px + var(--len, .5) * 34px); }
	.route .route__st.is-done::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: -14px; border-left: 3px solid var(--acc-ink); }
}
.unt-away .route-wrap { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s .25s; }

/* ---------- lists of articles, and the other calculators as cards ---------- */
.more, .cards { padding: var(--sp-6) 0 var(--sp-7); }
.page--list > .wrap { padding-top: var(--sp-5); padding-bottom: var(--sp-6); }
.category .post-list__part { display: none; }   /* on the category's own list, its name is the headline */
.more + .cards { padding-top: 0; }
.more__h, .cards__h { margin: 0 0 var(--sp-5); font-size: var(--fs-h2); font-weight: 900; font-stretch: 84%; letter-spacing: -.015em; }
.post-list, .cards__list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .post-list, .cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.post-list__item { position: relative; display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-5) var(--sp-4); background: var(--sheet); border-radius: var(--r-2); border-top: 6px solid var(--pc, var(--acc)); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.post-list__part { margin: 0 0 var(--sp-2); font: 850 var(--fs-small)/1.3 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.post-list__title { font: 850 21px/1.15 var(--font-ui); font-stretch: 90%; color: var(--ink); text-decoration: none; }
.post-list__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-2); }
.post-list__title:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.post-list__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.post-list__summary { margin: var(--sp-2) 0 0; color: var(--ink-2); font: 400 var(--fs-small)/1.5 var(--font-ui); }
.post-list__date { margin: auto 0 0; padding-top: var(--sp-3); color: var(--ink-2); font: 500 var(--fs-small)/1.3 var(--font-ui); font-feature-settings: var(--num); }
.card a { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: var(--sp-3); align-items: center; padding: var(--sp-4); background: var(--sheet); border-radius: var(--r-2); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.card a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--pc, var(--acc)); }
.card a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card a:hover .card__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.card__ico { grid-row: 1 / 3; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; background: var(--sheet-2); }
.card__ico .ic { width: 44px; height: 44px; }
.card__name { font: 850 19px/1.15 var(--font-ui); font-stretch: 90%; }
.card__part { font: 600 var(--fs-small)/1.35 var(--font-ui); color: var(--ink-2); }

/* ---------- footer: night blue under the register strip ---------- */
.site-foot { background: var(--night); color: var(--night-ink); margin-top: var(--sp-7); padding: 0 0 var(--sp-6); font: 400 var(--fs-ui)/1.5 var(--font-ui); }
.site-foot :focus-visible { outline-color: var(--night-ink); }
.site-foot > .wrap { padding-top: var(--sp-7); }
.site-foot a { color: var(--night-ink); }
.site-foot__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-foot__grid { grid-template-columns: 24rem repeat(3, 1fr); } }
.site-foot__name { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-4); font: 500 23px/1.1 var(--font-ui); font-stretch: 86%; color: var(--night-ink); }
.site-foot__name b { font-weight: 900; }
.site-foot__mark { width: 42px; height: 42px; flex: none; }
.site-foot__name .brand__tld { color: var(--night-ink-2); }
.site-foot p { margin: 0 0 var(--sp-3); color: var(--night-ink-2); max-width: 32rem; }
.site-foot__small { font-size: var(--fs-small); }
.site-foot__h { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-3); font: 900 var(--fs-small)/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--night-ink-2); }
.site-foot__h .ic { width: 34px; height: 34px; padding: 3px; border-radius: 9px; background: #FFFFFF; }
.site-foot__nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.site-foot__nav a { text-decoration: none; font-weight: 600; }
.site-foot__nav a:hover { text-decoration: underline; }
.site-foot__base { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--night-rule); color: var(--night-ink-2); font-size: var(--fs-small); }
.site-foot__base a { color: var(--night-ink-2); }

/* =====================================================================================================
   THE SHARED VOCABULARY FOR CALCULATOR MODULES (DESIGN.md §6; design/mockups/kindesunterhalt-rechner.html
   shows every part in use). A module draws this markup and adds only its own .unt-<module> rules.
   ===================================================================================================== */

/* The sheet: one raised white sheet. From 1000 px the questions sit left and the answer right (sticky). */
.u-sheet { background: var(--sheet); color: var(--ink); border-radius: var(--r-2); box-shadow: var(--shadow-deep); margin: 0 calc(-1 * var(--gutter) + 6px); overflow: clip; }
.u-calc { display: grid; grid-template-columns: minmax(0, 1fr); }
.u-calc__form { padding: var(--sp-5) var(--sp-4) var(--sp-2); }
.u-calc__result { padding: var(--sp-4); background: var(--acc-wash); }
@media (min-width: 720px) { .u-sheet { margin: 0; } .u-calc__form { padding: var(--sp-6) var(--sp-6) var(--sp-3); } .u-calc__result { padding: var(--sp-6); } }
@media (min-width: 1000px) {
	.u-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); }
	.u-stick { position: sticky; top: var(--sp-4); }
	/* Inside a text's column (a calculator placed in a guide), there is no room for two columns: the answer
	   stays under the questions, as on a phone. */
	.prose .u-calc { grid-template-columns: minmax(0, 1fr); }
	.prose .u-stick { position: static; }
}

/* A question: its number in a coloured tile, the question in plain words, one line of help. */
.u-q { margin: 0 0 var(--sp-5); padding: 0; border: 0; min-width: 0; }
.u-q > legend { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 var(--sp-2); font: 850 var(--fs-h3)/1.2 var(--font-ui); font-stretch: 90%; color: var(--ink); }
.u-n { flex: none; display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px; border-radius: 9px; background: var(--acc-ink); color: var(--on-acc); font: 900 var(--fs-small)/1 var(--font-ui); font-feature-settings: var(--num); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22); }
.u-help { margin: 0 0 var(--sp-3); font: 400 var(--fs-small)/1.45 var(--font-ui); color: var(--ink-2); }

/* A field: label above, a thick-edged box with the unit inside it. Amounts right-aligned, tabular, slashed zero. */
.u-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0 0 var(--sp-3); } /* minmax: a wide unit ("€/Std.") never pushes the page sideways at 320 px */
.u-label { font: 700 var(--fs-ui)/1.3 var(--font-ui); color: var(--ink); }
.u-box { display: flex; align-items: center; min-height: var(--field-h); background: var(--sheet); border: 2px solid var(--line); border-radius: var(--r-1); transition: border-color .15s ease, box-shadow .15s ease; }
.u-box:focus-within { border-color: var(--acc-ink); box-shadow: 0 0 0 4px var(--acc-wash); }
.u-input { flex: 1; min-width: 0; height: calc(var(--field-h) - 4px); padding: 0 var(--sp-3); border: 0; background: transparent; color: var(--ink); font: 750 21px/1 var(--font-ui); font-feature-settings: var(--num-field); outline: none; }
.u-field--amount .u-input { text-align: right; }
.u-unit { flex: none; padding: 0 var(--sp-3) 0 0; font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--ink-2); white-space: nowrap; }
select.u-input { appearance: none; -webkit-appearance: none; padding-right: 40px; background: transparent var(--chevron) right 14px center / 14px no-repeat; font-size: 18px; }
select.u-input option { background: var(--sheet); color: var(--ink); }
.u-field--error .u-box { border-color: var(--warn); }
.u-field__msg { margin: 0; font: 650 var(--fs-small)/1.4 var(--font-ui); color: var(--warn); }

/* A segmented choice: radio buttons drawn as a row of joined keys; the chosen one filled in the page's
   colour, raised. Markup: div.u-seg[role=radiogroup][aria-labelledby] > label > input[type=radio] + span
   (+ small inside). Drawn from input:checked + span (no :has(), so older phones show it too). */
.u-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 var(--sp-3); padding: 4px; border-radius: calc(var(--r-1) + 4px); background: var(--sheet-2); }
.u-seg label { position: relative; display: grid; cursor: pointer; }
.u-seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.u-seg span { display: grid; place-items: center; align-content: center; min-height: 46px; padding: 4px; border-radius: var(--r-1); text-align: center; font: 700 var(--fs-ui)/1.15 var(--font-ui); font-feature-settings: var(--num); color: var(--ink); }
.u-seg label:hover span { background: var(--sheet); }
.u-seg input:checked + span { background: var(--acc-ink); color: var(--on-acc); font-weight: 850; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 8px -3px rgba(var(--shade), .5); }
.u-seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: -5px; }
.u-seg input:checked:focus-visible + span { outline-color: var(--on-acc); }
.u-seg small { display: block; font-size: var(--fs-small); font-weight: 500; }
@media (forced-colors: active) { .u-seg input:checked + span { outline: 3px solid CanvasText; outline-offset: -5px; } }

/* A counter: − and + as square keys beside the figure. */
.u-stepper { display: inline-grid; grid-template-columns: 48px 64px 48px; height: var(--field-h); margin: 0 0 var(--sp-3); border: 2px solid var(--line); border-radius: var(--r-1); background: var(--sheet); overflow: hidden; }
.u-stepper button { border: 0; background: var(--sheet-2); color: var(--acc-ink); font: 700 26px/1 var(--font-ui); cursor: pointer; }
.u-stepper button:hover { background: var(--acc-wash); }
.u-stepper :focus-visible { outline-offset: -4px; }
.u-stepper input { width: 100%; min-width: 0; border: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); text-align: center; font: 800 20px/1 var(--font-ui); font-feature-settings: var(--num-field); }

/* Buttons: one strong (the page's colour, raised), one plain. 48 px tall. */
.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-1); background: var(--acc-ink); color: var(--on-acc); font: 850 17px/1 var(--font-ui); text-decoration: none; cursor: pointer; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), var(--shadow); }
.u-btn--plain { background: var(--sheet); color: var(--acc-ink); box-shadow: inset 0 0 0 2px var(--acc-ink); }

/* The answer: a lit, raised card in the answer colour (sun yellow, or the look's own): what it is, the
   huge amount, one sentence. The card is flat under the words; its light is at its edges only. */
.u-answer { position: relative; margin: 0 0 var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-3); background: var(--pop); color: var(--pop-ink); border-radius: var(--r-3); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -6px 0 var(--pop-edge), 0 18px 34px -18px rgba(var(--shade), .65), 0 2px 5px rgba(var(--shade), .12); }
.u-answer + .u-answer { margin-top: var(--sp-4); }
.u-answer__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font: 850 var(--fs-ui)/1.3 var(--font-ui); color: var(--pop-ink); }
.u-amount { display: block; margin: 0 0 var(--sp-2); font: 900 var(--fs-answer)/.95 var(--font-ui); font-stretch: 80%; font-feature-settings: var(--num); letter-spacing: -.03em; color: var(--pop-num); white-space: nowrap; }
.u-amount small { font-size: .5em; font-weight: 850; letter-spacing: 0; }
.u-amount--none { font-size: calc(var(--fs-answer) * .62); font-stretch: 88%; }
.u-say { margin: 0 0 var(--sp-3); font: 500 var(--fs-ui)/1.5 var(--font-ui); color: var(--pop-ink); }
.u-answer .u-tag { background: transparent; color: var(--pop-ink); }
.u-who { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--rule); font: 400 var(--fs-small)/1.45 var(--font-ui); color: var(--ink-2); }
.u-calc__result .u-who { border-top-color: color-mix(in srgb, var(--acc) 30%, transparent); }

/* The result table: one row per child (or per month, per year); figures right, tabular; the total row
   under a 2 px rule; the reader's row in the answer colour (tr.is-mine). */
.u-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font: 400 var(--fs-ui)/1.35 var(--font-ui); font-feature-settings: var(--num); }
.u-table caption { text-align: left; padding: 0 0 var(--sp-2); font: 850 var(--fs-ui)/1.3 var(--font-ui); color: var(--ink); }
.u-table th, .u-table td { padding: 9px 6px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
.u-table th:first-child, .u-table td:first-child { padding-left: 0; }
.u-table th:last-child, .u-table td:last-child { padding-right: 0; }
.u-table thead th { font-size: var(--fs-small); font-weight: 800; color: var(--ink-2); border-bottom: 3px solid var(--acc); vertical-align: bottom; white-space: normal; hyphens: manual; -webkit-hyphens: manual; }
.u-table tbody th { font-weight: 650; }
.u-table .num { text-align: right; white-space: nowrap; }
.u-table thead .num { white-space: normal; }
.u-table .is-total > * { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 850; }
.u-table .is-mine > * { background: var(--pop); color: var(--pop-ink); }
.u-table .is-mine > :first-child { padding-left: 8px; }
.prose .u-table { background: none; box-shadow: none; border-radius: 0; overflow: visible; } /* in a text, the result table keeps its open, ruled look */
.u-table .is-mine > :last-child { padding-right: 8px; }
.u-calc__result .u-table th, .u-calc__result .u-table td { border-bottom-color: color-mix(in srgb, var(--acc) 22%, transparent); }
@media (max-width: 479px) { .u-table { font-size: var(--fs-small); font-stretch: 88%; } .u-table th, .u-table td { padding: 8px 4px; } }
/* On a phone a result table in a text that is wider than the column scrolls inside itself (as every table in a text,
   .prose :where(table) above), never the page: the open look above must not undo that. */
@media (max-width: 599px) { .prose .u-table { overflow-x: auto; } }

/* A check against a limit (the Selbstbehalt): a bar of the income, what is paid, what stays, and the
   line that must stay. Words beside the bar, never on it; the state in words, never colour alone. */
.u-check { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--sheet); border-radius: var(--r-2); box-shadow: var(--shadow); }
.u-check__h { margin: 0; font: 850 var(--fs-ui)/1.3 var(--font-ui); color: var(--ink); }
.u-check__bar { position: relative; display: flex; height: 26px; margin: var(--sp-5) 0 var(--sp-3); background: var(--sheet-2); border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line); }
.u-check__paid { flex: none; background: var(--pop); border-radius: 6px 0 0 6px; box-shadow: inset 0 -4px 0 var(--pop-edge), inset 0 0 0 1.5px var(--line); }
.u-check__limit { position: absolute; top: -12px; bottom: -8px; width: 0; border-left: 3px dotted var(--ink); }
.u-check__legend { display: grid; gap: 2px; margin: 0; font: 400 var(--fs-small)/1.45 var(--font-ui); font-feature-settings: var(--num); color: var(--ink); }
.u-check__legend span { display: flex; justify-content: space-between; gap: var(--sp-3); }
.u-check__legend b { white-space: nowrap; }
.u-check__legend i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--sheet-2); }
.u-check__legend i.paid { background: var(--pop); }
.u-check__legend i.limit { width: 0; border-radius: 0; box-shadow: none; border-left: 3px dotted var(--ink); margin-left: 5px; margin-right: 12px; }
.u-check__say { margin: var(--sp-3) 0 0; font: 750 var(--fs-small)/1.45 var(--font-ui); color: var(--ink); }
.u-check--short { background: var(--warn-soft); }

/* The Rechenweg: the reader's case written out as a column of figures, each step with the rule it
   follows named under it. Open by default: never hidden in an accordion. */
.u-steps { margin: 0; padding: var(--sp-5) var(--sp-4) var(--sp-4); border-top: 1px solid var(--rule); }
@media (min-width: 720px) { .u-steps { padding: var(--sp-5) var(--sp-6) var(--sp-5); } }
.u-steps__h { margin: 0 0 var(--sp-1); font-size: var(--fs-h3); font-weight: 900; font-stretch: 86%; }
.u-steps__intro { margin: 0 0 var(--sp-3); font: 400 var(--fs-small)/1.45 var(--font-ui); color: var(--ink-2); }
.u-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: step; font-feature-settings: var(--num); max-width: 46rem; }
.u-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: var(--sp-2); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 400 var(--fs-ui)/1.35 var(--font-ui); }
.u-steps li::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--acc-wash); color: var(--acc-ink); font: 900 15px/1 var(--font-ui); }
.u-steps__what { color: var(--ink); }
.u-steps__law, .u-sub { display: block; margin-top: 3px; font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.u-steps__val { text-align: right; white-space: nowrap; font-weight: 700; color: var(--ink); }
.u-steps__op { display: inline-block; min-width: 1.1em; color: var(--ink-2); font-weight: 400; text-align: left; }
.u-steps .is-sum { border-top: 2px solid var(--ink); }
.u-steps .is-sum .u-steps__val, .u-steps .is-sum .u-steps__what { font-weight: 850; }
.u-steps .is-mine { background: var(--pop); color: var(--pop-ink); padding-left: 8px; padding-right: 8px; border-radius: 8px; }

/* Notes: Hinweis (the page's colour) and Achtung (amber). The first word says which; never red, never an alarm. */
.u-note { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--acc-wash); border-left: 5px solid var(--acc); border-radius: 0 var(--r-1) var(--r-1) 0; font: 400 var(--fs-ui)/1.5 var(--font-ui); color: var(--ink); }
.u-note > :last-child { margin-bottom: 0; }
.u-note p { margin: 0 0 var(--sp-2); }
.u-note__h { font-weight: 850; }
.u-note--warn { background: var(--warn-soft); border-left-color: var(--warn); }
.u-note--warn .u-note__h { color: var(--warn); }

/* The source line, under every figure, table and answer. */
.u-src { margin: var(--sp-3) 0 0; font: 400 var(--fs-small)/1.45 var(--font-ui); color: var(--ink-2); }
.u-src b { font-weight: 800; color: var(--ink); }
.prose .u-src, .prose .u-note { margin-bottom: var(--sp-4); } /* in a text, a source line or note under a table keeps the text's gap to the next paragraph */

/* Labels: BEISPIEL (solid), ENTWURF (dashed, amber). Words, never decoration. */
.u-tag { display: inline-block; padding: 2px 7px 1px; border: 1.5px solid currentColor; border-radius: 5px; font: 850 var(--fs-small)/1.2 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--sheet); white-space: nowrap; vertical-align: middle; }
.u-tag--draft { border-style: dashed; color: var(--warn); }

/* The table itself (the Düsseldorfer Tabelle, or any lookup grid): the reader's row in the answer
   colour, their column washed in the page's colour, the cell where both meet framed. Fits 343 px with
   five columns. */
.u-dt { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 var(--sp-2); font: 400 var(--fs-small)/1.2 var(--font-ui); font-stretch: 88%; font-feature-settings: var(--num); background: var(--sheet); }
.u-dt caption { text-align: left; padding: 0 0 var(--sp-2); font: 850 var(--fs-ui)/1.3 var(--font-ui); font-stretch: 100%; color: var(--ink); }
.u-dt th, .u-dt td { padding: 9px 4px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.u-dt thead th { padding-top: 6px; border-bottom: 3px solid var(--acc); font-weight: 850; color: var(--ink); vertical-align: bottom; }
.u-dt thead th:first-child { white-space: normal; hyphens: manual; -webkit-hyphens: manual; }
.u-dt th:first-child, .u-dt td:first-child { text-align: left; padding-left: 0; }
.u-dt tbody th { font-weight: 650; color: var(--ink); }
.u-dt small { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--fs-small); }
.u-dt .is-col { background: var(--acc-wash); }
.u-dt tr.is-row > * { background: var(--pop); color: var(--pop-ink); border-bottom-color: var(--pop-edge); border-top: 1px solid var(--pop-edge); }
.u-dt tr.is-row > :first-child { padding-left: 6px; }
.u-dt tr.is-row small { color: var(--pop-ink); }
.u-dt .is-cell { outline: 3px solid var(--ink); outline-offset: -3px; padding-left: 8px; padding-right: 8px; font-weight: 900; }
@media (min-width: 720px) { .u-dt { font-size: var(--fs-ui); } .u-dt th, .u-dt td { padding: 10px 12px; } }

/* In the answer colour, secondary text, links and step numbers take the answer's ink (ink-2 and the
   look's colour are not 7:1 on it in every look). */
.is-mine .u-steps__law, .is-mine .u-sub, .is-mine .u-steps__op, .is-row small, .is-mine a, .is-row a, .u-answer a, .u-answer .u-sub { color: var(--pop-ink); }
.u-steps .is-mine::before { background: transparent; color: var(--pop-ink); }

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
	.tab a, .post-list__item, .card a, .u-box, .route-wrap { transition: none !important; }
	.tab a:hover, .post-list__item:hover, .card a:hover { transform: none; }
}