:root {
  --ruimte: #07110f;
  --inkt: #16302c;
  --papier: #f5f3ed;
  --op: #fffefb;
  --tekst: #1b201e;
  --zacht: #5b6360;
  --lijn: #d5d0c2;
  --elek: #d4463b;
  --gas: #d99114;
  --water: #2d86cc;
  --tele: #35a46a;
  --riool: #8a6038;
  --display: "Archivo", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0e1a18; --op: #15241f; --tekst: #e8ece9;
    --zacht: #9aa8a3; --lijn: #2c3f39; --inkt: #cfe3dd;
  }
}
:root[data-theme="dark"] {
  --papier: #0e1a18; --op: #15241f; --tekst: #e8ece9;
  --zacht: #9aa8a3; --lijn: #2c3f39; --inkt: #cfe3dd;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papier); color: var(--tekst);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 26px; }

/* ---------- universum ---------- */

.kosmos {
  background: var(--ruimte); color: #e6efec; position: relative;
  overflow: hidden; border-bottom: 1px solid #14302a;
}
/* De tekstlaag ligt boven het canvas. Zonder deze regels vangt die laag alle
   klikken op en reageert het universum nergens op. Alleen de tekst zelf blijft
   aanklikbaar; de rest laat de muis en de vinger door naar het canvas. */
.kosmos-inner { position: relative; z-index: 2; padding: 50px 0 38px; pointer-events: none; }
.kosmos-inner h1,
.kosmos-inner p,
.kosmos-inner a { pointer-events: auto; }
.veldhoogte { pointer-events: none; }
#sterrenveld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1; touch-action: pan-y;
}
.kruimel {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6e9c8e; margin: 0 0 18px;
}
.kruimel a { color: #6e9c8e; text-underline-offset: 3px; }
.kosmos h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(32px, 5.2vw, 56px); line-height: 1.04; margin: 0 0 20px;
  color: #fff; text-wrap: balance; max-width: 16ch;
}
.kosmos .lead {
  font-size: clamp(17px, 2vw, 19.5px); max-width: 52ch; margin: 0 0 28px; color: #b6cdc6;
}
.kosmos .hint {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #5d8579; margin: 0;
}
.veldhoogte { height: clamp(340px, 50vh, 520px); position: relative; }
.knooplabel {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  background: rgba(7,17,15,0.94); border: 1px solid #1e4238; border-radius: 3px;
  padding: 7px 10px; color: #dcebe6; max-width: 230px; line-height: 1.45;
  opacity: 0; transition: opacity .12s;
}
.knooplabel b {
  display: block; font-family: var(--display); font-size: 12.5px;
  margin-bottom: 2px; color: #fff;
}

/* ---------- secties ---------- */

section { padding: 52px 0; border-bottom: 1px solid var(--lijn); }
.sectiekop {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--zacht); margin: 0 0 26px;
}
h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.025em;
  font-size: clamp(22px, 3vw, 29px); line-height: 1.2; margin: 0 0 14px;
  color: var(--inkt); text-wrap: balance; max-width: 24ch;
}
p.groot { font-size: 18px; max-width: 60ch; margin: 0 0 15px; }
p.zacht { color: var(--zacht); max-width: 62ch; margin: 0 0 14px; }

.lijstbalk {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
#terug {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; background: none; color: var(--water);
  border: 1px solid var(--lijn); border-radius: 3px; padding: 9px 14px;
  cursor: pointer; min-height: 44px;
}
#terug:hover { border-color: var(--water); }
#terug:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }

.tools { display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.tool {
  display: grid; gap: 3px 24px; padding: 16px 0;
  border-bottom: 1px solid var(--lijn); align-items: baseline;
}
@media (min-width: 760px) { .tool { grid-template-columns: 200px minmax(0, 1fr) 96px; } }
.tool .n { font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--inkt); }
.tool .w { color: var(--zacht); font-size: 15.5px; }
.tool .s {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--zacht);
}

