/* ==========================================================================
   Pitmuur: een rustig online cv. Licht is papier, donker is een arcadekast uit de jaren 80.
   F1 zit in de details: bandkleuren op de tijdlijn, een kerb onder de kopjes, timingcijfers.
   ========================================================================== */

@font-face {
	font-family: "Saira";
	src: url("../fonts/saira.woff2") format("woff2-variations"), url("../fonts/saira.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 50% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Saira";
	src: url("../fonts/saira-italic.woff2") format("woff2-variations"), url("../fonts/saira-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 50% 125%;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono.woff2") format("woff2-variations"), url("../fonts/jetbrains-mono.woff2") format("woff2");
	font-weight: 100 800;
	font-display: swap;
}
@font-face {
	font-family: "Press Start 2P";
	src: url("../fonts/press-start-2p.woff2") format("woff2");
	font-display: swap;
}

/* --- Kleuren -------------------------------------------------------------- */
:root,
:root[data-theme="light"] {
	--radio-bg: #14161b;
	--radio-tekst: #f6f7f9;
	--bg: #e9ecef;
	--vlak: #f6f7f9;
	--tekst: #14161b;
	--tekst-2: #4a505d;
	--tekst-3: #7b828f;
	--lijn: #d2d7de;
	--accent: #cf1009;
	--accent-2: #6d28c9;
	--knop-rand: #8f0a05;
	--d-beheer: #98a1ae;
	--d-proces: #2f7dd1;
	--d-agile: #e0a100;
	--d-data: #cf1009;
	--bot-kop: #2b3140;
	--bot-scherm: #0f1a24;
	--bot-oog: #29e07f;
	--focus: #6d28c9;
	--balk-bg: rgba(233, 236, 239, .9);
	color-scheme: light;
}
:root[data-theme="dark"] {
	--radio-bg: #07061a;
	--radio-tekst: #eceaf6;
	--bg: #0f0d1f;
	--vlak: #17142c;
	--tekst: #eceaf6;
	--tekst-2: #aaa6c8;
	--tekst-3: #716d92;
	--lijn: rgba(255, 255, 255, .1);
	--accent: #ff2a6d;
	--accent-2: #01cdfe;
	--knop-rand: #a3123f;
	--d-beheer: #716d92;
	--d-proces: #01cdfe;
	--d-agile: #f9f871;
	--d-data: #ff2a6d;
	--bot-kop: #3a3560;
	--bot-scherm: #07061a;
	--bot-oog: #05ffa1;
	--focus: #01cdfe;
	--balk-bg: rgba(15, 13, 31, .88);
	color-scheme: dark;
}

/* --- Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--tekst);
	font: 17px/1.65 "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.pm-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; background: var(--accent); color: #fff; }
.pm-skip:focus { top: 12px; }

/* --- Kopbalk -------------------------------------------------------------- */
.pm-balk {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--balk-bg);
	border-bottom: 1px solid var(--lijn);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.pm-balk__binnen {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 900px;
	min-height: 56px;
	margin: 0 auto;
	padding: 8px 24px;
}
.pm-balk__merk { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.pm-balk__merk:hover { color: inherit; }
.pm-nummer {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	height: 26px;
	padding: 0 6px;
	background: var(--accent);
	color: #fff;
	font: italic 900 17px/1 "Saira", sans-serif;
	font-stretch: 80%;
	clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}
.pm-balk__naam { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pm-race {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 auto;
	min-width: 0;
	font: 12px/1.4 "JetBrains Mono", ui-monospace, monospace;
	color: var(--tekst-3);
	white-space: nowrap;
}
.pm-race__tekst { overflow: hidden; text-overflow: ellipsis; }
.pm-race__lamp { flex: none; width: 7px; height: 7px; background: var(--tekst-3); }
.pm-race.is-live { color: var(--tekst); }
.pm-race.is-live .pm-race__lamp { background: var(--accent); animation: pm-knipper 1.2s steps(1) infinite; }

.pm-balk__knoppen { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pm-race + .pm-balk__knoppen { margin-left: 0; }
.pm-taalkeuze { display: flex; }
.pm-taalkeuze a { padding: 4px 7px; font: 600 12px/1.2 "JetBrains Mono", monospace; text-decoration: none; color: var(--tekst-3); }
.pm-taalkeuze a[aria-current] { color: var(--tekst); box-shadow: inset 0 -2px 0 var(--accent); }
.pm-knopje {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--tekst-2);
	cursor: pointer;
}
.pm-knopje:hover { color: var(--accent); }
.pm-icoon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-icoon--maan { fill: currentColor; stroke: none; }
:root[data-theme="dark"] .pm-icoon--maan,
:root:not([data-theme="dark"]) .pm-icoon--zon { display: none; }

/* --- Indeling ------------------------------------------------------------- */
.pm-main { max-width: 780px; margin: 0 auto; padding: 0 24px 64px; }
.pm-sectie { padding-top: 72px; }

.pm-sectiekop { margin-bottom: 28px; }
.pm-kop {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding-bottom: 14px;
	font-size: 1.35rem;
	font-weight: 750;
	font-style: italic;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.2;
}
/* De ene kerb: rood-wit, schuin, onder elk kopje. */
.pm-kop::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	background: repeating-linear-gradient(90deg, var(--accent) 0 8px, var(--vlak) 8px 16px);
	box-shadow: 0 0 0 1px var(--lijn);
	transform: skewX(-30deg);
	transform-origin: left;
}
.pm-kop__nr { font: 11px/1 "Press Start 2P", monospace; color: var(--accent); font-style: normal; letter-spacing: 0; }
.pm-sub { margin: 10px 0 0; color: var(--tekst-2); }
.pm-voetnoot { margin: 18px 0 0; font-size: 13px; color: var(--tekst-3); }

/* --- Profiel -------------------------------------------------------------- */
.pm-profiel { padding-top: 64px; }
.pm-profiel__kop { display: flex; align-items: center; gap: 24px; }
.pm-profiel__foto { flex: none; width: 112px; height: 112px; object-fit: cover; border-radius: 4px; }
.pm-profiel__rol { margin: 0 0 4px; font: 13px/1.4 "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-2); }
.pm-naam {
	margin: 0;
	font-size: clamp(2.4rem, 7vw, 3.8rem);
	font-weight: 850;
	font-style: italic;
	font-stretch: 82%;
	line-height: 1;
	letter-spacing: -.01em;
}
.pm-profiel__tagline { margin: 10px 0 0; font-size: 1.3rem; font-weight: 600; font-style: italic; color: var(--accent); }

.pm-vlag { display: inline-flex; align-items: center; gap: 10px; margin: 24px 0 0; font-size: 15px; color: var(--tekst-2); }
.pm-vlag__doek { width: 18px; height: 12px; background: #22b55a; }
.pm-vlag--geel .pm-vlag__doek { background: #f2c200; }
.pm-vlag--sc .pm-vlag__doek { background: #ff9f1c; }
.pm-vlag--rood .pm-vlag__doek { background: var(--accent); }
.pm-vlag--geblokt .pm-vlag__doek { background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 6px 6px; box-shadow: 0 0 0 1px var(--lijn); }

/* Kerncijfers als een scoreregel bovenin een arcadekast. */
.pm-score {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 28px 0 0;
	padding: 16px 0;
	border-top: 1px solid var(--lijn);
	border-bottom: 1px solid var(--lijn);
}
.pm-score div { padding-right: 12px; }
.pm-score dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); }
.pm-score dd { margin: 6px 0 0; font: 18px/1 "Press Start 2P", monospace; color: var(--tekst); }
.pm-score div:first-child dd { color: var(--accent); }

.pm-profiel__intro { margin-top: 28px; font-size: 1.08rem; }
.pm-profiel__intro p { margin: 0 0 14px; }
.pm-profiel__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 8px 0 0; font-size: 15px; color: var(--tekst-2); }
.pm-pdflink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tekst); }
.pm-pdflink .pm-icoon { width: 16px; height: 16px; color: var(--accent); }

/* --- Werkervaring --------------------------------------------------------- */
.pm-tijdlijn { margin: 0; padding: 0; list-style: none; }
.pm-functie { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 28px; }
.pm-functie__tijd {
	margin: 0;
	padding-top: 3px;
	text-align: right;
	font: 13px/1.5 "JetBrains Mono", monospace;
	color: var(--tekst-2);
}
.pm-functie__tijd span { display: block; }
.pm-functie__tijd small { font-size: 12px; color: var(--tekst-3); }
.pm-functie__inhoud { position: relative; padding: 0 0 34px 28px; border-left: 2px solid var(--lijn); }
.pm-functie:last-child .pm-functie__inhoud { padding-bottom: 0; }
/* Pixelblokje in de kleur van het domein. */
.pm-functie__inhoud::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 6px;
	width: 14px;
	height: 14px;
	background: var(--d, var(--accent));
	box-shadow: 0 0 0 3px var(--bg);
}
.pm-functie__rol { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.35; }
.pm-functie__org { margin: 2px 0 0; color: var(--tekst-2); font-size: 15px; }
.pm-functie__samenvatting { margin: 10px 0 0; }
.pm-functie__punten { margin: 8px 0 0; padding: 0; list-style: none; color: var(--tekst-2); font-size: 15.5px; }
.pm-functie__punten li { position: relative; margin-bottom: 3px; padding-left: 18px; }
.pm-functie__punten li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--tekst-3); }
.pm-functie--kort .pm-functie__inhoud { padding-bottom: 20px; }
/* Loopt de tijdlijn door in "Eerdere ervaring", dan stopt de lijn niet bij de laatste recente functie. */
.pm-tijdlijn--vervolg .pm-functie:last-child .pm-functie__inhoud { padding-bottom: 30px; }

