:root {
  --kleur-accent: #1f6f50;
  --kleur-tekst: #222;
  --kleur-rand: #d8d8d8;
  --kleur-achtergrond: #f7f7f5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--kleur-tekst);
  background: var(--kleur-achtergrond);
  line-height: 1.5;
}

.formulier-pagina,
.melding {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

h1 {
  font-size: 1.6rem;
  color: var(--kleur-tekst);
  margin-bottom: 4px;
}

.intro {
  color: #555;
  margin-top: 0;
  margin-bottom: 24px;
}

.veld {
  background: #fff;
  border: 1px solid var(--kleur-rand);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.veld label {
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
}

.veld input[type="text"],
.veld input[type="email"] {
  width: 100%;
  padding: 8px 10px;
  font-size: 1rem;
  border: 1px solid var(--kleur-rand);
  border-radius: 6px;
}

/* Type "toelichting" (tabblad "Vragen"): puur informatieve leestekst, geen
   vraag. Bewust NIET de witte kaart-met-rand van .veld — anders lijkt het
   nog steeds een vraag die "ingevuld" moet worden. In plaats daarvan een
   lichte, subtiele achtergrond zonder rand, met de tekst iets minder
   nadrukkelijk (kleiner, grijzer) dan een echte vraag. */
.veld-toelichting {
  background: transparent;
  border: none;
  padding: 4px 2px 14px;
}

.veld-toelichting .toelichting-tekst {
  margin: 0;
  color: #555;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.5;
}

.opties-rij {
  display: flex;
  gap: 20px;
}

.opties-rij span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.opties-rij label,
.meerkeuze-optie label {
  font-weight: normal;
  display: inline;
  margin: 0;
}

.meerkeuze-optie {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.prijs-preview {
  background: #fff;
  border: 2px solid var(--kleur-accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 20px 0;
}

.prijs-preview-regels div {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: #555;
}

.prijs-preview-totaal {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--kleur-rand);
  font-size: 1.2rem;
}

button[type="submit"] {
  background: var(--kleur-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 28px;
  font-size: 1.05rem;
  cursor: pointer;
}

button[type="submit"]:hover {
  background: #175a41;
}

.melding {
  text-align: center;
}

.bedankt .prijsregels {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.bedankt .prijsregels li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: #555;
}

.bedankt .totaal {
  font-size: 1.3rem;
}

.bedankt .code {
  color: #777;
  font-size: 0.9rem;
}

.demo-paneel {
  background: #fff8e1;
  border: 2px dashed #c9a227;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 20px 0;
}

.demo-paneel button[type="submit"] {
  background: #c9a227;
  margin-top: 8px;
}

.demo-paneel button[type="submit"]:hover {
  background: #a5820a;
}

.header-afbeelding img,
.footer-afbeelding img,
.vraag-afbeelding {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 16px;
  border-radius: 8px;
}

.header-afbeelding:empty,
.footer-afbeelding:empty {
  margin: 0;
}