/* Wandkaartje — "Kompas"-thema: nachtblauw op krijtwit met een geel accent.
   Speels en licht (referentie: TheGoodPR): zachte schaduwen, golvende overgangen,
   pill-vormen. Typografie: Space Grotesk (vet) voor koppen, Inter voor de rest;
   IBM Plex Mono alleen nog voor waarden (afmetingen, prijzen). */

/* ═══════════════════════════════════════════════════════════════════════
   🎨  KLEUREN — PAS HIER AAN (dit is de enige plek die je hoeft te wijzigen)
   ───────────────────────────────────────────────────────────────────────
   Alle kleuren van de site komen uit de variabelen hieronder. Wil je een
   ander thema? Verander alleen deze waarden; de rest van het bestand gebruikt
   ze via var(--naam). Namen paper/ink zijn historisch: paper = achtergrond,
   ink = tekst.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* — Achtergronden (licht → iets dieper) — */
  --paper:          #FAFAF8;   /* paginakleur: warm krijtwit (canvas)       */
  --paper-dark:     #EEF4F2;   /* iets dieper, mint-getint: tool-sectie     */
  --paper-soft:     #FFFFFF;   /* witte vlakken: kaarten, invoervelden      */
  --cream:          #FFFFFF;   /* voorbeelden-sectie                        */
  --hero-bg:        #0E2B30;   /* donkere navy/teal band: header + hero     */
  --on-hero:        rgba(255,255,255,0.86); /* lichte tekst op de navy band  */

  /* — Tekst — */
  --ink:            #0F2B2E;   /* hoofdtekst: diep teal-zwart, top leesbaar */
  --ink-soft:       #4E6B69;   /* zachtere tekst: bijschriften, hulp (5,7:1)*/

  /* — Accenten (teal-familie) —
     LET OP contrast: heldere teal #0E9B92 is ~3,4:1 op wit → alleen voor
     GROTE/decoratieve vlakken (sliders, iconen, randen, grote cijfers).
     Voor tekstdragende knoppen én links gebruiken we --accent-strong
     (diepe teal, wit-op-teal ≈ 5,6:1 en teal-op-wit ≈ 5,6:1 → ruim AA). */
  --accent:         #0E9B92;   /* heldere teal: decoratieve accenten        */
  --accent-strong:  #0A7570;   /* diepe teal: knoptekst, links, actieve tab */
  --accent-ink:     #FFFFFF;   /* witte tekst BOVENOP een teal-knop         */
  --accent-glow:    rgba(14, 155, 146, 0.35); /* schaduw onder teal-knoppen */
  --accent-soft:    #E0F2EF;   /* zachte mint: actieve chips, hover, badges */
  --secondary:      var(--accent-strong); /* links/labels = diepe teal      */
  --eyebrow-bg:     #FCEBCB;   /* pill-achtergrond boven de hero-kop (amber)*/

  /* — Highlight (amber) — de warme ACTIE/accent-kleur naast teal.
     Gebruikt voor primaire knoppen, stap-cijfers, eyebrow-pill en logo-accent.
     Altijd met DONKERE tekst (--highlight-ink); amber als tekst = onleesbaar. */
  --highlight:      #F6A21E;   /* amber: knoppen + speelse accenten         */
  --highlight-ink:  #0F2B2E;   /* donkere tekst bovenop amber (7,2:1)       */
  --highlight-glow: rgba(246, 162, 30, 0.38);
  --highlight-soft: #FCEBCB;   /* zachte amber-tint: eyebrow-pill, badges   */

  /* — Lijnen, tekst-op-donker & schaduw — */
  --on-ink:         #FFFFFF;   /* tekst/iconen bovenop een donker vlak      */
  --line:           #E4E2DA;   /* subtiele scheidingslijnen (warm grijs)    */
  --line-hard:      rgba(15, 43, 46, 0.30);  /* duidelijke randen           */
  --shadow:         0 10px 30px rgba(15, 43, 46, 0.10);

  /* — Statuskleuren (meldingen) — */
  --warn-bg:        rgba(200, 58, 42, 0.09);
  --warn-line:      rgba(200, 58, 42, 0.35);
  --warn-ink:       #A0301F;
  --ok-bg:          rgba(14, 122, 112, 0.10);
  --ok-line:        rgba(14, 122, 112, 0.35);
  --ok-ink:         #0A6B62;

  /* --rust/--contour/--brass: oude namen, blijven werken (aliassen).
     --rust = decoratief accent, --contour = tekst-accent (diepe teal). */
  --rust:           var(--accent);
  --contour:        var(--accent-strong);
  --brass:          var(--accent-strong);

  /* — Typografie — */
  --font:       "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Space Grotesk", "Inter", sans-serif;  /* koppen (naam historisch) */
  --font-mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* — Vorm — */
  --radius: 12px;      /* zachte hoeken: invoervelden, meldingen */
  --radius-lg: 20px;   /* grote vlakken: workspace, kaarten, viewers */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--font-serif); margin: 0; letter-spacing: -0.01em; font-weight: 700; }
