/* Wandkaartje — huisstijl sinds 16 september 2026.

   TELEFOON-EERST. De basisregels hieronder zijn de telefoon; desktop komt er bij via
   @media (min-width: 900px). De meeste klanten maken en bestellen op hun telefoon, dus dat
   is de versie die goed moet zijn, niet de versie die "ook moet werken".

   Opbouw van het bestand:
     1. Tokens              — kleuren, letters, maten. Alleen hier aanpassen.
     2. Basis                — tekst, knoppen, meldingen, hulpklassen
     3. Kop en voet          — gedeeld door alle publieke pagina's
     4. Homepage
     5. De maker             — plek, bouwen, model, bestellen, klaar
     6. Kleine pagina's      — voorwaarden, privacy, bronnen, bekijk, voorbeelden

   admin.html gebruikt dit bestand NIET; die houdt styles.css. */

/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════════ */
html, body { overscroll-behavior-y: contain; }

:root {
  --paper:       #F7F6F2;   /* pagina: warm, net geen wit                     */
  --white:       #FFFFFF;   /* vlakken die boven de pagina liggen             */
  --ink:         #10262A;   /* tekst                                          */
  --soft:        #56696A;   /* bijschriften (5,6:1 op --paper)                */
  --faint:       #7F8E8E;   /* plaatshoudertekst, tellers                     */
  --line:        #E3E1DA;
  --navy:        #0E2B30;   /* donkere banden, de wachtruimte                 */
  --teal:        #0A7570;   /* links, gekozen, kleine accenten (5,6:1)        */
  --teal-soft:   #E3F0EE;
  --amber:       #F6A21E;   /* ALLEEN de knop waar je heen moet               */
  --amber-hover: #E8920C;
  --amber-soft:  #FCEBCB;
  --warn:        #A0301F;
  --warn-soft:   #F7E6E1;

  /* 'Euroteken' staat vooraan en dekt alleen U+20AC (zie vendor/fonts.css): het euroteken
     komt daardoor uit Inter Tight, de rest gewoon uit Fraunces. */
  --f-display: "Euroteken", "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Inter Tight", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --gutter: 16px;
  --kop: 60px;              /* hoogte van de makerkop; het model plakt eronder */
  /* Hoogte van de tijdelijke "nog in de bouw"-balk. Die balk wordt door
     js/onder-constructie.js ingevoegd en zet deze waarde zelf; staat hij er niet (of is
     hij weggeklikt), dan blijft het 0 en verandert er niets. Zonder dit stak de studio
     op een breed scherm precies de balkhoogte buiten het venster -- gemeten 41 px, en
     daardoor viel het onderschrift onder het model weg. */
  --banner: 0px;
  --radius: 12px;
}
@media (min-width: 900px) { :root { --gutter: clamp(24px, 4vw, 48px); } }

/* ═══ 2. BASIS ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--f-display); font-weight: 600; margin: 0;
  letter-spacing: -0.02em; text-wrap: balance; line-height: 1.05;
}
p { margin: 0; }
a { color: var(--teal); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 99px; padding: 14px 24px; min-height: 48px;
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-go { background: var(--amber); color: var(--ink); }
.btn-go:hover:not(:disabled) { background: var(--amber-hover); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.btn-line:hover { border-color: var(--ink); }
.btn-wide { width: 100%; }
.linkbtn {
  background: none; border: 0; padding: 0; color: var(--teal); font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px;
}
/* Een linkbtn die op zijn eigen regel staat is een KNOP en geen woord in een zin; die
   verdient een raakvlak van 40 px. Waar hij middenin een zin staat (de samenvatting, het
   gevonden adres) blijft hij gewoon meelopen met de tekst. */
.area-fijn .linkbtn { display: inline-flex; align-items: center; min-height: 40px; }

.help { font-size: 14px; color: var(--soft); line-height: 1.45; }
.help.nadruk { animation: nadruk .6s ease; color: var(--ink); }
@keyframes nadruk { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.notice { font-size: 14px; line-height: 1.45; padding: 12px 14px; border-radius: var(--radius); }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.ok { background: var(--teal-soft); color: var(--teal); }
.lbl {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--soft); margin-bottom: 10px;
}
.optioneel { text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 400; }
.kicker {
  display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}

/* ═══ 3. KOP EN VOET ══════════════════════════════════════════════════════ */
.site-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1320px; margin: 0 auto; padding: 14px var(--gutter);
}
.merk {
  display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none;
  font-family: var(--f-display); font-weight: 700; font-size: 21px; letter-spacing: -.02em;
}
.merk i {
  width: 16px; height: 16px; border: 2.5px solid currentColor; border-radius: 3px;
  position: relative; display: block; flex: none;
}
.merk i::after { content: ""; position: absolute; inset: 3px; background: var(--amber); border-radius: 1px; }
.site-nav nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.site-nav nav a:not(.btn) { color: var(--soft); text-decoration: none; display: none; }
.site-nav nav a:not(.btn):hover, .site-nav nav a[aria-current="page"] { color: var(--ink); }
.site-nav .btn { padding: 10px 18px; min-height: 40px; font-size: 14px; }
@media (min-width: 760px) { .site-nav nav a:not(.btn) { display: inline; } }
/* "Voorbeelden" staat ook op de telefoon in het menu (21 september 2026: "op de telefoon zie ik
   het kopje meer voorbeelden niet"), kort gezegd zodat het naast de knop past op 375 px. */
.site-nav nav a.altijd { display: inline; }
.site-nav nav a.altijd .lang { display: none; }
@media (min-width: 760px) { .site-nav nav a.altijd .lang { display: inline; } .site-nav nav a.altijd .kort { display: none; } }
/* Zelfde truc voor de actieknop: "Maak jouw Wandkaartje" past niet op een telefoon naast het
   merk en "Voorbeelden" (23 september 2026). */
.site-nav .btn .lang { display: none; }
@media (min-width: 760px) { .site-nav .btn .lang { display: inline; } .site-nav .btn .kort { display: none; } }
@media (max-width: 759px) { .site-nav nav { gap: 14px; } }
/* Gemeten: met de link erbij werd de pagina op 360 px 418 px breed (merk 156 + link 82 + knop
   130 + tussenruimtes). Op smalle telefoons alles een maatje kleiner. */
@media (max-width: 430px) {
  .site-nav { gap: 10px; }
  .site-nav nav { gap: 10px; font-size: 14px; }
  .merk { font-size: 18px; gap: 7px; }
  .merk i { width: 14px; height: 14px; }
  .site-nav .btn { padding: 8px 12px; font-size: 13px; }
}
.hoofdstuk .doorlink { margin-top: 22px; }

