/* =====================================================================
   Open Gods Woord — ontwerplaag "de atlas en het naslagwerk" (oktober 2026)

   Goedgekeurd ontwerp: ../ontwerpvoorstellen/open-gods-woord.html.
   Deze laag wordt als laatste stylesheet op elke pagina geladen en zet de
   visuele taal over de bestaande site heen, zonder de logica te raken:

     1. tokens (licht en donker)           9. wiki-schil en wiki-overzicht
     2. basis en typografie               10. naslag: overzicht en lemma
     3. zustersitesstrook                 11. citaatkaartjes (gekoppelde teksten)
     4. bovenbalk                         12. plaats, kaart, geografie, archeologie
     5. taalkeuze                         13. handschriften en woordenboeken
     6. voettekst                         14. de lezer
     7. gedeelde componenten              15. Arabisch (RTL)
     8. startscherm                       16. smalle schermen

   Familiekenmerken (gedeeld met OV en OPV): navy #142e42, goud #cba449
   (als tekst #7a5f1c), EB Garamond voor Bijbeltekst en titels, Fira Sans
   voor de interface, de zustersitesstrook en 'de kleine ark' in de voet.
   OGW-eigen: warm perkament en terracotta, uitsluitend voor kaart,
   archeologie en controlestatus. Alleen logische eigenschappen
   (inline-start/end), zodat Arabisch vanzelf spiegelt.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --navy: #142e42;
    --navy-deep: #0d2131;
    --gold: #cba449;
    --gold-ink: #7a5f1c;          /* goud als tekst op licht papier (WCAG AA) */

    --paper: #f6f1e6;
    --paper-2: #ede5d3;
    --surface: #fffcf5;
    --surface-2: #faf5ea;
    --ink: #1c2731;
    --ink-2: #44515d;
    --muted: #5f6b76;
    --rule: #ddd2bc;
    --rule-soft: #e9e1cf;
    --clay: #9a4a2a;              /* aarde: kaart, archeologie, controlestatus */
    --clay-soft: #f3e3d8;
    --sage: #6f8f82;
    --sea: #9bb8c4;
    --sea-ink: #4f7686;
    --relief: #e7dcc3;

    --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
    --shadow: 0 1px 2px rgba(20,46,66,.06), 0 6px 22px rgba(20,46,66,.08);
    --shadow-lg: 0 2px 4px rgba(20,46,66,.08), 0 24px 60px rgba(20,46,66,.16);
    --img-filter: none;

    --font-ar: 'Noto Naskh Arabic', 'Geeza Pro', 'Arabic Typesetting', serif;
    --font-he: 'Noto Serif Hebrew', 'SBL Hebrew', 'Times New Roman', serif;
    /* Arabische tekens vallen per teken terug op Noto Naskh Arabic. */
    --font-body: 'Fira Sans', 'Noto Naskh Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-ui: var(--font-body);
    --font-serif: 'EB Garamond', 'Noto Naskh Arabic', Garamond, Cambria, 'Times New Roman', Georgia, serif;
    /* De oude schrijfletter (Allura) maakt plaats voor EB Garamond. */
    --font-cursive: var(--font-serif);

    /* Bestaande semantische tokens van style.css, nu in perkament. */
    --bg-page: var(--paper);
    --bg-surface: var(--surface);
    --bg-surface-alt: var(--surface-2);
    --bg-elevated: var(--surface);
    --parchment: var(--paper);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--muted);
    --border-default: var(--rule);
    --border-soft: var(--rule-soft);
    --border: var(--rule);
    --border-light: var(--rule-soft);
    --shadow-soft: var(--shadow);
    --header-bg: var(--navy);
    /* Tokens die naslag.css verwacht maar nergens definieerde. */
    --bg: var(--surface);
    --text: var(--ink);
    --teal: #4d6f64;              /* salie als tekstkleur, AA op perkament */
    color-scheme: light;
}
:root[data-theme="donker"] {
    --gold: #d7b45a;
    --gold-ink: #e0c172;
    --navy-deep: #081620;
    --paper: #0f1b25;
    --paper-2: #132330;
    --surface: #16252f;
    --surface-2: #1b2c38;
    --ink: #ebe5d7;
    --ink-2: #c5bfb1;
    --muted: #9ea6ad;
    --rule: #2b3d4b;
    --rule-soft: #22323f;
    --clay: #e08b62;
    --clay-soft: #3a2a22;
    --sage: #3e5a50;
    --sea: #2c4f60;
    --sea-ink: #8fb7c7;
    --relief: #1d2e2a;
    --teal: #9cc2b4;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
    --img-filter: brightness(.88) contrast(1.02);
    --header-bg: var(--navy-deep);
    /* style.css zet in donker eigen (zwarte) waarden; hier de nachtkaart. */
    --bg-page: var(--paper);
    --bg-surface: var(--surface);
    --bg-surface-alt: var(--surface-2);
    --bg-elevated: var(--surface-2);
    --parchment: var(--paper);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--muted);
    --border-default: var(--rule);
    --border-soft: var(--rule-soft);
    --border: var(--rule);
    --border-light: var(--rule-soft);
    --shadow-soft: var(--shadow);
    --bg: var(--surface);
    --text: var(--ink);
    color-scheme: dark;
}

/* ---------- 2. Basis en typografie ---------- */
html body { background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }

/* Losse inhoudspagina's: een leesmarge en gecentreerd, ook buiten de wiki-schil. */
.page { box-sizing: border-box; padding: 30px clamp(20px, 4vw, 48px) 80px; margin-inline: auto; width: 100%; }
@media (max-width: 768px) { .page { padding: 24px 16px 64px; } }

