/*
 * IM-ASSIST — promotiewebsite
 * assets/stijl.css
 *
 * DONKER IS DE STANDAARD, LICHT IS EEN KEUZE. De kleuren staan als
 * variabelen op :root; het lichte thema zet alleen die variabelen om.
 * Nergens anders in dit bestand staat een losse kleur, zodat een thema
 * niet half kan doorwerken.
 *
 * GEEN LETTERTYPES VAN BUITEN. Er wordt niets bij Google of een ander
 * opgehaald: de site gebruikt het lettertype van het toestel zelf. Dat
 * scheelt een verzoek naar een derde partij bij elke bezoeker.
 */

:root {
	--blauw: #0090FE;            /* de huiskleur; alleen voor vlakken en accenten */
	--blauw-tekst: #3BA9FF;      /* blauw dat als TEKST leesbaar is op deze achtergrond */
	--op-blauw: #00131F;         /* tekst op een blauw vlak */
	--amber: #FFB020;            /* het signaal: hier is de calamiteit */

	--grond: #0A0E13;
	--vlak: #111821;
	--vlak-hoog: #172130;
	--lijn: #223043;
	--tekst: #E8EEF5;
	--tekst-zacht: #9DAEC2;
	--schaduw: 0 18px 50px rgba(0, 0, 0, .45);

	--rond: 14px;
	--breed: 1160px;
	--letter: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--letter-cijfer: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
	:root:not([data-thema="donker"]) {
		--blauw-tekst: #0064BD;
		--amber: #B36B00;
		--grond: #F4F6F9;
		--vlak: #FFFFFF;
		--vlak-hoog: #EDF1F6;
		--lijn: #D5DDE8;
		--tekst: #0E1620;
		--tekst-zacht: #4C5C70;
		--schaduw: 0 18px 50px rgba(15, 30, 50, .12);
	}
}

:root[data-thema="licht"] {
	--blauw-tekst: #0064BD;
	--amber: #B36B00;
	--grond: #F4F6F9;
	--vlak: #FFFFFF;
	--vlak-hoog: #EDF1F6;
	--lijn: #D5DDE8;
	--tekst: #0E1620;
	--tekst-zacht: #4C5C70;
	--schaduw: 0 18px 50px rgba(15, 30, 50, .12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--grond);
	color: var(--tekst);
	font-family: var(--letter);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--blauw-tekst); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { line-height: 1.12; letter-spacing: -.022em; margin: 0 0 .6em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }

.breedte { width: min(var(--breed), 100% - 40px); margin-inline: auto; }
.alleen-lezer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.overslaan { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--blauw); color: var(--op-blauw); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.overslaan:focus { top: 12px; }

/* ---------- kop ---------- */

.kop { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--grond) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--lijn); }
.kop-rij { display: flex; align-items: center; gap: 18px; min-height: 68px; }

.merk { display: inline-flex; align-items: center; gap: 11px; color: var(--tekst); text-decoration: none; font-weight: 800; letter-spacing: .04em; }
.merk-teken { width: 34px; height: 34px; }
.merk-naam { font-size: 1.05rem; }

.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menu > a { color: var(--tekst-zacht); text-decoration: none; padding: 8px 12px; border-radius: 9px; font-size: .95rem; font-weight: 600; white-space: nowrap; }
.menu > a:hover { color: var(--tekst); background: var(--vlak-hoog); }
.menu > a.is-actief { color: var(--tekst); box-shadow: inset 0 -2px 0 var(--blauw); border-radius: 9px 9px 0 0; }
.menu-eind { display: inline-flex; align-items: center; gap: 10px; margin-left: 10px; }

.themaknop { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst-zacht); border-radius: 10px; cursor: pointer; }
.themaknop:hover { color: var(--tekst); border-color: var(--blauw); }
.themaknop svg { width: 19px; height: 19px; grid-area: 1 / 1; }
.thema-zon { display: none; }
:root[data-thema="licht"] .thema-zon { display: block; }
:root[data-thema="licht"] .thema-maan { display: none; }
@media (prefers-color-scheme: light) {
	:root:not([data-thema="donker"]) .thema-zon { display: block; }
	:root:not([data-thema="donker"]) .thema-maan { display: none; }
}

.menuknop { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--lijn); background: var(--vlak); border-radius: 10px; cursor: pointer; place-items: center; }
.menuknop-streep, .menuknop-streep::before, .menuknop-streep::after { display: block; width: 20px; height: 2px; background: var(--tekst); border-radius: 2px; content: ""; position: relative; }
.menuknop-streep::before { position: absolute; top: -6px; }
.menuknop-streep::after { position: absolute; top: 6px; }

/* ---------- knoppen ---------- */

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 12px; background: var(--blauw); color: var(--op-blauw); font-weight: 750; text-decoration: none; border: 1px solid transparent; line-height: 1.2; cursor: pointer; font-family: inherit; font-size: 1rem; }
.knop:hover { filter: brightness(1.08); }
.knop-klein { padding: 9px 16px; font-size: .93rem; border-radius: 10px; }
.knop-rand { background: transparent; color: var(--tekst); border-color: var(--lijn); }
.knop-rand:hover { border-color: var(--blauw); filter: none; }
.knop svg { width: 18px; height: 18px; }