/* Eerdere ervaring: een knop in de lijn van de tijdlijn, met een pixelpijltje. */
.pm-eerder > .pm-tijdlijn { margin-top: 0; }
.pm-eerder__knop {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-left: 178px;
	padding: 12px 16px;
	border: 2px solid var(--tekst);
	background: var(--vlak);
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: transform .08s, box-shadow .08s;
	box-shadow: 0 4px 0 var(--tekst);
}
.pm-eerder__knop::-webkit-details-marker { display: none; }
.pm-eerder__knop:hover .pm-eerder__titel { color: var(--accent); }
.pm-eerder__knop:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tekst); }
.pm-eerder[open] > .pm-eerder__knop { margin-bottom: 34px; }
.pm-eerder__pijl { width: 10px; height: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .2s steps(2); }
.pm-eerder[open] .pm-eerder__pijl { transform: rotate(90deg); }
.pm-eerder__titel { font-weight: 700; font-style: italic; letter-spacing: .03em; text-transform: uppercase; }
.pm-eerder__info { font: 12px/1.4 "JetBrains Mono", monospace; color: var(--tekst-3); }

/* Het muntje: springt op, draait en verdwijnt. */
.pm-munt {
	position: absolute;
	left: 14px;
	top: -6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	animation: pm-munt-spring .9s cubic-bezier(.2, .9, .3, 1) forwards;
}
.pm-munt svg { width: 24px; height: 28px; animation: pm-munt-draai .3s steps(4) 3; }
.pm-munt b { margin-bottom: 4px; order: -1; font: 8px/1 "Press Start 2P", monospace; color: var(--accent); white-space: nowrap; }
.pm-functie--kort .pm-functie__rol { font-size: 1rem; font-weight: 600; }

