/* Aanbouwplanner: stijl
   Eerst voor de telefoon geschreven. Wat in een @media (min-width) blok staat, geldt voor grotere schermen.
   Kleuren komen uit de demo's; de echte huisstijl is nog niet gekozen. */

:root {
  --achtergrond: #edf0ef;
  --vlak: #ffffff;
  --vlak-2: #f4f6f5;
  --tekst: #1b2326;
  --tekst-zacht: #5a666a;
  --lijn: #d3dad8;
  --accent: #1d5b86;
  --accent-zacht: #e3edf4;
  --accent-tekst: #ffffff;
  --info: #1d5b86;
  --info-zacht: #e3edf4;
  --fout: #a3352b;
  --fout-zacht: #f7e3e0;
  --goed: #1b6e2a;
  --goed-zacht: #e4f1e6;

  /* Kleuren van het 3D-beeld. Dezelfde waarden staan in public/js/huis3d.js. */
  --drie-d-lucht: #dfe8ef;
  --drie-d-eigen: #c98a68;
  --drie-d-buren: #e6e3dd;
  --drie-d-perceel: #1d5b86;
  /* De aanbouw in stap 3: geel, zodat goed te zien is wat nieuw is. Dezelfde kleur staat in public/js/huis3d.js en aanbouw.js. */
  --aanbouw: #f0c75e;
  --aanbouw-rand: #a8791c;

  /* Systeemlettertypen: snel en geen verbinding met servers buiten de EU. */
  --letter: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rand: 10px;
  --kop-hoogte: auto;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--achtergrond);
  color: var(--tekst);
  font: 400 1rem/1.5 var(--letter);
}

[hidden] { display: none !important; }

/* Kop met merknaam en stappenbalk: blijft bovenaan staan */
.kop {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}
.kop-binnen {
  padding: 10px 16px 0;
  max-width: 960px;
  margin: 0 auto;
}
.merk {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--accent);
}

/* Stappenbalk. Telefoon: tekst "Stap 2 van 7" met zeven blokjes. */
.stappenbalk {
  max-width: 960px;
  margin: 0 auto;
  padding: 4px 16px 12px;
}
.stappenbalk-tekst {
  margin: 0 0 8px;
  font-size: .9rem;
  font-weight: 600;
}
.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.stappen button {
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  font: inherit;
  color: var(--tekst-zacht);
}
.stappen button::before {
  content: "";
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--lijn);
}
.stappen button.gedaan::before { background: var(--accent); opacity: .45; }
.stappen button[aria-current="step"]::before { background: var(--accent); }
.stappen button:disabled { cursor: default; }
.stappen .nummer,
.stappen .label { display: none; }

/* Inhoud van een stap */
.inhoud {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}
.stap {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rand);
  padding: 20px 16px 24px;
}
.stap h1 {
  margin: 0 0 6px;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.stap h1:focus { outline: none; }
.intro {
  margin: 0 0 20px;
  color: var(--tekst-zacht);
  max-width: 60ch;
}
.binnenkort {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--lijn);
  border-radius: var(--rand);
  background: var(--vlak-2);
  color: var(--tekst-zacht);
  font-size: .95rem;
}

/* Adresformulier */
.adres {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.veld label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: .95rem;
}
.veld input, .veld textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #aab4b2;
  border-radius: 8px;
  background: var(--vlak);
  color: var(--tekst);
  /* 16px of groter, anders zoomt een iPhone in bij het typen */
  font: 400 1.0625rem var(--letter);
}
.veld input::placeholder { color: #8a9598; }
.veld input:focus-visible, .veld textarea:focus-visible {
  outline: 3px solid var(--accent-zacht);
  border-color: var(--accent);
}
.veld input[aria-invalid="true"] { border-color: var(--fout); }
.veld textarea { display: block; resize: vertical; line-height: 1.4; }
.fout {
  margin: 6px 0 0;
  color: var(--fout);
  font-size: .9rem;
}

.melding {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--rand);
  background: var(--info-zacht);
  border-left: 4px solid var(--info);
  scroll-margin-bottom: 96px; /* niet achter de knoppen onderaan */
}
.melding strong { display: block; margin-bottom: 2px; }
.melding p { margin: 0; }
.melding-fout {
  background: var(--fout-zacht);
  border-left-color: var(--fout);
}

