/* ============================================================
   buildrs.nl - stylesheet
   Visuele taal van growrs.nl (Gilroy ExtraBold voor koppen, Lato
   voor tekst, donkere header, lichte hero, witte en koelgrijze
   banden, kaarten met radius 16, knoppen met radius 8), met een
   eigen kleurcombinatie: merkblauw #1F5BE0 en wit, antraciet #202020
   voor tekst en donkere banden (zoals growrs.nl). Contrast: zie
   scripts/contrast.mjs (WCAG AA).
   ============================================================ */

/* ===== Fonts (zelf gehost, latin subset, uit de repo van growrs.nl) ===== */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/lato-900-latin.woff2') format('woff2'); }
@font-face { font-family: 'Gilroy'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/gilroy-800-latin.woff2') format('woff2'); }

/* ===== Tokens =====
   Contrast (berekend met scripts/contrast.mjs, WCAG 2.1 AA = 4,5:1 voor tekst):
   zie de uitvoer van dat script voor elke combinatie die op de site voorkomt. */
:root {
    --blauw: #1F5BE0;
    --blauw-hover: #1A4BBA;
    --blauw-soft: #E9EFFC;
    --blauw-licht: #8FB3FF;
    --donker: #202020;
    --donker-kaart: #2A2A2A;
    --donker-rand: #3A3A3A;
    --donker-diep: #161616;
    --ink: #202020;
    --ink-80: #3D3D3D;
    --ink-70: #4D4D4D;
    --ink-50: #636363;
    --ink-10: rgba(32, 32, 32, 0.10);
    --surface: #ffffff;
    --muted: #F6F6F6;
    --grijs-koel: #EDF0F5;
    --rand-koel: #E2E6EE;
    --rand-koel-2: #C9D0DA;
    --tekst-op-donker: #B9BFC7;
    --font-kop: 'Gilroy', 'Lato', ui-sans-serif, system-ui, sans-serif;
    --font-tekst: 'Lato', ui-sans-serif, system-ui, sans-serif;
    --radius: 8px;
    --radius-kaart: 16px;
    --radius-pill: 99px;
    --schaduw-md: 0 4px 14px rgba(32, 32, 32, 0.08);
    --transition: 0.2s ease;
}

/* ===== Reset & basis ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
    font-family: var(--font-tekst);
    font-size: 17px;
    background: var(--surface);
    color: var(--ink);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
    color: var(--ink);
    font-family: var(--font-kop);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: pretty;
    margin-bottom: 0.55em;
}
h1 { font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.08; }
h3 { font-size: 1.2rem; }
p { margin-bottom: 1em; }

a { color: var(--blauw); text-underline-offset: 3px; }
a:hover { color: var(--blauw-hover); }

:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .container { padding: 0 24px; } }
.smal { max-width: 808px; }

.skiplink {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--blauw); color: #fff; padding: 12px 20px; font-weight: 700;
    border-radius: 0 0 var(--radius) 0;
}
.skiplink:focus { left: 0; }

/* Eyebrow (in growrs.nl: .eyebrow) */
.bovenkop {
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
}

/* ===== Knoppen ===== */
.knop {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 26px; border-radius: var(--radius);
    background: var(--blauw); color: #fff;
    border: 2px solid var(--blauw);
    font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1.3;
    text-decoration: none; text-align: center; cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.knop:hover { background: var(--blauw-hover); border-color: var(--blauw-hover); color: #fff; }
.knop-lijn { background: transparent; color: var(--ink); border-color: var(--rand-koel-2); }
.knop-lijn:hover { background: transparent; border-color: var(--blauw); color: var(--blauw); }
.knop-klein { padding: 10px 18px; font-size: 0.9rem; }
.knop-vol { width: 100%; }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.pijl-link { font-weight: 700; text-decoration: underline; }
.pijl-link::after { content: " \2192"; }

/* ===== Header (wit, zodat het antraciet woordmerk leesbaar is) ===== */
.kop {
    position: sticky; top: 0; z-index: 1100;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rand-koel);
}
.kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
@media (min-width: 960px) { .kop-binnen { height: 76px; } }
.kop-logo { display: inline-flex; text-decoration: none; color: var(--ink); }
.kop-logo:hover { color: var(--ink); }
.kop-nav { display: none; align-items: center; gap: 30px; }
.kop-link { color: var(--ink-70); font-size: 0.92rem; font-weight: 700; text-decoration: none; transition: color var(--transition); }
.kop-link:hover { color: var(--ink); }
.kop-nav .knop:hover { color: #fff; }
.kop-dropdown { position: relative; }
.kop-dropdown-paneel {
    position: absolute; top: 100%; left: -20px; min-width: 300px; margin-top: 14px;
    display: none; flex-direction: column; padding: 10px;
    background: var(--surface); border: 1px solid var(--rand-koel); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(32, 32, 32, 0.18);
}
.kop-dropdown-paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.kop-dropdown-paneel a { padding: 9px 12px; color: var(--ink); text-decoration: none; font-size: 0.95rem; border-radius: var(--radius); }
.kop-dropdown-paneel a:hover { background: var(--blauw-soft); color: var(--blauw); }
.kop-dropdown:hover .kop-dropdown-paneel,
.kop-dropdown:focus-within .kop-dropdown-paneel { display: flex; }

.menu-knop {
    list-style: none; cursor: pointer; color: var(--ink);
    display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.95rem;
    padding: 10px 4px; min-height: 44px;
}
.menu-knop::-webkit-details-marker { display: none; }
.menu-streep, .menu-streep::before, .menu-streep::after {
    display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); position: relative;
}
.menu-streep::before, .menu-streep::after { content: ""; position: absolute; left: 0; }
.menu-streep::before { top: -7px; }
.menu-streep::after { top: 7px; }
.menu-paneel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--rand-koel);
    padding: 8px 16px 20px; display: grid; gap: 14px; box-shadow: var(--schaduw-md);
    max-height: calc(100vh - 64px); overflow-y: auto;
}
.menu-groep { display: flex; flex-direction: column; }
.menu-groep a { padding: 12px 4px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rand-koel); }
.menu-label { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blauw); margin: 10px 0 2px; }
@media (min-width: 1100px) {
    .menu { display: none; }
    .kop-nav { display: flex; }
}