.pm-tag,
.pm-status {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 5px 2px;
	font: 8px/1.2 "Press Start 2P", monospace;
	vertical-align: 3px;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent-2);
}
:root[data-theme="dark"] .pm-tag { color: #0f0d1f; }

/* --- Grafieken ------------------------------------------------------------ */
.pm-d--beheer { --d: var(--d-beheer); }
.pm-d--proces { --d: var(--d-proces); }
.pm-d--agile { --d: var(--d-agile); }
.pm-d--data { --d: var(--d-data); }

.pm-grafiek { margin: 0; }
.pm-grafiektitel { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); }

/* Waar mijn jaren zitten: één verdeelbalk. */
.pm-jaren { margin-top: 26px; }
.pm-verdeel { display: flex; gap: 3px; height: 16px; }
.pm-verdeel__deel { min-width: 6px; background: var(--d); transform-origin: left; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.js .pm-jaren:not(.is-zichtbaar) .pm-verdeel__deel { transform: scaleX(0); }
.pm-verdeel__deel:nth-child(2) { transition-delay: .12s; }
.pm-verdeel__deel:nth-child(3) { transition-delay: .24s; }
.pm-verdeel__deel:nth-child(4) { transition-delay: .36s; }
.pm-legenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--tekst-2); }
.pm-legenda li { display: flex; align-items: center; gap: 7px; }
.pm-legenda i { width: 10px; height: 10px; background: var(--d); }
.pm-legenda b { font: 600 12px/1 "JetBrains Mono", monospace; color: var(--tekst); }

