/* site.css — kleine aanvullingen die niet in main.css of skins.css horen.
   Houd dit minimaal; het echte ontwerp staat in de meegeleverde stylesheets. */

/* Honeypot: onzichtbaar voor mensen, gevuld door bots => inzending negeren.
   Bewust geen display:none (sommige bots slaan dat over). */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Visueel verborgen, wel voorleesbaar */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Inline foutmelding bij het formulier */
.form-error {
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid #b4453a;
  background: rgba(180, 69, 58, 0.06);
  color: #7a2f28;
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-bottom: var(--sp-6);
  max-width: 44rem;
}

/* ---- Downloads, galerij en taalwissel (scaffold-helpers) ---- */
.download-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  margin: var(--sp-6) 0 var(--sp-7); padding: var(--sp-5) var(--sp-6);
  background: var(--paper-bright); border-left: 2px solid var(--signal); border-radius: var(--r-sm);
}
.download-bar__text { font-size: var(--fs-sm); color: var(--text-soft); margin-right: auto; }

.fig-group { margin-top: var(--sp-8); }
.fig-group__title {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal-deep);
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--paper-edge);
}
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-5); }
.fig-card { display: flex; flex-direction: column; background: var(--paper-bright); border: 1px solid var(--paper-edge); border-radius: var(--r-sm); overflow: hidden; }
.fig-card__img { display: block; background: var(--paper-cool); }
.fig-card__img img { width: 100%; height: auto; display: block; }
.fig-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.fig-card__cap { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.45; }
.fig-card__dl { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border-top: 1px solid var(--paper-edge); padding-top: var(--sp-3); margin-top: auto; }
.fig-card__dl:hover { color: var(--signal-deep); }

.dl-list { list-style: none; padding: 0; margin: var(--sp-6) 0; display: grid; gap: var(--sp-3); }
.dl-list a { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); background: var(--paper-bright); border: 1px solid var(--paper-edge); border-left: 2px solid var(--signal); border-radius: var(--r-sm); color: var(--ink); }
.dl-list a:hover { border-left-color: var(--ink); background: var(--paper-cool); }
.dl-list .dl-meta { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

.lang-switch { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-6); }
.lang-switch a { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--paper-edge); border-radius: 2px; color: var(--ink); }
.lang-switch a:hover { border-color: var(--ink); }
.lang-switch a.is-active { background: var(--ink); color: var(--text-inverse); border-color: var(--ink); }

.ws-cat { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--paper-edge); }
.ws-cat__title { font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.ws-cat ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.ws-cat li { display: flex; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-base); color: var(--text-soft); }
.ws-cat .lvl { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--signal-deep); white-space: nowrap; }

/* ---- Kleine utilities (i.p.v. inline styles, i.v.m. strikte CSP) ---- */
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }
.u-mt-8 { margin-top: var(--sp-8); }
.fig-single { max-width: 540px; margin: var(--sp-6) 0; }

/* ============================================================
   STEEP-letters, hertekende patronen en boek-eigen skin-headers
   ============================================================ */

/* STEEP-letters (kaartenpagina) */
.steep-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-7); }
.steep-chip { flex: 1 1 90px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3); background: var(--paper-bright); border: 1px solid var(--paper-edge);
  border-top: 3px solid var(--c, var(--signal)); border-radius: var(--r-sm); }
