/*
 * Secties uit het v5-ontwerp. Alleen wat theme.json en de blokinstellingen niet kunnen:
 * panelen met verloop, overlap, lijnen tussen kolommen, vinklijsten en de tabs als pillen.
 * Alle waarden komen uit tokens in theme.json.
 */

/* Panelen (hero, medewerker-app, slot-CTA) */
.tb-paneel {
	border-radius: var(--wp--custom--radius--paneel);
	overflow: hidden;
	position: relative;
}

.tb-paneel--licht {
	background: radial-gradient(120% 140% at 55% -5%, var(--wp--preset--color--wit) 0%, var(--wp--preset--color--teal-100) 100%);
}

.tb-paneel--donker {
	background: radial-gradient(90% 120% at 10% 30%, var(--wp--custom--color--ink--600) 0%, var(--wp--preset--color--ink-700) 70%);
}

@media (max-width: 781px) {
	.tb-paneel {
		border-radius: var(--wp--custom--radius--blok);
	}
}

/* Tegels achter productbeeld */
.tb-tegel {
	background: linear-gradient(180deg, var(--wp--preset--color--teal-100) 0%, var(--wp--preset--color--achtergrond) 100%);
	border-radius: var(--wp--custom--radius--blok);
	overflow: hidden;
}

.tb-tegel--grijs {
	background: linear-gradient(180deg, var(--wp--preset--color--vlak) 0%, var(--wp--preset--color--achtergrond) 100%);
}

.tb-tegel img,
.tb-paneel img {
	display: block;
}

/* Vinklijst */
ul.tb-vinklijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.tb-vinklijst li {
	padding-left: 2.25rem;
	position: relative;
}

ul.tb-vinklijst li + li {
	margin-top: var(--wp--preset--spacing--30);
}

ul.tb-vinklijst li::before {
	background-color: var(--wp--preset--color--accent-zacht);
	border-radius: 50%;
	content: "";
	height: 1.5rem;
	left: 0;
	position: absolute;
	top: 0.1rem;
	width: 1.5rem;
}

ul.tb-vinklijst li::after {
	background-color: var(--wp--preset--color--teal-700);
	content: "";
	height: 0.875rem;
	left: 0.3125rem;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	position: absolute;
	top: 0.4125rem;
	width: 0.875rem;
}

.tb-op-donker ul.tb-vinklijst li::before {
	background-color: rgba(255, 255, 255, 0.08);
}

.tb-op-donker ul.tb-vinklijst li::after {
	background-color: var(--wp--preset--color--teal-300);
}

/* Minlijst (Excel-paneel) */
ul.tb-vinklijst.tb-minlijst li::before {
	background-color: var(--wp--preset--color--wit);
}

ul.tb-vinklijst.tb-minlijst li::after {
	background-color: var(--wp--custom--color--error--700);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* Genummerde lijst met lijnen (probleem) */
.tb-regels > * {
	margin-block-start: 0 !important;
	padding-block: var(--wp--preset--spacing--50);
}

/* Alleen een lijn tussen de regels, niet erboven en eronder (anti-slop §11). */
.tb-regels > * + * {
	border-top: 1px solid var(--wp--preset--color--rand);
}

.tb-nummer {
	color: var(--wp--preset--color--teal-700);
	font-weight: var(--wp--custom--font-weight--bold);
	min-width: 1.75rem;
}

/* Kolommen met verticale lijnen (modules) */
@media (min-width: 782px) {
	.tb-kolommen-lijnen > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--rand);
		padding-left: var(--wp--preset--spacing--60);
	}
}

@media (max-width: 781px) {
	.tb-kolommen-lijnen > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--rand);
		padding-top: var(--wp--preset--spacing--50);
	}
}

/* Icoontegel */
/* Icoon voor een kop, overal dezelfde stijl: een vast vlak van 40px dat nooit krimpt, en een vaste
   afstand van spacing-40 tot de tekst. Zonder flex: none duwt een lange kop het vlak in elkaar en
   plakt het icoon tegen de titel. */
.tb-icoon {
	flex: none;
	margin: 0 !important;
}

.wp-block-group.is-layout-flex:has(> .tb-icoon),
.wp-block-group.is-layout-flex:has(> .tb-probleem-icoon) {
	align-items: flex-start;
	column-gap: var(--wp--preset--spacing--40);
}

.tb-icoon img {
	background: var(--wp--preset--color--accent-zacht);
	border-radius: var(--wp--custom--radius--lg);
	box-sizing: content-box;
	height: 1.25rem;
	padding: 0.625rem;
	width: 1.25rem;
}

/* Tabs als pillen */
.wp-block-tabs.is-style-pillen .wp-block-tab-list {
	background: var(--wp--preset--color--vlak);
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	justify-content: center;
	margin-inline: auto;
	padding: 0.375rem;
	width: fit-content;
}

.wp-block-tabs.is-style-pillen .wp-block-tab-list button {
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--tekst-zacht);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	padding: 0.625rem 1.125rem;
}

.wp-block-tabs.is-style-pillen .wp-block-tab-list button {
	text-decoration: none;
	transition: background-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
}

/* Standaardstijl zet een streep onder de actieve tab via ::before: bij pillen niet nodig */
.wp-block-tabs.is-style-pillen .wp-block-tab-list button::before {
	display: none;
}

/* Zachte overgang tussen tabpanelen */
.wp-block-tabs.is-style-pillen:focus-within .wp-block-tab-panel:not([hidden]),
.tb-platform--gekoppeld .wp-block-tabs.is-style-pillen .wp-block-tab-panel:not([hidden]) {
	animation: tb-tab-in 300ms ease both;
}

@keyframes tb-tab-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-tabs.is-style-pillen .wp-block-tab-list button {
		transition: none;
	}

	.wp-block-tabs.is-style-pillen:focus-within .wp-block-tab-panel:not([hidden]),
	.tb-platform--gekoppeld .wp-block-tabs.is-style-pillen .wp-block-tab-panel:not([hidden]) {
		animation: none;
	}
}

.wp-block-tabs.is-style-pillen .wp-block-tab-list button[aria-selected="true"] {
	background: var(--wp--preset--color--wit);
	box-shadow: var(--wp--preset--shadow--sm);
	color: var(--wp--preset--color--ink-700);
}

.wp-block-tabs.is-style-pillen .wp-block-tab-list button:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--teal-700);
	outline-offset: var(--wp--custom--focus--offset);
}

@media (max-width: 781px) {
	.wp-block-tabs.is-style-pillen .wp-block-tab-list {
		border-radius: var(--wp--custom--radius--xl);
	}
}

/* Aanbod: kaarten met één object */
.tb-object {
	background: var(--wp--preset--color--wit);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--md);
	margin-inline: auto;
	width: fit-content;
}

.tb-label {
	border-radius: var(--wp--custom--radius--sm);
	display: inline-block;
	padding: 0.2rem 0.6rem;
}

/* Prijs: twee panelen met telefoon ertussen */
.tb-prijs {
	position: relative;
}

.tb-prijs__telefoon {
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-8deg);
	width: min(17rem, 21%);
	z-index: 2;
}

.tb-prijs .tb-prijs__starten {
	padding-right: calc(var(--wp--preset--spacing--70) + 6rem) !important;
}

.tb-prijs .tb-prijs__bedrag {
	padding-left: calc(var(--wp--preset--spacing--70) + 6rem) !important;
}

/* Het prijspaneel is licht (eigenaar 23-10-2026): het ene donkere vlak per pagina is het blok
   "Geen appjes…". Een rand houdt het witte paneel zichtbaar op de witte sectie. */
.tb-prijs .tb-prijs__bedrag {
	border: 1px solid var(--wp--preset--color--rand);
	border-left: 0;
}