/* Huisnummer en toevoeging naast elkaar, ook op de telefoon */
.veld-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hint { margin: 6px 0 0; color: var(--tekst-zacht); font-size: .9rem; }

/* Gevonden adres kiezen en bevestigen */
.kaart-titel {
  margin: 0 0 6px;
  font-size: 1.15rem;
  line-height: 1.3;
}
.kaart-titel:focus { outline: none; }
.kaart-tekst { margin: 0 0 14px; color: var(--tekst-zacht); }
.keuzelijst {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.keuze {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--vlak);
  color: var(--tekst);
  font: 500 1rem var(--letter);
  text-align: left;
  cursor: pointer;
}
.keuze:hover { border-color: var(--accent); background: var(--accent-zacht); }
.keuze:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.keuze:disabled { opacity: .6; cursor: progress; }
.adres-bevestig {
  padding: 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--rand);
  background: var(--vlak-2);
}
.gevonden-adres {
  margin: 0 0 16px;
  font-size: 1.2rem;
  font-weight: 600;
}
.knoppenrij {
  display: grid;
  gap: 10px;
}

/* Stap 2: jouw woning */
.laden {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--rand);
  background: var(--vlak-2);
  color: var(--tekst-zacht);
}
.draaier {
  flex: none;
  width: 22px;
  height: 22px;
  border: 3px solid var(--lijn);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: draaien .8s linear infinite;
}
@keyframes draaien { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .draaier { animation-duration: 3s; } }
.melding-knop { margin-top: 12px; }
#woning-fout { margin: 0 0 24px; }
.feitenlijst {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border-top: 1px solid var(--lijn);
}
.feitenlijst li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lijn);
}
.feit { font-weight: 600; }
.bron { color: var(--tekst-zacht); font-size: .875rem; }
.kleine-tekst { margin: 0 0 16px; color: var(--tekst-zacht); font-size: .9rem; }
.persoonlijk, .stopmelding {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: var(--rand);
  background: var(--accent-zacht);
  border-left: 4px solid var(--accent);
}
.stopmelding .kaart-titel { margin: 0; }
.persoonlijk .melding { margin: 14px 0 0; background: var(--vlak); }

/* Knoppen */
/* Snel twee keer tikken op een knop mag de pagina niet laten inzoomen (vooral op een iPhone).
   Knijpen met twee vingers om de pagina te vergroten blijft gewoon werken. */
button, .drie-d { touch-action: manipulation; }