/* ---------- algemene bouwstenen ---------- */

.strook { padding: clamp(56px, 8vw, 104px) 0; }
.strook-vlak { background: var(--vlak); border-block: 1px solid var(--lijn); }

.etiket { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blauw-tekst); margin-bottom: 16px; }
.etiket::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--blauw); }

.inleiding { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--tekst-zacht); max-width: 62ch; }
.kop-blok { max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); }

.rooster { display: grid; gap: 20px; }
.rooster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rooster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rooster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 26px; }
.strook-vlak .kaart { background: var(--grond); }
.kaart h3 { margin-bottom: .45em; }
.kaart p:last-child { margin-bottom: 0; }
.kaart p { color: var(--tekst-zacht); }

.kaart-teken { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--blauw) 16%, transparent); color: var(--blauw-tekst); margin-bottom: 18px; }
.kaart-teken svg { width: 24px; height: 24px; }

a.kaart { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.kaart:hover { border-color: var(--blauw); transform: translateY(-2px); }
.kaart-verder { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; color: var(--blauw-tekst); font-weight: 700; }
.kaart-verder svg { width: 16px; height: 16px; }

/* De wegbelijning: een onderbroken streep als scheiding tussen delen. */
.belijning { height: 4px; border: 0; margin: 0; background: repeating-linear-gradient(90deg, var(--lijn) 0 34px, transparent 34px 58px); opacity: .9; }

/* ---------- de held ---------- */

.held { position: relative; overflow: hidden; padding: clamp(54px, 8vw, 110px) 0 clamp(50px, 7vw, 96px); }
.held::before { content: ""; position: absolute; inset: -30% -10% auto 35%; height: 130%; background: radial-gradient(closest-side, color-mix(in srgb, var(--blauw) 24%, transparent), transparent 70%); pointer-events: none; }
.held-rij { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 68px); align-items: center; }
.held h1 span { color: var(--blauw-tekst); }
.held-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.held-punten { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--tekst-zacht); font-size: .95rem; font-weight: 600; }
.held-punten li { display: inline-flex; align-items: center; gap: 9px; }
.held-punten li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blauw); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blauw) 22%, transparent); }

.held-beeld { border-radius: 20px; border: 1px solid var(--lijn); background: var(--vlak); box-shadow: var(--schaduw); overflow: hidden; }
.held-beeld svg { width: 100%; height: auto; }

.paginakop { padding: clamp(46px, 7vw, 88px) 0 clamp(34px, 5vw, 60px); position: relative; overflow: hidden; }
.paginakop::before { content: ""; position: absolute; inset: -60% -10% auto 45%; height: 200%; background: radial-gradient(closest-side, color-mix(in srgb, var(--blauw) 18%, transparent), transparent 70%); pointer-events: none; }
.paginakop .breedte { position: relative; }
.paginakop h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 18ch; }

/* ---------- het verloop ---------- */

.verloop { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: stap; }
.verloop li { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 20px; padding-bottom: 30px; counter-increment: stap; }
.verloop li::before { content: counter(stap, decimal-leading-zero); width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; background: var(--vlak); border: 1px solid var(--lijn); font-family: var(--letter-cijfer); font-weight: 700; color: var(--blauw-tekst); font-size: 1.05rem; position: relative; z-index: 1; }
.strook-vlak .verloop li::before { background: var(--grond); }
.verloop li::after { content: ""; position: absolute; left: 30px; top: 62px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--lijn) 0 8px, transparent 8px 15px); }
.verloop li:last-child { padding-bottom: 0; }
.verloop li:last-child::after { display: none; }
.verloop h3 { margin: 6px 0 .35em; }
.verloop p { color: var(--tekst-zacht); margin: 0; max-width: 64ch; }
.verloop .wie { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-zacht); border: 1px solid var(--lijn); border-radius: 999px; padding: 3px 10px; margin-left: 10px; vertical-align: middle; }

/* ---------- kenmerken en lijsten ---------- */

.vinklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vinklijst li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 13px; align-items: start; }
.vinklijst li::before { content: ""; width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; background: color-mix(in srgb, var(--blauw) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230090FE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.vinklijst strong { display: block; }
.vinklijst span { color: var(--tekst-zacht); }

.kruislijst li::before { background: color-mix(in srgb, var(--tekst-zacht) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%238797AB' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat; }

.tweeluik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 5vw, 70px); align-items: start; }
.tweeluik-midden { align-items: center; }

.fasen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--lijn); border-radius: var(--rond); overflow: hidden; background: var(--vlak); }
.strook-vlak .fasen { background: var(--grond); }
.fase { padding: 22px 20px; border-right: 1px solid var(--lijn); position: relative; }
.fase:last-child { border-right: 0; }
.fase-nr { font-family: var(--letter-cijfer); font-size: .8rem; color: var(--blauw-tekst); font-weight: 700; letter-spacing: .08em; }
.fase h3 { font-size: 1.05rem; margin: 8px 0 6px; }
.fase p { color: var(--tekst-zacht); font-size: .93rem; margin: 0; }
.fase-balk { height: 5px; border-radius: 5px; background: var(--blauw); margin-top: 16px; opacity: .9; }
.fase:nth-child(2) .fase-balk { opacity: .7; }
.fase:nth-child(3) .fase-balk { opacity: .5; }
.fase:nth-child(4) .fase-balk { opacity: .32; }