@media (max-width: 781px) {
	/* Gestapeld zijn het twee losse panelen en geen twee helften van een naad, dus
	   de telefoon gaat ertussen in plaats van eronder. display: contents haalt de
	   kolomwikkel weg zodat beide panelen en de telefoon broers en zussen worden. */
	.tb-prijs {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.tb-prijs > .wp-block-columns {
		display: contents;
	}

	.tb-prijs .wp-block-column {
		flex: 0 0 auto;
		width: 100%;
	}

	.tb-prijs .wp-block-column:first-child {
		order: 1;
	}

	.tb-prijs__telefoon {
		left: auto;
		margin: -2.5rem auto;
		order: 2;
		position: relative;
		top: auto;
		transform: rotate(-6deg);
		width: 52%;
		z-index: 2;
	}

	.tb-prijs .wp-block-column:last-child {
		order: 3;
	}

	.tb-prijs .tb-prijs__bedrag {
		border-left: 1px solid var(--wp--preset--color--rand);
	}

	.tb-prijs .tb-prijs__starten,
	.tb-prijs .tb-prijs__bedrag {
		border-radius: var(--wp--custom--radius--xl) !important;
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}

	/* Zonder telefoon ernaast hoeft de prijs niet meer naar rechts uit te wijken. */
	.tb-prijs .tb-prijs__bedrag {
		align-items: flex-start;
		text-align: left;
	}
}

/* Excel: twee panelen met motief over de naad */
.tb-vergelijking {
	position: relative;
}

.tb-vergelijking__motief {
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15rem;
	z-index: 2;
}

@media (max-width: 781px) {
	.tb-vergelijking__motief {
		display: none;
	}
}

/* Review-stapel */
.tb-review {
	box-shadow: var(--wp--preset--shadow--lg);
}

/* Slot-CTA: decoratie links en rechts */
.tb-cta__decor {
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 14rem;
}

.tb-cta__decor--links {
	left: var(--wp--preset--spacing--50);
}

.tb-cta__decor--rechts {
	right: var(--wp--preset--spacing--50);
}

@media (max-width: 1023px) {
	.tb-cta__decor {
		display: none;
	}
}

/* FAQ: accordion als kaarten. De kaart zelf heeft geen padding: die zit op de knop, zodat de
   hele dichte kaart klikbaar is (besluit eigenaar 26-10-2026, een klik naast de tekst deed
   eerder niets). Open gaat de knop terug naar 0.5rem onder en krijgt de kaart padding onder. */
.tb-faq .wp-block-accordion-item {
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--wp--custom--radius--xl);
	margin-block-start: var(--wp--preset--spacing--30) !important;
	padding: 0;
}

.tb-faq .wp-block-accordion-item.is-open {
	background: var(--wp--preset--color--achtergrond);
	padding-block-end: var(--wp--preset--spacing--40);
}

.tb-faq .wp-block-accordion-heading {
	/* De maat staat in assets/css/typografie.css, bij de compacte reeksen. */
	margin: 0;
}

.tb-faq .wp-block-accordion-heading__toggle {
	padding: var(--wp--preset--spacing--50);
}

.tb-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
	padding-block-end: 0.5rem;
}

/* Geen streep onder de vraag bij hover (besluit eigenaar 26-10-2026); de cursor en het
   plusje zijn de aanwijzing. */
.tb-faq .wp-block-accordion-heading__toggle:is(:hover, :focus) {
	text-decoration: none;
}

/* Het paneel hoort bij de vraag erboven. De ruimte wordt hier uit de kopgrootte
   berekend, niet uit `em`: dat zou anders tegen de tekstgrootte van het paneel
   afgezet worden en te krap uitvallen. */
.tb-faq .wp-block-accordion-panel {
	margin-block-start: max(0.5rem, calc(var(--wp--preset--font-size--lg) * 0.55));
	padding-inline: var(--wp--preset--spacing--50);
}

.tb-faq .wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--teal-700);
}

.tb-faq .wp-block-accordion-panel p {
	color: var(--wp--preset--color--tekst-zacht);
}

/* FAQ in blogs: het Rank Math FAQ-blok, als dezelfde kaarten maar altijd open. */
.rank-math-block.tb-faq .rank-math-list-item {
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--wp--custom--radius--xl);
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.rank-math-block.tb-faq .rank-math-question {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0;
}

.rank-math-block.tb-faq .rank-math-answer {
	color: var(--wp--preset--color--tekst-zacht);
	margin-block-start: max(0.5rem, calc(var(--wp--preset--font-size--lg) * 0.55));
}

.rank-math-block.tb-faq .rank-math-answer p {
	margin: 0;
}

/* Footer: groot woordmerk onderaan */
.tb-woordmerk {
	margin-bottom: -2.5vw !important;
	opacity: 0.08;
}

/* Secties sluiten op elkaar aan, zonder blokafstand tussen de volle-breedtesecties */
.wp-block-post-content > .alignfull,
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

/* Binnenruimte van panelen, meeschalend met het scherm */
.tb-paneel {
	padding-inline: clamp(1.25rem, 5.5vw, 5rem) !important;
}

/* Kleine punten onder de hero (bezwaren weg) */
.tb-moeite img {
	background: var(--wp--preset--color--wit);
	border-radius: 50%;
	box-sizing: content-box;
	height: 1.125rem;
	padding: 0.625rem;
	width: 1.125rem;
}

.tb-moeite p {
	line-height: 1.35;
}

/* Trustbar in de hero: feiten met de dubbele punt uit het woordmerk ertussen.
   De twee vierkantjes komen uit logo-timebutler.svg: vierkant 5,5725 breed,
   tussenruimte 9,72, dus verhouding 1 : 1,744. Bij 32px hoog is dat 8,547 en 14,906. */
.tb-trustbar {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(5, 1fr);
}

/* De standaard blockGap van de groep zet margin-block-start op elk kind behalve het
   eerste; in een grid schuift dat kolom 2 tot 5 omlaag. */
.tb-trustbar > * {
	margin-block-start: 0;
}

.tb-trustbar__feit {
	position: relative;
}

.tb-trustbar__feit p {
	margin: 0;
}

.tb-trustbar__feit p + p,
.tb-trustbar__feit .tb-sterren + p {
	margin-top: var(--wp--preset--spacing--10);
}

.tb-trustbar__feit + .tb-trustbar__feit::before {
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--teal-300) 0 8.547px,
		transparent 8.547px 23.453px,
		var(--wp--preset--color--teal-300) 23.453px 32px
	);
	content: "";
	height: 32px;
	left: calc(var(--wp--preset--spacing--50) / -2 - 4.27px);
	position: absolute;
	top: 0.25rem;
	width: 8.547px;
}

/* De sterren vullen dezelfde regelhoogte als een cijfer, zodat de labels uitlijnen. */
.tb-trustbar__feit--reviews .tb-sterren {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0;
	min-height: calc(var(--wp--preset--font-size--xl) * 1.15);
}

.tb-trustbar__feit--reviews .tb-sterren img {
	height: 1.375rem;
	width: auto;
}

@media (max-width: 781px) {
	.tb-trustbar {
		grid-template-columns: 1fr 1fr;
	}

	.tb-trustbar .tb-trustbar__feit p {
		text-align: left;
	}

	.tb-trustbar__feit--reviews {
		grid-column: 1 / -1;
	}

	.tb-trustbar__feit--reviews .tb-sterren {
		justify-content: flex-start;
		min-height: 0;
	}

	/* Alleen tussen de twee kolommen, niet tussen de rijen. */
	.tb-trustbar__feit + .tb-trustbar__feit::before {
		display: none;
	}

	.tb-trustbar__feit:nth-child(2n)::before {
		background: linear-gradient(
			to bottom,
			var(--wp--preset--color--teal-300) 0 6.41px,
			transparent 6.41px 17.59px,
			var(--wp--preset--color--teal-300) 17.59px 24px
		);
		content: "";
		display: block;
		height: 24px;
		left: calc(var(--wp--preset--spacing--50) / -2 - 3.2px);
		position: absolute;
		top: 0.2rem;
		width: 6.41px;
	}
}

