/* Video Tool v3: basis, atomen, moleculen, organismen, templates.
   Gebouwd op v3-tokens.css. Lagen in de volgorde uit de spec (5.1). */

@layer base, atomen, moleculen, organismen, schermen;

/* ── base ──────────────────────────────────────────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--navy);
    /* de navy diepte van het merk: een zachte gloed van primary linksboven en het
       puntenraster heel licht rechtsonder, allebei vast (scrollen niet mee) */
    background-image: radial-gradient(70% 55% at 12% 0%, rgba(23, 143, 207, .22), transparent 70%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    color: var(--w90);
    font: 400 var(--t-body)/1.5 var(--font);
    font-feature-settings: 'ss01';
  }
  body::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .28;
    background: url('assets/hero-dots.svg') no-repeat right -260px bottom -300px / 900px auto;
  }
  body.heeft-vaste-balk { padding-bottom: 96px; }
  @media (max-width: 899px) { body.heeft-vaste-balk { padding-bottom: 200px; } }
  h1, h2, h3, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, video { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; }
  :focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-pill); }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
  .vo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── atomen ────────────────────────────────────────────────────────────── */
@layer atomen {
  /* knop */
  .knop {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 44px; padding: 0 var(--sp-5);
    border: 1px solid transparent; border-radius: var(--r-btn);
    font-size: var(--t-detail-ruim); font-weight: 500; line-height: 1.2;
    background: transparent; color: var(--w90); cursor: pointer; text-decoration: none;
    transition: background var(--duur) var(--ease-out), border-color var(--duur) var(--ease-out), transform var(--duur) var(--ease-out);
    white-space: nowrap;
  }
  .knop--primair { background: var(--primary-knop); color: #fff; font-weight: 600; }
  .knop--primair:hover { background: var(--primary-knop-diep); }
  .knop--secundair { border-color: var(--w30); }
  .knop--secundair:hover { background: var(--w08); }
  .knop--stil { color: var(--w78); padding: 0 var(--sp-3); min-height: 36px; }
  .knop--stil:hover { color: #fff; background: var(--w06); }
  .knop--gevaar { border-color: rgba(255, 107, 107, .5); color: var(--fout); }
  .knop--klein { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--t-detail-ruim); }
  .knop--blok { width: 100%; }
  .knop[disabled], .knop.is-slot { opacity: .45; cursor: default; }
  .knop.is-bezig { pointer-events: none; }
  .knop.is-bezig .spinner { display: inline-block; }
  .knop .spinner { display: none; }
  .knop svg { width: 18px; height: 18px; flex: none; }

  /* invoer */
  .veld { display: block; width: 100%; min-height: 44px; padding: 10px 14px;
    background: var(--w06); border: 1px solid var(--w30); border-radius: var(--r-btn);
    color: #fff; font-size: var(--t-body); }
  .veld::placeholder { color: var(--w50); }
  .veld:focus-visible { border-color: var(--primary); box-shadow: none; }
  .veld.is-fout { border-color: var(--fout); }
  textarea.veld { min-height: 120px; line-height: 1.55; resize: vertical; font-size: var(--t-body-ruim); }
  textarea.veld--groot { min-height: 220px; }
  textarea.veld--klein { min-height: 88px; font-size: var(--t-body); }

  /* keuzeknop (segment) */
  .segment { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
  .segment .opt {
    min-height: 36px; padding: 0 14px; border: 1px solid var(--w12); border-radius: var(--r-pill);
    background: transparent; color: var(--w78); font-size: var(--t-detail-ruim); cursor: pointer;
  }
  .segment .opt.is-aan { background: var(--primary-zacht); border-color: var(--primary); color: #fff; }

  /* badge, kapje */
  .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border: 1px solid var(--w12); border-radius: var(--r-pill);
    font: 500 var(--t-mono-knop)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--w78); white-space: nowrap; }
  .badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--w50); }
  .badge--actie i { background: var(--primary); }
  .badge--actie { color: #fff; border-color: rgba(23, 143, 207, .5); }
  .badge--ok i { background: var(--ok); }
  .badge--let i { background: var(--let); }
  .badge--fout i { background: var(--fout); }
  .badge--bezig i { background: var(--w78); animation: puls 1.4s infinite; }
  @keyframes puls { 50% { opacity: .3; } }
  .kapje { display: block; font: 500 var(--t-mono-kolom)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--w78); }

  /* spinner, vinkje */
  .spinner { width: 16px; height: 16px; border: 2px solid var(--w30); border-top-color: #fff; border-radius: 50%; animation: draai .8s linear infinite; }
  .spinner--groot { width: 28px; height: 28px; border-width: 3px; }
  @keyframes draai { to { transform: rotate(360deg); } }

  /* initialen, logo, lijn */
  .initialen { width: 36px; height: 36px; border-radius: 50%; background: var(--w12); display: inline-flex; align-items: center; justify-content: center; font: 600 var(--t-mono-knop) var(--mono); letter-spacing: .04em; }
  .lijn { border: 0; border-top: 1px solid var(--w12); margin: 0; }

  /* het 9:16-kader */
  .kader { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-frame); overflow: hidden; background: var(--navy-diep); border: 1px solid var(--w12); }
  .kader img, .kader video { width: 100%; height: 100%; object-fit: cover; }
  .kader__tag { position: absolute; top: 12px; left: 12px; }
  .kader__tag .badge { background: rgba(0, 31, 58, .8); border-color: var(--w30); color: #fff; }
  .kader__meta { position: absolute; bottom: 12px; right: 12px; font: 500 var(--t-mono-label) var(--mono); letter-spacing: .06em; color: var(--w78); background: rgba(0, 31, 58, .7); padding: 4px 8px; border-radius: var(--r-pill); }
  .kader__afspelen { position: absolute; inset: 0; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; }
  .kader__afspelen i { width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 31, 58, .75); border: 1px solid var(--w30); display: grid; place-items: center; }
  .kader__afspelen svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }
  .kader--leeg { display: grid; place-items: center; color: var(--w50); font-size: var(--t-detail-ruim); text-align: center; padding: var(--sp-6); }
  .kader--fout { display: grid; place-items: center; text-align: center; padding: var(--sp-6); }
  .kader.is-uit img { opacity: .55; }
}

