/* =====================================================================
   Publiek aanmeldpunt voor de demo (BIZ-6)
   Los van style.css, want dat is de beheerstijl van dit platform. Deze
   ene pagina is het eerste wat een prospect van SamenVvE ziet, dus hij
   draagt de huisstijl van het portaal: navy, oker en creme, met Lora
   voor de koppen en Instrument Sans voor de tekst. Fonts staan hier
   zelf gehost, net als in de app: geen verzoek naar Google (AVG).
   ===================================================================== */

@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-var.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrumentsans-var.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* Zonder deze reset steekt alles met width:100% en padding (knop, velden)
   buiten zijn kaart: style.css van het beheerplatform laadt hier niet mee. */
.demo-body *, .demo-body *::before, .demo-body *::after { box-sizing: border-box; }

.demo-body {
  --navy: #1c2940;
  --navy-2: #243352;
  --ink: #26303f;
  --ink-soft: #5a6474;
  --creme: #f6f3ec;
  --line: #e6e0d4;
  --oker: #c98a2b;
  --oker-dark: #976417;
  --oker-soft: #fbf1de;
  --groen: #1d7a52;
  --groen-soft: #e7f4ee;
  --rood: #b4322a;
  --rood-soft: #fbeae8;

  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--creme); color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* De wijk onderaan het scherm, net als in het portaal: vast element in
   plaats van een achtergrond, want iOS rendert dat laatste onbetrouwbaar. */
.demo-body::before {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 300px;
  z-index: 0; pointer-events: none;
  background: url('/assets/img/wijk-achtergrond-kleur.svg') bottom center / 1400px auto repeat-x;
}
@media (max-width: 880px) {
  .demo-body::before { background-size: 1000px auto; height: 220px; }
}

.demo-kop {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 11px;
  padding: 22px 24px; max-width: 720px; width: 100%; margin: 0 auto;
}
.demo-kop img { width: 34px; height: 34px; border-radius: 9px; }
.demo-merk { font-family: 'Lora', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--navy); }
.demo-merk b { color: var(--oker-dark); font-weight: 700; }

.demo-main {
  position: relative; z-index: 1; flex: 1 0 auto;
  width: 100%; max-width: 720px; margin: 0 auto; padding: 8px 24px 56px;
}

.demo-kaart {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 34px 36px;
  box-shadow: 0 2px 4px rgba(28,41,64,.05), 0 20px 46px -18px rgba(28,41,64,.22);
}
@media (max-width: 560px) { .demo-kaart { padding: 24px 20px; } }

.demo-kaart h1 {
  font-family: 'Lora', Georgia, serif; font-weight: 600;
  font-size: clamp(26px, 5vw, 32px); line-height: 1.15; letter-spacing: -.01em;
  color: var(--navy); margin: 0 0 8px;
}
.demo-lead { color: var(--ink-soft); margin: 0 0 22px; max-width: 46ch; }

/* Wat je in de demo kunt doen: drie regels met een okeren vinkje. */
.demo-punten { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.demo-punten li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.demo-punten svg { flex: none; margin-top: 3px; color: var(--groen); }

.demo-veld { margin-bottom: 15px; }
.demo-veld label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.demo-veld input {
  width: 100%; font: inherit; font-size: 16px; /* 16px: iOS zoomt anders in bij focus */
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
}
.demo-veld input:focus { outline: 2px solid var(--oker); outline-offset: 1px; border-color: var(--oker); }

/* Navy zoals elke primaire knop in het portaal; oker blijft accent en wordt
   nooit een heel knopvlak (huisstijlafspraak). Geen onderstreping: dit is
   een knop, ook als het element een link is. */
.demo-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; font: inherit; font-size: 15.5px; font-weight: 600;
  padding: 14px 22px; border: 1.5px solid transparent; border-radius: 10px;
  background: var(--navy); color: #fff; cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .12s;
}
.demo-knop:hover { background: var(--navy-2); text-decoration: none; }
.demo-knop:active { transform: translateY(1px); }

.demo-melding {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: 12px; padding: 16px 18px; margin-bottom: 22px;
}
.demo-melding .ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.demo-melding strong { display: block; font-size: 16px; margin-bottom: 3px; }
/* Alleen de kop draagt de signaalkleur; een hele alinea in donkergroen of
   donkerrood leest als een lap gekleurde tekst in plaats van als bericht. */
.demo-melding p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.demo-melding.ok { background: var(--groen-soft); color: #17593c; }
.demo-melding.ok .ic { background: var(--groen); color: #fff; }
.demo-melding.let-op { background: var(--oker-soft); color: #7d5600; }
.demo-melding.let-op .ic { background: var(--oker); color: #fff; }
.demo-melding.fout { background: var(--rood-soft); color: #8f2820; }
.demo-melding.fout .ic { background: var(--rood); color: #fff; }

/* Kaartje met het adres van de demo, na een geslaagde aanvraag. */
.demo-adres {
  background: var(--creme); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 20px;
}
.demo-adres .label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.demo-adres .adres { font-family: 'Lora', Georgia, serif; font-size: 21px; font-weight: 600; color: var(--navy); margin: 3px 0 4px; overflow-wrap: anywhere; }
.demo-adres .toelichting { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; }

.demo-voet { font-size: 13px; color: var(--ink-soft); margin: 20px 0 0; }
.demo-voet a { color: var(--oker-dark); font-weight: 600; }

.demo-slot {
  position: relative; z-index: 1; text-align: center;
  font-size: 12.5px; color: var(--ink-soft); padding: 0 24px 26px;
}
.demo-slot a { color: var(--ink-soft); }

/* Honeypot: mensen zien dit veld niet, bots vullen het in. */
.niet-invullen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }