*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --rood: #c0392b; --blauw: #1a3a5c; --goud: #e8b84b;
  --licht: #f7f3ed; --donker: #1a1a1a; --grijs: #6f6f6f; --lijn: #e0d8cc;
  --mono: 'Courier New', monospace; --sans: Arial, Helvetica, sans-serif; --serif: Georgia, 'Times New Roman', serif;
}
html, body { overflow-x: hidden; }
body { background: var(--licht); font-family: var(--mono); color: var(--donker); min-height: 100vh; }
a { color: var(--blauw); }
a:hover { color: var(--rood); }

/* Zustersites */
.sites-nav { background: var(--donker); }
.sites-nav-inner { max-width: 960px; margin: 0 auto; padding: 0 12px; display: flex; flex-wrap: wrap; }
.sites-nav a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 9px 12px; display: block; }
.sites-nav a:hover { color: var(--goud); }
.sites-nav a.actief { color: var(--goud); font-weight: 700; }

/* Header */
header { background: var(--blauw); border-bottom: 5px solid var(--goud); position: relative; overflow: hidden; }
header::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--rood); }
header::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 8px; background: var(--goud); }
.header-inner { padding: 26px 40px 22px; max-width: 960px; margin: 0 auto; }
@media (max-width: 600px) { .header-inner { padding: 18px 22px 16px; } }
.header-label { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.logo { font-size: clamp(28px, 6vw, 52px); font-weight: 700; color: white; letter-spacing: 1px; line-height: 1; text-decoration: none; display: inline-block; }
.logo span { color: var(--goud); }
.logo:hover { color: white; }
@media (max-width: 600px) { .header-label { letter-spacing: 2px; } }
.tagline { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: 1px; }

/* Hoofdmenu */
.menu { background: white; border-bottom: 2px solid var(--donker); }
.menu-inner { max-width: 960px; margin: 0 auto; padding: 0 12px; display: flex; flex-wrap: wrap; }
.menu a { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--donker); text-decoration: none; padding: 12px 12px; display: block; border-bottom: 3px solid transparent; }
.menu a:hover { color: var(--blauw); border-bottom-color: var(--goud); }
.menu a.actief { color: var(--blauw); border-bottom-color: var(--blauw); }
@media (max-width: 600px) { .menu a { font-size: 13px; padding: 10px 9px; } }

main { max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; }
main.smal { max-width: 760px; }

/* Kruimelpad */
.kruimels { font-family: var(--sans); font-size: 12px; color: var(--grijs); margin-bottom: 18px; }
.kruimels a { color: var(--grijs); }

/* Laadstatus */
#laad-status { text-align: center; padding: 20px; font-size: 12px; letter-spacing: 2px; color: var(--grijs); text-transform: uppercase; }
.laad-balk { width: 100%; height: 3px; background: var(--lijn); margin-top: 10px; overflow: hidden; }
.laad-voortgang { height: 100%; background: var(--blauw); animation: laden 1.5s ease-in-out infinite; }
@keyframes laden { 0% { width: 0%; margin-left: 0; } 50% { width: 60%; margin-left: 20%; } 100% { width: 0%; margin-left: 100%; } }