.steep-chip__l { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--c, var(--signal)); }
.steep-chip__w { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.steep-chip--s  { --c: var(--steep-s,  #d97757); }
.steep-chip--t  { --c: var(--steep-t,  #5b8db8); }
.steep-chip--e1 { --c: var(--steep-e1, #8aa86a); }
.steep-chip--e2 { --c: var(--steep-e2, #6b9b8a); }
.steep-chip--p  { --c: var(--steep-p,  #b87a9c); }

/* Patterns of change (hertekend als SVG, met duiding) */
.pattern-group { margin-top: var(--sp-6); padding: var(--sp-6); background: var(--paper-warm, #f5efe0); border-radius: var(--r-md); border-left: 4px solid var(--grp, var(--signal)); }
.pattern-group__head { margin-bottom: var(--sp-5); }
.pattern-group__title { font-family: var(--font-display); font-size: var(--fs-xl); margin: 0 0 var(--sp-2); }
.pattern-group__def { font-size: var(--fs-sm); color: var(--text-soft); max-width: 62ch; margin: 0; }
.pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-4); }
.pattern-card { background: var(--paper-bright); border: 1px solid var(--paper-edge); border-radius: var(--r-sm);
  padding: var(--sp-4); margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pattern-card svg { width: 100%; height: auto; display: block; }
.pattern-card .axis { stroke: var(--paper-edge); stroke-width: 1.5; }
.pattern-card .trend { fill: none; stroke: var(--grp, var(--signal)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pattern-card .dot { fill: var(--grp, var(--signal)); }
.pattern-card__cap { display: flex; flex-direction: column; gap: 3px; }
.pattern-card__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .03em; color: var(--text); }
.pattern-card__ex { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.pattern-source { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; }

/* Foresight-skin: STEEP-kleurbalk onder de header */
body.skin-foresight-cards .page-header { background: linear-gradient(180deg, var(--paper-warm, #f5efe0), var(--paper)); border-bottom: 0; position: relative; }
body.skin-foresight-cards .page-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--steep-s) 0 20%, var(--steep-t) 20% 40%, var(--steep-e1) 40% 60%, var(--steep-e2) 60% 80%, var(--steep-p) 80%); }
body.skin-foresight-cards .page-header .eyebrow { color: var(--steep-s); }

/* Handboek-skin: nachtblauwe boek-header */
body.skin-handboek .page-header { border-bottom: 0; color: #eaf0fb;
  background: radial-gradient(ellipse at 75% 130%, rgba(107,168,232,.18), transparent 60%), linear-gradient(180deg, #071230, #0a1a3a); }
body.skin-handboek .page-header .breadcrumb,
body.skin-handboek .page-header .breadcrumb a,
body.skin-handboek .page-header .eyebrow,
body.skin-handboek .page-header .page-header__lede { color: rgba(234,240,251,.80); }
body.skin-handboek .page-header .page-header__title { color: #ffffff; }
body.skin-handboek .page-header .breadcrumb a:hover { color: #fff; }
body.skin-handboek .page-header .anchor-nav__item { color: #eaf0fb; border-color: rgba(107,168,232,.35); }
body.skin-handboek .page-header .anchor-nav__num { color: var(--skin-horizon, #6ba8e8); }

/* ================================================================
   Explore the Big Picture — boekstijl (donker, kosmisch, warm goud)
   Tonen alleen op de ETBP-pagina's (body.skin-explore).
   ================================================================ */
body.skin-explore {
  --etbp-gold: #cda24a;
  --etbp-gold-bright: #e7c87e;
  --etbp-text: #e9edf4;
  --etbp-soft: #dde3ec;
  --etbp-line: rgba(205, 162, 74, .22);
  background-color: #06080f;
  color: var(--etbp-text);
}
/* Vaste kosmische achtergrond achter de hele pagina (sterren + gloed) */
body.skin-explore::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1000px 720px at 90% -4%, rgba(120, 150, 210, .07), transparent 60%),
    radial-gradient(880px 800px at -6% 104%, rgba(214, 150, 70, .12), transparent 56%),
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.2px 1.2px at 28% 64%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.2px 1.2px at 47% 32%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1px 1px at 63% 78%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.3px 1.3px at 78% 22%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.1px 1.1px at 88% 60%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 38% 90%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1.2px 1.2px at 55% 50%, rgba(255, 255, 255, .45), transparent);
}
body.skin-explore .site-header, body.skin-explore main { position: relative; z-index: 1; }

/* Globale header donker, zodat hij opgaat in de kosmos */
body.skin-explore .site-header { background: #080b16; border-bottom: 1px solid var(--etbp-line); }
body.skin-explore .brand__logo--dark { display: none; }
body.skin-explore .brand__logo--light { display: block; }
body.skin-explore .primary-nav a { color: var(--etbp-soft); }
body.skin-explore .primary-nav a:hover { color: #fff; }
body.skin-explore .cta-header { color: var(--etbp-text); border-color: rgba(205, 162, 74, .55); }
body.skin-explore .cta-header:hover { background: var(--etbp-gold); border-color: var(--etbp-gold); color: #0a0a0a; }
body.skin-explore .nav-toggle__icon span { background: var(--etbp-text); }

/* Hero */
body.skin-explore .page-header { position: relative; overflow: hidden; border-bottom: 1px solid var(--etbp-line); color: var(--etbp-text);
  background:
    radial-gradient(ellipse at 86% 14%, rgba(140, 180, 214, .14), transparent 55%),
    radial-gradient(circle at 10% 92%, rgba(214, 150, 70, .16), transparent 52%),
    linear-gradient(165deg, #070c1a 0%, #0c1b38 58%, #060f22 100%); }
body.skin-explore .page-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.2px 1.2px at 70% 38%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.2px 1.2px at 42% 72%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.2px 1.2px at 86% 76%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.2px 1.2px at 56% 18%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1px 1px at 33% 52%, rgba(255, 255, 255, .5), transparent); }
body.skin-explore .page-header > * { position: relative; z-index: 1; }
.etbp-hero__inner { display: grid; grid-template-columns: 1fr minmax(0, 360px); gap: var(--sp-8); align-items: center; }
.etbp-hero__cover { justify-self: end; }
.etbp-hero__cover img { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(205, 162, 74, .28), 0 0 60px rgba(214, 150, 70, .18); }
@media (max-width: 820px) {
  .etbp-hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .etbp-hero__cover { justify-self: start; max-width: 230px; order: -1; }
}

/* Titel als op de cover: 'Explore' goud-cursief, 'The Big Picture' wit */
.etbp-title { line-height: 1.04; margin: 0; }
.etbp-title__a { display: block; font-style: italic; font-weight: 400; color: var(--etbp-gold-bright); }
.etbp-title__b { display: block; color: #fff; }
.etbp-tagline { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: var(--etbp-gold-bright); margin: var(--sp-3) 0 var(--sp-4); }

/* Hero-tekstkleuren */
body.skin-explore .page-header .breadcrumb,
body.skin-explore .page-header .breadcrumb a,
body.skin-explore .page-header .page-header__lede { color: var(--etbp-soft); }
body.skin-explore .page-header .breadcrumb a:hover { color: #fff; }
body.skin-explore .page-header .eyebrow { color: var(--etbp-gold); }
body.skin-explore .page-header .page-header__title { color: #fff; }

/* Zes thema's, zoals onderaan de cover */
.etbp-themes { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.etbp-themes li { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--etbp-gold); }
.etbp-themes li::before { content: "\2726\00a0"; color: rgba(205, 162, 74, .6); }

/* Body-secties op de kosmische achtergrond */
body.skin-explore .section--dark { background: rgba(255, 255, 255, .03); border-top: 1px solid var(--etbp-line); border-bottom: 1px solid var(--etbp-line); }
body.skin-explore .prose { color: var(--etbp-soft); font-weight: 400; line-height: 1.7; }
body.skin-explore .page-header__lede { color: var(--etbp-soft); font-weight: 400; }
body.skin-explore .prose h2 { font-family: var(--font-display); color: #fff; }
body.skin-explore .prose em, body.skin-explore .prose i { color: var(--etbp-gold-bright); }
body.skin-explore .prose a { color: var(--etbp-gold-bright); text-decoration-color: rgba(205, 162, 74, .5); }
body.skin-explore .prose a:hover { color: #fff; }
body.skin-explore .site-footer__note { color: var(--etbp-soft); }
body.skin-explore .site-footer__note em { color: var(--etbp-gold-bright); }

/* Workshops: doel per categorie */
.ws-cat__purpose { margin: calc(var(--sp-2) * -1) 0 var(--sp-3); color: var(--text-soft); font-size: var(--fs-sm); max-width: 60ch; }

/* Hero-header overlapt de donkere hero (reserveert geen ruimte, anders staat de
   transparante header boven de lichte body i.p.v. over de hero) */
.site-header.is-hero { position: fixed; top: 0; left: 0; right: 0; }

/* Explore-skin: ankernavigatie (01/02/03) op de donkere kosmische hero */
body.skin-explore .page-header .anchor-nav__item { color: var(--etbp-text); border-color: rgba(205, 162, 74, .40); }
body.skin-explore .page-header .anchor-nav__num { color: var(--etbp-gold); }
body.skin-explore .page-header .anchor-nav__item:hover { border-color: var(--etbp-gold); background: rgba(205, 162, 74, .08); }

/* Foresight-skin: ankernavigatie netjes op de crème header */
body.skin-foresight-cards .page-header .anchor-nav__num { color: var(--steep-s); }

/* ---- Workshop-detailpagina ---- */
.ws-intro { max-width: 70ch; margin-bottom: var(--sp-7); }
.ws-intro p { margin: 0 0 var(--sp-3); }
.ws-key { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--steep-t); margin-bottom: 2px; }
.ws-support { color: var(--text-soft); font-size: var(--fs-sm); border-left: 2px solid var(--paper-edge); padding-left: var(--sp-4); }
.ws-method { background: var(--paper-bright); border: 1px solid var(--paper-edge); border-radius: var(--r-md); padding: var(--sp-6); margin-bottom: var(--sp-5); }
.ws-method__name { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.ws-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-soft); }
.ws-meta strong { color: var(--text); font-weight: 600; margin-right: 4px; }
.ws-level { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; background: var(--steep-s); color: #fff; letter-spacing: .04em; }
.ws-note { font-size: var(--fs-sm); color: var(--text-soft); font-style: italic; margin: 0 0 var(--sp-3); }
.ws-req { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.ws-sub { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: var(--sp-4) 0 var(--sp-2); }
.ws-steps { margin: 0 0 var(--sp-3); padding-left: 1.4em; }
.ws-steps > li { margin-bottom: var(--sp-2); }
.ws-steps ul { margin: var(--sp-2) 0; padding-left: 1.2em; list-style: none; }
.ws-steps ul li { position: relative; color: var(--text-soft); margin-bottom: 4px; }
.ws-steps ul li::before { content: "–"; position: absolute; left: -1.1em; color: var(--steep-t); }
.ws-options { padding-left: 1.2em; list-style: none; margin: 0; }
.ws-options li { position: relative; color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: 4px; }
.ws-options li::before { content: "–"; position: absolute; left: -1.1em; color: var(--steep-e2); }
.ws-back { margin-top: var(--sp-6); }
.ws-back a { font-family: var(--font-mono); font-size: var(--fs-sm); }
.ws-cat__title a { color: inherit; text-decoration: none; }
.ws-cat__title a:hover { color: var(--steep-s); }

/* Workshops: notitie dat de online workshops Engelstalig zijn */
.ws-en-note { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .03em; color: var(--text-muted); }
.ws-en-note--top { margin: 0 0 var(--sp-6); padding: var(--sp-3) var(--sp-4); background: var(--paper-warm, #f5efe0); border-left: 3px solid var(--steep-t); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ws-intro .ws-en-note { margin-top: var(--sp-2); color: var(--steep-t); }

/* Privacy: datumregel */
.privacy-updated { margin-top: var(--sp-7); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }

/* CTA-knop in de header op één regel houden (pijltje blijft achter de tekst) */
.cta-header { white-space: nowrap; }

/* Zachte fade achter de transparante hero-header, zodat witte tekst die achter
   de header doorscrolt niet lelijk door het (transparante) logo loopt */
.site-header.is-hero:not(.is-scrolled)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 15, 35, 0.60) 0%, rgba(8, 15, 35, 0.28) 55%, rgba(8, 15, 35, 0) 100%);
}

/* ---- Workshops-overzicht als kaarten ---- */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-8); }
.ws-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--paper-bright); border: 1px solid var(--paper-edge); border-top: 3px solid var(--c, var(--steep-s)); border-radius: var(--r-md); color: inherit; text-decoration: none; transition: transform var(--t-med), box-shadow var(--t-med); }
a.ws-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10, 20, 50, .10); }
.ws-card__title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text); margin: 0; }
.ws-card__purpose { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }
.ws-card__items { list-style: none; padding: var(--sp-3) 0 0; margin: auto 0 0; display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--paper-edge); }
.ws-card__items li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); }
.ws-card__label { color: var(--text); }
.ws-card__lvl { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.ws-card__more { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--c, var(--steep-s)); margin-top: var(--sp-1); }
.ws-card:nth-child(5n+1) { --c: var(--steep-s); }
.ws-card:nth-child(5n+2) { --c: var(--steep-t); }
.ws-card:nth-child(5n+3) { --c: var(--steep-e1); }
.ws-card:nth-child(5n+4) { --c: var(--steep-e2); }
.ws-card:nth-child(5n+5) { --c: var(--steep-p); }

/* Figuurkaarten: zachte schaduw + lichte lift bij hover */
.fig-card { transition: box-shadow var(--t-med), transform var(--t-med); }
.fig-card:hover { box-shadow: 0 14px 34px rgba(10, 20, 50, .12); transform: translateY(-2px); }

/* =================================================================
   Homepage: interactief besluitkompas
   ================================================================= */
.bkompas { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: var(--sp-8); align-items: center; }
.bkompas__dial { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto; }
.bkompas__ring { position: absolute; inset: 13%; border: 1px dashed var(--paper-edge); border-radius: 50%; }
.bkompas__ring::after { content: ""; position: absolute; inset: 20%; border: 1px solid var(--paper-edge); border-radius: 50%; opacity: .55; }
.bkompas__web { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.bk-links { opacity: 0; transition: opacity .45s ease; }
.bkompas.is-technologie .bk-links--technologie,
.bkompas.is-planeet .bk-links--planeet,
.bkompas.is-samenleving .bk-links--samenleving,
.bkompas.is-macht .bk-links--macht,
.bkompas.is-ruimte .bk-links--ruimte { opacity: 1; }
.bk-links line { stroke: var(--signal); stroke-width: 1; stroke-dasharray: 2.4 2.6; stroke-linecap: round; opacity: .75; }
.bk-core line { stroke: var(--signal-deep, #9a7f48); stroke-width: 1.3; opacity: .8; }
.bk-core circle { fill: var(--ink-deep, #0a1226); stroke: rgba(255,255,255,.06); stroke-width: .5; }
.bk-core text { fill: rgba(247, 245, 241, .92); font-family: var(--font-mono); font-size: 3.5px; letter-spacing: .02em; text-anchor: middle; dominant-baseline: central; }
.bkompas__node { position: absolute; transform: translate(-50%, -50%); width: 29%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--paper-edge); background: var(--paper-bright); cursor: pointer; display: grid; place-items: center; padding: 4px;
  transition: transform .2s, box-shadow .2s, border-color .2s; z-index: 4; }
.bkompas__node span { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .01em; text-align: center; color: var(--text-soft); line-height: 1.15; }
.bkompas__node:hover { transform: translate(-50%, -50%) scale(1.07); }
.bkompas__node.is-active { box-shadow: 0 0 0 2px var(--c), 0 10px 24px rgba(10, 20, 50, .18); border-color: transparent; }
.bkompas__node.is-active span { color: var(--text); }
.bkompas__node--technologie { left: 50%;   top: 8%;  --c: var(--kp-tech-vivid); }
.bkompas__node--planeet     { left: 90%;   top: 37%; --c: var(--kp-planet-vivid); }
.bkompas__node--samenleving { left: 74.7%; top: 84%; --c: var(--kp-society-vivid); }
.bkompas__node--macht       { left: 25.3%; top: 84%; --c: var(--kp-power-vivid); }
.bkompas__node--ruimte      { left: 10%;   top: 37%; --c: var(--kp-space-vivid); }
.bkompas__detail-eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; color: var(--text-muted); margin: 0 0 var(--sp-2); }
.bkompas__detail-name { font-family: var(--font-display); font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); }
.bkompas__detail-desc { color: var(--text-soft); margin: 0 0 var(--sp-4); max-width: 48ch; }
.bkompas__detail-q { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: var(--detail-c, var(--signal-deep)); border-left: 3px solid var(--detail-c, var(--signal)); padding-left: var(--sp-4); margin: 0 0 var(--sp-4); }
.bkompas__node-icon { display: block; color: var(--c); line-height: 0; margin-bottom: 3px; }
.bkompas__node-icon svg { width: 22px; height: 22px; }
.bkompas.is-technologie { --detail-c: var(--kp-tech); }
.bkompas.is-planeet     { --detail-c: var(--kp-planet); }
.bkompas.is-samenleving { --detail-c: var(--kp-society); }
.bkompas.is-macht       { --detail-c: var(--kp-power); }
.bkompas.is-ruimte      { --detail-c: var(--kp-space); }
.bkompas__detail-niet { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--detail-c, var(--text-muted)); margin: 0 0 var(--sp-2); }

/* Ingang-kiezer (homepage): kies een ingang, zie wat we doen */
.ingang { display: grid; grid-template-columns: minmax(250px, 360px) 1fr; gap: var(--sp-6); align-items: stretch; }
.ingang__choices { display: flex; flex-direction: column; gap: var(--sp-3); }
.ingang__choice { display: flex; align-items: flex-start; gap: var(--sp-4); width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--paper-bright); border: 1px solid var(--paper-edge); border-left: 3px solid var(--paper-edge);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); color: var(--text-soft);
  transition: border-color var(--t-med), color var(--t-med), background var(--t-med), transform var(--t-med); }
.ingang__choice:hover { border-color: var(--ink-dim); color: var(--ink); transform: translateX(2px); }
.ingang__choice.is-active { border-left-color: var(--signal); border-color: var(--signal-soft); background: var(--signal-bg); color: var(--ink); }
.ingang__choice-num { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .2em; color: var(--text-muted); padding-top: 2px; flex: none; }
.ingang__choice.is-active .ingang__choice-num { color: var(--signal-deep); }
.ingang__choice-text { font-weight: 500; line-height: 1.3; }

.ingang__panel { display: flex; flex-direction: column; background: var(--paper-bright); border: 1px solid var(--paper-edge); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-7); box-shadow: var(--shadow-sm); }
.ingang__panel-eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--sp-2); }
.ingang__panel-name { font-family: var(--font-display); font-size: var(--fs-2xl); margin: 0 0 var(--sp-2); color: var(--ink); }
.ingang__panel-kenmerk { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--signal-deep); margin: 0 0 var(--sp-4); }
.ingang__panel-desc { color: var(--text-soft); margin: 0 0 var(--sp-5); max-width: 52ch; line-height: 1.6; }
.ingang__panel-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: auto; }
.ingang__panel.is-swapping .ingang__panel-name,
.ingang__panel.is-swapping .ingang__panel-kenmerk,
.ingang__panel.is-swapping .ingang__panel-desc { animation: ingang-fade var(--t-med, .25s) ease both; }
@keyframes ingang-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .ingang { grid-template-columns: 1fr; gap: var(--sp-5); }
  .ingang__panel { padding: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .ingang__choice { transition: none; }
  .ingang__panel.is-swapping .ingang__panel-name,
  .ingang__panel.is-swapping .ingang__panel-kenmerk,
  .ingang__panel.is-swapping .ingang__panel-desc { animation: none; }
}

/* Kantelpunt-pagina: de vijf krachten als kaartjes met icoon en krachtkleur */
.kp-forces { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.kp-force { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--paper-edge); border-radius: 12px; border-left: 3px solid var(--kpf, var(--signal)); background: var(--paper-bright); }
.kp-force__icon { color: var(--kpf); line-height: 0; flex: none; margin-top: 2px; }
.kp-force__icon svg { width: 26px; height: 26px; }
.kp-force__body { display: flex; flex-direction: column; gap: 3px; }
.kp-force__name { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text); }
.kp-force__micro { color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.45; }
.kp-force--technologie { --kpf: var(--kp-tech); }
.kp-force--planeet     { --kpf: var(--kp-planet); }
.kp-force--samenleving { --kpf: var(--kp-society); }
.kp-force--macht       { --kpf: var(--kp-power); }
.kp-force--ruimte      { --kpf: var(--kp-space); }

@media (max-width: 760px) {
  .bkompas { grid-template-columns: 1fr; gap: var(--sp-6); }
  .bkompas__dial { max-width: 290px; }
}

/* =================================================================
   Homepage: foresight-dashboard preview (donker paneel)
   ================================================================= */
.fdash { background: #0b1020; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: var(--sp-6); color: #e9edf4; box-shadow: 0 24px 60px rgba(8, 15, 35, .25); }
.fdash__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.fdash__tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; color: #8a93a8; text-transform: uppercase; }
.fdash__play { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: #0b1020; background: var(--signal); border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: background .15s; }
.fdash__play:hover { background: var(--signal-soft); }
.fdash__play:disabled { opacity: .5; cursor: default; }
.fdash__route { position: relative; display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.fdash__route::before { content: ""; position: absolute; left: 7%; right: 7%; top: 18px; height: 2px; background: rgba(255, 255, 255, .12); z-index: 0; }
.fdash__step { position: relative; z-index: 1; flex: 1; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; }
.fdash__step-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #131a2e; border: 2px solid var(--p, #5b8db8); font-family: var(--font-mono); font-size: 13px; color: #e9edf4; transition: transform .2s, box-shadow .2s, background .2s; }
.fdash__step-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .01em; text-align: center; line-height: 1.25; max-width: 13ch; color: #aeb6c7; }
.fdash__step:hover .fdash__step-dot { transform: scale(1.08); }
.fdash__step.is-active .fdash__step-dot { background: var(--p, #5b8db8); color: #0b1020; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06), 0 0 18px var(--p, #5b8db8); }
.fdash__step.is-active .fdash__step-label { color: #fff; }
.fdash__step--verkennen { --p: #5b8db8; }
.fdash__step--wegen { --p: #c9a96a; }
.fdash__step--vernieuwen { --p: #8aa86a; }
.fdash__panel { --p: #5b8db8; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: var(--sp-5); min-height: 130px; }
.fdash__panel-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.fdash__phase { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: rgba(255, 255, 255, .06); color: var(--p); border: 1px solid currentColor; }
.fdash__step-title { font-family: var(--font-display); font-size: var(--fs-xl); color: #fff; margin: 0; }
.fdash__what { color: #c8ced9; margin: 0 0 var(--sp-3); line-height: 1.6; }
.fdash__deliver { display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; margin: 0; }
.fdash__deliver-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--signal); white-space: nowrap; }
.fdash__deliver span:last-child { color: #e9edf4; }
.fdash__note { margin: var(--sp-4) 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: #8a93a8; letter-spacing: .03em; }
@media (max-width: 680px) {
  .fdash__route { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .fdash__route::before { left: 18px; right: auto; top: 7%; bottom: 7%; width: 2px; height: auto; }
  .fdash__step { flex-direction: row; width: 100%; gap: var(--sp-3); }
  .fdash__step-label { text-align: left; max-width: none; }
}

/* ===== Aanbod: vormen als kaarten met label/waarde-structuur ===== */
.vorm { background: var(--paper-bright); border: 1px solid var(--paper-edge); border-top: 4px solid var(--accent, var(--signal)); border-radius: 16px; padding: var(--sp-7); }
.vorm__head { display: flex; gap: var(--sp-5); align-items: baseline; margin-bottom: var(--sp-5); }
.vorm__num { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--accent, var(--signal)); font-weight: 500; flex-shrink: 0; }
.vorm__heading .eyebrow { color: var(--accent, var(--signal)); }
.vorm__title { font-family: var(--font-display); font-size: var(--fs-2xl); margin: 2px 0 0; }
.vorm__lede { color: var(--text-soft); margin: var(--sp-2) 0 0; }
.vorm__specs { margin: 0; }
.vorm__row { display: grid; grid-template-columns: 190px 1fr; gap: var(--sp-5); padding: var(--sp-4) 0; border-top: 1px solid var(--paper-edge); }
.vorm__row:first-child { border-top: 0; padding-top: 0; }
.vorm__row dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 0; padding-top: 2px; }
.vorm__row dd { margin: 0; color: var(--text-soft); line-height: 1.65; }
.vorm--1 { --accent: #5b8db8; }
.vorm--2 { --accent: #c9a96a; }
.vorm--3 { --accent: #8aa86a; }
.vorm--4 { --accent: #b87a9c; }
@media (max-width: 640px) {
  .vorm { padding: var(--sp-5); }
  .vorm__row { grid-template-columns: 1fr; gap: 4px; }
  .vorm__row dt { color: var(--accent, var(--signal)); }
}

/* Kantelpunt-krachten als links naar de deelpagina's */
.kp-force__link { flex: 1; display: flex; gap: var(--sp-4); align-items: flex-start; text-decoration: none; color: inherit; }
.kp-force { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.kp-force:hover { border-left-color: var(--kpf); border-color: var(--kpf); box-shadow: 0 6px 20px rgba(10, 20, 50, .08); transform: translateY(-1px); }

/* Generieke werk-hero: cover naast de titel (zoals ETBP), token-based, werkt onder elke skin */
.work-hero__inner { display: grid; grid-template-columns: 1fr minmax(0, 340px); gap: var(--sp-8); align-items: center; }
.work-hero__cover { justify-self: end; }
.work-hero__cover img { display: block; width: 100%; max-width: 340px; height: auto; border-radius: 6px;
  box-shadow: 0 18px 44px -14px rgba(10, 20, 50, .4); }
/* Variant voor een uitgeknipte/transparante foto (de STEEP-kaartenset): schaduw volgt de vorm */
.work-hero__cover--photo img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 20px 32px rgba(10, 20, 50, .3)); }
@media (max-width: 820px) {
  .work-hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .work-hero__cover { justify-self: start; order: -1; }
  .work-hero__cover img { max-width: 240px; }
  .work-hero__cover--photo img { max-width: 320px; }
}

/* ============ Stap 2: bekroning, macro-meso-micro, ETBP-contrast, downloadpoort ============ */

/* OOA-bekroning, uitgelicht */
.award { display: flex; gap: var(--sp-4); align-items: center; margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6);
  background: var(--signal-bg); border: 1px solid var(--signal-soft); border-left: 3px solid var(--signal); border-radius: var(--r-md); }
.award__icon { flex: none; color: var(--signal-deep); line-height: 0; }
.award__icon svg { width: 38px; height: 38px; }
.award__title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); margin: 0 0 2px; }
.award__text { color: var(--text-soft); margin: 0; }

/* Macro-meso-micro-omgeving (vervangt het ontbrekende beeld; altijd scherp) */
.mmm { display: flex; justify-content: center; margin: var(--sp-6) auto; }
.mmm__svg { width: 100%; max-width: 380px; height: auto; }
.mmm__ring { stroke: var(--paper-edge); stroke-width: 1.5; }
.mmm__ring--macro { fill: #eef1f5; }
.mmm__ring--meso  { fill: #dde4ec; }
.mmm__ring--micro { fill: var(--ink); }
.mmm__t { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.mmm__t--macro { fill: var(--text-muted); }
.mmm__t--meso  { fill: var(--ink-soft); }
.mmm__t--micro { fill: var(--paper); }

/* ETBP: content-tekst licht houden op de donkere achtergrond */
body.skin-explore .prose, body.skin-explore .prose p, body.skin-explore .section-head__lede { color: var(--etbp-soft); }
body.skin-explore .prose h2, body.skin-explore .prose h3, body.skin-explore .section-head__title { color: var(--etbp-text); }
body.skin-explore .prose strong { color: #fff; }
body.skin-explore .prose em, body.skin-explore .prose i, body.skin-explore .prose a { color: var(--etbp-gold-bright); }

/* Downloadpoort: e-mailadres eerst, daarna toegang tot de complete sets */
.gate-wrap { margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6); background: var(--paper-bright); border: 1px solid var(--paper-edge); border-radius: var(--r-md); }
.gate-wrap__text { margin: 0 0 var(--sp-4); color: var(--text-soft); }
.gate__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gate__label { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--sp-2); }
.gate__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.gate__input { flex: 1 1 240px; min-width: 0; padding: .7rem .9rem; border: 1px solid var(--paper-edge); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; }
.gate__input:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.gate__input--err { border-color: var(--signal-deep); }
.gate__err { color: var(--signal-deep); margin: var(--sp-2) 0 0; font-size: var(--fs-xs); }
.gate__note { margin: var(--sp-3) 0 0; color: var(--text-muted); font-size: var(--fs-xs); }
.gate__ok { margin: var(--sp-4) 0 0; color: var(--ink); font-weight: 500; }
.gate__opt { display: flex; align-items: flex-start; gap: var(--sp-3); margin: var(--sp-4) 0 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; cursor: pointer; }
.gate__opt input { margin: .15em 0 0; flex: none; accent-color: var(--signal); cursor: pointer; }

/* Voorbeeld-blok binnen een aanbod-vorm (bv. de route onder trajectbegeleiding) */
.vorm__example { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--paper-edge); }
.vorm__example-title { font-size: var(--fs-xl); margin: var(--sp-2) 0 var(--sp-3); }
.vorm__example-lede { color: var(--text-soft); max-width: var(--max-w-text); margin-bottom: var(--sp-6); }


/* Early warning impressie (aanbod, lijn Monitoring) — compacte variant van het hbo-dashboard */
.ewx{ display:grid; grid-template-columns:1fr; gap:22px; margin-top:4px; }
.ewx__output{ background:var(--paper-bright); border:1px solid var(--paper-edge); border-radius:14px; padding:20px 20px 22px; }
.ewx__nojs{ font-size:.9rem; color:var(--text-muted); margin:0; }
.ewx__status{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ewx__status-lab{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.ewx__status-nm{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; }
.ewx__status-pct{ font-family:var(--font-mono); font-size:.92rem; color:var(--text-soft); margin-left:auto; }
.ewx__bar{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--paper-edge); margin-bottom:16px; }
.ewx__seg{ height:100%; transition:width .4s cubic-bezier(.22,.61,.36,1); }
.ewx__scen{ display:flex; flex-direction:column; gap:9px; }
.ewx__row{ display:grid; grid-template-columns:auto 1fr 84px 2.8em; gap:10px; align-items:center; }
.ewx__dot{ width:9px; height:9px; border-radius:3px; flex:none; }
.ewx__nm{ font-size:.92rem; color:var(--text-soft); }
.ewx__row.is-dom .ewx__nm{ color:var(--text); font-weight:600; }
.ewx__rowbar{ height:6px; background:var(--paper-edge); border-radius:999px; overflow:hidden; }
.ewx__fill{ display:block; height:100%; border-radius:999px; transition:width .4s cubic-bezier(.22,.61,.36,1); }
.ewx__pct{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); text-align:right; }
.ewx__sub{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--signal-deep); margin-bottom:12px; }
.ewx__sliders{ display:grid; grid-template-columns:1fr; gap:15px; }
.ewx__sig-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.ewx__sig-nm{ font-size:.9rem; color:var(--text); }
.ewx__sig-val{ font-family:var(--font-mono); font-size:.8rem; color:var(--text-muted); }
.ewx__range{ width:100%; accent-color:var(--signal); cursor:pointer; }
.ewx__note{ font-size:.84rem; color:var(--text-muted); margin:2px 0 0; }
.ewx__note a{ color:var(--signal-deep); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s; }
.ewx__note a:hover{ border-bottom-color:var(--signal); }
@media (min-width:780px){
  .ewx{ grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
  .ewx__note{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion: reduce){ .ewx__seg, .ewx__fill{ transition:none; } }

/* Early warning impressie: donkere kaart, in lijn met de andere voorbeelden op aanbod */
.ewx{ background:#0b1020; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:var(--sp-6); color:#e9edf4; box-shadow:0 24px 60px rgba(8,15,35,.25); }
.ewx__output{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.ewx__nojs, .ewx__status-lab, .ewx__pct, .ewx__sig-val, .ewx__note{ color:#8a93a8; }
.ewx__status-pct, .ewx__nm{ color:#aeb6c7; }
.ewx__status-nm, .ewx__row.is-dom .ewx__nm{ color:#fff; }
.ewx__sig-nm{ color:#e9edf4; }
.ewx__bar, .ewx__rowbar{ background:rgba(255,255,255,.10); }
.ewx__sub, .ewx__note a{ color:var(--signal); }


/* Voorbeeld-kader onder "Waar wil je beginnen?" — toont het voorbeeld van de gekozen lijn */
.ingang__example { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--paper-edge); }
.ingang__example-eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--signal-deep); margin: 0 0 var(--sp-5); }
.ingang__slot[hidden] { display: none; }
.ingang__soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); text-align: center; padding: var(--sp-8) var(--sp-6); background: var(--paper-warm); border: 1px dashed var(--paper-edge); border-radius: var(--r-md); color: var(--text-muted); }
.ingang__soon-num { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .2em; color: var(--signal-deep); }
.ingang__soon p { margin: 0; max-width: 40ch; }

/* ── Besluitkompas: trage ambient-rotatie (buitenring 20s/stap, kern 15s/stap) ──
   De ring (knoppen + web-lijnen) en de kern draaien elk in stappen; labels en
   iconen tegen-roteren zodat ze recht blijven. Pauzeert bij hover/focus zodat
   klikken makkelijk blijft. Uit bij prefers-reduced-motion. */
.bkompas__nodes { position: absolute; inset: 0; z-index: 4; transform-origin: center;
  animation: bkRingSpin 100s ease-in-out infinite; }
.bk-spokes { transform-box: fill-box; transform-origin: center;
  animation: bkRingSpin 100s ease-in-out infinite; }
.bkompas__node-inner { display: flex; flex-direction: column; align-items: center; transform-origin: center;
  animation: bkRingSpinCounter 100s ease-in-out infinite; }
.bk-core { transform-box: fill-box; transform-origin: center;
  animation: bkCoreSpin 45s ease-in-out infinite; }
.bk-core text { transform-box: fill-box; transform-origin: center;
  animation: bkCoreSpinCounter 45s ease-in-out infinite; }

@keyframes bkRingSpin {
  0%, 16% { transform: rotate(0deg); }
  20%, 36% { transform: rotate(-72deg); }
  40%, 56% { transform: rotate(-144deg); }
  60%, 76% { transform: rotate(-216deg); }
  80%, 96% { transform: rotate(-288deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes bkRingSpinCounter {
  0%, 16% { transform: rotate(0deg); }
  20%, 36% { transform: rotate(72deg); }
  40%, 56% { transform: rotate(144deg); }
  60%, 76% { transform: rotate(216deg); }
  80%, 96% { transform: rotate(288deg); }
  100% { transform: rotate(360deg); }
}
@keyframes bkCoreSpin {
  0%, 26% { transform: rotate(0deg); }
  33.33%, 59.33% { transform: rotate(120deg); }
  66.66%, 92.66% { transform: rotate(240deg); }
  100% { transform: rotate(360deg); }
}
@keyframes bkCoreSpinCounter {
  0%, 26% { transform: rotate(0deg); }
  33.33%, 59.33% { transform: rotate(-120deg); }
  66.66%, 92.66% { transform: rotate(-240deg); }
  100% { transform: rotate(-360deg); }
}

.bkompas:hover .bkompas__nodes, .bkompas:focus-within .bkompas__nodes,
.bkompas:hover .bk-spokes, .bkompas:focus-within .bk-spokes,
.bkompas:hover .bkompas__node-inner, .bkompas:focus-within .bkompas__node-inner,
.bkompas:hover .bk-core, .bkompas:focus-within .bk-core,
.bkompas:hover .bk-core text, .bkompas:focus-within .bk-core text {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .bkompas__nodes, .bk-spokes, .bkompas__node-inner, .bk-core, .bk-core text { animation: none; }
}