/*
 * Tuinideetje: designsysteem.
 *
 * Een rustig tuinmagazine: veel wit, grote foto's, dunne lijnen, precieze typografie. Bijna-zwarte inkt als basis
 * en bladgroen als klein accent. Geen beige, geen pastels, geen kaartjes die bij hover omhoog springen, geen
 * iconen in gekleurde vlakjes en geen blokken met één groot getal.
 *
 * Grote koppen in Instrument Serif, tekst, kleine koppen en interface in Hanken Grotesk. Alle kleuren en
 * lettertypen staan als variabelen in het blok Tokens hieronder; nergens anders in dit bestand staat een
 * kleurwaarde.
 */

/* ---------------------------------------------------------------- Fonts */

@font-face {
	font-family: "Hanken Grotesk";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/hanken-grotesk-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Hanken Grotesk";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/hanken-grotesk-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Serif heeft één gewicht. Het bereik 400 900 voorkomt dat de browser er een vette versie bij verzint. */
@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- Tokens */

:root {
	/* Vlakken en lijnen: wit en koele, neutrale steengrijzen. */
	--papier: #ffffff;
	--wit: #ffffff;
	--steen: #f3f4f2;
	--steen-2: #e8eae6;
	--lijn: #d8dbd5;
	--lijn-zacht: #eaece8;

	/* Inkt: tekst, koppen, knoppen en de sterke lijnen. */
	--inkt: #121512;
	--inkt-zacht: #424742;
	--inkt-licht: #6a706a;

	/* Basis: knoppen, links en focus, in inkt. */
	--basis: #121512;
	--basis-donker: #000000;
	--basis-diep: #000000;
	--basis-zacht: #e8ebe6;
	--basis-mist: #f3f4f2;

	/* Bladgroen: het enige accent. Als vlak of lijn de gewone tint; als tekst de donkere variant. */
	--messing: #3f7d32;
	--contrast: #3f7d32;
	--contrast-donker: #2f5f26;
	--contrast-zacht: #e9f2e6;
	--oker: #3f7d32;
	--oker-zacht: #e9f2e6;

	/* Per hub een inkttint met hooguit een spoor van kleur, zodat de site één geheel blijft. */
	--hub-hoofd: #2f5f26;
	--hub-accent: #8a6500;
	--hub-basis: #2f5f26;
	--hub-zeegroen: #2f5f26;
	--hub-terracotta: #8a6500;
	--hub-oceaan: #2f5f26;
	--hub-steen: #424742;
	--hub-zand: #8a6500;
	--hub-mos: #2f5f26;
	--hub-lavendel: #2f5f26;
	--hub-oker: #8a6500;

	--kop: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--tekst: "Hanken Grotesk", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;

	--straal: 2px;
	--straal-groot: 3px;
	--breedte: 1240px;
	--leesbreedte: 720px;
	--rand: clamp(18px, 4.6vw, 56px);
	--schaduw-paneel: 0 28px 48px -36px rgba(17, 17, 17, 0.28);
	--focus: #121512;

	/* De voet. */
	--voet: #121512;
	--voet-tekst: #b9bdb8;
	--voet-link: #ffffff;
	--voet-zacht: #9a9f99;
	--voet-accent: #e0a800;
	--voet-lijn: #2c302c;
	--voet-onder: #8c918b;

	/* Overig. */
	--staal-rand: rgba(17, 17, 17, 0.18);
	--print-papier: #fff;
}

[data-kleur="hoofd"], .ti-kleur-hoofd { --accent: var(--hub-hoofd); }
[data-kleur="accent"], .ti-kleur-accent { --accent: var(--hub-accent); }
[data-kleur="basis"], .ti-kleur-basis { --accent: var(--hub-basis); }
[data-kleur="zeegroen"], .ti-kleur-zeegroen { --accent: var(--hub-zeegroen); }
[data-kleur="terracotta"], .ti-kleur-terracotta { --accent: var(--hub-terracotta); }
[data-kleur="oceaan"], .ti-kleur-oceaan { --accent: var(--hub-oceaan); }
[data-kleur="steen"], .ti-kleur-steen { --accent: var(--hub-steen); }
[data-kleur="zand"], .ti-kleur-zand { --accent: var(--hub-zand); }
[data-kleur="mos"], .ti-kleur-mos { --accent: var(--hub-mos); }
[data-kleur="lavendel"], .ti-kleur-lavendel { --accent: var(--hub-lavendel); }
[data-kleur="oker"], .ti-kleur-oker { --accent: var(--hub-oker); }

/* ----------------------------------------------------------------- Basis */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 140px;
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--inkt);
	font-family: var(--tekst);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	--accent: var(--basis);
}

@media (min-width: 900px) {
	body { font-size: 1.125rem; }
}

::selection { background: var(--steen-2); color: var(--inkt); }

img, svg { display: block; max-width: 100%; height: auto; }

a {
	color: var(--inkt);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: var(--lijn);
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
a:hover { color: var(--inkt); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 1px;
}

h1, h2, h3, h4 {
	color: var(--inkt);
	text-wrap: balance;
	margin: 0 0 0.5em;
}
h1, h2 {
	font-family: var(--kop);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.012em;
}
h1 { font-size: clamp(2.5rem, 1.55rem + 3.1vw, 4.25rem); letter-spacing: -0.018em; }
h2 { font-size: clamp(1.8rem, 1.45rem + 1.1vw, 2.45rem); }
h3, h4 {
	font-family: var(--tekst);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.006em;
}
h3 { font-size: clamp(1.08rem, 1.02rem + 0.25vw, 1.2rem); }
h4 { font-size: 1rem; }

p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--contrast-donker); }
strong { font-weight: 600; }

.ti-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ti-overslaan {
	position: absolute;
	left: 12px; top: -60px;
	background: var(--inkt);
	color: var(--wit);
	padding: 10px 16px;
	z-index: 100;
}
.ti-overslaan:focus { top: 12px; color: var(--wit); }

.ti-wrap {
	width: 100%;
	max-width: calc(var(--breedte) + 2 * var(--rand));
	margin-inline: auto;
	padding-inline: var(--rand);
}

.ti-icoon { flex: none; }

/* Een klein label boven een kop: kapitalen met wat lucht, en een kort messing streepje ervoor. */
.ti-label, .ti-bovenschrift {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-family: var(--tekst);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--inkt-licht);
}
.ti-label::before, .ti-bovenschrift::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--messing);
	flex: none;
}

/* ------------------------------------------------------------------ Kop */

.ti-kop {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wit);
	border-bottom: 1px solid var(--lijn-zacht);
}

.ti-kop__balk {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 78px;
}

.ti-logo {
	display: inline-flex;
	align-items: center;
	color: var(--inkt);
	text-decoration: none;
	flex: none;
}
.ti-logo:hover { color: var(--inkt); }
.ti-woordnaam { display: block; height: 31px; width: auto; }
.ti-woordnaam__blad { fill: var(--contrast); }
.ti-woordnaam--tekst { height: auto; font-size: 1.5rem; font-weight: 300; letter-spacing: 0.01em; }

.ti-zoekveld {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 1 300px;
	margin-left: auto;
}
.ti-zoekveld input {
	width: 100%;
	height: 40px;
	padding: 0 44px 0 14px;
	border: 1px solid transparent;
	border-radius: var(--straal);
	background: var(--steen);
	font: inherit;
	font-size: 0.9rem;
	color: var(--inkt);
	-webkit-appearance: none;
	appearance: none;
}
.ti-zoekveld input::placeholder { color: var(--inkt-licht); }
.ti-zoekveld input:focus { background: var(--wit); border-color: var(--inkt); outline: none; }
.ti-zoekveld button {
	position: absolute;
	right: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	min-width: 34px;
	padding: 0 8px;
	border: 0;
	border-radius: var(--straal);
	background: transparent;
	color: var(--inkt);
	cursor: pointer;
	font: inherit;
}