.knop {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: 600 1rem var(--letter);
  cursor: pointer;
}
.knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.knop-hoofd { background: var(--accent); color: var(--accent-tekst); }
.knop-hoofd:hover { background: #174a6d; }
.knop-tweede { background: var(--vlak); color: var(--tekst); border-color: var(--lijn); }
.knop-tweede:hover { background: var(--vlak-2); }
.knop:disabled { opacity: .4; cursor: default; }
.knop-breed { width: 100%; }
.knop-klein { min-height: 44px; padding: 0 14px; font-size: .95rem; }
.knop-vierkant { width: 44px; padding: 0; font-size: 1.35rem; line-height: 1; }

/* Een knop die eruitziet als een link, maar groot genoeg is voor een duim */
.tekstknop {
  align-self: flex-start;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 .95rem var(--letter);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tekstknop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Stap 2: het huis in 3D. Telefoon: bijna vierkant, zodat er nog ruimte is om de pagina te scrollen. */
.drie-d { margin: 0 0 24px; }
.drie-d-beeld {
  position: relative;
  width: 100%;
  height: min(78vw, 420px);
  /* Niet hoger dan past, zodat de knop eronder ook op een brede, lage telefoon boven de balk met Vorige en Volgende staat.
     385 px: de kop, de titel, de knop en de balk samen. svh: de schermhoogte met de adresbalk van de browser in beeld. */
  height: min(78vw, 420px, max(180px, calc(100svh - 385px)));
  border-radius: var(--rand);
  overflow: hidden;
  background: var(--drie-d-lucht);
  border: 1px solid var(--lijn);
}
.drie-d-beeld canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none; /* vingers draaien en zoomen het beeld, niet de pagina */
  cursor: grab;
}
.drie-d-beeld canvas:active { cursor: grabbing; }
.drie-d-geen {
  margin: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--tekst-zacht);
}
.drie-d-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.drie-d-hint { margin: 8px 0 0; color: var(--tekst-zacht); font-size: .9rem; }
.drie-d-uitleg { margin: 6px 0 0; font-size: .95rem; }
.legenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 0 0;
  padding: 0;
  font-size: .9rem;
}
.legenda li { display: flex; align-items: center; gap: 6px; }
.kleurblok { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.kleur-eigen { background: var(--drie-d-eigen); }
.kleur-buren { background: var(--drie-d-buren); border: 1px solid var(--lijn); }
.kleur-perceel { background: var(--drie-d-perceel); height: 4px; width: 18px; border-radius: 2px; }
/* De bronvermelding klapt open onder het linkje "Bronnen". De tekst zelf blijft volledig, zoals de licenties vragen. */
.bronnen { margin: 4px 0 0; color: var(--tekst-zacht); font-size: .85rem; }
.bronnen summary {
  width: fit-content;
  padding: 12px 8px 12px 0; /* samen minstens 44 px hoog, groot genoeg voor een duim */
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bronnen summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.bronvermelding { margin: 0 0 8px; font-size: .8rem; line-height: 1.45; }
.bronvermelding a { color: inherit; }

/* Het huis aanpassen: één vraag per scherm, direct onder het 3D-beeld, zodat je het huis ziet veranderen.
   Zolang de vragen open zijn, verbergen we de legenda en de knoppen van het 3D-beeld. */
.drie-d-aanpassen { margin-top: 10px; padding: 0 8px; border: 2px solid var(--accent); color: var(--accent); } /* valt op tussen de andere witte knoppen */
.drie-d.bezig .legenda, .drie-d.bezig .drie-d-knoppen, .drie-d.bezig .drie-d-aanpassen, .drie-d.bezig .drie-d-hint { display: none; }
.drie-d.bezig .drie-d-beeld { height: min(60vw, 420px); } /* iets lager, zodat beeld en vraag samen op een telefoon passen */
.drie-d.bezig .drie-d-beeld { height: clamp(130px, calc(100svh - 420px), min(60vw, 420px)); } /* 420 px: de vraag met alle keuzes en knoppen */
/* Tijdens de vragen geen vaste kop en geen balk met Vorige en Volgende: de vraag heeft eigen knoppen, en zo valt er niets achter de balk */
body:has(.stap:not([hidden]) .drie-d.bezig) .stapknoppen { display: none; }
body:has(.stap:not([hidden]) .drie-d.bezig) .kop { position: static; }
.aanpassen {
  margin-top: 10px;
  padding: 12px 14px 6px;
  border: 1px solid var(--lijn);
  border-radius: var(--rand);
  background: var(--vlak);
}
.aanpassen-teller { margin: 0 0 2px; color: var(--tekst-zacht); font-size: .9rem; }
.aanpassen .kaart-titel { margin-bottom: 10px; }
.plaatjeskeuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plaatjeskeuze.twee { grid-template-columns: 1fr 1fr; }
@media (max-width: 359px) { .plaatjeskeuze { grid-template-columns: 1fr 1fr; } } /* heel smalle telefoon: drie kolommen passen niet */
.plaatje {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 44px;
  padding: 6px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--vlak);
  color: var(--tekst);
  font: 500 .85rem/1.2 var(--letter);
  text-align: center;
  cursor: pointer;
}
.plaatje img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 5px; }
.plaatjeskeuze.twee .plaatje img { aspect-ratio: 3 / 2; }
.plaatje:hover { border-color: var(--accent); }
.plaatje:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.plaatje[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-zacht); box-shadow: inset 0 0 0 1px var(--accent); }
.aanpassen .melding { margin: 10px 0 0; }
.aanpassen-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.aanpassen-knoppen .knop { padding: 0 10px; }