a { color: inherit; }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px; border-bottom: 1px solid rgba(255,255,255,0.10);
  background: var(--hero-bg); color: #FFFFFF;
}
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: #FFFFFF; }
.logo .byline { font-weight: 400; font-size: 12px; color: var(--on-hero); margin-left: 2px; }
.frame-mark { width: 20px; height: 20px; border: 2px solid #FFFFFF; position: relative; flex: 0 0 auto; }
.frame-mark::before, .frame-mark::after { content: ""; position: absolute; background: var(--highlight); }
.frame-mark::before { width: 5px; height: 2px; top: -2px; left: 2px; }
.frame-mark::after { width: 2px; height: 5px; left: -2px; top: 2px; }
.site-header nav { display: flex; align-items: center; }
.site-header nav a { margin-left: 26px; font-size: 14px; text-decoration: none; color: var(--on-hero); }
.site-header nav a:hover { color: #FFFFFF; }
/* Nav-knop: laatste item is een echte call-to-action (gele pill). */
.site-header nav a.nav-cta {
  color: var(--accent-ink); background: var(--accent-strong);
  padding: 9px 16px; border-radius: 999px; font-weight: 600;
  box-shadow: 0 4px 12px var(--accent-glow);
}
.site-header nav a.nav-cta:hover { color: var(--accent-ink); opacity: 0.94; }

/* ---------- hero ---------- */
.hero {
  position: relative; padding: 84px 40px 78px; overflow: hidden;
  background: linear-gradient(158deg, #13383F 0%, var(--hero-bg) 55%, #0A2226 100%);
  color: #FFFFFF;
}
/* Tekst op de donkere hero: licht i.p.v. de donkere paginakleuren. */
.hero h1 { color: #FFFFFF; }
.hero .lede, .hero .hero-note, .hero .refs-lead { color: var(--on-hero); }
.hero .hero-note strong { color: #FFFFFF; }
.hero .btn-ghost {
  background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.55);
}
.hero .btn-ghost:hover { background: rgba(255,255,255,0.10); }
.contour-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { position: relative; max-width: 720px; }
/* Referentieprojecten samengevoegd in de hero. */
.hero-refs { position: relative; margin-top: 48px; }
.hero-refs .refs-lead { max-width: 560px; margin: 0 0 20px; font-size: 14px; color: var(--ink-soft); }
.eyebrow {
  font: 600 13px/1 var(--font); letter-spacing: 0.02em;
  color: var(--ink); background: var(--eyebrow-bg);
  padding: 9px 18px; border-radius: 999px; display: inline-block; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.02; }
.hero .lede { max-width: 520px; margin: 20px 0 30px; font-size: 17px; color: var(--ink-soft); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin: 18px 0 0; font-size: 13px; color: var(--ink-soft); }
.hero-note strong { color: var(--ink); }

/* ---------- zo werkt het ---------- */
.how { padding: 40px 40px 8px; background: var(--paper); }
.how h2 { font-size: 26px; }
.how .sub { color: var(--ink-soft); font-size: 14px; margin: 6px 0 30px; }
.how-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px;
}
.how-steps li {
  background: var(--paper-soft); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 22px 22px; box-shadow: var(--shadow);
}
.how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-strong); color: var(--accent-ink);
  font: 700 17px/1 var(--font-serif); margin-bottom: 14px;
}
/* Beeld bij elke stap. width/height staan in de HTML zodat de pagina niet verspringt
   terwijl de afbeelding nog laadt; aspect-ratio houdt dat kloppend bij elke kolombreedte. */
.how-img {
  display: block; width: 100%; height: auto; aspect-ratio: 760 / 460;
  object-fit: cover; border-radius: 10px; border: 1px solid var(--line);
  margin: -6px 0 16px; background: var(--paper-dark);
}
.how-steps h3 { font-size: 17px; margin: 0 0 8px; font-weight: 600; }
.how-steps p { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ---------- knoppen: pill-vormig, met subtiele lift ---------- */
.btn {
  font: 600 14px/1 var(--font); letter-spacing: 0.01em;
  padding: 15px 26px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--on-ink); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 16px rgba(20, 33, 61, 0.22);
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn:hover { opacity: 0.94; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 33, 61, 0.26); }
.btn:active { transform: translateY(0); }
/* Primaire knop = TEAL (structuur/hoofdactie), wit-op-teal ≈ 5,5:1. */
.btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink);
  box-shadow: 0 6px 16px var(--accent-glow); }