.ti-zoekveld--groot { flex: none; max-width: 560px; margin: 30px 0 0; }
.ti-zoekveld--groot input {
	height: 56px;
	font-size: 1rem;
	padding-left: 18px;
	padding-right: 120px;
	background: var(--wit);
	border-color: var(--lijn);
}
.ti-zoekveld--groot input:focus { border-color: var(--inkt); }
.ti-zoekveld--groot button {
	right: 6px;
	height: 44px;
	padding: 0 22px;
	background: var(--inkt);
	color: var(--wit);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.ti-zoekveld--groot button:hover, .ti-zoekveld--groot button:focus-visible { background: var(--basis-diep); color: var(--wit); }

.ti-zoekveld__suggesties {
	position: absolute;
	top: calc(100% + 6px);
	left: 0; right: 0;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--straal);
	box-shadow: var(--schaduw-paneel);
	padding: 6px;
	z-index: 60;
}
.ti-zoekveld__suggesties a {
	display: block;
	padding: 10px 12px;
	color: var(--inkt);
	text-decoration: none;
	font-size: 0.93rem;
	line-height: 1.35;
}
.ti-zoekveld__suggesties a span { display: block; color: var(--inkt-licht); font-size: 0.8rem; }
.ti-zoekveld__suggesties a:hover, .ti-zoekveld__suggesties a.is-actief { background: var(--steen); color: var(--inkt); }

.ti-kop__tools {
	flex: none;
	color: var(--inkt);
	font-weight: 500;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	text-decoration: none;
}
.ti-kop__tools:hover { text-decoration: underline; text-decoration-color: var(--messing); }

.ti-menuknop {
	display: none;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--lijn);
	border-radius: var(--straal);
	background: var(--wit);
	color: var(--inkt);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 500;
	cursor: pointer;
}
.ti-menuknop[aria-expanded="true"] { border-color: var(--inkt); }

/* De navigatie met de onderwerpen */

.ti-nav { border-top: 1px solid var(--lijn-zacht); }
.ti-nav__lijst {
	display: flex;
	align-items: stretch;
	gap: 6px;
	list-style: none;
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 0;
}
.ti-nav__item { margin: 0; }
.ti-nav__knop {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 50px;
	padding: 0 13px;
	border: 0;
	background: none;
	color: var(--inkt);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	white-space: nowrap;
}
.ti-nav__knop .ti-icoon { width: 12px; height: 12px; color: var(--inkt-licht); transition: transform 0.15s ease; }
.ti-nav__knop::after {
	content: "";
	position: absolute;
	left: 13px; right: 13px; bottom: -1px;
	height: 2px;
	background: var(--messing);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.ti-nav__item:first-child .ti-nav__knop { padding-left: 0; }
.ti-nav__item:first-child .ti-nav__knop::after { left: 0; }
.ti-nav__knop:hover::after, .ti-nav__knop[aria-expanded="true"]::after, .is-huidig .ti-nav__knop::after { transform: scaleX(1); }
.ti-nav__knop[aria-expanded="true"] .ti-icoon { transform: rotate(180deg); }

.ti-paneel {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var(--wit);
	border-top: 1px solid var(--lijn-zacht);
	border-bottom: 1px solid var(--lijn);
	box-shadow: var(--schaduw-paneel);
}
.ti-paneel__binnen {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(0, 2.8fr) minmax(290px, 1.3fr);
	gap: 48px;
	padding-top: 40px;
	padding-bottom: 48px;
}
.ti-paneel__hub {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--kop);
	font-weight: 400;
	font-size: 1.85rem;
	line-height: 1.08;
	color: var(--inkt);
	text-decoration: none;
}
.ti-paneel__hub .ti-icoon { color: var(--messing); width: 18px; height: 18px; transform: translateY(2px); }
.ti-paneel__hub:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.ti-paneel__kop p { margin-top: 14px; color: var(--inkt-zacht); font-size: 0.9rem; line-height: 1.55; }

.ti-paneel__kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
}
.ti-paneel__segment {
	display: block;
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--lijn-zacht);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--inkt-licht);
}
/* Een segment met één subhub is één klikbare regel. */
.ti-paneel__segment--link { text-decoration: none; color: var(--inkt); text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 600; }
.ti-paneel__segment--link:hover { text-decoration: underline; text-decoration-color: var(--messing); }
.ti-paneel__kolom ul { list-style: none; margin: 0; padding: 0; }
.ti-paneel__kolom li { margin: 0; }
.ti-paneel__kolom a { display: block; padding: 5px 0; color: var(--inkt); text-decoration: none; line-height: 1.35; }
.ti-paneel__kolom a:hover { text-decoration: underline; text-decoration-color: var(--messing); }
.ti-paneel__sub { margin-top: 8px !important; }
.ti-paneel__sub:first-child { margin-top: 0 !important; }
.ti-paneel__sub a { font-weight: 600; font-size: 0.93rem; }
.ti-paneel__gids a { font-size: 0.88rem; color: var(--inkt-zacht); }

.ti-paneel__uitgelicht { display: flex; flex-direction: column; gap: 14px; }

.ti-uitgelicht { display: block; color: var(--inkt); text-decoration: none; }
.ti-uitgelicht .ti-beeld { margin: 0 0 14px; }
.ti-uitgelicht__label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--contrast-donker); }
.ti-uitgelicht__titel { display: block; margin-top: 6px; font-family: var(--kop); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.ti-uitgelicht:hover .ti-uitgelicht__titel { text-decoration: underline; text-decoration-thickness: 1px; }

/* Toolkaart: in het menu, de zijbalk, op de homepage en het toolsoverzicht */

.ti-toolkaart {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	row-gap: 6px;
	align-content: start;
	padding: 22px 22px 20px;
	background: var(--steen);
	border: 0;
	border-radius: 0;
	color: var(--inkt);
	text-decoration: none;
}
.ti-toolkaart .ti-icoon:first-child { grid-row: span 3; color: var(--inkt); margin-top: 3px; }
.ti-toolkaart__naam { font-family: var(--kop); font-weight: 400; font-size: 1.4rem; line-height: 1.12; }
.ti-toolkaart__tekst { color: var(--inkt-zacht); font-size: 0.88rem; line-height: 1.5; }
.ti-toolkaart__actie { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--inkt); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.01em; }
.ti-toolkaart__actie .ti-icoon { color: var(--messing); transition: transform 0.15s ease; }
.ti-toolkaart:hover { color: var(--inkt); }
.ti-toolkaart:hover .ti-toolkaart__actie { text-decoration: underline; text-decoration-color: var(--messing); }
.ti-toolkaart:hover .ti-toolkaart__actie .ti-icoon { transform: translateX(3px); }
.ti-toolkaart--paneel { background: var(--steen); }
/* In de smalle zijbalk zonder icoon, zodat de tekst de volle breedte van de kaart krijgt. */
.ti-toolkaart.zijbalk, .ti-toolkaart--paneel { display: flex; flex-direction: column; gap: 6px; }
.ti-toolkaart.zijbalk > .ti-icoon:first-child, .ti-toolkaart--paneel > .ti-icoon:first-child { display: none; }

.ti-toolkaarten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: 0;
	margin: 8px 0 8px;
}
@media (max-width: 760px) { .ti-toolkaarten { grid-template-columns: minmax(0, 1fr); } }
.ti-toolkaarten--groot { margin-bottom: 48px; }
/* In lijsten geen losse kaarten, maar een regel per rekenhulp met een lijn erboven en zonder icoon. */
.ti-toolkaarten .ti-toolkaart { display: flex; flex-direction: column; gap: 6px; background: none; border-top: 1px solid var(--lijn); padding: 24px 0 28px; }
.ti-toolkaarten .ti-toolkaart > .ti-icoon:first-child { display: none; }
.ti-toolkaarten .ti-toolkaart:hover { border-top-color: var(--inkt); }
.ti-toolkaarten .ti-toolkaart__naam { font-size: 1.55rem; }

/* Mobiel menu */

.ti-mobiel {
	border-top: 1px solid var(--lijn-zacht);
	background: var(--wit);
	padding: 16px var(--rand) 32px;
	max-height: calc(100vh - 78px);
	overflow-y: auto;
}
.ti-mobiel .ti-zoekveld { max-width: none; margin: 4px 0 16px; }
.ti-mobiel__hub { border-bottom: 1px solid var(--lijn-zacht); }
.ti-mobiel__hub summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	font-family: var(--kop);
	font-size: 1.4rem;
	line-height: 1.15;
	cursor: pointer;
	list-style: none;
}
.ti-mobiel__hub summary .ti-icoon { color: var(--inkt-licht); }
.ti-mobiel__hub summary::-webkit-details-marker { display: none; }
.ti-mobiel__hub[open] summary .ti-icoon { transform: rotate(180deg); }
.ti-mobiel__hub ul { list-style: none; padding: 0 0 14px 14px; margin: 0; border-left: 1px solid var(--messing); }
.ti-mobiel__hub li a { display: block; padding: 7px 0; color: var(--inkt); text-decoration: none; font-size: 0.95rem; }
.ti-mobiel__tools { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 600; color: var(--inkt); text-decoration: none; }

