/* =============================================================================
   KMW Snelmontage — stijl
   -----------------------------------------------------------------------------
   Alle ontwerp-keuzes staan als tokens in :root hieronder. Eén plek aanpassen
   herstijlt de hele app: kleuren, lettertype, afronding, ritme, beweging.
   Huisstijl Keijzer Media Works: Work Sans, donker/editorial, hoog contrast.
   HTML: templates/index.html · logica: static/app.js · geen build-stap.
   ============================================================================= */

/* Work Sans staat op onze eigen server, niet bij Google: zo gaat er bij het
   openen van een pagina geen enkel verzoek naar buiten. Eén variabel bestand
   dekt alle diktes die we gebruiken (400 tot 700). */
@font-face {
  font-family: "Work Sans";
  src: url("/static/fonts/worksans-var.woff2") format("woff2-variations"),
       url("/static/fonts/worksans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Lettertype (hierboven geladen van onze eigen server; systeem-fallback) */
  --font: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Basiskleuren */
  --ink:     #0e1014;   /* app-achtergrond — KMW bijna-zwart */
  --panel:   #15171e;   /* kaarten / panelen */
  --panel-2: #191c24;   /* lichte kaart-accent / hover */
  --field:   #0a0c10;   /* invoervelden, tijdlijn */
  --line:    #242833;   /* randen */
  --line-soft: rgba(255,255,255,.06);
  --text:    #f4f6f8;   /* hoofdtekst */
  --muted:   #929aa6;   /* secundaire tekst */
  --accent:  #2e7bff;   /* KMW-blauw — focus, links, nadruk */
  --accent-soft: rgba(46,123,255,.14);
  --warn:    #ffcf6b;

  /* Kleuren per markeringstype */
  --slow:  #4c8dff;
  --cut:   #ff5c5c;
  --trans: #b98cff;

  /* Vorm, maat, ritme */
  --radius:    12px;
  --radius-sm: 9px;
  --tap:       44px;    /* minimale knop-/touch-hoogte */
  --maxw:      940px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.22);

  /* Beweging */
  --t:   160ms cubic-bezier(.2,.6,.2,1);
  --t-2: 340ms cubic-bezier(.2,.6,.2,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 15px/1.6 var(--font); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}

/* --- Header ---------------------------------------------------------------- */
header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
  background: rgba(14,16,20,.82); backdrop-filter: saturate(140%) blur(10px);
}
.brand {
  display: flex; align-items: baseline; gap: 12px; min-width: 0;
  color: inherit; text-decoration: none;
}
.brand:hover .wordmark { color: var(--accent); }

/* Terugknop linksboven op de pagina's ónder de app */
.terug {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 34px; padding: 0 12px 0 10px;
  margin-right: 4px; font-size: 13px; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm); white-space: nowrap;
}
.terug:hover { color: var(--text); border-color: var(--accent); }
.wordmark {
  font-weight: 600; font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.kortnaam { display: none; }
.tool { color: var(--muted); font-size: 12.5px; letter-spacing: .02em; padding-left: 12px; border-left: 1px solid var(--line); }
.spacer { margin-left: auto; }
.icon-btn {
  /* Expliciet centreren: als knop centreert de browser het teken vanzelf, als
     link niet. Daardoor stond het vraagteken buiten de homepagina scheef. */
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  width: var(--tap); height: var(--tap); border-radius: var(--radius-sm);
  font-size: 17px; line-height: 1; text-decoration: none; padding: 0;
  cursor: pointer; transition: border-color var(--t), background var(--t);
}
.icon-btn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* --- Layout ---------------------------------------------------------------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 8px 20px 64px; }

