/* ---- gedeeld thema voor subpagina's (src/site_nav.py) ---- */
  html { background:#fff; } body { background:transparent !important; }
  .get, .how, .now, .with, .start, .faq, .about, .contact, footer { border-top:0 !important; }
  .site-bergw { position:absolute; left:0; right:0; top:0; height:980px; z-index:-1; overflow:hidden; pointer-events:none; }
  body.bg-pagina .site-bergw { position:fixed; inset:0; height:auto; }
  .site-berg { position:absolute; inset:-60px; opacity:0; background:url(image-68296cdbf42b642e.jpg) center 40% / cover; filter:blur(26px) saturate(1.05);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); transition:opacity .6s ease; }
  body.bg-kop .site-berg { opacity:.32; } body.st-donker.bg-kop .site-berg { opacity:.28; }
  body.bg-pagina .site-berg { filter:blur(34px) saturate(1.05); -webkit-mask-image:none; mask-image:none; opacity:.22; } body.st-donker.bg-pagina .site-berg { opacity:.30; }
  body.bg-pagina .demo, body.bg-pagina .stepper { background:transparent; }
  body.bg-pagina .stepper { background:rgba(255,255,255,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

  /* warm materiaal */
  html.st-warm { background:#f4efe5; }
  body.st-warm .demo, body.st-warm .stepper { background:#fbf8f2; }

  /* donker, hele pagina */
  html.st-donker { background:#0c0b09; }
  body.st-donker { color:#ece7dc; --line:#26231e; --soft:#171511; --muted:#9a9384; }
  body.st-donker :is(h1, h2, h3, h4, summary):not(.app *):not(.stage *):not(.srccard *) { color:#f4f1ea; }
  body.st-donker :is(p, li, dd):not(.app *):not(.stage *):not(.srccard *):not(.fbpanel *):not(.review *) { color:#bdb6a7; }
  body.st-donker :is(.pa-hero, .ta-hero, .oo-hero) { background:radial-gradient(ellipse 60% 70% at 72% 30%, rgba(205,176,90,.16), rgba(205,176,90,0) 62%); }
  body.st-donker .btn:not(.ghost), body.st-donker .nb:not(.prev) { background:var(--gold-2); border-color:var(--gold-2); color:#111; }
  body.st-donker .btn.ghost, body.st-donker .live-cap a, body.st-donker .map figcaption a, body.st-donker .nb.prev { color:#f4f1ea; }
  body.st-donker .nb.prev { border-color:#3a362f; }
  body.st-donker .demo, body.st-donker .cta-band, body.st-donker .ta { background:transparent; }
  body.st-donker .stepper { background:rgba(12,11,9,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:none; }
  body.st-donker .dots button { background:#171511; border-color:#3a362f; color:#9a9384; }
  body.st-donker .dots button.done { border-color:var(--gold-2); color:var(--gold-2); }
  body.st-donker .dots button.on { background:var(--gold-2); border-color:var(--gold-2); color:#111; }
  body.st-donker .reads .r { border-top-color:#3a362f; }
  body.st-donker .fake { color:#9a9384; border-color:#4a453c; }
  body.st-donker .chip { background:#1e1b16; color:#ddd6c8; }
  body.st-donker .photo, body.st-donker .pic { background:#171511; color:#6f695d; }
  body.st-donker .form input, body.st-donker .form textarea { border-bottom-color:#3a362f; color:#f4f1ea; }
  body.st-donker footer { color:#8d8678; }
  body.st-donker .flogo, body.st-donker footer svg { --logo-ink:#ece7dc; }
  body.st-donker :is(.hero-pic .zf, .map .zf, .live-frame) { border-color:transparent; box-shadow:0 30px 80px rgba(0,0,0,.45); }
  body.st-donker .app { box-shadow:0 30px 80px rgba(0,0,0,.5); }

  /* donker naar licht: donkere kop die zacht overloopt in wit */
  body.st-overgang :is(.pa-hero, .ta-hero, .oo-hero) { padding-bottom:200px; margin-bottom:-120px; color:#f4f1ea;
    background:radial-gradient(ellipse 60% 55% at 72% 25%, rgba(205,176,90,.16), rgba(205,176,90,0) 62%), linear-gradient(180deg, #0c0b09 0%, #0c0b09 calc(100% - 300px), #3a342a calc(100% - 160px), #fff 100%); }
  body.st-overgang :is(.pa-hero, .ta-hero, .oo-hero) :is(h1, h2) { color:#f4f1ea; }
  body.st-overgang :is(.pa-hero, .ta-hero, .oo-hero) :is(p, .sub) { color:#cfc8b8; }
  body.st-overgang :is(.pa-hero, .ta-hero, .oo-hero) .btn:not(.ghost) { background:var(--gold-2); color:#111; }
  body.st-overgang :is(.pa-hero, .ta-hero, .oo-hero) .btn.ghost { color:#f4f1ea; }
  body.st-overgang :is(.pa-hero, .ta-hero, .oo-hero) ~ * { position:relative; }