.btn-primary:hover { box-shadow: 0 10px 22px var(--accent-glow); }
/* Bestelknop = AMBER accent (de één plek waar amber echt knalt), donkere tekst 7,2:1. */
.btn-order { background: var(--highlight); border-color: var(--highlight); color: var(--highlight-ink);
  box-shadow: 0 6px 16px var(--highlight-glow); }
.btn-order:hover { box-shadow: 0 10px 22px var(--highlight-glow); }
.btn-ghost { background: rgba(255, 255, 255, 0.7); color: var(--ink); border-color: var(--line-hard); box-shadow: none; }
.btn-wide { width: 100%; }
/* Disabled: niet doorschijnend maken (dat wast de tekst weg) maar een rustige,
   leesbare 'uit'-staat — genoeg contrast tussen tekst en knop. */
.btn:disabled { background: var(--paper-dark); color: var(--ink-soft); border-color: var(--line-hard);
  cursor: not-allowed; transform: none; box-shadow: none; opacity: 1; }
.btn.active { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }

/* ---------- voorbeelden ---------- */
.examples { padding: 26px 40px 76px; background: var(--cream); }
.examples h2, .tool h2 { font-size: 26px; }
.examples .sub, .tool .sub { color: var(--ink-soft); font-size: 14px; margin: 6px 0 30px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.card {
  background: var(--paper-soft); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(20, 58, 82, 0.14); }
.card-viewer {
  width: 100%; height: 230px; background: var(--paper-dark); display: block;
  border-bottom: 1px solid var(--line);
}
/* De poster is nu een FOTO van de echte print: eerst zien wat je krijgt, de interactieve
   3D zit op één klik. Het raster eronder blijft staan als de foto (nog) ontbreekt. */
.card-viewer .poster {
  position: relative;
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, var(--line) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, var(--line) 22px 23px),
    var(--paper-dark);
}
.card-viewer .poster img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.card-viewer .poster span {
  position: relative;            /* boven de foto */
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  border: 1px solid var(--ink); padding: 10px 16px;
  background: rgba(250, 250, 248, 0.92);
  border-radius: 4px;
}
.card:hover .card-viewer .poster img { transform: scale(1.03); }
.card-viewer .poster img { transition: transform .35s ease; }
.card .meta { padding: 16px 18px 20px; }
.card .cat {
  font: 600 11.5px/1.2 var(--font); color: var(--accent-strong);
  text-transform: uppercase; letter-spacing: 0.08em;
}
/* Expliciete tekstkleur: de kaarten liggen in de donkere hero-band en zouden anders de
   witte tekstkleur daarvan erven — op hun witte vlak wordt de titel dan onzichtbaar. */
.card h3 { font-size: 18px; margin: 6px 0 8px; font-weight: 500; color: var(--ink); }
.card p { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.card .price { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }

/* ---------- tool / workspace ---------- */
.tool { padding: 34px 40px 90px; background: var(--paper-dark); }
.divider { display: block; width: 100%; height: 64px; margin-bottom: -1px; }
.divider svg { display: block; width: 100%; height: 100%; }
.workspace {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  border: 1px solid var(--line); background: var(--paper-soft);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow);
}
@media (max-width: 900px) { .workspace { grid-template-columns: 1fr; } }
.pane { position: relative; padding: 22px; }
.pane-map { border-right: 1px solid var(--line); }
@media (max-width: 900px) { .pane-map { border-right: none; border-bottom: 1px solid var(--line); } }
.pane-label {
  font: 600 12px/1.2 var(--font); text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--contour); margin-bottom: 16px; display: block;
}
.pane-sublabel {
  font: 600 13px/1.2 var(--font); text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink); margin: 0 0 12px;
}

