/**
 * Drie-O NIS2-check - front-end styling.
 *
 * Alle waarden komen uit de huisstijl van drieo.nl (Elementor kit 10):
 * de global colors, Inter voor koppen en Open Sans voor tekst, de rondingen
 * 25 / 15 / 10 px en het geel-oranje verloop van de call-to-action.
 *
 * Opbouw van dit bestand:
 *   1.  Ontwerptokens
 *   2.  Basis en layout
 *   3.  Kaarten
 *   4.  Typografie
 *   5.  Knoppen
 *   6.  Voortgang
 *   7.  Vraag en toelichting
 *   8.  Antwoorden
 *   9.  Resultaatscherm: indeling, score-ring en contact
 *   10. Resultaatscherm: de vier kaarten
 *   11. Resultaatscherm: de vierde, afgeschermde kaart
 *   12. Formulier
 *   13. Bevestiging
 *   14. Beweging en toegankelijkheid
 *
 * Let op de specificiteit: het thema (Hello Elementor) en de Elementor-kit
 * stylen losse elementen via de body-klasse, bijvoorbeeld
 * `.elementor-kit-10 h2 { font-size: 48px }` en `input[type=text] { ... }`.
 * Zulke selectors zijn specifieker dan een enkele klasse. Regels die op een
 * kop, een link of een invoerveld landen, krijgen daarom `.drieo-nis2` ervoor,
 * zodat ze het altijd winnen van de site-brede regels.
 */

/* ==========================================================================
   1. Ontwerptokens
   ========================================================================== */

.drieo-nis2-main,
.drieo-nis2 {
	/* Global colors uit de Elementor-kit. */
	--nis2-blue: #0978bf;         /* primary   */
	--nis2-blue-accent: #147ac0;  /* accent    */
	--nis2-navy: #242d54;         /* secondary */
	--nis2-yellow: #fcb217;
	--nis2-orange: #e15c11;
	--nis2-cyan: #b5dfe5;
	--nis2-green: #40bd18;
	--nis2-red: #d60909;
	--nis2-white: #ffffff;
	--nis2-grey: #f5f5f5;
	--nis2-line: #dbdbdb;

	/* Afgeleide tinten voor vlakken en tekst op vlakken. */
	--nis2-blue-dark: #06598e;
	--nis2-blue-soft: #eef6fc;
	--nis2-cyan-soft: #f1fafb;
	--nis2-ink-soft: #5a6072;
	--nis2-green-ink: #1f6b0c;
	--nis2-green-soft: #eef8e9;
	--nis2-orange-ink: #9c3d06;
	--nis2-orange-soft: #fdf0e7;
	--nis2-red-ink: #9c0505;
	--nis2-red-soft: #fdeaea;

	/* Het verloop van de Drie-O-knop. */
	--nis2-cta: linear-gradient(90deg, var(--nis2-yellow) 0%, var(--nis2-orange) 100%);

	/* Typografie. */
	--nis2-font-head: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
	--nis2-font-body: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

	/*
	 * Rondingen: 15px voor kaarten en 10px voor velden, net als op de site.
	 * De site zet pillen op 25px; dat is precies de helft van een knop van 50px
	 * hoog. 999px geeft daar hetzelfde resultaat, maar blijft ook bij een hogere
	 * knop of een dunne balk een echte pil in plaats van afgevlakte zijkanten.
	 */
	--nis2-radius-pill: 999px;
	--nis2-radius-card: 15px;
	--nis2-radius-field: 10px;

	/* Schaduwen. */
	--nis2-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	--nis2-shadow-deep: 0 0 25px rgba(0, 0, 0, 0.12);
	--nis2-shadow-cta: 0 0 12px 0 rgba(225, 92, 17, 0.55);

	/* Ritme. Het resultaatscherm mag breed, de rest blijft een leeskolom. */
	--nis2-column: 820px;
	--nis2-column-breed: 1400px;
	--nis2-card-padding: 40px;
	--nis2-gap: 24px;
}

/* ==========================================================================
   2. Basis en layout
   ========================================================================== */

.drieo-nis2-main {
	background: var(--nis2-grey);
}

