*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx-2);font:15px/1.6 var(--f-body)}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.icoon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* header */
.kop{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--lijn)}
.kop-in{max-width:1280px;margin:0 auto;height:60px;display:flex;align-items:center;gap:14px;padding:0 20px}
.merk{display:flex;align-items:center;gap:10px;color:var(--tx-1)}
.merk img{width:32px;height:32px}
.merk b{font:800 .95rem/1 var(--f-display);letter-spacing:.10em;text-transform:uppercase}
.merk b span{color:var(--accent)}
.menu{display:flex;gap:4px}
.menu a{font:500 .88rem var(--f-display);color:var(--tx-3);padding:8px 9px;border-radius:var(--r-s)}
.menu a:hover{color:var(--tx-1);background:var(--accent-dim)}
.menu a[aria-current="page"]{color:var(--tx-1);box-shadow:inset 0 -2px 0 var(--accent)}
.kop-zoek{flex:1;max-width:420px;margin-left:auto}
/* WP12 (B2/V2): het kop-zoekveld moet de placeholder "Zoek uitspraken, ECLI of
wetsartikel" (~254 px + 28 px padding = ~283 px form) onafgekapt tonen.
De input vult de form (width:100%), de form krijgt min-width met clamp();
het veld valt weg zodra die minimale breedte niet meer in de kop past
(>1275px = zichtbaar, zie media-query onderaan). */
.kop-zoek{min-width:clamp(240px,22.5vw,330px)}
.kop-zoek input{width:100%}
.kop-rechts{display:flex;align-items:center;gap:10px;margin-left:auto}
.pil-staging{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--oranje);border:1px solid var(--oranje);border-radius:999px;padding:2px 9px}
/* velden en knoppen */
input,select{font:inherit;color:var(--tx-1);background:var(--bg-2);border:1px solid var(--lijn-2);border-radius:var(--r-s);padding:10px 14px}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.knop{display:inline-flex;align-items:center;gap:8px;font:600 .9rem var(--f-display);border:0;border-radius:999px;padding:10px 18px;cursor:pointer;background:var(--accent);color:var(--accent-tx)}
.knop:hover{background:var(--accent-2);color:var(--accent-tx)}
.knop.stil{background:transparent;color:var(--tx-2);border:1px solid var(--lijn-2)}
.knop.stil:hover{border-color:var(--accent);color:var(--tx-1)}
/* panelen */
main{max-width:1120px;margin:0 auto;padding:32px 20px 80px}
.paneel{background:var(--panel);border:1px solid var(--panel-rand);border-radius:var(--r);box-shadow:var(--schaduw);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
/* WP12 (V4): geen dubbele witruimte bovenin/onderin panelen —
eerste/laatste kind mogen geen eigen buitenmarg overhouden.
Specificiteit (0,2,0) wint van .tekst h2 (0,1,1) en h2 (0,0,1). */
.paneel > :first-child{margin-top:0}
.paneel > :last-child{margin-bottom:0}
h1,h2,h3{font-family:var(--f-display);color:var(--tx-1);letter-spacing:-.02em}
h1{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0 0 12px}
h2{font-size:18px;margin:28px 0 10px}
.eyebrow{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.mono{font-family:var(--f-mono)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-2);background:var(--bg-2);border:1px solid var(--lijn);border-radius:999px;padding:3px 10px}
.chip.gezag{color:var(--accent-2);border-color:var(--accent-dim);background:var(--accent-dim)}
.chip.rood{color:var(--rood);border-color:var(--rood);background:var(--rood-dim)}
.chip.groen{color:var(--groen);border-color:var(--groen);background:var(--groen-dim)}
.voet{max-width:1120px;margin:0 auto;padding:24px 20px 40px;color:var(--tx-4);font:12px var(--f-mono);border-top:1px solid var(--lijn);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
@media (max-width:760px){.kop-in{gap:12px}.menu a{padding:8px}.kop-zoek{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Fase 4: hulpklassen voor graafpagina (werden verwacht maar nog niet gedefinieerd). */
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Claude 26-09 kop: 5 menu-items + zoekveld passen niet onder ~1100px (merk en items braken af).
WP12 (B2): drempel 1100 → 1275 — het zoekveld heeft minimaal ~287px nodig
(placeholder 254px + padding) en past pas weer zodra de kop die ruimte heeft;
dit voorkomt ook de bestaande kop-overloop op 1101–1229px (V1). */
.merk b,.menu a{white-space:nowrap}
@media (max-width:1274px){.kop-zoek{display:none}}
/* WP4 (26-09): voettekst-nav met de zes tekstpagina's (klein, --tx-4, hover --tx-1, wrapt netjes op mobiel) */
.voet-nav{display:flex;gap:14px;flex-wrap:wrap}
.voet-nav a{color:var(--tx-4);text-decoration:none}
.voet-nav a:hover{color:var(--tx-1)}
@media (max-width:760px){.voet-nav{flex-direction:column;gap:6px}}
/* WP4 (26-09): kop wrap bij smal scherm — T5 (geen zijscroll 390px).
Bestaand probleem: menu-items nowrap gaven scrollWidth 425px op 390px (ook op live :7910).
base.html (kop) mag niet gewijzigd worden; dit is een CSS-only fix in eigen werk. */
@media (max-width:480px){
.kop-in{height:auto;min-height:60px;flex-wrap:wrap;padding:8px 12px;row-gap:2px}
.menu{flex-wrap:wrap;gap:0}
.menu a{padding:6px;font-size:.78rem}
}
/* ═══ WP12 (B3): kop op mobiel ≤ 480px — maximaal twee rijen, ~110px ═══
Rij 1: logo + ingekorte merknaam (alleen "Rechtspraak") + rechts de knoppen.
Rij 2: menu als horizontaal scrollbare strip met zachte fade rechts.
Staging-label verdwijnt onder 480px; themaknop en Inloggen ≥ 36px hoog. */
@media (max-width:480px){
.kop-in{row-gap:4px;padding:6px 12px;min-height:56px}
.merk b span{display:inline}
.merk b{font-size:.9rem}
/* "Neuralex " verbergen: alleen het tekstknoot, "Rechtspraak" blijft staan */
.merk b{font-size:0}
.merk b span{font-size:.9rem}
.kop-rechts{gap:8px}
.pil-staging{display:none}
.themaknop,.kop-inloggen{min-height:36px}
.kop-inloggen{padding:8px 14px}
}
@media (max-width:480px){
/* Rij 2: menu als horizontaal scrollbare strip */
.menu{
flex-wrap:nowrap;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
white-space:nowrap;
width:100%;
-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
padding-bottom:2px;
}
.menu::-webkit-scrollbar{display:none}
.menu a{padding:8px 10px;font-size:.82rem}
}
/* ── Beheer-dashboard (WP17, Aether #427): tegels met tellingen ── */
.beheer-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 18px}
.beheer-tegel{display:flex;flex-direction:column;gap:6px;padding:16px 18px}
.beheer-tegel-getal{font:700 1.6rem var(--f-display);color:var(--accent);overflow-wrap:anywhere}
.beheer-tegel-label{font:600 .8rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase;opacity:.7}
/* WP27a — vervangers van inline style-attributen (CSP: style-src 'self') */
.beheer-nav-regel{margin:0}
.status-csv-regel{margin-top:14px}
.inline-form{display:inline}
.api-doc-houder{max-width:70rem;margin:0 auto;overflow-wrap:anywhere}
.api-doc-sectie{margin-top:1rem}
.api-tabel{width:100%;border-collapse:collapse}
.api-doc-bron{margin-top:1.5rem}
/* WP30 (Aether #466) — V7: raakvlak van klikdoelen ≥ 32px op smalle schermen.
Inline links krijgen verticale padding (het raakvlak groeit; regelafstand en
uitlijning blijven gelijk). Knoppen en chips krijgen min-height. Alleen
≤400px, zodat het brede ontwerp ongemoeid blijft. */
@media (max-width:400px){
a:not(.knop):not(.merk){padding-top:8px;padding-bottom:8px}
a.knop, button, .chip, summary{min-height:32px}
}
/* WP30 (Aether #466) — uit inline