@media (max-width: 1099px) {
	.ti-nav { display: none; }
	.ti-menuknop { display: inline-flex; }
	.ti-kop__tools { display: none; }
	.ti-kop__balk { gap: 16px; min-height: 68px; }
}
@media (max-width: 680px) {
	.ti-kop__balk > .ti-zoekveld { display: none; }
	.ti-menuknop { margin-left: auto; }
	.ti-woordnaam { height: 27px; }
}
@media (min-width: 1100px) {
	.ti-mobiel { display: none !important; }
}

/* ----------------------------------------------------------- Kruimelpad */

.ti-kruimels { margin: 28px 0 32px; font-size: 0.8rem; letter-spacing: 0.01em; color: var(--inkt-licht); }
.ti-kruimels ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.ti-kruimels li { margin: 0; display: inline-flex; align-items: center; }
.ti-kruimels li + li::before { content: "/"; margin: 0 10px; color: var(--lijn); }
.ti-kruimels a { color: var(--inkt-zacht); text-decoration: none; }
.ti-kruimels a:hover { color: var(--inkt); text-decoration: underline; }
.ti-kruimels [aria-current] { color: var(--inkt-licht); }

/* ----------------------------------------------------------------- Main */

.ti-main { padding-bottom: clamp(80px, 9vw, 128px); }

.ti-artikel__kop { max-width: 880px; margin-bottom: clamp(36px, 4vw, 52px); }
.ti-artikel__kop h1 { margin-bottom: 0.4em; }
.ti-bovenschrift a { color: inherit; text-decoration: none; }
.ti-bovenschrift a:hover { color: var(--inkt); text-decoration: underline; }

.ti-byline { margin: 0 0 26px; font-size: 0.82rem; letter-spacing: 0.01em; color: var(--inkt-licht); }
.ti-byline a { color: var(--inkt); font-weight: 500; text-decoration: none; }
.ti-byline a:hover { text-decoration: underline; }
.ti-byline span { margin: 0 8px; color: var(--lijn); }

.ti-lead { max-width: var(--leesbreedte); font-size: 1.14em; line-height: 1.62; color: var(--inkt-zacht); }
.ti-lead p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Beeld */

.ti-beeld { margin: 0 0 28px; }
.ti-beeld img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--steen); }
.ti-beeld figcaption { max-width: var(--leesbreedte); margin-top: 12px; font-size: 0.8rem; line-height: 1.5; color: var(--inkt-licht); }

/* Zonder foto: een effen steentint met het kleine symbool, geen raster of patroon. */
.ti-beeld--leeg .ti-beeld__vlak {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--steen);
	color: var(--lijn);
}
.ti-beeld--leeg .ti-beeldmerk { width: 34px; height: 34px; color: var(--inkt-licht); opacity: 0.5; }

/* De grote openingsfoto van een gids, pillar, hub of overzicht: over de volle breedte van de pagina. */
.ti-beeld--opening { margin: 0 0 clamp(44px, 5vw, 72px); }
.ti-beeld--opening img { aspect-ratio: 2 / 1; }
.ti-beeld--opening.ti-beeld--hub img { aspect-ratio: 21 / 9; }
.ti-beeld--opening.ti-beeld--band img { aspect-ratio: 5 / 2; }
@media (max-width: 760px) {
	.ti-beeld--opening { margin-inline: calc(-1 * var(--rand)); }
	.ti-beeld--opening img, .ti-beeld--opening.ti-beeld--hub img, .ti-beeld--opening.ti-beeld--band img { aspect-ratio: 3 / 2; }
	.ti-beeld--opening figcaption { padding-inline: var(--rand); }
}

.ti-beeld--breed img, .ti-beeld--breed .ti-beeld__vlak { aspect-ratio: 21 / 9; }
.ti-beeld--band img, .ti-beeld--band .ti-beeld__vlak { aspect-ratio: 3 / 1; }

/* ------------------------------------------------------------ Artikel */

.ti-artikel__raster {
	display: grid;
	grid-template-columns: minmax(0, var(--leesbreedte)) minmax(260px, 300px);
	justify-content: space-between;
	gap: 64px;
}
@media (max-width: 1023px) {
	.ti-artikel__raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.ti-zijbalk .ti-inhoud { display: none; }
}

.ti-artikel__tekst > section, .ti-overzicht__tekst > section, .ti-hub__tekst > section, .ti-vast__tekst > section { margin-top: 3.2em; }
.ti-artikel__tekst > section:first-child { margin-top: 0; }
.ti-artikel__tekst h2, .ti-overzicht__tekst h2, .ti-hub__tekst h2, .ti-vast__tekst h2 { margin-bottom: 0.6em; }
.ti-artikel__tekst h3, .ti-overzicht__tekst h3, .ti-hub__tekst h3, .ti-vast__tekst h3 { margin-top: 1.9em; margin-bottom: 0.5em; }

/* Notities */

.ti-notitie {
	display: flex;
	gap: 16px;
	margin: 2em 0;
	padding: 20px 24px;
	border-left: 2px solid var(--inkt);
	background: var(--steen);
	font-size: 0.95em;
}
.ti-notitie .ti-icoon { color: var(--inkt); margin-top: 4px; }
.ti-notitie p:last-child { margin-bottom: 0; }
.ti-notitie--attentie { border-left-color: var(--messing); }
.ti-notitie--attentie .ti-icoon { color: var(--contrast-donker); }

/* Tabellen: geen kader, een inktlijn onder de kolomkoppen en dunne lijnen tussen de rijen. */

.ti-tabel { margin: 2.2em 0; }
.ti-tabel__schuif { overflow-x: auto; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.ti-tabel table, .ti-tooltabel { width: 100%; border-collapse: collapse; font-size: 0.9em; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ti-tabel caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 14px;
	font-family: var(--tekst);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--inkt);
}
.ti-tabel th, .ti-tabel td, .ti-tooltabel th, .ti-tooltabel td {
	padding: 13px 18px 13px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--lijn-zacht);
}
.ti-tabel th:last-child, .ti-tabel td:last-child, .ti-tooltabel th:last-child, .ti-tooltabel td:last-child { padding-right: 0; }
.ti-tabel thead th, .ti-tooltabel thead th {
	padding-top: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--inkt);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--inkt-licht);
	white-space: nowrap;
}
.ti-tabel tbody th, .ti-tooltabel tbody th { font-weight: 600; color: var(--inkt); }
.ti-tabel tbody tr:last-child th, .ti-tabel tbody tr:last-child td, .ti-tooltabel tbody tr:last-child th, .ti-tooltabel tbody tr:last-child td { border-bottom: 0; }
.ti-tabel figcaption { margin-top: 10px; font-size: 0.8rem; line-height: 1.5; color: var(--inkt-licht); }
.ti-tabel--beslis tbody td:last-child { color: var(--inkt); font-weight: 500; }
/* De prijstabel past in de leeskolom: bedragen mogen afbreken op de spatie, niet midden in een getal. */
.ti-tabel--prijs td { white-space: normal; }
.ti-tabel--prijs thead th { white-space: normal; }

/* Op een telefoon wordt elke rij een blokje: de eerste cel als kop, daaronder elke waarde met zijn kolomnaam. */
@media (max-width: 640px) {
	.ti-tabel__schuif { overflow-x: visible; border-top: 1px solid var(--inkt); }
	.ti-tabel table, .ti-tabel tbody, .ti-tabel tr, .ti-tabel tbody th, .ti-tabel td { display: block; width: auto; }
	.ti-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.ti-tabel caption { display: block; }
	.ti-tabel tbody tr { padding: 14px 0; border-bottom: 1px solid var(--lijn-zacht); }
	.ti-tabel tbody tr:last-child { border-bottom: 0; }
	.ti-tabel tbody th, .ti-tabel td { padding: 0; border-bottom: 0; }
	.ti-tabel tbody th { margin-bottom: 6px; font-size: 1.02em; }
	.ti-tabel td { padding: 3px 0; }
	.ti-tabel td[data-label]::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-licht); }
	.ti-tabel--prijs td { white-space: normal; }
}