/* Hero — editorial kop in KMW-idioom */
.hero { padding: 30px 2px 18px; }
.hero h1 { margin: 0; font-weight: 600; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.04; letter-spacing: -.02em; }
.hero h1 em { font-style: normal; color: var(--muted); }
.hero p { margin: 12px 0 0; color: var(--muted); max-width: 54ch; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
h2 {
  display: flex; align-items: center; gap: 11px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted); margin: 0 0 16px;
}
h2::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }
label { color: var(--muted); font-size: 13px; display: block; margin-bottom: 6px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hint { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.warn { color: var(--warn); }
.hidden { display: none !important; }

/* --- Formulieren ----------------------------------------------------------- */
input, select {
  font: inherit; background: var(--field); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; min-height: var(--tap); transition: border-color var(--t), box-shadow var(--t);
}
input:hover, select:hover { border-color: #33394a; }
input[type=color] { padding: 4px; width: 52px; }
input[type=checkbox] { min-height: auto; width: auto; accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* --- Knoppen --------------------------------------------------------------- */
button, .btn {
  font: inherit; font-weight: 500; border: 1px solid var(--line);
  background: var(--field); color: var(--text);
  min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
}
button:hover { border-color: var(--accent); background: var(--panel-2); }
button:active { transform: translateY(1px); }
button.primary { background: var(--text); border-color: var(--text); color: var(--ink); font-weight: 600; }
button.primary:hover { background: #fff; box-shadow: 0 4px 18px rgba(255,255,255,.12); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
/* Markeringsknoppen krijgen een gekleurde stip in hun type-kleur */
.b-slow::before, .b-cut::before, .b-trans::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 9px; vertical-align: -1px;
}
.b-slow::before { background: var(--slow); }
.b-cut::before { background: var(--cut); }
.b-trans::before { background: var(--trans); }

/* --- Inlogpagina ----------------------------------------------------------- */
.loginpagina { display: flex; min-height: 100vh; }
.loginwrap { display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 24px; }
.logincard {
  width: 100%; max-width: 380px; padding: 30px 28px 26px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.logincard h1 { margin: 6px 0 4px; font-size: 26px; letter-spacing: -.02em; }
.logincard .wordmark { font-size: 12px; }
.logincard label { margin-top: 18px; }
.logincard input { width: 100%; }
.logincard button { width: 100%; margin-top: 16px; }
.logincard .warnbox { margin: 16px 0 0; padding: 10px 13px; font-size: 13.5px; }
.logincard .klein { margin-top: 20px; font-size: 12.5px; line-height: 1.6; }
.logincard a { color: var(--accent); }

/* Ingelogd kantoor in de kop + beheerscherm */
/* --- Kop: statuschip en accountmenu ---------------------------------------- */
.chip-credits {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px;
  border-radius: 20px; white-space: nowrap; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  background: var(--field); border: 1px solid var(--line); color: var(--text);
  transition: border-color var(--t), background var(--t);
}
.chip-credits:hover { border-color: var(--accent); background: var(--accent-soft); }
.chip-credits.proef { color: var(--slow); border-color: rgba(76,141,255,.4); }
.chip-credits.laag  { color: var(--warn); border-color: rgba(255,207,107,.45); }
.chip-credits.leeg  { color: var(--cut);  border-color: rgba(255,92,92,.45); }

.accountmenu { position: relative; }
.avatar {
  width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; cursor: pointer;
}
.avatar:hover { filter: brightness(1.12); }
.avatar img { width: 100%; height: 100%; object-fit: cover; background: #fff; }

.menupop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 232px; padding: 6px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
.menupop .mkop { padding: 10px 12px 12px; line-height: 1.35; }
.menupop .mkop b { display: block; font-size: 13.5px; color: var(--text); }
.menupop .mkop span { font-size: 12px; color: var(--muted); word-break: break-all; }
.menupop a, .menupop button {
  display: block; width: 100%; text-align: left; text-decoration: none;
  padding: 10px 12px; min-height: 0; border: none; background: none;
  border-radius: 7px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer;
}
.menupop a:hover, .menupop button:hover { background: var(--panel-2); }
.menupop .msplits { height: 1px; margin: 6px 4px; background: var(--line); }
.menupop .muit { color: var(--muted); }
.menupop .muit:hover { color: var(--cut); }
/* --- Beheer: tabbladen, tegels, tabellen ----------------------------------- */
.acctlink { font-size: 13px; color: var(--accent); }
.tabs {
  display: flex; gap: 4px; padding: 0 20px; max-width: var(--maxw);
  margin: 0 auto; border-bottom: 1px solid var(--line); position: sticky; top: 61px;
  background: rgba(14,16,20,.92); backdrop-filter: blur(8px); z-index: 4;
}
.tabs a {
  padding: 13px 15px; font-size: 14px; font-weight: 500; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--text); }
.tabs a.aan { color: var(--text); border-bottom-color: var(--accent); }
.tabs .bel {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 6px;
  border-radius: 10px; background: var(--cut); color: #fff; font-size: 11px; font-weight: 700;
}

.periodebalk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 4px;
}
.periodebalk button {
  min-height: 34px; padding: 0 12px; font-size: 13px;
  background: var(--field); border: 1px solid var(--line); color: var(--muted);
}
.periodebalk button.aan { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.periodebalk button.primary { background: var(--text); border-color: var(--text); color: var(--ink); }
.periodebalk input[type=date] { min-height: 34px; padding: 0 8px; font-size: 13px; width: 140px; }
.periodebalk .datums { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
/* Alle links in de app in de accentkleur: het bezocht-paars van de browser is
   op deze donkere achtergrond nauwelijks te lezen. Menu-items zetten hun
   eigen kleur en blijven dus wit. */
a { color: var(--accent); }

.tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.tegel {
  display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.tegel .tl { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tegel .tw { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.tegel.klein .tw { font-size: 21px; }
.tegel .tw.let { color: var(--cut); }
.tegel .tv { font-size: 12px; color: var(--muted); }
.tegel .tv.op { color: var(--slow); }
.tegel .tv.af { color: var(--warn); }

.staafjes { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: 8px; }
.staaf { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 6px; }
.staaf .bar {
  width: 100%; min-height: 2px; border-radius: 5px 5px 0 0;
  background: linear-gradient(var(--accent), rgba(46,123,255,.35));
}
.staaf .lbl { font-size: 10.5px; color: var(--muted); }

.klantentabel { width: 100%; border-collapse: collapse; margin-top: 12px; }
.klantentabel td { padding: 12px 8px 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.klantentabel td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.klantentabel a { text-decoration: none; }
.klantentabel .hint { font-size: 11.5px; margin-top: 2px; }
.klantentabel .let { color: var(--warn); }
.vlag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.vlag.klant { background: var(--accent-soft); color: var(--accent); }
.vlag.aan { background: rgba(76,141,255,.16); color: var(--slow); }
.vlag.uit { background: rgba(255,92,92,.16); color: var(--cut); }

.beheerrij { padding: 16px 0 10px; border-top: 1px solid var(--line); }
.beheerrij:first-of-type { border-top: none; padding-top: 4px; }
.saldoblok { padding: 12px 14px; margin-bottom: 6px; background: var(--field);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mut { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12.5px; }
.mut td { padding: 4px 8px 4px 0; border-top: 1px solid var(--line); color: var(--muted); }
.mut td.t { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mut td.plus { color: var(--slow); font-weight: 600; }
.mut td.min { color: var(--cut); font-weight: 600; }
/* Trechter in het beheerscherm: het aantal is het antwoord, het percentage de
   duiding. Vandaar het aantal in de tekstkleur en het percentage gedempt, en
   allebei uitgelijnd op cijferbreedte zodat de kolom leest als een kolom. */
.trechter td.tnum, .trechter td.tpct {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.trechter td.tnum { color: var(--text); font-weight: 600; width: 64px; }
.trechter td.tpct { width: 56px; }
.trechter .hint { display: block; margin-top: 2px; font-size: 11.5px; }
/* Saldo in de kop van de app */
.saldo { color: var(--text); font-weight: 600; }
.saldo.leeg { color: var(--cut); }

/* Bundels op de saldopagina */
/* Gelijke kolommen en gelijke hoogtes: vier kaarten die verschillen in breedte
   of waarvan de kop op een andere hoogte begint, lezen als rommel. */
.bundels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px; margin-top: 22px;
}
/* Op een telefoon twee naast elkaar: vier kaarten onder elkaar is een lap
   scrollen voor een keuze die je in één oogopslag wil kunnen maken. */
@media (max-width: 560px) {
  .bundels { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bundel { padding: 14px 12px; }
  .bundel .br { font-size: 20px; }
  .bundel .bp { font-size: 14.5px; }
  .bundel .bx { font-size: 11px; }
  /* Op deze breedte breekt 'credits · rest' over twee regels. Bij elke kaart
     twee regels reserveren houdt de onderkant gelijk in plaats van rafelig. */
  .bundel .bc { font-size: 11px; min-height: 2.6em; }
  .bundel .bmerk { font-size: 11px; }
  .bundel .bkeur { left: 12px; }
}
.bundels form { display: flex; }
.bundel {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  min-width: 0; padding: 16px; text-align: left;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.bundel:hover { border-color: var(--accent); }
/* Volgorde op de kaart volgt wat de klant koopt: reels zijn het product,
   credits zijn de rekeneenheid eronder. Vaste hoogtes per regel, zodat de vier
   kaarten regel voor regel op dezelfde lijn liggen. */
.bundel .bmerk {
  /* Vaste hoogte, niet min-height: een lege regel krijgt anders een andere
     regelhoogte dan een gevulde en dan staan de koppen een paar pixels uit
     elkaar — precies wat de rij onrustig maakt. */
  height: 18px; line-height: 18px; margin-bottom: 10px;
  font-size: 12px; font-weight: 600; color: #7ea2ee; letter-spacing: .01em;
}
.bundel .br { font-size: 23px; font-weight: 700; color: var(--text); line-height: 1.1; }
.bundel .bp { margin-top: 8px; font-size: 15.5px; font-weight: 600; color: var(--text); }
.bundel .bx { margin-top: 2px; font-size: 12px; color: var(--muted); }
.bundel .bc { margin-top: 10px; font-size: 12px; color: var(--muted); opacity: .7; }

/* 'Meest gekozen' hangt op de bovenrand in plaats van in de kaart: zo blijft de
   inhoud van alle vier de kaarten op dezelfde hoogte staan. */
.bundel.aanbevolen { border-color: #3B65CB; }
.bundel .bkeur {
  position: absolute; top: 0; left: 16px; transform: translateY(-50%);
  padding: 2px 8px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  border-radius: 999px; color: #fff; background: #3B65CB;
}

/* De 24-uursregel is de belangrijkste voorwaarde van het product en de meest
   gestelde supportvraag; die mag niet wegvallen in het grijs van de rest. */
.hero .regel24 { color: var(--text); margin-top: 10px; }

/* Bundeleditor in het beheerscherm */
.bundelrij { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.bundelrij:first-child { border-top: 0; }
.bvelden { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.bvelden label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.bvelden input[type=text], .bvelden input:not([type]) { width: 150px; }
.bvelden .bkeuze { flex-direction: row; align-items: center; gap: 6px; }
.bweg { margin-left: auto; min-width: 34px; }
.bvoorbeeld { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.bvoorbeeld.fout { color: var(--warn); }

/* --- Rondleiding-bouwer ---------------------------------------------------- */
/* Ruimte-knopjes in de hernoem-popup: tik op de naam van een clip en kies er
   een. De rij bóven de lijst is weg — die dwong een keuze af vóór het uploaden,
   terwijl de miniatuur al laat zien welke clip het is. */
.cat {
  min-height: 30px; padding: 0 10px; font-size: 12.5px;
  background: var(--field); border: 1px solid var(--line); color: var(--muted);
}
.cat:hover { border-color: var(--accent); color: var(--text); }
/* Cliplijst à la Spotify-wachtrij: ⊖ links om te verwijderen, ≡ rechts als
   sleepgreep. Werkt identiek op desktop en telefoon. */
.cliplist { list-style: none; padding: 0; margin: 10px 0 12px; }
.cliprow {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 2px; border-top: 1px solid var(--line);
  user-select: none; -webkit-user-select: none;
}
.cliprow:first-child { border-top: none; }
.cliprow .del {
  flex: none; width: 26px; height: 26px; min-height: 0; padding: 0 0 2px;
  border-radius: 50%; border: 1.5px solid var(--muted); background: none;
  color: var(--muted); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cliprow .del:hover { border-color: var(--cut); color: var(--cut); }
.cliprow .thumb {
  flex: none; width: 42px; height: 56px; border-radius: 6px; overflow: hidden;
  background: var(--field); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.cliprow .thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cliprow .mid { flex: 1; min-width: 0; }
.cliprow .cl-name {
  width: fit-content; max-width: 100%; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  text-decoration: underline dotted rgba(255,255,255,.3); text-underline-offset: 3px;
}
.cliprow .cl-dur { font-size: 12px; color: var(--muted); margin-top: 1px; }
.cliprow .grip {
  flex: none; padding: 8px 10px; color: var(--muted); font-size: 20px; line-height: 1;
  cursor: grab; touch-action: none;
}
.cliprow.dragging { opacity: .92; background: rgba(255,255,255,.05); border-radius: 8px; }
.cliprow.dragging .grip { cursor: grabbing; color: var(--text); }
.cliprow.busy { opacity: .6; }
/* Popover voor naam- en naadkeuze (aan de body, dus nooit afgeknipt) */
.pop {
  position: fixed; z-index: 50; padding: 10px;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  max-height: 60vh; overflow-y: auto;
}
.pop.chips { display: flex; flex-wrap: wrap; gap: 6px; width: 250px; }
.pop.chips .cat { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.pop.lijst { display: flex; flex-direction: column; gap: 2px; width: 232px; padding: 6px; }
.popitem {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  min-height: 38px; padding: 0 10px; font: inherit; font-size: 13px; text-align: left;
  background: none; border: none; border-radius: 8px; color: var(--text);
}
.popitem:hover { background: rgba(255,255,255,.06); }
.popitem.aan { background: var(--accent-soft); color: var(--text); font-weight: 600; }
/* Clipdelen als getinte zones in de strip + ruimtenamen in een eigen strook */
.clipzone { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
.clipzone.odd { background: rgba(255,255,255,.05); }
.clipnames { position: relative; height: 16px; margin: 3px 0 8px; }
.clipnametag {
  position: absolute; top: 0; pointer-events: none;
  padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* Niet-te-missen waarschuwing (bv. 30fps-materiaal) + geavanceerd-blok */
.warnbox {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(255,92,92,.08); border: 1px solid rgba(255,92,92,.35);
  font-size: 14px; line-height: 1.55;
}

/* Sorteerbare kolomkoppen in de klantentabel */
.klantentabel th {
  text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted);
  padding: 0 0 8px; border-bottom: 1px solid var(--line);
}
.klantentabel th.num { text-align: right; }
.klantentabel th.sorteer { cursor: pointer; user-select: none; }
.klantentabel th.sorteer:hover { color: var(--text); }
.klantentabel th.aan { color: var(--accent); }
.klantentabel th.aan::after { content: " \2191"; }
.klantentabel th.aan.af::after { content: " \2193"; }

/* Blok onder de download: review en doorstroom, pas ná de reel zelf */
.nablok { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.dsregel { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.dsregel a { color: var(--accent); }

/* Voorbeeld van het gekozen lettertype voor de openingstitel: laat zien wat je
   krijgt, zodat niemand op een woord als "eigenzinnig" hoeft af te gaan. */
.titelvoorbeeld {
  display: block; width: 100%; max-width: 380px; margin: 12px 0 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}

/* Voorwaarden en privacyverklaring: doorlopende tekst in plaats van formulieren,
   dus smaller en met meer lucht tussen de koppen. */
.tekstpagina { max-width: 760px; }
.tekstpagina .panel h2 { margin: 30px 0 10px; font-size: 17px; }
.tekstpagina .panel h2:first-child { margin-top: 0; }
.tekstpagina .panel p { margin: 0 0 12px; line-height: 1.65; }
.tekstpagina .panel ul { margin: 0 0 14px; padding-left: 20px; line-height: 1.65; }
.tekstpagina .panel li { margin-bottom: 6px; }

/* Strook onder de kop zolang een e-mailadres nog niet bevestigd is. Geel, niet
   rood: er is niets mis, er wacht alleen nog een klik in de mailbox. */
.bevestigbalk {
  padding: 10px 22px; font-size: 13.5px; line-height: 1.5;
  background: rgba(255,207,107,.10);
  border-bottom: 1px solid rgba(255,207,107,.32);
}
.bevestigbalk a { color: var(--warn); text-decoration: underline; }

details.adv { margin-top: 14px; }
details.adv summary { cursor: pointer; color: var(--muted); font-size: 13.5px; }
details.adv summary:hover { color: var(--text); }
details.adv .fields { margin-top: 10px; }

/* --- Video / upload -------------------------------------------------------- */
video { max-width: 100%; max-height: 48vh; border-radius: var(--radius-sm); background: #000; display: block; margin: 0 auto; }
.drop {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 40px; text-align: center; color: var(--muted); cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.drop:hover { border-color: #39415a; color: var(--text); }
.drop.hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

/* --- Laadscherm: woordmerk loopt vol terwijl de preview wordt gebouwd ------ */
.playerwrap { position: relative; }
.loadOverlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: rgba(11,13,17,.95); border-radius: var(--radius-sm);
  text-align: center; padding: 12px;
}
.loadmark {
  position: relative; font-weight: 700; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.loadmark .base { color: rgba(255,255,255,.14); }
.loadmark .fill {
  position: absolute; left: 0; top: 0; width: 0%;
  overflow: hidden; color: var(--text); transition: width .5s ease;
}
.loadpct { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.loadOverlay .hint { margin: 0; }

/* --- Effect-benadering in het voorbeeld ------------------------------------
   Geen echte render: bij het passeren van een overgang/knip/clipgrens doet de
   speler het effect kort ná (doven, flits, zwiep, zoom, vervagen) + badge.
   .vidclip is het vaste, afgeronde kader: de effecten bewegen het beeld
   BINNEN het kader (overflow hidden), niet het kader zelf. */
.vidclip {
  position: relative; width: fit-content; max-width: 100%; margin: 0 auto;
  overflow: hidden; border-radius: var(--radius-sm); background: #000;
}
.vidclip video { margin: 0; border-radius: 0; }
.fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.fx.run-zwart { background: #000; animation: fxFade .7s ease; }
.fx.run-wit   { background: #fff; animation: fxFade .5s ease; }
.fx.run-cross { background: rgba(15,17,21,.2); backdrop-filter: blur(9px); animation: fxFade .8s ease; }
@keyframes fxFade { 0% { opacity: 0 } 45% { opacity: 1 } 100% { opacity: 0 } }
.playerwrap.run-whip-links video  { animation: fxWhipL .4s ease; }
.playerwrap.run-whip-rechts video { animation: fxWhipR .4s ease; }
.playerwrap.run-zoom video        { animation: fxZoom .55s ease; }
@keyframes fxWhipL { 50% { transform: translateX(-6%) scale(1.08); filter: blur(6px); } }
@keyframes fxWhipR { 50% { transform: translateX(6%) scale(1.08); filter: blur(6px); } }
@keyframes fxZoom  { 50% { transform: scale(1.12); } }
.fxbadge {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 4; pointer-events: none; white-space: nowrap;
  background: rgba(11,13,17,.85); border: 1px solid var(--line);
  color: var(--text); font-size: 12.5px; padding: 5px 13px; border-radius: 20px;
}

/* --- Tijdlijn -------------------------------------------------------------- */
.timeline {
  position: relative; height: 68px; margin: 16px 0 0; overflow: hidden;
  background: linear-gradient(var(--field), #0d1016);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; touch-action: none; box-shadow: inset 0 1px 0 var(--line-soft);
}
.playhead { position: absolute; top: 0; bottom: 0; width: 2.5px; z-index: 3; background: var(--accent); pointer-events: none; box-shadow: 0 0 9px rgba(17,109,255,.6); }
.pin { position: absolute; top: 0; bottom: 0; width: 32px; margin-left: -16px; cursor: grab; touch-action: none; z-index: 2; }
.pin .line { position: absolute; left: 15px; top: 0; bottom: 0; width: 3px; opacity: .55; }
.pin .dot { position: absolute; left: 8px; top: -4px; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--ink); transition: transform var(--t), box-shadow var(--t); }
.pin:hover .dot { transform: scale(1.18); }
.pin.slowmo .line, .pin.slowmo .dot { background: var(--slow); }
.pin.transition .line { background: var(--trans); }
/* Overgang = blokje óp de snede (zoals in montageprogramma's), sleepbaar.
   De schuine tweedeling suggereert beeld-A → beeld-B. */
.pin.transition .dot {
  top: 50%; left: 50%; width: 22px; height: 16px; margin: -8px 0 0 -11px;
  border-radius: 4px; background-color: var(--trans);
  background-image: linear-gradient(105deg, transparent 47%, rgba(0,0,0,.35) 47%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
/* Stijl-signatuur per overgang: het blokje toont wat de stijl doet, zodat de
   tijdlijn matcht met de gekozen stijl (was: alles identiek paars). */
.pin.st-zwart .dot    { background-image: linear-gradient(90deg, var(--trans) 20%, #000 80%); }
.pin.st-wit .dot      { background-image: linear-gradient(90deg, var(--trans) 20%, #fff 80%); }
.pin.st-dissolve .dot { background-image: linear-gradient(90deg, var(--trans) 15%, rgba(185,140,255,.25) 85%); }
.pin.st-zoom .dot     { background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 15%, var(--trans) 55%); }
.pin.st-whip-links .dot::after  { content: "‹‹"; letter-spacing: -1px; }
.pin.st-whip-links .dot,
.pin.st-whip-rechts .dot { background-image: none; }
.pin.st-whip-rechts .dot::after { content: "››"; letter-spacing: -1px; }
/* Clipgrens: zelfde blokje maar grijs en vast (naadstijl kies je in de lijst) */
.pin.clip { cursor: pointer; }
.pin.clip::after { transition: transform var(--t), box-shadow var(--t); }
.pin.clip:hover::after { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
.pin.clip .line { left: 15px; width: 2px; opacity: .4; background: var(--text); border-radius: 0; }
.pin.clip::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 16px;
  margin: -8px 0 0 -11px; border-radius: 4px; border: 2px solid var(--ink);
  background-color: #97a1b0;
  background-image: linear-gradient(105deg, transparent 47%, rgba(0,0,0,.30) 47%);
}
/* Naadkeuze per clipgrens, zelfde signatuur-idee in grijs. Het volledige
   palet (zwiep/zoom/flits) is hier beschikbaar: wissel-effecten horen bij
   het wisselen van ruimte. */
.pin.clip.sm-zwart::after { background-image: linear-gradient(90deg, #97a1b0 20%, #000 80%); }
.pin.clip.sm-cross::after { background-image: linear-gradient(90deg, #97a1b0 15%, rgba(151,161,176,.2) 85%); }
.pin.clip.sm-wit::after   { background-image: linear-gradient(90deg, #97a1b0 20%, #fff 80%); }
.pin.clip.sm-zoom::after  { background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 15%, #97a1b0 55%); }
.pin.clip.sm-hard::after {
  background-image: linear-gradient(90deg, #97a1b0 46%, var(--ink) 46%, var(--ink) 54%, #97a1b0 54%);
}
.pin.clip.sm-whip-links::after, .pin.clip.sm-whip-rechts::after {
  background-image: none; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -1px;
}
.pin.clip.sm-whip-links::after  { content: "‹‹"; }
.pin.clip.sm-whip-rechts::after { content: "››"; }
.pin.hi .dot { box-shadow: 0 0 0 5px rgba(255,255,255,.30); }
.band { position: absolute; top: 0; bottom: 0; background: rgba(255,92,92,.18); border-left: 2px solid var(--cut); border-right: 2px solid var(--cut); z-index: 1; }
.band .h { position: absolute; top: 0; bottom: 0; width: 26px; cursor: ew-resize; touch-action: none; }
.band .h::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 20px; margin: -10px 0 0 -2px; border-radius: 3px; background: var(--cut); }
.band .h.l { left: -13px; } .band .h.r { right: -13px; }

/* --- Gereedschapsbalk: vaste grid, overgang-kiezer als één element --------- */
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.transpick { display: inline-flex; align-items: stretch; gap: 0; }
.transpick select {
  min-width: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
}
.transpick .b-trans { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* --- Overzicht per ruimte -------------------------------------------------- */
.marks { list-style: none; padding: 0; margin: 16px 0 0; }
.marks .grp { padding: 10px 0; }
.grpkop { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.grpkop .gthumb {
  flex: none; width: 30px; height: 40px; border-radius: 5px; overflow: hidden;
  background: var(--field); border: 1px solid var(--line);
}
.grpkop .gthumb img { width: 100%; height: 100%; object-fit: cover; }
.grpkop .gnaam {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grpkop .gdur { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.marks .chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0 40px; }
.marks .grp:only-child .chips, .marks .grp:first-child:last-of-type .chips { margin-left: 0; }
.marks .leeg { font-size: 12.5px; color: var(--muted); font-style: italic; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 4px 6px 4px 11px; border-radius: 20px; font-size: 12.5px;
  background: var(--field); border: 1px solid var(--line);
}
.chip:hover { border-color: #39415a; }
.chip b { font-weight: 600; }
.chip .ct { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.c-slowmo b { color: var(--slow); }
.chip.c-transition b { color: var(--trans); }
.chip.c-cut b { color: var(--cut); }
.chip .x, .chip .mini {
  border: none; background: none; color: var(--muted); cursor: pointer;
  min-height: 26px; padding: 0 5px; font-size: 14px; line-height: 1;
}
.chip .x:hover { color: var(--cut); }
.chip .mini:hover { color: var(--text); }
/* Overgang tussen twee ruimtes: scheidingsregel met een échte keuzeknop */
.marks .seamrow { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.seamlijn { flex: 1; height: 1px; background: var(--line); }
.seambtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  min-height: 30px; padding: 0 10px; font: inherit; font-size: 12.5px;
  background: var(--field); border: 1px solid var(--line); border-radius: 20px; color: var(--text);
}
.seambtn:hover { border-color: var(--accent); }
.seambtn.groot { min-height: 34px; padding: 0 14px; font-size: 13px; }
.seambtn .chev { color: var(--accent); font-size: 11px; }
.seambtn .sl { white-space: nowrap; }
/* Stijl-blokje: zelfde signatuur als op de tijdlijn */
.sblok {
  display: inline-block; flex: none; width: 20px; height: 14px; border-radius: 4px;
  background-color: #97a1b0;
  background-image: linear-gradient(105deg, transparent 47%, rgba(0,0,0,.30) 47%);
  text-align: center; font-size: 10px; line-height: 14px; color: #fff; font-weight: 700;
}
.sblok.sm-zwart    { background-image: linear-gradient(90deg, #97a1b0 20%, #000 80%); }
.sblok.sm-cross,
.sblok.sm-dissolve { background-image: linear-gradient(90deg, #97a1b0 15%, rgba(151,161,176,.2) 85%); }
.sblok.sm-wit      { background-image: linear-gradient(90deg, #97a1b0 20%, #fff 80%); }
.sblok.sm-zoom     { background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 15%, #97a1b0 55%); }
.sblok.sm-hard     { background-image: linear-gradient(90deg, #97a1b0 46%, var(--ink) 46%, var(--ink) 54%, #97a1b0 54%); }
.sblok.sm-whip-links::after  { content: "‹‹"; letter-spacing: -1px; }
.sblok.sm-whip-rechts::after { content: "››"; letter-spacing: -1px; }
.sblok.sm-whip-links, .sblok.sm-whip-rechts { background-image: none; }

/* --- Voortgang / resultaat ------------------------------------------------- */
.bar { height: 12px; background: var(--field); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 20px; transition: width var(--t-2);
  background: linear-gradient(90deg, var(--accent), #63a0ff); }
a.dl { color: var(--accent); text-decoration: none; }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--ink); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.ec { width: 150px; height: 266px; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; box-shadow: var(--shadow-sm); }
/* --- Hulp-popup ------------------------------------------------------------ */
.modal {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(8,10,14,.72); backdrop-filter: blur(3px);
  /* Als het venster toch te klein uitpakt, moet je bij de bovenkant kunnen. */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modalbox {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 520px;
  /* dvh houdt rekening met de adresbalk van mobiele browsers; vh telt die niet
     mee, waardoor de bovenkant van het venster buiten beeld kon vallen. */
  max-height: 88vh; max-height: 88dvh;
  /* margin:auto in plaats van alleen align-items: bij een te hoog paneel snijdt
     centreren de bovenkant af en is hij niet te bereiken; met auto-marges niet. */
  margin: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modalx {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%;
  background: none; border: none; color: var(--muted); font-size: 15px;
}
.modalx:hover { color: var(--text); background: var(--field); }
.slides { overflow-y: auto; padding: 26px 26px 6px; }
.slide { display: none; }
.slide.aan { display: block; animation: rise var(--t-2) both; }
.slide .stap {
  display: inline-block; margin-bottom: 10px; padding: 3px 11px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.slide h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.slide p { margin: 0 0 10px; color: var(--muted); line-height: 1.6; }
.slide ul { margin: 0 0 10px; padding-left: 20px; color: var(--muted); line-height: 1.65; }
.slide li { margin-bottom: 5px; }
.slide b { color: var(--text); font-weight: 600; }
.slide .mini-tip {
  margin-top: 12px; padding: 10px 13px; border-radius: var(--radius-sm);
  background: var(--field); border: 1px solid var(--line); font-size: 13.5px;
}
.modalfoot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 26px; border-top: 1px solid var(--line); margin-top: auto;
}
.dots { display: flex; gap: 7px; flex: 1; }
.dot {
  width: 8px; height: 8px; min-height: 0; padding: 0; border-radius: 50%;
  background: var(--line); border: none; cursor: pointer; transition: background var(--t), transform var(--t);
}
.dot:hover { background: #39415a; }
.dot.aan { background: var(--accent); transform: scale(1.25); }
.navs { display: flex; gap: 8px; }
.modalfoot .mini { min-height: 38px; padding: 0 14px; }
/* pijltjes zeggen genoeg; alleen de afsluitknop draagt tekst */
.navs .pijl { width: 46px; padding: 0; font-size: 16px; line-height: 1; }
.modalmail {
  padding: 12px 26px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); text-align: center;
}
.modalmail a { color: var(--accent); font-weight: 500; }

@media (max-width: 640px) {
  .modal { padding: 10px; align-items: flex-end; }
  .modalbox { max-height: 92vh; max-height: 92dvh; }
  .slides { padding: 22px 18px 4px; }
  .slide h3 { font-size: 19px; }
  .modalfoot, .modalmail { padding-left: 18px; padding-right: 18px; }
}

/* --- Beweging: panelen rijzen op, gestaggerd ------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main > .panel { animation: rise var(--t-2) both; }
main > .panel:nth-of-type(2) { animation-delay: .04s; }
main > .panel:nth-of-type(3) { animation-delay: .08s; }
main > .panel:nth-of-type(4) { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Mobiel ---------------------------------------------------------------- */
@media (max-width: 640px) {
  body { overflow-x: clip; }  /* een te breed element mag de pagina nooit oprekken */
  .fields { grid-template-columns: 1fr; }
  main { padding: 6px 14px 48px; }
  header { padding: 13px 15px; }
  .tool { display: none; }
  /* Kop compact: alleen woordmerk, saldo en het accountmenu. De ?-knop zit
     daar als 'Uitleg' in, zodat er niets meer naast elkaar vecht. */
  header { gap: 10px; padding: 12px 15px; }
  .wordmark { font-size: 11px; letter-spacing: .16em; }
  .volnaam { display: none; }
  .kortnaam { display: inline; }
  /* Met een terugknop erbij past het woord "Terug" er niet meer naast het
     woordmerk en de creditchip; de pijl alleen is genoeg en blijft aantikbaar. */
  .terugwoord { display: none; }
  .terug { padding: 0 11px; margin-right: 0; }
  .helpknop { display: none; }
  .chip-credits { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .avatar { width: 36px; height: 36px; }
  .menupop { min-width: 216px; }
  .hero { padding: 22px 0 14px; }
  .row { gap: 8px; }
  button, .btn { padding: 0 13px; }
  /* Overzicht: chips onder de kopregel, iets ruimer aantikbaar */
  .marks .chips { margin-left: 0; gap: 6px; }
  .chip { padding: 5px 6px 5px 11px; }
  /* Beheer op een telefoon: tabbladen scrollen, tegels twee op een rij */
  .tabs { top: 57px; padding: 0 10px; overflow-x: auto; }
  .tabs a { padding: 12px 11px; font-size: 13px; }
  .tegels { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tegel { padding: 13px 14px; }
  .tegel .tw { font-size: 22px; }
  .klantentabel td { padding: 10px 6px 10px 0; }
  .staafjes { height: 120px; gap: 5px; }
  /* Markeer-paneel: speler, tijdlijn en knoppen samen op één scherm */
  .vidclip video { max-height: 40vh; }
  .timeline { height: 76px; }
  .pin .dot { width: 21px; height: 21px; left: 6px; top: -6px; }
  .pin.transition .dot { width: 26px; height: 19px; margin: -10px 0 0 -13px; }
  .tools { display: grid; grid-template-columns: 1fr 1fr; }
  .tools .transpick { grid-column: 1 / -1; }
  .tools .transpick select { flex: 1; }
  .tools .transpick.hidden { display: none; }
  /* compactere knoppen, in verhouding met de tijdlijn */
  .tools button, .tools select {
    min-height: 38px; font-size: 13px; padding: 0 10px; white-space: nowrap;
  }
  .tools .b-slow::before, .tools .b-cut::before, .tools .b-trans::before { margin-right: 6px; }
}

/* Trechtermomenten in de klantentabel: een leeg vakje betekent "hier hield
   het op", en dat moet je in één oogopslag zien zonder dat het schreeuwt. */
.moment { font-size: 12.5px; white-space: nowrap; }
.moment.leeg { color: #3a4056; }

/* ---- Eerste-keer-modus -----------------------------------------------------
   Drie stappen boven het scherm zolang er nog geen reel af is. De andere twee
   blijven zichtbaar maar gedempt: iemand moet meteen zien hoeveel er nog komt,
   anders voelt stap 1 als een open einde. */
.stapbalk { margin: 0 0 22px; }
.gratisregel {
  margin: 0 0 12px; font-weight: 600; color: var(--accent);
  font-size: 14.5px; letter-spacing: .01em;
}
.stapbalk ol {
  display: flex; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.stapbalk li {
  flex: 1; min-width: 0; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); opacity: .5;
  transition: opacity var(--t), border-color var(--t), background var(--t);
}
.stapbalk li.aan {
  opacity: 1; border-color: var(--accent);
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel);
}
.stapbalk li b {
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.stapbalk li.aan b { color: var(--accent); }
.stapbalk li span { font-size: 14.5px; line-height: 1.35; }
@media (max-width: 720px) {
  .stapbalk ol { flex-direction: column; gap: 7px; }
  .stapbalk li { padding: 10px 12px; }
  .stapbalk li:not(.aan) span { display: none; }   /* gedempt maar zichtbaar */
}

/* Filminstructie: open bij de eerste sessie, daarna ingeklapt bereikbaar. */
.filmles {
  margin: 14px 0 2px; padding: 12px 14px;
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.filmles summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.filmles summary::marker { color: var(--muted); }
.filmles ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.7; }
.filmles li { font-size: 14px; }

/* Omweg voor als de fototheek treuzelt. Ingeklapt houdt hij zich stil: de kop
   staat in de gedempte kleur, want wie geen last heeft van het wachten hoeft
   hier niet te zijn. Uitgeklapt is het gewone leestekst, dus daar geen extra
   demping overheen. */
.tip-iphone summary { font-weight: 500; font-size: 13.5px; color: var(--muted); }
.tip-iphone[open] summary { color: var(--text); margin-bottom: 4px; }
.tip-iphone p { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.tip-iphone ol { margin: 8px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.7; }
.tip-iphone ol li { font-size: 13.5px; }
.tip-iphone .tip-slot { font-size: 12.5px; opacity: .8; }

/* Gevarenzone in het beheer: onomkeerbare acties horen zichtbaar anders te zijn
   dan opslaan. Rustig rood — een schreeuwend blok maakt dat je het wegkijkt. */
.panel.gevaar { border-color: rgba(255, 92, 92, .32); }
.panel.gevaar h2 { color: #ff8b8b; }
button.weg {
  background: rgba(255, 92, 92, .12); border: 1px solid rgba(255, 92, 92, .45);
  color: #ff9a9a;
}
button.weg:hover { background: rgba(255, 92, 92, .2); color: #ffbcbc; }

/* Montagevoorbeeld: een staande 9:16-video in een staand venster wordt bij
   width:100% al snel 640px hoog. Dan valt hij onder de tekst uit het zicht,
   binnen het scrollende deel van het venster — je ziet dan alleen de uitleg en
   denkt dat er geen beeld is. Hoogte leidend, breedte volgt. */
.mvbeeld {
  display: block; margin: 12px auto 0;
  width: auto; max-width: 100%; max-height: 46dvh;
  border-radius: 10px; background: #000;
}