.site-foot {
  max-width: 1320px; margin: 0 auto; padding: 32px var(--gutter) 40px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px;
  font-size: 14px; color: var(--faint); border-top: 1px solid var(--line);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot a { color: var(--soft); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }

/* ═══ 4. HOMEPAGE ═════════════════════════════════════════════════════════ */
.hero {
  max-width: 1320px; margin: 0 auto; padding: 4px var(--gutter) 56px;
  display: grid; gap: 28px; align-items: center;
  /* minmax(0, 1fr) en niet de standaard 'auto': anders groeit de kolom mee met de natuurlijke
     breedte van een grote foto en scrolt de pagina op een telefoon zijwaarts (gemeten: 386 px
     op een scherm van 375). Zelfde reden bij de band en de hoofdstukken. */
  grid-template-columns: minmax(0, 1fr);
}
.hero-beeld {
  border-radius: 16px; overflow: hidden; background: #ECE9E1; aspect-ratio: 1.9 / 1; margin: 0;
}
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero h1 { font-size: clamp(42px, 11vw, 88px); line-height: .98; letter-spacing: -.035em; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--teal); }
.hero .lede { font-size: 17px; color: var(--soft); margin-top: 18px; max-width: 42ch; }
.geruststelling { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--soft); }
.geruststelling li { display: flex; align-items: center; gap: 8px; }
.geruststelling li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); padding-block: 24px 80px; }
  .hero-beeld { order: 2; aspect-ratio: 1.2 / 1; }
  .hero .lede { font-size: 19px; margin-top: 22px; }
}

/* Het zoekveld: op de homepage én in stap 1. De suggestielijst is van app.js. */
.zoek {
  position: relative; display: flex; align-items: center; gap: 6px; margin-top: 26px; max-width: 520px;
  background: var(--white); border: 1.5px solid var(--ink); border-radius: 99px; padding: 5px 5px 5px 20px;
  box-shadow: 0 10px 30px rgba(16, 38, 42, .08);
}
.zoek:focus-within { box-shadow: 0 0 0 4px var(--amber-soft), 0 10px 30px rgba(16, 38, 42, .08); }
.zoek input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink); padding: 8px 0;
}
.zoek input::placeholder { color: var(--faint); }
.zoek .btn { padding: 12px 20px; min-height: 46px; }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  list-style: none; margin: 0; padding: 6px; display: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 38, 42, .14); max-height: 60vh; overflow: auto; text-align: left;
}
.suggestions.open { display: block; }
.suggestions li { padding: 12px 14px; border-radius: 9px; font-size: 15px; cursor: pointer; line-height: 1.35; }
.suggestions li:hover, .suggestions li:focus-visible { background: var(--teal-soft); }
.suggestions li.suggestie-plek::before { content: "Plek · "; color: var(--teal); font-size: 13px; }
.suggestions li.suggestie-bron { cursor: default; font-size: 12px; color: var(--faint); padding-block: 6px; }
.suggestions li.suggestie-bron:hover { background: none; }

/* Drie hoofdstukken, om en om. Een hoofdstuk zonder beeld (foto nog niet aangeleverd)
   wordt vanzelf één kolom: het <figure> haalt zichzelf weg als het bestand ontbreekt. */
.hoofdstukken { max-width: 1320px; margin: 0 auto; padding: 8px var(--gutter); }
.hoofdstuk {
  display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1fr);
  padding-block: 52px; border-bottom: 1px solid var(--line);
}
.hoofdstuk:last-child { border-bottom: 0; }
.hoofdstuk h2 { font-size: clamp(30px, 7.5vw, 48px); }
.hoofdstuk p { color: var(--soft); font-size: 17px; margin-top: 16px; max-width: 46ch; }
.hoofdstuk figure { margin: 0; border-radius: 14px; overflow: hidden; background: #ECE9E1; }
.hoofdstuk figure img, .hoofdstuk figure video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hoofdstuk figure figcaption { font-size: 13px; color: var(--faint); padding-top: 8px; grid-column: 1 / -1; }
.hoofdstuk .figuur-achterkant { background: #F1EEE6; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hoofdstuk .figuur-achterkant img { width: auto; height: 100%; object-fit: contain; }
@media (min-width: 900px) {
  .hoofdstuk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); padding-block: 96px; }
  .hoofdstuk:has(> figure, > .klikbeeld) .tekst { order: 0; }
  .hoofdstuk.om:has(> figure, > .klikbeeld) .tekst { order: 2; }
  .hoofdstuk:not(:has(> figure, > .klikbeeld)) { grid-template-columns: minmax(0, 1fr); }
  .hoofdstuk p { font-size: 18px; }
}
.prijzen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; max-width: 520px; }
.prijs { display: block; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.prijs:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 38, 42, .08); }
.prijs.aanrader { border: 1.5px solid var(--ink); }
.prijs > span { display: block; }
.prijs .maat { font-family: var(--f-mono); font-size: 13px; color: var(--soft); }
.prijs .prijsregel { margin-top: 2px; }
/* "vanaf": de kleurkorting maakt elk formaat goedkoper, dus het bedrag is een ondergrens.
   Op een telefoon zijn de drie kaartjes te smal voor "vanaf EUR 49" op een regel (gemeten op
   375 px: hij brak tussen het euroteken en het getal), dus daar staat "vanaf" erboven. */