/* Schema's */

.ti-figuur { margin: 1.8em 0; padding: 20px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); }
.ti-figuur svg { width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.ti-figuur figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--inkt-zacht); }
/* Op een telefoon loopt het kader tot de rand, zodat de labels van het schema groot genoeg blijven. */
@media (max-width: 640px) {
	.ti-figuur { margin-inline: calc(-1 * var(--rand)); padding: 16px 8px 14px; border-width: 1px 0; border-radius: 0; }
	.ti-figuur figcaption { padding-inline: 8px; }
}

/* Dit heb je nodig */

.ti-nodig {
	margin: 0 0 3em;
	padding: 30px 32px 12px;
	background: var(--wit);
	border: 1px solid var(--lijn);
}
.ti-nodig h2 { font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.95rem); }
.ti-nodig__kern {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px 28px;
	margin: 8px 0 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--lijn-zacht);
}
.ti-nodig__kern div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
.ti-nodig__kern .ti-icoon { grid-row: span 2; color: var(--inkt); margin-top: 3px; }
.ti-nodig__kern dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-licht); }
.ti-nodig__kern dd { margin: 2px 0 0; font-size: 0.96em; line-height: 1.45; }
.ti-nodig__lijsten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
.ti-nodig__lijsten h3 { margin-top: 0; font-size: 0.98rem; }
.ti-nodig__lijsten ul { font-size: 0.94em; }
@media (max-width: 640px) { .ti-nodig { padding: 24px 20px 8px; } }

/* Stappenplan: elke stap begint op een dunne lijn, met het nummer als klein serif-label. */

.ti-stappen__lijst { list-style: none; margin: 1.8em 0 0; padding: 0; }
.ti-stappen__lijst > li { margin: 0; padding: 26px 0 32px; border-top: 1px solid var(--lijn); }
.ti-stappen__lijst > li:last-child { padding-bottom: 0; }
.ti-stappen__lijst h3 { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: 1.15rem; }
.ti-stappen__nr { display: block; font-family: var(--kop); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: 0; color: var(--contrast-donker); }
.ti-stap__beeld { margin: 20px 0 4px; }

/* Rekenvoorbeelden */

.ti-peildatum { font-size: 0.88rem; color: var(--inkt-licht); }
/* Onder elkaar over de volle tekstkolom: naast elkaar wordt de tabel te smal voor omschrijving en bedrag. */
.ti-rekenvoorbeelden__lijst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 18px; }
.ti-rekenvoorbeeld { padding: 24px 28px 16px; background: var(--wit); border: 1px solid var(--lijn); min-width: 0; }
.ti-rekenvoorbeeld h3 { margin-top: 0; font-size: 1.08rem; }
.ti-rekenvoorbeeld table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.92em; margin: 12px 0 6px; font-variant-numeric: tabular-nums; }
.ti-rekenvoorbeeld th, .ti-rekenvoorbeeld td { padding: 8px 0; border-bottom: 1px solid var(--lijn-zacht); text-align: left; font-weight: 400; vertical-align: top; }
.ti-rekenvoorbeeld th { width: 62%; }
.ti-rekenvoorbeeld td { text-align: right; padding-left: 16px; overflow-wrap: anywhere; }
.ti-rekenvoorbeeld tfoot th, .ti-rekenvoorbeeld tfoot td { border-top: 1px solid var(--inkt); border-bottom: 0; font-weight: 600; padding-top: 12px; }
@media (max-width: 640px) { .ti-rekenvoorbeeld { padding: 20px 18px 12px; } }

/* Ideeën: een rustige reeks grote foto's, één idee per regel, met een klein nummer. */

.ti-ideeen__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 6vw, 80px); margin-top: 28px; counter-reset: idee; }
.ti-idee { counter-increment: idee; }
.ti-idee .ti-beeld { margin-bottom: 22px; }
.ti-idee--zonderbeeld { padding-top: 26px; border-top: 1px solid var(--lijn); }
.ti-idee h3 { margin: 0 0 10px; font-family: var(--kop); font-weight: 400; font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.95rem); line-height: 1.1; letter-spacing: -0.01em; }
.ti-idee h3::before { content: counter(idee, decimal-leading-zero); display: block; margin-bottom: 10px; font-family: var(--tekst); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; color: var(--contrast-donker); }
.ti-idee p { font-size: 0.98em; }
.ti-stalen { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 12px 0 10px; font-size: 0.84rem; color: var(--inkt-zacht); }
.ti-stalen li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.ti-staal { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--staal-rand); }
.ti-materialen { font-size: 0.86rem; color: var(--inkt-licht); }

/* Checklist */

.ti-checklist ul { list-style: none; padding: 0; border-top: 1px solid var(--inkt); }
.ti-checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--lijn-zacht); margin: 0; }
.ti-checklist input { width: 18px; height: 18px; margin-top: 5px; accent-color: var(--inkt); flex: none; }

/* Fouten: genummerd met een serif-cijfer, zonder cirkel. */

.ti-fouten ol { list-style: none; counter-reset: fout; padding: 0; }
.ti-fouten li { counter-increment: fout; position: relative; padding: 18px 0 4px 48px; margin: 0; border-top: 1px solid var(--lijn-zacht); }
.ti-fouten li::before {
	content: counter(fout);
	position: absolute;
	left: 0; top: 14px;
	font-family: var(--kop);
	font-style: italic;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--contrast-donker);
}
.ti-fouten h3 { margin: 0 0 4px; font-size: 1.04rem; }

/* Vakman */

.ti-vakman { padding: 30px 32px 12px; background: var(--steen); }
.ti-vakman h2 { font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.95rem); }
@media (max-width: 640px) { .ti-vakman { padding: 24px 20px 8px; } }

/* Vragen */

.ti-vragen { border-top: 0; }
.ti-vragen > h2 { padding-bottom: 0.5em; margin-bottom: 0; border-bottom: 1px solid var(--inkt); }
.ti-vraag { border-bottom: 1px solid var(--lijn); }
.ti-vraag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
}
.ti-vraag summary::-webkit-details-marker { display: none; }
.ti-vraag summary h3 { margin: 0 !important; font-family: var(--tekst); font-size: 1.02rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; }
.ti-vraag summary .ti-icoon { color: var(--inkt-licht); transition: transform 0.15s ease; }
.ti-vraag[open] summary .ti-icoon { transform: rotate(180deg); color: var(--messing); }
.ti-vraag summary:hover h3 { text-decoration: underline; text-decoration-color: var(--lijn); text-underline-offset: 0.2em; }
.ti-vraag__antwoord { padding: 0 0 10px; color: var(--inkt-zacht); }

/* Bronnen en auteur */

.ti-bronnen ol { font-size: 0.86em; padding-left: 1.3em; color: var(--inkt-zacht); }
.ti-bronnen li { margin-bottom: 0.6em; }
.ti-bronnen__datum { color: var(--inkt-licht); }

.ti-auteur {
	display: flex;
	gap: 16px;
	margin-top: 3.2em;
	padding-top: 24px;
	border-top: 1px solid var(--inkt);
	font-size: 0.9em;
	color: var(--inkt-zacht);
}
.ti-auteur > .ti-icoon { display: none; }
.ti-auteur__naam { margin-bottom: 4px; font-weight: 600; color: var(--inkt); }
.ti-auteur p { margin-bottom: 0.6em; }

/* Zijbalk */

.ti-zijbalk__plak { position: sticky; top: 156px; display: flex; flex-direction: column; gap: 36px; }
.ti-inhoud__kop, .ti-silo__kop { margin: 0 0 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inkt-licht); }
.ti-silo__kop a { color: inherit; text-decoration-color: var(--lijn); }
.ti-inhoud ol, .ti-silo ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--lijn-zacht); }
.ti-inhoud li, .ti-silo li { margin: 0; }
.ti-inhoud a, .ti-silo a {
	display: block;
	padding: 5px 0 5px 14px;
	margin-left: -1px;
	border-left: 1px solid transparent;
	color: var(--inkt-zacht);
	font-size: 0.86rem;
	line-height: 1.45;
	text-decoration: none;
}
.ti-inhoud a:hover, .ti-silo a:hover { color: var(--inkt); border-left-color: var(--inkt-licht); }
.ti-inhoud a.is-actief { border-left-color: var(--messing); color: var(--inkt); font-weight: 500; }

