/* =====================================================================
   DWMComputers — retro.css
   Concept: de materialen van de beige-box-pc. Beige plastic (pagina),
   het blauwe BIOS-scherm (hero), een DOS-prompt (software),
   kettingpapier uit een matrixprinter (tarieven) en een typeplaatje.
   ===================================================================== */

/* ---------- Lettertypen (lokaal gehost, OFL) ---------- */
@font-face { font-family: "Saira"; src: url("../fonts/saira-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-sans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex"; src: url("../fonts/plex-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url("../fonts/vt323.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Doto"; src: url("../fonts/doto-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --kast: #d8d1be;
  --kast-licht: #e8e2d3;
  --kast-paneel: #e3dccb;
  --kast-schaduw: #b5ad97;
  --kast-diep: #8c846e;
  --inkt: #22201b;
  --grijs: #57513f;

  --vga-blauw: #0000aa;
  --vga-grijs: #aaaaaa;
  --vga-geel: #ffff55;
  --vga-cyaan: #55ffff;
  --vga-rood: #aa0000;

  --toets-blauw: #1c37c4;
  --toets-blauw-zij: #0b1a78;
  --led: #4cff7a;

  --papier: #fbfbf6;
  --papier-groen: #e2eedb;

  --display: "Saira", "Arial Narrow", sans-serif;
  --tekst: "Plex", "Helvetica Neue", Arial, sans-serif;
  --scherm: "VT323", "Courier New", monospace;
  --matrix: "Doto", "VT323", monospace;

  --max: 1200px;
  --pad: clamp(20px, 4vw, 44px);
  --kop-h: 76px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 16px); }

body {
  margin: 0;
  font-family: var(--tekst);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--kast);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fijne plasticstructuur over de hele pagina */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--vga-blauw); color: var(--vga-geel); }

img, svg { display: block; max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: var(--vga-blauw); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: #00007a; }

:focus-visible {
  outline: 3px solid var(--inkt);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--vga-geel);
  border-radius: 4px;
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 1001;
  background: var(--vga-geel); color: var(--inkt); padding: 10px 16px;
  font-weight: 700; text-decoration: none; border-radius: 6px;
}
.skip:focus { top: 12px; }

.visueel-verborgen {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

h1, h2, h3, h4 { margin: 0; line-height: 1.05; overflow-wrap: break-word; text-wrap: balance; }
p { margin: 0 0 1em; }

h1, h2 {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 850;
  letter-spacing: -0.01em;
  /* in het plastic gegoten: lichte rand onder de letters */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-family: var(--display); font-stretch: 112%; font-weight: 750; font-size: 1.35rem; }

.lead { font-size: 1.22rem; line-height: 1.55; max-width: 33em; }

/* ---------- LED ---------- */
.led {
  display: inline-block; flex: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9ffe2 0 14%, var(--led) 42%, #0f9a35 100%);
  box-shadow: 0 0 0 2px #a59d86, 0 0 8px 1px rgba(76, 255, 122, .7);
}

/* ---------- Toetsen (keycaps) ---------- */
.toets {
  position: relative; display: inline-flex;
  border-radius: 11px; padding: 0 0 6px;
  background: linear-gradient(#bdb59e, #a39b84);
  text-decoration: none; color: var(--inkt);
  font: 600 1.02rem/1.1 var(--tekst);
  box-shadow: 0 10px 16px -8px rgba(55, 44, 20, .55), 0 0 0 1px rgba(60, 50, 30, .25);
  cursor: pointer; border: 0;
  -webkit-tap-highlight-color: transparent;
}
.toets > span {
  display: block; padding: 15px 24px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #f6f1e5 0%, #e4ddca 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -3px 4px rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(255, 255, 255, .35);
  transition: transform .07s ease-out;
}
.toets:hover { color: var(--inkt); }
.toets:hover > span { background: linear-gradient(180deg, #faf6ec 0%, #e8e1cf 100%); }
.toets:active > span { transform: translateY(4px); }
.toets--blauw { background: linear-gradient(#14289a, var(--toets-blauw-zij)); color: #fff; }
.toets--blauw > span {
  background: linear-gradient(180deg, #3755e6 0%, var(--toets-blauw) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 4px rgba(0, 0, 0, .18);
}
.toets--blauw:hover { color: #fff; }
.toets--blauw:hover > span { background: linear-gradient(180deg, #4462ef 0%, #2240cf 100%); }
.toets--klein { font-size: .95rem; padding-bottom: 5px; }
.toets--klein > span { padding: 10px 16px 9px; }
.toets--klein:active > span { transform: translateY(3px); }

/* ---------- Header ---------- */
.kop {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(#ece6d8, #ddd6c3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 0 var(--kast-diep), 0 10px 18px -14px rgba(60, 48, 20, .6);
}
.kop__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--kop-h); }

.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--inkt); text-decoration: none; }
.logo:hover { color: var(--inkt); }
.logo__mark { width: 36px; height: 36px; image-rendering: pixelated; }
.logo__tekst { font-family: var(--display); font-stretch: 100%; font-weight: 500; font-size: 1.4rem; letter-spacing: -.005em; }
.logo__tekst b { font-stretch: 125%; font-weight: 900; }

.menu { display: flex; align-items: center; gap: 2px; }
.menu > a:not(.toets) {
  color: var(--inkt); text-decoration: none; font-weight: 500; font-size: 1rem;
  padding: 8px 12px; border-radius: 6px; position: relative;
}
.menu > a:not(.toets)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--vga-blauw) 0 4px, transparent 4px 6px);
  transform: scaleX(0); transform-origin: left; transition: transform .2s steps(6);
}
.menu > a:not(.toets):hover::after { transform: scaleX(1); }
.menu .toets { margin-left: 12px; }

.menu-knop {
  display: none; font: 600 1rem var(--tekst); color: var(--inkt); cursor: pointer;
  background: linear-gradient(#f6f1e5, #e4ddca); border: 0; border-radius: 8px; padding: 9px 16px;
  box-shadow: 0 4px 0 #a39b84, 0 0 0 1px rgba(60, 50, 30, .25);
}
.menu-knop[aria-expanded="true"] { transform: translateY(3px); box-shadow: 0 1px 0 #a39b84, 0 0 0 1px rgba(60, 50, 30, .25); }

.laadbalk { height: 5px; background: #c2baa3; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15); }
.laadbalk span {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--vga-blauw) 0 9px, transparent 9px 11px);
}

@media (max-width: 960px) {
  .menu-knop { display: inline-block; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kast-licht); padding: 8px var(--pad) 22px;
    box-shadow: 0 1px 0 var(--kast-diep), 0 18px 24px -14px rgba(60, 48, 20, .55);
  }
  .menu.is-open { display: flex; }
  .menu > a:not(.toets) { padding: 14px 4px; border-bottom: 1px solid var(--kast-schaduw); border-radius: 0; }
  .menu > a:not(.toets)::after { display: none; }
  .menu .toets { margin: 16px 0 0; align-self: flex-start; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 4.4vw, 4.1rem); line-height: 1; margin-bottom: 26px; text-wrap: pretty; }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 34px; }

.lampjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lampjes li { display: flex; align-items: center; gap: 14px; font-weight: 500; }

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__tekst { max-width: 40em; }
}

/* ---------- CRT-monitor ---------- */
.monitor { width: 100%; max-width: 640px; justify-self: center; }
.monitor__kast {
  position: relative;
  background: linear-gradient(165deg, #f1ecdf 0%, #e0d9c6 50%, #cfc7b0 100%);
  border-radius: 28px 28px 20px 20px;
  padding: clamp(14px, 3vw, 28px) clamp(14px, 3vw, 28px) 16px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .8),
    inset 2px 0 0 rgba(255, 255, 255, .35),
    inset 0 -3px 0 rgba(0, 0, 0, .09),
    0 2px 0 var(--kast-schaduw),
    0 40px 60px -30px rgba(55, 44, 20, .6);
}
.monitor__glas {
  container-type: inline-size;
  background: #191814;
  border-radius: 20px;
  padding: clamp(8px, 1.6vw, 14px);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .18);
}

.scherm {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 16px / 20px;
  background: var(--vga-blauw);
  color: var(--vga-grijs);
  font-family: var(--scherm);
  text-shadow: 0 0 1px currentColor, 0 0 7px rgba(140, 160, 255, .35);
  font-variant-ligatures: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2H9v1h1v2h1v2H9v-2H8v-2H7v1H6v1H5v1H3V1z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E") 1 1, default;
}
.scherm__lijnen, .scherm__gloed { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.scherm__lijnen {
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .2) 2px 3px);
  z-index: 3;
}
.scherm__gloed {
  z-index: 4;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(120% 110% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .55) 100%);
  overflow: hidden;
}
/* Langzaam rollende balk, zoals op een echte CRT */
.scherm__gloed::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .045), rgba(255, 255, 255, 0));
  top: -25%;
  animation: rolbalk 8s linear infinite;
}
@keyframes rolbalk { to { top: 110%; } }