/* Stappen met nummer */
.tb-stapnummer {
	align-items: center;
	background: var(--wp--preset--color--teal-700);
	border-radius: 50%;
	color: var(--wp--preset--color--wit);
	display: flex;
	flex: none;
	font-weight: var(--wp--custom--font-weight--bold);
	height: 2rem;
	justify-content: center;
	margin: 0;
	width: 2rem;
}

/* Tijd in plaats van een nummer (identiteitsmotief, docs/DESIGN.md): geen rondje, wel tabelcijfers
   zodat de tijden recht onder elkaar staan. */
.tb-stapnummer--tijd {
	background: none;
	border-radius: 0;
	color: var(--wp--preset--color--teal-700);
	font-variant-numeric: tabular-nums;
	font-weight: var(--wp--custom--font-weight--bold);
	white-space: nowrap;
	width: auto;
	min-width: 3.25rem;
}

/* Groot bedrag */
.tb-bedrag {
	font-size: clamp(4.5rem, 9vw, 6.5rem);
	font-weight: var(--wp--custom--font-weight--extrabold);
	letter-spacing: -0.04em;
	line-height: 1;
}

/* Links op donkere vlakken en in de footer */
.tb-op-donker a {
	color: var(--wp--preset--color--teal-300);
}

.tb-footer a {
	color: var(--wp--preset--color--wit);
	text-decoration: none;
}

.tb-footer a:hover {
	text-decoration: underline;
}

/* Kenmerken in regels (rooster): label en uitleg naast elkaar */
.tb-regel-label {
	flex: 0 0 10rem;
	margin: 0;
}

.tb-regel-tekst {
	flex: 1 1 16rem;
	margin: 0;
}

/* Footer: woordmerk op volle breedte, onderkant afgesneden */
.tb-footer .tb-woordmerk img {
	width: 100%;
}

/* Header: kleine CTA-knop */
.tb-knop-klein .wp-block-button__link {
	padding: 0.7rem 1.1rem;
}

@media (max-width: 781px) {
	.tb-header-acties {
		display: none !important;
	}
}

/* Tussen 600 en 1200px past het menu (vijf items, drie megamenu's) niet op een regel naast
   logo, inloggen en CTA. Core klapt het menu pas onder 600px in; hier gebeurt dat al onder
   1200px, zodat de navigatie altijd op een regel staat. */
@media (min-width: 600px) and (max-width: 1199.98px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Het hamburgericoon rechts, na inloggen en de CTA, waar je het verwacht. */
	header .tb-hoofdmenu {
		order: 3;
	}

	header .tb-header-acties {
		margin-left: auto;
		order: 2;
	}
}

/* Vinklijst iets ruimer, behalve direct onder een kop: daar bepaalt de kop de ruimte
   (zie assets/css/typografie.css), anders wint deze marge en valt het gat 3px groter uit. */
ul.tb-vinklijst {
	margin-block: var(--wp--preset--spacing--40) !important;
}

:is(h1, h2, h3, h4, h5, h6) + ul.tb-vinklijst {
	margin-block-start: 0 !important;
}

.tb-vergelijking h3 {
	margin-bottom: var(--tb-kop-ruimte-onder);
}

/* Tabs in de linkerkolom: pillen links uitgelijnd boven het beeld */
.tb-platform .wp-block-tabs.is-style-pillen .wp-block-tab-list {
	margin-bottom: var(--wp--preset--spacing--40);
	margin-inline: 0;
}

/* Warme tegel (zand) */
.tb-tegel--zand {
	background: var(--wp--preset--color--zand-100);
}

/* Zigzag: op mobiel altijd eerst het beeld */
@media (max-width: 781px) {
	.tb-zigzag-omgekeerd {
		flex-direction: column-reverse;
	}
}

/* Platform: onderdelen naast de tabs */
.tb-platform-item .tb-icoon {
	flex-shrink: 0;
	margin: 0;
}

.tb-platform-item h3 {
	margin: 0 0 var(--tb-kop-ruimte-onder);
	padding-top: 0.35rem;
}

.tb-platform-item p {
	margin: 0;
}

.tb-platform-link {
	margin-top: var(--wp--preset--spacing--30) !important;
}