/* Titels in EB Garamond, zoals de lemmatitels in het ontwerp. */
.page h1, main h1, #naslag h1, .wo-pagina h1, .container h1, .content h1, article h1 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ink);
}
.page h1, #naslag h1, .wo-pagina h1 { font-size: clamp(2.1rem, 4.2vw, 3rem); line-height: 1.05; margin: 6px 0 10px; }
.page h2, main h2 { font-family: var(--font-serif); font-weight: 500; }

/* Het 'atlasrandje': gouden dubbellijn. */
.ka-dubbellijn {
    height: 5px; border: 0; margin: 18px 0;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}

/* ---------- 3. Zustersitesstrook ----------
   De opmaak staat in js/topnav.js (familiestrook), gelijk in de drie sites. */

/* ---------- 4. Bovenbalk ---------- */
#topnav {
    background: var(--navy);
    border-bottom: 2px solid var(--gold);
    gap: 18px;
    padding: 0 24px;
}
:root[data-theme="donker"] #topnav { background: var(--navy-deep); }
#topnav .topnav-brand { flex: 0 0 auto; gap: 10px; }
#topnav .topnav-brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.topnav-logo-svg { width: 36px; height: 36px; flex: none; }
.topnav-woordmerk { display: flex; flex-direction: column; line-height: 1; }
#topnav .topnav-merknaam {
    font-family: 'EB Garamond', Garamond, Georgia, serif;
    font-size: 25px; font-weight: 500; letter-spacing: .005em; color: #fff;
}
.topnav-sub {
    margin-top: 5px; font: 500 10px/1.35 var(--font-body);
    letter-spacing: .02em; text-transform: none; color: var(--gold);
    white-space: normal; max-width: 280px;
}
#topnav .topnav-links { margin: 0; gap: 2px; flex: 1 1 auto; min-width: 0; }
#topnav .topnav-links a {
    padding: 8px 11px; border-radius: 6px;
    font-size: 14.5px; font-weight: 400; color: #dfe6ec; white-space: nowrap;
}
#topnav .topnav-links a:hover { background: rgba(255,255,255,.07); color: #fff; }
#topnav .topnav-links a.active {
    color: #fff; background: transparent;
    box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0;
}
.topnav-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: 0 0 auto; }
@media (min-width: 1181px) and (max-width: 1500px) {
    .topnav-taal-naam { display: none; }
    #topnav .topnav-merknaam { font-size: 23px; }
}
#topnav .topnav-search-input { display: none; }
.topnav-zoek, #topnav .topnav-theme {
    display: inline-grid; place-items: center; width: 38px; height: 38px;
    border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
    color: #fff; background: transparent;
}
.topnav-zoek:hover, #topnav .topnav-theme:hover { background: rgba(255,255,255,.08); }
.ka-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#topnav .topnav-weergave {
    margin: 0; border-radius: 8px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 500;
}
#topnav .topnav-weergave:hover, #topnav .topnav-weergave[aria-expanded="true"] { border-color: var(--gold); background: rgba(203,164,73,.14); }
/* In de lezer is een breed zoekveld voor de Bijbeltekst handig. */
@media (min-width: 1500px) {
    .ogw-lezer #topnav .topnav-search-input { display: block; width: 210px; min-width: 0; margin: 0; }
    .ogw-lezer #topnav .topnav-zoek { display: none; }
}

/* Uitklapmenu (hamburger): onder de balk, ongeacht de hoogte van de strook. */
@media (max-width: 1180px) {
    #topnav .topnav-links {
        position: absolute; top: 100%; right: 0; left: auto;
        min-width: 240px; max-height: calc(100vh - 90px); overflow-y: auto;
        background: var(--navy); border: 1px solid rgba(203,164,73,.3); border-top: 0;
        border-bottom-left-radius: 10px;
        box-shadow: var(--shadow-lg);
    }
    #topnav .topnav-links a { padding: 12px 22px; font-size: 15px; color: rgba(255,255,255,.92); border-bottom: 1px solid rgba(255,255,255,.06); }
    #topnav .topnav-links a.active { box-shadow: inset 3px 0 0 var(--gold); }
    :root[dir="rtl"] #topnav .topnav-links { right: auto; left: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 10px; }
    :root[dir="rtl"] #topnav .topnav-links a.active { box-shadow: inset -3px 0 0 var(--gold); }
    #topnav .topnav-hamburger { display: flex; margin-inline-start: 0; }
    #topnav .topnav-hamburger span { width: 22px; height: 2px; }
}
@media (min-width: 1181px) and (max-width: 1420px) {
    #topnav { gap: 12px; padding: 0 18px; }
    #topnav .topnav-links a { padding: 8px 8px; font-size: 14px; }
    .topnav-sub { display: none; }
    #topnav .topnav-weergave { width: 38px; padding: 0; gap: 0; }
    #topnav .topnav-weergave span { display: none; }
    .topnav-taal-naam { display: none; }
}