/* Loopbaanstrip: elke functie een balk, overlappende functies op een eigen baan. */
.pm-strip { margin-bottom: 40px; }
.pm-strip__vlak {
	position: relative;
	height: calc(var(--banen) * 18px + 8px);
	background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--lijn) calc(20% - 1px) 20%);
	border-bottom: 2px solid var(--tekst);
}
.pm-strip__balk {
	position: absolute;
	top: calc(var(--baan) * 18px + 4px);
	height: 12px;
	background: var(--d);
	box-shadow: inset -2px 0 0 var(--bg);
	transform-origin: left;
	transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .15s;
	cursor: help;
}
.pm-strip__balk:hover { filter: brightness(1.15); outline: 2px solid var(--tekst); outline-offset: 1px; }
.pm-strip__balk.is-nu::after { content: ""; position: absolute; right: -6px; top: 2px; width: 8px; height: 8px; background: var(--d); animation: pm-knipper 1.2s steps(1) infinite; }
.js .pm-strip:not(.is-zichtbaar) .pm-strip__balk { transform: scaleX(0); }
.pm-strip__as { position: relative; height: 22px; font: 11px/1 "JetBrains Mono", monospace; color: var(--tekst-3); }
.pm-strip__as span { position: absolute; top: 6px; transform: translateX(-50%); }
.pm-strip__as span:first-child { transform: none; }

/* Toerenteller per vaardigheidsgroep. */
.pm-groep__kop { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.pm-groep__kop .pm-groep__titel { margin: 0; }
.pm-groep__waarde { margin: 4px 0 0; }
.pm-groep__waarde b { font: 15px/1 "Press Start 2P", monospace; }
.pm-groep__waarde small { font: 11px/1 "JetBrains Mono", monospace; color: var(--tekst-3); }
.pm-meter { flex: none; width: 92px; height: auto; overflow: visible; }
.pm-meter path { fill: none; stroke-width: 9; }
.pm-meter__spoor { stroke: var(--lijn); }
.pm-meter__rood { stroke: var(--accent); stroke-dasharray: 0 80 20 0; opacity: .25; }
.pm-meter__waarde { stroke: var(--tekst); stroke-dasharray: var(--waarde) 100; transition: stroke-dasharray 1.1s cubic-bezier(.2, .8, .2, 1); }
.pm-meter__streep { stroke: var(--tekst-3); stroke-width: 1.5; }
.pm-meter__naald { stroke: var(--accent); stroke-width: 3; stroke-linecap: square; transform-origin: 60px 62px; transform: rotate(var(--hoek)); transition: transform 1.1s cubic-bezier(.3, 1.4, .5, 1); }
.pm-meter__as { fill: var(--tekst); }
.js .pm-groep:not(.is-zichtbaar) .pm-meter__waarde { stroke-dasharray: 0 100; }
.js .pm-groep:not(.is-zichtbaar) .pm-meter__naald { transform: rotate(-90deg); }

/* Leercurve: trapgrafiek van de certificaten. */
.pm-leercurve { margin-bottom: 30px; }
.pm-leercurve svg { display: block; width: 100%; height: auto; }
.pm-leercurve__vlak { fill: var(--accent); opacity: .08; }
.pm-leercurve__lijn { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 100 100; transition: stroke-dashoffset 1.6s ease; }
.js .pm-leercurve:not(.is-zichtbaar) .pm-leercurve__lijn { stroke-dashoffset: 100; }
.pm-leercurve__punt { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
.pm-as-lijn { stroke: var(--tekst); stroke-width: 2; }
.pm-as-hulp { stroke: var(--lijn); stroke-width: 1; stroke-dasharray: 4 4; }
.pm-as-tekst { fill: var(--tekst-3); font: 12px "JetBrains Mono", monospace; }

/* --- Vaardigheden --------------------------------------------------------- */
.pm-groepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; }
.pm-groep__titel { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); }
.pm-skills { margin: 0; padding: 0; list-style: none; }
.pm-skill { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px solid var(--lijn); }
.pm-skill:last-child { border-bottom: 0; }
.pm-skill__naam { min-width: 0; font-size: 15.5px; }
/* Energiebalk van tien blokjes. */
.pm-balkje { display: flex; flex: none; gap: 2px; }
.pm-balkje i { width: 8px; height: 10px; background: var(--lijn); }
.pm-balkje i.is-vol { background: var(--accent); }
.pm-balkje i.is-vol:nth-child(n+9) { background: var(--accent-2); }