/* ── moleculen ─────────────────────────────────────────────────────────── */
@layer moleculen {
  .veldgroep { display: grid; gap: 6px; }
  .veldgroep label { font-size: var(--t-detail-ruim); color: var(--w78); }
  .veldgroep .hint { font-size: var(--t-detail-ruim); color: var(--w62); }
  .veldgroep .foutregel { font-size: var(--t-detail-ruim); color: var(--fout); }

  .statusregel { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--t-body); color: var(--w78); }

  /* kaart in de bibliotheek */
  .videokaart { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4); align-items: stretch;
    padding: var(--sp-3); background: var(--w06); border: 1px solid var(--w12); border-radius: var(--r-card);
    color: inherit; text-decoration: none; transition: background var(--duur) var(--ease-out), border-color var(--duur) var(--ease-out); }
  .videokaart:hover { background: var(--w08); border-color: var(--w30); }
  .videokaart__beeld { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-pill); overflow: hidden; background: var(--navy-diep); }
  .videokaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
  /* merkvlak: het Metem-blok dat altijd tussen de video's in het raster staat */
  .merkvlak { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
    min-height: 200px; padding: var(--sp-5); background: var(--metem); border-radius: var(--r-card); }
  .merkvlak img { width: 112px; height: auto; }
  .merkvlak span { font: 500 var(--t-mono-knop) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
  .videokaart__beeld.is-leeg { display: grid; place-items: center; font: 500 var(--t-mono-label) var(--mono); color: var(--w50); text-align: center; padding: 8px; letter-spacing: .04em; }
  .videokaart__tekst { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding-block: 2px; }
  .videokaart__naam { font-size: var(--t-kop-mini); font-weight: 500; line-height: 1.25; }
  .videokaart__meta { font-size: var(--t-detail-ruim); color: var(--w62); }
  .videokaart__onder { margin-top: auto; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

  .groepkop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-8) 0 var(--sp-4); flex-wrap: wrap; }
  .groepkop h2 { font-size: var(--t-kop-mini); font-weight: 500; }
  .groepkop h2 span { color: var(--w50); font-weight: 400; margin-left: 8px; }

  .keuzetegel { position: relative; display: grid; gap: 8px; padding: 8px; background: var(--w06); border: 1px solid var(--w12); border-radius: var(--r-card); cursor: pointer; text-align: left; }
  .keuzetegel img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-pill); width: 100%; }
  .keuzetegel span { font-size: var(--t-detail-ruim); }
  .keuzetegel.is-aan { border-color: var(--primary); background: var(--primary-zacht); }

  .feitregel { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--w12); }
  .feitregel img { width: 44px; height: 44px; border-radius: var(--r-pill); object-fit: cover; }
  .feitregel b { font-weight: 500; }
  .feitregel span { color: var(--w50); font-size: var(--t-detail-ruim); }

  .productkaartje { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .productkaartje img { width: 56px; height: 56px; border-radius: var(--r-pill); object-fit: cover; background: #fff; flex: none; }
  .productkaartje b { display: block; font-size: var(--t-kop-kaart); font-weight: 500; line-height: 1.2; }
  .productkaartje span { font-size: var(--t-detail-ruim); color: var(--w62); }

  /* de vraag */
  .vraag { display: grid; gap: var(--sp-4); }
  .vraag h2 { font-size: var(--t-kop-kaart); font-weight: 500; }
  .vraag p { color: var(--w78); }

  .correctiegroep { display: grid; gap: var(--sp-2); }
  .correctiegroep .gevolg { font-size: var(--t-detail-ruim); color: var(--w50); }

  /* plaatsingskader op het beeld */
  .plaatsing { position: absolute; border: 2px dashed var(--let); border-radius: 4px; }
  .plaatsing--nu { border-style: solid; border-color: var(--w50); }
  .plaatsing .label { display: none; }
  .legenda { display: flex; gap: var(--sp-4); font-size: var(--t-detail-ruim); color: var(--w78); }
  .legenda span { display: inline-flex; align-items: center; gap: 6px; }
  .legenda i { width: 16px; height: 11px; border: 2px solid var(--w50); border-radius: 2px; }
  .legenda i.is-straks { border-color: var(--let); border-style: dashed; }
  .plaatsing .greep { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: var(--let); border-radius: 3px; }
  .plaatsing .label { position: absolute; left: 0; bottom: -24px; font: 500 var(--t-mono-label) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(0, 31, 58, .8); padding: 2px 6px; border-radius: var(--r-pill); white-space: nowrap; }

  .pogingen { display: flex; gap: var(--sp-2); }
  .pogingen button { position: relative; width: 54px; aspect-ratio: 9 / 16; padding: 0; border: 2px solid var(--w12); border-radius: var(--r-pill); overflow: hidden; background: var(--navy-diep); cursor: pointer; }
  .pogingen button img { width: 100%; height: 100%; object-fit: cover; }
  .pogingen button.is-aan { border-color: var(--primary); }
  .pogingen button.is-gekozen::after { content: ''; position: absolute; right: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
  .pogingen button span { position: absolute; left: 4px; bottom: 4px; font: 600 var(--t-mono-label) var(--mono); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

  /* spelers */
  .speler { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--w06); border: 1px solid var(--w12); border-radius: var(--r-card); }
  .speler__knop { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--primary); border: 0; display: grid; place-items: center; cursor: pointer; }
  .speler__knop svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
  .speler__balk { flex: 1; height: 4px; background: var(--w12); border-radius: 2px; position: relative; }
  .speler__balk i { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: #fff; border-radius: 2px; }
  .speler__tijd { font: 500 var(--t-mono-label) var(--mono); color: var(--w50); letter-spacing: .04em; white-space: nowrap; }

  /* gesprek */
  .gesprek { display: grid; gap: var(--sp-3); }
  .beurt { max-width: 85%; padding: 10px 14px; border-radius: var(--r-card); font-size: var(--t-body); line-height: 1.5; }
  .beurt--klant { justify-self: end; background: var(--primary-zacht); border: 1px solid rgba(23, 143, 207, .4); }
  .beurt--assistent { justify-self: start; background: var(--w08); border: 1px solid var(--w30); color: var(--w90); }
  .beurt small { display: block; margin-top: 4px; font: 500 var(--t-mono-knop) var(--mono); color: var(--w78); letter-spacing: .04em; }
  .voorbeelden { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .gespreksinvoer { display: flex; gap: var(--sp-2); }
  .gespreksinvoer .veld { min-height: 44px; }

  .uitspraakregel { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); align-items: center; }
  .uitspraakregel .veld { min-height: 40px; padding-block: 6px; }
  .uitspraakregel span { color: var(--w50); }

  .kostenregel { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--t-detail-ruim); }
  .kostenregel.is-gedempt { color: var(--w50); }
  .kostenregel b { font-family: var(--mono); font-weight: 500; font-size: var(--t-detail); }

  .banner { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card); border: 1px solid var(--w12); background: var(--w06); }
  .banner b { display: block; font-weight: 500; margin-bottom: 2px; }
  .banner p { color: var(--w78); }
  .banner--let { border-color: rgba(242, 178, 60, .5); background: rgba(242, 178, 60, .1); }
  .banner--fout { border-color: rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .1); }
  .banner--ok { border-color: rgba(69, 201, 138, .5); background: rgba(69, 201, 138, .1); }
  .banner svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
  .banner .knop { margin-left: auto; align-self: center; }

  .downloadregel { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--w06); border: 1px solid var(--w12); border-radius: var(--r-card); text-decoration: none; color: inherit; }
  a.downloadregel:hover { background: var(--w08); border-color: var(--w30); }
  .downloadregel svg { width: 22px; height: 22px; flex: none; stroke: var(--w78); fill: none; stroke-width: 1.8; }
  .downloadregel div { flex: 1; min-width: 0; }
  .downloadregel b { display: block; font-weight: 500; }
  .downloadregel span { font-size: var(--t-detail-ruim); color: var(--w50); }

  .sterren { display: flex; gap: 4px; }
  .sterren button { width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; padding: 0; }
  .sterren svg { width: 28px; height: 28px; fill: var(--w12); stroke: var(--w78); stroke-width: 1.4; }
  .sterren .is-aan svg { fill: var(--let); stroke: var(--let); }

  .stappenlijst { display: grid; gap: var(--sp-3); }
  .stappenlijst li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--t-body); color: var(--w50); }
  .stappenlijst li i { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--w30); display: grid; place-items: center; }
  .stappenlijst li.is-klaar { color: var(--w78); }
  .stappenlijst li.is-klaar i { background: var(--ok); border-color: var(--ok); }
  .stappenlijst li.is-klaar i::after { content: ''; width: 6px; height: 10px; border: solid var(--navy); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
  .stappenlijst li.is-nu { color: #fff; }
  .stappenlijst li.is-nu i { border-color: #fff; }
  .stappenlijst li.is-nu i::after { content: ''; width: 10px; height: 10px; border: 2px solid var(--w30); border-top-color: #fff; border-radius: 50%; animation: draai .8s linear infinite; }

  .rondemoment { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--t-detail-ruim); color: var(--w78); }
  .rondemoment svg { width: 18px; height: 18px; flex: none; stroke: var(--w50); fill: none; stroke-width: 1.8; }

  .termregel, .gebruikersregel { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); background: var(--w06); border: 1px solid var(--w12); border-radius: var(--r-card); }
  .termregel__map { font-size: var(--t-lead); font-weight: 500; }
  .termregel__map .naar { color: var(--ok); }
  .termregel__map .pijl { color: var(--w50); margin: 0 10px; font-weight: 400; }
  .termregel__meta, .gebruikersregel__meta { font-size: var(--t-detail-ruim); color: var(--w50); margin-top: 2px; }
  .termregel__voorbeeld { grid-column: 1 / -1; font-size: var(--t-detail-ruim); color: var(--w78); }
  .termregel__voorbeeld code { font-family: var(--mono); font-size: var(--t-detail); background: var(--w08); padding: 1px 6px; border-radius: 4px; }
  .acties { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
  .gebruikersregel__naam { font-weight: 500; font-size: var(--t-body-ruim); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

  .filterrij { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .filterrij .opt { min-height: 36px; padding: 0 14px; border: 1px solid var(--w12); border-radius: var(--r-pill); background: transparent; color: var(--w78); font-size: var(--t-detail-ruim); cursor: pointer; }
  .filterrij .opt.is-aan { background: var(--primary-zacht); border-color: var(--primary); color: #fff; }
  .filterrij .opt span { color: var(--w50); margin-left: 6px; font-family: var(--mono); font-size: var(--t-detail); }

  .dialoog { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0, 31, 58, .7); z-index: 20; padding: var(--sp-4); }
  .dialoog__kaart { width: min(440px, 100%); padding: var(--sp-6); background: var(--navy); border: 1px solid var(--w30); border-radius: var(--r-card); display: grid; gap: var(--sp-4); }
  .dialoog__kaart h2 { font-size: var(--t-kop-mini); font-weight: 500; }
  .dialoog__kaart p { color: var(--w78); }

  .kopieerregel { display: flex; gap: var(--sp-2); align-items: center; }
  .kopieerregel code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--t-detail); background: var(--w06); padding: 8px 10px; border-radius: var(--r-pill); }

  .tegel { padding: var(--sp-5); background: var(--w06); border: 1px solid var(--w12); border-radius: var(--r-card); }
  .tegel--klein { padding: var(--sp-4); }
  .spook { background: var(--w06); border-radius: var(--r-card); min-height: 120px; animation: puls 1.6s infinite; }
}

/* ── organismen ────────────────────────────────────────────────────────── */
@layer organismen {
  /* kopbalk */
  .kopbalk { position: sticky; top: 0; z-index: 10; height: var(--kopbalk); background: var(--navy-diep); border-bottom: 1px solid var(--w12); }
  .kopbalk__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--kant); height: 100%; display: flex; align-items: center; gap: var(--sp-6); }
  .kopbalk__logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
  .kopbalk__logo img { height: 26px; width: auto; }
  .kopbalk__logo span { font: 500 var(--t-mono-knop) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--w50); padding-left: var(--sp-3); border-left: 1px solid var(--w12); }
  .kopbalk__door { display: flex; align-items: center; gap: 6px; font: 500 var(--t-mono-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--w50); text-decoration: none; }
  .uitnodigregel { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-4); align-items: end; margin: var(--sp-6) 0; }
  .kopbalk__door img { height: 13px; width: auto; opacity: .75; }
  .kopbalk__nav { display: flex; gap: var(--sp-5); margin-left: var(--sp-4); }
  .kopbalk__nav a { font: 500 var(--t-mono-knop) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--w50); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
  .kopbalk__nav a.is-aan { color: #fff; border-color: var(--primary); }
  .kopbalk__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
  .kopbalk__rechts .knop--stil { color: var(--w78); }
  .kopbalk__ik { display: flex; align-items: center; gap: var(--sp-2); }
  .kopbalk__ik a { font-size: var(--t-detail-ruim); color: var(--w50); text-decoration: none; }

  .testmodus { background: rgba(242, 178, 60, .14); border-bottom: 1px solid rgba(242, 178, 60, .4); color: #fff; font-size: var(--t-detail-ruim); text-align: center; padding: 6px var(--kant); }

  .voettekst { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-10) var(--kant) var(--sp-8); display: flex; align-items: center; gap: var(--sp-3); color: var(--w50); font-size: var(--t-detail-ruim); }
  .voettekst__copy { margin-left: auto; }

  /* inhoud */
  .inhoud { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-8) var(--kant) var(--sp-6); display: flex; flex-direction: column; min-height: calc(100vh - var(--kopbalk) - 88px); }
  .inhoud > * { flex: none; }
  .inhoud > .beslisbalk { margin-top: auto; }
  .inhoud--smal { max-width: 720px; }
  .paginakop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
  .paginakop h1 { font-size: var(--t-kop-groot); font-weight: 500; line-height: 1.15; }
  .paginakop p { color: var(--w50); margin-top: 4px; }
  .paginakop__acties { display: flex; align-items: center; gap: var(--sp-3); }

  /* bibliotheek */
  .raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--sp-4); }
  .leegstand { padding: var(--sp-10) var(--sp-8); border: 1px dashed var(--w30); border-radius: var(--r-card); display: grid; gap: var(--sp-5); max-width: 640px; margin: var(--sp-6) auto 0; }
  .leegstand h2 { font-size: var(--t-kop-kaart); font-weight: 500; }
  .leegstand ol { display: grid; gap: var(--sp-3); counter-reset: st; }
  .leegstand li { display: flex; gap: var(--sp-3); color: var(--w78); }
  .leegstand li::before { counter-increment: st; content: counter(st, decimal-leading-zero); font: 500 var(--t-mono-knop) var(--mono); color: var(--primary); padding-top: 3px; }

  /* videokop */
  .videokop { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4) var(--sp-6); align-items: center; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--w12); margin-bottom: var(--sp-6); }
  .videokop__links { display: grid; gap: var(--sp-3); min-width: 0; }
  .videokop__rechts { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
  .fasebalk { display: flex; gap: var(--sp-2); align-items: center; }
  .fasebalk span { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--t-mono-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--w50); }
  .fasebalk span i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--w30); display: grid; place-items: center; font-style: normal; font-size: 10px; }
  .fasebalk span.is-klaar { color: var(--w78); }
  .fasebalk span.is-klaar i { background: var(--ok); border-color: var(--ok); color: var(--navy); }
  .fasebalk span.is-nu { color: #fff; }
  .fasebalk span.is-nu i { background: var(--primary); border-color: var(--primary); color: #fff; }
  .fasebalk em { width: 28px; height: 1px; background: var(--w12); }
  .videokop__kosten { font: 500 var(--t-detail) var(--mono); color: var(--w50); letter-spacing: .04em; }

  /* werkvlak */
  .werkvlak { display: grid; grid-template-columns: var(--kader-b) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .werkvlak--tekst { grid-template-columns: minmax(0, 1fr) 320px; }
  .werkvlak--breed { grid-template-columns: minmax(0, 1fr); }
  .werk { display: grid; gap: var(--sp-6); }
  .werk__blok { display: grid; gap: var(--sp-3); }
  .werk__blok > .kapje { margin-bottom: 2px; }
  .leestekst { font-size: var(--t-lead); line-height: 1.6; color: #fff; max-width: 72ch; }
  .leestekst--klein { font-size: var(--t-body-ruim); color: var(--w90); }
  .onderkader { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
  .referenties { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .referenties button { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: var(--w06); border: 1px solid var(--w12); border-radius: var(--r-pill); color: var(--w78); font-size: var(--t-detail-ruim); cursor: pointer; }
  .referenties img { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; background: #fff; }
  .referenties--groot { gap: var(--sp-3); }
  .referenties--groot button { display: grid; gap: 8px; padding: 8px; border-radius: var(--r-card); width: 190px; text-align: left; }
  .referenties--groot img { width: 100%; height: 210px; border-radius: var(--r-pill); }

  /* lade */
  .lade { padding: var(--sp-5); background: var(--w06); border: 1px solid var(--w30); border-radius: var(--r-card); display: grid; gap: var(--sp-5); }
  .lade__kop { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
  .lade__kop h3 { font-size: var(--t-kop-mini); font-weight: 500; }
  .lade__uitleg { font-size: var(--t-body); color: var(--w78); padding: var(--sp-3) var(--sp-4); background: var(--navy-diep); border-radius: var(--r-pill); }

  /* beslisbalk */
  .beslisbalk { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-8); padding: var(--sp-4) 0; border-top: 1px solid var(--w12); background: var(--navy); }
  .beslisbalk__links { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .beslisbalk__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .beslisbalk .hulp { font-size: var(--t-detail-ruim); color: var(--w78); max-width: 380px; line-height: 1.35; text-align: right; }
  .actie { display: contents; }
  .beslisbalk__rechts .hulp { order: -1; }

  .wachtpaneel { display: grid; gap: var(--sp-6); max-width: 560px; }
  .wachtpaneel h2 { font-size: var(--t-kop-kaart); font-weight: 500; display: flex; align-items: center; gap: var(--sp-3); }
  .wachtpaneel p { color: var(--w78); font-size: var(--t-body-ruim); }
  .wachtpaneel .weggaan { font-size: var(--t-detail-ruim); color: var(--w50); }

  .kostenuitsplitsing { display: grid; gap: var(--sp-2); max-width: 520px; }
  .kostenuitsplitsing .kostenregel { padding-bottom: 6px; border-bottom: 1px solid var(--w08); }
  .kostenuitsplitsing .kostenregel.is-totaal { padding-top: var(--sp-2); border-top: 1px solid var(--w12); color: #fff; }

  .inlogkaart { width: min(420px, 100%); padding: var(--sp-8); background: rgba(0, 31, 58, .6); border: 1px solid var(--w12); border-radius: var(--r-card); display: grid; gap: var(--sp-5); backdrop-filter: blur(6px); }
  .inlogkaart h1 { font-size: var(--t-kop-kaart); font-weight: 500; }
  .inlogkaart .logo { height: 30px; width: auto; }
  .inlogkaart .sub { color: var(--w78); }
  .inlogkaart .onder { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-detail-ruim); color: var(--w50); }
  .inlogkaart .onder a { color: var(--w78); }
}

/* ── templates ─────────────────────────────────────────────────────────── */
@layer schermen {
  .gecentreerd { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); position: relative; background: var(--navy); }
  .gecentreerd::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 20% 15%, rgba(23, 143, 207, .28), transparent 65%); pointer-events: none; }
  .gecentreerd .dots { position: absolute; right: -10%; bottom: -20%; width: 60%; opacity: .12; pointer-events: none; }
  .gecentreerd > * { position: relative; }
  .gecentreerd .vormula { position: absolute; bottom: var(--sp-6); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-2); color: var(--w50); font-size: var(--t-detail-ruim); }
  .gecentreerd .vormula img { height: 16px; opacity: .6; }

  @media (max-width: 899px) {
    .werkvlak, .werkvlak--tekst { grid-template-columns: minmax(0, 1fr); }
    .werkvlak > .kaderkolom { max-width: 200px; margin: 0 auto; width: 100%; }
    .videokop { grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: start; }
    .videokop__rechts { flex-direction: column; align-items: flex-end; gap: 4px; }
    .videokop__rechts .knop--stil { min-height: 30px; padding: 0 var(--sp-2); font-size: var(--t-detail); }
    .beslisbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; padding: var(--sp-3) var(--kant) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--navy-diep); border-top: 1px solid var(--w30); }
    .beslisbalk__rechts { margin-left: 0; width: 100%; display: grid; gap: var(--sp-2); }
    .beslisbalk__rechts .knop--primair { order: -1; }
    .beslisbalk__rechts .hulp { order: 0; text-align: center; max-width: none; }
    .beslisbalk__rechts .knop { width: 100%; }
    .beslisbalk__links:empty, .beslisbalk .knop--terug { display: none; }
    .beslisbalk__links:has(> .knop--terug:only-child) { display: none; }


    .beslisbalk__links { width: 100%; }
    .kopbalk__nav { display: none; }
    .kopbalk__logo span { display: none; }
    .kopbalk__door span { display: none; }
    .kopbalk__ik a { display: none; }
    .raster { grid-template-columns: 1fr; }
    .termregel, .gebruikersregel, .uitnodigregel { grid-template-columns: 1fr; }
    .uitnodigregel .knop { width: 100%; }
    .acties { justify-content: flex-start; }
    .paginakop h1 { font-size: var(--t-kop-kaart); }
    .fasebalk em { width: 10px; }
    .fasebalk span { gap: 5px; }
    .uitspraakregel { grid-template-columns: 1fr auto 1fr; }
  }
}

/* ── fase 3: wat de werkende app extra nodig heeft ─────────────────────── */
@layer moleculen {
  .laadscherm { min-height: 100vh; display: grid; place-items: center; }
  .inlogkolom { display: grid; gap: 16px; width: min(420px, 100%); }
  .meldingen { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--kant); }
  .meldingen__in { padding-top: var(--sp-5); }
  .meldingen .banner { margin: 0; }
  .banner--boven { margin-bottom: var(--sp-6); }
  .banner[role="alert"] p, .banner[role="status"] p { color: #fff; }
  .foutvlak:empty { display: none; }
  .foutregel { font-size: var(--t-detail-ruim); color: var(--fout); margin: 0; }
  p.hint { font-size: var(--t-detail-ruim); color: var(--w62); }
  .meta { font-size: var(--t-detail-ruim); color: var(--w78); }
  .mono { font-family: var(--mono); font-size: var(--t-detail); color: var(--w78); margin-top: 6px; word-break: break-word; }
  .leeg-regel { color: var(--w78); padding: var(--sp-6) 0; }
  .lijst { display: grid; gap: var(--sp-3); }
  .citaat { color: var(--w78); }
  .rij { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-3); align-items: center; }
  .rij__label { font-size: var(--t-detail-ruim); color: var(--w78); }
  .productkaartje__leeg { width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--w08); flex: none; }
  .productzij img { border-radius: var(--r-pill); margin: 10px 0; background: #fff; height: 170px; width: 100%; object-fit: contain; }
  .productzij b { font-weight: 500; }
  .productzij__link { color: var(--w50); font-size: var(--t-detail-ruim); word-break: break-all; }
  .keuzetegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); }
  .keuzetegel { border: 1px solid var(--w12); }
  .speler--bezig { color: var(--w78); font-size: var(--t-detail-ruim); }
  .speler.is-fout .speler__knop { opacity: .4; }
  .pogingen__stil { position: relative; width: 54px; aspect-ratio: 9 / 16; border: 2px solid var(--w12); border-radius: var(--r-pill); overflow: hidden; background: var(--navy-diep); display: block; }
  .pogingen__stil img { width: 100%; height: 100%; object-fit: cover; }
  .pogingen__stil span { position: absolute; left: 4px; bottom: 4px; font: 600 var(--t-mono-label) var(--mono); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
  .dialoog__kaart--beeld { width: min(720px, 100%); }
  .dialoog__kaart--beeld img { max-height: 70vh; width: 100%; object-fit: contain; background: #fff; border-radius: var(--r-pill); }
  .plaatsing { touch-action: none; cursor: default; }
  .plaatsing.is-hand { cursor: move; }
  .plaatsing.is-hand .greep { cursor: nwse-resize; }
  .plaatsing:not(.is-hand) .greep { display: none; }
  .plaatsing:focus-visible { box-shadow: var(--focus); border-radius: 4px; }
  .referenties img.is-product { object-fit: contain; background: #fff; }
  .voorbeelden .opt { min-height: 32px; padding: 0 12px; border: 1px solid var(--w12); border-radius: var(--r-pill); background: transparent; color: var(--w78); font-size: var(--t-detail-ruim); cursor: pointer; }
  .voorbeelden .opt:hover { border-color: var(--w30); color: #fff; }
  .wacht__bedrag { font: 500 var(--t-detail-ruim) var(--mono); color: var(--w78); }
  .foutpaneel { display: grid; gap: var(--sp-4); max-width: 640px; }
  .kader video { background: #000; }
  .kader__meta--boven { bottom: auto; top: 12px; }
  .videokop__rechts .knop--stil { min-height: 32px; }
  .knop.is-slot:hover { background: var(--primary-knop); }
  .knop--secundair.is-slot:hover { background: transparent; }
  .lade__kop .kapje { text-align: right; }
  /* luisterblok (16 september): een regel met uitleg of "nog geen luisterversie" naast een kleine knop */
  .luisterregel { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
  .luisterregel .hint { margin: 0; flex: 1 1 220px; }
  @media (max-width: 899px) {
    .rij { grid-template-columns: 1fr; gap: 4px; }
    .keuzetegels { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .videokop__rechts .videokop__kosten { display: none; }
  }
}

/* ── inlogscherm: Vormula als afzender links, de Metem-werkplaats rechts ── */
@layer schermen {
  .inlogscherm { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 5fr) 7fr; background: var(--navy); }
  .inlogscherm__links { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; justify-items: center; padding: var(--sp-6) var(--sp-8); }
  .inlogscherm__links::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 50% at 10% 5%, rgba(23, 143, 207, .28), transparent 65%); pointer-events: none; }
  .inlogscherm__links .dots { position: absolute; left: -30%; bottom: -25%; width: 110%; opacity: .1; pointer-events: none; }
  .inlogscherm__links > * { position: relative; }
  .inlogscherm__afzender { justify-self: start; }
  .inlogscherm__links .inlogkolom { align-self: center; padding: var(--sp-8) 0; }
  .inlogscherm .inlogkaart { background: transparent; border: 0; padding: 0; backdrop-filter: none; }
  .inlogkaart__vlak { display: grid; gap: var(--sp-5); }
  .inlogscherm .inlogkaart h1 { font-size: var(--t-kop-groot); }
  .inlogscherm__voet { justify-self: stretch; display: flex; justify-content: space-between; color: var(--w50); font-size: var(--t-detail-ruim); }

  .inlogscherm__beeld { position: relative; overflow: hidden; background: var(--navy-diep); }
  .inlogscherm__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
  .inlogscherm__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 51, 94, .55), transparent 18%); pointer-events: none; }

  @media (max-width: 899px) {
    .inlogscherm { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .inlogscherm__beeld { order: -1; height: 38vh; min-height: 240px; }
    .inlogscherm__beeld::after { display: none; }
    .inlogscherm__foto { object-position: 70% 8%; }
    .inlogscherm__links { padding: var(--sp-5) var(--sp-5); }
    .inlogscherm__links .inlogkolom { padding: var(--sp-6) 0; }
    .inlogscherm .kopbalk__logo span { display: inline; }
  }
}