/* ═══════════════════════════════════════════════════════════════════════
   Vaarmeister - gedeelde stijl

   Wit en diepblauw, de kleuren van het app-icoon. Geen gekleurde ondergrond
   en geen rasterlijnen: die maakten de achtergrond onrustig en pasten niet
   bij het merk (Job, 15-08: "die achtergrond alles is lelijk geworden").

   Wat bewust NIET terugkomt, want dat verraadt een AI-sjabloon:
     - verloop-achtergronden en verloopknoppen
     - gekleurde icoontegels in een driekoloms kaartenraster
     - kaarten die omhoog wippen bij hover
     - gloeischaduwen en een backdrop-blur-balk
     - telefoonframes om screenshots (0/10 topstudio's doet dat)
     - genummerde markeringen 01/02/03

   Kleuren komen uit het app-icoon en Theme.swift, niet uit een palet-generator.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Uit het icoon gemeten */
  --lucht:#38bcec;
  --zee:#0080c7;
  --accent:#0284c7;
  --marine:#172451;
  --nacht:#0b1b3a;

  /* Ondergrond: wit, met een lichte blauwtint uit het app-icoon */
  --papier:#ffffff;
  --papier-diep:#f1f7fb;

  --inkt:#111827;
  --grijs:#5b6472;
  --lijn:#e3e8ef;
  --wit:#ffffff;

  --max:1180px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Archivo,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  background:var(--papier);color:var(--inkt);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}


/* ── Typografie ─────────────────────────────────────────────────────── */
h1,h2,h3{font-weight:800;font-stretch:112%;letter-spacing:-.028em;line-height:1.08}
h1{font-size:clamp(36px,5.6vw,58px)}
h2{font-size:clamp(27px,3.6vw,38px)}
h3{font-size:20px;letter-spacing:-.02em;font-stretch:105%}

/* Kaartlabel: hoe een zeekaart z'n vakken benoemt. */
.kaartlabel{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:11px;margin-bottom:18px;
}
.kaartlabel::after{content:"";flex:1;height:1px;background:var(--lijn);max-width:120px}
.op-donker .kaartlabel{color:var(--lucht)}
.op-donker .kaartlabel::after{background:rgba(255,255,255,.18)}

.inleiding{font-size:18px;color:var(--grijs);max-width:62ch;margin-top:16px}
.op-donker .inleiding{color:rgba(255,255,255,.72)}

/* ── Knoppen: plat, rechte hoeken, geen verloop en geen gloed ───────── */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border:0;border-radius:4px;
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;
  background:var(--accent);color:var(--wit);transition:background .15s;
}
.knop:hover{background:#036ba3}
.knop-rand{
  background:transparent;color:var(--inkt);
  box-shadow:inset 0 0 0 1.5px var(--inkt);
}
.knop-rand:hover{background:var(--inkt);color:var(--papier)}
.knop-klein{min-height:42px;padding:0 18px;font-size:15px}

/* ── Kop van de pagina ──────────────────────────────────────────────── */
header{background:var(--nacht);border-bottom:1px solid rgba(255,255,255,.1)}
nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--wit)}
.merk img{width:34px;height:34px;border-radius:8px}
.merk b{font-size:19px;font-weight:800;font-stretch:108%;letter-spacing:-.02em}
.nav-links{display:none;gap:30px}
.nav-links a{color:rgba(255,255,255,.7);text-decoration:none;font-size:15px;font-weight:500}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--wit)}
@media(min-width:900px){.nav-links{display:flex}}

/* ── Secties ────────────────────────────────────────────────────────── */
section{padding:84px 0}
.donker{background:var(--nacht);color:rgba(255,255,255,.82)}
.donker h2,.donker h3{color:var(--wit)}
.blauw{background:var(--marine);color:rgba(255,255,255,.82)}
.blauw h2,.blauw h3{color:var(--wit)}

