/* opzoeken.css — consumenten-opzoekpagina's (/opzoeken/*)
   Vriendelijker dan de platform-huisstijl: grote invoer, kaartresultaten,
   direct antwoord. Hergebruikt wel de kleurtokens en typografie. */

.oz{max-width:920px; margin:0 auto; padding:48px 24px 64px}

/* — kop + invoer — */
.oz-kicker{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-blue)}
.oz h1{font-family:var(--font-heading); font-size:clamp(30px,4.6vw,44px);
  line-height:1.12; letter-spacing:-.02em; color:var(--color-navy); margin:10px 0 0}
.oz-intro{font-size:17px; line-height:1.6; color:var(--color-text-muted);
  max-width:60ch; margin:14px 0 0}
.oz-zoek{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;
  background:var(--color-surface); border:1px solid var(--color-divider);
  border-radius:16px; padding:14px; box-shadow:0 14px 40px rgba(9,29,51,.08)}
.oz-zoek .velden{display:flex; gap:10px; flex:1; flex-wrap:wrap; min-width:0}
.oz-zoek label{display:flex; flex-direction:column; gap:5px; flex:1; min-width:130px}
.oz-zoek label span{font-size:12px; font-weight:600; color:var(--color-text-muted)}
.oz-zoek input{font:inherit; font-size:17px; padding:11px 14px;
  border:1px solid #b9c6d4; border-radius:10px; background:#fff;
  color:var(--color-text); min-width:0}
.oz-zoek input:focus{outline:none; border-color:var(--color-blue);
  box-shadow:0 0 0 3px rgba(0,123,199,.14)}
.oz-zoek input.mono{font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.06em}
.oz-knop{font:inherit; font-size:16px; font-weight:700; color:#fff;
  background:var(--color-navy); border:none; border-radius:12px;
  padding:12px 26px; cursor:pointer; align-self:flex-end; white-space:nowrap}
.oz-knop:hover{background:var(--color-blue)}
.oz-knop:disabled{opacity:.55; cursor:wait}
.oz-hint{font-size:13px; color:var(--color-text-muted); margin-top:10px}
.oz-hint code{font-family:var(--font-mono); background:var(--color-surface-2);
  border-radius:5px; padding:1px 6px; font-size:12px}