.prijs .vanaf { display: block; font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: .06em; color: var(--soft); }
.prijs .bedrag { display: block; font-family: var(--f-display); font-size: clamp(24px, 6vw, 30px); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
@media (min-width: 560px) {
  .prijs .vanaf { display: inline; margin-right: 5px; }
  .prijs .bedrag { display: inline; }
}
.prijs .noot { font-size: 12px; color: var(--teal); min-height: 18px; }

/* Klikbare beelden op de homepage: openen het 3D-voorbeeld */
.klikbeeld { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.klikbeeld figure { transition: transform .25s ease; }
.klikbeeld:hover figure { transform: scale(1.01); }
.klikbeeld-label {
  position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(16, 38, 42, .86); color: #fff;
  font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 99px; pointer-events: none;
}
/* Het cadeau-hoofdstuk: meer ruimte voor het beeld en foto's die doorwisselen (21 september
   2026, verzoek eigenaar). Tot dan een staande foto van 4:5 met een plafond van 640 px hoog,
   dus hooguit 512 px breed -- op een breed scherm een klein raampje naast veel lucht.
   Op een breed scherm nu 4:3 liggend, en de beeldkolom 1,8 keer zo breed als de tekst:
   gemeten op 1280 px van 512 x 640 naar 718 x 539 px (40% breder, 18% meer beeld). De meeste
   printfoto's zijn liggend (4:3); de twee staande (cadeau, plank) worden bijgesneden, en bij
   allebei staat de kaart in het midden van het beeld. */
/* Op de telefoon STAAND (4:5), zoals de foto hier eerst stond: liggend werd het beeld daar
   juist kleiner -- gemeten 343 x 257 tegen 343 x 429 px op 375 breed. Een liggende foto
   verliest dan wat van zijn zijkanten, maar de kaart staat bij alle vijf in het midden. */
.diashow { position: relative; }
/* Zelf bladeren in de cadeau-diashow (21 september 2026). 44 px: raakbaar met een duim; wit en
   licht doorschijnend zodat ze niet over de foto heen schreeuwen. Het label is hier een ECHTE
   knop (de timelapse heeft nog de oude vorm, waar het label een opschrift in een knop is). */
.diashow-vak .klikbeeld-label { pointer-events: auto; border: 0; cursor: pointer; min-height: 40px; }
.dia-pijl {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0 0 3px;
  background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 28px; line-height: 1;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .18); cursor: pointer; transition: background .15s;
}
.dia-pijl:hover { background: #fff; }
.dia-pijl.vorige { left: 12px; }
.dia-pijl.volgende { right: 12px; }
/* Alleen de diashow in het cadeau-hoofdstuk wisselt van vorm; de hero houdt zijn eigen maat
   (.hero-beeld) en de formaten staan altijd liggend. */
.klikbeeld .diashow { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .klikbeeld .diashow { aspect-ratio: 4 / 3; } }
.diashow.vier-drie { aspect-ratio: 4 / 3; }
.diashow img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s ease;
}
.diashow img.actief { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .diashow img { transition: none; } }
@media (min-width: 900px) {
  .hoofdstuk.breedbeeld { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
}

/* Het 3D-venster */
.modelvenster {
  width: min(960px, calc(100vw - 24px)); max-width: none; height: min(760px, calc(100dvh - 24px)); max-height: none;
  padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.modelvenster[open] { display: grid; grid-template-rows: auto 1fr auto; }
.modelvenster::backdrop { background: rgba(10, 26, 29, .6); }
.mv-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--white); }
.mv-titel { font-size: 14px; color: var(--soft); }
.mv-sluit { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper); font-size: 24px; line-height: 1; }
.mv-podium { position: relative; min-height: 0; background: radial-gradient(ellipse at 50% 40%, #F4F2EC 0%, #E3E0D6 100%); }
.mv-podium model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; }
.mv-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); }
.mv-voet p { font-size: 14px; color: var(--soft); }
.hoofdstuk p.klein { font-size: 14px; margin-top: 14px; }

/* Eerder gemaakte ontwerpen (23 september 2026). Staat in stap 1 van de maker, in het smalle
   paneel naast de kaart -- dus een RIJ per ontwerp met het beeld links, en geen kaartjes naast
   elkaar: op 340 px breed zou een raster van twee kolommen alleen maar afgekapte tekst geven. */