/* Bootscherm */
.scherm__boot {
  position: absolute; inset: 0; z-index: 2; display: none;
  background: #000; color: var(--vga-grijs);
  padding: 5cqi 6cqi; font-size: clamp(13px, 3.9cqi, 23px); line-height: 1.18; white-space: pre-wrap;
}
.scherm__boot .wit { color: #fff; }
.scherm__boot .logo-boot { position: absolute; top: 5cqi; right: 6cqi; width: 12cqi; height: 12cqi; image-rendering: pixelated; }
.scherm__boot .knipper { animation: knipper 1s steps(2) infinite; }
.scherm[data-staat="boot"] .scherm__boot { display: block; }
.scherm[data-staat="boot"] .bios { visibility: hidden; }

.scherm[data-staat="uit"] { background: #12140f; }
.scherm[data-staat="uit"] .bios, .scherm[data-staat="uit"] .scherm__boot { visibility: hidden; }
.scherm[data-staat="uit"] .scherm__lijnen { opacity: .4; }

.scherm.is-aanzetten { animation: crt-aan .55s ease-out both; }
.scherm.is-uitzetten > :not(.scherm__gloed) { animation: crt-uit .45s ease-in both; }
@keyframes crt-aan {
  0% { transform: scale(.55, .004); filter: brightness(6); }
  30% { transform: scale(1, .004); filter: brightness(5); }
  65% { transform: scale(1, 1); filter: brightness(1.8); }
  100% { transform: none; filter: none; }
}
@keyframes crt-uit {
  0% { transform: none; filter: none; }
  55% { transform: scale(1, .004); filter: brightness(4); }
  85% { transform: scale(.02, .004); filter: brightness(6); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}

/* BIOS-menu */
.bios {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: 3.2cqi 3.4cqi 2.6cqi;
  font-size: clamp(12px, 3.55cqi, 22px); line-height: 1.12;
}
.bios__titel {
  margin: 0 0 2.2cqi; text-align: center; color: #fff;
  padding-bottom: 1.4cqi; border-bottom: 3px double var(--vga-grijs);
}
.bios__titel span { color: var(--vga-cyaan); }
.bios__vakken { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2cqi; min-height: 0; }
.bios__vak { border: 3px double var(--vga-grijs); padding: 1.6cqi 2cqi; min-height: 0; overflow: hidden; }
.bios__kop { font-family: var(--scherm); font-weight: 400; font-size: 1em; letter-spacing: 0; color: var(--vga-cyaan); margin: 0 0 1.2cqi; text-shadow: inherit; }
.bios__lijst { list-style: none; margin: 0; padding: 0; }
.bios__lijst li {
  color: var(--vga-geel); padding: .08em .35em; cursor: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bios__lijst li::before { content: "\25BA  "; color: var(--vga-geel); }
.bios__lijst li[aria-selected="true"] { background: var(--vga-rood); color: #fff; }
.bios__lijst li[aria-selected="true"]::before { color: #fff; }
.bios__lijst li:focus-visible { outline: 2px solid #fff; outline-offset: -2px; box-shadow: none; border-radius: 0; }
.bios__hulp p { margin: 0 0 .8em; }
.bios__vorm { color: #fff; }
.bios__tip { color: var(--vga-geel); }
.bios__voet {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3em 1.4em;
  margin-top: 2cqi; padding-top: 1.2cqi; border-top: 3px double var(--vga-grijs); color: #fff;
}
.bios__voet kbd { font-family: inherit; color: var(--vga-geel); }
.bios__actie { color: #fff; text-decoration: none; padding: 0 .3em; }
.bios__actie:hover, .bios__actie:focus-visible { background: var(--vga-rood); color: #fff; }
.bios__actie:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: none; border-radius: 0; }

/* Op smalle schermen: één kolom en grotere letters */
@container (max-width: 430px) {
  .scherm { aspect-ratio: auto; min-height: 80cqi; }
  .bios { position: relative; inset: auto; font-size: clamp(15px, 5cqi, 20px); padding: 4cqi; }
  .bios__vakken { grid-template-columns: 1fr; }
  .bios__verberg-mobiel { display: none; }
}

.monitor__onder {
  display: flex; align-items: center; gap: 14px; padding: 14px 6px 0;
}
.monitor__merk { font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: .85rem; color: var(--grijs); margin-right: auto; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.monitor__merk b { font-weight: 900; font-stretch: 125%; color: var(--inkt); }
.monitor__knopjes { display: flex; gap: 8px; }
.monitor__knopjes i {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f3eee2, #c9c1ab);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(0, 0, 0, .15), inset 0 -1px 2px rgba(0, 0, 0, .15);
}
.led--monitor { width: 9px; height: 9px; transition: background .3s, box-shadow .3s; }
.monitor.is-uit .led--monitor { background: #ff9d2e; box-shadow: 0 0 0 2px #a59d86, 0 0 6px 1px rgba(255, 157, 46, .7); }
.monitor__aan {
  width: 40px; height: 26px; border: 0; border-radius: 5px; cursor: pointer;
  background: linear-gradient(#f4efe3, #dcd4c0);
  box-shadow: 0 3px 0 #a39b84, 0 0 0 1px rgba(60, 50, 30, .3), inset 0 1px 0 #fff;
  transition: transform .06s, box-shadow .06s;
}
.monitor__aan:active, .monitor__aan[aria-pressed="false"] { transform: translateY(2px); box-shadow: 0 1px 0 #a39b84, 0 0 0 1px rgba(60, 50, 30, .3), inset 0 1px 0 #fff; }
.monitor__voet {
  width: 42%; height: 30px; margin: 0 auto;
  background: linear-gradient(180deg, #b8b099 0%, #d5cdb8 35%, #c8c0a9 100%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  position: relative;
}
.monitor__voet::after {
  content: ""; position: absolute; left: -6%; right: -6%; bottom: -10px; height: 12px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(50, 40, 20, .35), transparent);
}

/* ---------- Ventilatierooster als scheiding ---------- */
.rooster {
  height: 30px; max-width: var(--max); margin: 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='30'%3E%3Crect x='3' y='11' width='32' height='8' rx='4' fill='%23938b74'/%3E%3Crect x='3' y='12' width='32' height='3' rx='1.5' fill='%237c745e'/%3E%3Cpath d='M7 19.5h24' stroke='%23f3eee1' stroke-opacity='.8'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center;
}

/* ---------- Secties ---------- */
.sectie { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
/* Naad in het plastic tussen twee secties */
.sectie + .sectie { box-shadow: inset 0 1px 0 var(--kast-schaduw), inset 0 2px 0 rgba(255, 255, 255, .55); }
.sectie__kop { max-width: 44em; margin-bottom: clamp(36px, 5vw, 60px); }
.sectie__kop h2 { margin-bottom: 18px; }

/* ---------- Onder de motorkap ---------- */
.motorkap { padding-bottom: clamp(40px, 6vw, 80px); }
.motorkap__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); }
.motorkap__beeld {
  position: sticky; top: calc(var(--kop-h) + 20px);
  height: calc(100vh - var(--kop-h) - 40px); max-height: 820px;
  display: flex; align-items: center; justify-content: center;
}
.kast { width: 100%; height: 100%; overflow: visible; }

.stappen-kast { list-style: none; margin: 0; padding: 0; }
.kast-stap { min-height: 78vh; display: flex; align-items: center; }
.kast-stap:first-child { min-height: 70vh; }
.kast-stap:last-child { min-height: 85vh; }
.kast-stap__kaart { transition: opacity .4s ease; opacity: .3; }
.kast-stap.is-actief .kast-stap__kaart { opacity: 1; }
.kast-stap__nr {
  font-variant-ligatures: none;
  display: inline-block; font-family: var(--scherm); font-size: 1.35rem; line-height: 1;
  background: var(--vga-geel); color: var(--inkt); padding: 5px 10px 4px; border-radius: 4px;
  box-shadow: 0 0 0 1.5px var(--inkt); margin-bottom: 18px;
}
.kast-stap h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-stretch: 118%; font-weight: 820; margin-bottom: 16px; }
.kast-stap p { max-width: 30em; }
.voorbeeld { color: var(--grijs); font-size: 1rem; }

/* SVG van de kast */
.kast .onderdeel { transition: opacity .5s ease, filter .5s ease; }
.kast[data-stap="2"] .onderdeel:not(.voor-2),
.kast[data-stap="3"] .onderdeel:not(.voor-3),
.kast[data-stap="4"] .onderdeel:not(.voor-4),
.kast[data-stap="5"] .onderdeel:not(.voor-5) { opacity: .28; filter: grayscale(.85); }

#d-paneel {
  transform-box: view-box; transform-origin: 0 0;
  transition: transform 1s cubic-bezier(.65, 0, .25, 1), opacity .7s ease;
}
.kast:not([data-stap="0"]):not([data-stap="6"]) #d-paneel { transform: translate(600px, 40px) rotate(7deg); opacity: 0; }
.paneel__vlak { transition: fill-opacity .6s; }
.paneel__beige, .paneel__glas { transition: opacity .6s; }
.paneel__glas { opacity: 0; }
.kast[data-stap="6"] .paneel__vlak { fill-opacity: 0; }
.kast[data-stap="6"] .paneel__beige { opacity: 0; }
.kast[data-stap="6"] .paneel__glas { opacity: 1; }

.kast .label { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.kast .label line { stroke: var(--inkt); stroke-width: 1.6; }
.kast .label circle { fill: var(--vga-geel); stroke: var(--inkt); stroke-width: 1.6; }
.kast .label rect { fill: var(--vga-geel); stroke: var(--inkt); stroke-width: 1.6; }
.kast .label text { font: 600 14px var(--tekst); fill: var(--inkt); text-anchor: middle; }
.kast[data-stap="1"] .label[data-stap="1"],
.kast[data-stap="2"] .label[data-stap="2"],
.kast[data-stap="3"] .label[data-stap="3"],
.kast[data-stap="4"] .label[data-stap="4"],
.kast[data-stap="5"] .label[data-stap="5"] { opacity: 1; transition-delay: .35s; }

.kast__klein { font: 700 7.5px var(--tekst); fill: var(--kast-diep); text-anchor: middle; letter-spacing: .06em; }
.kast__segment { font: 900 15px var(--matrix); fill: #ff4b3a; text-anchor: middle; }
.kast__ssd { font: 700 8px var(--tekst); fill: #fff; text-anchor: middle; }
.kast__sticker { font: 900 13px var(--display); font-stretch: 120%; fill: var(--inkt); text-anchor: middle; }
.kast__sticker--klein { font: 500 8.5px var(--tekst); fill: var(--grijs); }
.kast .led-aan { fill: var(--led); }
.kast .led-hdd { fill: #5a3d00; }

.kast .waaier { transform-box: fill-box; transform-origin: center; }
.kast[data-stap="3"] #d-koeler .waaier,
.kast[data-stap="3"] #d-voeding .waaier,
.kast[data-stap="6"] .waaier { animation: draai .45s linear infinite; }
.kast .arm { transform-box: view-box; transform-origin: 448px 274px; transition: transform .4s; }
.kast[data-stap="4"] .arm { animation: zoek .9s ease-in-out infinite alternate; }
.kast[data-stap="4"] .led-hdd, .kast[data-stap="6"] .led-hdd { animation: hdd 0.5s steps(1) infinite; }
.kast .golven path { opacity: 0; }
.kast[data-stap="5"] .golven path { animation: golf 1.5s ease-out infinite; }
.kast[data-stap="5"] .golven path:nth-child(2) { animation-delay: .2s; }
.kast[data-stap="5"] .golven path:nth-child(3) { animation-delay: .4s; }
.kast .nieuw-reepje { transition: transform .7s cubic-bezier(.3, 1.35, .5, 1), opacity .3s; }
.kast:not(.heeft-reepje) .nieuw-reepje { transform: translateY(-80px); opacity: 0; }

@keyframes draai { to { transform: rotate(360deg); } }
@keyframes zoek { from { transform: rotate(-8deg); } to { transform: rotate(16deg); } }
@keyframes hdd { 0% { fill: #ffb020; } 30% { fill: #5a3d00; } 45% { fill: #ffb020; } 70% { fill: #5a3d00; } }
@keyframes golf { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 960px) {
  .motorkap__grid { grid-template-columns: 1fr; gap: 0; }
  .motorkap__beeld {
    top: var(--kop-h); height: 48vh; z-index: 1;
    background: linear-gradient(var(--kast) 85%, rgba(216, 209, 190, 0));
  }
  .stappen-kast { position: relative; z-index: 2; }
  .kast-stap, .kast-stap:first-child, .kast-stap:last-child { min-height: 0; padding: 42vh 0 4vh; display: block; }
  .kast-stap:first-child { padding-top: 6vh; }
  .kast-stap:last-child { padding-bottom: 12vh; }
  .kast-stap__kaart {
    background: var(--kast-licht); border-radius: 14px; padding: 22px 22px 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 0 var(--kast-schaduw), 0 16px 30px -18px rgba(55, 44, 20, .55);
    opacity: 1;
  }
}

/* ---------- Software: DOS ---------- */
.dos {
  font-variant-ligatures: none;
  position: relative; overflow: hidden;
  background: #000; color: var(--vga-grijs);
  font-family: var(--scherm); font-size: clamp(19px, 1.9vw, 25px); line-height: 1.28;
  padding: clamp(22px, 3vw, 36px) clamp(20px, 3.4vw, 44px);
  border-radius: 16px;
  text-shadow: 0 0 1px currentColor, 0 0 8px rgba(200, 200, 200, .25);
  box-shadow: 0 0 0 12px #2b2a26, 0 0 0 14px var(--kast-diep), 0 0 0 15px rgba(255, 255, 255, .5), 0 40px 50px -30px rgba(55, 44, 20, .7);
  margin: 14px;
}
.dos::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .25) 2px 3px),
    radial-gradient(130% 120% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .6) 100%);
}
.dos__regel { margin: 0; white-space: pre-wrap; }
.dos__prompt { color: var(--vga-grijs); }
.dos__commando { color: #fff; }
.dos__info { color: #8a8a8a; }
.dos__lijst { list-style: none; margin: .8em 0; padding: 0; }
.dos__lijst li { display: grid; grid-template-columns: 9.5ch 4.5ch 1fr; padding: .12em 0; }
.dos__naam { color: #fff; }
.dos__ext { color: var(--vga-cyaan); }
.dos__omschr { color: var(--vga-grijs); }
.dos__cursor {
  display: inline-block; width: .55em; height: .13em; margin-left: .15em;
  background: var(--vga-grijs); vertical-align: -.05em;
  animation: knipper 1.06s steps(2) infinite;
}
.dos.is-wachtend .dos__regel:not(:first-child),
.dos.is-wachtend .dos__lijst .dos__regel { opacity: 0; }
.dos .is-zichtbaar { opacity: 1 !important; }
@keyframes knipper { 50% { opacity: 0; } }

@media (max-width: 640px) {
  .dos__lijst li { grid-template-columns: 9.5ch 1fr; }
  .dos__omschr { grid-column: 1 / -1; padding-left: 2ch; margin-bottom: .35em; }
}

/* ---------- Werkwijze ---------- */
.vormen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 30px); }
.vorm {
  background: var(--kast-paneel); border-radius: 14px; padding: 28px 26px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -2px 0 rgba(0, 0, 0, .04), 0 1px 0 var(--kast-schaduw), 0 18px 26px -20px rgba(55, 44, 20, .55);
}
.vorm h3 { margin: 18px 0 10px; }
.vorm p { margin: 0; }
.px { width: 48px; height: 48px; color: var(--vga-blauw); image-rendering: pixelated; }
.px--klein { width: 20px; height: 16px; }

.stappen__titel { margin-top: clamp(64px, 8vw, 104px); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-stretch: 120%; font-weight: 820; }
.stappen { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.stap h4 { font-size: 1.15rem; font-weight: 700; margin: 22px 0 8px; }
.stap p { margin: 0; font-size: 1.02rem; }
.toetsje {
  position: relative; display: grid; align-content: space-between;
  width: 66px; height: 62px; padding: 7px 10px 9px; border-radius: 9px;
  font: 600 1.35rem/1 var(--tekst);
  background: linear-gradient(180deg, #f6f1e5, #e2dbc8);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 4px rgba(0, 0, 0, .06), 0 0 0 1px rgba(60, 50, 30, .22), 0 6px 0 #aaa28b, 0 12px 14px -6px rgba(55, 44, 20, .5);
}
.toetsje small { font-size: .78rem; font-weight: 500; color: var(--grijs); }

@media (max-width: 960px) {
  .vormen { grid-template-columns: 1fr; }
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .stappen { grid-template-columns: 1fr; } }

/* ---------- Tarieven: matrixprinter + kettingpapier ---------- */
.printer-scene { max-width: 860px; margin: 0 auto; }
.printer { position: relative; z-index: 2; }
.printer__kap {
  height: 104px; border-radius: 22px 22px 10px 10px;
  background: linear-gradient(170deg, #f1ecdf 0%, #ddd6c3 60%, #cdc5ae 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), inset 0 -3px 0 rgba(0, 0, 0, .08), 0 2px 0 var(--kast-schaduw), 0 24px 30px -22px rgba(55, 44, 20, .7);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  position: relative;
}
.printer__kap::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 22px; height: 4px; border-radius: 2px;
  background: rgba(0, 0, 0, .1); box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.printer__merk { font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: .95rem; color: var(--grijs); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); padding-top: 18px; }
.printer__merk b { font-stretch: 125%; font-weight: 900; color: var(--inkt); }
.printer__lampjes { display: flex; align-items: center; gap: 8px; font: 600 .78rem var(--tekst); color: var(--grijs); padding-top: 18px; }
.printer__lampjes i { width: 8px; height: 8px; border-radius: 50%; background: #2c4a33; margin-left: 10px; }
.printer__lampjes i.aan { background: var(--led); box-shadow: 0 0 6px var(--led); }
.printer__gleuf {
  position: relative; height: 16px; margin: 0 52px; border-radius: 0 0 8px 8px;
  background: linear-gradient(#1b1a17, #34322c);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  overflow: hidden;
}
.printer__kop {
  position: absolute; top: 3px; left: 4%; width: 46px; height: 8px; border-radius: 2px;
  background: linear-gradient(#9da3aa, #6b7178);
}
.printer-scene.is-printen .printer__kop { animation: printkop .7s ease-in-out infinite alternate; }
@keyframes printkop { from { left: 4%; } to { left: calc(96% - 46px); } }

.papier-venster { position: relative; z-index: 1; margin: -8px 76px 0; padding-bottom: 24px; }
.papier-venster::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22px; pointer-events: none;
  top: calc(var(--feed, 1) * (100% - 24px));
  background: linear-gradient(rgba(55, 44, 20, .28), rgba(55, 44, 20, 0));
}
.papier {
  position: relative;
  background: var(--papier);
  padding: 40px 66px 28px;
  clip-path: inset(0 0 calc((1 - var(--feed, 1)) * 100%) 0);
  color: #2a2a2a;
}
/* Transportgaatjes links en rechts */
.papier::before, .papier::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38px;
  background:
    radial-gradient(circle at 50% 12px, var(--kast) 0 5.5px, rgba(0, 0, 0, .12) 6px, transparent 7px) 0 0 / 38px 24px repeat-y;
}
.papier::before { left: 0; border-right: 2px dotted #cfcdc0; }
.papier::after { right: 0; border-left: 2px dotted #cfcdc0; }

.papier, .prijzen { font-variant-ligatures: none; }
.papier__kop { font-variation-settings: "ROND" 100; font-family: var(--matrix); font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.1; margin: 0 0 22px; color: #1d1d1d; }
.prijzen { width: 100%; border-collapse: collapse; }
.prijzen thead th { font-family: var(--scherm); font-weight: 400; font-size: 1.25rem; text-align: left; color: #555; padding: 0 12px 6px; border-bottom: 2px dashed #9a9a90; }
.prijzen thead th:last-child { text-align: right; }
.prijzen tbody tr:nth-child(odd) { background: var(--papier-groen); }
.prijzen tbody th, .prijzen tbody td { padding: 14px 12px; vertical-align: top; text-align: left; }
.prijzen tbody th, .prijzen tbody td, .papier__einde { font-variation-settings: "ROND" 100; }
.prijzen tbody th { font-family: var(--matrix); font-weight: 900; font-size: 1.45rem; line-height: 1.2; color: #1d1d1d; }
.prijzen tbody td { font-family: var(--matrix); font-weight: 900; font-size: 1.85rem; line-height: 1.1; text-align: right; white-space: nowrap; color: #1d1d1d; }
.prijzen small { display: block; font-family: var(--scherm); font-weight: 400; font-size: 1.12rem; line-height: 1.2; color: #4a4a44; margin-top: 6px; white-space: normal; }
.prijzen td small { margin-top: 4px; }
.papier__noot { font-family: var(--scherm); font-size: 1.15rem; line-height: 1.3; color: #4a4a44; margin: 22px 12px 0; max-width: 40em; }
.papier__einde { font-family: var(--matrix); font-weight: 800; font-size: 1rem; text-align: center; color: #555; margin: 26px 0 0; padding-top: 18px; border-top: 2px dashed #c9c7bb; }

@media (max-width: 700px) {
  .printer__gleuf { margin: 0 26px; }
  .papier-venster { margin: -8px 18px 0; }
  .papier { padding: 24px 30px 20px; }
  .papier__kop { font-size: 1.35rem; }
  .prijzen thead { display: none; }
  .prijzen tbody tr { display: grid; grid-template-columns: 1fr; padding: 12px 8px; }
  .prijzen tbody th, .prijzen tbody td { padding: 0 !important; text-align: left; }
  .prijzen tbody td { white-space: normal; margin-top: 8px; display: flex; align-items: baseline; gap: 10px; }
  .prijzen td small { margin: 0; }
  .papier::before, .papier::after { width: 20px; background-size: 20px 24px; background-image: radial-gradient(circle at 50% 12px, var(--kast) 0 4px, transparent 4.5px); }
  .printer__lampjes { display: none; }
  .prijzen tbody td { font-size: 1.5rem; }
  .prijzen tbody th { font-size: 1.2rem; }
}

/* ---------- Over + typeplaatje ---------- */
.over__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.over__tekst h2 { margin-bottom: 20px; }
.over__tekst p { max-width: 36em; }
.beloften { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 16px; }
.beloften li { display: flex; gap: 16px; align-items: baseline; max-width: 36em; }
.beloften .px { flex: none; transform: translateY(2px); }
.beloften strong { font-weight: 700; }

.plaatje {
  position: relative; margin: 20px 0 0; padding: 30px 32px 24px;
  border-radius: 10px;
  color: #2c3036;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 1px, rgba(0, 0, 0, .025) 1px 3px),
    linear-gradient(160deg, #eef0f2 0%, #c9ced3 55%, #dde1e4 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .18), 0 2px 0 #9aa0a6, 0 26px 36px -24px rgba(40, 40, 40, .6);
  transform: rotate(-1.4deg);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.plaatje__kop { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 2px solid rgba(44, 48, 54, .55); }
.plaatje__logo { width: 44px; height: 44px; image-rendering: pixelated; }
.plaatje__naam { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 1.5rem; line-height: 1; }
.plaatje__sub { margin: 4px 0 0; font-size: .92rem; font-weight: 500; }
.plaatje__specs { display: grid; grid-template-columns: auto 1fr; margin: 14px 0 18px; font-family: var(--display); font-stretch: 88%; font-size: 1.02rem; }
.plaatje__specs dt, .plaatje__specs dd { padding: 7px 0; border-bottom: 1px solid rgba(44, 48, 54, .18); }
.plaatje__specs dt { font-weight: 700; padding-right: 22px; }
.plaatje__specs dd { margin: 0; font-weight: 500; }
.plaatje__voet { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.plaatje__serie { font-family: var(--display); font-stretch: 85%; font-weight: 600; font-size: .92rem; letter-spacing: .04em; }
.plaatje__streepjes { width: 130px; height: 34px; }
.klinknagel {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0 18%, #b9bec4 45%, #7b8188 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.klinknagel:nth-of-type(1) { top: 10px; left: 10px; }
.klinknagel:nth-of-type(2) { top: 10px; right: 10px; }
.klinknagel:nth-of-type(3) { bottom: 10px; left: 10px; }
.klinknagel:nth-of-type(4) { bottom: 10px; right: 10px; }

@media (max-width: 960px) { .over__grid { grid-template-columns: 1fr; } .plaatje { max-width: 480px; } }

/* ---------- Vragen ---------- */
.vragen { max-width: 54em; display: grid; gap: 12px; }
.vraag {
  background: var(--kast-paneel); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 0 var(--kast-schaduw), 0 10px 18px -16px rgba(55, 44, 20, .6);
}
.vraag summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 24px; font-weight: 600; font-size: 1.12rem; border-radius: 12px;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--vga-blauw); }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--vga-blauw); }
.plus::before { left: 0; right: 0; top: 6px; height: 4px; }
.plus::after { top: 0; bottom: 0; left: 6px; width: 4px; transition: transform .15s steps(2); }
.vraag[open] .plus::after { transform: scaleY(0); }
.vraag .antwoord { padding: 0 24px 20px; max-width: 44em; }
.vraag .antwoord p:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.contact h2 { margin-bottom: 20px; }
.gegevens { margin: 36px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; }
.gegevens dt { color: var(--grijs); font-size: 1rem; }
.gegevens dd { margin: 0; font-weight: 600; }

/* Doordrukformulier: wit origineel met gele en roze kopie erachter */
.formulier-stapel { position: relative; isolation: isolate; padding: 6px 10px 14px 4px; }
.formulier-stapel::before, .formulier-stapel::after {
  content: ""; position: absolute; z-index: -1; border-radius: 4px;
  box-shadow: 0 10px 16px -12px rgba(55, 44, 20, .5);
}
.formulier-stapel::before { inset: 14px 0 0 16px; background: #f6e7a4; transform: rotate(1.6deg); }
.formulier-stapel::after { inset: 22px -4px -6px 26px; background: #f2c9cf; transform: rotate(2.8deg); z-index: -2; }

.formulier {
  background: #fdfcf7; border-radius: 4px; padding: clamp(22px, 3.4vw, 38px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 22px 30px -22px rgba(55, 44, 20, .6);
}
.formulier__kop {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px;
  padding-bottom: 14px; margin-bottom: 24px; border-bottom: 4px double var(--vga-blauw);
}
.formulier__titel { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 1.6rem; color: var(--vga-blauw); }
.formulier__meta { margin: 0; display: flex; gap: 20px; font-size: .95rem; color: var(--grijs); }
.formulier__meta b { font-family: var(--scherm); font-weight: 400; font-size: 1.3rem; color: var(--inkt); margin-left: 4px; }

.formulier__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.veld { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
.veld label, .veld legend { font-weight: 600; font-size: .98rem; }
.optioneel { font-weight: 400; color: var(--grijs); }
.veld input, .veld select, .veld textarea {
  font: inherit; font-size: 1.05rem; color: var(--inkt); width: 100%;
  background: #f3efe3; border: 0; border-bottom: 2px solid #9d957f; border-radius: 6px 6px 2px 2px;
  padding: 12px 14px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
  transition: background .15s, border-color .15s;
}
.veld textarea { min-height: 140px; resize: vertical; }
.veld input:hover, .veld select:hover, .veld textarea:hover { background: #efeadc; }
.veld input:focus, .veld select:focus, .veld textarea:focus { background: #fff; border-bottom-color: var(--vga-blauw); }
.veld [aria-invalid="true"] { border-bottom-color: #b3261e; background: #fbecea; }
.fout { color: #a3201a; font-size: .95rem; font-weight: 600; }

fieldset.veld { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.keuzes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.keuzes label {
  position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-weight: 500; font-size: .98rem; padding: 9px 14px; border-radius: 8px;
  background: linear-gradient(#f6f1e5, #e4ddca);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(60, 50, 30, .22), 0 3px 0 #b3ab94;
  transition: transform .06s, box-shadow .06s;
}
.keuzes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuzes .led { width: 9px; height: 9px; background: #3b4a3e; box-shadow: 0 0 0 2px #b5ad97, inset 0 1px 1px rgba(0, 0, 0, .4); }
.keuzes label:has(input:checked) { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(60, 50, 30, .3), 0 1px 0 #b3ab94; }
.keuzes label:has(input:checked) .led { background: radial-gradient(circle at 35% 30%, #d9ffe2 0 14%, var(--led) 42%, #0f9a35 100%); box-shadow: 0 0 0 2px #a59d86, 0 0 8px 1px rgba(76, 255, 122, .7); }
.keuzes label:has(input:focus-visible) { outline: 3px solid var(--inkt); outline-offset: 3px; }

.formulier__onder { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 8px; }
.formulier__noot { font-size: .92rem; color: var(--grijs); margin: 0; max-width: 22em; }

/* ISO-Enter-toets als verzendknop */
.enter {
  flex: none; border: 0; padding: 0 0 6px; background: none; cursor: pointer;
  filter: drop-shadow(0 6px 0 var(--toets-blauw-zij)) drop-shadow(0 14px 12px rgba(55, 44, 20, .35));
  transition: filter .07s, transform .07s;
}
.enter__vorm {
  position: relative; display: block; width: 190px; height: 104px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 20% 50%, 0 50%);
  background: linear-gradient(180deg, #3755e6 0%, var(--toets-blauw) 100%);
  color: #fff; text-align: left;
}
.enter__vorm::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 12%);
}
.enter__tekst { position: absolute; top: 14px; left: 18px; font: 600 1.05rem var(--tekst); }
.enter__pijl { position: absolute; right: 18px; bottom: 10px; font-size: 1.8rem; line-height: 1; }
.enter:hover .enter__vorm { background: linear-gradient(180deg, #4462ef 0%, #2240cf 100%); }
.enter:active { transform: translateY(5px); filter: drop-shadow(0 1px 0 var(--toets-blauw-zij)) drop-shadow(0 6px 8px rgba(55, 44, 20, .3)); }
.enter:focus-visible { box-shadow: none; outline-offset: 6px; }
.enter[disabled] { opacity: .7; cursor: progress; }

.status {
  margin-top: 18px; padding: 14px 16px; border-radius: 6px;
  background: #e6e9fb; border-left: 5px solid var(--vga-blauw); font-size: 1rem;
}
.status[hidden] { display: none; }
.status--fout { background: #fbecea; border-left-color: #b3261e; }

@media (max-width: 960px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .formulier__rij { grid-template-columns: 1fr; gap: 0; }
  .formulier__onder { flex-direction: column; align-items: stretch; }
  .enter { align-self: flex-end; }
}

/* ---------- Footer: achterkant van de kast ---------- */
.voet { background: #c9c1ab; color: #3a362c; font-size: 1rem; box-shadow: inset 0 1px 0 var(--kast-diep); }
.poorten {
  background: linear-gradient(#a9afb5, #8f959c); padding: 20px 0 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.poorten__rij { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: flex-end; }
.poort { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.poort em { font: 700 .66rem var(--tekst); font-style: normal; letter-spacing: .08em; color: #f4f6f8; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.poort i { display: block; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .5); }
.poort--ps2 i { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, #2b1838 0 30%, #7d3c98 34%); }
.poort--com i, .poort--lpt i, .poort--vga i {
  height: 22px; clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  background-image: radial-gradient(circle, #1b1b1b 0 1.6px, transparent 2px);
  background-size: 7px 7px; background-position: 3px 2px;
}
.poort--com i { width: 50px; background-color: #0f9b9b; }
.poort--lpt i { width: 96px; background-color: #8e2440; }
.poort--vga i { width: 54px; background-color: #0000aa; }
.poort--lan i { width: 28px; height: 24px; background: #2a2b2e; clip-path: polygon(0 0, 100% 0, 100% 75%, 70% 75%, 70% 100%, 30% 100%, 30% 75%, 0 75%); }
.poort--usb i { width: 34px; height: 13px; background: linear-gradient(#2a2b2e 0 45%, #f2f2f2 45% 75%, #2a2b2e 75%); border-radius: 2px; }

.voet__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px 48px; padding: 44px 0 30px; }
.voet .logo { margin-bottom: 12px; }
.voet a { color: var(--inkt); }
.voet nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 8px 32px; }
.voet__systeem { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.uptime { margin: 0; font-size: .92rem; }
.uptime span { display: inline-block; margin-left: 6px; font: 900 1rem var(--matrix); color: #ff4b3a; background: #1b0c0a; padding: 3px 8px; border-radius: 3px; letter-spacing: .04em; }
.voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 0 30px; border-top: 1px solid var(--kast-diep); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset; font-size: .9rem; }

/* ---------- Afsluitscherm ---------- */
.uit { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; text-align: center; background: transparent; }
.uit[hidden] { display: none; }
.uit::before, .uit::after { content: ""; position: absolute; left: 0; right: 0; height: 50.2%; background: #000; animation: sluit .28s ease-in both; }
.uit::before { top: 0; transform-origin: top; }
.uit::after { bottom: 0; transform-origin: bottom; }
.uit__lijn { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #fff; box-shadow: 0 0 18px 4px rgba(255, 255, 255, .8); z-index: 1; animation: lijn .5s .26s ease-in both; }
.uit p, .uit button { position: relative; z-index: 2; opacity: 0; animation: verschijn .4s .9s both; }
.uit p { font-family: var(--scherm); font-size: clamp(26px, 4.4vw, 52px); color: #ff8c1a; margin: 0 24px 14px; text-shadow: 0 0 10px rgba(255, 140, 26, .45); }
.uit button { font-family: var(--scherm); font-size: 22px; color: #8a8a8a; background: none; border: 0; cursor: pointer; animation-delay: 1.4s; }
.uit > div { position: relative; z-index: 2; }
@keyframes sluit { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lijn { 0% { transform: scaleX(1); opacity: 1; } 80% { transform: scaleX(.004); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes verschijn { to { opacity: 1; } }

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .scherm__gloed::after { display: none; }
  .dos__cursor { animation: none; }
}

/* ---------- Afdrukken ---------- */
@media print {
  body::before, .kop, .monitor, .rooster, .motorkap__beeld, .poorten, .voet__systeem, .printer, .uit { display: none !important; }
  body { background: #fff; }
  .papier { clip-path: none !important; }
  .kast-stap__kaart { opacity: 1 !important; }
  .kast-stap { min-height: 0 !important; padding: 0 0 16px !important; }
}

/* ---------- Losse pagina's (privacy, 404) ---------- */
.pagina { padding: clamp(48px, 7vw, 96px) 0; }
.pagina__in { max-width: 46em; }
.pagina h1 { font-size: clamp(1.9rem, 6.6vw, 3.8rem); margin-bottom: 24px; hyphens: auto; }
.pagina h2 { font-size: 1.5rem; font-stretch: 112%; margin: 44px 0 12px; }
.pagina ul { padding-left: 1.2em; }
.pagina li { margin-bottom: 6px; }
.pagina .muted { color: var(--grijs); }
.kop__in > .toets { white-space: nowrap; }
@media (max-width: 420px) { .logo__tekst { font-size: 1.2rem; } .logo__mark { width: 30px; height: 30px; } .kop__in > .toets > span { padding: 9px 12px 8px; font-size: .9rem; } }