/* Rijen: lijsten van pagina's met een kleine foto en één afgeronde zin ernaast */

.ti-rijen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0 48px; }
.ti-rijen--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ti-rijen--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .ti-rijen--twee, .ti-rijen--drie { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 861px) and (max-width: 1100px) { .ti-rijen--drie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* In de leeskolom is er geen plek voor twee lijsten naast elkaar. */
.ti-artikel__tekst .ti-rijen--twee, .ti-overzicht__tekst .ti-rijen--twee { grid-template-columns: minmax(0, 1fr); }
.ti-rij { display: flex; gap: 22px; align-items: center; padding: 20px 0; border-top: 1px solid var(--lijn-zacht); margin: 0; }
.ti-rij__beeld { flex: 0 0 156px; }
.ti-rij__beeld .ti-beeld { margin: 0; }
.ti-rij__beeld .ti-beeld img, .ti-rij__beeld .ti-beeld__vlak { aspect-ratio: 3 / 2; }
.ti-rij__beeld .ti-beeldmerk { width: 24px; height: 24px; }
.ti-rij__tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ti-rij__titel { font-family: var(--kop); font-weight: 400; font-size: 1.4rem; line-height: 1.12; letter-spacing: -0.005em; color: var(--inkt); text-decoration: none; }
.ti-rij__titel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.ti-rij__regel { font-size: 0.88rem; line-height: 1.5; color: var(--inkt-zacht); }
@media (max-width: 480px) {
	.ti-rij { gap: 14px; align-items: flex-start; padding: 16px 0; }
	.ti-rij__beeld { flex-basis: 80px; margin-top: 4px; }
	.ti-rij__titel { font-size: 1.22rem; }
}

.ti-gidsenblok { margin: 0 0 3.4em; }
.ti-gidsenblok h2 { margin-bottom: 0.4em; }
.ti-gidsenblok .ti-rij:first-child { border-top-color: var(--inkt); }
@media (min-width: 861px) { .ti-overzicht .ti-gidsenblok .ti-rijen--twee .ti-rij:nth-child(2) { border-top-color: var(--inkt); } }

.ti-verwant { margin-top: clamp(72px, 8vw, 112px); padding-top: 26px; border-top: 1px solid var(--inkt); }
.ti-verwant h2 { font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem); margin-bottom: 0.6em; }

.ti-meer { display: inline-block; margin-top: 10px; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; text-decoration-color: var(--messing); }

/* Voorbeeldbalk en niet-live */

.ti-voorbeeldbalk { margin: 0 0 26px; padding: 12px 16px; background: var(--steen); border-left: 2px solid var(--messing); font-size: 0.86rem; }
.ti-nietlive { max-width: var(--leesbreedte); padding: 12px 0 30px; }
.ti-nietlive p { color: var(--inkt-zacht); }

/* ---------------------------------------------------------------- Hub */

.ti-hub > .ti-artikel__kop { max-width: 920px; }

/* Per segment: de kop links, de subhubs als lijst met foto en één zin rechts. */
.ti-segment {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: 48px;
	margin-top: clamp(64px, 7vw, 104px);
	padding-top: 24px;
	border-top: 1px solid var(--inkt);
}
.ti-hub .ti-beeld--opening + .ti-segment { margin-top: 0; }
.ti-segment > h2 { position: sticky; top: 156px; align-self: start; margin: 0; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); }
.ti-segment__subs { display: grid; gap: 0; }
.ti-subhubblok {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 32px;
	padding: 0 0 40px;
	margin: 0 0 40px;
	border-bottom: 1px solid var(--lijn-zacht);
}
.ti-subhubblok:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ti-subhubblok__beeld { display: block; }
.ti-subhubblok .ti-beeld { margin: 0; }
.ti-subhubblok h3 { margin: 0 0 8px; font-family: var(--kop); font-weight: 400; font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.95rem); line-height: 1.1; letter-spacing: -0.01em; }
.ti-subhubblok h3 a { color: var(--inkt); text-decoration: none; }
.ti-subhubblok h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.ti-subhubblok p { color: var(--inkt-zacht); font-size: 0.95em; margin-bottom: 14px; }
.ti-subhubblok ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 28px; }
.ti-subhubblok li { margin: 0; border-top: 1px solid var(--lijn-zacht); break-inside: avoid; }
.ti-subhubblok li a { display: block; padding: 8px 0; color: var(--inkt); text-decoration: none; font-size: 0.88rem; line-height: 1.4; }
.ti-subhubblok li a:hover { text-decoration: underline; text-decoration-color: var(--messing); }
@media (max-width: 1100px) { .ti-subhubblok ul { columns: 1; } }
@media (max-width: 1000px) {
	.ti-segment { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ti-segment > h2 { position: static; }
}
@media (max-width: 700px) {
	.ti-subhubblok { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

.ti-hub__tekst { max-width: var(--leesbreedte); margin-top: clamp(72px, 8vw, 112px); }
.ti-hubtools { margin-top: clamp(64px, 7vw, 96px); padding-top: 24px; border-top: 1px solid var(--inkt); }

/* ------------------------------------------------------------ Overzicht */

.ti-overzicht__tekst, .ti-vast__tekst { max-width: var(--leesbreedte); }
.ti-vast { max-width: var(--leesbreedte); }
.ti-vast .ti-artikel__kop { max-width: var(--leesbreedte); }
.ti-overzicht__tekst { margin-top: clamp(56px, 6vw, 88px); }
.ti-contactmail { font-size: 1.15em; font-weight: 600; }
.ti-toolsoverzicht .ti-toolkaarten { margin-top: 0; }

/* ---------------------------------------------------------------- Tool */

.ti-tool {
	margin: 2.8em 0;
	padding: 30px 32px 22px;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-top: 2px solid var(--inkt);
}
.ti-main--tool .ti-tool { margin-top: 0; }
.ti-tool__kop { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.ti-tool__kop .ti-icoon { color: var(--inkt); margin-top: 6px; }
.ti-tool__label { margin: 0 0 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--contrast-donker); }
.ti-tool__titel { margin: 0; font-family: var(--kop); font-weight: 400; font-size: clamp(1.6rem, 1.4rem + 0.6vw, 2rem); line-height: 1.1; }
.ti-tool__uitleg { color: var(--inkt-zacht); font-size: 0.94em; }

.ti-tool fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.ti-tool legend { padding: 0; margin-bottom: 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inkt-licht); }
.ti-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; max-width: 1000px; }
.ti-veld { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; color: var(--inkt-zacht); }
.ti-veld__label { line-height: 1.3; }
.ti-veld__invoer { display: flex; align-items: stretch; border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--wit); overflow: hidden; }
.ti-veld__invoer:focus-within { border-color: var(--inkt); box-shadow: 0 0 0 3px var(--basis-zacht); }
.ti-veld input, .ti-veld select {
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	color: var(--inkt);
	font-variant-numeric: tabular-nums;
}
.ti-veld select { border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--wit); }
.ti-veld input:focus, .ti-veld select:focus { outline: none; }
.ti-veld select:focus { border-color: var(--inkt); box-shadow: 0 0 0 3px var(--basis-zacht); }
.ti-veld__eenheid { display: flex; align-items: center; padding: 0 12px; color: var(--inkt-licht); font-size: 0.84rem; white-space: nowrap; background: var(--steen); border-left: 1px solid var(--lijn-zacht); }
.ti-vinkjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; }
.ti-vinkje { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; cursor: pointer; }
.ti-vinkje input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--inkt); flex: none; }

.ti-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.ti-filter {
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--lijn);
	border-radius: var(--straal);
	background: var(--wit);
	color: var(--inkt);
	font: inherit;
	font-size: 0.86rem;
	cursor: pointer;
}
.ti-filter:hover { border-color: var(--inkt); }
.ti-filter.is-actief { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }

.ti-tool__opmaat { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 16px; align-items: end; margin-bottom: 18px; }
@media (max-width: 640px) { .ti-tool__opmaat { grid-template-columns: 1fr; } }
.ti-tool__opmaat-uitkomst { margin: 0; font-size: 0.94rem; }

