:root {
  --blauw: #2140A8;
  --blauw-donker: #16307F;
  --blauw-zacht: #E6ECFA;
  --inkt: #16211C;
  --tekst-2: #3A4640;
  --tekst-3: #55615B;
  --grond: #F4F5F2;
  --vlak: #FFFFFF;
  --vlak-2: #FAFBF9;
  --lijn: #E1E4DE;
  --lijn-2: #C9D0CA;
  --rood: #A11D14;
  --rood-zacht: #FBE9E7;
  --oranje: #8A4B00;
  --oranje-zacht: #FFF1DD;
  --grijs-zacht: #EEF0EC;
  --groen: #1D6B3A;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--blauw); }
a:hover { color: var(--blauw-donker); }
img, svg { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* Kop */
.kop { background: var(--vlak); border-bottom: 1px solid var(--lijn); }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--inkt); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.kop nav { display: flex; gap: 20px; font-size: 15px; font-weight: 500; }

/* Hero */
.hero .wrap { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 64px; padding-bottom: 56px; }
.hero-tekst { flex: 1 1 400px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.label { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--blauw); background: var(--blauw-zacht); padding: 6px 12px; border-radius: 999px; }
h1 { margin: 0; font-size: 48px; line-height: 1.08; letter-spacing: -0.02em; }
.intro { margin: 0; font-size: 19px; color: var(--tekst-2); max-width: 540px; }
h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }
h3 { margin: 0; font-size: 19px; }