/* Stap 3: ontwerpen. Telefoon: het 3D-beeld of de plattegrond (met een knop om te wisselen), daaronder één vraag. */
.kleur-aanbouw { background: var(--aanbouw); border: 1px solid var(--aanbouw-rand); }
/* De stippellijn in de plattegrond: waar de tuin van de buren waarschijnlijk begint */
.kleur-buurtuin { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed var(--drie-d-perceel); }
.beeld-wissel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 8px; border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; }
.wissel {
  min-height: 44px;
  border: 0;
  background: var(--vlak);
  color: var(--tekst);
  font: 600 .95rem var(--letter);
  cursor: pointer;
}
.wissel + .wissel { border-left: 1px solid var(--lijn); }
.wissel[aria-pressed="true"] { background: var(--accent); color: var(--accent-tekst); }
.wissel:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.ontwerp-paneel { position: relative; }
.ontwerp-beelden[data-toon="drie-d"] .ontwerp-plan, .ontwerp-beelden[data-toon="plan"] .ontwerp-drie-d { display: none; }
.ontwerp-plan {
  border-radius: var(--rand);
  overflow: hidden;
  border: 1px solid var(--lijn);
  background: #e7ebe3;
}
.ontwerp-plan svg { display: block; width: 100%; height: 100%; }
/* De maat groot in beeld, linksboven in het 3D-beeld */
.maatlabel {
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  padding: 4px 10px 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  line-height: 1.2;
  pointer-events: none;
}
.maatlabel strong { display: block; font-size: 1.35rem; }
.maatlabel span { font-size: .9rem; color: var(--tekst-zacht); }
.ontwerp .legenda { margin-top: 12px; }
.ontwerp-scherm {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--rand);
  background: var(--vlak);
}
.ontwerp-scherm .kaart-titel { margin-bottom: 8px; }
.ontwerp-scherm .kaart-tekst { margin-bottom: 12px; }
.kantkeuze { display: grid; gap: 8px; margin-bottom: 12px; }
.kant { display: flex; flex-direction: column; gap: 2px; }
.kant-naam { font-weight: 600; }
.kant-extra { font-size: .875rem; font-weight: 400; color: var(--tekst-zacht); }
.kant:disabled { opacity: .55; cursor: default; }
.kant:disabled:hover { border-color: var(--lijn); background: var(--vlak); }
.maat-samen { margin: 0 0 8px; font-weight: 600; }
.maatkiezer { padding: 10px 0; border-top: 1px solid var(--lijn); }
.maatkiezer-naam { display: block; font-weight: 600; margin-bottom: 6px; }
.maatkiezer-knoppen { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; }
.knop-plusmin { min-height: 52px; padding: 0; font-size: 1.6rem; line-height: 1; }
.maatkiezer-waarde { text-align: center; font-size: 1.35rem; font-weight: 700; }
.maatkiezer-uitleg { margin: 6px 0 0; color: var(--tekst-zacht); font-size: .9rem; }
.grensmelding {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--info-zacht);
  border-left: 4px solid var(--accent);
  font-size: .95rem;
}
/* Stap 3 en 4: telefoon: het 3D-beeld klein bovenaan en de vraag eronder. Beide blijven staan terwijl je door
   de keuzes scrolt, zodat je de vraag altijd kunt lezen en elke keuze meteen ziet. De kop van de pagina staat dan niet
   vast, anders blijft er te weinig ruimte over. Stap 4 heeft eigen knoppen, dus daar is de balk met Vorige en Volgende weg. */