/* ---------- 5. Taalkeuze ---------- */
.topnav-taal { position: relative; display: inline-flex; margin: 0; }
.topnav-taal-knop {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px;
    border-radius: 8px; border: 1px solid rgba(203,164,73,.6);
    background: rgba(255,255,255,.04); color: #fff; cursor: pointer;
    font: 500 13.5px var(--font-body); white-space: nowrap;
}
.topnav-taal-knop:hover, .topnav-taal-knop[aria-expanded="true"] { background: rgba(203,164,73,.16); border-color: var(--gold); }
.topnav-taal-code { font-weight: 600; letter-spacing: .04em; }
.topnav-taal-naam::before { content: '·'; margin-inline-end: 6px; opacity: .6; }
.topnav-taal-pijl { color: var(--gold); font-size: 11px; }
.topnav-taalpaneel {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 500;
    width: min(500px, calc(100vw - 24px));
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--rule); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); overflow: hidden; text-align: start;
}
.topnav-taalpaneel[hidden] { display: none; }
.ttp-kop { padding: 14px 16px 10px; border-bottom: 1px solid var(--rule); }
.ttp-kop strong { display: block; font: 500 1.15rem var(--font-serif); }
.ttp-kop span { font-size: .8rem; color: var(--muted); }
.ttp-lijst { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 2px; }
.ttp-taal {
    width: 100%; display: grid; grid-template-columns: 32px 1fr; gap: 1px 10px; align-items: center;
    padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit;
    font: 14px var(--font-body); text-align: start; cursor: pointer;
}
.ttp-taal:hover, .ttp-taal:focus-visible { background: var(--surface-2); }
.ttp-taal[aria-current="true"] { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.ttp-code {
    grid-row: span 2; font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
    color: var(--navy); background: var(--paper-2); border-radius: 5px; text-align: center; padding: 4px 0;
}
:root[data-theme="donker"] .ttp-code { color: var(--gold); }
.ttp-naam { font-weight: 500; }
.ttp-bijbel { font: italic 12.5px var(--font-serif); color: var(--muted); }
.ttp-rtl { font: 600 10px var(--font-body); font-style: normal; letter-spacing: .06em; color: var(--clay); margin-inline-start: 4px; }
.ttp-voet { margin: 0; padding: 10px 16px; font-size: .78rem; color: var(--ink-2); background: var(--surface-2); border-top: 1px solid var(--rule); }

/* ---------- 6. Voettekst ---------- */
.ka-voet {
    margin-top: auto;
    background: var(--navy); color: #cfd8df; border-top: 2px solid var(--gold);
    font: 13.5px/1.6 var(--font-body);
}
:root[data-theme="donker"] .ka-voet { background: var(--navy-deep); }
.ka-voet a { color: #e6ecf0; text-decoration: none; }
.ka-voet a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); }
.ka-voet-binnen {
    max-width: 1180px; margin: 0 auto; padding: 30px 28px 18px;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 24px;
}
.ka-voet h2 {
    border: 0 !important; padding: 0 !important;
    margin: 0 0 8px !important; font: 600 11px var(--font-body) !important; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold) !important;
}
.ka-voet ul { list-style: none; margin: 0; padding: 0; }
.ka-voet li { margin: 4px 0; }
.ka-voet-merk p { margin: 8px 0 0; max-width: 36ch; color: #b9c6cf; }
.ka-ark { font: italic 400 17px var(--font-serif); color: #e8dfc6; letter-spacing: .01em; }
.ka-ark::before {
    content: ""; display: inline-block; width: 15px; height: 9px; margin-inline-end: 7px;
    border: 1.5px solid var(--gold); border-top: 0; border-radius: 0 0 7px 7px; vertical-align: 1px;
}
.ka-voet-basis {
    max-width: 1180px; margin: 0 auto; padding: 12px 28px 20px;
    display: flex; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #a9b6c0;
}
.ka-voet-talen { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.ka-voet-talen span { opacity: .5; }
.ka-voet-taal { background: none; border: 0; padding: 2px 3px; color: #c9d3db; font: inherit; cursor: pointer; border-radius: 4px; }
.ka-voet-taal:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); }
.ka-voet-taal[aria-current="true"] { color: #fff; font-weight: 600; }
.ka-voet #topnav-versie { color: var(--gold); }
.ogw-lezer .ka-voet, .ov-ingebed .ka-voet { display: none; }

/* ---------- 7. Gedeelde componenten ---------- */
.ka-eyebrow {
    margin: 0; font: 600 11.5px var(--font-body); letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold-ink);
}
.ka-eyebrow-aarde { color: var(--clay); }
.ka-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
    border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
    color: var(--ink-2); font-size: 13px; text-decoration: none; white-space: nowrap;
}
a.ka-chip:hover { border-color: var(--gold); color: var(--ink); }
.ka-he { font-family: var(--font-he); font-size: 1.05em; }
.ka-knop {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border: 0; border-radius: 10px;
    background: var(--navy); color: #fff; font: 600 14.5px var(--font-body);
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ka-knop:hover { background: #1d3d56; color: #fff; }
:root[data-theme="donker"] .ka-knop { background: var(--gold); color: #142e42; }
:root[data-theme="donker"] .ka-knop:hover { background: #e2c779; }
.ka-knop.ka-knop-licht, :root[data-theme="donker"] .ka-knop.ka-knop-licht {
    background: transparent; color: var(--ink); border: 1px solid var(--rule);
}
.ka-knop.ka-knop-licht:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
:root[dir="rtl"] .ka-pijl { display: inline-block; transform: scaleX(-1); }
.ka-feiten { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0 16px; font-size: 13.5px; }
.ka-feiten dt { color: var(--muted); }
.ka-feiten dd { margin: 0; color: var(--ink); }

/* ---------- 8. Startscherm ---------- */
#ogw-start { display: none; }
html.ogw-startscherm #ogw-start { display: block; }
html.ogw-startscherm #mobile-topbar,
html.ogw-startscherm #app-container,
html.ogw-startscherm #mobile-footer-nav,
html.ogw-startscherm #mobile-backdrop,
html.ogw-startscherm .zoom-fab,
html.ogw-startscherm #zoom-fab { display: none !important; }
html.ogw-startscherm body { padding-bottom: 0; }

.start-held {
    position: relative; overflow: hidden; border-bottom: 1px solid var(--rule);
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--surface) 75%, transparent), transparent 70%), var(--paper);
}
.start-raster { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); opacity: .32; pointer-events: none; }
.start-held-binnen { position: relative; max-width: 840px; margin: 0 auto; padding: 60px 28px 46px; text-align: center; }
#ogw-start h1 {
    margin: 12px 0 10px; font: 500 clamp(2.2rem, 5vw, 3.3rem)/1.08 var(--font-serif); color: var(--ink);
}
#ogw-start h1 em { color: var(--gold-ink); font-style: italic; }
.start-lead { margin: 0 auto 26px; max-width: 54ch; text-wrap: balance; font: 1.22rem/1.5 var(--font-serif); color: var(--ink-2); }
.start-zoek {
    position: relative; display: flex; align-items: center; max-width: 680px; margin: 0 auto;
    padding: 6px; background: var(--surface); border: 1.5px solid var(--navy); border-radius: 14px;
    box-shadow: var(--shadow); text-align: start;
}
:root[data-theme="donker"] .start-zoek { border-color: var(--gold); }
.start-zoek:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 35%, transparent); }
.start-zoek-veld { display: flex; align-items: center; padding: 0 8px 0 12px; color: var(--muted); }
#start-zoek-input {
    flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
    font: 1.08rem var(--font-body); padding: 11px 4px;
}
#start-zoek-input::placeholder { color: var(--muted); }
:root[data-theme="donker"] #start-zoek-input { background: transparent !important; border: 0 !important; color: var(--ink) !important; }
#start-zoek-input:focus { outline: none; }
.start-zoek-lijst {
    position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 60;
    list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 440px); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.start-zoek-lijst[hidden] { display: none; }