.ti-tool__uitkomst { margin: 10px 0 16px; padding: 22px 24px; background: var(--steen); border-left: 2px solid var(--messing); }
.ti-tool__uitkomst:empty { display: none; }
.ti-tool__uitkomst p { margin-bottom: 0.6em; max-width: 78ch; }
.ti-tool__uitkomst p:last-child { margin-bottom: 0; }
.ti-tool__uitkomst strong { color: var(--inkt); font-weight: 600; }
.ti-tool__uitkomst ol, .ti-tool__uitkomst ul { margin: 0.4em 0 0.8em; padding-left: 1.3em; max-width: 78ch; }
.ti-tool__uitkomst li { margin-bottom: 0.25em; }
.ti-tool__uitkomstkop { margin: 1.3em 0 0.5em; font-size: 1rem; }
.ti-tool__melding { color: var(--inkt); border-left: 2px solid var(--messing); padding-left: 12px; }
.ti-tool__klein { font-size: 0.86em; color: var(--inkt-zacht); }
.ti-tool__notitie { margin-top: 12px; padding: 10px 14px; border-left: 2px solid var(--messing); background: var(--wit); }
.ti-tool__waarschuwing { margin: 14px 0; padding: 12px 16px; border: 1px solid var(--lijn); border-left: 2px solid var(--messing); background: var(--wit); }

.ti-tool__waarschuwing p { margin: 0; }
.ti-tool__waarschuwing strong { color: var(--inkt); }
.ti-tool__oordeel { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 2px solid var(--lijn); }
.ti-tool__oordeel.is-goed { border-left-color: var(--inkt); }
.ti-tool__oordeel.is-let-op { border-left-color: var(--messing); }
.ti-tool__oordeel.is-te-warm, .ti-tool__oordeel.is-te-koud { border-left-color: var(--contrast-donker); }
.ti-tool__vergelijk { margin-top: 12px; }
.ti-tool__vergelijk summary { cursor: pointer; font-weight: 600; color: var(--inkt); padding: 6px 0; }

/* Tabellen in de uitkomst. Op een telefoon worden het blokjes per rij (zie de mediaquery hieronder). */
.ti-uitkomst__tabel { margin: 10px 0 6px; overflow-x: auto; max-width: 880px; }
.ti-uitkomsttabel { width: 100%; border-collapse: collapse; font-size: 0.92em; line-height: 1.45; font-variant-numeric: tabular-nums; }
.ti-uitkomsttabel th, .ti-uitkomsttabel td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; font-weight: 400; }
.ti-uitkomsttabel th:last-child, .ti-uitkomsttabel td:last-child { padding-right: 0; }
.ti-uitkomsttabel thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-licht); border-bottom-color: var(--inkt); }
.ti-uitkomsttabel tbody th[scope="row"] { color: var(--inkt); }
.ti-uitkomsttabel tr.is-groep th { padding-top: 16px; font-weight: 600; font-size: 0.88em; color: var(--inkt); }
.ti-uitkomsttabel tr.is-gekozen th, .ti-uitkomsttabel tr.is-gekozen td { font-weight: 600; }
.ti-uitkomsttabel tfoot th, .ti-uitkomsttabel tfoot td { font-weight: 600; border-bottom: 0; }
.ti-uitkomsttabel--paren tbody th[scope="row"] { width: 52%; }

.ti-tool [hidden] { display: none !important; }
.ti-veld { min-width: 0; }
.ti-veld__hulp { font-size: 0.8rem; line-height: 1.4; color: var(--inkt-licht); }
.ti-veld__hulp:empty { display: none; }
.ti-veld--rij { grid-column: 1 / -1; max-width: 520px; }
.ti-tool__voorbeelden { margin-top: 12px; font-size: 0.9rem; }
.ti-tool__voorbeelden summary { cursor: pointer; font-weight: 600; color: var(--inkt); padding: 6px 0; }
.ti-tool__voorbeelden ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ti-tool__voorbeelden li { display: flex; gap: 10px; align-items: baseline; color: var(--inkt-zacht); }
.ti-knopje { flex: none; min-width: 84px; padding: 4px 10px; border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--wit); color: var(--inkt); font: inherit; font-weight: 600; cursor: pointer; }
.ti-knopje:hover { border-color: var(--inkt); }
.ti-vinkje.is-vast { cursor: default; color: var(--inkt-zacht); }
.ti-vinkje.is-vast input { accent-color: var(--inkt-licht); }
.ti-vinkjes--los { display: block; margin-top: 14px; max-width: 640px; }

.ti-tooltabel tr[hidden] { display: none; }
.ti-tool .ti-tabel__schuif { margin-bottom: 14px; }
.ti-tooltabel th, .ti-tooltabel td { vertical-align: top; }
.ti-tooltabel tbody th { min-width: 9em; }

.ti-tool__subkop { margin: 0 0 0.5em; font-size: 1.02rem; }
.ti-tool__minikop { margin: 1em 0 0.3em; font-size: 0.94rem; }
.ti-tool__blok { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); font-size: 0.94rem; }
.ti-tool__blok p, .ti-tool__blok ul, .ti-tool__blok ol { max-width: 78ch; }
.ti-tool__blok > summary { cursor: pointer; font-weight: 600; color: var(--inkt); padding: 6px 0; }
.ti-tool__blokinhoud { padding-top: 8px; }

.ti-tool__aannames { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); font-size: 0.88rem; color: var(--inkt-zacht); }
.ti-tool__aannames > summary, .ti-tool__tarieven summary { cursor: pointer; font-weight: 600; color: var(--inkt); padding: 6px 0; }
.ti-tool__aannames ul, .ti-tool__aannames ol { margin: 0 0 1em; padding-left: 1.3em; max-width: 78ch; }
.ti-tool__aannames li { margin-bottom: 0.35em; }
.ti-tool__aannames .ti-tool__subkop { margin-top: 0.6em; color: var(--inkt); }
.ti-tool__bronnen a { overflow-wrap: anywhere; }
.ti-tool__datum { color: var(--inkt-licht); }
.ti-tool__peildatum { margin: 0; }
.ti-tool__tarieven { margin: 12px 0 16px; }
.ti-tool__tarieven ol { margin: 6px 0 10px; padding-left: 1.3em; font-size: 0.9rem; color: var(--inkt-zacht); max-width: 78ch; }
.ti-tool__tarieven .ti-velden { margin-top: 10px; }
.ti-tool__meer { margin: 6px 0 0; font-size: 0.9rem; }
.ti-tool__meer a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

@media (max-width: 640px) {
	.ti-tool { padding: 22px 16px 14px; }
	.ti-tool__uitkomst { padding: 16px 14px; }

	/* Uitkomsttabellen en opzoektabellen als blokjes per rij. */
	.ti-uitkomsttabel, .ti-uitkomsttabel tbody, .ti-uitkomsttabel tfoot, .ti-uitkomsttabel tr, .ti-uitkomsttabel th, .ti-uitkomsttabel td,
	.ti-tool .ti-tabel__schuif .ti-tooltabel, .ti-tooltabel tbody, .ti-tooltabel tr, .ti-tooltabel tbody th, .ti-tooltabel td { display: block; width: auto; }
	.ti-uitkomsttabel thead, .ti-tooltabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.ti-uitkomsttabel tr { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
	.ti-uitkomsttabel tr.is-groep { padding: 12px 0 0; border-bottom: 0; }
	.ti-uitkomsttabel th, .ti-uitkomsttabel td { padding: 0; border-bottom: 0; white-space: normal !important; text-align: left !important; }
	.ti-uitkomsttabel--paren tbody th[scope="row"] { width: auto; }
	.ti-uitkomsttabel tbody th[scope="row"], .ti-uitkomsttabel tfoot th { margin-bottom: 2px; }
	.ti-uitkomsttabel td + td { margin-top: 3px; }
	.ti-uitkomsttabel td[data-label]::before, .ti-tooltabel td[data-label]::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkt-licht); }
	/* Korte waarden: label en waarde op één regel. */

	.ti-tool .ti-tabel__schuif { overflow-x: visible; }
	.ti-tooltabel tbody tr { padding: 12px 0; border-bottom: 1px solid var(--lijn-zacht); }
	.ti-tooltabel tbody tr:last-child { border-bottom: 0; }
	.ti-tooltabel tbody th, .ti-tooltabel td { padding: 0 !important; border-bottom: 0 !important; }
	.ti-tooltabel tbody th { margin-bottom: 6px; font-size: 1.02em; }
	.ti-tooltabel td { padding: 3px 0 !important; }
	.ti-tooltabel td:empty { display: none; }
}