/* ===== Hero (licht, zoals de hero van growrs.nl) ===== */
.held { background: var(--muted); padding: 64px 0 72px; }
@media (min-width: 960px) { .held { padding: 80px 0 96px; } }
.held-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .held-grid { grid-template-columns: 1.3fr 0.7fr; gap: 56px; } }
.held h1 { max-width: 820px; }
.held-intro { font-size: 1.15rem; color: var(--ink-80); max-width: 660px; line-height: 1.7; margin-bottom: 0; }
.held-sub { padding: 44px 0 60px; }
.held-sub h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }

.kruimelpad { font-size: 0.82rem; color: var(--ink-50); margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.kruimelpad a { color: var(--ink-70); text-decoration: none; }
.kruimelpad a:hover { text-decoration: underline; }

/* Stroomkaart in de hero: van aanvraag tot boekhouding */
.stroom {
    background: var(--surface); border: 1px solid var(--rand-koel); border-radius: var(--radius-kaart);
    padding: 24px 26px 20px; box-shadow: var(--schaduw-md);
}
.stroom ol { list-style: none; position: relative; }
.stroom ol::before { content: ""; position: absolute; left: 16px; top: 22px; bottom: 22px; width: 2px; background: var(--rand-koel); }
.stroom li {
    position: relative; display: flex; align-items: center; gap: 16px;
    padding: 7px 0; font-family: var(--font-kop); font-weight: 800; font-size: 1.1rem; color: var(--ink);
}
.stroom li span {
    flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--blauw); color: #fff; font-size: 0.85rem; position: relative;
}
.stroom figcaption { font-size: 0.85rem; color: var(--ink-50); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rand-koel); }