.start-zoek-lijst a {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 9px 12px;
    border-radius: 8px; color: var(--ink); text-decoration: none;
}
.start-zoek-lijst [aria-selected="true"] a, .start-zoek-lijst a:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.sz-naam { font: 500 1.05rem var(--font-serif); }
.sz-nl { color: var(--muted); font-size: .85rem; }
.sz-soort {
    margin-inline-start: auto; font: 600 10.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 14%, transparent); padding: 2px 8px; border-radius: 4px;
}
.sz-soort.sz-aarde { color: var(--clay); background: var(--clay-soft); }
.sz-bijbel { border-top: 1px dashed var(--rule); margin-top: 4px; padding-top: 4px; }
.sz-bijbel .sz-naam { font: 500 .92rem var(--font-body); color: var(--gold-ink); }
.sz-bijbel q { color: var(--ink-2); }
.sz-melding { padding: 9px 12px; color: var(--muted); font-size: .9rem; }
.start-probeer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.start-cijfers { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 28px; margin-top: 28px; font-size: 14px; color: var(--ink-2); }
.start-cijfers b { font: 500 1.4rem var(--font-serif); color: var(--ink); margin-inline-end: 4px; }

.start-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px 44px; }
.start-ingangen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 36px 0 12px; }
.start-ingang {
    display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center;
    padding: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
    color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s;
}
.start-ingang:hover { border-color: var(--gold); transform: translateY(-1px); }
.start-ingang img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; background: var(--paper-2); filter: var(--img-filter); }
.start-ingang h2 { margin: 2px 0 0; font: 500 1.25rem/1.15 var(--font-serif); color: var(--ink); }
.start-ingang p { margin: 0; }
.start-tel { font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); }
.start-uitleg { margin-top: 3px !important; font-size: 13px; line-height: 1.45; color: var(--ink-2); }

.start-onder { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; padding-top: 22px; align-items: start; }
.start-uitgelicht {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
}
.start-uitgelicht[hidden] { display: none; }
.start-uitgelicht-groep { min-width: 0; }
.start-uitgelicht-keuze { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.start-uitgelicht-keuze button { font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 5px; background: var(--paper); color: var(--ink); cursor: pointer; }
.start-uitgelicht-keuze button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.start-uitgelicht-keuze button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.start-uitgelicht figure { margin: 0; position: relative; background: var(--paper-2); min-height: 260px; }
.start-uitgelicht figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.start-uitgelicht figcaption {
    position: absolute; inset-inline: 0; bottom: 0; padding: 20px 12px 8px;
    font-size: 11.5px; color: #f4efe4; background: linear-gradient(transparent, rgba(13,33,49,.85));
}
.start-uitgelicht-tekst { padding: 20px 22px; }
.start-uitgelicht h2 { margin: 6px 0 2px; font: 500 1.7rem/1.1 var(--font-serif); color: var(--ink); }
.start-sig { margin: 0; font: italic 1.02rem var(--font-serif); color: var(--ink-2); }
.start-sig [lang="he"] { font-family: var(--font-he); font-style: normal; }
.start-uitgelicht-tekst > p:not([class]) { font-size: 14.5px; color: var(--ink-2); margin: 10px 0; }
.start-az { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 18px 20px; }
.start-az h2 { margin: 0 0 6px; font: 500 1.3rem var(--font-serif); color: var(--ink); }
.start-az ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; }
.start-az li { break-inside: avoid; display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--rule); font-size: 14px; }
.start-az li a { color: var(--ink); text-decoration: none; }
.start-az li a:hover { color: var(--gold-ink); text-decoration: underline; }
.start-az li span { color: var(--muted); font-variant-numeric: tabular-nums; }
.start-dag { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: var(--paper-2); font-size: 13px; color: var(--ink-2); }
.start-dag p { margin: 0 0 4px; }
.start-dagvers { font: 1.08rem/1.5 var(--font-serif); color: var(--ink); }
.start-dagvers .osv-cite, .start-dagvers .osv-cite * { line-height: 1.45; }
.start-dagvers .ov-naslagtekst-link { order: 2; display: block; margin: 6px 0 0; font-size: 12px; color: var(--gold-ink); border: 0; }
.start-dagvers .ov-naslagtekst { display: flex; flex-direction: column; }