/* Platform zonder tabs: de modules in kolommen met een haarlijn ertussen. Mobiel onder elkaar. */
.tb-platform-lijst--kolommen {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

.tb-platform-lijst--kolommen > .tb-platform-item {
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.tb-platform-lijst--kolommen > .tb-platform-item + .tb-platform-item {
	border-top: 1px solid var(--wp--preset--color--rand);
	padding-top: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.tb-platform-lijst--kolommen {
		gap: 0;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tb-platform-lijst--kolommen > .tb-platform-item {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.tb-platform-lijst--kolommen > .tb-platform-item:first-child {
		padding-left: 0;
	}

	.tb-platform-lijst--kolommen > .tb-platform-item + .tb-platform-item {
		border-left: 1px solid var(--wp--preset--color--rand);
		border-top: 0;
		padding-top: 0;
	}
}

.tb-platform--gekoppeld .tb-platform-item {
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 250ms ease;
}

.tb-platform--gekoppeld .tb-platform-item:hover {
	opacity: 0.8;
}

.tb-platform--gekoppeld .tb-platform-item.is-actief {
	opacity: 1;
}

.tb-platform--gekoppeld .tb-platform-item.is-actief .tb-icoon img {
	background: var(--wp--preset--color--teal-100);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--teal-300);
}

@media (prefers-reduced-motion: reduce) {
	.tb-platform--gekoppeld .tb-platform-item {
		transition: none;
	}
}

/* Header scrolt mee. Geen backdrop-filter: dat zou het mobiele menu (position: fixed) insluiten. */
.wp-site-blocks > header.wp-block-template-part {
	background: var(--wp--preset--color--achtergrond);
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

@supports (animation-timeline: scroll()) {
	.wp-site-blocks > header.wp-block-template-part {
		animation: tb-header-lijn linear both;
		animation-range: 0 5rem;
		animation-timeline: scroll();
	}

	@keyframes tb-header-lijn {
		to {
			box-shadow: 0 1px 0 var(--wp--preset--color--rand);
		}
	}
}

html {
	scroll-padding-top: 6rem;
}

/* Beeld dat op desktop doorloopt tot de rechterrand van het scherm (verlof) */
.tb-sectie-tot-rand {
	overflow-x: clip;
}

@media (min-width: 782px) {
	.tb-tot-rand {
		margin-right: calc(-1 * (var(--wp--style--root--padding-right) + max(0px, (100vw - 2 * var(--wp--style--root--padding-right) - 1200px) / 2)));
	}

	.tb-tot-rand img {
		width: 100%;
	}
}

/* Rooster: per kenmerk een app-kaart over het beeld, met voortgangsbalk */
.tb-rooster-beeld {
	position: relative;
}

.tb-rooster-beeld > .wp-block-image {
	margin: 0;
}

.tb-rooster-beeld > .tb-rooster-laag {
	bottom: -6%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: -4%;
	transform: translateY(12px) scale(0.98);
	transition: opacity 400ms ease, transform 400ms ease;
	width: 46%;
}

.tb-rooster:not(.tb-rooster--gekoppeld) .tb-rooster-laag:nth-child(2),
.tb-rooster-beeld > .tb-rooster-laag.is-actief {
	opacity: 1;
	transform: none;
}

.tb-rooster-stap {
	position: relative;
}

.tb-rooster--gekoppeld .tb-rooster-stap {
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 250ms ease;
}

.tb-rooster--gekoppeld .tb-rooster-stap:hover {
	opacity: 0.8;
}

.tb-rooster--gekoppeld .tb-rooster-stap.is-actief {
	opacity: 1;
}

.tb-platform--gekoppeld .tb-platform-item,
.tb-rooster--gekoppeld .tb-rooster-stap {
	position: relative;
}

.tb-platform--gekoppeld .tb-platform-item::before,
.tb-rooster--gekoppeld .tb-rooster-stap::before {
	background: var(--wp--preset--color--teal-700);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	top: -1px;
	transform: scaleX(0);
	transform-origin: left;
}

.tb-platform--gekoppeld .tb-platform-item.is-actief::before,
.tb-rooster--gekoppeld .tb-rooster-stap.is-actief::before {
	transform: scaleX(var(--tb-voortgang, 0));
	transition: transform 120ms linear;
}

@media (max-width: 781px) {
	.tb-rooster-beeld > .tb-rooster-laag {
		right: 0;
		width: 52%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tb-rooster-beeld > .tb-rooster-laag,
	.tb-rooster--gekoppeld .tb-rooster-stap {
		transition: none;
	}

	.tb-platform--gekoppeld .tb-platform-item.is-actief::before,
	.tb-rooster--gekoppeld .tb-rooster-stap.is-actief::before {
		transform: scaleX(1);
		transition: none;
	}
}

/* Vergelijkingstabel (traditioneel naast digitaal) */
.tb-vergelijkingstabel table {
	border-collapse: separate;
	border-spacing: 0;
}

.tb-vergelijkingstabel th,
.tb-vergelijkingstabel td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rand);
	font-size: var(--wp--preset--font-size--sm);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	text-align: left;
	vertical-align: top;
}

.tb-vergelijkingstabel thead th {
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--bold);
}

.tb-vergelijkingstabel thead th:last-child {
	background: var(--wp--preset--color--teal-100);
	border-top-left-radius: var(--wp--custom--radius--lg);
	border-top-right-radius: var(--wp--custom--radius--lg);
}

.tb-vergelijkingstabel tbody th {
	color: var(--wp--preset--color--tekst-zacht);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.tb-vergelijkingstabel tbody td:last-child {
	background: var(--wp--preset--color--teal-100);
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.tb-vergelijkingstabel tbody tr:last-child td:last-child {
	border-bottom-left-radius: var(--wp--custom--radius--lg);
	border-bottom-right-radius: var(--wp--custom--radius--lg);
}

.tb-vergelijkingstabel tbody tr:last-child th,
.tb-vergelijkingstabel tbody tr:last-child td {
	border-bottom: 0;
}

/* Normen uit de Arbeidstijdenwet */
.tb-normen table {
	border-collapse: separate;
	border-spacing: 0;
}

.tb-normen th,
.tb-normen td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rand);
	font-size: var(--wp--preset--font-size--sm);
	padding: var(--wp--preset--spacing--40) 0;
}

.tb-normen th {
	color: var(--wp--preset--color--tekst-zacht);
	font-weight: var(--wp--custom--font-weight--regular);
	text-align: left;
}

.tb-normen td {
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--semibold);
	text-align: right;
	white-space: nowrap;
}

.tb-normen tr:last-child th,
.tb-normen tr:last-child td {
	border-bottom: 0;
}

.tb-normen figcaption {
	color: var(--wp--preset--color--tekst-zacht);
	font-size: var(--wp--preset--font-size--xs);
}

@media (max-width: 781px) {
	/* Vaste kolombreedtes, anders breekt de eerste kolom woorden af */
	.tb-vergelijkingstabel table {
		table-layout: fixed;
		width: 100%;
	}

	.tb-vergelijkingstabel th,
	.tb-vergelijkingstabel td {
		font-size: var(--wp--preset--font-size--xs);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
	}

	.tb-vergelijkingstabel tr > *:first-child {
		width: 21%;
	}

	.tb-vergelijkingstabel tr > *:nth-child(2) {
		width: 32%;
	}
}

/* Methodetabel op /urenregistratie/inkloksysteem/
   Eigen component naast .tb-vergelijkingstabel. Die laatste markeert bewust de
   laatste kolom als "Met Timebutler"; hier is de laatste kolom privacy, en die
   mag geen voorkeurskleur krijgen. Op mobiel valt elke rij uiteen in een blok,
   want drie kolommen met hele zinnen passen niet op 375px. */
.tb-methodetabel table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.tb-methodetabel th,
.tb-methodetabel td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rand);
	font-size: var(--wp--preset--font-size--sm);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	text-align: left;
	vertical-align: top;
}

.tb-methodetabel thead th {
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--bold);
}

.tb-methodetabel tbody th {
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--semibold);
	width: 22%;
}

.tb-methodetabel tbody tr:last-child th,
.tb-methodetabel tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 781px) {
	/* Kop verbergen en elke rij als blok tonen; de kolomnaam komt uit data-kolom */
	.tb-methodetabel thead {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.tb-methodetabel tr {
		border-bottom: 1px solid var(--wp--preset--color--rand);
		display: block;
		padding-bottom: var(--wp--preset--spacing--40);
	}

	.tb-methodetabel tr:last-child {
		border-bottom: 0;
	}

	.tb-methodetabel th,
	.tb-methodetabel td {
		border-bottom: 0;
		display: block;
		padding: var(--wp--preset--spacing--20) 0;
		width: auto;
	}

	.tb-methodetabel tbody th {
		font-size: var(--wp--preset--font-size--base);
		padding-top: var(--wp--preset--spacing--40);
	}

	.tb-methodetabel td::before {
		color: var(--wp--preset--color--tekst-zacht);
		content: attr(data-kolom);
		display: block;
		font-size: var(--wp--preset--font-size--xs);
	}
}

/* Artikelen uit het cluster op de hubs. Het nieuwste artikel groot op teal-100, de rest als lijst
   ernaast. Mobiel: een kolom. */
.tb-artikelen__lijst {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
}

.tb-artikelen__lijst > li {
	border-bottom: 1px solid var(--wp--preset--color--rand);
	padding-bottom: var(--wp--preset--spacing--40);
	position: relative;
}

.tb-artikelen__lijst > li:first-child {
	background: var(--wp--preset--color--teal-100);
	border: 0;
	border-radius: var(--wp--custom--radius--blok);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tb-artikelen__titel {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.3;
	margin: 0;
}

.tb-artikelen__lijst > li:first-child .tb-artikelen__titel {
	font-size: var(--wp--preset--font-size--lg);
}

.tb-artikelen__titel a {
	color: var(--wp--preset--color--ink-700);
	text-decoration: none;
}

/* Hele item klikbaar via de titel. */
.tb-artikelen__titel a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.tb-artikelen__lijst > li:hover .tb-artikelen__titel a {
	color: var(--wp--preset--color--teal-700);
}

.tb-artikelen__lijst > li:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--teal-700);
	outline-offset: 4px;
}

.tb-artikelen__titel a:focus-visible {
	outline: none;
}

.tb-artikelen__samenvatting p {
	color: var(--wp--custom--color--ink--600);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0.5rem 0 0;
}

.tb-artikelen__samenvatting .wp-block-post-excerpt__more-text {
	display: none;
}