/* ===== Secties en banden ===== */
.blok { background: var(--surface); padding: 56px 0; }
@media (min-width: 768px) { .blok { padding: 80px 0; } }
.blok-grijs { background: var(--grijs-koel); }
.blok-donker { background: var(--donker); color: var(--tekst-op-donker); }
.blok-donker h2, .blok-donker h3 { color: #fff; }
.blok-donker .bovenkop { color: var(--blauw-licht); }
.blok-donker a:not(.knop) { color: #fff; }
.blok-donker :focus-visible { outline-color: #fff; }
.blok-klein { padding: 40px 0 56px; }
@media (min-width: 768px) { .blok-klein { padding: 48px 0 64px; } }

.twee-kolom { display: grid; gap: 20px 64px; }
@media (min-width: 900px) { .twee-kolom { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }

.sectie-intro { max-width: 65ch; color: var(--ink-70); font-size: 1.05rem; margin-bottom: 32px; }

/* Lijsten: probleem (neutraal) en wat het oplevert (blauw vinkje) */
.probleemlijst, .vinklijst { list-style: none; display: grid; gap: 12px; }
.probleemlijst li, .vinklijst li {
    position: relative; padding: 16px 18px 16px 52px;
    background: var(--surface); border: 1px solid var(--rand-koel); border-radius: 12px;
}
.blok-grijs .probleemlijst li, .blok-grijs .vinklijst li { border-color: transparent; }
.probleemlijst li::before {
    content: ""; position: absolute; left: 18px; top: 22px; width: 18px; height: 18px;
    border-radius: 50%; border: 2px solid var(--rand-koel-2); background: var(--muted);
}
.probleemlijst li::after {
    content: ""; position: absolute; left: 24px; top: 28px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-50);
}
.vinklijst li::before {
    content: ""; position: absolute; left: 16px; top: 19px; width: 22px; height: 22px;
    border-radius: 50%; background: var(--blauw-soft);
}
.vinklijst li::after {
    content: ""; position: absolute; left: 23px; top: 25px; width: 8px; height: 5px;
    border-left: 2px solid var(--blauw); border-bottom: 2px solid var(--blauw); transform: rotate(-45deg);
}
.blok-donker .vinklijst li, .aanvraag .vinklijst li { background: var(--donker-kaart); border-color: var(--donker-rand); color: var(--tekst-op-donker); }
.blok-donker .vinklijst li::before, .aanvraag .vinklijst li::before { background: rgba(143, 179, 255, 0.16); }
.blok-donker .vinklijst li::after, .aanvraag .vinklijst li::after { border-color: var(--blauw-licht); }

/* ===== Tegels (kaart-v2 van growrs.nl) ===== */
.tegels { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tegels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tegels { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.tegel {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--rand-koel); border-radius: var(--radius-kaart);
    padding: 24px; color: var(--ink); text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.tegel:hover { border-color: var(--blauw); box-shadow: var(--schaduw-md); color: var(--ink); }
.tegel-nummer { position: absolute; top: 24px; right: 24px; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.1em; color: var(--ink-50); }
.icoon {
    width: 46px; height: 46px; padding: 10px; border-radius: 12px; background: var(--blauw-soft);
    fill: none; stroke: var(--blauw); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    margin-bottom: 18px;
}
.tegel h3 { margin-bottom: 0.4em; }
.tegel p { color: var(--ink-70); font-size: 0.97rem; flex: 1; }
.tegel-meer { font-weight: 700; font-size: 0.92rem; color: var(--blauw); }
.tegel-meer::after { content: " \2192"; }

/* ===== Stappen (home-stap van growrs.nl) ===== */
.stappen { list-style: none; counter-reset: stap; margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 860px) { .stappen { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.stappen li {
    counter-increment: stap; background: var(--surface);
    border: 1px solid var(--rand-koel); border-radius: var(--radius-kaart); padding: 26px 24px;
}
.blok-grijs .stappen li { border-color: transparent; }
.stappen li::before {
    content: counter(stap);
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; background: var(--blauw); color: #fff;
    font-family: var(--font-kop); font-weight: 800; font-size: 1.05rem; margin-bottom: 16px;
}
.stappen h3 { margin-bottom: 0.35em; }
.stappen p { color: var(--ink-70); margin: 0; }

.software { margin-top: 32px; font-size: 0.98rem; color: var(--ink-70); }
.software strong { color: var(--ink); }

/* ===== FAQ (faq-list van growrs.nl) ===== */
.faq { margin-top: 24px; border-top: 1px solid var(--ink-10); border-bottom: 1px solid var(--ink-10); }
.faq-item + .faq-item { border-top: 1px solid var(--ink-10); }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
    font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%; margin-top: -0.6em;
    font-size: 1.5rem; line-height: 1; color: var(--blauw); transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--ink-70); font-size: 0.97rem; line-height: 1.7; padding-bottom: 18px; margin: 0; max-width: 700px; }

/* ===== Formulier (donkere band, witte kaart) ===== */
.aanvraag { background: var(--donker); color: var(--tekst-op-donker); padding: 56px 0; }
@media (min-width: 768px) { .aanvraag { padding: 80px 0; } }
.aanvraag h2 { color: #fff; }
.aanvraag .bovenkop { color: var(--blauw-licht); }
.aanvraag-grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .aanvraag-grid { grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; } }
.aanvraag-tekst p { color: var(--tekst-op-donker); }
.aanvraag .vinklijst { margin-top: 24px; }

.formulier { background: var(--surface); color: var(--ink); border-radius: var(--radius-kaart); padding: 26px 20px; }
@media (min-width: 720px) { .formulier { padding: 34px 34px 28px; } }
.formulier a { color: var(--blauw); }
.veld { display: flex; flex-direction: column; margin-bottom: 18px; }
.veld-rij { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .veld-rij { grid-template-columns: 1fr 1fr; } }
.veld label { font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; }
.optioneel { font-weight: 400; color: var(--ink-50); }
.veld input, .veld select, .veld textarea {
    font: inherit; font-size: 16px; color: var(--ink); width: 100%;
    border: 1px solid var(--rand-koel-2); border-radius: var(--radius); background: var(--surface);
    padding: 12px 14px;
}
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(31, 91, 224, 0.2); }
.veld textarea { resize: vertical; min-height: 110px; }
.veld [aria-invalid="true"] { border-color: #b3261e; }
::placeholder { color: var(--ink-50); opacity: 1; }
.hp-veld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.botcheck { margin: 4px 0 18px; }
.formulier-noot { font-size: 0.85rem; color: var(--ink-50); margin: 14px 0 0; }
.formulier-melding { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius); background: #fdecea; color: #8c1d18; font-size: 0.95rem; }
.formulier-succes { font-size: 1.1rem; font-weight: 700; margin: 0; }
.formulier-succes::before {
    content: ""; display: block; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 16px;
    background: var(--blauw-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5BE0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* ===== Overig ===== */
.kop-klein { font-size: 1.25rem; }
.andere { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.andere a {
    display: inline-block; padding: 9px 16px; border: 1px solid var(--rand-koel); border-radius: var(--radius-pill);
    color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.92rem; background: var(--surface);
}
.andere a:hover { border-color: var(--blauw); color: var(--blauw); }

.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; }
.gegevens dt { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); padding-top: 4px; }
.gegevens dd { font-weight: 700; }

.tekst h2 { font-size: 1.35rem; margin-top: 1.8em; }
.tekst h2:first-child { margin-top: 0; }
.tekst ul { padding-left: 1.2em; margin-bottom: 1em; }
.tekst li { margin-bottom: 0.5em; }
.klein { font-size: 0.9rem; color: var(--ink-50); }

/* ===== Footer (donker, zoals growrs.nl) ===== */
.voet { background: var(--donker-diep); padding: 48px 0 24px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.68); }
.voet-grid { display: grid; gap: 36px 32px; margin-bottom: 40px; }
@media (min-width: 720px) { .voet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .voet-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.voet-growrs { color: #fff; font-weight: 700; }
.voet a { color: rgba(255, 255, 255, 0.82); }
.voet a:hover { color: #fff; }
.voet-kop { font-family: var(--font-tekst); color: #fff; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; }
.voet-lijst { list-style: none; }
.voet-lijst li { margin-bottom: 8px; }
.voet-lijst a { text-decoration: none; }
.voet-lijst a:hover { text-decoration: underline; }
.voet-adres { font-style: normal; line-height: 1.8; }
.voet-onder {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px;
    font-size: 0.82rem; color: rgba(255, 255, 255, 0.6);
}

/* ===== Woordmerk: logo uit src/partials/woordmerk.html =====
   Licht-variant (medeklinkers blauw, klinkers antraciet) op wit, donker-variant in de footer. */
.woordmerk { display: inline-flex; flex-direction: column; line-height: 1; }
.woordmerk-logo { width: 132px; height: auto; display: block; }
.woordmerk-op-donker { display: none; }
.voet .woordmerk-op-wit { display: none; }
.voet .woordmerk-op-donker { display: block; }
.woordmerk-merk { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; margin-top: 5px; opacity: 0.8; }
.voet-logo { color: #fff; margin-bottom: 16px; }

/* ===== Cases ===== */
.case {
    background: var(--surface); border: 1px solid var(--rand-koel); border-radius: var(--radius-kaart);
    padding: 26px 24px; border-top: 4px solid var(--blauw);
}
.blok-grijs .case { border-color: transparent; border-top-color: var(--blauw); }
.case h3 { font-size: 1.3rem; }
.case p { color: var(--ink-70); }
.case .bovenkop { color: var(--blauw); margin-bottom: 10px; }
.case-voet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rand-koel); font-size: 0.88rem; }
.case-team { font-weight: 700; color: var(--ink); }
.case-tools { color: var(--ink-50); }
.case-link { margin: 12px 0 0; }
.cases { display: grid; gap: 20px; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(2, 1fr); } }

/* ===== Kennisbank ===== */
.tegels-artikelen .bovenkop { margin-bottom: 10px; color: var(--blauw); }
.stappen-artikel { grid-template-columns: 1fr !important; max-width: 760px; }
.tekst p, .tekst li { color: var(--ink-80); }
.tekst h2 { font-size: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* ===== Uitbreiding: menu met hubs, tabellen, bronnen ===== */
.kop-nav { gap: 24px; }
.kop-dropdown-paneel--twee { display: none; min-width: 460px; }
.kop-dropdown:hover .kop-dropdown-paneel--twee,
.kop-dropdown:focus-within .kop-dropdown-paneel--twee { display: grid; grid-template-columns: 1fr 1fr; }
.voet-kop-tweede { margin-top: 28px; }
.voet-adres { margin-top: 0; }

.tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rand-koel); border-radius: 12px; background: var(--surface); }
.tabel { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
.tabel th, .tabel td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rand-koel); vertical-align: top; }
.tabel thead th { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); background: var(--muted); }
.tabel tbody tr:last-child th, .tabel tbody tr:last-child td { border-bottom: none; }
.tabel tbody th { font-weight: 700; }
.tabel td { color: var(--ink-70); }

.bronnen { background: var(--surface); border-top: 1px solid var(--rand-koel); }
.bronnenlijst { padding-left: 1.2em; font-size: 0.88rem; color: var(--ink-70); }
.bronnenlijst li { margin-bottom: 6px; overflow-wrap: anywhere; }
.cases-een { grid-template-columns: 1fr !important; max-width: 820px; }
.tegel .bovenkop { margin-bottom: 8px; }

.byline { font-size: 0.85rem; color: var(--ink-50); margin: 14px 0 0; }