/* ---------------------------------------------------------------- Home */

.ti-home { padding-bottom: clamp(88px, 10vw, 144px); }

/* Opening: een grote kop en het zoekveld, daaronder een rustige foto over de volle breedte. */
.ti-home__opening { padding-top: clamp(40px, 6vw, 96px); }
.ti-home__kop {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: end;
	padding-bottom: clamp(36px, 5vw, 72px);
}
.ti-home__kop h1 { margin: 0; font-size: clamp(2.75rem, 1.4rem + 4.3vw, 5.25rem); line-height: 1; letter-spacing: -0.022em; }
.ti-home__intro .ti-lead { font-size: 1.12em; }
@media (max-width: 640px) { .ti-lead, .ti-home__intro .ti-lead { font-size: 1.06em; } }
.ti-home__intro .ti-zoekveld--groot { max-width: none; }
.ti-home__beeldvak { max-width: 1680px; margin-inline: auto; }
.ti-home__beeld { margin: 0; }
.ti-home__beeld img { aspect-ratio: 21 / 9; max-height: 76vh; }
.ti-home__snel {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 0;
	margin: 0;
	padding: 22px 0;
	border-bottom: 1px solid var(--lijn-zacht);
	font-size: 0.9rem;
	line-height: 1.5;
}
.ti-home__snel span { margin-right: 20px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inkt-licht); }
.ti-home__snel a { color: var(--inkt); text-decoration: none; padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--lijn); }
.ti-home__snel a:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ti-home__snel a:hover { text-decoration: underline; text-decoration-color: var(--messing); }
@media (max-width: 900px) {
	.ti-home__kop { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.ti-home__beeld img { aspect-ratio: 4 / 3; }
	.ti-home__snel { display: block; }
	.ti-home__snel span { display: block; margin-bottom: 8px; }
	.ti-home__snel a { display: inline; padding-right: 10px; margin-right: 8px; line-height: 1.9; }
}

/* De kop van een sectie: een inktlijn erboven, de kop links en eventueel een zin rechts. */
.ti-sectiekop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 40px;
	margin-bottom: clamp(32px, 4vw, 52px);
	padding-top: 22px;
	border-top: 1px solid var(--inkt);
}
.ti-sectiekop h2 { margin: 0; font-size: clamp(2rem, 1.5rem + 1.7vw, 3rem); }
.ti-sectiekop p { margin: 0; max-width: 440px; color: var(--inkt-zacht); font-size: 0.95rem; }

/* Onderwerpen als redactioneel raster: per rij een brede en een smalle foto, elke rij andersom. */
.ti-home__register { padding-top: clamp(72px, 9vw, 136px); }
.ti-register {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: clamp(56px, 6vw, 96px);
	align-items: start;
}
.ti-register__item { margin: 0; min-width: 0; }
.ti-register__item--groot { grid-column: span 7; }
.ti-register__item--klein { grid-column: span 5; }
.ti-register__beeld { display: block; }
.ti-register__beeld .ti-beeld { margin: 0 0 22px; }
.ti-register__item--groot .ti-beeld img, .ti-register__item--groot .ti-beeld__vlak { aspect-ratio: 4 / 3; }
.ti-register__item--klein .ti-beeld img, .ti-register__item--klein .ti-beeld__vlak { aspect-ratio: 4 / 5; }
.ti-register__tekst { max-width: 560px; }
.ti-register__item h3 { margin: 0 0 8px; font-family: var(--kop); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.35rem); line-height: 1.06; letter-spacing: -0.012em; }
.ti-register__item h3 a { color: var(--inkt); text-decoration: none; }
.ti-register__item h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.ti-register__item p { margin: 0 0 14px; color: var(--inkt-zacht); font-size: 0.97rem; }
.ti-register__subs { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; font-size: 0.86rem; }
.ti-register__subs li { margin: 0; }
.ti-register__subs a { color: var(--inkt); text-decoration-color: var(--lijn); }
.ti-register__subs a:hover { text-decoration-color: var(--messing); }
@media (max-width: 860px) {
	.ti-register { grid-template-columns: minmax(0, 1fr); }
	.ti-register__item--groot, .ti-register__item--klein { grid-column: auto; }
	.ti-register__item--klein .ti-beeld img, .ti-register__item--klein .ti-beeld__vlak { aspect-ratio: 4 / 3; }
}