/* ── Genummerde lijst in kaartstijl: rijen met een fijne lijn ertussen ─ */
.regels{border-top:1px solid var(--lijn)}
.regel{
  display:grid;gap:6px 28px;padding:26px 0;border-bottom:1px solid var(--lijn);
  align-items:start;
}
@media(min-width:760px){.regel{grid-template-columns:64px 1fr 1.15fr}}
.regel .nr{font-family:var(--mono);font-size:13px;color:var(--accent);padding-top:4px;letter-spacing:.06em}
.regel h3{margin:0}
.regel p{color:var(--grijs);font-size:16px}
.donker .regels,.donker .regel{border-color:rgba(255,255,255,.14)}
.donker .regel p{color:rgba(255,255,255,.68)}
.blauw .regels,.blauw .regel{border-color:rgba(255,255,255,.16)}
.blauw .regel p{color:rgba(255,255,255,.7)}

/* ── Databalk: waarden in monospace, zoals een kaartlegenda ─────────── */
.databalk{
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  background:var(--papier-diep);
}
.databalk ul{list-style:none;display:grid;gap:0}
@media(min-width:700px){.databalk ul{grid-template-columns:repeat(4,1fr)}}
.databalk li{padding:22px 24px;border-right:1px solid var(--lijn)}
.databalk li:last-child{border-right:0}
@media(max-width:699px){.databalk li{border-right:0;border-bottom:1px solid var(--lijn)}
  .databalk li:last-child{border-bottom:0}}
.databalk .waarde{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--inkt);display:block}
.databalk .wat{font-size:13.5px;color:var(--grijs);margin-top:3px;display:block}

/* ── Schermopname: groot en kaal, geen telefoonframe ────────────────── */
.scherm{border:1px solid var(--lijn);background:var(--wit);width:100%}
.donker .scherm,.blauw .scherm{border-color:rgba(255,255,255,.2)}
.bijschrift{font-family:var(--mono);font-size:12px;color:var(--grijs);margin-top:12px;letter-spacing:.04em}
.donker .bijschrift,.blauw .bijschrift{color:rgba(255,255,255,.55)}

.duo{display:grid;gap:44px;align-items:center}
@media(min-width:940px){.duo{grid-template-columns:1fr .85fr;gap:64px}}

/* ── Wachtlijst ─────────────────────────────────────────────────────── */
.vangst{max-width:490px}
.veldrij{display:flex;flex-direction:column;gap:10px}
@media(min-width:540px){.veldrij{flex-direction:row}}
.veldrij input{
  flex:1;min-height:52px;padding:0 16px;border-radius:4px;
  border:1.5px solid var(--lijn);background:var(--wit);color:var(--inkt);
  font:inherit;font-size:16px;
}
.veldrij input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.op-donker .veldrij input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);color:var(--wit)}
.op-donker .veldrij input::placeholder{color:rgba(255,255,255,.55)}
.klein{font-size:13.5px;color:var(--grijs);margin-top:12px}
.op-donker .klein{color:rgba(255,255,255,.6)}
.melding{margin-top:12px;font-size:15px;font-weight:600;min-height:22px}
.melding.goed{color:#15803d}
.melding.fout{color:#b91c1c}
.op-donker .melding.goed{color:#86efac}
.op-donker .melding.fout{color:#fca5a5}

/* ── Veelgestelde vragen ────────────────────────────────────────────── */
.vraag{border-bottom:1px solid var(--lijn);padding:26px 0}
.vraag h3{margin-bottom:10px}
.vraag p{color:var(--grijs);font-size:16.5px;max-width:70ch}
.vraag p + p{margin-top:12px}

/* ── Voettekst ──────────────────────────────────────────────────────── */
footer{background:var(--nacht);color:rgba(255,255,255,.6);padding:48px 0 36px;font-size:14.5px}
.voet-top{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center;
  padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.voet-links{display:flex;flex-wrap:wrap;gap:24px}
footer a{text-decoration:none}
footer a:hover{color:var(--wit)}
.voet-onder{padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em}

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