/* ---------- zoeken ---------- */
.search { position: relative; margin-bottom: 12px; }
.search input {
  width: 100%; padding: 12px 14px; font: 400 14px/1.3 var(--font);
  border: 1px solid var(--line-hard); border-radius: var(--radius);
  background: var(--paper-soft); color: var(--ink);
}
.search input:focus { outline: 2px solid var(--rust); outline-offset: 0; border-color: transparent; }
.suggestions {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 0; list-style: none;
  background: var(--paper-soft); border: 1px solid var(--line-hard);
  border-radius: var(--radius); overflow: hidden;
  display: none; max-height: 240px; overflow-y: auto;
}
.suggestions.open { display: block; }
.suggestions li { padding: 10px 14px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--line); }
.suggestions li:last-child { border-bottom: none; }
.suggestions li:hover { background: var(--paper-dark); }
/* Naamsvermelding onder de suggesties als er een plek uit OpenStreetMap tussen zit. */
.suggestions li.suggestie-bron { font-size: 11.5px; color: var(--ink-soft); cursor: default; padding: 6px 14px; }
.suggestions li.suggestie-bron:hover { background: transparent; }
.suggestions li.suggestie-bron a { color: inherit; }

/* ---------- velden ---------- */
.field { margin-bottom: 16px; }
.field label {
  display: block; font: 600 13px/1.3 var(--font);
  color: var(--ink); margin-bottom: 7px;
}
.field select,
.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%; padding: 11px 12px; font: 400 14px/1.3 var(--font);
  border: 1px solid var(--line-hard); border-radius: var(--radius);
  background: var(--paper-soft); color: var(--ink);
}
.field textarea { resize: vertical; }
/* Schuifbalk (gebiedsgrootte) in Kompas-kleuren: lichte baan, geel-met-navy duim. */
.field input[type="range"] {
  width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  background: var(--paper-dark); border-radius: 999px; margin: 12px 0 4px; cursor: pointer;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rust); border: 2px solid var(--ink); cursor: pointer;
}
.field input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--rust);
  border: 2px solid var(--ink); cursor: pointer;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--rust); outline-offset: 0; border-color: transparent;
}
.label-soft { text-transform: none; letter-spacing: 0; color: var(--ink-soft); }

/* Gebouwkleur-swatches (live in de preview) */
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--sw); border: 2px solid var(--line-hard);
  transition: transform .12s ease, box-shadow .12s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,33,61,0.15); }
.price-row { margin-bottom: 14px; font-weight: 500; }
.price-row .mono { font-size: 15px; }
#payment-banner { max-width: 640px; margin: -14px 0 24px; }
.field-row .field input { width: 100%; }
.field-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.field-row .field { flex: 1; margin-bottom: 0; }
.field-row .btn { flex: 0 0 auto; }
/* Gebiedskeuzes: vaste maten in plaats van een schuifbalk (22 augustus 2026). Elke knop
   zegt wat je krijgt; de meters staan er als bijschrift bij. */
/* Naast elkaar in plaats van onder elkaar (23 augustus 2026): drie brede balken duwden de
   kaart onder de vouw, terwijl juist de kaart het ding is waar je naar kijkt. Drie kolommen
   kost een derde van de hoogte en zet de keuzes bovendien naast elkaar, wat vergelijken is
   wat je hier doet. Onder 560 px (telefoon) valt het terug op één kolom. */
.area-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.area-preset {
  display: grid; align-content: start; gap: 1px;
  text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; font: 400 13px/1.3 var(--font); color: var(--ink);
}
.area-preset:hover:not(:disabled) { border-color: var(--line-hard); }
.area-preset-naam { font-weight: 600; }
.area-preset-maat { color: var(--ink-soft); font-size: 11.5px; }
.area-preset-uitleg { color: var(--ink-soft); font-size: 11.5px; }
@media (max-width: 560px) {
  .area-presets { grid-template-columns: 1fr; }
}
.area-preset.active { border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
/* Bijgesteld met + of −: wel herkenbaar 'in de buurt van', niet de gekozen maat. */
.area-preset.nabij { border-color: var(--accent-strong); }
.area-preset:disabled { opacity: .5; cursor: not-allowed; }
/* Maatwerk: een uitweg onderaan de stap, geen vierde keuzeknop. Eén regel, in de toon van
   de andere hulpregels -- alleen de link zelf krijgt kleur. */
.area-custom-regel { margin-top: 2px; }
/* De regel bestaat alleen uit die ene link; is er geen contactadres, dan hoort er ook geen
   lege alinea te staan. */
.area-custom-regel:has(a.hidden) { display: none; }
.area-custom-regel a { color: var(--accent-strong); }
.area-fine {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px;
}
.area-zoom {
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-hard); background: var(--paper);
  font: 500 17px/1 var(--font); color: var(--ink);
}
.area-zoom:hover { background: var(--paper-soft); }
.help { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 10px 0 0; }
.help a { color: var(--accent-strong); }