.drieo-nis2 {
	max-width: var(--nis2-column-breed);
	margin: 0 auto;
	padding: 64px 20px 88px;
	color: var(--nis2-navy);
	font-family: var(--nis2-font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/*
 * De buitenmaat is de brede maat, want het resultaat mag over de volle breedte.
 * Vraag, formulier en bevestiging zijn lopende tekst en blijven een smalle
 * leeskolom; anders worden de regels te lang om prettig te lezen.
 */
.drieo-nis2 .drieo-nis2__page-intro,
.drieo-nis2 .drieo-nis2__noscript,
.drieo-nis2 .drieo-nis2__screen {
	max-width: var(--nis2-column);
	margin-left: auto;
	margin-right: auto;
}

.drieo-nis2 .drieo-nis2__screen--resultaat {
	max-width: none;
}

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

.drieo-nis2 [hidden] {
	display: none !important;
}

/* Vrije tekst die de redacteur boven de check zet. */
.drieo-nis2 .drieo-nis2__page-intro {
	margin-bottom: 32px;
}

.drieo-nis2 .drieo-nis2__page-intro > *:last-child {
	margin-bottom: 0;
}

.drieo-nis2 .drieo-nis2__page-intro h1,
.drieo-nis2 .drieo-nis2__page-intro h2,
.drieo-nis2 .drieo-nis2__page-intro h3 {
	font-family: var(--nis2-font-head);
	font-weight: 800;
	line-height: 1.15;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__page-intro a {
	color: var(--nis2-blue);
}

/*
 * Op een telefoon telt elke pixel boven de vouw: minder lucht boven de kaart en
 * een iets kleinere binnenmarge, zodat de eerste knop eerder in beeld staat.
 */
@media (max-width: 767px) {
	.drieo-nis2 {
		padding: 24px 16px 56px;
		font-size: 16px;
		--nis2-card-padding: 22px;
	}

	.drieo-nis2 .drieo-nis2__page-intro {
		margin-bottom: 20px;
	}
}

/* ==========================================================================
   3. Kaarten
   ========================================================================== */

.drieo-nis2 .drieo-nis2__card {
	background: var(--nis2-white);
	border-radius: var(--nis2-radius-card);
	box-shadow: var(--nis2-shadow);
	padding: var(--nis2-card-padding);
}

.drieo-nis2 .drieo-nis2__card > *:last-child {
	margin-bottom: 0;
}

.drieo-nis2 .drieo-nis2__noscript {
	background: var(--nis2-cyan-soft);
	border-left: 5px solid var(--nis2-cyan);
	border-radius: var(--nis2-radius-card);
	padding: 28px 32px;
}

.drieo-nis2 .drieo-nis2__noscript h2 {
	margin: 0 0 8px;
	font-family: var(--nis2-font-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__noscript p {
	margin: 0;
	color: var(--nis2-ink-soft);
}

/* ==========================================================================
   4. Typografie
   ========================================================================== */

.drieo-nis2 .drieo-nis2__eyebrow {
	margin: 0 0 12px;
	font-family: var(--nis2-font-head);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--nis2-blue);
}

.drieo-nis2 .drieo-nis2__title {
	margin: 0 0 16px;
	font-family: var(--nis2-font-head);
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--nis2-navy);
}

/* De h1 op het startscherm mag groter, net als elders op de site. */
.drieo-nis2 h1.drieo-nis2__title {
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.1;
}

.drieo-nis2 .drieo-nis2__lead {
	margin: 0 0 16px;
	font-size: 1.06em;
	color: var(--nis2-ink-soft);
}

.drieo-nis2 .drieo-nis2__lead strong {
	color: var(--nis2-navy);
}

/* Korte kenmerken op het startscherm: 10 vragen, 2 minuten, direct resultaat. */
.drieo-nis2 .drieo-nis2__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 24px 0 28px;
	padding: 0;
}

.drieo-nis2 .drieo-nis2__meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px 7px 12px;
	border-radius: var(--nis2-radius-pill);
	background: var(--nis2-blue-soft);
	font-size: 15px;
	font-weight: 600;
	color: var(--nis2-blue-dark);
}

.drieo-nis2 .drieo-nis2__meta li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nis2-cta);
}

/* ----------------------------------------------- Inklapbare uitleg (mobiel) */

/*
 * De tweede en derde alinea van het startscherm. Op een breed scherm staat dit
 * blok gewoon open en blijft de knop eronder verborgen; JavaScript klapt het
 * alleen op een telefoon dicht, zodat de startknop daar boven de vouw past. De
 * tekst blijft dus volledig, hij staat alleen een tik verderop.
 */
.drieo-nis2 .drieo-nis2__meer > *:last-child {
	margin-bottom: 0;
}