/* Formulier */
#formulier-thuis { max-width: 540px; }
form#wachtlijst { display: flex; flex-direction: column; gap: 10px; }
form#wachtlijst label { font-weight: 600; font-size: 15px; }
.rij { display: flex; flex-wrap: wrap; gap: 10px; }
input[type=email] {
  flex: 1 1 240px; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--inkt);
  background: var(--vlak); border: 1px solid var(--lijn-2); border-radius: 10px;
}
input[type=email]:focus { outline: 3px solid var(--blauw-zacht); border-color: var(--blauw); }
.knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px;
  font: inherit; font-weight: 600; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
  background: var(--inkt); color: #fff;
}
.knop:hover { background: #26352E; color: #fff; }
.knop:disabled { opacity: .6; cursor: wait; }
.knop.blauw { background: var(--blauw); }
.knop.blauw:hover { background: var(--blauw-donker); }
.knop.licht { background: var(--vlak); color: var(--inkt); border: 1px solid var(--lijn-2); }
.knop.licht:hover { background: var(--vlak-2); }
.klein { margin: 0; font-size: 13px; color: var(--tekst-3); }
.melding { margin: 0; font-size: 15px; min-height: 1.5em; }
.melding.goed { color: var(--groen); font-weight: 600; }
.melding.fout { color: var(--rood); }
.verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Voorbeelduitslag */
.voorbeeld { flex: 1 1 400px; min-width: 0; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(22,33,28,.06); display: flex; flex-direction: column; gap: 14px; }
.voorbeeld-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.voorbeeld-kop strong { font-size: 17px; }
.voorbeeld ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.voorbeeld li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--lijn); border-radius: 10px; }
.voorbeeld li div { min-width: 0; }
.voorbeeld li b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.voorbeeld li span.uitleg { font-size: 14px; color: var(--tekst-2); }
.status { flex: none; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.status.rood { background: var(--rood-zacht); color: var(--rood); }
.status.oranje { background: var(--oranje-zacht); color: var(--oranje); }
.status.grijs { background: var(--grijs-zacht); color: var(--tekst-3); }

/* Secties */
.band { background: var(--vlak); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.sectie { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.band .kaart { background: var(--vlak); }
.kaart p { margin: 0; color: var(--tekst-2); }
.getal { font-family: "IBM Plex Mono", monospace; font-size: 40px; font-weight: 500; line-height: 1.1; }
.getal.rood { color: var(--rood); }
.bron { font-size: 13px; color: var(--tekst-3) !important; }
.stap { width: 36px; height: 36px; border-radius: 999px; background: var(--blauw-zacht); color: var(--blauw); font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Prijzen */
.prijzen .kaart { gap: 14px; }
.prijzen .kaart.uitgelicht { border: 2px solid var(--blauw); }
.prijs { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.prijs small { font-size: 16px; font-weight: 500; color: var(--tekst-3); letter-spacing: 0; }
.prijzen ul { margin: 0; padding-left: 20px; color: var(--tekst-2); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tag { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--blauw); background: var(--blauw-zacht); padding: 3px 10px; border-radius: 999px; }

/* Vragen */
.vragen { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
details { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 18px 20px; }
summary { font-weight: 600; cursor: pointer; }
details p { margin: 12px 0 0; color: var(--tekst-2); }

/* Venster */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(22,33,28,.25); color: var(--inkt); }
dialog::backdrop { background: rgba(22,33,28,.45); }
.venster { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.venster-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sluit { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--tekst-3); padding: 4px 8px; min-width: 44px; min-height: 44px; }

/* Voet */
.voet { border-top: 1px solid var(--lijn); background: var(--vlak); }
.voet .wrap { padding-top: 24px; padding-bottom: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--tekst-3); }
.voet nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* Privacypagina */
.tekstpagina { max-width: 760px; padding-top: 48px; padding-bottom: 64px; }
.tekstpagina h1 { font-size: 36px; margin-bottom: 8px; }
.tekstpagina h2 { font-size: 21px; margin-top: 32px; margin-bottom: 8px; }
.tekstpagina p, .tekstpagina li { color: var(--tekst-2); }
.ontbreekt { color: var(--rood) !important; font-weight: 600; }


/* Homepage: knop naar de check (alleen als de check online is) */
.live-knoppen { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 540px; }
.live-knoppen[hidden] { display: none; }

/* Klantenlijst-check */
.check-kop { padding-top: 48px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 14px; }
.check-kop > * { max-width: 760px; }
.check-kaart { max-width: 760px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 1px 2px rgba(22,33,28,.06); }
.dropzone { border: 2px dashed #B9C2BC; border-radius: 12px; padding: 28px 20px; background: var(--vlak-2); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.dropzone:hover, .dropzone.sleep { border-color: var(--blauw); background: var(--blauw-zacht); }
.dropzone.gekozen { border-style: solid; border-color: var(--blauw); }
.dropzone:focus-within { outline: 3px solid var(--blauw-zacht); }
.dz-titel { font-weight: 600; font-size: 18px; overflow-wrap: anywhere; }
.dz-knop { pointer-events: none; }
.verborgen-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.of { display: flex; align-items: center; gap: 12px; color: var(--tekst-3); font-size: 14px; }
.of span { flex: 1; height: 1px; background: var(--lijn); }
.plakken { display: flex; flex-direction: column; gap: 8px; }
.plakken label { font-weight: 600; font-size: 15px; }
textarea { font: inherit; font-size: 15px; padding: 12px; border: 1px solid var(--lijn-2); border-radius: 10px; resize: vertical; color: var(--inkt); background: var(--vlak); }
textarea:focus { outline: 3px solid var(--blauw-zacht); border-color: var(--blauw); }
.knop.groot { min-height: 52px; font-size: 17px; }

.uitslag { padding-top: 40px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 18px; }
.uitslag > * { max-width: 808px; width: 100%; }
.uitslag > .knop { width: auto; align-self: flex-start; }
.uitslag[hidden] { display: none; }
.uitslag-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tegel { border-radius: 12px; padding: 16px; border: 1px solid var(--lijn); background: var(--vlak); font-size: 14px; color: var(--tekst-2); }
.tegel .getal { font-family: "IBM Plex Mono", monospace; font-size: 32px; font-weight: 500; line-height: 1.1; color: var(--inkt); }
.tegel.rood { background: var(--rood-zacht); border-color: #F2C9C4; }
.tegel.rood .getal { color: var(--rood); }
.tegel.oranje { background: var(--oranje-zacht); border-color: #F3D9B0; }
.tegel.oranje .getal { color: var(--oranje); }
.lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.regel { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; }
.regel.rood { border-left: 4px solid var(--rood); }
.regel.oranje { border-left: 4px solid #D98E2B; }
.regel.leeg { color: var(--groen); font-weight: 600; }
.regel-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.regel-tekst b { overflow-wrap: anywhere; }
.regel-tekst .sub { font-size: 13px; color: var(--tekst-3); }
.regel-tekst .uitleg { font-size: 14px; color: var(--tekst-2); }
.cta { margin-top: 12px; border: 2px solid var(--blauw); }
.cta form { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 640px) {
  .check-kop { padding-top: 32px; }
  .check-kaart { padding: 18px; }
  .tegels { grid-template-columns: 1fr; }
  .tegel { display: flex; align-items: baseline; gap: 12px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hero .wrap { padding-top: 36px; padding-bottom: 40px; gap: 32px; }
  h1 { font-size: 34px; }
  .intro { font-size: 17px; }
  .kop nav { display: none; }
  .sectie { padding-top: 40px; padding-bottom: 40px; }
  .knop { width: 100%; }
  .venster { padding: 20px; }
}