/* ---------- kaart ---------- */
.map-wrap {
  position: relative; height: 440px; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
#map { position: absolute; inset: 0; background: var(--paper-soft); }
.map-style-toggle {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; background: var(--paper); border: 1px solid var(--line-hard);
  overflow: hidden; border-radius: 999px;
}
.map-style-toggle button {
  border: 0; background: transparent; padding: 8px 14px; cursor: pointer;
  font: 500 12.5px/1 var(--font); color: var(--ink-soft);
}
.map-style-toggle button.active { background: var(--accent-strong); color: var(--on-ink); }
.draw-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5;
  background: var(--ink); color: var(--paper); font: 500 12.5px/1 var(--font);
  padding: 10px 18px; white-space: nowrap; border-radius: 999px;
}

/* ---------- selectie-info ---------- */
#selection-info { margin-top: 14px; }
.meta-row {
  display: flex; justify-content: space-between; font-size: 13.5px;
  padding: 8px 2px; border-bottom: 1px solid var(--line);
}
.meta-row span:first-child { color: var(--ink-soft); }

.notice { border-radius: var(--radius); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-top: 10px; }
.notice.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.notice.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink); word-break: break-all; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 13px/1 var(--font); padding: 10px 16px;
  border: 1px solid var(--line-hard); background: transparent; cursor: pointer; color: var(--ink);
  border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.chip:hover { background: var(--accent-soft); }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.chip.active::before { content: "✓ "; font-size: 11px; }
.chip:disabled { opacity: .45; cursor: not-allowed; }
.chip:disabled:hover { background: transparent; }
/* Kan nu niet, maar blijft klikbaar: een klik legt uit waarom (11 september 2026). Met
   `disabled` kreeg je alleen een verbodsteken bij de muis en verder niets. */
.chip.onbeschikbaar { opacity: .45; }
.chip.onbeschikbaar:hover { background: transparent; }
.help.nadruk { color: var(--warn-ink, #8A4B12); font-weight: 600; animation: nadruk-knipper .9s ease 1; }
@keyframes nadruk-knipper { 0%, 100% { opacity: 1; } 35% { opacity: .35; } }
/* De echte filamentkleuren op de knop: "4 kleuren" zei niet welke vier. */
.chip-stippen { display: inline-flex; gap: 3px; margin-right: 7px; vertical-align: -1px; }
.chip-stippen .stip {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--stip, #FFFFFF); border: 1px solid rgba(0, 0, 0, 0.18);
}

/* ---------- voortgang ---------- */
.progress-head { display: flex; justify-content: space-between; align-items: baseline; }
.progress-head .count { font-size: 12px; color: var(--ink-soft); }
.bar { height: 6px; background: var(--paper-soft); border-radius: 999px; margin: 12px 0 12px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--rust); border-radius: 999px; transition: width .5s ease; }
.live-row { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.live-msg { font-size: 13.5px; margin: 0; min-height: 20px; }
.spinner {
  width: 15px; height: 15px; border: 2px solid var(--line);
  border-top-color: var(--rust); border-radius: 50%;
  animation: spin .8s linear infinite; flex: 0 0 auto;
}
.spinner-accent { border-color: var(--paper-dark); border-top-color: var(--rust); }
@keyframes spin { to { transform: rotate(360deg); } }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: flex; align-items: center; gap: 11px; padding: 7px 0;
  font-size: 13.5px; color: var(--ink-soft);
}
.steps li .tick {
  width: 21px; height: 21px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--line-hard); color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 10.5px/1 var(--font-mono); background: var(--paper-soft);
}
.steps li.active { color: var(--ink); font-weight: 500; }
.steps li.active .tick { border-color: var(--rust); color: var(--rust); }
.steps li.done { color: var(--ink); }
.steps li.done .tick { background: var(--contour); border-color: var(--contour); color: var(--paper); }

/* ---------- resultaat ---------- */
#viewer {
  width: 100%; height: 340px; background: var(--paper-soft);
  border: 1px solid var(--line); display: block; border-radius: var(--radius);
}
.result-meta { font-size: 13px; color: var(--ink-soft); margin: 12px 0; }
#view-result .btn { margin-top: 12px; }

/* ---------- footer ---------- */
.site-footer {
  padding: 30px 40px; font-size: 12px; color: var(--ink-soft);
  text-align: center; background: var(--paper-dark); line-height: 1.6;
}
.site-footer a { color: var(--contour); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-links { display: flex; gap: 22px; justify-content: center; margin: 0 0 14px; font-weight: 500; }

/* ---------- eenvoudige tekstpagina's (privacy / voorwaarden / bronnen) ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 48px 24px 90px; }
.doc h1 { font-size: 30px; margin-bottom: 8px; }
.doc h2 { font-size: 19px; margin: 34px 0 10px; }
.doc p, .doc li { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.doc ul { padding-left: 20px; }
.doc a { color: var(--contour); }
.doc .updated { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.doc .placeholder {
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 3px 7px; color: #6B5200; font-weight: 500;
}
.doc .back { display: inline-block; margin-top: 30px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spinner { animation-duration: 1.6s; }
}
@media (max-width: 700px) {
  .site-header, .hero, .examples, .tool { padding-left: 20px; padding-right: 20px; }
  .map-wrap { height: 340px; }
}

/* ============ VOORBEELDENPAGINA ============
   Sinds 17 augustus 2026 staan de voorbeelden op een eigen pagina in plaats van in de hero.
   Reden: de hero werd er te hoog van, waardoor het stappenplan onder de vouw verdween. */
.uitgelicht {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: center;
  margin: 0 0 44px; padding: 22px; border-radius: 16px;
  background: var(--paper-2, #F2EFE7); border: 1px solid rgba(20, 58, 82, 0.10);
}
.uitgelicht-3d .card-viewer { height: 380px; border-radius: 12px; }
.uitgelicht-tekst h3 { font-size: 24px; margin: 8px 0 10px; font-weight: 600; color: var(--ink); }
.uitgelicht-tekst p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; margin: 0 0 14px; }
.uitgelicht-detail { font-family: var(--font-mono); font-size: 13px; }
.rij-kop { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 16px; }
.slot-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 36px 0 8px; }
/* Op een smal scherm onder elkaar: de 3D-viewer heeft anders geen bruikbare breedte meer. */
@media (max-width: 780px) {
  .uitgelicht { grid-template-columns: 1fr; }
  .uitgelicht-3d .card-viewer { height: 260px; }
}

/* Prijs direct onder de formaatkeuze. Bewust rustig: het is informatie om mee af te wegen,
   geen aanbieding. Zelfde monospace als de andere getallen op de site. */
.maat-prijs {
  font-family: var(--font-mono); font-size: 14px; color: var(--ink);
  margin: 8px 0 0; font-weight: 500;
}
/* Prijs onder de kleurenschakelaar: hier zie je wat een kleur uitzetten oplevert, op het
   moment dat je hem uitzet. */
.kleur-prijs {
  font-family: var(--font-mono); font-size: 13.5px; color: var(--ink);
  margin: 10px 0 0; font-weight: 500;
}


/* --- Kleuren zelf samenstellen -------------------------------------------------
   De drie stijlen blijven het hoofdpad: één klik en je bent klaar. Wie meer wil, klapt
   dit uit en zet de vier onderdelen los aan of uit. Bewust een <details>, zodat open en
   dicht zonder JavaScript werkt en de toetsenbordbediening vanzelf klopt.

   Elke kleur die aanstaat kost printtijd (zie HANDOFF §4e), dus 'uit' mag geen tweederangs
   optie lijken: een uitgezette knop toont de witte filamentkleur, niet een grijs vlak. */