.drieo-nis2 .drieo-nis2__meer-knop {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 9px;
	appearance: none;
	padding: 9px 16px 9px 14px;
	border: 1px solid var(--nis2-line);
	border-radius: var(--nis2-radius-pill);
	background: var(--nis2-white);
	font-family: var(--nis2-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--nis2-blue);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.drieo-nis2 .drieo-nis2__meer-knop:hover {
	border-color: var(--nis2-blue);
	background: var(--nis2-blue-soft);
	color: var(--nis2-blue-dark);
}

.drieo-nis2 .drieo-nis2__meer-knop:focus-visible {
	outline: 3px solid var(--nis2-navy);
	outline-offset: 3px;
}

/* Pijltje omlaag; het draait om zodra het blok openstaat. */
.drieo-nis2 .drieo-nis2__meer-pijl {
	width: 8px;
	height: 8px;
	margin-top: -3px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.drieo-nis2 .drieo-nis2__meer-knop[aria-expanded="true"] .drieo-nis2__meer-pijl {
	margin-top: 3px;
	transform: rotate(-135deg);
}

/*
 * Startscherm op een telefoon.
 *
 * De kaart wordt een flexkolom, zodat de volgorde op het scherm los staat van
 * die in de broncode: eerst de kop met de eerste alinea, dan de kenmerken en
 * meteen de startknop, en pas daaronder de uitklapknop met de rest van de
 * uitleg. Wie wil beginnen hoeft dus niet te scrollen; wie eerst wil lezen,
 * vindt de hele tekst een tik verderop.
 */
@media (max-width: 767px) {
	.drieo-nis2 .drieo-nis2__card--intro {
		display: flex;
		flex-direction: column;
	}

	.drieo-nis2 .drieo-nis2__card--intro .drieo-nis2__eyebrow {
		order: 1;
		margin-bottom: 8px;
	}

	.drieo-nis2 .drieo-nis2__card--intro .drieo-nis2__title {
		order: 2;
		margin-bottom: 12px;
	}

	.drieo-nis2 .drieo-nis2__card--intro .drieo-nis2__lead--eerste {
		order: 3;
		margin-bottom: 0;
	}

	.drieo-nis2 .drieo-nis2__card--intro .drieo-nis2__meta {
		order: 4;
		margin: 16px 0 18px;
	}

	.drieo-nis2 .drieo-nis2__card--intro .drieo-nis2__btn--primary {
		order: 5;
	}

	.drieo-nis2 .drieo-nis2__card--intro .drieo-nis2__meer-knop {
		order: 6;
		margin-top: 18px;
	}

	.drieo-nis2 .drieo-nis2__card--intro .drieo-nis2__meer {
		order: 7;
		margin-top: 16px;
	}

	/* Iets kleiner, zodat de kop hooguit twee regels kost. */
	.drieo-nis2 h1.drieo-nis2__title {
		font-size: clamp(25px, 6.6vw, 32px);
	}

	.drieo-nis2 .drieo-nis2__meta li {
		padding: 6px 13px 6px 10px;
		font-size: 14px;
	}
}

/* ==========================================================================
   5. Knoppen
   ========================================================================== */

.drieo-nis2 .drieo-nis2__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	appearance: none;
	border: 2px solid transparent;
	border-radius: var(--nis2-radius-pill);
	padding: 15px 30px;
	background: none;
	font-family: var(--nis2-font-body);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	/*
	 * Geen background-image in de overgang. Een verloop laat zich niet naar een
	 * effen kleur animeren; de browser springt dan halverwege om en dat ziet
	 * eruit als een flits. De hover werkt daarom met filter en schaduw.
	 */
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
		color 0.15s ease, filter 0.15s ease, transform 0.12s ease;
}

.drieo-nis2 .drieo-nis2__btn:focus-visible {
	outline: 3px solid var(--nis2-navy);
	outline-offset: 3px;
}

/* Primair: het geel-oranje verloop van de site. */
.drieo-nis2 .drieo-nis2__btn--primary {
	background-image: var(--nis2-cta);
	color: var(--nis2-white);
}

.drieo-nis2 .drieo-nis2__btn--primary:hover,
.drieo-nis2 .drieo-nis2__btn--primary:focus-visible {
	/* Het verloop blijft staan en wordt alleen iets dieper. */
	filter: brightness(0.94) saturate(1.08);
	box-shadow: var(--nis2-shadow-cta);
	color: var(--nis2-white);
	transform: translateY(-1px);
}

.drieo-nis2 .drieo-nis2__btn--primary[disabled] {
	background-image: none;
	background-color: var(--nis2-line);
	box-shadow: none;
	color: var(--nis2-ink-soft);
	cursor: default;
	filter: none;
	transform: none;
}

/* Tekstknop, voor "vorige". */
.drieo-nis2 .drieo-nis2__btn--ghost {
	padding: 8px 4px;
	font-weight: 600;
	color: var(--nis2-blue);
}

.drieo-nis2 .drieo-nis2__btn--ghost:hover {
	color: var(--nis2-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.drieo-nis2 .drieo-nis2__back {
	margin-top: 4px;
}

.drieo-nis2 .drieo-nis2__back::before {
	content: "\2190";
	font-size: 1.1em;
	line-height: 1;
}

/* Knoppenrij. */
.drieo-nis2 .drieo-nis2__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 4px;
}

@media (max-width: 560px) {
	.drieo-nis2 .drieo-nis2__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.drieo-nis2 .drieo-nis2__btn--primary {
		width: 100%;
	}
}

/* ==========================================================================
   6. Voortgang
   ========================================================================== */

.drieo-nis2 .drieo-nis2__progress {
	margin-bottom: 32px;
}

.drieo-nis2 .drieo-nis2__progress-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}

.drieo-nis2 .drieo-nis2__progress-label {
	margin: 0;
	font-family: var(--nis2-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__progress-pct {
	font-size: 14px;
	font-weight: 600;
	color: var(--nis2-ink-soft);
}

.drieo-nis2 .drieo-nis2__progress-track {
	height: 8px;
	border-radius: var(--nis2-radius-pill);
	background: var(--nis2-line);
	overflow: hidden;
}

.drieo-nis2 .drieo-nis2__progress-fill {
	display: block;
	height: 100%;
	width: 10%;
	border-radius: var(--nis2-radius-pill);
	background: linear-gradient(90deg, var(--nis2-blue-accent) 0%, var(--nis2-blue) 100%);
	transition: width 0.3s ease;
}

/* ==========================================================================
   7. Vraag en toelichting
   ========================================================================== */

.drieo-nis2 .drieo-nis2__question-text {
	margin: 0 0 14px;
	font-family: var(--nis2-font-head);
	font-size: clamp(21px, 2.8vw, 26px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__question-text:focus {
	outline: none;
}

.drieo-nis2 .drieo-nis2__info {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 9px;
	border: 1px solid var(--nis2-line);
	border-radius: var(--nis2-radius-pill);
	background: var(--nis2-white);
	font-family: var(--nis2-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--nis2-blue);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.drieo-nis2 .drieo-nis2__info:hover {
	border-color: var(--nis2-blue);
	background: var(--nis2-blue-soft);
	color: var(--nis2-blue-dark);
}

.drieo-nis2 .drieo-nis2__info:focus-visible {
	outline: 3px solid var(--nis2-navy);
	outline-offset: 3px;
}

.drieo-nis2 .drieo-nis2__info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--nis2-blue);
	color: var(--nis2-white);
	font-family: var(--nis2-font-head);
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
}

.drieo-nis2 .drieo-nis2__tooltip {
	margin: 14px 0 0;
	padding: 16px 20px;
	background: var(--nis2-cyan-soft);
	border-left: 5px solid var(--nis2-cyan);
	border-radius: var(--nis2-radius-field);
	font-size: 15.5px;
	color: var(--nis2-ink-soft);
}

/* ==========================================================================
   8. Antwoorden
   ========================================================================== */

.drieo-nis2 .drieo-nis2__answers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 28px 0 24px;
}

@media (max-width: 560px) {
	.drieo-nis2 .drieo-nis2__answers {
		grid-template-columns: 1fr;
	}
}

.drieo-nis2 .drieo-nis2__answer {
	display: flex;
	align-items: center;
	gap: 14px;
	appearance: none;
	background: var(--nis2-white);
	border: 2px solid var(--nis2-line);
	border-radius: var(--nis2-radius-card);
	padding: 18px 20px;
	font-family: var(--nis2-font-body);
	font-size: 17px;
	font-weight: 600;
	color: var(--nis2-navy);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease,
		transform 0.12s ease;
}

.drieo-nis2 .drieo-nis2__answer:hover {
	border-color: var(--nis2-blue);
	background: var(--nis2-blue-soft);
	transform: translateY(-1px);
}

.drieo-nis2 .drieo-nis2__answer:focus-visible {
	outline: 3px solid var(--nis2-navy);
	outline-offset: 3px;
}

/* Rondje links, dat bij de keuze een vinkje wordt. */
.drieo-nis2 .drieo-nis2__answer-marker {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 2px solid var(--nis2-line);
	border-radius: 50%;
	background: var(--nis2-white);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.drieo-nis2 .drieo-nis2__answer-marker::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 6px;
	height: 11px;
	border: solid var(--nis2-white);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.drieo-nis2 .drieo-nis2__answer-label {
	min-width: 0;
}

.drieo-nis2 .drieo-nis2__answer:hover .drieo-nis2__answer-marker {
	border-color: var(--nis2-blue);
}

.drieo-nis2 .drieo-nis2__answer.is-selected {
	border-color: var(--nis2-blue);
	background: var(--nis2-blue-soft);
	box-shadow: inset 0 0 0 1px var(--nis2-blue);
}

.drieo-nis2 .drieo-nis2__answer.is-selected .drieo-nis2__answer-marker {
	border-color: var(--nis2-blue);
	background: var(--nis2-blue);
}

.drieo-nis2 .drieo-nis2__answer.is-selected .drieo-nis2__answer-marker::after {
	opacity: 1;
}

/* ==========================================================================
   9. Resultaatscherm: indeling, score-ring en contact
   ========================================================================== */

/* Twee kolommen: links de score en het contact, rechts de vier kaarten. */
.drieo-nis2 .drieo-nis2__resultaat {
	display: grid;
	grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
	gap: 24px;
	align-items: start;
}

.drieo-nis2 .drieo-nis2__zijkolom {
	display: grid;
	gap: 16px;
	/* Blijft in beeld terwijl je de kaarten langsloopt. */
	position: sticky;
	top: 24px;
}

/*
 * Container voor de kaarten. De kaarten kijken naar de breedte van deze kolom
 * en niet naar die van het venster: de kolom is 70% breed, dus een mediaquery
 * op vensterbreedte zou steeds het verkeerde moment pakken.
 */
.drieo-nis2 .drieo-nis2__hoofdkolom {
	min-width: 0;
	container-type: inline-size;
	container-name: nis2-kaarten;
}

/*
 * Eén kolom vanaf hier. De zijkolom valt met display: contents weg als kader,
 * zodat score, kaarten en contact zelf de volgorde bepalen: eerst de score,
 * dan meteen de drie aandachtspunten, en pas daarna het contactblok en de knop
 * om opnieuw te doen. Anders staat er eerst een halve schermhoogte contact
 * tussen de uitkomst en de punten waar het om gaat.
 */
@media (max-width: 900px) {
	.drieo-nis2 .drieo-nis2__resultaat {
		display: flex;
		flex-direction: column;
		gap: 16px;
		/*
		 * Moet expliciet, want hierboven staat align-items: start voor de twee
		 * kolommen. In een flexkolom betekent dat "niet uitrekken" en krimpt elk
		 * blok tot zijn eigen breedte. De hoofdkolom is een container met
		 * container-type: inline-size; die berekent zijn breedte zonder naar de
		 * inhoud te kijken en wordt dan nul breed.
		 */
		align-items: stretch;
	}

	.drieo-nis2 .drieo-nis2__zijkolom {
		display: contents;
		position: static;
	}

	.drieo-nis2 .drieo-nis2__gauge {
		order: 1;
	}

	.drieo-nis2 .drieo-nis2__hoofdkolom {
		order: 2;
	}

	.drieo-nis2 .drieo-nis2__contact {
		order: 3;
	}

	.drieo-nis2 .drieo-nis2__actions--stil {
		order: 4;
	}
}

/*
 * Op een telefoon staat de score naast de tekst in plaats van erboven: dat
 * scheelt ongeveer een halve schermhoogte voordat het eerste aandachtspunt
 * begint. Hetzelfde geldt voor het contactblok verderop.
 */
@media (max-width: 767px) {
	.drieo-nis2 .drieo-nis2__gauge {
		flex-direction: row;
		align-items: center;
		gap: 18px;
		padding: 16px 18px;
		text-align: left;
	}

	.drieo-nis2 .drieo-nis2__gauge-ring {
		width: 92px;
		height: 92px;
	}

	.drieo-nis2 .drieo-nis2__gauge-value {
		font-size: 30px;
	}

	.drieo-nis2 .drieo-nis2__gauge-label {
		font-size: 19px;
	}
}

/* Op dit scherm bestaat groen niet. De bovenste toon is geel: een korte check
   dekt nooit alles, dus "klaar" bestaat hier bewust niet. */
.drieo-nis2 .drieo-nis2__gauge--geel {
	--toon: var(--nis2-yellow);
	--toon-ink: #8a5a06;
	--toon-soft: #fff6e3;
}

.drieo-nis2 .drieo-nis2__gauge--oranje {
	--toon: var(--nis2-orange);
	--toon-ink: var(--nis2-orange-ink);
	--toon-soft: var(--nis2-orange-soft);
}

.drieo-nis2 .drieo-nis2__gauge--rood {
	--toon: var(--nis2-red);
	--toon-ink: var(--nis2-red-ink);
	--toon-soft: var(--nis2-red-soft);
}

.drieo-nis2 .drieo-nis2__gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 26px 22px;
	border-radius: var(--nis2-radius-card);
	background: var(--toon-soft, var(--nis2-grey));
	border: 1px solid var(--toon, var(--nis2-line));
	text-align: center;
}

.drieo-nis2 .drieo-nis2__gauge-ring {
	position: relative;
	flex: 0 0 auto;
	width: 132px;
	height: 132px;
}

.drieo-nis2 .drieo-nis2__gauge-ring svg {
	display: block;
	width: 100%;
	height: 100%;
	/* Beginpunt bovenaan in plaats van rechts. */
	transform: rotate(-90deg);
}

.drieo-nis2 .drieo-nis2__gauge-track {
	fill: none;
	stroke: var(--nis2-white);
	stroke-width: 12;
}

.drieo-nis2 .drieo-nis2__gauge-fill {
	fill: none;
	stroke: var(--toon, var(--nis2-blue));
	stroke-width: 12;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.7s ease;
}

.drieo-nis2 .drieo-nis2__gauge-value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nis2-font-head);
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
	color: var(--toon-ink, var(--nis2-navy));
}

.drieo-nis2 .drieo-nis2__gauge-text {
	min-width: 0;
}

.drieo-nis2 .drieo-nis2__gauge-eyebrow {
	margin: 0 0 5px;
	font-family: var(--nis2-font-head);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--toon-ink, var(--nis2-ink-soft));
	opacity: 0.85;
}

