/* Zoekmachinepagina's (tools/seo-paginas.mjs, docs/seo.md): losse, lichte pagina's zonder de app. De kleuren zijn de
   standaardtokens uit app.css (:root); houd ze gelijk als die veranderen. */
@font-face { font-family: "Cinzel Decorative"; src: url("../assets/fonts/cinzel-decorative-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../assets/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
:root { --bg: #0d0f24; --bg-2: #161a3a; --panel: #1a1e42; --line: rgba(255, 255, 255, .12); --text: #eef0ff; --muted: #a6abd6;
  --gold: #f5c451; --gold-2: #e09b2d; --on-gold: #2a1c05; --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Cinzel Decorative", Georgia, serif; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; font: 1.05rem/1.6 var(--font); color: var(--text); background: radial-gradient(1200px 600px at 20% -10%, rgba(143, 123, 255, .18), transparent 60%), var(--bg); }
a { color: var(--gold); }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sp-kop { padding: 16px max(16px, 4vw); }
.sp-merk { font: 700 1.5rem var(--display); text-decoration: none; color: var(--gold); letter-spacing: .04em; }
.sp-main { width: min(860px, 100% - 32px); margin: 0 auto; padding: 8px 0 40px; }
.sp-kruimel { font-size: .85rem; color: var(--muted); margin-bottom: 12px; }
.sp-kruimel a { color: var(--muted); }
h1 { font: 700 clamp(1.7rem, 4.5vw, 2.5rem)/1.2 var(--display); color: var(--gold); margin: .2em 0 .4em; }
h2 { font: 800 1.3rem/1.3 var(--font); margin: 1.8em 0 .5em; }
.sp-lead { font-size: 1.2rem; color: var(--text); }
.sp-zacht { color: var(--muted); font-size: .92rem; }
ul { padding-left: 1.2em; }
li { margin: .3em 0; }
.sp-kolommen, .sp-vakken { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px; }
.sp-vakken { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sp-vakken li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.sp-vakken a { text-decoration: none; }
.sp-knop { display: inline-block; min-height: 44px; padding: 10px 22px; border-radius: 14px; background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: var(--on-gold); font-weight: 800; text-decoration: none; }
.sp-knop:hover { filter: brightness(1.08); }
.sp-voet { border-top: 1px solid var(--line); padding: 20px max(16px, 4vw); text-align: center; font-size: .8rem; color: var(--muted); }
.sp-voet p { margin: .3em 0; }
.sp-voet a { color: var(--muted); }