/* Proefomgeving: een overheidsdienst nadoen, in de geest van de
   Rijkshuisstijl (lint, donkerblauw, rustige typografie, u-vorm). Bewust
   zonder het echte logo of wapen: dit is geen overheidssite. */
:root{--rijk:#154273;--lint:#01689B;--licht:#E6EFF4;--lichter:#F3F7F9;--tekst:#1A1A1A;--grijs:#535353;--rand:#CAD6E0;--geel:#FFE900}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Source Sans 3','Segoe UI',Verdana,sans-serif;font-size:18px;line-height:1.5;color:var(--tekst);background:#fff}
a{color:var(--lint)}
.proefstrook{background:var(--geel);color:#000;font-size:13px;font-weight:700;letter-spacing:.06em;text-align:center;padding:6px 16px}
.proefstrook span{font-weight:400;letter-spacing:0}

/* kop: het lint midden boven, woordmerk ernaast */
.kop{display:flex;justify-content:center;padding:0 16px}
.kop .merk{display:flex;align-items:flex-start;gap:12px;text-decoration:none;color:var(--tekst)}
.kop .lint{width:44px;height:84px;background:var(--rijk);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px}
.kop .lint span{width:18px;height:18px;border:2px solid #fff;border-radius:50%}
.kop .woord{padding-top:30px;line-height:1.1}
.kop .woord b{display:block;font-size:19px;font-weight:700}
.kop .woord small{display:block;font-size:15px;color:var(--grijs)}
.balk{margin-top:18px;background:var(--rijk)}
.balk nav{max-width:980px;margin:0 auto;display:flex;padding:0 16px}
.balk a{color:#fff;text-decoration:none;padding:13px 16px;font-weight:600;font-size:17px}
.balk a.aan{background:var(--lint)}

.romp{max-width:980px;margin:0 auto;padding:18px 16px 56px}
.kruimel{font-size:15px;color:var(--grijs)}
.kruimel a{color:var(--lint)}
h1{margin:22px 0 0;color:var(--rijk);font-size:38px;line-height:1.15;font-weight:700}
h2{margin:0;color:var(--rijk);font-size:22px;font-weight:700}
.inleiding{margin:14px 0 0;font-size:20px;color:var(--tekst);max-width:46ch}
.raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;margin-top:32px;align-items:start}
@media (max-width:820px){.raster{grid-template-columns:1fr}}

/* diensten */
.diensten{display:flex;flex-direction:column;gap:14px}
.dienst{border:1px solid var(--rand);border-left:6px solid var(--lint);background:#fff;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.dienst b{display:block;font-size:20px;color:var(--rijk)}
.dienst small{display:block;color:var(--grijs);font-size:15px}
.dienst .niveau{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.04em;padding:2px 8px;background:var(--licht);color:var(--rijk)}
.knop{display:inline-flex;align-items:center;gap:10px;border:0;background:var(--lint);color:#fff;font:inherit;font-weight:700;font-size:17px;padding:12px 18px;cursor:pointer;text-decoration:none}
.knop:hover{background:var(--rijk)}
.knop:focus-visible,.dienst:focus-within{outline:3px solid #FFB612;outline-offset:2px}

/* zijkant */
.kader{background:var(--lichter);border-top:6px solid var(--rijk);padding:18px 20px}
.kader h2{font-size:19px}
.kader ul{margin:10px 0 0;padding-left:20px}
.kader li{margin:4px 0}
.kader p{margin:10px 0 0;font-size:16px;color:var(--grijs)}

/* ontvangen */
.melding{margin-top:24px;border-left:6px solid #39870C;background:#E1EDDB;padding:16px 20px;font-weight:600}
.gegevens{margin:22px 0 0;border-top:1px solid var(--rand)}
.gegevens div{display:grid;grid-template-columns:260px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rand)}
@media (max-width:620px){.gegevens div{grid-template-columns:1fr;gap:2px}}
.gegevens dt{font-weight:700;color:var(--rijk)}
.gegevens dd{margin:0;word-break:break-all;font-family:'Source Code Pro',Menlo,monospace;font-size:15px}
.uitleg{margin-top:18px;font-size:16px;color:var(--grijs);max-width:60ch}
.knoppen{margin-top:26px}

.voet{background:var(--rijk);color:#fff;margin-top:24px}
.voet .binnen{max-width:980px;margin:0 auto;padding:30px 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:620px){.voet .binnen{grid-template-columns:1fr}}
.voet b{display:block;font-size:17px;margin-bottom:8px}
.voet p,.voet a{color:#fff;font-size:15px;margin:0}
.voet .motto{font-style:italic;font-size:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}