/* ---------- 9. Wiki-schil en wiki-overzicht ---------- */
.wiki-shell { background: var(--paper); min-height: calc(100vh - 102px) !important; }
.wiki-iframe { min-height: calc(100vh - 102px) !important; }
.wiki-sidebar {
    background: var(--surface-2) !important; border-inline-end: 1px solid var(--rule) !important;
    border-right-width: 0; font-family: var(--font-body) !important;
}
:root:not([dir="rtl"]) .wiki-sidebar { border-right: 1px solid var(--rule) !important; }
:root[dir="rtl"] .wiki-sidebar { border-right: 0 !important; border-left: 1px solid var(--rule) !important; }
.wiki-sidebar a { color: var(--ink-2) !important; border-left: 0 !important; border-inline-start: 3px solid transparent; padding-inline: 20px !important; }
.wiki-sidebar a:hover { background: color-mix(in srgb, var(--gold) 9%, transparent) !important; color: var(--ink) !important; }
.wiki-sidebar a.active {
    color: var(--ink) !important; font-weight: 600;
    border-inline-start-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 12%, transparent) !important;
}
.wiki-groep-kop { color: var(--gold-ink) !important; text-align: start !important; }
.wiki-groep + .wiki-groep { border-top: 1px solid var(--rule-soft); padding-top: 4px; }
.wiki-iframe { background: var(--paper); }
.wiki-menu-toggle { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--rule) !important; }

.wo-pagina { max-width: 1120px; }
.wo-pagina .ns-lead { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.55; }
.wo-groeplabel { color: var(--gold-ink); display: flex; align-items: center; gap: 12px; }
.wo-groeplabel::after { content: ""; flex: 1; height: 5px; border-top: 1px solid var(--gold); border-bottom: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); opacity: .7; }
.wo-kaart { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
.wo-kaart img { border-bottom-color: var(--rule); filter: var(--img-filter); }
.wo-kaart h3 { font: 500 1.3rem/1.15 var(--font-serif); color: var(--ink); }
.wo-kaart p { color: var(--ink-2); }
.wo-badge {
    background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-ink);
    font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; border-radius: 4px;
}
:root[data-theme="donker"] .wo-kaart { background: var(--surface); border-color: var(--rule); }
:root[data-theme="donker"] .wo-kaart h3 { color: var(--ink); }
:root[data-theme="donker"] .wo-kaart p { color: var(--ink-2); }

/* ---------- 10. Naslag: overzicht en lemma ---------- */
.ns-lead {
    border-inline-start: 3px solid var(--gold); border-left-width: 0;
    background: linear-gradient(to right, color-mix(in srgb, var(--gold) 10%, transparent), transparent 85%);
    border-radius: 0 8px 8px 0; color: var(--ink-2);
}
:root:not([dir="rtl"]) .ns-lead { border-left: 3px solid var(--gold); }
:root[dir="rtl"] .ns-lead { border-left: 0; border-right: 3px solid var(--gold); border-radius: 8px 0 0 8px;
    background: linear-gradient(to left, color-mix(in srgb, var(--gold) 10%, transparent), transparent 85%); }
.ns-zoek-label { color: var(--ink); }
.ns-zoeken { background: var(--surface); border-color: var(--rule); color: var(--ink); border-radius: 10px; }
.page #naslag { max-width: 1120px; margin-inline: auto; }
.ns-rooster { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ns-kaart { background: var(--surface); border-color: var(--rule); border-radius: var(--r-md); color: var(--ink); }
.ns-kaart:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow); }
.ns-kaart-beeld { border-bottom-color: var(--rule); filter: var(--img-filter); border-radius: 9px 9px 0 0; }
.ns-kaart-naam { font: 500 1.2rem/1.15 var(--font-serif); color: var(--ink); }
.ns-kaart-beschrijving { color: var(--ink-2); }
.ns-kaart-tal { color: var(--gold-ink); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: auto; padding-top: 4px; }
.ns-type { background: color-mix(in srgb, var(--sage) 18%, transparent); color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; }
.ns-nummer { color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 16%, transparent); }
:root[data-theme="donker"] .ns-kaart { background: var(--surface); }
:root[data-theme="donker"] .ns-kaart-naam { color: var(--ink); }
:root[data-theme="donker"] .ns-kaart-beschrijving, :root[data-theme="donker"] .ns-beschrijving { color: var(--ink-2); }
:root[data-theme="donker"] .ns-zoeken { background: var(--surface); color: var(--ink); }

/* Kruimelpad (terug naar de reeks) */
.ns-terug, .kruimel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.ns-terug a, .kruimel a { color: var(--ink-2) !important; text-decoration: none; border-bottom: 1px solid var(--rule); }
.ns-terug a:hover, .kruimel a:hover { color: var(--ink) !important; border-color: var(--gold); }