.drieo-nis2 .drieo-nis2__gauge-label {
	margin: 0;
	font-family: var(--nis2-font-head);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--toon-ink, var(--nis2-navy));
}

/* --------------------------------------------------------------- Contact */

.drieo-nis2 .drieo-nis2__contact {
	padding: 22px 22px 20px;
	border: 1px solid var(--nis2-line);
	border-radius: var(--nis2-radius-card);
	background: var(--nis2-white);
	box-shadow: var(--nis2-shadow);
}

.drieo-nis2 .drieo-nis2__contact-kop {
	margin: 0 0 6px;
	font-family: var(--nis2-font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__contact-tekst {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--nis2-ink-soft);
}

/* Een gezicht bij het bedrijf: foto groot, naam en functie eronder. */
.drieo-nis2 .drieo-nis2__persoon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--nis2-line);
	text-align: center;
}

.drieo-nis2 .drieo-nis2__persoon-foto {
	flex: 0 0 auto;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--nis2-blue-soft);
	box-shadow: 0 0 0 4px var(--nis2-white), 0 0 0 5px var(--nis2-line);
}

/* Terugval zolang er geen foto is ingesteld: de initialen in een rondje. */
.drieo-nis2 .drieo-nis2__persoon-foto--letters {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nis2-font-head);
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
	color: var(--nis2-blue-dark);
}