body:has(.stap[data-stap="3"]:not([hidden])) .kop, body:has(.stap[data-stap="4"]:not([hidden])) .kop,
body:has(.stap[data-stap="5"]:not([hidden])) .kop { position: static; }
body:has(.stap[data-stap="4"]:not([hidden])) .stapknoppen { display: none; }
/* Stap 5 heeft ook eigen knoppen */
body:has(.stap[data-stap="5"]:not([hidden])) .stapknoppen { display: none; }
.beeld-en-vraag { display: flex; flex-direction: column; }
.beeld-kolom { display: contents; } /* op de telefoon: het beeld boven de vraag, de legenda en knoppen eronder */
.beeld-vast {
  order: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -6px;
  padding: 6px 6px 0;
  background: var(--vlak);
}
.vraag-kolom { order: 1; }
.beeld-kolom > .legenda, #ontwerp-knoppen-plek, #ontwerp-bronnen-plek, #uiterlijk-knoppen-plek, #uiterlijk-bronnen-plek { order: 2; }
.beeld-vast .drie-d-beeld, .beeld-vast .ontwerp-plan { height: min(56vw, 28svh); }
/* De vraag blijft direct onder het beeld staan. --beeld-hoogte zet app.js. */
.vraag-kop {
  position: sticky;
  top: var(--beeld-hoogte, 0);
  z-index: 4;
  margin: -14px -14px 8px;
  padding: 10px 14px 8px;
  border-radius: var(--rand) var(--rand) 0 0;
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}
.vraag-kop .kaart-titel { margin-bottom: 0; }
.uiterlijk-toelichting { margin: 4px 0 0; color: var(--tekst-zacht); font-size: .9rem; }
/* Bij de afwerking verandert het 3D-beeld niet: dan scrolt het beeld mee en blijft alleen de vraag bovenaan */
.uiterlijk[data-vraag="afwerking"] .beeld-vast { position: static; }
.uiterlijk[data-vraag="afwerking"] .vraag-kop { top: 0; }
.beeld-en-vraag .ontwerp-scherm { margin-top: 10px; }
.optielijst { display: grid; gap: 8px; }
.optie {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 8px 40px 8px 8px; /* rechts ruimte voor het vinkje */
  border: 2px solid var(--lijn);
  border-radius: 10px;
  background: var(--vlak);
  color: var(--tekst);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.optie img { display: block; width: 68px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.optie.zonder-plaatje { grid-template-columns: 1fr; padding: 10px 40px 10px 14px; }
.optie-naam { display: block; font-weight: 600; line-height: 1.3; }
.optie-uitleg { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.35; color: var(--tekst-zacht); }
/* De meerprijs bij een keuze in stap 4: "inbegrepen", "+ € 1.500" of "- € 1.000" */
.optie-prijs { display: block; margin-top: 4px; font-size: .9rem; font-weight: 600; line-height: 1.35; }
.uiterlijk-voorbeeld { margin: 10px 0 0; color: var(--tekst-zacht); font-size: .8rem; }
.optie-erbij-kop { display: block; margin-top: 6px; font-size: .875rem; font-weight: 600; }
.optie-erbij { margin: 2px 0 0; padding-left: 18px; font-size: .9rem; }
.optie:hover { border-color: var(--accent); }
.optie:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* De gekozen optie: blauwe rand, lichtblauw vlak en een vinkje rechtsboven, altijd op dezelfde plek */
.optie[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-zacht); box-shadow: inset 0 0 0 1px var(--accent); }
.optie[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-tekst);
  font-weight: 700;
  font-size: .85rem;
}
.uiterlijk .drie-d-uitleg { margin: 10px 0 0; color: var(--tekst-zacht); font-size: .9rem; }
/* Het overzicht "Jouw ontwerp": per onderdeel de naam, wat je koos en de knop Wijzig */
.overzicht { margin: 0; }
.overzicht-rij { padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.overzicht-rij:last-child { border-bottom: 0; }
.overzicht dt { font-size: .875rem; color: var(--tekst-zacht); }
.overzicht dd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 0; font-weight: 600; }
.overzicht .tekstknop { flex: none; min-height: 44px; margin: -12px 0; font-weight: 400; }