@media (min-width: 782px) {
	.tb-artikelen__lijst {
		align-items: start;
		column-gap: var(--wp--preset--spacing--70);
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}

	.tb-artikelen__lijst > li:first-child {
		grid-column: 1;
		grid-row: 1 / span 4;
	}

	.tb-artikelen__lijst > li:not(:first-child) {
		grid-column: 2;
	}

	/* Alleen een artikel: dan niet over de volle breedte uitrekken. */
	.tb-artikelen__lijst > li:only-child {
		grid-column: 1 / -1;
		max-width: 44rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.tb-artikelen__titel a {
		transition: color 150ms ease;
	}
}

/* ---------- Demo en bedankpagina (Figma "Demo: /demo/", v2) ---------- */

.tb-sterren {
	margin: 0;
}

.tb-demo-sterren .tb-sterren img,
.tb-demo-review .tb-sterren img {
	height: 1.125rem;
	width: auto;
}

.tb-demo-sterren p {
	margin: 0;
}

/* Formulier: embed van dashboard.timebutler.nl/register. De hoogte is die van het formulier
   in de embed (5 velden en de knop), gelijk aan live. */
.tb-demo-formulier,
.tb-startkaart {
	border-radius: var(--wp--custom--radius--lg);
}

.tb-demo-formulier > * {
	margin-block: 0;
}

.tb-demo-formulier > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-demo-formulier__embed {
	border: 0;
	display: block;
	height: 378px;
	width: 100%;
}

/* Reviews: drie getinte vlakken met een witte kaart erop. Mobiel onder elkaar. */
.tb-demo-reviews,
.tb-demo-hubs {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.tb-demo-review {
	border-radius: var(--wp--custom--radius--xl);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
}

.tb-demo-review > * {
	margin: 0;
}

/* De kaart ligt echt op het vlak, daarom hier wel een schaduw. */
.tb-demo-review__kaart {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
}

.tb-demo-review__kaart > * {
	margin: 0;
}

.tb-demo-review__naam {
	color: var(--wp--preset--color--tekst-zacht);
	line-height: 1.4;
}

.tb-demo-review__naam strong {
	color: var(--wp--preset--color--ink-700);
}

/* Avatar naast de naam: foto of initialen, 48px rond. */
.tb-demo-review__wie {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.tb-demo-review__wie > * {
	margin: 0;
}

.tb-avatar,
.tb-avatar img {
	border-radius: 50%;
	flex: none;
	height: 48px;
	width: 48px;
}

.tb-avatar img {
	display: block;
	object-fit: cover;
}

p.tb-avatar {
	align-items: center;
	background: var(--wp--preset--color--teal-700);
	color: var(--wp--preset--color--wit);
	display: flex;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	justify-content: center;
}

/* Hubs in drie groepen; de middelste op teal-100 */
.tb-demo-hubs__groep {
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--wp--custom--radius--xl);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60);
}

.tb-demo-hubs__groep:nth-child(2) {
	background: var(--wp--preset--color--teal-100);
	border-color: transparent;
}

.tb-demo-hubs__groep > * {
	margin: 0;
}

.tb-demo-hubs__hub {
	color: var(--wp--preset--color--tekst-zacht);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/* Hubtitel op base, uitleg op sm: dezelfde verhouding als titel en omschrijving in het megamenu. */
.tb-demo-hubs__hub a {
	color: var(--wp--preset--color--teal-700);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
}

/* ---------- Iconen bij dienstenlijsten ---------- */
/* Dezelfde Lucide-iconen als in het megamenu (menu.css) en op de 404, gekoppeld aan de href: lijnicoon
   in ink-700 (20px) via mask-image op een vlakje teal-100 van 36px, radius 8. Het vlakje is ::before
   van de rij, het icoon ::before van de link. De container krijgt de klasse tb-dienst-iconen: de hubs
   op /prijs/ en /demo/ (demo-hubs.php, $iconen) en de lijst op /over-ons/ (over-ons-onderdelen.php).
   Verzoek eigenaar 26-10-2026. */
.tb-dienst-iconen .tb-demo-hubs__hub,
.tb-dienst-iconen .tb-onderdelen__lijst li {
	padding-inline-start: 3rem;
	position: relative;
}

.tb-dienst-iconen .tb-onderdelen__lijst li {
	--tb-icoon-boven: var(--wp--preset--spacing--40);
}

.tb-dienst-iconen .tb-demo-hubs__hub::before,
.tb-dienst-iconen .tb-onderdelen__lijst li::before {
	background: var(--wp--preset--color--teal-100);
	border-radius: var(--wp--custom--radius--md);
	content: "";
	height: 2.25rem;
	inset-block-start: var(--tb-icoon-boven, 0px);
	inset-inline-start: 0;
	position: absolute;
	width: 2.25rem;
}

/* Op de teal-100-groep wordt het vlakje wit, zoals bij hover in het megamenu. */
.tb-dienst-iconen .tb-demo-hubs__groep:nth-child(2) .tb-demo-hubs__hub::before {
	background: var(--wp--preset--color--wit);
}

.tb-dienst-iconen .tb-demo-hubs__hub a::before,
.tb-dienst-iconen .tb-onderdelen__lijst li a::before {
	background: var(--wp--preset--color--ink-700);
	content: "";
	height: 1.25rem;
	inset-block-start: calc(var(--tb-icoon-boven, 0px) + 0.5rem);
	inset-inline-start: 0.5rem;
	-webkit-mask: var(--tb-icoon) center / contain no-repeat;
	mask: var(--tb-icoon) center / contain no-repeat;
	position: absolute;
	width: 1.25rem;
}

.tb-dienst-iconen a[href="/rooster-maken/"] { --tb-icoon: url(../icons/calendar-days.svg); }
.tb-dienst-iconen a[href="/personeelsplanning/"] { --tb-icoon: url(../icons/users.svg); }
.tb-dienst-iconen a[href="/medewerker-app/"] { --tb-icoon: url(../icons/smartphone.svg); }
.tb-dienst-iconen a[href="/urenregistratie/"] { --tb-icoon: url(../icons/clock.svg); }
.tb-dienst-iconen a[href="/digitale-prikklok/"],
.tb-dienst-iconen a[href="/urenregistratie/inkloksysteem/"] { --tb-icoon: url(../icons/punch-clock.svg); }
.tb-dienst-iconen a[href="/verlofregistratie/"] { --tb-icoon: url(../icons/plane.svg); }
.tb-dienst-iconen a[href="/verzuimregistratie/"] { --tb-icoon: url(../icons/heart-pulse.svg); }
.tb-dienst-iconen a[href="/arbeidstijdenwet/"] { --tb-icoon: url(../icons/scale.svg); }

/* Geen blokmarge tussen de cellen: anders staat elke cel na de eerste lager dan de eerste. */
.tb-demo-reviews > *,
.tb-demo-hubs > * {
	margin: 0;
}

@media (min-width: 782px) {
	.tb-demo-reviews,
	.tb-demo-hubs {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tekstkolom: kop met alinea's op leesbreedte (sectie-tekst, kop van sectie-twee-vlakken). De
   kolom zelf volgt de inhoudsbreedte, zodat hij links uitlijnt met de rest; de regels zijn smal. */
.tb-tekstkolom > * {
	margin-block: 0;
	max-width: 45rem;
}

.tb-tekstkolom > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Hero-kop: het langste woord ("Personeelsplanning") moet op elke breedte op een regel passen.
   Bredere tekstkolom vanaf 782px en een kopmaat die meeschaalt met de kolom (max. 4rem). */
@media (min-width: 782px) {
	.tb-paneel:has(h1) > .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 58% !important;
	}
	.tb-paneel:has(h1) > .wp-block-columns > .wp-block-column:last-child {
		flex-basis: 42% !important;
	}
}

.tb-paneel h1:not(.tb-lange-kop) {
	font-size: clamp(1.875rem, -0.175rem + 4.9vw, 4rem);
}

/* Hero-kop met een heel lang woord (onregelmatigheidstoeslag): kleiner, zodat het woord past en
   alleen bij het zachte afbreekstreepje breekt. */
h1.tb-lange-kop {
	font-size: clamp(1.75rem, 1.1rem + 3vw, 3rem);
	hyphens: manual;
	overflow-wrap: normal;
}

/* ---------- Handleidingsecties (Figma "Excel", 213:1121) ---------- */

/* Uitleg met code: tussenkoppen, formules en een beeld. Mobiel staat de tekst altijd eerst. */
.tb-code-tekst > * {
	margin-block: 0;
}

.tb-code-tekst > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-code-tekst > h3 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.tb-code-tekst > .tb-code-label {
	color: var(--wp--preset--color--tekst-zacht);
	font-weight: var(--wp--custom--font-weight--semibold);
	margin-block-start: var(--wp--preset--spacing--50);
}

.tb-code-tekst > .tb-code-label + .tb-formule {
	margin-block-start: var(--wp--preset--spacing--20);
}

.tb-formule {
	background: var(--wp--preset--color--achtergrond);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--wp--custom--radius--md, 8px);
	color: var(--wp--preset--color--ink-700);
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: 0.875rem;
	line-height: 1.6;
	overflow-x: auto;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	white-space: pre;
}

.tb-code-beeld img {
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	height: auto;
	width: 100%;
}

@media (max-width: 781px) {
	.tb-code--beeld-links > .wp-block-column:first-child {
		order: 2;
	}
}

/* Genummerde lijst in een tekstkolom: teal-700 nummer, gewone tekst. */
.tb-ol {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-inline-start: 1.5rem;
}

.tb-ol li::marker {
	color: var(--wp--preset--color--teal-700);
	font-weight: var(--wp--custom--font-weight--semibold);
}

/* Kolomtabel: lijn boven elke rij, waarde rechts. */
.tb-kolomtabel table {
	border-collapse: collapse;
	width: 100%;
}

.tb-kolomtabel :is(th, td) {
	border: 0;
	padding: var(--wp--preset--spacing--30) 0;
	text-align: left;
}

.tb-kolomtabel thead th {
	color: var(--wp--preset--color--tekst-zacht);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.tb-kolomtabel thead {
	border: 0;
}

.tb-kolomtabel tbody tr {
	border-top: 1px solid var(--wp--preset--color--rand);
}

.tb-kolomtabel tbody th {
	color: var(--wp--preset--color--ink-700);
	font-weight: 400;
}

.tb-kolomtabel :is(th, td):last-child {
	text-align: right;
}

.tb-kolomtabel td {
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--semibold);
}

/* Lijst in een vlak van sectie-twee-vlakken. */
.tb-vlak-lijst {
	color: var(--wp--preset--color--tekst-zacht);
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-inline-start: 1.25rem;
}

/* ---------- Probleemsectie: opzetten A, B en C (Figma 206:1212) ---------- */

/* A: icoon in plaats van nummer, zelfde maat als de weerleggers in de hero. */
.tb-probleem-icoon {
	flex: none;
	margin: 0;
}

.tb-probleem-icoon img {
	background: var(--wp--preset--color--accent-zacht);
	border-radius: var(--wp--custom--radius--lg);
	box-sizing: content-box;
	display: block;
	height: 1.25rem;
	padding: 0.625rem;
	width: 1.25rem;
}

/* B: probleem en uitkomst naast elkaar, regel tegenover regel. Mobiel onder elkaar. */
.tb-nustraks {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.tb-nustraks > *,
.tb-nustraks__vlak > * {
	margin-block: 0;
}

.tb-nustraks__vlak {
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--60);
}

.tb-nustraks__vlak > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.tb-nustraks__vlak--nu {
	background: var(--wp--preset--color--achtergrond);
	border: 1px solid var(--wp--preset--color--rand);
}

.tb-nustraks__lijst {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	padding: 0;
}

.tb-nustraks__lijst li {
	padding-inline-start: 2rem;
	position: relative;
}

.tb-nustraks__lijst li::before {
	background: currentColor;
	content: "";
	height: 1.25rem;
	left: 0;
	-webkit-mask: var(--tb-teken) center / contain no-repeat;
	mask: var(--tb-teken) center / contain no-repeat;
	position: absolute;
	top: 0.2em;
	width: 1.25rem;
}

.tb-nustraks__vlak--nu .tb-nustraks__lijst {
	--tb-teken: url("../icons/minus.svg");
	color: var(--wp--preset--color--tekst-zacht);
}

.tb-nustraks__vlak--straks .tb-nustraks__lijst {
	--tb-teken: url("../icons/check.svg");
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.tb-nustraks__vlak--straks .tb-nustraks__lijst li::before {
	background: var(--wp--preset--color--teal-700);
}

/* C: momenten op volgorde. De lijn boven elk moment toont de tijd; het laatste moment in
   teal-700. Zonder script (of bij minder beweging) staat alles meteen vol. */
.tb-tijdlijn {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.tb-tijdlijn > * {
	margin: 0;
}

.tb-tijdlijn__moment {
	padding-block-start: var(--wp--preset--spacing--50);
	position: relative;
}

.tb-tijdlijn__moment > * {
	margin-block: 0;
}

.tb-tijdlijn__moment > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.tb-tijdlijn__moment::before {
	background: var(--wp--preset--color--rand);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform-origin: left;
}

.tb-tijdlijn__moment:last-child::before {
	background: var(--wp--preset--color--teal-700);
	height: 3px;
}

.tb-tijdlijn__wanneer {
	color: var(--wp--preset--color--teal-700);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.tb-tijdlijn__uitkomst {
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--semibold);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* Eenmalig vollopen: tijdlijn.js zet .tb-tijdlijn--wacht en haalt het weg als de sectie in beeld
   komt. Elke lijn wacht op de vorige (0,4 s per moment), daarna verschijnt de uitkomst. */
/* In de wachtstand zonder overgang, anders loopt de lijn eerst zichtbaar leeg. */
.tb-tijdlijn--wacht .tb-tijdlijn__moment::before {
	transform: scaleX(0);
	transition: none;
}

.tb-tijdlijn.tb-tijdlijn--wacht + .tb-tijdlijn__uitkomst {
	opacity: 0;
	transform: translateY(8px);
	transition: none;
}

.tb-tijdlijn__moment::before {
	transition: transform 400ms ease-out;
}

.tb-tijdlijn__moment:nth-child(2)::before { transition-delay: 400ms; }
.tb-tijdlijn__moment:nth-child(3)::before { transition-delay: 800ms; }
.tb-tijdlijn__moment:nth-child(4)::before { transition-delay: 1200ms; }

.tb-tijdlijn + .tb-tijdlijn__uitkomst {
	transition: opacity 400ms ease 1600ms, transform 400ms ease 1600ms;
}

@media (prefers-reduced-motion: reduce) {
	.tb-tijdlijn__moment::before,
	.tb-tijdlijn + .tb-tijdlijn__uitkomst {
		transition: none;
	}
}

@media (min-width: 782px) {
	.tb-nustraks {
		grid-template-columns: 1fr 1fr;
	}

	.tb-tijdlijn {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Prijs (Figma "Prijs: /prijs/", 191:1311) ---------- */

/* Vaste tabel per teamgrootte: lijn boven elke rij, bedrag rechts en vet. Tabelcijfers zodat
   de bedragen onder elkaar uitlijnen. */
.tb-prijstabel {
	border-radius: var(--wp--custom--radius--lg);
}

.tb-prijstabel > * {
	margin-block: 0;
}

.tb-prijstabel > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-prijstabel .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.tb-prijstabel .wp-block-table :is(th, td) {
	border: 0;
	padding: var(--wp--preset--spacing--30) 0;
	text-align: left;
}

.tb-prijstabel .wp-block-table thead {
	border: 0;
}

.tb-prijstabel .wp-block-table thead th {
	color: var(--wp--preset--color--tekst-zacht);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.tb-prijstabel .wp-block-table tbody tr {
	border-top: 1px solid var(--wp--preset--color--rand);
}

.tb-prijstabel .wp-block-table tbody th {
	color: var(--wp--preset--color--ink-700);
	font-weight: 400;
}

.tb-prijstabel .wp-block-table :is(th, td):last-child {
	text-align: right;
}

.tb-prijstabel .wp-block-table td {
	color: var(--wp--preset--color--ink-700);
	font-variant-numeric: tabular-nums;
	font-weight: var(--wp--custom--font-weight--bold, 700);
}

/* Contact: tekst links, bel en mail samen in een wit blok rechts. Mobiel onder elkaar. */
.tb-contact {
	border-radius: var(--wp--custom--radius--xl);
	display: grid;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tb-contact > *,
.tb-contact__tekst > * {
	margin-block: 0;
}

.tb-contact__tekst > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-contact__regels {
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
}

.tb-contact__regels > * {
	margin: 0;
}

.tb-contact__regel {
	align-items: center;
	column-gap: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: auto 1fr;
	line-height: 1.35;
}

.tb-contact__regel img,
.tb-startkaart__stap img {
	background: var(--wp--preset--color--teal-100);
	border-radius: 50%;
	box-sizing: content-box;
	grid-row: span 2;
	height: 1.25rem;
	padding: 0.75rem;
	width: 1.25rem;
}

.tb-contact__regel span {
	color: var(--wp--preset--color--tekst-zacht);
	font-size: var(--wp--preset--font-size--sm);
}

.tb-contact__regel a {
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--semibold);
	text-decoration: none;
}

.tb-contact__regel a:hover {
	color: var(--wp--preset--color--teal-700);
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.tb-contact {
		align-items: center;
		grid-template-columns: 1fr 1fr;
		padding: var(--wp--preset--spacing--80);
	}
}

/* ---------- Contact (Figma "Contact: /contact/", 195:1121) ---------- */

/* Contactregels in de hero: zelfde blok als in sectie-contact. */
.tb-paneel .tb-contact__regels {
	margin: 0;
}

/* Oprichter: portret links, verhaal rechts. Mobiel onder elkaar, foto eerst en smaller. */
.tb-oprichter {
	border-radius: var(--wp--custom--radius--xl);
	display: grid;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tb-oprichter > *,
.tb-oprichter__tekst > * {
	margin-block: 0;
}

.tb-oprichter__tekst > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-oprichter__foto img {
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--xl);
	display: block;
	height: auto;
	max-width: 20rem;
	object-fit: cover;
	width: 100%;
}

/* Bedrijfsgegevens naast "Nog geen account?". */
.tb-gegevens {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.tb-gegevens > * {
	margin: 0;
}

.tb-gegevens__vlak {
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--60);
}

.tb-gegevens__vlak--rand {
	border: 1px solid var(--wp--preset--color--rand);
}

.tb-gegevens__vlak > * {
	margin-block: 0;
}

.tb-gegevens__vlak > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-gegevens__vlak a:not(.wp-element-button) {
	color: var(--wp--preset--color--teal-700);
	font-weight: var(--wp--custom--font-weight--semibold);
}

@media (min-width: 782px) {
	.tb-gegevens {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.tb-oprichter {
		align-items: center;
		grid-template-columns: 22.5rem 1fr;
		column-gap: var(--wp--preset--spacing--80);
		padding: var(--wp--preset--spacing--70);
	}

	.tb-oprichter__foto img {
		max-width: none;
	}
}

/* ---------- Over ons en Onze missie (Figma 257:1233) ---------- */

/* Alleen het proefvlak, zonder bedrijfsgegevens ernaast. */
@media (min-width: 782px) {
	.tb-gegevens--enkel {
		grid-template-columns: 1fr;
	}
}

/* Wat Timebutler doet: kop links, de vijf onderdelen als lijst rechts. */
.tb-onderdelen {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.tb-onderdelen > *,
.tb-onderdelen__kop > * {
	margin-block: 0;
}

.tb-onderdelen__kop > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-onderdelen__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tb-onderdelen__lijst li {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--40);
}

.tb-onderdelen__lijst li + li {
	border-top: 1px solid var(--wp--preset--color--rand);
}

.tb-onderdelen__lijst a {
	color: var(--wp--preset--color--teal-700);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.tb-onderdelen__lijst span {
	color: var(--wp--preset--color--tekst-zacht);
}

.tb-werkwijze > :first-child {
	max-width: 24ch;
}

.tb-werkwijze p {
	max-width: 46rem;
}

.tb-werkwijze a {
	color: var(--wp--preset--color--teal-700);
	font-weight: var(--wp--custom--font-weight--semibold);
}

/* Waar je tegenaan loopt: tekst links, punten als lijst op een wit vlak rechts. */
.tb-pijn {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.tb-pijn > *,
.tb-pijn__tekst > * {
	margin-block: 0;
}

.tb-pijn__tekst > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-pijn__lijst {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--wp--custom--radius--xl);
	list-style: none;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.tb-pijn__lijst li {
	color: var(--wp--preset--color--ink-700);
	font-weight: var(--wp--custom--font-weight--semibold);
	padding-block: var(--wp--preset--spacing--40);
}

.tb-pijn__lijst li + li {
	border-top: 1px solid var(--wp--preset--color--rand);
}

/* Per onderdeel: tabel over de volle breedte; mobiel staan kop en tekst per rij onder elkaar. */
.tb-usps {
	margin-block-start: var(--wp--preset--spacing--50);
}

.tb-usps table {
	border: 1px solid var(--wp--preset--color--rand);
	border-collapse: separate;
	border-radius: var(--wp--custom--radius--lg);
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.tb-usps th,
.tb-usps td {
	border: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	text-align: left;
	vertical-align: top;
}

.tb-usps thead th {
	background: var(--wp--preset--color--teal-100);
	font-size: var(--wp--preset--font-size--sm);
}

.tb-usps tbody tr + tr > *,
.tb-usps tbody tr:first-child > * {
	border-top: 1px solid var(--wp--preset--color--rand);
}

.tb-usps tbody th a {
	color: var(--wp--preset--color--teal-700);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.tb-usps td {
	color: var(--wp--preset--color--tekst-zacht);
}

@media (max-width: 781px) {
	.tb-usps thead {
		display: none;
	}

	.tb-usps tr,
	.tb-usps th,
	.tb-usps td {
		display: block;
	}

	.tb-usps tbody td {
		border-top: 0 !important;
		padding-top: 0;
	}
}

/* Waar we voor staan: drie principes met een teal lijn erboven. */
.tb-principes {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Geen bloklaagmarge tussen de kolommen, anders staat de eerste hoger dan de rest. */
.tb-principes > * {
	margin-block: 0;
}

.tb-principe {
	border-top: 3px solid var(--wp--preset--color--teal-700);
	padding-block-start: var(--wp--preset--spacing--50);
}

.tb-principe > * {
	margin-block: 0;
}

.tb-principe > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.tb-principe a {
	color: var(--wp--preset--color--teal-700);
	font-weight: var(--wp--custom--font-weight--semibold);
}

@media (min-width: 782px) {
	.tb-onderdelen__lijst li {
		align-items: baseline;
		grid-template-columns: 15rem 1fr;
	}

	.tb-principes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.tb-pijn {
		align-items: center;
		column-gap: var(--wp--preset--spacing--80);
		grid-template-columns: 1fr 1fr;
	}

	.tb-onderdelen {
		column-gap: var(--wp--preset--spacing--80);
		grid-template-columns: 22rem 1fr;
	}
}

/* Startkaart op de bedankpagina: vier stappen, elk met een link naar de kennisbank. */
.tb-startkaart {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tb-startkaart > * {
	margin: 0;
}

.tb-startkaart h2 {
	margin-block-end: var(--wp--preset--spacing--20);
}

.tb-startkaart__stap {
	align-items: center;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--wp--custom--radius--lg);
	column-gap: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: auto 1fr;
	line-height: 1.35;
	padding: var(--wp--preset--spacing--40);
	position: relative;
	transition: border-color 150ms ease;
}

.tb-startkaart__stap:hover {
	border-color: var(--wp--preset--color--teal-700);
}

/* Icoon wit op teal-700, zoals in het ontwerp (witte varianten in assets/icons). */
.tb-startkaart__stap img {
	background: var(--wp--preset--color--teal-700);
}

.tb-startkaart__stap strong {
	color: var(--wp--preset--color--ink-700);
}

.tb-startkaart__stap a {
	color: var(--wp--preset--color--teal-700);
	font-size: var(--wp--preset--font-size--sm);
}

/* Hele stap klikbaar via de link erin. */
.tb-startkaart__stap a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* ---------- 404: pagina niet gevonden ----------
   De tijd 4:04 is de knipoog: de dubbele punt uit "t:me" als klok. Puur beeld, dus
   aria-hidden; de h1 zegt wat er aan de hand is. */
.tb-404__tijd {
	color: var(--wp--preset--color--ink-700);
	font-size: clamp(4.5rem, 3rem + 7vw, 9rem);
	font-variant-numeric: tabular-nums;
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0;
}

.tb-404__tijd + h1 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.tb-404__tijd span {
	color: var(--wp--preset--color--teal-700);
	display: inline-block;
	transform: translateY(-0.06em);
}

.tb-404__onderwerpen {
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tb-404__onderwerpen > * {
	margin-block: 0;
}

.tb-404__onderwerpen > h2 {
	margin-block-end: var(--wp--preset--spacing--40);
}

.tb-404__onderwerpen > h3 {
	color: var(--wp--preset--color--tekst-zacht);
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-404__onderwerpen ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	list-style: none;
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 0;
}

.tb-404__onderwerpen li a {
	font-weight: var(--wp--custom--font-weight--bold);
}

/* Icoon per onderwerp, dezelfde Lucide-iconen als in het megamenu: lijnicoon in ink op een
   vlakje in teal-100. Het vlakje is li::before, het icoon a::before via mask-image. */
.tb-404__onderwerpen ul {
	display: grid;
	grid-template-columns: 1fr;
}

.tb-404__omschrijving {
	color: var(--wp--preset--color--tekst-zacht);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1.4;
}

.tb-404__onderwerpen li {
	display: block;
	min-height: 2.25rem;
	padding-inline-start: 3rem;
	position: relative;
}

.tb-404__onderwerpen li::before,
.tb-404__onderwerpen li a::before {
	content: "";
	inset-block-start: 50%;
	inset-inline-start: 0;
	position: absolute;
	transform: translateY(-50%);
}

.tb-404__onderwerpen li::before {
	background: var(--wp--preset--color--teal-100);
	border-radius: var(--wp--custom--radius--md);
	height: 2.25rem;
	width: 2.25rem;
}

.tb-404__onderwerpen li a::before {
	background: var(--wp--preset--color--ink-700);
	height: 1.25rem;
	inset-inline-start: 0.5rem;
	-webkit-mask: var(--tb-icoon) center / contain no-repeat;
	mask: var(--tb-icoon) center / contain no-repeat;
	width: 1.25rem;
}

.tb-404__onderwerpen a[href="/urenregistratie/"] { --tb-icoon: url(../icons/clock.svg); }
.tb-404__onderwerpen a[href="/digitale-prikklok/"] { --tb-icoon: url(../icons/punch-clock.svg); }
.tb-404__onderwerpen a[href="/rooster-maken/"] { --tb-icoon: url(../icons/calendar-days.svg); }
.tb-404__onderwerpen a[href="/personeelsplanning/"] { --tb-icoon: url(../icons/users.svg); }
.tb-404__onderwerpen a[href="/verlofregistratie/"] { --tb-icoon: url(../icons/plane.svg); }
.tb-404__onderwerpen a[href="/verzuimregistratie/"] { --tb-icoon: url(../icons/heart-pulse.svg); }
.tb-404__onderwerpen a[href="/arbeidstijdenwet/"] { --tb-icoon: url(../icons/scale.svg); }
.tb-404__onderwerpen a[href="/medewerker-app/"] { --tb-icoon: url(../icons/smartphone.svg); }

.tb-404__verder {
	border-top: 1px solid var(--wp--preset--color--rand);
	margin-block-start: var(--wp--preset--spacing--50) !important;
	padding-block-start: var(--wp--preset--spacing--40);
}

/* Reveal per sectie (assets/js/reveal.js, TB-024): kop, dan tekst, dan beeld, 80 ms na elkaar.
   Alleen de klasse uit het script verbergt iets; zonder script is alles zichtbaar. */
.tb-reveal {
	transition: opacity 300ms ease, transform 300ms ease;
	transition-delay: calc(var(--tb-stap, 0) * 80ms);
}

.tb-reveal-wacht .tb-reveal {
	opacity: 0;
	transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
	.tb-reveal {
		transition: none;
	}

	.tb-reveal-wacht .tb-reveal {
		opacity: 1;
		transform: none;
	}
}

/* Kruimelpad (Rank Math) op pagina's en het kennisbankoverzicht. Zelfde stem als op de blog:
   klein, ink-600, de dubbele punt in teal-700 als knipoog naar "t:me". */
.tb-kruimelpad {
	padding-top: var(--wp--preset--spacing--40);
}

.tb-kruimelpad + .wp-block-post-content,
.tb-kruimelpad + main {
	margin-block-start: 0;
}

.tb-kruimelpad .rank-math-breadcrumb p,
.tb-kb-hero .rank-math-breadcrumb p {
	color: var(--wp--custom--color--ink--600);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0;
}

.tb-kruimelpad .rank-math-breadcrumb a,
.tb-kb-hero .rank-math-breadcrumb a {
	color: var(--wp--custom--color--ink--600);
}

.tb-kruimelpad .rank-math-breadcrumb .separator,
.tb-kb-hero .rank-math-breadcrumb .separator {
	color: var(--wp--preset--color--teal-700);
	font-weight: 700;
	padding-inline: 0.35em;
}

.tb-kb-hero .rank-math-breadcrumb {
	margin-block-end: var(--wp--preset--spacing--30);
}

/* ---------- Rekenvoorbeeld (C2, Figma 278:1120) ----------
 * Kaart met een berekening: rijen zonder lijnen ertussen, alleen een scheiding boven de uitkomst.
 * Cijfers in tabelcijfers, zodat ze onder elkaar netjes uitlijnen. */
.tb-rekenvoorbeeld__kaart {
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--wp--custom--radius--blok);
	padding: var(--wp--preset--spacing--50);
}

.tb-rekenvoorbeeld__kaart > * {
	margin-block: 0;
}

.tb-rekenvoorbeeld__kaart > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tb-rekenvoorbeeld__label {
	color: var(--wp--preset--color--teal-700);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--bold);
}

.tb-rekenvoorbeeld__kaart .tb-rekenvoorbeeld__situatie {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	margin-block-start: var(--wp--preset--spacing--20);
}

.tb-rekenvoorbeeld__rijen {
	margin-inline: 0;
}

.tb-rekenvoorbeeld__rijen table {
	border-collapse: collapse;
	width: 100%;
}

.tb-rekenvoorbeeld__rijen :is(th, td) {
	border: 0;
	padding: 0.4375rem 0;
	vertical-align: top;
}

.tb-rekenvoorbeeld__rijen th {
	color: var(--wp--preset--color--tekst);
	font-weight: 400;
	padding-inline-end: var(--wp--preset--spacing--40);
	text-align: start;
}

.tb-rekenvoorbeeld__rijen td {
	color: var(--wp--preset--color--ink-700);
	font-variant-numeric: tabular-nums;
	font-weight: var(--wp--custom--font-weight--semibold);
	text-align: end;
	white-space: nowrap;
}

.tb-rekenvoorbeeld__rijen tfoot {
	border-top: 1px solid var(--wp--preset--color--rand);
}

.tb-rekenvoorbeeld__rijen tfoot :is(th, td) {
	padding-block-start: var(--wp--preset--spacing--40);
}

.tb-rekenvoorbeeld__rijen tfoot td {
	color: var(--wp--preset--color--teal-700);
	font-weight: var(--wp--custom--font-weight--bold);
}

.tb-rekenvoorbeeld__app {
	color: var(--wp--preset--color--tekst-zacht);
	font-size: 0.9375rem;
}

.tb-rekenvoorbeeld__bron {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

@media (min-width: 782px) {
	.tb-rekenvoorbeeld__kaart {
		padding: var(--wp--preset--spacing--60);
	}

	/* Kaart links: de sectie ervoor (wet-normen) heeft tekst links en rijen rechts, zo herhaalt
	 * dezelfde opzet zich niet direct (anti-slop §6). Op mobiel blijft de vraag bovenaan. */
	.tb-rekenvoorbeeld > .wp-block-columns {
		flex-direction: row-reverse;
	}
}