/*
 * De andere pagina's in de nieuwe look (18 sep 2026).
 *
 * Deze pagina's hebben hun eigen onderdelen in styles.css (tabellen, vragen,
 * tegels, rekenhulp). Die blijven. Dit bestand komt erna en zet ze in de
 * kleuren en letters van de homepage (Folio), met dezelfde balk bovenaan.
 * De site is licht, ook als het toestel op donker staat, net als de homepage.
 */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=Comfortaa:wght@700&display=swap");

:root,
:root[data-theme="dark"] {
  --bone: #efece4;
  --snow: #ffffff;
  --whisper: #f6f3eb;
  --stone: #6c6a62;
  --mist: #e4dfd4;
  --kop: "Instrument Serif", Georgia, "Times New Roman", serif;
  --tekst: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --breedte: 1200px;
  --pil: 999px;

  --bg: #efece4; --bg-tint: #f6f3eb; --surface: #ffffff; --line: #e4dfd4;
  --ink: #13120f; --muted: #6c6a62; --on-c: #13120f;
  --primary: #13120f; --primary-hover: #2a2823; --primary-ink: #ffffff;
  --focus: #13120f;
  --shadow-s: 0 1px 2px rgba(19,18,15,.04), 0 6px 16px rgba(19,18,15,.05);
  --shadow: 0 1px 2px rgba(19,18,15,.04), 0 12px 28px rgba(19,18,15,.07);
  --font: var(--tekst);
  --warn-t:#FFEAE6; --warn-d:#A63222;
  --todo-bg:#FFEC9E; --todo-ink:#4F3A00;
  --leden-t:#E4F9EE; --leden-d:#0A6B3F;
  --geld-t:#E3F2FF;  --geld-d:#0B5796;
  --zaal-t:#FFF6D9;  --zaal-d:#7A5200;
  --event-t:#FFEAE6; --event-d:#A63222;
  --kassa-t:#F0EBFF; --kassa-d:#5A3DC0;
  --web-t:#DDF8F7;   --web-d:#0A6664;
  --basis-t:#F0FADF; --basis-d:#466B0F;
  --ai-t:#FFE9F5;    --ai-d:#A01F68;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #efece4; --bg-tint: #f6f3eb; --surface: #ffffff; --line: #e4dfd4;
    --ink: #13120f; --muted: #6c6a62;
    --primary: #13120f; --primary-hover: #2a2823; --primary-ink: #ffffff;
    --focus: #13120f;
    --shadow-s: 0 1px 2px rgba(19,18,15,.04), 0 6px 16px rgba(19,18,15,.05);
    --shadow: 0 1px 2px rgba(19,18,15,.04), 0 12px 28px rgba(19,18,15,.07);
    --warn-t:#FFEAE6; --warn-d:#A63222;
    --todo-bg:#FFEC9E; --todo-ink:#4F3A00;
    --leden-t:#E4F9EE; --leden-d:#0A6B3F;
    --geld-t:#E3F2FF;  --geld-d:#0B5796;
    --zaal-t:#FFF6D9;  --zaal-d:#7A5200;
    --event-t:#FFEAE6; --event-d:#A63222;
    --kassa-t:#F0EBFF; --kassa-d:#5A3DC0;
    --web-t:#DDF8F7;   --web-d:#0A6664;
    --basis-t:#F0FADF; --basis-d:#466B0F;
    --ai-t:#FFE9F5;    --ai-d:#A01F68;
    color-scheme: light;
  }
}

/* ---------- Basis ---------- */
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--tekst);
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--bone); }
a { color: var(--ink); }
a:hover { color: var(--stone); }