.bewaard { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.bewaard .stap-label { margin-bottom: 10px; }
.bewaard .help { margin-top: 10px; }
.ontwerpen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ontwerp {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
}
.ontwerp-beeld { display: block; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #ECE9E1; cursor: pointer; }
.ontwerp-beeld img { width: 100%; height: 100%; object-fit: cover; }
.ontwerp-leeg { width: 100%; height: 100%; background: linear-gradient(135deg, #ECE9E1, #DCD8CC); }
.ontwerp-tekst { display: grid; gap: 1px; min-width: 0; }
.ontwerp-tekst b { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.ontwerp-tekst .mono { font-size: 11px; color: var(--soft); }
.ontwerp-datum { font-size: 11px; color: var(--faint); overflow-wrap: anywhere; }
.ontwerp-acties { grid-column: 2; display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ontwerp-acties .btn { padding: 6px 12px; min-height: 40px; font-size: 13px; }
.ontwerp-weg { background: none; border: 0; color: var(--faint); font-size: 12px; min-height: 40px; padding: 0 4px; }
.ontwerp-weg:hover { color: var(--ink); text-decoration: underline; }

/* Vragen (21 september 2026): dicht als standaard, één regel per vraag. Op breed scherm
   de kop links en de lijst rechts, net als de andere hoofdstukken. */
.vragen { align-items: start; }
.vragenlijst { border-top: 1px solid var(--line); max-width: 760px; }
.vragenlijst details { border-bottom: 1px solid var(--line); }
.vragenlijst summary {
  list-style: none; cursor: pointer; min-height: 44px; padding: 16px 36px 16px 0; position: relative;
  font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--ink);
}
.vragenlijst summary::-webkit-details-marker { display: none; }
.vragenlijst summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 400 24px/1 var(--f-body); color: var(--teal);
}
.vragenlijst details[open] summary::after { content: "−"; }
.vragenlijst details p { margin: -4px 0 18px; font-size: 16px; max-width: 60ch; }

.afsluiter { background: var(--white); border-top: 1px solid var(--line); padding: 72px var(--gutter) 88px; text-align: center; }
.afsluiter h2 { font-size: clamp(34px, 8vw, 60px); }
.afsluiter .zoek { margin-inline: auto; text-align: left; }

/* ═══ 5. DE MAKER ═════════════════════════════════════════════════════════
   Eén scherm tegelijk: plek → bouwen → model → bestellen → klaar. Het wisselen doet
   app.js (showView); hier staat alleen hoe elk scherm eruitziet. */
body.in-maker #home { display: none; }
body:not(.in-maker) #maker { display: none; }

.maker-kop {
  position: sticky; top: 0; z-index: 30; height: var(--kop);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--gutter); background: var(--white); border-bottom: 1px solid var(--line);
}
.maker-kop .merk { font-size: 17px; gap: 7px; }
.maker-kop .merk i { width: 14px; height: 14px; }
.maker-kop .terug { background: none; border: 0; color: var(--soft); font-size: 14px; padding: 8px 0; min-height: 44px; white-space: nowrap; }
.maker-kop .terug:hover { color: var(--ink); }
.stappen { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.stappen li { display: flex; align-items: center; color: var(--faint); }
.stappen li + li::before { content: ""; width: 8px; height: 1px; background: var(--line); margin: 0 2px; }
/* min-height 44 px: het bolletje blijft even groot, maar het RAAKVLAK is er een waar een
   duim op past. Gemeten bij de doorloop van 19 september 2026: 26 x 28 px. */
.stappen button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: none; color: inherit; padding: 5px 5px; min-height: 44px; border-radius: 99px; }
.stappen button:disabled { cursor: default; }
.stappen button:not(:disabled):hover { background: var(--paper); color: var(--ink); }
.stappen b {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
}
.stappen span { display: none; }
/* Op de telefoon alleen de naam van de huidige stap; de rest zijn bolletjes. */
.stappen li[aria-current="step"] span { display: inline; font-weight: 500; }
/* Telefoon: de stappen + logo + merknaam passen alleen zonder lijntjes en met kleine
   bolletjes (de kop was 480 px breed op een scherm van 375 toen het er nog zes waren). */
@media (max-width: 899px) {
  .maker-kop { gap: 8px; }
  .stappen { gap: 0; min-width: 0; }
  .stappen li + li::before { display: none; }
  .stappen button { padding: 4px 3px; gap: 5px; min-height: 44px; }
  .stappen b { width: 20px; height: 20px; font-size: 11px; }
  .stappen span { font-size: 12.5px; }
  /* In de studio staan Terug en de stap "Plek" al in beeld. */
  body[data-scherm="result"] #kop-terug { display: none; }
}
.stappen li[aria-current="step"] { color: var(--ink); }
.stappen li[aria-current="step"] b { background: var(--ink); border-color: var(--ink); color: #fff; }
.stappen li.klaar b { background: var(--teal-soft); border-color: var(--teal-soft); color: var(--teal); }
@media (min-width: 900px) { .stappen span { display: inline; } .stappen li + li::before { width: 14px; margin: 0 4px; } .maker-kop .merk { font-size: 21px; gap: 9px; } .maker-kop .merk i { width: 16px; height: 16px; } }

.scherm { min-height: calc(100vh - var(--kop) - var(--banner)); min-height: calc(100dvh - var(--kop) - var(--banner)); }

/* Vaste actiebalk onderin, alleen op de telefoon. */
.actiebalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; align-items: center; gap: 14px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.met-actiebalk .actiebalk { display: flex; }
body.met-actiebalk { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
/* Staat het toetsenbord open, dan gaat de balk WEG. Gemeld op een echte iPhone
   (18 september 2026, met foto): het tekstvak voor het persoonlijke bericht viel precies
   achter deze balk -- je zag alleen de bovenrand van het vak boven "Verder: formaat"
   uitsteken, en dus niet wat of waar je typte. Tijdens het typen is die knop ook niet nodig;
   hij komt terug zodra het toetsenbord dichtgaat. Scheelt 84 px plus de veilige zone. */
body.typen.met-actiebalk .actiebalk { display: none; }
body.typen.met-actiebalk { padding-bottom: 0; }
.actiebalk .info { flex: 1; min-width: 0; line-height: 1.2; }
.actiebalk .hoofd { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.actiebalk .onder { font-size: 12.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actiebalk .btn { flex: none; padding-inline: 20px; }
@media (min-width: 900px) {
  body.met-actiebalk .actiebalk { display: none; }
  body.met-actiebalk { padding-bottom: 0; }
}
/* Op de telefoon neemt de actiebalk deze knoppen over. */
@media (max-width: 899px) {
  .alleen-breed { display: none !important; }
}

/* ── Stap 1: plek ── */
.plek { display: grid; }
.kaart-vak { position: relative; height: 46vh; min-height: 300px; background: #DDE7E6; }
.kaart-vak #map { position: absolute; inset: 0; }
.kaartstijl {
  position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; padding: 4px;
  background: var(--white); border-radius: 99px; box-shadow: 0 4px 14px rgba(16, 38, 42, .16);
}
.kaartstijl button { border: 0; background: none; padding: 6px 13px; min-height: 40px; border-radius: 99px; font-size: 13px; }
.kaartstijl button.active { background: var(--navy); color: #fff; }
.draw-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  background: var(--navy); color: #fff; font-size: 13px; padding: 8px 14px; border-radius: 99px;
  white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
.zijpaneel { background: var(--white); padding: 22px var(--gutter) 28px; display: grid; gap: 22px; align-content: start; }
.zijpaneel h2 { font-size: 27px; }
.zijpaneel .sub { color: var(--soft); font-size: 15px; margin-top: 6px; }
.zijpaneel .zoek { margin-top: 0; max-width: none; box-shadow: none; border-width: 1px; border-color: var(--line); background: var(--paper); padding: 4px 16px; }
.zijpaneel .zoek:focus-within { border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 4px var(--amber-soft); }

.area-presets { display: grid; gap: 8px; }
.area-preset {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
}
.area-preset:hover:not(:disabled) { border-color: var(--faint); }
.area-preset.active, .area-preset.nabij { border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
.area-preset:disabled { opacity: .5; cursor: not-allowed; }
.area-preset-naam { font-weight: 600; }
.area-preset-maat { font-family: var(--f-mono); font-size: 13px; color: var(--soft); align-self: center; }
.area-preset-uitleg { grid-column: 1 / -1; font-size: 13.5px; color: var(--soft); line-height: 1.4; display: none; }
.area-preset.active .area-preset-uitleg, .area-preset.nabij .area-preset-uitleg, .area-preset:disabled .area-preset-uitleg { display: block; }
.area-fijn { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.area-fijn .stapper { display: flex; align-items: center; gap: 4px; }
.area-zoom {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white);
  font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.area-zoom:hover { border-color: var(--ink); }
#area-out { min-width: 104px; text-align: center; font-size: 14px; }
#draw-btn.active { color: var(--ink); font-weight: 600; text-decoration: none; }
.gekozen { display: grid; gap: 6px; font-size: 14px; }
.gekozen .rij { display: flex; justify-content: space-between; gap: 16px; }
.gekozen .rij span:first-child { color: var(--soft); }
.gekozen .rij span:last-child { text-align: right; }
.plek-acties { display: grid; gap: 10px; }
.plek-acties .help { text-align: center; }
@media (min-width: 900px) {
  .plek { grid-template-columns: minmax(0, 1fr) 420px; min-height: calc(100vh - var(--kop) - var(--banner)); }
  .kaart-vak { height: auto; min-height: 520px; }
  .zijpaneel { border-left: 1px solid var(--line); padding: 32px 28px; }
  .zijpaneel h2 { font-size: 32px; }
}

/* ── Wachten terwijl het model gebouwd wordt ── */
.bouwen { background: var(--navy); color: #fff; padding: 12px var(--gutter) 40px; display: grid; gap: 18px; align-content: start; }
.bouwplaats {
  position: relative; margin-inline: calc(-1 * var(--gutter)); height: 44vh; min-height: 260px; max-height: 520px;
  background: radial-gradient(ellipse at 50% 45%, #1C4A50 0%, var(--navy) 70%);
}
.bouwplaats canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bouw-timelapse { margin: 22px 0 0; max-width: 360px; }
.bouw-timelapse video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; display: block; background: #153539; }
.bouw-timelapse figcaption { font-size: 13px; color: rgba(255, 255, 255, .55); margin-top: 8px; }
.bouwen h2 { font-size: clamp(30px, 7vw, 46px); color: #fff; }
.bouwen .sub { color: rgba(255, 255, 255, .7); margin-top: 12px; max-width: 42ch; }
.balk { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); margin-top: 28px; overflow: hidden; }
.balk i { display: block; height: 100%; width: 0; background: var(--amber); border-radius: 4px; transition: width .6s ease; }
.live-rij { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, .6); }
#steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
#steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .5); transition: color .3s; }
#steps .tick {
  width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 11px;
}
#steps li.active { color: #fff; }
#steps li.active .tick { background: var(--amber); border-color: var(--amber); color: var(--ink); animation: puls 1.2s ease-in-out infinite; }
#steps li.done { color: rgba(255, 255, 255, .75); }
#steps li.done .tick { background: rgba(255, 255, 255, .16); border-color: transparent; }
@keyframes puls { 50% { opacity: .55; } }
.bouwen .terug-link { margin-top: 24px; color: rgba(255, 255, 255, .6); background: none; border: 0; padding: 0; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
/* Op de telefoon alleen de stap waar hij nu mee bezig is; de balk en de teller zeggen de rest. */
@media (max-width: 899px) {
  #steps li:not(.active) { display: none; }
  .bouwen h2 { font-size: 28px; }
}
@media (min-width: 900px) {
  .bouwen { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; align-content: center; padding: 32px var(--gutter); }
  .bouwplaats { margin: 0; height: min(72vh, 640px); max-height: none; border-radius: 20px; }
}

/* ── Stap 2: het model ──
   Op de telefoon plakt het model bovenin terwijl je eronder kiest: zonder dat tik je
   "Helemaal wit" aan en zie je niets gebeuren (gemeten op 375 × 812, 16 september 2026). */
.studio { display: grid; }
.podium {
  position: sticky; top: var(--kop); z-index: 5; height: 36vh; min-height: 230px;
  background: radial-gradient(ellipse at 50% 40%, #F4F2EC 0%, #E3E0D6 100%);
  border-bottom: 1px solid var(--line);
}
.podium model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; }
.aanzichten { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; z-index: 2; }
.aanzichten button {
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 99px;
  /* 40 px hoog: deze drie staan boven op het model en werden met een duim vaak net gemist. */
  padding: 6px 12px; min-height: 40px; font-size: 13px;
}
.aanzichten button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.podium .onderschrift {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; z-index: 2;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--soft); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.variant-melding {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 9px; max-width: calc(100% - 24px);
  background: var(--navy); color: #fff; font-size: 13px; padding: 8px 14px; border-radius: 99px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2); white-space: nowrap;
}
.variant-melding #variant-melding-tekst { overflow: hidden; text-overflow: ellipsis; }
.variant-melding .draai {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: var(--amber);
  animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }
.rail { background: var(--white); padding: 22px var(--gutter) 28px; display: grid; gap: 26px; align-content: start; }
.rail > h2 { font-size: 26px; }
.rail .sub { color: var(--soft); font-size: 15px; margin-top: 6px; }

.keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.keuzes.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.keuzes .chip {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 6px; min-height: 48px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.2;
}
.keuzes .chip:hover { border-color: var(--faint); }
.keuzes .chip.active { border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
.keuzes .chip em { display: block; font-style: normal; font-weight: 400; font-family: var(--f-mono); font-size: 12px; color: var(--soft); margin-top: 3px; }
.keuzes .chip.active em { color: var(--teal); }
.keuzes .chip.onbeschikbaar { opacity: .45; }
.keuzes .chip.onbeschikbaar em { color: var(--soft); }

/* Formaat naast een A4'tje, op schaal */
.formaat-schaal { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.formaat-schaal svg { width: 64px; height: 76px; flex: none; color: var(--soft); overflow: visible; }
.formaat-schaal .formaat-vlak { fill: var(--amber-soft); stroke: var(--ink); stroke-width: 2.5; transition: all .3s ease; }
.formaat-schaal .formaat-tekst { fill: var(--ink); font-family: var(--f-mono); font-weight: 500; }
.formaat-schaal .help { margin: 0; }
#formaat-noot { margin-top: 10px; }

/* De zoomknoppen komen uit maplibre en zijn daar 29 x 29 px. Op een telefoon mis je die
   met een duim; de kaart is juist het scherm waar je het meest op tikt. (19 september 2026.) */
.maplibregl-ctrl-group button { width: 40px; height: 40px; }

/* Sfeerknoppen: de stippen van app.js worden hier een kleurstaal met de échte filamentkleuren.
   Twee kolommen sinds 19 september 2026: het accent is een schakelaar geworden, geen derde sfeer. */
.sferen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sferen .chip { background: none; border: 0; padding: 0; text-align: left; font-size: 13.5px; line-height: 1.3; color: var(--soft); }
.sferen .chip-stippen {
  display: flex; height: 50px; border-radius: 10px; overflow: hidden; margin-bottom: 7px;
  border: 1px solid var(--line); background: linear-gradient(135deg, #FFFFFF 40%, #ECE9E1);
}
.sferen .stip { flex: 1; background: var(--stip); }
.sferen .stip[style*="#FFFFFF" i] { background: transparent; }
.sferen .chip.active { color: var(--ink); font-weight: 600; }
.sferen .chip.active .chip-stippen { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--ink); }
.sferen .chip.onbeschikbaar { opacity: .5; }

/* Het accent op je eigen huis: staat los van de sfeer, dus ziet het er ook anders uit dan de
   sfeerknoppen -- een schakelaar, niet een derde staal. */
/* Compacter sinds 20 september 2026 (melding eigenaar: "ik vind de knop ook best groot, niet
   te groot op de telefoon?"). Minder padding, kleinere letter en een kleinere schuif; de hele
   knop blijft het raakvlak en daarmee ruim boven de 40 px die de doorloop van 19 september
   afdwong -- gemeten 65 px hoog op 375 px breed, was 78 px. */
.accent-schakelaar {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; align-items: center; text-align: left;
  width: 100%; margin-top: 10px; min-height: 44px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px;
}
.accent-schakelaar .accent-naam { font-weight: 600; font-size: 14.5px; }
.accent-schakelaar .accent-uitleg { font-size: 12.5px; line-height: 1.35; color: var(--soft); grid-column: 1; }
.accent-schakelaar .schuif {
  grid-row: span 2; position: relative; width: 40px; height: 24px; border-radius: 999px;
  background: var(--line); transition: background .2s ease;
}
.accent-schakelaar .schuif::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s ease;
}
.accent-schakelaar[aria-checked="true"] { border-color: var(--ink); }
.accent-schakelaar[aria-checked="true"] .schuif { background: var(--teal); }
.accent-schakelaar[aria-checked="true"] .schuif::after { transform: translateX(16px); }
.accent-schakelaar.onbeschikbaar { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .accent-schakelaar .schuif, .accent-schakelaar .schuif::after { transition: none; }
}

details.meer { border-top: 1px solid var(--line); padding-top: 14px; }
details.meer summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-weight: 500; min-height: 32px;
}
details.meer summary::-webkit-details-marker { display: none; }
details.meer summary::after { content: "+"; font-family: var(--f-mono); font-size: 18px; color: var(--soft); }
details.meer[open] summary::after { content: "−"; }
details.meer summary small { font-weight: 400; color: var(--faint); font-size: 13px; margin-left: auto; }
.meer-inhoud { padding-top: 12px; display: grid; gap: 10px; }
.kleurdeel-rij { display: grid; gap: 8px; }
.kleurdeel {
  display: grid; grid-template-columns: 22px 1fr; gap: 1px 12px; align-items: center; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
}
.kleurdeel .stip { grid-row: span 2; width: 22px; height: 22px; border-radius: 6px; background: var(--stip); border: 1px solid var(--line); }
.kleurdeel[aria-pressed="false"] .stip { background: var(--white); }
.kleurdeel-naam { font-weight: 600; font-size: 15px; }
.kleurdeel-uitleg { font-size: 13px; color: var(--soft); }
.kleurdeel[aria-pressed="true"] { border-color: var(--ink); }
.kleurdeel.onbeschikbaar { opacity: .5; }

.tekstveld {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
}
.tekstveld:focus { outline: 0; border-color: var(--ink); background: var(--white); }

/* De studio, stap voor stap */
.stap-teller { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.stap-paneel { display: grid; gap: 4px; }
.rail { scroll-margin-top: var(--kop); }
/* Gemaakte keuzes: klein, op één of twee regels, aan te tikken om te wijzigen. */
.keuzepillen { display: flex; flex-wrap: wrap; gap: 6px; }
.keuzepil {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left;
  border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 6px 10px;
  max-width: 100%; transition: border-color .15s;
}
.keuzepil:hover { border-color: var(--ink); }
.keuzepil small { font-size: 11px; color: var(--soft); line-height: 1.2; }
.keuzepil span { font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stap-label { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.stap-label b {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; border: 1px solid var(--line); color: var(--soft);
}
.stap-label .optioneel { font-weight: 400; font-size: 13px; }
.stap-paneel.nu .stap-label b { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Compact voor stappen die je al gehad hebt: de knoppen blijven, de extra's niet. */
.stap-paneel:not(.nu) .formaat-schaal,
.stap-paneel:not(.nu) .help { display: none; }
.stap-paneel:not(.nu) .stap-label { color: var(--soft); font-weight: 500; }
.rail .keuzes .chip { min-height: 44px; padding: 8px 6px; font-size: 14px; }
.rail .sferen .chip-stippen { height: 40px; margin-bottom: 5px; }
.rail .sferen .chip { font-size: 13px; }
@media (max-width: 899px) {
  /* De studio is één kolom met twee rijen. Zonder deze regel deelt de grid de hoogte die
     .scherm afdwingt (100dvh) over BEIDE rijen, en dan staat er een leeg vlak onder het model:
     gemeten 126 px op 375 x 812 -- precies de ruimte die op een telefoon ontbrak. */
  .studio { grid-template-rows: max-content 1fr; }
  .rail { gap: 16px; padding-top: 16px; }
  /* Formaat compacter: de A4-vergelijking was op een telefoon het hoogste blok van de hele
     rail terwijl het maar één ding zegt (melding eigenaar, 18 september 2026). */
  .formaat-schaal { gap: 10px; margin-top: 8px; }
  .formaat-schaal svg { width: 46px; height: 55px; }
  .formaat-schaal .help { font-size: 13px; line-height: 1.4; }
  .rail .keuzes .chip { min-height: 40px; }
  .rail .sferen .chip-stippen { height: 32px; margin-bottom: 4px; }
  /* Onder het plakkende model uitkomen, niet erachter; en boven de actiebalk. */
  .stap-paneel { scroll-margin-top: calc(var(--kop) + max(36vh, 230px) + 12px); scroll-margin-bottom: 96px; }
  body.stap-bestellen .stap-paneel { scroll-margin-top: calc(var(--kop) + max(24vh, 150px) + 12px); }
  body.typen .stap-paneel { scroll-margin-top: calc(var(--kop) + max(17vh, 110px) + 12px); }
}
.bestel-totaal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.bestel-totaal span { font-size: 14px; color: var(--soft); }
.bestel-totaal b { font-family: var(--f-display); font-size: 26px; font-weight: 600; }
.verborgen-hulp { display: contents; }
.stap-voet { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.stap-prijs .bedrag { font-family: var(--f-display); font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1; transition: color .3s; }
.stap-prijs .bedrag.flits { color: var(--teal); }
.stap-prijs .onder { font-size: 13px; color: var(--soft); margin-top: 6px; }
.stap-knoppen { display: flex; gap: 10px; }
.stap-knoppen .btn-go { flex: 1; }
@media (max-width: 899px) {
  .stap-voet { border-top: 0; padding-top: 0; }
  .stap-knoppen .btn-line { padding: 10px 16px; min-height: 40px; font-size: 14px; }
  /* Bij bestellen maakt het model plaats voor het formulier (en het toetsenbord). */
  body.stap-bestellen .studio .podium { height: 24vh; min-height: 150px; }
  body.stap-bestellen .aanzichten, body.stap-bestellen .podium .onderschrift { display: none; }
  /* Zodra het toetsenbord openstaat is er op een iPhone nauwelijks ruimte over; dan krimpt
     het model tot een strookje (melding eigenaar, 18 september 2026: "met typen van tekst of
     adres soms te weinig ruimte"). body.typen wordt gezet in app.js op focus van een veld. */
  body.typen .studio .podium { height: 17vh; min-height: 110px; }
  body.typen .aanzichten, body.typen .podium .onderschrift, body.typen .variant-melding { display: none; }
}
.samenvatting { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 8px; font-size: 15px; }
.samenvatting dt { color: var(--soft); }
.samenvatting dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.samenvatting dd .linkbtn { font-size: 13px; margin-left: 6px; }
.samenvatting .totaal-dt, .samenvatting .totaal-dd { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.samenvatting .totaal-dd b { font-family: var(--f-display); font-size: 26px; font-weight: 600; display: block; line-height: 1.1; }
.samenvatting .totaal-dd small { font-size: 12px; color: var(--soft); }
body.stap-bestellen .formulier { margin-top: 8px; }

/* Foto's van echte prints op de voorbeeldenpagina */
.fotorij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
.fotorij figure { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #ECE9E1; }
.fotorij img { width: 100%; height: 100%; object-fit: cover; }
.rij-kop { font-size: clamp(26px, 5vw, 34px); margin-top: 48px; }
@media (min-width: 900px) { .fotorij { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }

.totaal { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
.totaal .bedrag { font-family: var(--f-display); font-size: 36px; font-weight: 600; letter-spacing: -.02em; line-height: 1; transition: color .3s; }
.totaal .bedrag.flits { color: var(--teal); }
.totaal .onder { font-size: 13px; color: var(--soft); margin-top: 6px; }
.totaal .korting { font-family: var(--f-mono); font-size: 12px; color: var(--teal); text-align: right; }
/* Op een breed scherm scrolt de PAGINA niet meer, alleen de rail (20 september 2026, melding
   eigenaar: "bij het scrollen scrolt nu de hele site"). De studio is precies zo hoog als het
   venster onder de kop, het model staat als VAST VIERKANT in de linkerhelft en de onderschrift-
   regel eronder blijft daarmee altijd in beeld. Het vierkant is min(kolombreedte, resthoogte):
   welke van de twee knelt hangt van het venster af, maar de verhouding blijft 1:1 en de maat
   verandert niet terwijl je scrollt. Alleen .rail heeft een eigen schuifbalk. */
@media (min-width: 900px) {
  .studio {
    grid-template-columns: minmax(0, 1fr) 420px;
    height: calc(100vh - var(--kop) - var(--banner));
    height: calc(100dvh - var(--kop) - var(--banner));
    min-height: 0; overflow: hidden;
  }
  .podium { position: relative; top: 0; height: 100%; min-height: 0; border-bottom: 0; }
  /* De VOLLE breedte van de kolom, niet meer een vierkant (21 september 2026, melding
     eigenaar: "als ik inzoom op een breed scherm snijden de zijkanten af"). Het vierkant van
     20 september hield het model netjes op één maat, maar bij inzoomen viel alles buiten dat
     vierkant weg terwijl er links en rechts ruimte over was. model-viewer past het model
     zelf in het vak: op een breed scherm is de HOOGTE de beperking, dus het model begint op
     dezelfde grootte als in het vierkant -- alleen inzoomen gebruikt nu de hele breedte.
     Onderaan blijft een strook vrij voor het onderschrift, zodat dat altijd leesbaar is. */
  .podium model-viewer { position: absolute; inset: 0 0 48px 0; width: auto; height: auto; }
  .podium .onderschrift { padding: 16px 24px; font-size: 12px; }
  .aanzichten { left: 20px; top: 20px; }
  .rail {
    border-left: 1px solid var(--line); padding: 28px 26px;
    height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  .rail > h2 { font-size: 30px; }
}

/* ── Stap 3: bestellen ── */
.bestellen { max-width: 1120px; margin: 0 auto; padding: 20px var(--gutter) 48px; display: grid; gap: 22px; align-items: start; }
.bestellen h1 { font-size: clamp(28px, 6vw, 42px); }
.bestellen .sub { color: var(--soft); margin-top: 8px; }
.formulier { display: grid; gap: 14px; margin-top: 20px; }
.veld { display: grid; gap: 6px; }
.veld label { font-size: 14px; font-weight: 500; color: var(--soft); }
.veld input, .veld textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  padding: 13px 14px; font: inherit; font-size: 16px; color: var(--ink);
}
.veld input:focus, .veld textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--amber-soft); }
.twee-velden { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; }
.adres-gevonden { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); margin-top: -4px; }
.adres-gevonden::before { content: "✓"; color: var(--teal); font-weight: 600; }
.adres-gevonden .linkbtn { font-size: 14px; }
.herroeping { font-size: 14px; color: var(--soft); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; line-height: 1.5; }
.betaalwijzen { font-size: 13px; color: var(--soft); text-align: center; }

.overzicht { background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.overzicht-kop { display: flex; gap: 12px; align-items: center; padding: 12px; }
.overzicht-kop img { width: 72px; height: 72px; flex: none; border-radius: 10px; object-fit: cover; background: #F1EFE9; }
.overzicht-kop .wat { flex: 1; min-width: 0; }
.overzicht-kop h2 { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.overzicht-kop .bedrag { font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.overzicht dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; padding: 4px 16px 16px; font-size: 15px; }
.overzicht dt { color: var(--soft); }
.overzicht dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.overzicht .aanpassen { padding: 0 16px 16px; }
@media (max-width: 899px) {
  .overzicht:not(.open) dl, .overzicht:not(.open) .aanpassen { display: none; }
}
@media (min-width: 900px) {
  .bestellen { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); padding-top: 48px; }
  .overzicht { position: sticky; top: calc(var(--kop) + 24px); order: 2; }
  .overzicht-kop { display: block; padding: 0; }
  .overzicht-kop img { width: 100%; height: auto; aspect-ratio: 1.6 / 1; border-radius: 0; }
  .overzicht-kop .wat { padding: 20px 20px 4px; }
  .overzicht-kop h2 { font-size: 22px; }
  .overzicht-kop .bedrag, #overzicht-toggle { display: none; }
  .overzicht dl { padding: 12px 20px 8px; }
  .overzicht .totaalrij { display: flex; }
  .overzicht .aanpassen { padding: 0 20px 20px; }
}
.overzicht .totaalrij { display: none; justify-content: space-between; align-items: baseline; margin: 8px 20px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.overzicht .totaalrij b { font-family: var(--f-display); font-size: 30px; font-weight: 600; }
.overzicht .totaalrij span { font-size: 13px; color: var(--soft); }

/* ── Klaar, en als er iets misgaat ── */
/* div.: 'klaar' is ook de klasse van een afgevinkte stap in de kop (li.klaar) -- zonder div
   kreeg elk bolletje deze marge (gemeten, 16 september 2026). */
div.klaar, div.fout { max-width: 720px; margin: 0 auto; padding: 56px var(--gutter) 72px; text-align: center; }
.klaar .vink { width: 64px; height: 64px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 22px; }
.klaar.wacht .vink { background: var(--amber-soft); color: var(--ink); }
div.klaar h2, div.fout h2 { font-size: clamp(32px, 8vw, 54px); }
.klaar .sub, .fout .sub { color: var(--soft); font-size: 17px; margin-top: 14px; }
.tijdlijn { list-style: none; margin: 40px 0 0; padding: 0; text-align: left; border-left: 1px solid var(--line); display: grid; gap: 20px; }
.tijdlijn li { position: relative; padding-left: 24px; }
.tijdlijn li::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.tijdlijn li.nu::before { background: var(--teal); }
.tijdlijn b { display: block; }
.tijdlijn span { color: var(--soft); font-size: 15px; }
.tijdlijn .wanneer { float: right; margin-left: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--faint); }
.klaar .btn, .fout .btn { margin-top: 36px; }
.fout .notice { margin-top: 20px; text-align: left; }

/* ═══ 6. KLEINE PAGINA'S ══════════════════════════════════════════════════ */
.doc { max-width: 720px; margin: 0 auto; padding: 24px var(--gutter) 72px; }
.doc h1 { font-size: clamp(32px, 7vw, 46px); margin-bottom: 8px; }
.doc h2 { font-size: 22px; margin: 36px 0 10px; }
.doc h3 { font-size: 18px; margin: 24px 0 8px; }
.doc p, .doc li { color: #2C4244; font-size: 16px; }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc .updated { font-size: 14px; color: var(--faint); }
.doc .back { display: inline-block; margin-top: 36px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc .tabel-vak { overflow-x: auto; }

.bekijk-wrap { max-width: 960px; margin: 0 auto; padding: 24px var(--gutter) 64px; text-align: center; }
.bekijk-wrap h1 { font-size: clamp(32px, 7vw, 46px); }
.bekijk-melding { color: var(--soft); margin-top: 12px; }
.bekijk-viewer { width: 100%; height: 62vh; min-height: 320px; margin-top: 20px; border-radius: 16px; background: radial-gradient(ellipse at 50% 40%, #F4F2EC 0%, #E3E0D6 100%); --poster-color: transparent; }
.bekijk-wrap .btn { margin-top: 24px; }

.voorbeelden { max-width: 1320px; margin: 0 auto; padding: 16px var(--gutter) 72px; }
.voorbeelden > h1 { font-size: clamp(34px, 8vw, 56px); }
.voorbeelden > .sub { color: var(--soft); font-size: 17px; margin-top: 14px; max-width: 60ch; }
.voorbeeld-rij { display: grid; gap: 16px; margin-top: 36px; }
.voorbeeld { background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.voorbeeld model-viewer { width: 100%; height: auto; aspect-ratio: 1.2 / 1; background: radial-gradient(ellipse at 50% 40%, #F4F2EC 0%, #E3E0D6 100%); --poster-color: transparent; }
/* Eén kaart per echte print (21 september 2026): foto of 3D-model in hetzelfde vak, met de
   andere foto's van die print als duimnagels eronder. */
.kaartbeeld { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(ellipse at 50% 40%, #F4F2EC 0%, #E3E0D6 100%); }
.kaartbeeld .kaartfoto, .kaartbeeld model-viewer {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block;
}
.kaartbeeld [hidden] { display: none; }
.kaartbeeld .draai {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; min-height: 40px; padding: 8px 14px;
  border: 0; border-radius: 99px; background: rgba(16, 38, 42, .86); color: #fff; font-size: 13px; font-weight: 500;
}
.kaartbeeld .draai:hover { background: var(--ink); }
.duimen { display: flex; gap: 6px; padding: 8px 10px 0; overflow-x: auto; }
.duim {
  flex: none; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 8px;
  overflow: hidden; background: #ECE9E1; opacity: .7; transition: opacity .15s, border-color .15s;
}
.duim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duim:hover, .duim.actief { opacity: 1; }
.duim.actief { border-color: var(--ink); }
.voorbeeld .wat { padding: 16px 18px 20px; }
.voorbeeld .kicker { margin-bottom: 6px; font-size: 11px; }
.voorbeeld h2 { font-size: 22px; }
.voorbeeld p { color: var(--soft); font-size: 15px; margin-top: 8px; }
.voorbeeld.groot { display: grid; }
/* Bovenste kaart: foto links, het 3D-model er altijd naast (21 september 2026). Op de telefoon
   onder elkaar: foto, duimnagels, model, tekst. */
.modelvak { position: relative; aspect-ratio: 4 / 3; margin-top: 10px; background: radial-gradient(ellipse at 50% 40%, #F4F2EC 0%, #E3E0D6 100%); }
.modelvak model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.modelvak-hint {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 99px; pointer-events: none;
  background: rgba(255, 255, 255, .82); color: var(--ink); font-size: 13px; font-weight: 500;
}
@media (min-width: 900px) {
  .voorbeeld-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voorbeeld.groot { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .voorbeeld.groot .kaartbeeld { grid-column: 1; grid-row: 1; }
  .voorbeeld.groot .modelvak { grid-column: 2; grid-row: 1; margin-top: 0; border-left: 1px solid var(--line); }
  .voorbeeld.groot .duimen { grid-column: 1; grid-row: 2; padding-bottom: 10px; }
  .voorbeeld.groot .wat { grid-column: 2; grid-row: 2; padding: 20px 28px 24px; }
  .voorbeeld.groot h2 { font-size: 34px; }
}