/* De vraag over een schuur op de plek van de aanbouw: valt op, want zonder antwoord kun je niet verder */
.schuurvraag {
  margin: 4px 0 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fdf3d6;
  border: 1px solid var(--aanbouw-rand);
}
.schuurvraag-tekst { margin: 0 0 10px; font-weight: 600; }
#schuur-antwoord { margin: 4px 0 10px; }
#schuur-antwoord .tekstknop { display: block; min-height: 40px; }
.plekkeuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plekkeuze .keuze { text-align: center; padding: 10px 6px; }
.plek-schuif { margin-top: 8px; }
.plek-schuif [aria-disabled="true"] { opacity: .4; }
.plek-waarde { font-size: 1rem; font-weight: 600; color: var(--tekst-zacht); }
/* Of je waarschijnlijk een vergunning nodig hebt: een korte zin onder de diepte */
.vergunning { margin: 8px 0 0; padding-left: 10px; border-left: 3px solid var(--lijn); font-size: .9rem; }
.aandacht {
  margin: 4px 0 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--vlak-2);
  border: 1px solid var(--lijn);
}
.aandacht-titel { margin: 0 0 4px; font-size: 1rem; }
.aandacht ul { margin: 0; padding-left: 18px; }
.aandacht li + li { margin-top: 6px; }
#scherm-maat .drie-d-uitleg { color: var(--tekst-zacht); font-size: .9rem; }

/* Keuzevraag woningtype */
.woningtype-keuze {
  margin: 10px 0 16px;
  padding: 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--rand);
  background: var(--vlak-2);
}
.keuzeknoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.keuzeknoppen .keuze { text-align: center; }
.keuze[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-zacht); box-shadow: inset 0 0 0 1px var(--accent); }

/* Vorige en Volgende. Telefoon: vast onderaan, binnen bereik van je duim. */
.stapknoppen {
  position: sticky;
  bottom: 0;
  background: var(--vlak);
  border-top: 1px solid var(--lijn);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.stapknoppen-binnen {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
/* Na "Wijzig" heet de linkerknop in stap 3 "Terug naar het overzicht": dan krijgt die knop meer ruimte */
.stapknoppen-binnen:has(#vorige.terug-overzicht) { grid-template-columns: 2fr 1fr; }

/* Stap 5: de prijsindicatie. Eén kolom, ook op de computer. Bovenaan het 3D-beeld klein. */
.indicatie-pagina, .indicatie-links, .indicatie-rechts { display: flex; flex-direction: column; gap: 14px; }
.indicatie-pagina { padding-bottom: 24px; }
.indicatie-beeld .drie-d-beeld { height: min(48vw, 200px); }
.indicatie-pagina .bronnen { margin-top: -8px; }
.indicatie-ontwerp { margin: 0; font-weight: 600; line-height: 1.4; }
.ontgrendel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--rand);
  background: var(--vlak);
}
.ontgrendel-tekst { margin: 0; line-height: 1.45; }
/* Een vinkje met tekst: het hele vlak is aan te tikken */
.vinkje { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 10px; }
.vinkje input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent); }
.vinkje label { min-height: 28px; padding-top: 2px; line-height: 1.4; cursor: pointer; }
.vinkje a { color: var(--accent); text-underline-offset: 3px; }
#privacy-fout { margin-top: -8px; } /* dicht onder het vinkje; de andere foutregels staan al onder hun veld */
.vertrouwen { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; color: var(--tekst-zacht); font-size: .925rem; }
.vertrouwen li { display: flex; align-items: center; gap: 8px; }
.vertrouwen li::before { content: "✓"; color: #1b6e2a; font-weight: 700; }
.melding .knop { margin-top: 10px; }
.indicatie {
  padding: 18px 16px;
  border-radius: var(--rand);
  background: var(--accent-zacht);
  border-left: 4px solid var(--accent);
}
.indicatie-bedrag { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.indicatie-bedrag:focus { outline: none; }
.indicatie-btw { margin: 2px 0 10px; font-weight: 600; color: var(--tekst-zacht); }
.indicatie-uitleg { margin: 0 0 14px; line-height: 1.45; }
.indicatie-basis { margin: 0 0 14px; }
.indicatie-basis summary { min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; cursor: pointer; list-style: none; }
.indicatie-basis summary::-webkit-details-marker { display: none; }
/* Een pijltje, net als bij "Bronnen": naar rechts als het dicht is, naar beneden als het open is */
.indicatie-basis summary::before { content: "▸"; font-size: .9em; transition: transform .15s; }
.indicatie-basis[open] summary::before { transform: rotate(90deg); }
/* "Maak mijn indicatie nauwkeuriger" past zo op één regel op een telefoon */
.indicatie .knop { padding: 0 10px; white-space: nowrap; }
.indicatie-basis summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.indicatie-regels { margin: 4px 0 0; }
.indicatie-regels div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lijn); }
.indicatie-regels dt { margin: 0; }
.indicatie-regels dd { margin: 0; white-space: nowrap; font-weight: 600; text-align: right; }
.indicatie-marge, .indicatie-voorbeeld { margin: 8px 0 0; color: var(--tekst-zacht); font-size: .875rem; line-height: 1.4; }
.indicatie-voorbeeld { margin: 0 0 14px; }
.indicatie-bijgewerkt { display: inline-block; margin: 0 0 10px; padding: 2px 10px; border-radius: 999px; background: var(--vlak); color: var(--accent); font-size: .875rem; font-weight: 600; }

