/* Leespagina's in de nachtstijl van de hoofdpagina (body.nacht.binnen, zie layout() in build.mjs).
   probeer.css levert de kleuren, het menu en de voet; hier staat wat de leespagina's zelf nodig hebben:
   kaarten worden donker glas, en alles waar je in typt of op oefent blijft een licht vlak, zoals de telefoon op de hoofdpagina. */

body.binnen main { padding-bottom:40px; }
body.binnen .crumbs, body.binnen .crumbs a { color:var(--muted); }
body.binnen .crumbs a:hover { color:var(--gloed); }
body.binnen h1 { letter-spacing:-0.035em; text-wrap:balance; }
body.binnen h2, body.binnen h3 { text-wrap:balance; }
body.binnen .lead { color:var(--zilver); }
body.binnen strong { color:#fff; }
body.binnen hr { border:0; border-top:1px solid var(--line); }

/* Knoppen */
body.binnen .btn.ghost { background:rgba(20,34,63,.6); color:var(--ink) !important; border-color:var(--line); box-shadow:0 4px 0 0 #070d1c; backdrop-filter:blur(6px); }
body.binnen .btn.ghost:hover { border-color:#4a66a0; }

/* Kaarten: donker glas met een oranje randje als je erover gaat */
body.binnen .toc a, body.binnen article .les, body.binnen .lid, body.binnen .gegevens, body.binnen .flag, body.binnen .usp, body.binnen .card {
  background:linear-gradient(180deg, rgba(24,40,74,.92), rgba(16,28,54,.92)); border:1px solid var(--line); color:var(--ink);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
}
body.binnen .toc a { transition:border-color .2s, transform .15s; }
body.binnen .toc a:hover { border-color:rgba(247,105,37,.7); transform:translateY(-2px); }
body.binnen .toc a small { color:var(--muted); }
body.binnen .usp .ic, body.binnen .usp.hl .ic { background:rgba(247,105,37,.16); }
body.binnen .compare td.us { background:rgba(247,105,37,.12); }
body.binnen .key { background:rgba(247,105,37,.12); border-color:rgba(247,105,37,.4); color:#ffd9c2; }
body.binnen .listen { background:rgba(20,34,63,.8); color:var(--ink); border-color:var(--line); }
body.binnen .listen:hover { border-color:rgba(247,105,37,.7); }
body.binnen .reader { background:#14223f; color:var(--ink); border-color:var(--line); box-shadow:0 24px 50px -20px rgba(0,0,0,.9); }
body.binnen table { border-color:var(--line); }
body.binnen th, body.binnen td { border-color:var(--line); }
body.binnen code { background:rgba(255,255,255,.08); border-radius:6px; padding:1px 5px; }

/* Lichte vlakken: het proefexamen, formulieren en invulvelden. Daarbinnen gelden de kleuren van de app. */
body.binnen .formcard, body.binnen #pe .stage, body.binnen .licht {
  --bg:#ffffff; --bg2:#f6f7fb; --peach:#fff2e8; --ink:#142538; --muted:#56657a; --line:#e2e6eb; color:#142538;
}
body.binnen .formcard strong, body.binnen .licht strong { color:#142538; }
body.binnen input, body.binnen select, body.binnen textarea { color:#142538; }
body.binnen .formcard { box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 50px 100px -50px rgba(0,0,0,.9), 0 0 80px -30px rgba(247,105,37,.45); }

/* Over ons */
.team { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin:34px auto 44px; max-width:1040px; }
.lid { border-radius:24px; padding:26px 22px 26px; text-align:center; transition:transform .2s, border-color .2s; }
.lid:hover { transform:translateY(-4px); border-color:rgba(247,105,37,.6) !important; }
.lid-fig { width:140px; height:140px; margin:0 auto 10px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 38%, #fff6ec, #ffe3cd 70%); box-shadow:0 0 0 4px rgba(247,105,37,.35), 0 0 50px -6px rgba(247,105,37,.55); }
.lid-fig svg { width:122px; height:122px; overflow:visible; }
.lid h3 { margin:10px 0 2px; font-size:22px; }
.lid .functie { margin:0 0 10px; color:var(--gloed); font-weight:1000; text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; }
.lid p { margin:0; color:var(--muted); }
.verhaal { max-width:820px; margin:0 auto 10px; padding:26px 28px; border-radius:24px; border:1px solid var(--line); background:linear-gradient(135deg, rgba(247,105,37,.16), rgba(20,34,63,.5) 55%); }
.verhaal h2 { margin:0 0 8px; font-size:clamp(22px,2.6vw,28px); }
.verhaal p { margin:0; color:var(--zilver); font-size:17px; }
.bedrijf { max-width:1040px; margin:0 auto 56px; display:grid; grid-template-columns:1.3fr 1fr; gap:20px; }
.bedrijf .contact { border-radius:24px; padding:30px; border:1px solid rgba(247,105,37,.4); background:radial-gradient(520px 300px at 0% 0%, rgba(247,105,37,.28), transparent 70%), rgba(20,34,63,.7); }
.bedrijf h2 { margin:0 0 8px; font-size:26px; }
.bedrijf .contact p { margin:0 0 14px; color:var(--zilver); }
.bedrijf .regels { display:flex; flex-direction:column; gap:4px; font-weight:1000; font-size:18px; }
.bedrijf .regels a { text-decoration:none; color:#fff; }
.bedrijf .regels a:hover { color:var(--gloed); }
.bedrijf .cta { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
.gegevens { margin:0; border-radius:24px; padding:26px 28px; display:grid; gap:14px; align-content:center; }
.gegevens div { display:grid; grid-template-columns:70px 1fr; gap:12px; }
.gegevens dt { font-weight:1000; color:var(--gloed); }
.gegevens dd { margin:0; }
@media (max-width:720px) { .bedrijf { grid-template-columns:1fr; } }

/* Leestekst: de basisopmaak geeft lessen en juridische tekst een vaste donkere kleur; hier licht op donker. */
body.binnen article .les p, body.binnen article .les ul, body.binnen .prose p, body.binnen .prose li { color:#c9d4ea; }
body.binnen .prose h2, body.binnen .prose h3 { color:var(--ink); }
body.binnen .prose a, body.binnen article .les a { color:#fff; }
body.binnen details .ans { color:#7fe3b0; }
body.binnen .ok { background:rgba(53,211,138,.14); color:#b9f3d6; }
body.binnen .err { background:rgba(229,72,77,.16); color:#ffc9cb; }
/* In een licht vlak blijven die meldingen zoals ze waren. */
body.binnen .formcard .ok { background:#e6f6ec; color:#1f6b3f; } body.binnen .formcard .err { background:#fdecec; color:#9b2226; }

/* Over ons: kop in het midden, boven de kaarten */
.over-kop { text-align:center; max-width:760px; }
.over-kop .crumbs { text-align:left; }