.kleurdelen {
  margin-top: 10px;
}
.kleurdelen > summary {
  cursor: pointer;
  font: 500 13px/1.4 var(--font);
  color: var(--ink-soft);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  user-select: none;
}
.kleurdelen > summary::-webkit-details-marker { display: none; }
.kleurdelen > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.kleurdelen[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.kleurdelen > summary:hover { color: var(--ink); }

.kleurdeel-rij {
  display: grid;
  /* Precies vier knoppen, dus vast 2 x 2: met auto-fit vallen ze bij deze
     paneelbreedte in 3 + 1 en staat er eentje verweesd op een eigen regel. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.kleurdeel {
  /* Twee regels: naam en, eronder, waar het over gaat plus welke kleur het wordt. De stip
     staat links en overspant beide regels. Was een enkele flex-regel met de uitleg in een
     `title`-tooltip -- onvindbaar met de muis en onbestaand op een telefoon. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 2px 9px;
  padding: 9px 12px;
  border: 1px solid var(--line-hard);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--font);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kleurdeel:hover { border-color: var(--accent); }
.kleurdeel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Zelfde uitgeschakelde staat als bij een chip: 'Jouw pand' kan niets zonder ankerpunt. */
.kleurdeel:disabled { opacity: .45; cursor: not-allowed; }
.kleurdeel:disabled:hover { border-color: var(--line, rgba(0,0,0,.14)); }
.kleurdeel.onbeschikbaar { opacity: .45; }
.kleurdeel.onbeschikbaar:hover { border-color: var(--line, rgba(0,0,0,.14)); }
/* De stip toont de échte filamentkleur die dit onderdeel krijgt. Aan = die kleur,
   uit = ivoorwit, want dát is wat er dan geprint wordt. */
.kleurdeel-naam { grid-column: 2; font-weight: 500; }
.kleurdeel-uitleg {
  grid-column: 2; font-size: 11.5px; line-height: 1.3; color: var(--ink-soft);
}
.kleurdeel .stip {
  grid-row: 1 / span 2; margin-top: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--stip, #FFFFFF);
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex: none;
  transition: background 0.15s ease;
}
.kleurdeel[aria-pressed="false"] .stip { background: #FFFFFF; }
.kleurdeel[aria-pressed="false"] { color: var(--ink-soft); }
.kleurdeel[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft, transparent);
}

/* ============ HEADER: HOME OVERAL ============
   31 augustus 2026. Het logo was op de homepage een <div> en op de documentpagina's ook --
   alleen op voorbeelden.html zat er een link omheen. Er was dus geen enkele plek waar je
   met zekerheid op "Wandkaartje" kon klikken om thuis te komen, en op privacy/voorwaarden/
   bronnen stond alleen "Terug naar de site" weggestopt achteraan. Nu is de kop op ALLE
   pagina's hetzelfde blok: logo = link naar home, en Home staat als eerste in de nav. */
a.logo { text-decoration: none; }
a.logo:hover .logo-naam { text-decoration: underline; }
/* Vijf items passen niet meer op één telefoonregel. Laten omvallen in plaats van
   afkappen: een nav die je halverwege kwijtraakt is erger dan een nav van twee regels. */
.site-header { flex-wrap: wrap; gap: 10px 0; }
.site-header nav { flex-wrap: wrap; gap: 0 0; }
.site-header nav a.actief { color: #FFFFFF; font-weight: 600; }
@media (max-width: 700px) {
  .site-header { padding-top: 14px; padding-bottom: 14px; }
  .site-header nav a { margin-left: 0; margin-right: 18px; font-size: 13.5px; }
  .site-header nav a.nav-cta { margin-right: 0; padding: 8px 14px; }
  .logo .byline { display: none; }
}

/* ============ VOORBEELDEN OP DE HOMEPAGE ============
   "Overal voorbeelden": wie op de homepage blijft hangen zag tot nu toe alleen drie
   stapfoto's. Nu staat er een echte proefrij met draaibare modellen, en in de maker zelf
   een strookje voor wie nog niets gekozen heeft. */
.home-voorbeelden { padding: 34px 40px 10px; background: var(--paper); }
.home-voorbeelden h2 { font-size: 26px; }
.home-voorbeelden .sub { color: var(--ink-soft); font-size: 14px; margin: 6px 0 26px; max-width: 620px; }
.home-voorbeelden .slot-cta { margin: 26px 0 4px; }
@media (max-width: 700px) { .home-voorbeelden { padding-left: 20px; padding-right: 20px; } }

/* ── Eigen tekst op de achterkant + de live voorbeeldweergave ─────────────────── */
/* De achterkant wordt door de server als SVG getekend en hier als plaatje getoond.
   Vierkant, want de plaat is vierkant; de rand geeft hem de rust van een product-
   afbeelding in plaats van een technische tekening. */
.optioneel {
  font-weight: 400;
  font-size: 0.82em;
  color: var(--muted, #6B6355);
}

.eigen-tekst-invoer {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line, #d8d2c4);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}