h1, h2 {
  font-family: var(--kop);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
}
h1 { font-size: clamp(2.8rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h1 em, h2 em { font-style: italic; }
h3 { font-family: var(--tekst); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Knoppen ---------- */
.btn { font-family: var(--tekst); font-weight: 500; font-size: 15px; min-height: 48px; border-width: 1px; }
.btn-primary,
.closing .btn-primary {
  background: var(--ink); color: var(--snow); border-color: var(--ink);
  box-shadow: none;
}
.btn-primary:hover,
.closing .btn-primary:hover { background: #2a2823; color: var(--snow); }

/* ---------- De balk (gelijk aan de homepage) ---------- */
.vak { max-width: var(--breedte); margin: 0 auto; padding: 0 24px; }
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border-radius: var(--pil);
  font: 500 15px/1 var(--tekst); text-decoration: none;
  border: 1px solid var(--ink); transition: background .18s ease, color .18s ease;
}
.knop--vol { background: var(--ink); color: var(--snow); }
.knop--vol:hover { background: #2a2823; color: var(--snow); }

.balk-wrap { position: sticky; top: 0; z-index: 50; margin: 0; padding: 14px 24px; }
.balk {
  max-width: var(--breedte); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.merk {
  font-family: "Comfortaa", var(--tekst); font-weight: 700; font-size: 1.45rem; line-height: 1;
  letter-spacing: -0.04em; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: .38em;
}
.merk:hover { color: var(--ink); }
.merk__teken { width: 1.15em; height: 1.15em; flex: none; }
.nav-pil {
  display: inline-flex; align-items: center; gap: 4px; list-style: none; margin: 0;
  padding: 6px; background: var(--snow); border: 1px solid var(--mist); border-radius: var(--pil);
  box-shadow: 0 1px 2px rgba(19,18,15,.05), 0 8px 24px rgba(19,18,15,.08);
}
.nav-link {
  display: inline-flex; align-items: center; padding: 8px 15px; border-radius: var(--pil);
  font-size: 14px; font-weight: 500; color: var(--stone); text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover { color: var(--ink); background: var(--whisper); }
.nav-link[aria-current="page"] { color: var(--ink); background: var(--bone); }
.kop__rechts { display: flex; align-items: center; gap: 18px; }
.kop__rechts .aan { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); }
.kop__rechts .knop { height: 42px; padding: 0 20px; font-size: 14px; }

.menu-mobiel { display: none; position: relative; }
.menu-mobiel summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: var(--pil); border: 1px solid var(--mist); background: var(--snow); }
.menu-mobiel summary::-webkit-details-marker { display: none; }
.menu-mobiel__lijst { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; list-style: none; margin: 0; padding: 8px; background: var(--snow); border: 1px solid var(--mist); border-radius: 18px; box-shadow: 0 12px 30px rgba(19,18,15,.10); }
.menu-mobiel__lijst a { display: block; padding: 11px 14px; border-radius: 12px; text-decoration: none; font-weight: 500; }
.menu-mobiel__lijst a:hover { background: var(--whisper); }

@media (max-width: 1080px) { .nav-link { padding: 8px 10px; font-size: 13px; } }
@media (max-width: 960px) { .nav-pil { display: none; } .menu-mobiel { display: block; } }
@media (max-width: 560px) {
  .balk-wrap { padding: 12px 16px; }
  .kop__rechts .knop { display: none; }
  .merk { min-width: 0; }
}

/* ---------- Footer ---------- */
.site-foot { background: transparent; border-top: 1px solid var(--mist); color: var(--stone); }
.site-foot a { color: var(--stone); }
.site-foot a:hover { color: var(--ink); }
.site-foot .foot-h { font-family: var(--tekst); font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: 0; }

/* ---------- Rust ---------- */
/* De oude pagina's hadden schuine kleurvlakken en rasters als achtergrond.
   In de nieuwe look zijn de vlakken effen: bone of een zachte whisper. */
.band, .hero, section { background-image: none !important; }
.band-tint { background: var(--whisper) !important; }
.site-foot { background: transparent !important; }
.band::before, .band::after, .hero::before, .hero::after { display: none !important; }

/* Lopende tekst in Inter leest rustig bij 400. De oude pagina's zetten veel
   alinea's vet omdat Nunito dunner was. Titels en nadruk blijven sterk. */
p, li, .lead, dd, address { font-weight: 400; }
p strong, li strong, p b, li b { font-weight: 600; }

/* De balk laat de inhoud er niet door schemeren. */
.balk-wrap {
  background: color-mix(in srgb, var(--bone) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ---------- Eén palet ---------- */
/* De oude site gaf elke pijler een eigen kleur (groen, blauw, geel, rood,
   paars, roze). De richting is Folio: bone, wit, ink en steen. Elke pijler
   krijgt dus hetzelfde: een ink vlak, een zachte tint, ink tekst.
   styles.css zet zijn kleuren met :root:not([data-theme="light"]); de
   :not(#folio) hieronder weegt zwaarder, zodat Folio altijd wint. */
:root:not(#folio) {
  --bg: #efece4; --bg-tint: #f6f3eb; --surface: #ffffff; --line: #e4dfd4;
  --ink: #13120f; --muted: #6c6a62; --on-c: #ffffff;
  --primary: #13120f; --primary-hover: #2a2823; --primary-ink: #ffffff;
  --focus: #13120f;
  --leden-c:#13120f; --leden-t:#ebe7dd; --leden-d:#13120f;
  --geld-c:#13120f;  --geld-t:#ebe7dd;  --geld-d:#13120f;
  --zaal-c:#13120f;  --zaal-t:#ebe7dd;  --zaal-d:#13120f;
  --event-c:#13120f; --event-t:#ebe7dd; --event-d:#13120f;
  --kassa-c:#13120f; --kassa-t:#ebe7dd; --kassa-d:#13120f;
  --web-c:#13120f;   --web-t:#ebe7dd;   --web-d:#13120f;
  --basis-c:#13120f; --basis-t:#ebe7dd; --basis-d:#13120f;
  --ai-c:#13120f;    --ai-t:#ebe7dd;    --ai-d:#13120f;
  --warn-t:#ebe7dd;  --warn-d:#13120f;
  color-scheme: light;
}
body { background: var(--bone) !important; }
.kicker { font-weight: 500; color: var(--stone); }
.kicker::before { background: var(--ink) !important; width: 16px; height: 2px; }
.ck { color: var(--snow); }
/* De getekende terugval zolang een foto laadt: ook in het palet. */
.pf-sun { fill: #d9d3c5 !important; }
.pf-hill { fill: #e4dfd4 !important; }
.pf-p { fill: #6c6a62 !important; }
.pf-p2 { fill: #13120f !important; }

/* ---------- Juridisch: inhoudstafel en samenvattingen ---------- */
.legal-toc { list-style: decimal; padding-left: 1.4em; margin: 8px 0 28px; display: grid; gap: 6px; columns: 2; column-gap: 32px; }
.legal-toc li { break-inside: avoid; }
.legal-toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--mist); }
.legal-toc a:hover { border-color: var(--ink); }
.legal-prose h3 { font-family: var(--kop); font-weight: 400; font-size: 1.7rem; letter-spacing: -0.01em; margin-top: 44px; scroll-margin-top: 96px; }
.legal-prose .kort { background: var(--whisper); border: 1px solid var(--mist); border-radius: 14px; padding: 12px 16px; margin: 10px 0 14px; }
.legal-prose ol:not(.legal-toc) { list-style: decimal; padding-left: 1.4em; display: grid; gap: 8px; }
.legal-prose ul { list-style: disc; padding-left: 1.4em; display: grid; gap: 6px; }
@media (max-width: 700px) { .legal-toc { columns: 1; } }

/* Niet voorbij de rand van de pagina doorschieten (trackpad, gsm). */
html, body { overscroll-behavior-y: none; }

/* Modules: de vergelijkingsvraag onder elke module. */
.pillar-desc .vraag { margin-top: 10px; padding: 12px 14px; border-left: 2px solid var(--ink); background: var(--whisper); border-radius: 0 12px 12px 0; color: var(--ink); font-weight: 500; }

/* Kaarten in een raster dat zich naar het aantal schikt: vier kaarten vullen
   de hele breedte, in plaats van vier van de vijf kolommen. */
.switch-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Lopende tekst in kaarten niet vet (de oude opmaak zette die op 700). */
.switch-card p, .character p, .closing p, .module-pricebar-head p:not(.kicker), .logos p, .lead { font-weight: 400; }