/* Lemma: tekst links, feitenkader rechts (spiegelt in RTL) */
.ns-lemma { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.ns-lemma-kop { padding: 4px 0 0; }
.ns-lemma-kop h1 { margin: 6px 0 8px !important; }
.ns-lemma-orig { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: 14px; }
.ns-lemma-orig i { font-family: var(--font-serif); }
.ns-lemma .ns-beschrijving {
    font: 1.28rem/1.55 var(--font-serif); color: var(--ink); max-width: 66ch; margin: 0 0 14px;
}
.ns-lemma .ns-beschrijving::first-letter {
    float: inline-start; font-size: 3.1em; line-height: .82; padding-inline-end: 8px; padding-top: 6px; color: var(--gold-ink);
}
.ns-lemma .ns-onderscheiding { font: italic 1.05rem var(--font-serif); color: var(--ink-2); }
.ns-lemma .ns-naamvormen { font-size: 14px; color: var(--ink-2); }
.ns-kop {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 30px 0 12px; padding-bottom: 6px;
    font: 500 1.5rem/1.2 var(--font-serif) !important; color: var(--ink) !important;
    border-bottom: 1px solid var(--rule) !important;
}
.ns-kop-tal { font: 500 12px var(--font-body); color: var(--gold-ink); white-space: nowrap; }
.ns-infobox {
    position: sticky; top: 92px; align-self: start;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--shadow);
}
.ns-infobox figure { margin: 0; background: var(--paper-2); }
.ns-infobox figure img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: var(--img-filter); }
.ns-infobox dl { margin: 0; padding: 6px 16px 4px; }
.ns-infobox .ns-rij { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
.ns-infobox .ns-rij:last-child { border-bottom: 0; }
.ns-infobox dt { color: var(--muted); }
.ns-infobox dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.ns-infobox .ns-groot { font: 500 1.6rem/1 var(--font-serif); }
.ns-infobox-acties { display: grid; gap: 8px; padding: 12px 16px 16px; }
.ns-infobox-acties .ka-knop { width: 100%; white-space: normal; text-align: center; }
.ns-status {
    display: flex; gap: 8px; align-items: flex-start; padding: 10px 16px;
    background: var(--clay-soft); border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-2);
}
.ns-status .ka-i { color: var(--clay); margin-top: 2px; }
.ns-status b { color: var(--clay); }
.ns-externe-bron a { color: var(--gold-ink); }
.ns-lemma .ns-detail-beeld { display: none; }  /* het beeld staat in het feitenkader */
.ns-lemma-zonder-kader { grid-template-columns: minmax(0, 1fr); }