.pm-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 44px; margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--lijn); }
.pm-feiten dt { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); }
.pm-feiten dd { margin: 4px 0 0; font-size: 15.5px; }
.pm-feiten__breed { grid-column: 1 / -1; }

/* --- Certificaten en opleiding -------------------------------------------- */
.pm-twee { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px 44px; }
.pm-lijst { margin: 0; padding: 0; list-style: none; }
.pm-lijst li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: 15.5px; line-height: 1.4; }
.pm-lijst li:last-child { border-bottom: 0; }
.pm-lijst__jaar { font: 13px/1.6 "JetBrains Mono", monospace; color: var(--tekst-3); }
.pm-lijst small { display: block; font-size: 13.5px; color: var(--tekst-3); }

/* --- De Garage ------------------------------------------------------------ */
.pm-projecten { margin: 0; padding: 0; list-style: none; }
.pm-project { padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.pm-project:first-child { padding-top: 0; }
.pm-project:last-child { border-bottom: 0; }
.pm-project__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.pm-project__naam { font-weight: 700; font-size: 1.05rem; }
.pm-project__onder { color: var(--tekst-2); font-size: 15px; }
.pm-project .pm-status { margin-left: auto; background: transparent; color: var(--tekst-3); box-shadow: inset 0 0 0 1px var(--lijn); }
.pm-status--live { color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.pm-project__tekst { margin: 4px 0 0; color: var(--tekst-2); font-size: 15.5px; }
.pm-project__stack { margin: 4px 0 0; font: 12px/1.5 "JetBrains Mono", monospace; color: var(--tekst-3); }

/* Pitbot en de co-pilotmeter. */
.pm-pitcrew { display: flex; align-items: flex-end; gap: 18px; margin: 0 0 26px; }
.pm-pitbot { flex: none; width: 80px; height: auto; overflow: visible; }
.pm-pitbot__kop { fill: var(--bot-kop); }
.pm-pitbot__metaal { fill: var(--tekst-3); }
.pm-pitbot__scherm { fill: var(--bot-scherm); }
.pm-pitbot__ogen rect { fill: var(--bot-oog); }
.pm-pitbot__ogen { transform-box: fill-box; transform-origin: center; animation: pm-knipoog 5s infinite; }
.pm-pitbot__mond { fill: var(--bot-oog); opacity: .6; }
.pm-pitbot__romp { fill: var(--accent); }
.pm-pitbot__bord { fill: #fff; }
.pm-pitbot__cijfer { fill: var(--accent); }
.pm-pitbot__arm { fill: var(--bot-kop); }
.pm-pitbot__wiel { fill: #15161b; }
.pm-pitbot__band { fill: var(--accent); }
.pm-pitbot__lamp { fill: var(--accent-2); animation: pm-knipper 2.4s steps(1) infinite; }
.pm-pitbot__zwaai { transform-box: fill-box; transform-origin: 50% 0; }
.pm-pitcrew:hover .pm-pitbot__zwaai { animation: pm-zwaai .5s ease-in-out 3 alternate; }
.pm-pitcrew__tekst { min-width: 0; padding-bottom: 6px; }
.pm-ballon {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 10px 14px;
	background: var(--vlak);
	border: 2px solid var(--tekst);
	font: 10px/1.7 "Press Start 2P", monospace;
}
.pm-ballon::before {
	content: "";
	position: absolute;
	left: -10px;
	bottom: 10px;
	width: 10px;
	height: 10px;
	background: var(--vlak);
	border-left: 2px solid var(--tekst);
	border-bottom: 2px solid var(--tekst);
	transform: skewY(-35deg);
}
.pm-pitcrew__tekst .pm-voetnoot { margin-top: 8px; }

.pm-project__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin-top: 6px; }
.pm-project__voet .pm-project__stack { margin: 0; }
.pm-copilot { display: flex; align-items: center; gap: 8px; margin: 0; font: 11px/1 "JetBrains Mono", monospace; color: var(--tekst-3); }
.pm-copilot__balk { display: flex; width: 110px; height: 8px; gap: 2px; }
.pm-copilot__balk i { display: block; height: 100%; }
.pm-copilot__hugo { background: var(--tekst); }
.pm-copilot__bot { background: repeating-linear-gradient(90deg, var(--accent-2) 0 6px, transparent 6px 8px); }

/* --- Teamradio ------------------------------------------------------------ */
/* Elke quote als een radiobericht op F1-tv: zwarte balk met naam en een golfje dat even meepraat. */
.pm-radio { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.pm-radio__bericht { display: flex; flex-direction: column; margin: 0; background: var(--vlak); border: 1px solid var(--lijn); border-left: 3px solid var(--accent); }
.pm-radio__kop { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 14px; background: var(--radio-bg); color: var(--radio-tekst); }
.pm-radio__label { flex: none; padding: 3px 5px 2px; background: var(--accent); color: #fff; font: 8px/1.2 "Press Start 2P", monospace; text-transform: uppercase; }
.pm-radio__naam { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 750; font-style: italic; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.pm-radio__golf { display: flex; flex: none; align-items: center; gap: 2px; height: 16px; margin-left: auto; }
.pm-radio__golf i { --h: .4; width: 2px; height: 100%; background: var(--bot-oog); transform: scaleY(var(--h)); }
.pm-radio__golf i:nth-child(3n) { --h: .8; }
.pm-radio__golf i:nth-child(3n+1) { --h: .5; }
.pm-radio__golf i:nth-child(4n) { --h: 1; }
.pm-radio__golf i:nth-child(5n+2) { --h: .25; }
.pm-radio__bericht.is-zichtbaar .pm-radio__golf i { animation: pm-golf .3s ease-in-out 8 alternate; }
.pm-radio__bericht:hover .pm-radio__golf i { animation: pm-golf-weer .3s ease-in-out 6 alternate; }
.pm-radio__golf i:nth-child(2n) { animation-delay: .1s !important; }
.pm-radio__golf i:nth-child(3n) { animation-delay: .2s !important; }
.pm-radio__tekst { margin: 0; padding: 16px 16px 4px; font-size: 16px; font-style: italic; line-height: 1.55; }
.pm-radio__tekst p { margin: 0 0 10px; }
.pm-radio__tekst p:first-child::before { content: "\201C"; color: var(--accent); font-weight: 700; }
.pm-radio__tekst p:last-child::after { content: "\201D"; color: var(--accent); font-weight: 700; }
.pm-radio__wie { margin: auto 0 0; padding: 0 16px 14px; font: 12px/1.5 "JetBrains Mono", monospace; color: var(--tekst-3); }
.pm-radio__wie a { margin-left: 8px; }

/* --- Contact -------------------------------------------------------------- */
.pm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pm-veld { display: flex; flex-direction: column; gap: 6px; }
.pm-veld--breed { grid-column: 1 / -1; }
.pm-veld > span { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); }
.pm-veld input,
.pm-veld textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--lijn);
	border-radius: 2px;
	background: var(--vlak);
	color: var(--tekst);
	font: 16px/1.45 "Saira", sans-serif;
}
.pm-veld input:focus,
.pm-veld textarea:focus { outline: none; border-color: var(--accent); }
.pm-veld textarea { resize: vertical; min-height: 130px; }
.pm-pitlane { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pm-form__voet { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pm-form__status { margin: 0; font-size: 14px; color: var(--tekst-2); }
.pm-form__status.is-ok { color: #1c8a43; }
:root[data-theme="dark"] .pm-form__status.is-ok { color: #05ffa1; }
.pm-form__status.is-fout { color: var(--accent); }
.pm-form__alt { margin-left: auto; font-size: 15px; color: var(--tekst-2); }

/* Arcadeknop: indrukken voelt als een echte knop op de kast. */
.pm-knop {
	display: inline-block;
	padding: 13px 20px 12px;
	border: 0;
	border-radius: 3px;
	background: var(--accent);
	color: #fff;
	font: 11px/1 "Press Start 2P", monospace;
	text-decoration: none;
	box-shadow: 0 4px 0 var(--knop-rand);
	cursor: pointer;
	transition: transform .08s, box-shadow .08s;
}
.pm-knop:hover { color: #fff; filter: brightness(1.08); }
.pm-knop:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--knop-rand); }
.pm-knop[disabled] { opacity: .6; cursor: progress; }

/* --- Voet ----------------------------------------------------------------- */
.pm-voet { border-top: 1px solid var(--lijn); }
.pm-voet__vlag { height: 8px; background: repeating-conic-gradient(var(--tekst) 0 25%, var(--bg) 0 50%) 0 0 / 8px 8px; opacity: .85; }
.pm-voet__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	max-width: 780px;
	margin: 0 auto;
	padding: 22px 24px 32px;
	font-size: 14px;
	color: var(--tekst-3);
}
.pm-voet__links { display: flex; flex-wrap: wrap; gap: 18px; }
.pm-voet__links a { color: var(--tekst-2); text-decoration: none; }
.pm-voet__links a:hover { color: var(--accent); }
.pm-voet__menu ul { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pm-voet__pixel { margin-left: auto; font: 9px/1 "Press Start 2P", monospace; color: var(--accent); text-decoration: none; animation: pm-knipper 1.6s steps(1) infinite; }
.pm-voet__pixel:hover { animation: none; }

/* --- Gewone pagina's en 404 ---------------------------------------------- */
.pm-artikel { padding-top: 56px; }
.pm-artikel--kort { padding: 24px 0; border-bottom: 1px solid var(--lijn); }
.pm-artikel__datum { margin: 0 0 6px; font: 13px/1.4 "JetBrains Mono", monospace; color: var(--tekst-3); }
.pm-artikel__titel { margin: 0 0 8px; font-size: 1.5rem; font-style: italic; font-weight: 750; line-height: 1.2; }
.pm-artikel__titel a { text-decoration: none; }
.pm-artikel__beeld { margin: 0 0 24px; }
.pm-artikel__beeld img { width: 100%; height: auto; border-radius: 4px; }
.pm-inhoud h2, .pm-inhoud h3 { font-style: italic; line-height: 1.2; }
.pm-inhoud blockquote { margin: 1.5em 0; padding-left: 18px; border-left: 3px solid var(--accent); font-style: italic; }
.pm-inhoud pre, .pm-inhoud code { font-family: "JetBrains Mono", monospace; font-size: .9em; }
.pm-inhoud pre { padding: 16px; overflow: auto; background: var(--vlak); border: 1px solid var(--lijn); }
.pm-inhoud img { height: auto; }
.pm-meer { font-weight: 700; text-decoration: none; }
.nav-links { display: flex; gap: 8px; margin-top: 30px; font-family: "JetBrains Mono", monospace; }
.nav-links .page-numbers { padding: 6px 12px; border: 1px solid var(--lijn); text-decoration: none; }
.nav-links .current { background: var(--accent); color: #fff; border-color: var(--accent); }
.pm-offtrack { padding-top: 96px; }
.pm-offtrack .pm-knop { margin-top: 28px; }

@keyframes pm-knipper { 50% { opacity: .25; } }
@keyframes pm-munt-spring { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 45% { transform: translateY(-52px); } 75% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@keyframes pm-munt-draai { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
@keyframes pm-knipoog { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes pm-golf { from { transform: scaleY(var(--h)); } to { transform: scaleY(calc(1.2 - var(--h))); } }
@keyframes pm-golf-weer { from { transform: scaleY(var(--h)); } to { transform: scaleY(calc(1.2 - var(--h))); } }
@keyframes pm-zwaai { from { transform: rotate(0); } to { transform: rotate(-150deg); } }

/* --- Smallere schermen ---------------------------------------------------- */
@media (max-width: 760px) {
	.pm-race { display: none; }
	.pm-score { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
	.pm-functie { grid-template-columns: minmax(0, 1fr); }
	.pm-functie__tijd { padding: 0 0 4px 30px; text-align: left; border-left: 2px solid var(--lijn); }
	.pm-functie__tijd span { display: inline; margin-right: 8px; }
	.pm-eerder__knop { margin-left: 0; }
	.pm-groepen, .pm-twee { grid-template-columns: minmax(0, 1fr); }
	.pm-feiten { grid-template-columns: minmax(0, 1fr); }
	.pm-form { grid-template-columns: minmax(0, 1fr); }
	.pm-form__alt { margin-left: 0; }
	.pm-ballon { font-size: 9px; }
}
@media (max-width: 480px) {
	body { font-size: 16px; }
	.pm-balk__binnen, .pm-main, .pm-voet__binnen { padding-left: 16px; padding-right: 16px; }
	.pm-profiel__kop { flex-direction: column; align-items: flex-start; gap: 16px; }
	.pm-score dd { font-size: 15px; }
	.pm-voet__pixel { margin-left: 0; }
}

/* --- Print: een nette PDF van het cv ------------------------------------- */
@media print {
	:root, :root[data-theme="dark"], :root[data-theme="light"] {
		--bg: #fff; --vlak: #fff; --tekst: #000; --tekst-2: #333; --tekst-3: #666; --lijn: #ccc;
		--accent: #c00; --accent-2: #444;
		color-scheme: light;
	}
	@page { margin: 14mm 16mm; }
	body { font-size: 10pt; line-height: 1.45; }
	.pm-balk, .pm-skip, .pm-contact, .pm-voet, .pm-profiel__links a[href="#contact"] { display: none !important; }
	.pm-main { max-width: none; padding: 0; }
	.pm-profiel { padding-top: 0; }
	.pm-sectie { padding-top: 18pt; }
	.pm-sectiekop { margin-bottom: 10pt; }
	.pm-naam { font-size: 26pt; }
	.pm-score { margin-top: 12pt; padding: 8pt 0; }
	.pm-score dd { font-size: 12pt; }
	.pm-functie { break-inside: avoid; grid-template-columns: 110px minmax(0, 1fr); }
	.pm-functie__inhoud { padding-bottom: 14pt; }
	.pm-project, .pm-lijst li, .pm-skill { break-inside: avoid; }
	.pm-functie__inhoud::before, .pm-balkje i, .pm-kop::after, .pm-verdeel__deel, .pm-strip__balk, .pm-legenda i, .pm-copilot__balk i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.pm-pitcrew, .pm-munt, .pm-pdflink, .pm-radio__label, .pm-radio__golf { display: none; }
	.pm-radio__bericht { break-inside: avoid; background: none; border: 0; border-left: 3px solid var(--accent); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.pm-radio__kop { padding: 0 0 0 12px; background: none; color: var(--tekst); }
	.pm-radio__tekst { padding: 4pt 0 0 12px; font-size: 10pt; }
	.pm-radio__wie { padding: 0 0 0 12px; }
	.pm-eerder__knop { margin-left: 0; padding: 0; border: 0; box-shadow: none; background: none; }
	.pm-eerder__pijl, .pm-eerder__info { display: none; }
	a { text-decoration: none; }
}