/* De rekenhulpen op een steentint. */
.ti-home__tools { margin: clamp(88px, 10vw, 144px) 0 0; padding: clamp(56px, 7vw, 104px) 0; background: var(--steen); }
.ti-home__toolsraster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.ti-home__toolsraster .ti-sectiekop { display: block; align-self: start; margin: 0; }
.ti-home__toolsraster .ti-sectiekop p { margin-top: 18px; }
.ti-home__tools .ti-toolkaarten { margin: 0; }
.ti-home__tools .ti-toolkaart { border-top-color: var(--lijn); }
@media (max-width: 1000px) { .ti-home__toolsraster { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.ti-home__pillars, .ti-home__blog { padding-top: clamp(88px, 10vw, 144px); }

/* Hoe we werken: een leeskolom die rechts van het midden begint. */
.ti-home__werkwijze { padding-top: clamp(88px, 10vw, 144px); }
.ti-home__werkwijze-tekst { max-width: var(--leesbreedte); padding-top: 22px; border-top: 1px solid var(--inkt); }
.ti-home__werkwijze-tekst > section { margin-top: 2.4em; }
.ti-home__werkwijze-tekst > section:first-child { margin-top: 0; }
@media (min-width: 1000px) { .ti-home__werkwijze-tekst { margin-left: calc(100% * 5 / 12); } }

/* Nieuw op de blog: één lijst, titel links en de zin rechts. */
.ti-rijen--blog { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
	.ti-rijen--blog .ti-rij__tekst { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: baseline; }
}

/* ---------------------------------------------------------------- Blog */

.ti-berichten { list-style: none; padding: 0; margin: 24px 0; max-width: 920px; }
.ti-bericht { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding: 26px 0; border-top: 1px solid var(--lijn-zacht); margin: 0; }
.ti-bericht:first-child { border-top-color: var(--inkt); }
.ti-bericht:not(:has(.ti-bericht__beeld)) { grid-template-columns: minmax(0, 1fr); }
.ti-bericht__beeld img { aspect-ratio: 3 / 2; object-fit: cover; }
.ti-bericht h2 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.9rem); margin-bottom: 6px; }
.ti-bericht h2 a { color: var(--inkt); text-decoration: none; }
.ti-bericht h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 640px) { .ti-bericht { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.ti-bericht__tekst { max-width: var(--leesbreedte); }
.ti-paginering { display: flex; gap: 8px; flex-wrap: wrap; }
.ti-paginering .page-numbers { padding: 6px 12px; border: 1px solid var(--lijn); border-radius: var(--straal); color: var(--inkt); text-decoration: none; font-size: 0.9rem; }
.ti-paginering .current { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }

.ti-zoekpagina { max-width: 980px; }
.ti-zoekpagina h1 { margin-top: 0.6em; }
.ti-zoekpagina__aantal { color: var(--inkt-zacht); }

/* ---------------------------------------------------------------- Voet */

.ti-voet { background: var(--voet); color: var(--voet-tekst); font-size: 0.92rem; }
.ti-voet a { color: var(--voet-link); text-decoration: none; }
.ti-voet a:hover { color: var(--voet-link); text-decoration: underline; text-decoration-color: var(--messing); }
.ti-voet a:focus-visible { outline-color: var(--voet-link); }
.ti-voet__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 48px;
	padding-top: clamp(56px, 7vw, 96px);
	padding-bottom: 48px;
}
@media (max-width: 900px) { .ti-voet__raster { grid-template-columns: 1fr 1fr; } .ti-voet__merk { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ti-voet__raster { grid-template-columns: 1fr; gap: 36px; } }
.ti-logo--voet { color: var(--voet-link); }
.ti-logo--voet .ti-woordnaam { height: 36px; }
.ti-logo--voet .ti-woordnaam__blad { fill: #7fb86d; }
.ti-logo--voet:hover { text-decoration: none; }
.ti-voet__merk p { margin-top: 22px; max-width: 400px; color: var(--voet-zacht); line-height: 1.65; }
.ti-voet__kop { margin: 0 0 16px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--voet-accent); }
.ti-voet ul { list-style: none; margin: 0; padding: 0; }
.ti-voet li { margin: 0 0 10px; line-height: 1.4; }
.ti-voet__onder { padding-bottom: 34px; font-size: 0.8rem; color: var(--voet-onder); }
.ti-voet__onder::before { content: ""; display: block; height: 1px; margin-bottom: 24px; background: var(--voet-lijn); }
.ti-voet__onder p { max-width: 860px; }

/* ---------------------------------------------------------------- Print */

@media print {
	.ti-kop, .ti-voet, .ti-zijbalk, .ti-verwant, .ti-kruimels, .ti-tool, .ti-overslaan { display: none !important; }
	body { background: var(--print-papier); font-size: 11pt; }
	.ti-artikel__raster { display: block; }
	a { color: inherit; text-decoration: none; }
	.ti-vraag { break-inside: avoid; }
	details > *:not(summary) { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}


/* ---------------------------------------------------------------- Praktijkcases en plantgegevens */

.ti-praktijk { margin: clamp(32px, 5vw, 56px) 0; }
.ti-praktijk__case { border-left: 2px solid var(--contrast); padding: 2px 0 2px 20px; margin: 0 0 26px; }
.ti-praktijk__case h3 { margin: 0 0 6px; font: 600 1.05rem/1.4 var(--tekst); color: var(--inkt); }
.ti-praktijk__case p { margin: 0 0 8px; }
.ti-plantgegevens { margin: clamp(24px, 4vw, 40px) 0; }
.ti-plantgegevens dl { margin: 0; border-top: 1px solid var(--lijn); }
.ti-plantgegevens dl > div { display: flex; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--lijn-zacht); }
.ti-plantgegevens dt { flex: 0 0 34%; color: var(--inkt-licht); }
.ti-plantgegevens dd { margin: 0; flex: 1; color: var(--inkt); }
@media (max-width: 520px) {
	.ti-plantgegevens dl > div { display: block; }
	.ti-plantgegevens dt { font-size: 0.9rem; margin-bottom: 2px; }
}

/* ------------------------------------------------ Kalenders en rekenhulpen van de tuin */

/* Een balk van twaalf maanden. De beginletter staat in elk vak; een gevuld vak is een maand waarin het kan. */
.ti-maandbalk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; max-width: 520px; }
.ti-maandbalk__m {
	display: block;
	padding: 6px 0 5px;
	text-align: center;
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1;
	color: var(--inkt-zacht);
	background: var(--steen);
	border-bottom: 2px solid var(--lijn);
}
.ti-maandbalk__m.is-aan { color: var(--wit); background: var(--bal, var(--basis)); border-bottom-color: var(--bal, var(--basis)); }
.ti-maandbalk__m.is-markeer { outline: 2px solid var(--inkt); outline-offset: 1px; }
.ti-balkrij { --bal: var(--basis); margin: 0 0 12px; }
.ti-balkrij.is-voor { --bal: var(--inkt-licht); }
.ti-balkrij.is-buiten { --bal: var(--basis); }
.ti-balkrij.is-uit { --bal: var(--contrast); }
.ti-balkrij.is-oogst { --bal: var(--inkt); }
.ti-balkrij.is-snoei { --bal: var(--basis); }
.ti-tool__uitkomst .ti-balkrij__tekst { margin: 0 0 5px; font-size: 0.94rem; }
.ti-balkrij.is-leeg .ti-balkrij__tekst { color: var(--inkt-zacht); margin-bottom: 8px; }

.ti-tool__uitkomst .ti-legenda { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 0.86rem; }
.ti-tool__uitkomst .ti-legenda li { display: flex; align-items: center; gap: 8px; margin: 0; }
.ti-legenda li::before { content: ""; flex: none; width: 20px; height: 6px; background: var(--bal, var(--basis)); }
.ti-legenda li.is-voor { --bal: var(--inkt-licht); }
.ti-legenda li.is-buiten { --bal: var(--basis); }
.ti-legenda li.is-uit { --bal: var(--contrast); }
.ti-legenda li.is-oogst { --bal: var(--inkt); }

/* Een gewas of plant in de kalender: een dunne lijn erboven, de naam als kop en de feiten in gewone zinnen. */
.ti-kalenderitem { padding: 16px 0 6px; border-top: 1px solid var(--lijn); }
.ti-kalenderitem__naam { margin: 0 0 10px; font-family: var(--kop); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.ti-kalenderitem__groep { margin-left: 8px; font-family: var(--tekst); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-licht); }
.ti-tool__uitkomst .ti-kalenderitem__feit { margin: 0 0 0.45em; font-size: 0.94rem; }
.ti-klussen { margin: 0 0 12px; }
.ti-klussen__kop { margin: 1.1em 0 0.3em; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inkt-zacht); }

.ti-knop { padding: 9px 18px; border: 1px solid var(--inkt); border-radius: var(--straal); background: var(--wit); color: var(--inkt); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.ti-knop:hover { background: var(--inkt); color: var(--wit); }

.ti-tool__onbekend { color: var(--inkt-licht); }
.ti-tool__latijn { display: block; font-size: 0.82em; font-style: italic; font-weight: 400; color: var(--inkt-licht); }

/* Onderdelen van de kostenrekenhulp: een vinkje, en pas bij een vinkje de velden. */
.ti-onderdelen { display: grid; grid-template-columns: minmax(0, 1fr); }
.ti-onderdeel { min-width: 0; padding: 12px 0; border-top: 1px solid var(--lijn-zacht); }
.ti-onderdeel:first-child { border-top: 0; padding-top: 0; }
.ti-onderdeel .ti-veld__hulp { margin: 4px 0 0 28px; }
.ti-velden--onderdeel select, .ti-velden--onderdeel input { max-width: 100%; }
.ti-velden--onderdeel { margin-top: 12px; padding-left: 28px; max-width: 700px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Tabellen in de uitkomst en opzoektabellen: kolombreedtes zodat tekst nooit in een smalle strook staat. */
@media (min-width: 641px) {
	.ti-uitkomsttabel--planten thead th:nth-child(1) { width: 24%; }
	.ti-uitkomsttabel--planten thead th:nth-child(2), .ti-uitkomsttabel--planten thead th:nth-child(3) { width: 15%; }
	.ti-uitkomsttabel--planten thead th:nth-child(6) { width: 22%; }
	.ti-uitkomsttabel--buren thead th:nth-child(1) { width: 26%; }
	.ti-uitkomsttabel--gazon thead th:nth-child(1) { width: 28%; }
	.ti-uitkomsttabel--gazon thead th:nth-child(2) { width: 30%; }
	.ti-uitkomsttabel--tuinkosten td:nth-child(3), .ti-uitkomsttabel--tuinkosten tfoot td:nth-child(3) { white-space: nowrap; }
	.ti-uitkomsttabel--maanden td:not(:first-child), .ti-uitkomsttabel--maanden tfoot td { font-variant-numeric: tabular-nums; }
	.ti-uitkomsttabel--maanden thead th:not(:first-child), .ti-uitkomsttabel--maanden td:not(:first-child) { text-align: right; }
	.ti-tooltabel--hagen thead th:nth-child(1), .ti-tooltabel--mest thead th:nth-child(1), .ti-tooltabel--kosten thead th:nth-child(1) { width: 32%; }
	.ti-tooltabel--hagen thead th:nth-child(2), .ti-tooltabel--mest thead th:nth-child(2) { width: 16%; }
	.ti-tooltabel--gazon thead th:nth-child(1) { width: 28%; }
	.ti-tooltabel--vormen thead th:nth-child(1) { width: 32%; }
}
@media (max-width: 640px) {
	.ti-velden--onderdeel, .ti-onderdeel .ti-veld__hulp { padding-left: 0; margin-left: 0; }
	.ti-maandbalk { gap: 1px; }
	.ti-maandbalk__m { font-size: 0.7rem; }
}