/* Verwant */
.ns-verwant { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ns-verwant a { display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; color: var(--ink); text-decoration: none; }
.ns-verwant a:hover { border-color: var(--gold); }
.ns-verwant img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--paper-2); filter: var(--img-filter); }
.ns-verwant-naam { padding: 8px 10px 10px; font: 500 1.08rem/1.2 var(--font-serif); }
.ns-verwant-leeg { display: block; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--paper-2), var(--surface-2)); }
/* Spreiding door de Bijbel */
.ns-spreiding-balk { display: flex; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid var(--rule); }
.ns-spreiding-balk span { display: block; height: 100%; }
.ns-spreiding-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--ink-2); }
.ns-spreiding-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 6px; vertical-align: -1px; }
.ns-sp-ot { background: #142e42; }
.ns-sp-ap { background: #cba449; }
.ns-sp-et { background: #9a4a2a; }
.ns-sp-nt { background: #76978a; }
:root[data-theme="donker"] .ns-sp-ot { background: #5b7f93; }
.ns-gebruik { list-style: none; margin: 0; padding: 0; }
ol.ns-terug { list-style: none; padding: 0; }
ol.ns-terug li[aria-hidden] { opacity: .6; }
.ns-infobox .ns-externe-bron { margin: 2px 0 0; text-align: center; font-size: 13.5px; }
.ns-status p { margin: 0; }

/* Personen: familie */
.ps-familie ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.ps-familie li { border-bottom: 1px dotted var(--rule); padding: 5px 0; }
.ps-familie a { color: var(--ink); font-family: var(--font-serif); font-size: 1.08rem; }
.ps-keuze a.active { color: var(--ink); }

/* ---------- 11. Citaatkaartjes (gekoppelde teksten) ---------- */
.gt-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: none; }
.gt-vers, .gt-vers:first-child {
    position: relative; display: flex; flex-direction: column; padding: 14px 18px 12px;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
    box-shadow: 0 1px 0 var(--rule-soft);
}
.gt-vers::before {
    content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--gold);
}
:root[dir="rtl"] .gt-vers::before { border-radius: 3px 0 0 3px; }
.gt-vers-kop > a { color: var(--navy) !important; font: 600 12.5px var(--font-body) !important; letter-spacing: .04em; }
:root[data-theme="donker"] .gt-vers-kop > a { color: var(--gold) !important; }
.gt-vers-tekst { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.gt-plus, .gt-min { width: 28px; height: 28px; line-height: 26px; font-size: 16px; color: var(--gold-ink); border-color: var(--rule); }
.gt-meer-teksten { color: var(--gold-ink); border-color: var(--rule); grid-column: 1 / -1; justify-self: start; }
.ns-lemma .gt-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Liederen en gebeden: het citaat als 'pull quote'. */
.ns-liedcitaat { border-left: 0 !important; border-inline-start: 3px solid var(--gold) !important; }
.ns-liedcitaat .gt-lijst { grid-template-columns: 1fr; }
:root[data-theme="donker"] .gt-vers-tekst, :root[data-theme="donker"] .gt-vers-tekst .focus-vers { color: var(--ink); }

/* ---------- 12. Plaats, kaart, geografie, archeologie ---------- */
#plaats-inhoud.page { max-width: 1120px; margin: 0 auto; }
#plaats-inhoud h1 { font: 500 clamp(2.4rem, 5vw, 3.4rem)/1 var(--font-serif) !important; color: var(--ink) !important; margin: 6px 0 10px; }
#plaats-inhoud h2 { font: 500 1.5rem/1.2 var(--font-serif) !important; color: var(--ink) !important; border-bottom: 1px solid var(--rule) !important; }
#plaats-inhoud .intro { font: 1.2rem/1.55 var(--font-serif); color: var(--ink); max-width: 66ch; }
.pl-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.pl-coords { font: italic 1.05rem var(--font-serif); color: var(--ink-2); }
.pl-kpis { display: flex; gap: 22px; text-align: end; }
.pl-kpis b { display: block; font: 500 1.9rem/1 var(--font-serif); color: var(--ink); }
.pl-kpis span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.gegeven { background: var(--surface) !important; border-color: var(--rule) !important; border-radius: var(--r-md) !important; }
.gegeven dt { color: var(--muted) !important; }
.gegeven dd { color: var(--ink) !important; }
.kaart-cta { background: var(--navy) !important; border-radius: 10px !important; }
.kaart-cta:hover { background: #1d3d56 !important; }
:root[data-theme="donker"] .kaart-cta { background: var(--gold) !important; color: #142e42 !important; }
.badge.z-zeker { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--teal); }
.badge.z-onzeker, .badge.z-waarschijnlijk { background: var(--clay-soft); color: var(--clay); }
.tekstverwijzingen { columns: 3 200px !important; }
.tekstverwijzingen li { border-color: var(--rule) !important; }
.pl-kpis div { min-width: 64px; }
.tekstverwijzingen a, .bron a { color: var(--gold-ink) !important; }
.bron { background: var(--surface) !important; border: 1px solid var(--rule); border-left-width: 1px !important; border-inline-start: 3px solid var(--gold) !important; border-radius: var(--r-md); }
/* Archeologie: het kader in aardetinten */
#plaats-archeologie {
    margin: 26px 0; padding: 4px 22px 18px; background: var(--surface);
    border: 1px solid var(--rule); border-radius: var(--r-lg); position: relative;
}
#plaats-archeologie::before {
    content: ""; position: absolute; inset-block: 18px; inset-inline-start: -1px; width: 3px; background: var(--clay); border-radius: 3px;
}
#plaats-archeologie h2 { color: var(--clay) !important; border-bottom-color: color-mix(in srgb, var(--clay) 30%, var(--rule)) !important; }
#plaats-archeologie h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; color: var(--ink); }

/* Kaartpagina: rustiger, als een atlasblad */
.kaart-paneel, .kaart-zijpaneel { background: var(--surface); }

/* Geografie- en overige overzichtstabellen */
table { border-color: var(--rule); }
th { color: var(--ink); }

/* ---------- 13. Handschriften en woordenboeken ---------- */
.hs-kaart, .ms-kaart, .handschrift-kaart { background: var(--surface); border-color: var(--rule); border-radius: var(--r-md); }

/* ---------- 14. De lezer ---------- */
.ogw-lezer #content { background: var(--paper); }
#chapter-title { font-family: var(--font-serif); }

/* ---------- 15. Arabisch (RTL) ---------- */
:root[lang="ar"] body { line-height: 1.8; }
:root[lang="ar"] .ka-eyebrow, :root[lang="ar"] .topnav-sub, :root[lang="ar"] .ka-voet h2,
:root[lang="ar"] .start-tel, :root[lang="ar"] .sz-soort, :root[lang="ar"] .wo-groeplabel,
:root[lang="ar"] .wo-badge, :root[lang="ar"] .ns-type, :root[lang="ar"] .ns-kaart-tal,
:root[lang="ar"] .pl-kpis span { letter-spacing: 0; text-transform: none; }
:root[lang="ar"] #ogw-start h1, :root[lang="ar"] .start-lead, :root[lang="ar"] .ns-lemma .ns-beschrijving,
:root[lang="ar"] #plaats-inhoud .intro { line-height: 1.9; }
:root[lang="ar"] #ogw-start h1 em, :root[lang="ar"] .start-sig, :root[lang="ar"] .ttp-bijbel { font-style: normal; }
:root[lang="ar"] .ns-lemma .ns-beschrijving::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; }
:root[lang="ar"] .topnav-sub { font-size: 11px; }
/* Merk en zustersites blijven Latijns en links-naar-rechts. */
:root[dir="rtl"] .topnav-woordmerk { direction: ltr; }
:root[dir="rtl"] .topnav-woordmerk { text-align: right; }

/* ---------- 16. Smalle schermen ---------- */
@media (max-width: 1100px) {
    .ns-lemma { grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; }
    .start-ingangen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    /* Mobiel: kop, dan het feitenkader, dan de lopende tekst. */
    .ns-lemma { display: flex; flex-direction: column; gap: 0; }
    .ns-lemma-tekst { display: contents; }
    .ns-lemma-kop, .ns-lemma > .ns-lemma-tekst > .ka-dubbellijn:first-of-type { order: -2; }
    .ns-infobox { margin: 4px 0 18px; }
    .ns-infobox { position: static; order: -1; display: grid; grid-template-columns: 160px minmax(0, 1fr); }
    .ns-infobox figure { grid-row: span 3; }
    .ns-infobox figure img { height: 100%; }
    .ns-verwant { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gt-lijst, .ns-lemma .gt-lijst { grid-template-columns: 1fr; }
    .start-onder, .start-uitgelicht { grid-template-columns: 1fr; }
    .start-uitgelicht figure { min-height: 220px; }
    .ka-voet-binnen { grid-template-columns: 1fr 1fr; }
    .pl-kop { grid-template-columns: 1fr; }
    .pl-kpis { text-align: start; }
}
@media (max-width: 768px) {
    #topnav .topnav-brand { flex: 1 1 0; min-width: 0; }
    #topnav .topnav-brand-link { min-width: 0; width: 100%; }
    #topnav .topnav-woordmerk { min-width: 0; flex: 1 1 0; width: 0; }
    #topnav .topnav-merknaam { white-space: normal; line-height: 1.1; font-size: 18px; }
    #topnav { padding: 0 12px; gap: 8px; }
    .topnav-logo-svg { width: 30px; height: 30px; }
    #topnav .topnav-merknaam { font-size: 20px; }
    .topnav-sub { display: none; }
    .topnav-taal-naam { display: none; }
    .topnav-taal-knop { height: 36px; padding: 0 9px; gap: 5px; }
    .topnav-taal-knop .ka-i { display: none; }
    .topnav-zoek { width: 36px; height: 36px; }
    #topnav .topnav-theme { display: none; }
    #topnav .topnav-weergave { display: inline-flex; width: 36px; min-height: 36px; height: 36px; padding: 0; gap: 0; margin: 0; }
    #topnav .topnav-weergave span { display: none; }
    #topnav .topnav-links { position: absolute; top: 100%; }
    .topnav-tools { gap: 6px; }
    .start-held-binnen { padding: 36px 16px 30px; }
    .start-wrap { padding: 0 16px 32px; }
    .start-ingangen { grid-template-columns: 1fr; padding-top: 22px; }
    .start-zoek .ka-knop { padding: 10px 12px; }
    .start-az ul { columns: 1; }
    .ka-voet-binnen { grid-template-columns: 1fr; padding: 24px 16px 12px; }
    .ka-voet-basis { padding: 12px 16px 18px; }
    .ns-infobox { grid-template-columns: 110px minmax(0, 1fr); }
    .ns-infobox .ns-rij { grid-template-columns: 90px 1fr; }
}
@media (max-width: 420px) {
    .start-zoek { flex-wrap: wrap; }
    .start-zoek .ka-knop { width: 100%; margin-top: 6px; }
    .ns-infobox { grid-template-columns: 1fr; }
    .ns-infobox figure { grid-row: auto; }
    .ns-infobox figure img { aspect-ratio: 16/9; height: auto; }
    .ns-verwant { grid-template-columns: 1fr 1fr; }
    #topnav .topnav-merknaam { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .start-ingang, .ns-kaart, .wo-kaart { transition: none; }
    .start-ingang:hover, .ns-kaart:hover, .wo-kaart:hover { transform: none; }
}

/* ---------- 17. Donker: oude !important-regels uit style.css bijsturen ---------- */
/* De bovenbalk was in donker 'echt zwart'; de familie gebruikt nachtblauw. */
:root[data-theme="donker"] #topnav { background: var(--navy-deep) !important; }
/* style.css keerde ingebedde pagina's om; die tekenen nu zelf hun donkere modus. */
:root[data-theme="donker"] iframe.wiki-iframe { filter: none; }
:root[data-theme="donker"] footer.ka-voet { background: var(--navy-deep) !important; color: #cfd8df !important; }
:root[data-theme="donker"] .ka-voet a { color: #e6ecf0 !important; }
:root[data-theme="donker"] .ka-voet #topnav-versie { color: var(--gold) !important; }
:root[data-theme="donker"] .ka-knop:not(.ka-knop-licht),
:root[data-theme="donker"] .page a.ka-knop:not(.ka-knop-licht),
:root[data-theme="donker"] .kaart-cta,
:root[data-theme="donker"] .page a.kaart-cta {
    background: var(--gold) !important; color: #142e42 !important; border-color: var(--gold) !important;
}
:root[data-theme="donker"] .ka-knop.ka-knop-licht,
:root[data-theme="donker"] .page a.ka-knop-licht { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; }
:root[data-theme="donker"] .ttp-taal { background: transparent; color: var(--ink); }
:root[data-theme="donker"] .ttp-taal:hover { background: var(--surface-2); }
:root[data-theme="donker"] .ttp-taal[aria-current="true"] { background: color-mix(in srgb, var(--gold) 18%, transparent); }
:root[data-theme="donker"] .topnav-taal-knop { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(203,164,73,.6); }
:root[data-theme="donker"] .ka-voet-taal { background: none; color: #c9d3db; }
:root[data-theme="donker"] .start-zoek-lijst a, :root[data-theme="donker"] .start-az li a,
:root[data-theme="donker"] .start-ingang, :root[data-theme="donker"] .ns-verwant a { color: var(--ink); }
:root[data-theme="donker"] .page .ns-kaart, :root[data-theme="donker"] .page .ns-verwant a { color: var(--ink) !important; }
:root[data-theme="donker"] .page .ns-terug a, :root[data-theme="donker"] .page .kruimel a { color: var(--ink-2) !important; }
:root[data-theme="donker"] .gt-meer-teksten, :root[data-theme="donker"] .gt-plus, :root[data-theme="donker"] .gt-min { background: transparent; color: var(--gold-ink); }
/* Uitklapmenu in donker: nachtblauw; inlogknop in het menu mét tekst. */
@media (max-width: 1180px) {
    :root[data-theme="donker"] #topnav .topnav-links { background: var(--navy-deep) !important; }
}
#topnav .topnav-links .topnav-auth .auth-btn span { display: inline; }