/* ---------- aanbod ---------- */

.aanbod { display: grid; gap: 2px; background: var(--lijn); border: 1px solid var(--lijn); }
@media (min-width: 860px) { .aanbod { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.optie { background: var(--op); padding: 28px 28px 30px; display: grid; gap: 11px; align-content: start; }
.optie .nr {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--zacht);
}
.optie h3 {
  font-family: var(--display); font-weight: 600; font-size: 20px;
  margin: 0; color: var(--inkt); letter-spacing: -0.02em;
}
.optie p { margin: 0; color: var(--zacht); font-size: 16.5px; }
.optie .kern {
  color: var(--tekst); font-size: 16.5px; border-top: 1px solid var(--lijn);
  padding-top: 13px; margin-top: 3px;
}

/* ---------- gegevens ---------- */

.gegevens { display: grid; gap: 24px; }
@media (min-width: 720px) { .gegevens { grid-template-columns: repeat(2, 1fr); } }
.veld dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--zacht); margin-bottom: 3px;
}
.veld dd { margin: 0 0 14px; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.veld dd a { color: var(--water); text-underline-offset: 3px; }
.invullen {
  border: 1px dashed var(--elek); background: color-mix(in srgb, var(--elek) 7%, transparent);
  padding: 15px 17px; border-radius: 3px; display: grid; gap: 5px; margin-top: 10px;
}
.invullen b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--elek);
}
.invullen p { margin: 0; font-size: 15px; color: var(--zacht); }

footer {
  padding: 24px 0 46px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--zacht);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* ---------- navigatie ---------- */
/* De productpagina's waren niet bereikbaar: geen enkele pagina linkte ernaar.
   Deze balk ligt boven het canvas, dus hij moet zijn muisgebeurtenissen
   terugvragen - .kosmos-inner zet ze op none zodat het universum bereikbaar is. */
.hoofdnav {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 26px;
  pointer-events: auto;
}
.hoofdnav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: #8fb5a8;
  padding: 9px 12px; border-radius: 3px; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: color .16s ease, background-color .16s ease;
}
.hoofdnav a:hover { color: #fff; background: rgba(233,180,76,0.12); }
.hoofdnav a[aria-current="page"] { color: var(--ruimte); background: #e9b44c; }
.hoofdnav a:focus-visible { outline: 2px solid #e9b44c; outline-offset: 2px; }

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  font-family: var(--mono); font-size: 12px; background: #e9b44c;
  color: var(--ruimte); padding: 12px 16px; border-radius: 0 0 3px 0;
}
.overslaan:focus { left: 0; }

/* ---------- toestanden ---------- */
/* De site reageerde nergens op de cursor: een enkele :hover in het hele
   stijlblad. Alles wat aanklikbaar is hoort dat te laten merken. */
a.tool {
  text-decoration: none; color: inherit;
  transition: background-color .16s ease, padding-left .16s ease;
}
a.tool:hover { background: color-mix(in srgb, var(--tele) 7%, transparent); padding-left: 10px; }
a.tool:focus-visible { outline: 2px solid var(--water); outline-offset: -2px; }
a.tool .n { transition: color .16s ease; }
a.tool:hover .n { color: var(--tele); }
.tool .pijl {
  font-family: var(--mono); font-size: 11px; color: var(--zacht);
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
}
a.tool:hover .pijl { opacity: 1; transform: translateX(3px); }

.optie, .blok, .pijler { transition: border-color .18s ease, transform .18s ease; }
.optie:hover, .blok:hover { border-color: var(--water); }

/* ---------- binnenkomst van secties ---------- */
/* Alleen actief als JavaScript draait: zonder script blijft alles gewoon staan,
   en wie beweging uitzet krijgt niets te zien bewegen. */
@media (prefers-reduced-motion: no-preference) {
  .js .onthul {
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .js .onthul.zichtbaar { opacity: 1; transform: none; }
}