/* Zoekveld */
.zoek-blok { background: white; border: 2px solid var(--donker); padding: 24px; margin-bottom: 28px; box-shadow: 4px 4px 0 var(--donker); }
@media (max-width: 600px) { .zoek-blok { padding: 16px; } }
.zoek-label { font-size: 15px; font-weight: 700; color: var(--donker); margin-bottom: 12px; display: block; font-family: var(--sans); }
.zoek-rij { display: flex; width: 100%; }
#invoer { flex: 1; min-width: 0; font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: 2px; border: 2px solid var(--donker); border-right: none; background: #f9f7f3; color: var(--blauw); outline: none; padding: 12px 16px; border-radius: 0; -webkit-appearance: none; }
@media (max-width: 600px) { #invoer { font-size: 18px; padding: 10px 12px; } }
#invoer::placeholder { color: #aaa; font-weight: 400; letter-spacing: 1px; font-size: 17px; }
#invoer:focus { background: white; border-color: var(--blauw); }
#invoer:disabled { opacity: 0.4; cursor: not-allowed; }
.wis-btn { background: #f0ece4; color: var(--grijs); border: 2px solid var(--donker); border-right: none; padding: 12px 14px; font-size: 18px; line-height: 1; cursor: pointer; display: none; flex-shrink: 0; }
.wis-btn:hover { background: var(--rood); color: white; }
.wis-btn.zichtbaar { display: block; }
.zoek-btn { background: var(--blauw); color: white; border: 2px solid var(--donker); padding: 12px 20px; font-size: 20px; cursor: pointer; flex-shrink: 0; }
.zoek-btn:hover { background: var(--rood); }

.status-balk { padding: 14px 20px; background: var(--blauw); color: white; display: flex; align-items: center; gap: 14px; margin-bottom: 24px; border: 2px solid var(--donker); box-shadow: 3px 3px 0 var(--donker); }
.status-getal { font-size: 38px; font-weight: 700; color: var(--goud); line-height: 1; }
.status-tekst { font-size: 14px; opacity: 0.9; font-family: var(--sans); }

.sectie-header { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--donker); }
.sectie-naam { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--goud); color: var(--donker); padding: 5px 14px; font-family: var(--sans); }
.sectie-naam.grijs { background: #ddd; color: #444; }

.woorden-grid { columns: 4; column-gap: 16px; margin-bottom: 28px; }
@media (max-width: 700px) { .woorden-grid { columns: 2; } }
.woord { display: block; padding: 6px 0; font-size: 15px; font-weight: 700; color: var(--donker); border-bottom: 1px solid var(--lijn); break-inside: avoid; cursor: pointer; text-decoration: none; }
.woord:hover { color: var(--blauw); }
.woord.verwant { color: #666; font-weight: 600; }

.uitleg-link { display: inline-block; margin: 0 0 24px; font-family: var(--sans); font-size: 14px; font-weight: 700; }

.niet-gevonden { background: white; border: 2px solid #ddd; padding: 24px; text-align: center; font-family: var(--sans); }
.niet-gevonden p { color: var(--grijs); margin-bottom: 8px; }
.suggesties { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.suggestie { padding: 6px 14px; background: var(--licht); border: 1px solid #ccc; font-size: 13px; cursor: pointer; font-family: var(--mono); font-weight: 700; color: var(--donker); }
.suggestie:hover { background: var(--blauw); color: white; border-color: var(--blauw); }
.leeg { text-align: center; padding: 28px 24px 8px; color: #999; font-family: var(--sans); font-size: 14px; }

/* Blokken op homepage */
.blok { margin-top: 44px; }
.blok h2, .tekst h2 { font-family: var(--sans); font-size: 21px; font-weight: 700; color: var(--blauw); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); font-weight: 700; font-size: 15px; padding: 7px 14px; background: white; border: 2px solid var(--donker); box-shadow: 2px 2px 0 var(--donker); color: var(--donker); text-decoration: none; }
.chip:hover { background: var(--blauw); color: white; }
.letters { display: flex; flex-wrap: wrap; gap: 6px; }
.letters a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--blauw); color: white; font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid var(--donker); text-transform: uppercase; }
.letters a:hover, .letters a.actief { background: var(--goud); color: var(--donker); }
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kaart { background: white; border: 2px solid var(--donker); box-shadow: 4px 4px 0 var(--donker); padding: 18px; text-decoration: none; color: var(--donker); display: block; }
.kaart:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--donker); color: var(--donker); }
.kaart strong { display: block; font-family: var(--sans); font-size: 16px; color: var(--blauw); margin-bottom: 6px; }
.kaart span { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: #555; }

/* Lopende tekst */
.tekst p, .tekst li { font-family: var(--serif); font-size: 16px; line-height: 1.75; color: #333; }
.tekst p { margin-bottom: 14px; }
.tekst ul, .tekst ol { margin: 0 0 16px 22px; }
.tekst li { margin-bottom: 8px; }
.tekst h2 { margin-top: 30px; }
.tekst h1, h1.paginatitel { font-family: var(--sans); font-size: clamp(24px, 4.5vw, 34px); line-height: 1.2; color: var(--donker); margin-bottom: 14px; }
.intro { font-family: var(--serif); font-size: 18px; line-height: 1.7; color: #333; margin-bottom: 22px; }
.voorbeelden { background: white; border-left: 4px solid var(--goud); padding: 14px 18px; margin: 0 0 20px; }
.voorbeelden li { font-style: italic; }
.kader { background: white; border: 2px solid var(--donker); box-shadow: 4px 4px 0 var(--donker); padding: 20px; margin: 20px 0 28px; }
.kader .woorden-grid { margin-bottom: 0; }

/* A-Z lijst */
.lemma { padding: 10px 0; border-bottom: 1px solid var(--lijn); font-family: var(--sans); font-size: 14px; line-height: 1.6; color: #444; }
.lemma a.kop { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--donker); text-decoration: none; margin-right: 6px; }
.lemma a.kop:hover { color: var(--blauw); text-decoration: underline; }

/* FAQ */
.faq details { background: white; border: 2px solid var(--donker); margin-bottom: 10px; }
.faq summary { font-family: var(--sans); font-weight: 700; font-size: 15px; padding: 14px 16px; cursor: pointer; }
.faq details p { font-family: var(--serif); font-size: 15px; line-height: 1.7; color: #333; padding: 0 16px 14px; }

/* Formulier */
.formulier label { display: block; font-family: var(--sans); font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
.formulier input, .formulier textarea { width: 100%; font-family: var(--sans); font-size: 16px; padding: 10px 12px; border: 2px solid var(--donker); background: white; border-radius: 0; }
.formulier textarea { min-height: 150px; resize: vertical; }
.formulier button { margin-top: 18px; background: var(--blauw); color: white; border: 2px solid var(--donker); padding: 12px 24px; font-family: var(--sans); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 3px 3px 0 var(--donker); }
.formulier button:hover { background: var(--rood); }
.verborgen { position: absolute; left: -9999px; }

footer { max-width: 960px; margin: 0 auto; padding: 20px; border-top: 3px solid var(--donker); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.vlag-rij { display: flex; gap: 6px; }
.vlag { width: 14px; height: 14px; border: 2px solid var(--donker); }
.copy { font-size: 11px; color: var(--grijs); letter-spacing: 1px; font-family: var(--sans); }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { font-size: 12px; color: var(--grijs); text-decoration: none; font-family: var(--sans); }
.footer-links a:hover { color: var(--blauw); text-decoration: underline; }

/* ---------- Rijmkist-specifiek ---------- */
@media (max-width: 600px) { .menu-inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .menu-inner::-webkit-scrollbar { display: none; } .menu a { white-space: nowrap; } }
.sectie { margin-bottom: 26px; }
.sectie-count { font-size: 12px; color: var(--grijs); font-family: var(--sans); }
.woord.zeldzaam { font-weight: 400; color: #555; }
.meer-knop { margin: -14px 0 10px; background: white; border: 2px solid var(--donker); padding: 6px 14px; font-family: var(--sans); font-weight: 700; font-size: 13px; cursor: pointer; }
.meer-knop:hover { background: var(--goud); }
.tekst blockquote, blockquote.rijm { background: white; border-left: 5px solid var(--goud); padding: 16px 20px; margin: 0 0 20px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.8; color: #222; box-shadow: 3px 3px 0 var(--donker); border-top: 2px solid var(--donker); border-right: 2px solid var(--donker); border-bottom: 2px solid var(--donker); }
.tip-kader { background: #fff8e6; border: 2px solid var(--goud); padding: 14px 18px; margin: 0 0 22px; font-family: var(--sans); font-size: 15px; line-height: 1.6; }
.thema { margin-top: 26px; }