.rdl {
	--rdl-surface: var(--c-surface, #FFFFFF);
	--rdl-vlak: var(--c-surface-2, #EFF3EC);
	--rdl-text: var(--c-text, #1E2A23);
	--rdl-muted: var(--c-text-muted, #566158);
	--rdl-border: var(--c-border, #E3DFD4);
	/* De rand van een keuzetegel is het enige wat hem begrenst zolang hij niet is aangevinkt.
	   --rdl-border haalt daar 1,33:1, ruim onder de 3:1 die daarvoor geldt. */
	--rdl-veldrand: var(--c-field-border, #6E8A78);
	--rdl-primair: var(--c-primary, #2F5D4E);
	--rdl-r: var(--r-sm, 12px);
	--rdl-r-md: var(--r-md, 20px);
	--rdl-pill: var(--r-pill, 999px);
	--rdl-ease: var(--ease, cubic-bezier(.22, .61, .36, 1));
	--rdl-dur: var(--dur, .22s);
	--rdl-schaduw: var(--shadow-sm, 0 2px 8px rgba(30, 42, 35, .05));
	--rdl-schaduw-md: var(--shadow-md, 0 14px 30px rgba(30, 42, 35, .1));
	--rdl-font: var(--font-display, Georgia, serif);
	--rdl-fs-small: var(--fs-small, .875rem);
	--rdl-fs-eyebrow: var(--fs-eyebrow, .8125rem);

	--rdl-vrij: var(--c-primary, #2F5D4E);
	--rdl-vrij-vlak: #E4EEE6;
	--rdl-bijna: #8A4A0B;
	--rdl-bijna-vlak: #FBF1DF;
	--rdl-vol: #8C2F1E;
	--rdl-vol-vlak: #FAEAE3;
	--rdl-gesloten: var(--c-text-muted, #566158);
	--rdl-gesloten-vlak: #F0EFEA;

	color: var(--rdl-text);
}

.rdl .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rdl-kalender__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.rdl-kalender__titel {
	margin: 0 auto;
	font-family: var(--rdl-font);
	font-size: 1.5rem;
	text-align: center;
}
.rdl-kalender__nav {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--rdl-fs-small);
	font-weight: 600;
}
.rdl-kalender__nav--uit { visibility: hidden; }

.rdl-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.1rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: var(--rdl-fs-small);
	color: var(--rdl-muted);
}
.rdl-legenda li { display: inline-flex; align-items: center; gap: .45rem; }

.rdl-mark {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--rdl-status, var(--rdl-muted));
	color: #fff;
	flex: none;
}
.rdl-mark--vrij { background: var(--rdl-vrij); }
.rdl-mark--bijna { background: var(--rdl-bijna); }
.rdl-mark--vol { background: var(--rdl-vol); }
.rdl-mark--gesloten { background: var(--rdl-gesloten); }

.rdl-kalender__kop { display: none; }

.rdl-maand {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rdl-dag--vrij { --rdl-status: var(--rdl-vrij); --rdl-status-vlak: var(--rdl-vrij-vlak); }
.rdl-dag--bijna { --rdl-status: var(--rdl-bijna); --rdl-status-vlak: var(--rdl-bijna-vlak); }
.rdl-dag--vol { --rdl-status: var(--rdl-vol); --rdl-status-vlak: var(--rdl-vol-vlak); }
.rdl-dag--gesloten { --rdl-status: var(--rdl-gesloten); --rdl-status-vlak: var(--rdl-gesloten-vlak); }
/* Voorbij de horizon is er nog geen agenda. Bewust dezelfde rustige tint als gesloten en niet de
   groene van vrij: die dagen zijn niet vrij, ze bestaan nog niet. */
.rdl-dag--planning { --rdl-status: var(--rdl-gesloten); --rdl-status-vlak: var(--rdl-gesloten-vlak); }
.rdl-dag--planning .rdl-dag__link { opacity: .75; }

.rdl-dag__link {
	display: grid;
	grid-template-columns: 2.4rem 2rem 22px 1fr;
	align-items: center;
	gap: .6rem;
	min-height: 56px;
	padding: .55rem .8rem;
	color: var(--rdl-text);
	text-decoration: none;
	background: var(--rdl-surface);
	border: 1px solid var(--rdl-border);
	border-left: 5px solid var(--rdl-status, var(--rdl-border));
	border-radius: var(--rdl-r);
	transition: transform var(--rdl-dur) var(--rdl-ease), box-shadow var(--rdl-dur) var(--rdl-ease);
}
a.rdl-dag__link:hover,
a.rdl-dag__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--rdl-schaduw-md);
}
.rdl-dag--gesloten .rdl-dag__link {
	background: var(--rdl-gesloten-vlak);
	color: var(--rdl-muted);
	cursor: default;
	background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(86, 97, 88, .12) 6px 9px);
}

.rdl-dag__nr {
	font-family: var(--rdl-font);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1;
}
.rdl-dag__wd {
	font-size: var(--rdl-fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--rdl-muted);
}
.rdl-dag__tekst {
	font-size: var(--rdl-fs-small);
	font-weight: 600;
	color: var(--rdl-status, var(--rdl-muted));
}

@media (min-width: 900px) {
	.rdl-kalender__kop {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: .4rem;
		margin-bottom: .4rem;
		font-size: var(--rdl-fs-eyebrow);
		text-transform: uppercase;
		letter-spacing: .1em;
		color: var(--rdl-muted);
		text-align: center;
	}
	.rdl-maand {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: .4rem;
	}
	.rdl-maand > .rdl-dag:first-child { grid-column-start: var(--rdl-eerste, 1); }
	.rdl-dag__link {
		grid-template-columns: 1fr;
		align-content: start;
		justify-items: start;
		gap: .3rem;
		min-height: 108px;
		border-left-width: 1px;
		border-top: 5px solid var(--rdl-status, var(--rdl-border));
	}
	.rdl-dag__wd { display: none; }
	.rdl-dag__ronde { grid-column: 1; }
}

.form-melding {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .9rem 1.1rem;
	margin: 0 0 1.2rem;
	border-radius: var(--rdl-r);
	border-left: 4px solid currentColor;
	font-weight: 600;
	line-height: 1.5;
}
.form-melding .ww-icon,
.form-melding .rdl-icon { margin-top: .15em; flex: none; }
/* Het blok krijgt na een mislukte inzending de focus via #rdl-melding. Zonder een zichtbare rand
   springt de pagina er wel heen maar is niet te zien waar de focus staat. */
.form-melding:focus { outline: none; }
.form-melding:focus-visible { outline: 3px solid var(--rdl-focus, #1F3F35); outline-offset: 3px; }
.form-success { color: var(--rdl-vrij); background: var(--rdl-vrij-vlak); }
.form-error { color: var(--rdl-vol); background: var(--rdl-vol-vlak); }
.form-let-op { color: var(--rdl-bijna); background: var(--rdl-bijna-vlak); }

@media (prefers-reduced-motion: reduce) {
	.rdl-dag__link { transition: none; }
	a.rdl-dag__link:hover,
	a.rdl-dag__link:focus-visible { transform: none; }
}

.rdl ul,
.rdl ol { list-style: none; padding: 0; }
.rdl .rdl-legenda li,
.rdl .rdl-maand li,
.rdl .rdl-boekingen li { padding-left: 0; }
.rdl .rdl-legenda li::before,
.rdl .rdl-maand li::before,
.rdl .rdl-boekingen li::before { content: none; display: none; }

.rdl-kalender__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.rdl-kalender__titel { margin: 0; grid-column: 2; }
.rdl-kalender__nav--rechts { justify-self: end; }

.rdl-dag--geweest .rdl-dag__tekst,
.rdl-dag--geweest .rdl-mark { display: none; }
.rdl-dag--geweest .rdl-dag__link { min-height: 64px; opacity: .5; }
.rdl-dag__tekst { hyphens: none; overflow-wrap: break-word; }

.rdl-portaal__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: .4rem;
}
.rdl-portaal__kop h2 { margin: 0; font-family: var(--rdl-font); }
.rdl-uitloggen { margin: 0; }

.rdl-boekingen {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1.4rem 0 0;
	padding: 0;
}
.rdl-boeking {
	display: grid;
	gap: .7rem;
	padding: 1.1rem 1.3rem;
	background: var(--rdl-surface);
	border: 1px solid var(--rdl-border);
	border-left: 5px solid var(--rdl-vrij);
	border-radius: var(--rdl-r-md);
	box-shadow: var(--rdl-schaduw);
}
.rdl-boeking--kosten { border-left-color: var(--rdl-bijna); }
.rdl-boeking__wanneer { display: grid; gap: .15rem; }
.rdl-boeking__dag {
	font-family: var(--rdl-font);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.2;
}
.rdl-boeking__dag::first-letter { text-transform: uppercase; }
.rdl-boeking__wat { font-size: var(--rdl-fs-small); color: var(--rdl-muted); }
.rdl-boeking__regel {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 0;
	font-size: var(--rdl-fs-small);
	color: var(--rdl-vrij);
	line-height: 1.5;
}
.rdl-boeking__regel .ww-icon,
.rdl-boeking__regel .rdl-icon { flex: none; margin-top: .1em; }
.rdl-boeking__regel--let-op { color: var(--rdl-bijna); }
.rdl-boeking form { margin: 0; }
/* Bij een lopend aanbod staan er twee knoppen onder elkaar; zonder deze wikkel zouden beide
   formulieren op dezelfde plek in het raster landen en over elkaar heen vallen. */
.rdl-boeking__acties { display: grid; gap: .5rem; align-content: start; }
.rdl-boeking .btn { width: 100%; justify-content: center; }
.rdl-boeking__regel--aanbod { color: var(--rdl-vrij); }

.rdl-portaal__beperkt {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-top: 1.4rem;
	padding: .8rem 1rem;
	background: var(--rdl-vlak);
	border-radius: var(--rdl-r);
}

.rdl-form__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.rdl-weekdagen { border: 0; padding: 0; margin: 0 0 .4rem; }
.rdl-weekdagen legend,
.rdl-honden legend {
	font-family: var(--rdl-font);
	font-size: 1.15rem;
	font-weight: 600;
	padding: 0;
	margin-bottom: .3rem;
}
.rdl-weekdagen__rij { display: grid; gap: .6rem; margin-top: .7rem; }
.rdl-wd__vink { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rdl-wd {
	display: grid;
	align-content: center;
	gap: .15rem;
	min-height: 64px;
	padding: .7rem 1.1rem;
	background: var(--rdl-surface);
	border: 2px solid var(--rdl-veldrand);
	border-radius: var(--rdl-r);
	cursor: pointer;
	transition: border-color var(--rdl-dur) var(--rdl-ease), background var(--rdl-dur) var(--rdl-ease);
}
.rdl-wd__vink:checked + .rdl-wd { border-color: var(--rdl-vrij); background: var(--rdl-vrij-vlak); }
.rdl-wd__vink:focus-visible + .rdl-wd { outline: 2px solid var(--rdl-bijna); outline-offset: 2px; }
.rdl-wd__naam { font-weight: 600; }
.rdl-wd__status { font-size: var(--rdl-fs-small); color: var(--rdl-muted); }
.rdl-wd--vol { opacity: .7; }
.rdl-wd--vol .rdl-wd__status { color: var(--rdl-vol); font-weight: 600; }
/* De statusregel staat er alleen nog bij schaarste, dus hij mag opvallen. Een stippellijn eronder
   verklapt dat er een uitleg achter zit voor wie erop blijft staan. */
.rdl-wd__status[title] {
  color: var(--rdl-bijna);
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}
.rdl-wd--vol .rdl-wd__status[title] { color: var(--rdl-vol); }

.rdl-weekdagen__kalender {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  margin: .9rem 0 0;
}

.rdl-wd__cel { display: grid; align-content: start; }

/* De rondes horen bij de dag erboven en niet bij de dag ernaast. Daarom groeien label en
   rondelijst aan elkaar tot één kaart: zonder die verbinding leest de rij radio's als een
   losse vraag en is niet te zien op welke dag hij slaat. */
.rdl-wd__cel:has(.rdl-rondekeuze) .rdl-wd {
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.rdl-rondekeuze {
	display: grid;
	gap: .1rem;
	padding: .1rem .8rem .5rem;
	margin: 0;
	background: var(--rdl-surface);
	border: 2px solid var(--rdl-veldrand);
	border-top: 0;
	border-radius: 0 0 var(--rdl-r) var(--rdl-r);
	transition: border-color var(--rdl-dur) var(--rdl-ease), background var(--rdl-dur) var(--rdl-ease);
}
.rdl-wd__vink:checked ~ .rdl-rondekeuze { border-color: var(--rdl-vrij); background: var(--rdl-vrij-vlak); }
.rdl-ronde {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1rem .45rem;
	padding: .25rem 0;
	cursor: pointer;
	font-size: var(--rdl-fs-small);
}
.rdl-ronde input { margin: 0; flex: none; }
.rdl-ronde__tijd { font-variant-numeric: tabular-nums; }
.rdl-ronde__status { color: var(--rdl-muted); font-size: .85em; }
.rdl-ronde--vol .rdl-ronde__status { color: var(--rdl-vol); font-weight: 600; }

.rdl-voorwaarde {
	padding: 1rem 1.2rem;
	background: var(--rdl-vlak);
	border-radius: var(--rdl-r);
	margin: .4rem 0;
}
.rdl-voorwaarde p { margin-top: 0; }
.rdl-akkoord { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
.rdl-akkoord input { margin-top: .25em; flex: none; width: 20px; height: 20px; }
.rdl-akkoord--zwaar {
	padding: .9rem 1.1rem;
	background: var(--rdl-bijna-vlak);
	border-radius: var(--rdl-r);
	font-weight: 600;
	margin: 1rem 0;
}
.rdl-keuze { display: grid; gap: .7rem; }
.rdl-keuze .btn { width: 100%; justify-content: center; }

.rdl-hp { position: absolute; left: -9999px; }
.rdl-terugval summary { cursor: pointer; font-weight: 600; color: var(--rdl-primair); padding: .5rem 0; }
.rdl-terugval[open] summary { margin-bottom: .6rem; }

/* Het attribuut hidden komt uit de stijl van de browser zelf en verliest van elke eigen
   display-regel. .btn zet display: inline-flex, dus zonder deze regel staat de plusknop nog in
   beeld nadat het script hem heeft verborgen. Dat is dezelfde valkuil die eerder een balk met
   alle drie de talen tegelijk zichtbaar maakte. */
.rdl [hidden] { display: none !important; }

.rdl-honden { border: 0; padding: 0; margin: 0 0 .4rem; }
.rdl-honden__lijst { display: grid; gap: 1.1rem; }
.rdl-hond { display: grid; gap: .5rem; }

/* Alleen tussen twee rijen, zodat de streep er bij één hond niet staat. */
.rdl-hond + .rdl-hond { border-top: 1px solid var(--rdl-border); padding-top: 1rem; }
.rdl-hond__kop {
	font-family: var(--rdl-font);
	font-size: 1.02rem;
	font-weight: 600;
	margin: 0;
	color: var(--rdl-muted);
}
.rdl-hond__weg {
	justify-self: start;
	background: none;
	border: 0;
	padding: .2rem 0;
	font: inherit;
	font-size: var(--rdl-fs-small);
	color: var(--rdl-primair);
	text-decoration: underline;
	cursor: pointer;
}
.rdl-honden__acties { margin-top: .9rem; }

/* De sjabloon- en knoprijen staan in een <template> en tekenen dus nooit. Deze regel is de
   verdediging voor het geval er ooit een <template> buiten dat element belandt: er is nergens in
   deze stylesheet een [hidden]-regel, dus verbergen met het attribuut alleen werkt hier niet. */
.rdl template { display: none; }

.rdl-bon { display: grid; gap: .9rem; }
.rdl-bon__kenmerk { font-size: var(--rdl-fs-small); color: var(--rdl-muted); margin: 0; }
.rdl-bon__url {
	word-break: break-all;
	font-size: var(--rdl-fs-small);
	background: var(--rdl-vlak);
	padding: .6rem .8rem;
	border-radius: var(--rdl-r);
	margin: .4rem 0;
}
.rdl-terugdraaien {
	padding: .9rem 1.1rem;
	background: var(--rdl-vlak);
	border-radius: var(--rdl-r);
}
.rdl-terugdraaien p { margin-top: 0; }

@media (min-width: 620px) {
	.rdl-weekdagen__rij { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
	.rdl-boeking { grid-template-columns: 1fr auto; align-items: center; }
	.rdl-boeking__wanneer { grid-column: 1; }
	.rdl-boeking__regel { grid-column: 1; }
	.rdl-boeking__acties { grid-column: 2; grid-row: 1 / span 3; }
	.rdl-boeking .btn { width: auto; }
	.rdl-keuze { grid-auto-flow: column; justify-content: start; }
	.rdl-keuze .btn { width: auto; }
}

@media (max-width: 619px) {
	.rdl-form__paar { grid-template-columns: 1fr; }
	.rdl-form__paar:has(#rdl-postcode),
	.rdl-form__paar:has(#rdl-t-postcode) { grid-template-columns: 1.4fr 1fr; }
}

.rdl-dag--geweest { --rdl-status: var(--rdl-gesloten); --rdl-status-vlak: var(--rdl-gesloten-vlak); }
.rdl-dag--geweest .rdl-dag__link {
	background: var(--rdl-gesloten-vlak);
	color: var(--rdl-muted);
	cursor: default;
	background-image: none;
}

@media (max-width: 899px) {
	.rdl-dag--geweest { display: none; }
	.rdl-maand:not(:has(.rdl-dag:not(.rdl-dag--geweest)))::after {
		content: attr(data-leeg);
		display: block;
		padding: 1rem 1.2rem;
		background: var(--rdl-vlak);
		border-radius: var(--rdl-r);
		color: var(--rdl-muted);
		font-size: var(--rdl-fs-small);
	}
}

.rdl-saldo {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 1rem 0 0;
	padding: .8rem 1.1rem;
	background: var(--rdl-vlak);
	border-radius: var(--rdl-r);
	font-size: var(--rdl-fs-small);
}
.rdl-saldo .ww-icon,
.rdl-saldo .rdl-icon { flex: none; color: var(--rdl-primair); }

.rdl-diensten__kop { font-family: var(--rdl-font); margin-bottom: 1rem; }
.rdl-diensten__rij { display: grid; gap: 1rem; }
.rdl-dienst {
	display: grid;
	gap: .4rem;
	padding: 1.3rem;
	color: var(--rdl-text);
	text-decoration: none;
	background: var(--rdl-surface);
	border: 1px solid var(--rdl-border);
	border-radius: var(--rdl-r-md);
	box-shadow: var(--rdl-schaduw);
	transition: transform var(--rdl-dur) var(--rdl-ease), box-shadow var(--rdl-dur) var(--rdl-ease);
}
.rdl-dienst:hover,
.rdl-dienst:focus-visible { transform: translateY(-2px); box-shadow: var(--rdl-schaduw-md); }
.rdl-dienst__naam { font-family: var(--rdl-font); font-size: 1.2rem; font-weight: 600; }
.rdl-dienst__tekst { color: var(--rdl-muted); font-size: var(--rdl-fs-small); }
.rdl-dienst__prijs { color: var(--rdl-primair); font-weight: 600; font-size: var(--rdl-fs-small); }
/* De regel die zegt of je hier meteen terechtkunt. Klein en rustig: hij stuurt, hij schreeuwt niet. */
.rdl-dienst__stap {
  margin-top: .15rem;
  font-size: .82rem;
  color: var(--rdl-muted);
}
.rdl-dienst__stap--eerst { color: var(--rdl-primair); font-weight: 600; }
/* De kennismaking krijgt een randje mee, zodat de eerste stap ook zonder tekst opvalt. */
.rdl-dienst--eerst { box-shadow: inset 0 0 0 2px var(--rdl-primair); }

.rdl-gekozen {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 .6rem;
	font-family: var(--rdl-font);
	font-size: 1.2rem;
	font-weight: 600;
}
.rdl-gekozen .link-cta { font-family: var(--font-body, inherit); font-size: var(--rdl-fs-small); font-weight: 600; }

.rdl-periode-keuze,
.rdl-tijdsloten { border: 0; padding: 0; margin: 0 0 .4rem; }
.rdl-periode-keuze legend,
.rdl-tijdsloten legend {
	font-family: var(--rdl-font);
	font-size: 1.15rem;
	font-weight: 600;
	padding: 0;
	margin-bottom: .3rem;
}

.rdl-slotdagen { display: grid; gap: .8rem; margin-top: .8rem; }
.rdl-slotdag {
	padding: .8rem 1rem;
	background: var(--rdl-surface);
	border: 1px solid var(--rdl-border);
	border-radius: var(--rdl-r);
}
.rdl-slotdag__naam { display: block; font-weight: 600; margin-bottom: .5rem; }
.rdl-slotdag__naam::first-letter { text-transform: uppercase; }
.rdl-slotdag__tijden { display: flex; flex-wrap: wrap; gap: .5rem; }
.rdl-slot__vink { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rdl-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	min-height: 48px;
	padding: .4rem 1rem;
	border: 2px solid var(--rdl-veldrand);
	border-radius: var(--rdl-pill);
	cursor: pointer;
	font-weight: 600;
	transition: border-color var(--rdl-dur) var(--rdl-ease), background var(--rdl-dur) var(--rdl-ease);
}
.rdl-slot__vink:checked + .rdl-slot { border-color: var(--rdl-vrij); background: var(--rdl-vrij-vlak); }
.rdl-slot__vink:focus-visible + .rdl-slot { outline: 2px solid var(--rdl-bijna); outline-offset: 2px; }

@media (min-width: 620px) {
	/* Twee kolommen en geen auto-fit: de inhoudskolom is bewust smal gehouden voor leesbaarheid,
	   en daar passen vier kaarten netjes als twee bij twee. Met auto-fit bleef de vierde alleen
	   op een tweede regel achter. */
	.rdl-diensten__rij { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.rdl-dienst { transition: none; }
	.rdl-dienst:hover,
	.rdl-dienst:focus-visible { transform: none; }
}

.rdl a.rdl-dienst,
.rdl a.rdl-dag__link,
.rdl a.rdl-dienst *,
.rdl a.rdl-dag__link * { text-decoration: none; }
.rdl a.rdl-dienst:hover .rdl-dienst__naam { text-decoration: underline; text-underline-offset: 3px; }

/* De rondes onder een dag in de kalender. Klein en op één regel, want er kunnen er twee onder
   een dagcijfer staan en de cel mag niet uitrekken. */
.rdl-dag__ronde {
  /* Op smal scherm is de dag een regel met vier kolommen. Zonder deze plaatsing belanden de
     rondes in kolom 1 en 2 van de volgende rij en schuiven ze over elkaar heen. */
  grid-column: 4;
  display: flex;
  gap: .35em;
  align-items: baseline;
  font-size: .7rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--rdl-muted);
}
.rdl-dag__klok { font-variant-numeric: tabular-nums; font-weight: 600; }
.rdl-dag__ronde--vol { text-decoration: line-through; opacity: .75; }
.rdl-dag__ronde--gesloten { opacity: .6; font-style: italic; }

.rdl-boeking__tijd {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--rdl-muted);
}