.citaatblok { border-left: 4px solid var(--blauw); padding: 6px 0 6px 22px; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.35; max-width: 30ch; }

/* ---------- de oproep onderaan ---------- */

.oproep { background: linear-gradient(135deg, color-mix(in srgb, var(--blauw) 20%, var(--vlak)), var(--vlak)); border: 1px solid var(--lijn); border-radius: 22px; padding: clamp(30px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.oproep h2 { margin-bottom: .3em; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.oproep p { margin: 0; color: var(--tekst-zacht); max-width: 56ch; }
.oproep-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- formulier ---------- */

.formulier { display: grid; gap: 18px; }
.veld { display: grid; gap: 7px; }
.veld label { font-weight: 700; font-size: .95rem; }
.veld input, .veld select, .veld textarea { width: 100%; padding: 13px 14px; border-radius: 11px; border: 1px solid var(--lijn); background: var(--grond); color: var(--tekst); font: inherit; }
.strook-vlak .veld input, .strook-vlak .veld select, .strook-vlak .veld textarea { background: var(--grond); }
.veld textarea { min-height: 150px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 3px solid color-mix(in srgb, var(--blauw) 45%, transparent); border-color: var(--blauw); }
.veld-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.veld-val { position: absolute; left: -9999px; }
.klein { font-size: .88rem; color: var(--tekst-zacht); }

.bericht { border-radius: 12px; padding: 15px 18px; border: 1px solid var(--lijn); margin-bottom: 22px; font-weight: 600; }
.bericht-goed { border-color: color-mix(in srgb, #23B26D 60%, var(--lijn)); background: color-mix(in srgb, #23B26D 12%, transparent); }
.bericht-fout { border-color: color-mix(in srgb, #E5484D 60%, var(--lijn)); background: color-mix(in srgb, #E5484D 12%, transparent); }

/* ---------- voet ---------- */

.voet { border-top: 1px solid var(--lijn); background: var(--vlak); padding: 52px 0 26px; margin-top: clamp(40px, 6vw, 80px); font-size: .95rem; }
.voet-rij { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 30px; }
.voet-blok { display: grid; gap: 7px; align-content: start; }
.voet-blok p { margin: 0; color: var(--tekst-zacht); }
.voet-naam { font-weight: 800; color: var(--tekst) !important; letter-spacing: .03em; }
.voet-kop { font-weight: 800; color: var(--tekst) !important; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px !important; }
.voet a { color: var(--tekst-zacht); text-decoration: none; }
.voet a:hover { color: var(--blauw-tekst); }
.voet-onder { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--lijn); color: var(--tekst-zacht); font-size: .86rem; }
.voet-onder p { margin: 0; }

/* ---------- smaller ---------- */

@media (max-width: 1080px) {
	.menuknop { display: grid; }
	.menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--grond); border-bottom: 1px solid var(--lijn); flex-direction: column; align-items: stretch; padding: 12px 20px 20px; gap: 2px; display: none; margin: 0; }
	.menu.is-open { display: flex; }
	.menu > a { padding: 13px 12px; font-size: 1.02rem; }
	.menu > a.is-actief { box-shadow: inset 3px 0 0 var(--blauw); border-radius: 0 9px 9px 0; }
	.menu-eind { margin: 12px 0 0; justify-content: space-between; }
}

@media (max-width: 900px) {
	.held-rij, .tweeluik { grid-template-columns: minmax(0, 1fr); }
	.rooster-3, .rooster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fasen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fase:nth-child(2) { border-right: 0; }
	.fase:nth-child(-n+2) { border-bottom: 1px solid var(--lijn); }
	.oproep { grid-template-columns: minmax(0, 1fr); }
	.voet-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	body { font-size: 16px; }
	.breedte { width: calc(100% - 32px); }
	.rooster-2, .rooster-3, .rooster-4, .veld-rij { grid-template-columns: minmax(0, 1fr); }
	.fasen { grid-template-columns: minmax(0, 1fr); }
	.fase { border-right: 0; border-bottom: 1px solid var(--lijn); }
	.fase:last-child { border-bottom: 0; }
	.verloop li { grid-template-columns: 50px minmax(0, 1fr); gap: 15px; }
	.verloop li::before { width: 50px; height: 50px; border-radius: 13px; font-size: .95rem; }
	.verloop li::after { left: 24px; top: 50px; }
	.verloop .wie { display: table; margin: 6px 0 0; }
	.voet-rij { grid-template-columns: minmax(0, 1fr); }
	.held-knoppen .knop, .oproep-knoppen .knop { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	a.kaart { transition: none; }
}