/* — resultaat — */
.oz-resultaat{margin-top:28px}
.oz-status{font-size:14px; color:var(--color-text-muted); padding:12px 0}
.oz-fout{background:rgba(226,106,99,.08); border:1px solid rgba(226,106,99,.3);
  border-radius:12px; padding:14px 18px; font-size:14.5px; color:#9c4a44}
.oz-kaart{background:var(--color-surface); border:1px solid var(--color-divider);
  border-radius:16px; overflow:hidden; box-shadow:0 14px 40px rgba(9,29,51,.07)}
.oz-kaart-kop{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:18px 22px 14px}
.oz-kaart-titel{font-family:var(--font-heading); font-size:22px; font-weight:700;
  color:var(--color-navy)}
.oz-kaart-sub{font-size:14px; color:var(--color-text-muted)}
.oz-chip{display:inline-block; font-family:var(--font-mono); font-size:11.5px;
  border-radius:99px; padding:3px 11px; white-space:nowrap}
.oz-chip.afm{background:rgba(0,123,199,.12); color:var(--color-blue)}
.oz-chip.dnb{background:rgba(21,66,115,.12); color:var(--color-navy)}
.oz-chip.anbi{background:rgba(63,150,96,.12); color:#2e7d46}
.oz-chip.neutraal{background:var(--color-surface-2); color:var(--color-text-muted)}
.oz-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:0; border-top:1px solid var(--color-divider)}
.oz-rij{padding:12px 22px; border-top:1px solid var(--color-divider);
  display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.oz-grid .oz-rij{border-top:1px solid var(--color-divider)}
.oz-grid .oz-rij:nth-child(-n+2){border-top:0}
.oz-rij b{font-size:12px; font-weight:600; color:var(--color-text-muted)}
.oz-rij span{font-size:15px; color:var(--color-text); text-align:right;
  overflow-wrap:anywhere}
.oz-rij span.mono{font-family:var(--font-mono); font-size:14px}
.oz-bron{padding:12px 22px 16px; border-top:1px solid var(--color-divider);
  font-size:12.5px; color:var(--color-text-muted); line-height:1.6}
.oz-bron a{color:var(--color-blue)}

/* — kentekenplaat — */
.oz-plaat{background:#f7d84b; color:#1a1a1a; border:2px solid #1a1a1a;
  border-radius:10px; padding:12px 20px; font-family:var(--font-mono);
  font-size:clamp(26px,5vw,38px); font-weight:800; letter-spacing:.14em;
  display:inline-block; line-height:1.2}
.oz-plaat small{display:block; font-size:10px; font-weight:600; letter-spacing:.2em;
  color:#5c5311; margin-bottom:2px; font-family:var(--font-body)}

/* — energielabel — */
.oz-label{display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; border-radius:8px; color:#fff;
  font-family:var(--font-mono); font-weight:800; font-size:16px}
.oz-label.a{background:#2e8b57}.oz-label.b{background:#7bb661}
.oz-label.c{background:#c9c94e; color:#3a3a12}.oz-label.d{background:#e0a63c}
.oz-label.e{background:#dd8442}.oz-label.f{background:#d46a5a}.oz-label.g{background:#c05046}

/* — waardes (WOZ) — */
.oz-groot{font-family:var(--font-heading); font-size:clamp(32px,5vw,46px);
  font-weight:700; color:var(--color-navy); letter-spacing:-.02em}
.oz-groot small{font-size:16px; color:var(--color-text-muted); font-weight:400}
.oz-balk{height:12px; border-radius:99px; background:var(--color-surface-2);
  position:relative; margin:10px 0 4px; overflow:hidden}
.oz-balk i{position:absolute; inset:0 auto 0 0; border-radius:99px;
  background:var(--color-blue)}

/* — funnel: dit is een API-call — */
.oz-api{margin-top:36px; border:1px solid var(--color-divider);
  border-radius:16px; overflow:hidden; background:var(--color-surface)}
.oz-api-kop{padding:14px 20px; border-bottom:1px solid var(--color-divider);
  font-weight:600; font-size:14.5px; color:var(--color-navy)}
.oz-api-body{background:#0a2036; padding:16px 20px;
  font-family:var(--font-mono); font-size:12.5px; color:#d5e6f6;
  white-space:pre-wrap; overflow-wrap:anywhere}
.oz-api-voet{display:flex; gap:16px; flex-wrap:wrap; padding:12px 20px;
  border-top:1px solid var(--color-divider); font-size:13.5px}
.oz-api-voet a{color:var(--color-blue); font-weight:600; text-decoration:none}
.oz-api-voet a:hover{text-decoration:underline}

/* — seo-secties — */
.oz-sectie{margin-top:44px}
.oz-sectie h2{font-family:var(--font-heading); font-size:24px; color:var(--color-navy);
  margin:0 0 10px}
.oz-sectie p{font-size:15.5px; line-height:1.7; color:var(--color-text);
  max-width:70ch; margin:0 0 12px}
.oz-sectie p.sub{color:var(--color-text-muted)}
.oz-faq{border:1px solid var(--color-divider); border-radius:14px;
  background:var(--color-surface); overflow:hidden}
.oz-faq details{border-top:1px solid var(--color-divider)}
.oz-faq details:first-child{border-top:0}
.oz-faq summary{cursor:pointer; padding:14px 20px; font-size:15px; font-weight:600;
  color:var(--color-text); list-style:none; display:flex;
  justify-content:space-between; gap:12px}
.oz-faq summary::after{content:"+"; color:var(--color-blue); font-weight:700}
.oz-faq details[open] summary::after{content:"–"}
.oz-faq details p{padding:0 20px 14px; margin:0; font-size:14.5px;
  color:var(--color-text-muted); line-height:1.65}

/* — index-hub — */
.oz-hub{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px; margin-top:26px}
.oz-hub a{display:block; background:var(--color-surface);
  border:1px solid var(--color-divider); border-radius:16px; padding:20px;
  text-decoration:none; transition:border-color .14s ease, transform .14s ease}
.oz-hub a:hover{border-color:var(--color-blue); transform:translateY(-2px)}
.oz-hub .t{font-family:var(--font-heading); font-size:18px; font-weight:700;
  color:var(--color-navy)}
.oz-hub .d{font-size:14px; color:var(--color-text-muted); margin-top:6px;
  line-height:1.55}
.oz-hub .p{font-family:var(--font-mono); font-size:11px; color:var(--color-blue);
  margin-top:10px}

@media (max-width:560px){
  .oz{padding:32px 16px 48px}
  .oz-knop{align-self:stretch}
}