.drieo-nis2 .drieo-nis2__persoon-tekst {
	min-width: 0;
}

.drieo-nis2 .drieo-nis2__persoon-naam {
	margin: 0;
	font-family: var(--nis2-font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__persoon-functie {
	margin: 3px 0 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--nis2-ink-soft);
}

.drieo-nis2 .drieo-nis2__contact-lijst {
	list-style: none;
	display: grid;
	gap: 5px;
	margin: 14px 0 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

.drieo-nis2 .drieo-nis2__contact-lijst a {
	color: var(--nis2-blue);
	text-decoration: none;
}

.drieo-nis2 .drieo-nis2__contact-lijst a:hover {
	color: var(--nis2-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Op een telefoon staat het contactblok onder de aandachtspunten. De foto gaat
 * dan naast de naam in plaats van erboven: het gezicht blijft, maar het blok
 * kost een stuk minder hoogte.
 */
@media (max-width: 767px) {
	.drieo-nis2 .drieo-nis2__contact {
		padding: 18px;
	}

	.drieo-nis2 .drieo-nis2__persoon {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		margin-top: 14px;
		padding-top: 14px;
		text-align: left;
	}

	.drieo-nis2 .drieo-nis2__persoon-foto {
		width: 72px;
		height: 72px;
	}

	.drieo-nis2 .drieo-nis2__persoon-foto--letters {
		font-size: 26px;
	}

	.drieo-nis2 .drieo-nis2__contact-lijst {
		text-align: left;
	}
}

/* ==========================================================================
   10. Resultaatscherm: de vier kaarten
   ========================================================================== */

.drieo-nis2 .drieo-nis2__title--stenen {
	font-size: clamp(20px, 2.4vw, 25px);
	margin-bottom: 14px;
}

.drieo-nis2 .drieo-nis2__stones {
	list-style: none;
	counter-reset: nis2-steen;
	display: grid;
	gap: 16px;
	margin: 0 0 16px;
	padding: 0;
}

.drieo-nis2 .drieo-nis2__stone--geel {
	--toon: var(--nis2-yellow);
	--toon-ink: #8a5a06;
	--toon-soft: #fff6e3;
}

.drieo-nis2 .drieo-nis2__stone--oranje {
	--toon: var(--nis2-orange);
	--toon-ink: var(--nis2-orange-ink);
	--toon-soft: var(--nis2-orange-soft);
}

.drieo-nis2 .drieo-nis2__stone--rood {
	--toon: var(--nis2-red);
	--toon-ink: var(--nis2-red-ink);
	--toon-soft: var(--nis2-red-soft);
}

/*
 * Brede kaart: kop over de volle breedte, daaronder de tekstkolommen. De
 * verdeling van die kolommen staat hieronder in @container geregeld. Twee
 * kolommen is de basis, ook voor browsers zonder container-queries.
 *
 * De kop is een knop en de tekst zit in een eigen blok. Op een telefoon klapt
 * JavaScript de tweede en derde kaart dicht, zodat de drie punten samen in
 * beeld passen; op een breed scherm staat alles gewoon open en gedraagt de kop
 * zich als gewone tekst.
 */
.drieo-nis2 .drieo-nis2__stone {
	counter-increment: nis2-steen;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	padding: 22px 26px 20px;
	border: 1px solid var(--nis2-line);
	border-left: 5px solid var(--toon, var(--nis2-blue));
	border-radius: var(--nis2-radius-card);
	background: var(--nis2-white);
	box-shadow: var(--nis2-shadow);
}

.drieo-nis2 .drieo-nis2__stone-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 34px;
}

.drieo-nis2 .drieo-nis2__stone-thema {
	margin: 0;
	font-family: var(--nis2-font-head);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__stone-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	width: 100%;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

/* Het thema is een knop, maar mag er niet als een knop uitzien. */
.drieo-nis2 .drieo-nis2__stone-toggle:hover,
.drieo-nis2 .drieo-nis2__stone-toggle:focus {
	background: none;
	color: inherit;
	opacity: 1;
}

.drieo-nis2 .drieo-nis2__stone-toggle:focus-visible {
	outline: 3px solid var(--nis2-navy);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Genummerd, want de drie punten staan op volgorde van belang. */
.drieo-nis2 .drieo-nis2__stone-thema-tekst::before {
	content: counter(nis2-steen) ". ";
	color: var(--toon-ink, var(--nis2-navy));
}

/* Het pijltje dat aangeeft dat de kaart open- en dichtklapt. */
.drieo-nis2 .drieo-nis2__stone-pijl {
	display: block;
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin: -3px 2px 0 auto;
	border: solid var(--nis2-ink-soft);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.drieo-nis2 .drieo-nis2__stone-toggle[aria-expanded="true"] .drieo-nis2__stone-pijl {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.drieo-nis2 .drieo-nis2__stone-chip {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--nis2-radius-pill);
	background: var(--toon-ink, var(--nis2-navy));
	color: var(--nis2-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.drieo-nis2 .drieo-nis2__stone-blok {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nis2-navy);
}

/*
 * De labels staan in kapitalen op een eigen regel. Regelhoogte, marge en een
 * halve regel lucht erboven staan hier expliciet: kapitalen van Inter reiken
 * hoog en lopen anders tegen de regel erboven aan, waardoor ze afgesneden
 * lijken.
 */
.drieo-nis2 .drieo-nis2__stone-blok strong {
	display: block;
	margin: 0 0 6px;
	padding-top: 3px;
	font-family: var(--nis2-font-head);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nis2-navy);
}

/* De snelle tip loopt over de volle breedte en springt eruit: dit is het
   stukje dat ze vandaag zelf kunnen doen. */
.drieo-nis2 .drieo-nis2__stone-blok--tip {
	grid-column: 1 / -1;
	margin-top: 2px;
	padding: 13px 16px;
	border-radius: var(--nis2-radius-field);
	background: var(--toon-soft, var(--nis2-grey));
}

.drieo-nis2 .drieo-nis2__stone-blok--tip strong {
	color: var(--toon-ink, var(--nis2-navy));
}

/*
 * Twee gelijke kolommen met de tip als strook eronder. Op een smalle kaart
 * gaat alles onder elkaar; dat hangt af van de breedte van de kolom zelf en
 * niet van die van het venster.
 */
@container nis2-kaarten (max-width: 620px) {
	.drieo-nis2 .drieo-nis2__stone-body,
	.drieo-nis2 .drieo-nis2__locked-blur {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

@media (max-width: 767px) {
	.drieo-nis2 .drieo-nis2__stone {
		padding: 16px 18px;
		gap: 12px;
	}

	.drieo-nis2 .drieo-nis2__stones {
		gap: 12px;
	}

	.drieo-nis2 .drieo-nis2__stone-thema {
		font-size: 17px;
	}

	.drieo-nis2 .drieo-nis2__stone-toggle {
		/* Iets meer aanraakvlak zonder dat de kaart hoger wordt. */
		padding: 2px 0;
	}
}

/* ==========================================================================
   11. Resultaatscherm: de vierde, afgeschermde kaart
   ========================================================================== */

/*
 * Zelfde opzet als een punt hierboven, in de rode toon, maar licht vervaagd.
 * De tekst erachter is dummy: geen echte rapportinhoud, dus er valt niets te
 * lezen door de blur weg te halen en er staat ook niets in de paginabron dat
 * een uitspraak doet over dit bedrijf.
 *
 * Blur en overlay liggen in dezelfde grid-cel. Daardoor is de kaart altijd zo
 * hoog als de langste van de twee en valt de knoptekst er nooit buiten.
 */
.drieo-nis2 .drieo-nis2__locked {
	--toon: var(--nis2-red);
	--toon-ink: var(--nis2-red-ink);
	--toon-soft: var(--nis2-red-soft);

	display: grid;
	/*
	 * Eén expliciete kolom. Zonder deze regel is de kolom auto-breed en daarmee
	 * onbepaald, en dan vallen de fr-eenheden van de vervaagde laag erbinnen
	 * terug op hun max-content: de tekst wordt dan een smalle, torenhoge sliert.
	 */
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	margin-bottom: 16px;
	border: 1px solid var(--nis2-line);
	border-left: 5px solid var(--toon);
	border-radius: var(--nis2-radius-card);
	background: var(--nis2-white);
	box-shadow: var(--nis2-shadow);
}

/* Beide lagen liggen in dezelfde cel, dus over elkaar heen. */
.drieo-nis2 .drieo-nis2__locked-blur,
.drieo-nis2 .drieo-nis2__locked-overlay {
	grid-area: 1 / 1;
	min-width: 0;
}

.drieo-nis2 .drieo-nis2__locked-blur {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 34px;
	padding: 22px 26px 20px;
	filter: blur(4px);
	user-select: none;
	pointer-events: none;
}

.drieo-nis2 .drieo-nis2__locked-head {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

/*
 * De teller loopt hier niet door: het nummer staat al in de dummytekst, en de
 * teller hangt aan .drieo-nis2__stone-thema-tekst, dat hier niet gebruikt wordt.
 */

.drieo-nis2 .drieo-nis2__locked-overlay {
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 32px;
	text-align: center;
	/*
	 * In het midden bijna dekkend zodat de tekst leest, naar de randen toe
	 * doorzichtiger zodat je de vervaagde kaart eronder blijft zien.
	 */
	background: radial-gradient(
		ellipse at center,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.88) 45%,
		rgba(255, 255, 255, 0.6) 100%
	);
}

.drieo-nis2 .drieo-nis2__locked-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nis2-white);
	box-shadow: var(--nis2-shadow);
	color: var(--nis2-orange);
}

.drieo-nis2 .drieo-nis2__locked-kop {
	margin: 0;
	font-family: var(--nis2-font-head);
	font-size: clamp(20px, 2.2vw, 25px);
	font-weight: 800;
	line-height: 1.25;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__locked-tekst {
	margin: 0;
	max-width: 54ch;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__locked-sub {
	margin: 0;
	max-width: 46ch;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--nis2-ink-soft);
}

.drieo-nis2 .drieo-nis2__btn--groot {
	margin-top: 2px;
	padding: 16px 34px;
	font-size: 18px;
	font-weight: 600;
}

/* Alleen "opnieuw doen" staat hier nog; die mag rustig zijn. */
.drieo-nis2 .drieo-nis2__actions--stil {
	justify-content: center;
	margin-top: 0;
}

@media (max-width: 767px) {
	.drieo-nis2 .drieo-nis2__locked-blur {
		padding: 18px;
		gap: 12px;
		/*
		 * De vervaagde laag is alleen een hint dat er meer is. Op een telefoon
		 * staat die tekst onder elkaar en wordt de kaart daardoor onnodig hoog;
		 * we tonen er nog net genoeg van. De overlay bepaalt verder de hoogte.
		 */
		max-height: 260px;
	}

	.drieo-nis2 .drieo-nis2__locked-overlay {
		padding: 22px 18px;
		gap: 8px;
	}

	.drieo-nis2 .drieo-nis2__btn--groot {
		width: 100%;
		padding: 16px 20px;
		font-size: 17px;
	}
}

/*
 * Sticky knop onderaan, alleen op smalle schermen. Zowel het resultaatscherm
 * als het formulier heeft er een: de knop om het rapport aan te vragen en de
 * knop om het te versturen staan zo altijd in beeld, ook als de kaart erboven
 * langer is dan het scherm.
 */
.drieo-nis2 .drieo-nis2__sticky {
	display: none;
}

@media (max-width: 860px) {
	.drieo-nis2 .drieo-nis2__sticky {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		display: block;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
	}

	.drieo-nis2 .drieo-nis2__sticky .drieo-nis2__btn {
		width: 100%;
	}

	/* Ruimte onder de laatste knop, zodat de sticky balk niets afdekt. */
	.drieo-nis2 .drieo-nis2__screen--resultaat,
	.drieo-nis2 .drieo-nis2__screen--formulier {
		padding-bottom: 88px;
	}

	/*
	 * De knop in de kaart zelf is dan dubbelop. Hij blijft in de broncode staan
	 * (dat is de knop die het formulier verstuurt als er geen sticky balk is) en
	 * verdwijnt hier alleen uit beeld.
	 */
	.drieo-nis2 .drieo-nis2__form > .drieo-nis2__btn--primary {
		display: none;
	}
}
/* ==========================================================================
   12. Formulier
   ========================================================================== */

.drieo-nis2 .drieo-nis2__form {
	margin-top: 28px;
}

/* Het rode sterretje achter een label van een verplicht veld. */
.drieo-nis2 .drieo-nis2__ster {
	color: var(--nis2-red);
	font-weight: 700;
}

.drieo-nis2 .drieo-nis2__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	margin-bottom: 20px;
}

@media (max-width: 560px) {
	.drieo-nis2 .drieo-nis2__fields {
		grid-template-columns: 1fr;
	}
}

/*
 * Op een telefoon staan de velden onder elkaar en wordt het formulier snel
 * langer dan het scherm. De verzendknop staat daarom in de balk onderin; wat
 * hier gebeurt is de rest wat dichter op elkaar zetten, zodat het eerste veld
 * meteen in beeld staat.
 */
@media (max-width: 767px) {
	.drieo-nis2 .drieo-nis2__form {
		margin-top: 18px;
	}

	.drieo-nis2 .drieo-nis2__fields {
		gap: 14px;
		margin-bottom: 16px;
	}

	.drieo-nis2 .drieo-nis2__field label {
		margin-bottom: 5px;
	}

	.drieo-nis2 .drieo-nis2__field input {
		padding: 12px 14px;
	}

	.drieo-nis2 .drieo-nis2__privacy {
		margin-bottom: 0;
		font-size: 14px;
	}
}

.drieo-nis2 .drieo-nis2__field label {
	display: block;
	margin-bottom: 7px;
	font-size: 15px;
	font-weight: 600;
	color: var(--nis2-navy);
}

.drieo-nis2 .drieo-nis2__field input {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--nis2-line);
	border-radius: var(--nis2-radius-field);
	background: var(--nis2-white);
	font-family: var(--nis2-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--nis2-navy);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.drieo-nis2 .drieo-nis2__field input:hover {
	border-color: #c4c4c4;
}

.drieo-nis2 .drieo-nis2__field input:focus {
	border-color: var(--nis2-blue);
	outline: none;
	box-shadow: 0 0 0 3px rgba(9, 120, 191, 0.18);
}

.drieo-nis2 .drieo-nis2__field input.has-error {
	border-color: var(--nis2-red);
}

.drieo-nis2 .drieo-nis2__field input.has-error:focus {
	box-shadow: 0 0 0 3px rgba(214, 9, 9, 0.18);
}

.drieo-nis2 .drieo-nis2__error {
	margin: 7px 0 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--nis2-red-ink);
}

.drieo-nis2 .drieo-nis2__error--form {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-left: 5px solid var(--nis2-red);
	border-radius: var(--nis2-radius-field);
	background: var(--nis2-red-soft);
}

.drieo-nis2 .drieo-nis2__privacy {
	margin: 0 0 24px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--nis2-ink-soft);
}

.drieo-nis2 .drieo-nis2__privacy a {
	color: var(--nis2-blue);
	text-underline-offset: 3px;
}

/* Honeypot: buiten beeld, maar niet display:none (bots vullen dat ook). */
.drieo-nis2 .drieo-nis2__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   13. Bevestiging
   ========================================================================== */

.drieo-nis2 .drieo-nis2__card--done {
	text-align: center;
}

.drieo-nis2 .drieo-nis2__check {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var(--nis2-green-soft);
	position: relative;
}

.drieo-nis2 .drieo-nis2__check::after {
	content: "";
	position: absolute;
	left: 27px;
	top: 20px;
	width: 16px;
	height: 29px;
	border: solid var(--nis2-green-ink);
	border-width: 0 4px 4px 0;
	transform: rotate(45deg);
}

/* ==========================================================================
   14. Beweging en toegankelijkheid
   ========================================================================== */

.drieo-nis2 .drieo-nis2__screen {
	animation: drieo-nis2-in 0.24s ease both;
}

/*
 * De schermen met een sticky knop schuiven niet in maar vervagen alleen. Een
 * voorouder met een transform maakt namelijk een nieuw containing block, en dan
 * plakt die knop onderaan de sectie in plaats van onderaan het scherm.
 */
.drieo-nis2 .drieo-nis2__screen--resultaat,
.drieo-nis2 .drieo-nis2__screen--formulier {
	animation-name: drieo-nis2-fade;
}

@keyframes drieo-nis2-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.drieo-nis2 .drieo-nis2__screen:focus {
	outline: none;
}

@keyframes drieo-nis2-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.drieo-nis2 *,
	.drieo-nis2 *::before,
	.drieo-nis2 *::after {
		animation: none !important;
		transition: none !important;
	}
}