/* Stap 7: opname aanvragen. Dezelfde indeling als stap 5. */
.opname-label { margin: 0 0 2px; font-weight: 600; color: var(--tekst-zacht); }
.opname-indicatie .indicatie-uitleg { margin: 0; }
.opname-gegevens { margin: 0; }
.opname-gegevens .veld { padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.niet-verplicht { font-weight: 400; color: var(--tekst-zacht); }
.opname-privacy { margin: 0; color: var(--tekst-zacht); font-size: .875rem; line-height: 1.4; }
.opname-privacy a { color: var(--accent); text-underline-offset: 3px; }
#opname-fout { margin: 0; }
/* Het veld tegen spam: buiten beeld, ook voor schermlezers */
.verstopt { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.opname-klaar { display: grid; gap: 12px; margin-bottom: 14px; }
.opname-klaar .melding { margin: 0; }
.bedankt { padding: 18px 16px; border-radius: var(--rand); background: var(--goed-zacht); border-left: 4px solid var(--goed); }
.bedankt p { margin: 6px 0 0; line-height: 1.45; }
.opname-samenvatting { padding: 16px; border: 1px solid var(--lijn); border-radius: var(--rand); background: var(--vlak); }

/* Stap 6: Jouw situatie. Eén vraag per scherm, grote knoppen. Op de computer een rustige kolom in het midden. */
.situatie { display: flex; flex-direction: column; gap: 14px; max-width: 600px; margin: 0 auto; padding-bottom: 24px; }
.stap[data-stap="6"] h1 { max-width: 600px; margin-inline: auto; } /* de titel boven de kolom */
.situatie-vraag { display: flex; flex-direction: column; }
.situatie-vraag .intro { margin-bottom: 14px; }
.situatie-uitleg { margin: 0 0 14px; color: var(--tekst-zacht); line-height: 1.45; }
.situatie-keuzes { display: grid; gap: 8px; }
/* Een gekozen antwoord krijgt een vinkje rechts, net als de keuzes in stap 4 */
.situatie-keuzes .keuze { position: relative; padding-right: 44px; }
.situatie-keuzes .keuze[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-tekst);
  font-weight: 700;
  font-size: .85rem;
}
.situatie .melding { margin-top: 12px; }
.situatie-vraag .tekstknop { margin-top: 8px; }
/* Stap 6 heeft eigen knoppen: geen balk met Vorige en Volgende */
body:has(.stap[data-stap="6"]:not([hidden])) .stapknoppen { display: none; }

/* Computer en tablet */
@media (min-width: 768px) {
  .kop-binnen { padding: 14px 24px 0; }
  .stappenbalk { padding: 10px 24px 0; }
  .stappenbalk-tekst {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .stappen { gap: 0; }
  .stappen button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 6px 12px;
    border-bottom: 3px solid transparent;
    font-size: .875rem;
    text-align: left;
  }
  .stappen button::before { display: none; }
  .stappen .nummer {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--lijn);
    font-size: .8rem;
    font-weight: 600;
  }
  .stappen .label { display: inline; line-height: 1.2; }
  .stappen button:not(:disabled):hover { color: var(--tekst); }
  .stappen button.gedaan .nummer {
    background: var(--accent-zacht);
    color: var(--accent);
    border-color: transparent;
  }
  .stappen button[aria-current="step"] {
    color: var(--tekst);
    font-weight: 600;
    border-bottom-color: var(--accent);
  }
  .stappen button[aria-current="step"] .nummer {
    background: var(--accent);
    color: var(--accent-tekst);
    border-color: var(--accent);
  }

  .inhoud { flex: none; padding: 32px 24px 24px; }
  .stap { padding: 32px; }
  .stap h1 { font-size: 1.85rem; }
  .adres {
    grid-template-columns: minmax(0, 12rem) minmax(0, 18rem) auto;
    align-items: start;
  }
  .adres .knop { margin-top: 30px; width: auto; justify-self: start; }
  .adres-keuze, .adres-bevestig { max-width: 36rem; }
  .adres-keuze .knop-breed { width: auto; }
  .knoppenrij { display: flex; flex-wrap: wrap; }
  #woning-feiten, .persoonlijk, .stopmelding { max-width: 40rem; }
  .feitenlijst li { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 16px; }
  .feitenlijst .tekstknop { flex-basis: 100%; }
  .drie-d, .woningtype-keuze { max-width: none; }
  .drie-d-beeld { height: min(56vw, 520px); }
  /* Net als op de telefoon: de knop eronder blijft zichtbaar zonder te scrollen. 320 px: de kop, de titel en de knop samen. */
  .drie-d-beeld { height: min(56vw, 520px, max(260px, calc(100svh - 320px))); }
  .keuzeknoppen { grid-template-columns: repeat(4, auto); justify-content: start; }
  .bron { text-align: right; }
  .persoonlijk .knop-breed { width: auto; }
  /* Stap 3 en 4 op de computer: het 3D-beeld en de plattegrond links onder elkaar, en die blijven staan.
     De vraag staat rechts. */
  .beeld-wissel { display: none; }
  .ontwerp-beelden[data-toon] .ontwerp-plan, .ontwerp-beelden[data-toon] .ontwerp-drie-d { display: block; }
  .ontwerp-scherm .knop-breed { width: auto; }
  .beeld-en-vraag { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .beeld-kolom { display: block; position: sticky; top: 12px; }
  .beeld-vast { position: static; margin: 0; padding: 0; }
  .ontwerp-beelden { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .beeld-vast .drie-d-beeld { height: clamp(220px, 40svh, 380px); }
  /* Stap 5: het 3D-beeld links (blijft staan als je scrolt), het formulier en de indicatie rechts */
  .indicatie-pagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .indicatie-links { position: sticky; top: 16px; }
  .indicatie-beeld .drie-d-beeld { height: clamp(260px, 50svh, 420px); }
  .indicatie-bedrag { font-size: 1.75rem; }
  .beeld-vast .ontwerp-plan { height: clamp(150px, 25svh, 260px); }
  .beeld-en-vraag .ontwerp-scherm { margin-top: 0; }
  .vraag-kop, .uiterlijk[data-vraag="afwerking"] .vraag-kop { position: static; }

  .stapknoppen {
    position: static;
    background: transparent;
    border-top: 0;
    padding: 0 24px 40px;
  }
  .stapknoppen-binnen { display: flex; justify-content: space-between; }
  .stapknoppen .knop { min-width: 140px; }
}