/* ==========================================================================
   VideoFlow — thema "regiekamer"
   Basis: donker rackpaneel, tally-rood als enige felle kleur,
   SMPTE-balk als vaste signatuur (bovenrand + voortgang van elk project).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* De kleuren staan in variabelen; donker en licht gebruiken dezelfde namen.
   Het thema staat als data-thema op <html> en wordt onthouden per browser. */
:root, :root[data-thema="donker"] {
  --bg-diep:     #1A2028;   /* de hoofdbalk bovenaan */
  --bg-sub:      #1F2630;   /* de projectbalk eronder */
  --bg:          #232B36;   /* de pagina zelf */
  --paneel:      #2C3542;
  --paneel-2:    #36404F;
  --paneel-3:    #414C5D;
  --rand:        #3E4855;
  --rand-fel:    #566274;
  --tekst:       #F0F4FA;
  --zacht:       #B6C0CE;
  --uit:         #8C97A6;
  --tally:       #F0454F;
  --tally-diep:  #96222A;
  --cyaan:       #46CCE2;
  --groen:       #3ACD95;
  --oranje:      #F0AD45;
  --paars:       #A98BE8;
  --schaduw:     0 1px 2px rgba(0,0,0,.20), 0 10px 26px -16px rgba(0,0,0,.5);
  --schaduw-kaart: 0 1px 2px rgba(0,0,0,.18);
  --glans:       rgba(255,255,255,.04);
  --thema-ic:    '☀';
}

:root[data-thema="licht"] {
  --bg-diep:     #FFFFFF;
  --bg-sub:      #FFFFFF;
  --bg:          #F3F5F9;
  --paneel:      #FFFFFF;
  --paneel-2:    #EDF1F6;
  --paneel-3:    #E2E8F0;
  --rand:        #DCE2EB;
  --rand-fel:    #BFC8D6;
  --tekst:       #1B222C;
  --zacht:       #556070;
  --uit:         #85909F;
  --tally:       #D92D3A;
  --tally-diep:  #A21F29;
  --cyaan:       #0E8CA5;
  --groen:       #15905F;
  --oranje:      #B97708;
  --paars:       #7549BE;
  --schaduw:     0 1px 2px rgba(16,24,40,.06), 0 12px 28px -18px rgba(16,24,40,.25);
  --schaduw-kaart: 0 1px 2px rgba(16,24,40,.05);
  --glans:       rgba(16,24,40,.02);
  --thema-ic:    '☾';
}

:root {
  --smpte-1: #BFBFBF; --smpte-2: #BFBF00; --smpte-3: #00BFBF; --smpte-4: #00BF00;
  --smpte-5: #BF00BF; --smpte-6: #BF0000; --smpte-7: #0000BF;

  --display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --r: 8px; --r-s: 6px;
  --rail: 0px;
  --balk: 6px;          /* de kleurenbalk bovenaan het scherm */
  --top: 56px;          /* de hoofdbalk */
  --breedte: min(94%, 1640px);
  color-scheme: dark;
}
:root[data-thema="licht"] { color-scheme: light; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--tekst);
  font-family: var(--body); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyaan); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Zakelijk en rustig: één schreefloze letter, geen kapitalen in koppen. De
   gecondenseerde letter houden we voor de afdrukken. */
h1, h2, h3, h4 { font-family: var(--body); font-weight: 650; letter-spacing: -.012em; margin: 0; line-height: 1.2; }
h1 { font-size: 21px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 2px; border-radius: 3px; }

/* ---------------------------------------------------------- SMPTE-signatuur */
.smpte-strip { display: flex; height: 4px; width: 100%; }
/* De balk bovenaan het scherm mag opvallen: dat is het herkenningspunt. */
.smpte-top { height: var(--balk); }
.smpte-strip span { flex: 1; }
.smpte-strip span:nth-child(1) { background: var(--smpte-1); }
.smpte-strip span:nth-child(2) { background: var(--smpte-2); }
.smpte-strip span:nth-child(3) { background: var(--smpte-3); }
.smpte-strip span:nth-child(4) { background: var(--smpte-4); }
.smpte-strip span:nth-child(5) { background: var(--smpte-5); }
.smpte-strip span:nth-child(6) { background: var(--smpte-6); }
.smpte-strip span:nth-child(7) { background: var(--smpte-7); }
.smpte-top { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }

/* Voortgang = dezelfde balk, maar per workflowstap ingekleurd. Raster in plaats
   van flex, zodat de namen eronder exact onder hun kleurvlak uitkomen. */
.smpte-voortgang {
  display: grid; grid-template-columns: repeat(var(--n, 7), 1fr);
  gap: 2px; height: 8px; border-radius: 3px; overflow: hidden;
}
.smpte-voortgang span { background: var(--kleur); opacity: .13; transition: opacity .25s; }

.stap-labels {
  display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: 2px; margin-top: 8px;
}
.stap-labels span {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  font-size: 11px; line-height: 1.25; color: var(--uit); padding: 0 2px; hyphens: auto;
}
.stap-labels span i { width: 7px; height: 7px; border-radius: 50%; background: var(--kleur); opacity: .3; }
.stap-labels .teller {
  display: block; font-size: 10.5px; font-weight: 600; line-height: 1.25;
  color: var(--zacht); margin-top: 3px; font-family: var(--tekst-font, inherit);
}
.stap-labels .teller.stil { font-weight: 400; color: var(--uit); }
/* "1 bezig" op een eigen regel, en nooit in tweeën gebroken */
.stap-labels .teller { text-align: center; }
.stap-labels .teller .bezig {
  display: block; width: 100%; text-align: center; font-style: normal; white-space: nowrap;
  color: var(--oranje); font-weight: 600; margin-top: 1px;
}
.stap-labels .is-gereed .teller { color: var(--groen); }
.stap-labels .is-bezig .teller { color: var(--oranje); }
/* iets meer lucht nu de tekst onder de balk langer is */
.stap-labels { margin-top: 10px; }
.stap-labels span { padding: 0 4px; }
@media (max-width: 1100px) { .stap-labels .teller { font-size: 10px; } }
.stap-labels .is-gereed { color: var(--tekst); }
.stap-labels .is-gereed i { opacity: 1; }
.stap-labels .is-bezig { color: var(--zacht); }
.stap-labels .is-bezig i { opacity: .7; }
@media (max-width: 900px) { .stap-labels { display: none; } }
.smpte-voortgang .vs-gereed { opacity: 1; }
.smpte-voortgang .vs-bezig  { opacity: .62; animation: pulseer 2.2s ease-in-out infinite; }
.smpte-voortgang .vs-wacht  { opacity: .32; }
.smpte-voortgang .vs-nvt    { opacity: .06; }
.smpte-voortgang.groot { height: 14px; }
@keyframes pulseer { 0%,100% { opacity: .62; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------------ layout
   De navigatie staat boven en in het midden: links het merk, in het midden de
   vijf onderdelen, rechts je eigen knoppen. Pagina's die bij een onderdeel
   horen zitten in een uitklaplijst, niet in een tweede balk. */
body { padding-top: var(--balk); }

.topbalk {
  position: sticky; top: var(--balk); z-index: 60;
  background: var(--bg-diep); border-bottom: 1px solid var(--rand);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; height: var(--top); padding: 0 18px;
}
.topbalk .merk { display: flex; align-items: center; text-decoration: none; justify-self: start; }
.topbalk .merk img { max-height: 26px; display: block; }
.topbalk .merk .naam {
  font-family: var(--body); font-size: 15px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tekst);
}
.topbalk .merk .naam b { color: var(--tally); font-weight: 700; }
.topbalk .menu-knop {
  display: none; background: none; border: 1px solid var(--rand); color: var(--zacht);
  border-radius: var(--r-s); padding: 4px 9px; cursor: pointer; font-size: 14px;
}

.hoofdnav { display: flex; align-items: center; gap: 2px; justify-self: center; }
.topbalk .rechts { display: flex; align-items: center; gap: 8px; justify-self: end; }

/* ----------------------------------------------------- menu met uitklaplijst */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a {
  padding: 7px 12px; border-radius: var(--r-s); color: var(--zacht); text-decoration: none;
  font-size: 13px; font-weight: 500; white-space: nowrap; letter-spacing: .005em;
}
.nav-item > a:hover { color: var(--tekst); text-decoration: none; }
.nav-item > a.actief { color: var(--tekst); font-weight: 600; }
.nav-item.heeft-sub > a { padding-right: 4px; }
.nav-item .caret {
  width: 18px; height: 26px; padding: 0; margin-right: 4px; border: 0; background: none;
  color: var(--uit); cursor: pointer; display: grid; place-items: center;
}
.nav-item .caret::after {
  content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg);
}
.nav-item .caret:hover, .nav-item.open .caret { color: var(--tekst); }
.nav-item .uitklap {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 190px;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r-s);
  box-shadow: var(--schaduw); padding: 5px;
}
.nav-item.open .uitklap { display: block; }
.nav-item .uitklap a {
  display: block; padding: 7px 11px; border-radius: 5px; font-size: 13px;
  color: var(--zacht); text-decoration: none; white-space: nowrap;
}
.nav-item .uitklap a:hover { background: var(--paneel-2); color: var(--tekst); text-decoration: none; }
.nav-item .uitklap a.actief { background: var(--paneel-2); color: var(--tekst); font-weight: 500; }

.thema-knop {
  width: 30px; height: 30px; border-radius: var(--r-s); cursor: pointer;
  background: none; border: 1px solid var(--rand); color: var(--zacht); font-size: 13px;
  display: grid; place-items: center;
}
.thema-knop:hover { color: var(--tekst); border-color: var(--rand-fel); }
.thema-knop .ic::before { content: var(--thema-ic, '☀'); }

/* ------------------------------------------------------------- projectbalk */
.projectbalk { position: sticky; top: calc(var(--balk) + var(--top)); z-index: 50;
  background: var(--bg-sub); border-bottom: 1px solid var(--rand); }
.projectbalk .pb-binnen {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 0 18px; height: 44px;
}
.projectbalk .wie { display: flex; align-items: baseline; gap: 9px; min-width: 0; justify-self: start; }
.projectbalk .wie .nr { font-family: var(--mono); font-size: 11px; color: var(--tally); font-weight: 600; }
.projectbalk .wie .naam {
  font-weight: 600; font-size: 13.5px; color: var(--tekst); text-decoration: none; max-width: 300px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.projectbalk .tabnav { display: flex; gap: 2px; justify-self: center; }
.projectbalk .tabnav .nav-item > a { padding: 11px 12px; border-radius: 0; border-bottom: 2px solid transparent; }
.projectbalk .tabnav .nav-item.hier > a { color: var(--tekst); border-bottom-color: var(--tally); }
.projectbalk .tabnav .caret { height: 40px; }
.projectbalk .los { justify-self: end; font-size: 12px; color: var(--uit); white-space: nowrap; }

/* De voet onder elke pagina: wie je bent en welke versie draait. */
.paginavoet {
  margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--rand);
  display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--uit);
}
.paginavoet .scheid { color: var(--rand); }

@media (max-width: 1040px) {
  .topbalk, .projectbalk .pb-binnen { grid-template-columns: auto 1fr auto; }
  .hoofdnav, .projectbalk .tabnav { justify-self: start; overflow-x: auto; }
}
@media (max-width: 900px) {
  .topbalk .menu-knop { display: block; }
  .hoofdnav { position: absolute; top: calc(var(--top) + 1px); left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; background: var(--bg-diep);
    border-bottom: 1px solid var(--rand); padding: 8px; }
  .hoofdnav.open { display: flex; }
  .nav-item { display: block; }
  .nav-item .uitklap { position: static; display: block; border: 0; box-shadow: none;
    background: none; padding: 0 0 6px 14px; }
  .nav-item .caret { display: none; }
  .projectbalk .pb-binnen { height: auto; padding: 8px 14px; }
}

/* Een knop die een lijstje uitklapt, bijvoorbeeld de ··· in een paginakop. */
.meer-menu .caret-knop { padding: 7px 11px; letter-spacing: .06em; line-height: 1; }
.uitklap.rechts-uit { left: auto; right: 0; }
.nav-item .uitklap a.gevaar { color: var(--tally); }
.nav-item .uitklap a.gevaar:hover { background: rgba(229,52,63,.12); color: var(--tally); }

/* De pagina zelf: gecentreerd, met lucht eromheen. */
main.pagina { padding: 22px 20px 36px; width: auto; max-width: 1560px; margin: 0 auto; }

.paginakop { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.paginakop .titel h1 { font-size: 23px; }
.paginakop .titel p { margin: 4px 0 0; color: var(--zacht); font-size: 13px; max-width: 70ch; }
.paginakop .acties { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--uit); display: block; margin-bottom: 3px;
}

/* -------------------------------------------------------------- dashboard
   Een brede kop met de dag en een paar grote kentallen eronder: in één blik
   zie je waar je aan toe bent. */
.hero {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: 16px; border-radius: var(--r);
  background: var(--paneel);
  border: 1px solid var(--rand); box-shadow: var(--schaduw-kaart); position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--smpte-1), var(--smpte-2), var(--smpte-3), var(--smpte-4),
                              var(--smpte-5), var(--smpte-6), var(--smpte-7));
}
.hero h1 { font-size: 27px; }
.hero p { margin: 5px 0 0; color: var(--zacht); font-size: 14px; }
.hero-acties { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.k5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1200px) { .k5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px)  { .k5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.kental.groot { padding: 15px 17px; }
.kental.groot .cijfer { font-size: 28px; }
.kental.groot .label { font-size: 10px; }
a.kental.groot:hover { border-color: var(--accent); }

/* ------------------------------------------------------------------ kaarten */
.kaart { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r);
  box-shadow: var(--schaduw-kaart); }
/* Lucht tussen kaarten die onder elkaar staan. In een raster zorgt de gap al
   voor de tussenruimte; daar zou deze marge de tweede kaart omlaag duwen en
   staan ze scheef naast elkaar. */
.kaart + .kaart { margin-top: 16px; }
.rooster > .kaart + .kaart, .rooster > * > .kaart:first-child { margin-top: 0; }
.rooster > .kaart { margin-top: 0; }
/* Ook lucht tussen losse kaarten en rasters, zodat blokken nooit tegen elkaar plakken. */
.kaart + .rooster, .rooster + .kaart, .rooster + .rooster { margin-top: 16px; }
.kaart-kop {
  padding: 12px 16px; border-bottom: 1px solid var(--rand); display: flex; align-items: center; gap: 12px;
  /* Vaste hoogte, zodat een kop mét knop niet hoger wordt dan een kop zonder.
     Anders beginnen twee kaarten naast elkaar op een andere hoogte. */
  min-height: 52px; box-sizing: border-box;
}
.kaart-kop h2, .kaart-kop h3 {
  font-family: var(--body); font-size: 12.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .09em; color: var(--zacht);
}
.kaart-kop .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kaart-body { padding: 16px; }
.kaart-body.strak { padding: 0; }

/* Kaarten in een raster vullen de hoogte van hun rij, zodat kolommen naast
   elkaar even hoog eindigen en er niets meer verspringt. */
.rooster { display: grid; gap: 16px; align-items: stretch; }
.rooster > .kaart, .rooster > .kental { height: 100%; }
.rooster > .rooster { height: 100%; }
.rooster > .kaart { display: flex; flex-direction: column; }
.rooster > .kaart > .kaart-body:last-child { flex: 1 1 auto; }
.rooster > div { min-width: 0; }
.k2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.k3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.k4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.k-2-1 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.k-1-2 { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
@media (max-width: 1180px) { .k4 { grid-template-columns: repeat(2,minmax(0,1fr)); } .k-2-1,.k-1-2 { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .k2,.k3,.k4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- kengetallen */
.kental { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r);
  padding: 14px 16px; position: relative; overflow: hidden; box-shadow: var(--schaduw-kaart); }
.kental::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--rand-fel)); }
.kental .cijfer { font-family: var(--body); font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin-top: 2px; }
.kental .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--uit); }
.kental .sub { font-size: 11.5px; color: var(--uit); margin-top: 2px; }
/* Een kental dat ook een filter aanzet. */
a.kental { display: block; color: inherit; text-decoration: none; }
a.kental:hover { border-color: var(--rand-fel); color: inherit; text-decoration: none; }
a.kental:hover .label { color: var(--zacht); }

/* ------------------------------------------------------------------ tabellen */
.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--uit); font-weight: 500;
  padding: 10px 14px; border-bottom: 1px solid var(--rand); white-space: nowrap; background: var(--paneel);
}
.tabel td { padding: 11px 14px; border-bottom: 1px solid rgba(43,51,66,.6); vertical-align: middle; }
.tabel tbody tr:hover { background: var(--paneel-2); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel .num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabel .rechts, td.rechts, th.rechts { text-align: right; }
.tabel a.hoofd { color: var(--tekst); font-weight: 600; }
.tabel a.hoofd:hover { color: var(--cyaan); }
.tabel-wrap { overflow-x: auto; }

/* -------------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--rand-fel); color: var(--zacht); background: var(--paneel-2); white-space: nowrap;
}
.badge.is-goed { color: var(--groen); border-color: rgba(53,192,138,.4); background: rgba(53,192,138,.1); }
.badge.is-waarschuwing { color: var(--oranje); border-color: rgba(232,163,61,.4); background: rgba(232,163,61,.1); }
.badge.is-fout { color: var(--tally); border-color: rgba(229,52,63,.4); background: rgba(229,52,63,.1); }
.badge.is-info { color: var(--cyaan); border-color: rgba(63,193,216,.4); background: rgba(63,193,216,.1); }
.badge.is-uit { color: var(--uit); }
.punt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 20px;
  background: var(--paneel-2); border: 1px solid var(--rand); font-size: 12px; color: var(--zacht);
}
.chip .stip { width: 8px; height: 8px; border-radius: 50%; background: var(--kleur, var(--uit)); }

/* ------------------------------------------------------------------- knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-s); border: 1px solid var(--rand);
  background: var(--paneel-2); color: var(--tekst); font-family: var(--body); font-size: 13px;
  font-weight: 500; cursor: pointer; text-decoration: none; box-shadow: var(--schaduw-kaart);
  transition: background .14s, border-color .14s;
}
.btn:hover { background: var(--paneel-3); text-decoration: none; border-color: var(--rand-fel); }
.btn-hoofd { background: var(--tally); border-color: var(--tally); color: #fff; font-weight: 600; }
.btn-hoofd:hover { background: var(--tally); border-color: var(--tally); filter: brightness(1.08); }
.btn-stil { background: transparent; border-color: transparent; color: var(--zacht); box-shadow: none; }
.btn-stil:hover { background: var(--paneel-2); color: var(--tekst); }
.btn-gevaar { color: var(--tally); border-color: rgba(229,52,63,.4); background: rgba(229,52,63,.07); }
.btn-gevaar:hover { background: rgba(229,52,63,.16); border-color: var(--tally); }
.btn-klein { padding: 5px 10px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-rij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- formulieren */
.veldgroep { margin-bottom: 16px; }
.veldgroep > label, .veldlabel {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--uit); margin-bottom: 6px;
}
/* Een waarde die vastligt en dus geen invoerveld is, maar er wel bij hoort. */
.vast-waarde {
  padding: 9px 12px; border: 1px dashed var(--rand); border-radius: var(--r-s);
  background: var(--bg); color: var(--zacht); font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=url], input[type=search], select, textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--rand); color: var(--tekst);
  padding: 9px 12px; border-radius: var(--r-s); font-family: var(--body); font-size: 13.5px;
}
input:focus, select:focus, textarea:focus { border-color: var(--cyaan); outline: none; }
input::placeholder, textarea::placeholder { color: #55607A; }
textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--zacht) 50%), linear-gradient(135deg, var(--zacht) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px;
}
input[type=number].getal, input.geld { font-family: var(--mono); }
.hulp { font-size: 12px; color: var(--uit); margin-top: 5px; }
.rij { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rij.vast-2 { grid-template-columns: 1fr 1fr; }
.rij.vast-3 { grid-template-columns: 1fr 1fr 1fr; }
.rij.vast-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .rij.vast-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .rij.vast-2, .rij.vast-3, .rij.vast-4 { grid-template-columns: 1fr; } }

fieldset { border: 1px solid var(--rand); border-radius: var(--r); padding: 16px 18px; margin: 0 0 16px; }
legend {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--zacht); padding: 0 8px;
}

.vinkje { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tekst); cursor: pointer; }
.vinkje input[type=checkbox], .vinkje input[type=radio] { width: 16px; height: 16px; accent-color: var(--tally); }

/* segmentkeuze — voor incl./excl. btw en soortgelijke schakelaars */
.segment { display: inline-flex; background: var(--bg); border: 1px solid var(--rand); border-radius: var(--r-s); padding: 2px; }
.segment label {
  padding: 6px 14px; font-size: 12.5px; border-radius: 4px; cursor: pointer; color: var(--zacht);
  font-family: var(--mono); letter-spacing: .05em; text-transform: uppercase; user-select: none;
}
.segment input { position: absolute; opacity: 0; width: 0; }
.segment input:checked + label { background: var(--paneel-3); color: var(--tekst); box-shadow: inset 0 0 0 1px var(--rand-fel); }
.segment input:focus-visible + label { outline: 2px solid var(--cyaan); }

/* velden die de logica toont of verbergt */
/* Twee keer hetzelfde kenmerk: zo wint deze regel het van een class als
   .melding of .kaart, die verderop hun eigen display meekrijgen. */
[data-toon][data-toon] { display: none; }
[data-toon][data-toon].zichtbaar { display: block; }
.uitleg-blok {
  border: 1px dashed var(--rand-fel); border-radius: var(--r-s); padding: 11px 14px;
  color: var(--zacht); font-size: 13px; background: var(--paneel-2);
}

/* --------------------------------------------------------------- meldingen */
.melding {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r);
  border: 1px solid var(--rand-fel); background: var(--paneel-2); margin-bottom: 16px; font-size: 13.5px;
}
.melding.ok { border-color: rgba(53,192,138,.4); background: rgba(53,192,138,.09); }
.melding.fout { border-color: rgba(229,52,63,.45); background: rgba(229,52,63,.09); }
.melding.let-op { border-color: rgba(232,163,61,.45); background: rgba(232,163,61,.09); }

.leeg { text-align: center; padding: 48px 24px; color: var(--zacht); }
.leeg .groot { font-family: var(--display); font-size: 20px; color: var(--tekst); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.leeg p { margin: 0 auto 16px; max-width: 380px; font-size: 13.5px; }

/* --------------------------------------------------------------- filterbalk */
.filterbalk {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 14px 18px;
  border-bottom: 1px solid var(--rand); background: var(--paneel-2); border-radius: var(--r) var(--r) 0 0;
}
.filterbalk .veldgroep { margin: 0; min-width: 150px; }
.filterbalk .duw { margin-left: auto; }

/* ------------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rand); margin-bottom: 18px; overflow-x: auto; }
.tabs a {
  padding: 9px 15px; color: var(--zacht); font-size: 13.5px; border-bottom: 2px solid transparent;
  white-space: nowrap; font-weight: 500;
}
.tabs a:hover { color: var(--tekst); text-decoration: none; }
.tabs a.actief { color: var(--tekst); border-bottom-color: var(--tally); }

/* -------------------------------------------------------- workflow / scenes */
.stap-rooster { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Compacte stappen: op het overzicht van een productie hoeft de workflow niet
   het halve scherm te vullen, want de scenes staan er direct onder. */
.stap-rooster.compact { gap: 6px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stap-rooster.compact .stap { padding: 7px 9px; }
.stap-rooster.compact .stap .naam { font-size: 11.5px; margin-bottom: 4px; }
.stap-rooster.compact .stap select { font-size: 11.5px; padding: 3px 20px 3px 6px; }
.stap-rooster.compact .stap .notitie { font-size: 10.5px; }
.stap-rooster.compact .stap .badge { font-size: 10px; }
@media (max-width: 1400px) { .stap-rooster.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .stap-rooster.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .stap-rooster.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .stap-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .stap-rooster { grid-template-columns: 1fr; } }
.stap {
  background: var(--paneel-2); border: 1px solid var(--rand); border-radius: var(--r-s);
  padding: 12px 13px; position: relative; overflow: hidden;
}
.stap::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--kleur); opacity: .35; }
.stap.gereed::before, .stap.bezig::before { opacity: 1; }
.stap.gereed { border-color: rgba(53,192,138,.3); }
.stap.bezig { border-color: var(--rand-fel); background: var(--paneel-3); }
.stap.vergrendeld { opacity: .55; }

/* Teller in een workflowstap: hoeveel scenes zijn er klaar met deze stap. */
.stap-teller { display: flex; align-items: baseline; gap: 6px; font-family: var(--mono); }
.stap-teller b { font-size: 19px; line-height: 1; color: var(--tekst); }
.stap-teller span { font-size: 13px; color: var(--uit); }
.stap-teller i {
  font-style: normal; font-size: 10.5px; color: var(--zacht); margin-left: auto;
  background: var(--paneel-3); border-radius: 8px; padding: 1px 7px;
}
.stap.gereed .stap-teller b { color: var(--groen); }
.stap.vergrendeld .naam { color: var(--zacht); }
.stap .naam { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; padding-left: 6px; }
.stap select { font-size: 12px; padding: 5px 26px 5px 8px; }
.stap .notitie { font-size: 11.5px; color: var(--uit); margin-top: 6px; padding-left: 6px; }

.scene-kaart { border: 1px solid var(--rand); border-radius: var(--r); background: var(--paneel); overflow: hidden; }
.scene-kaart + .scene-kaart { margin-top: 12px; }
/* Vaste kolommen, zodat de titels van alle scenes onder elkaar beginnen en
   niet verspringen door een langere fase of een ontbrekend balkje. */
.scene-kop {
  display: grid; gap: 14px; align-items: center; padding: 13px 16px; background: var(--paneel-2);
  grid-template-columns: 54px 150px 104px minmax(0,1fr) 218px auto;
}
.scene-kop > * { min-width: 0; }
/* De titel krijgt lucht: het gekleurde voortgangsbalkje stond er tegenaan.
   Het balkje blijft binnen zijn eigen kolom, ook als je workflow veel stappen
   telt — anders liep het door het scheidingslijntje heen. */
.scene-kop .vak-voortgang { overflow: hidden; }
.scene-kop .vak-titel { padding-left: 12px; }
@media (min-width: 901px) {
  .scene-kop .vak-titel { border-left: 1px solid var(--rand); }
}
.scene-kop .chip { justify-self: start; max-width: 100%; }
.scene-kop .titel a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 1240px) {
  .scene-kop { grid-template-columns: 54px 150px 104px minmax(0,1fr) auto; }
  .scene-kop .vak-stand { display: none; }
}
@media (max-width: 900px) {
  .scene-kop { grid-template-columns: 54px minmax(0,1fr) auto; }
  .scene-kop .vak-fase, .scene-kop .vak-voortgang { display: none; }
}
.scene-nr {
  font-family: var(--mono); font-size: 12px; font-weight: 700; background: var(--bg); color: var(--zacht);
  border: 1px solid var(--rand-fel); border-radius: 4px; padding: 3px 8px; min-width: 40px; text-align: center;
  white-space: nowrap;
}
.scene-kop .titel { font-weight: 600; }
.scene-kop .meta { font-size: 12px; color: var(--uit); }
.scene-body { padding: 14px 16px; font-size: 13px; color: var(--zacht); }
.meta-rij { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: var(--zacht); }
.meta-rij b { color: var(--tekst); font-weight: 500; }

/* -------------------------------------------------------------- tijdlijn */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(43,51,66,.5); font-size: 13px; }
.tijdlijn li:last-child { border-bottom: 0; }
.tijdlijn .wanneer { font-family: var(--mono); font-size: 11.5px; color: var(--uit); min-width: 92px; }

/* ---------------------------------------------------------------- barcode */
.barcode { display: block; }
.label-vel { display: flex; flex-wrap: wrap; gap: 4mm; }

/* Merknaam in het klantportaal: logo met daarnaast de bedrijfsnaam en een
   rustig bijschrift. Geen linkkleur of onderstreping, want het is een titel. */
.portal-merk {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  padding: 4px 0;
}
.portal-merk:hover { text-decoration: none; color: inherit; }
.portal-merk img { max-height: 30px; display: block; }
.portal-merk .naam { display: flex; flex-direction: column; line-height: 1.1; }
.portal-merk .naam b {
  font-family: var(--display); font-size: 18px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tekst);
}
.portal-merk .naam i {
  font-style: normal; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--uit); margin-top: 2px;
}
.portal-merk:hover .naam i { color: var(--zacht); }
/* met logo hoeft de bedrijfsnaam er niet nog eens naast */
.portal-merk img + .naam b { display: none; }
.portal-merk img + .naam i { font-size: 11px; color: var(--zacht); margin-top: 0; }

/* Tweestapsverificatie opzetten: QR-code naast de gegevens om over te typen. */
.tfa-opzet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 14px; }
.tfa-opzet .qr-vak { text-align: center; }
.tfa-opzet .qr-vak svg { display: block; border-radius: var(--r-s); border: 1px solid var(--rand); }
.tfa-opzet .qr-vak .klein { margin-top: 6px; color: var(--uit); max-width: 180px; }
@media (max-width: 640px) { .tfa-opzet { grid-template-columns: 1fr; } .tfa-opzet .qr-vak svg { margin: 0 auto; } }

/* ------------------------------------------------------------ nieuw beginnen */
.nieuw-rooster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.nieuw-blok {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r);
  border-left: 3px solid var(--kleur, var(--rand-fel)); color: var(--tekst); transition: background .15s, border-color .15s;
}
.nieuw-blok:hover { background: var(--paneel-2); border-color: var(--rand-fel); border-left-color: var(--kleur); text-decoration: none; }
.nieuw-blok .ic {
  width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--paneel-3); color: var(--kleur); font-size: 19px;
}
.nieuw-blok .tekst { display: flex; flex-direction: column; gap: 3px; }
.nieuw-blok .tekst b { font-size: 14.5px; }
.nieuw-blok .pijl { margin-left: auto; font-size: 20px; color: var(--uit); }
.nieuw-blok:hover .pijl { color: var(--tekst); }

/* De eerste kruimel is de naam van je bedrijf: een titel, geen linkje. */
.kruimels .kruimel-merk {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tekst); text-decoration: none;
}
.kruimels .kruimel-merk:hover { color: var(--tally); text-decoration: none; }

/* Zelf getekend vlieggebied op de kaart */
.kaart-vlak { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.kaart-vlak polygon { fill: rgba(229,52,63,.18); stroke: var(--tally); stroke-width: 2; stroke-dasharray: 6 4; }
.kaart-punten { position: absolute; inset: 0; z-index: 3; }
.kaart-punten i {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--paneel); border: 2px solid var(--tally); cursor: grab; touch-action: none;
}
.kaart-punten i:hover { background: var(--tally); }
.kaart.tekent { cursor: crosshair; }
.kaart-knoppen button.aan { background: var(--tally); color: #fff; border-color: var(--tally); }

/* Filters in een venster: de balk staat niet meer in de weg, de knop toont
   met een tellertje of er iets aan staat. */
.filterknop .teller {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px;
  border-radius: 8px; background: var(--tally); color: #fff; font-size: 10.5px; font-weight: 700;
}
.btn-plus.actief { border-color: var(--tally); color: var(--tekst); }
form.filterbalk.in-venster {
  display: block; padding: 0; border: 0; background: none; margin: 0;
}
form.filterbalk.in-venster .veldgroep { margin-bottom: 12px; }
form.filterbalk.in-venster .btn-rij { margin-top: 4px; }
form.filterbalk.in-venster .btn-rij.duw { margin-left: 0; }

/* Keuzeblokken in het afdrukvenster */
.print-keuze { display: grid; gap: 8px; }
.print-keuze a {
  display: block; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--r-s);
  background: var(--paneel-2); color: var(--tekst); text-decoration: none;
  border-left: 3px solid var(--rand-fel);
}
.print-keuze a:hover { background: var(--paneel-3); border-left-color: var(--tally); text-decoration: none; }
.print-keuze a b { display: block; font-size: 14px; margin-bottom: 3px; }
.print-keuze a span { display: block; font-size: 12px; color: var(--zacht); line-height: 1.4; }

/* -------------------------------------------------------------- modaalvenster */
.modaal {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(14,18,25,.66); backdrop-filter: blur(3px);
  padding: 40px 20px; overflow-y: auto;
}
.modaal.open { display: block; }
body.modaal-open { overflow: hidden; }
.modaal-vak {
  max-width: 720px; margin: 0 auto; background: var(--paneel); border: 1px solid var(--rand-fel);
  border-radius: var(--r); box-shadow: 0 24px 60px -20px rgba(0,0,0,.55); overflow: hidden;
  animation: modaalIn .16s ease-out;
}
.modaal-vak.breed { max-width: 940px; }
@keyframes modaalIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.modaal-kop {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  border-bottom: 1px solid var(--rand); background: var(--paneel-2);
}
.modaal-kop h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.modaal-kop .sluit {
  margin-left: auto; background: none; border: 0; color: var(--uit); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.modaal-kop .sluit:hover { color: var(--tekst); }
.modaal-body { padding: 18px; }
.modaal-voet {
  display: flex; gap: 8px; align-items: center; padding: 14px 18px;
  border-top: 1px solid var(--rand); background: var(--paneel-2);
}

/* de plusknop die zo'n venster opent */
.btn-plus {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 14px; cursor: pointer;
  background: var(--paneel-3); border: 1px solid var(--rand-fel); color: var(--zacht);
  font-size: 12.5px; font-family: inherit;
}
.btn-plus:hover { color: var(--tekst); border-color: var(--tally); background: rgba(229,52,63,.12); }
.btn-plus b { font-size: 15px; line-height: 1; font-weight: 400; }

/* Inklapbare blokken: klik op de kop om te openen of te sluiten */
.vouw > legend, .vouw > .kaart-kop { cursor: pointer; user-select: none; position: relative; padding-right: 26px; }
.vouw > legend::after, .vouw > .kaart-kop::after {
  content: '›'; position: absolute; right: 6px; top: 50%; margin-top: -9px;
  font-size: 16px; line-height: 1; opacity: .55; transform: rotate(90deg); transition: transform .15s;
}
.vouw.dicht > legend::after, .vouw.dicht > .kaart-kop::after { transform: rotate(0deg); }
.vouw > legend:hover, .vouw > .kaart-kop:hover { color: var(--tekst); }
.vouw.dicht > *:not(legend):not(.kaart-kop) { display: none; }
.vouw.dicht { padding-bottom: 6px; }

/* Zwevende opslaanbalk bij lange lijsten */
.opslaan-balk {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 90px);
  display: flex; align-items: center; gap: 16px; z-index: 60;
  padding: 10px 12px 10px 18px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(30,36,46,.98), rgba(20,25,33,.98));
  border: 1px solid var(--tally); box-shadow: 0 10px 34px -10px rgba(0,0,0,.5);
  font-size: 13px; color: var(--tekst); opacity: 0; transition: transform .2s, opacity .2s;
}
.opslaan-balk.zichtbaar { transform: translate(-50%, 0); opacity: 1; }
.opslaan-balk .btn { border-radius: 20px; }
@media (max-width: 700px) { .opslaan-balk span { display: none; } }

/* Een bestandsnaam als A001_C012_0421XY.MXF heeft geen spaties, dus de browser
   kan hem nergens afbreken en duwt de tabel uit zijn blok. In een smalle kolom
   kappen we hem af met puntjes; de volledige naam staat in de tooltip. Dat
   leest rustiger dan een naam die midden in een woord doorloopt. */
.tabel .kap, .kaart-body.strak .tabel .mono.kap {
  display: block; max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Rijtje met een statuslabel en een korte tekst eronder in een smal blok:
   labels die niet passen gaan naar de volgende regel in plaats van buiten de
   kaart te vallen. */
.chip-rij {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px;
}
.chip-rij .badge { max-width: 100%; }

/* Een cel kan nooit breder worden dan zijn kolom. */
.kaart-body.strak .tabel td { overflow: hidden; }

/* Een datum hoort nooit over twee regels te vallen. */
.tabel td.nowrap, .tabel th.nowrap { white-space: nowrap; }
.kaart-body.strak .tabel { table-layout: fixed; width: 100%; }
.kaart-body.strak .tabel td, .kaart-body.strak .tabel th { overflow-wrap: anywhere; word-break: break-word; }
/* Alleen losse regeltjes met .nowrap blijven ongebroken, niet hele cellen:
   anders duwt bijvoorbeeld een backupregel de tabel alsnog naar buiten. */
.kaart-body.strak .tabel .nowrap { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.kaart-body.strak .tabel td.rechts { white-space: normal; }
.kaart-body.strak .tabel .mono { overflow-wrap: anywhere; }

/* De projecttitel in het portaal is een link naar het project zelf. */
.titel-link { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.titel-link:hover { color: inherit; text-decoration: none; border-bottom-color: var(--tally); }

/* De rij kengetallen is in zijn geheel aanklikbaar. */
.kental-rij { text-decoration: none; color: inherit; }
.kental-rij:hover { text-decoration: none; color: inherit; }
.kental-rij:hover .kental { border-color: var(--rand-fel); }

/* Onderaan elk bewerkformulier dezelfde balk: opslaan links, en daarnaast wat
   je verder met dit onderdeel kunt doen. Zo zit de knop altijd op dezelfde
   plek in plaats van halverwege in een zijkolom. */
.actiebalk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding: 16px 18px;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r);
}
.actiebalk .btn-hoofd { min-width: 180px; justify-content: center; }
/* Een pagina die uit losse blokken bestaat: overal evenveel lucht ertussen,
   ongeacht of het een kaart, een fieldset of een rooster is. */
.blokken > * + * { margin-top: 16px; }
.blokken > fieldset { margin-bottom: 0; }
.blokken > form > fieldset:last-of-type { margin-bottom: 0; }
.blokken > .actiebalk { margin-top: 22px; }
.actiebalk .rechts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.actiebalk .hulp { margin: 0; }

/* Velden die je zelden nodig hebt, achter een regel die je openklapt. */
.meer-velden { margin-top: 4px; border-top: 1px dashed var(--rand); padding-top: 10px; }
.meer-velden > summary {
  cursor: pointer; user-select: none; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--zacht); list-style: none;
}
.meer-velden > summary::-webkit-details-marker { display: none; }
.meer-velden > summary::before { content: '▸ '; display: inline-block; transition: transform .15s; }
.meer-velden[open] > summary::before { content: '▾ '; }
.meer-velden > summary:hover { color: var(--tekst); }

/* Doorklikblokken in het klantportaal. Ze hebben een eigen tint en een
   duidelijke rand, zodat je ziet dat deze om aan te klikken zijn en de blokken
   eronder om te lezen. */
.snelmenu {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.snelmenu a {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tekst);
  padding: 14px 16px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(63,193,216,.12), rgba(63,193,216,.05));
  border: 1px solid rgba(63,193,216,.30);
  transition: border-color .15s, transform .15s;
}
.snelmenu a:hover {
  text-decoration: none; border-color: var(--cyaan); transform: translateY(-1px);
}
.snelmenu .teken {
  font-size: 19px; line-height: 1; color: var(--cyaan);
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(63,193,216,.14);
}
.snelmenu .wat { display: flex; flex-direction: column; min-width: 0; }
.snelmenu .wat b { font-size: 14px; }
.snelmenu .onder { font-size: 11.5px; color: var(--zacht); }

/* Spring je via een knop naar een blok, dan moet de kop ervan niet onder een
   vaste balk verdwijnen. */
.kaart[id] { scroll-margin-top: 120px; }

/* Een lijst met gegevens: label en waarde vlak bij elkaar aan de linkerkant,
   in plaats van een waarde die halverwege de kaart begint. */
.tabel.gegevens th { width: 150px; white-space: nowrap; }
.tabel.gegevens td { width: auto; }

/* Gesprek tussen klant en medewerker: eigen berichten rechts, die van de ander
   links, zodat je in één oogopslag ziet wie wat zei. */
.gesprek { display: flex; flex-direction: column; gap: 10px; }
.gesprek .bericht {
  max-width: 78%; padding: 10px 12px; border-radius: var(--r-s);
  border: 1px solid var(--rand); background: var(--paneel-2);
}
.gesprek .bericht.van-mij { align-self: flex-end; border-color: rgba(53,192,138,.35); background: rgba(53,192,138,.07); }
.gesprek .bericht.van-hen { align-self: flex-start; }
.gesprek .kop { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.gesprek .tekst { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.gesprek .bericht.nieuw { border-color: rgba(229,52,63,.45); }

/* Ingesloten video van je reviewplatform, met de verhouding van een beeldkader. */
.video-insluit { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--rand); border-radius: var(--r-s); overflow: hidden; }
.video-insluit iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Staafje om verhoudingen te laten zien, bijvoorbeeld uren per project. */
.balkje { display: block; height: 4px; border-radius: 2px; background: var(--paneel-3); overflow: hidden; }
.balkje i { display: block; height: 100%; background: var(--tally); border-radius: 2px; }

/* Kleine voortgangsbalk per scene: net genoeg om in één oogopslag te zien
   hoe ver een scene is, zonder de lijst te laten uitdijen. */
/* De blokjes krimpen mee als er weinig ruimte is, zodat de balk nooit buiten
   zijn kolom valt. */
.mini-balk { display: inline-flex; gap: 1px; vertical-align: middle; max-width: 100%; }
.mini-balk span {
  flex: 0 1 9px; width: 9px; min-width: 2px; height: 6px; border-radius: 1px;
  background: var(--kleur); opacity: .16; transition: opacity .2s;
}
.mini-balk .vs-bezig, .mini-balk .vs-wacht { opacity: .55; }
.mini-balk .vs-gereed { opacity: 1; }
.mini-balk .vs-nvt { opacity: .08; }
.mini-balk + .mini-tekst { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--uit); }

/* -------------------------------------------------------------------- kaart */
.kaart[data-kaart] {
  position: relative; overflow: hidden; height: 420px; border-radius: var(--r);
  border: 1px solid var(--rand); background: #1b2430; cursor: crosshair; touch-action: none;
  user-select: none;
}
.kaart[data-kaart].sleept { cursor: grabbing; }
.kaart-tegels { position: absolute; inset: 0; }
.kaart-tegels img { position: absolute; width: 256px; height: 256px; pointer-events: none; }
.kaart-punt {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--tally); border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.5); pointer-events: none; z-index: 3;
}
.kaart-cirkel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 2px solid rgba(229,52,63,.85);
  background: rgba(229,52,63,.14); pointer-events: none; z-index: 2;
}
.kaart-knoppen { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 4; }
.kaart-knoppen button {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--rand-fel);
  background: rgba(15,18,24,.9); color: var(--tekst); font-size: 17px; line-height: 1; cursor: pointer;
}
.kaart-knoppen button:hover { background: var(--paneel-3); }
.kaart-bron {
  position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: #cfd6e2;
  background: rgba(15,18,24,.7); padding: 2px 6px; border-radius: 4px; z-index: 4; pointer-events: none;
}
.kaart-klein .kaart[data-kaart] { height: 240px; }

/* stappen in een wizard */
.wizard-stappen { display: flex; gap: 2px; margin-bottom: 20px; flex-wrap: wrap; }
.wizard-stappen a, .wizard-stappen span {
  flex: 1; min-width: 120px; padding: 9px 12px; text-decoration: none; text-align: center;
  background: var(--paneel); border: 1px solid var(--rand); color: var(--uit);
  font-size: 12.5px; position: relative;
}
.wizard-stappen > *:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.wizard-stappen > *:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; }
.wizard-stappen a:hover { color: var(--tekst); background: var(--paneel-2); text-decoration: none; }
.wizard-stappen .gedaan { color: var(--zacht); border-color: var(--rand-fel); }
.wizard-stappen .nu {
  color: #fff; background: linear-gradient(180deg, rgba(229,52,63,.22), rgba(229,52,63,.08));
  border-color: var(--tally); font-weight: 600;
}
.wizard-stappen b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; opacity: .7; }

/* -------------------------------------------------------------- klantportaal */
/* Inhoud en voettekst delen dezelfde breedte en marges, zodat er niets
   afgeknipt oogt en alles netjes onder elkaar uitlijnt. */
.portal-breed, .portal-voet {
  width: 100%; max-width: 1600px; margin: 0 auto; padding-left: 32px; padding-right: 32px;
  box-sizing: border-box;
}
.portal-voet { padding-top: 24px; padding-bottom: 32px; text-align: center; color: var(--uit); font-size: 12px; }
@media (max-width: 800px) { .portal-breed, .portal-voet { padding-left: 16px; padding-right: 16px; } }

/* ------------------------------------------------------------------- timer */
.timer-balk {
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--tally); border-radius: 24px; max-width: 440px;
  background: linear-gradient(180deg, rgba(229,52,63,.20), rgba(229,52,63,.09));
  box-shadow: 0 0 0 1px rgba(229,52,63,.18), 0 4px 18px -8px rgba(229,52,63,.7);
}
.timer-balk .wat {
  font-size: 12.5px; color: var(--tekst); text-decoration: none; line-height: 1.2; font-weight: 600;
  max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.timer-balk .wat:hover { text-decoration: none; color: #fff; }
.timer-balk .wat i {
  display: block; font-style: normal; font-weight: 400; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.timer-balk .klok {
  font-size: 15px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: #fff; padding: 3px 10px; border-radius: 14px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.10);
}
.timer-balk .tally-punt { animation: pulseer 2s ease-in-out infinite; flex: none; }
.timer-balk .btn { border-radius: 16px; }
@media (max-width: 900px) { .timer-balk .wat { display: none; } }

/* de grote klok op de urenpagina */
.timer-groot {
  font-size: 34px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  margin-left: auto; color: var(--tekst);
  padding: 4px 16px; border-radius: 10px;
  background: rgba(229,52,63,.10); border: 1px solid rgba(229,52,63,.35);
}

/* ------------------------------------------------------------------ login */
.inlog-scherm { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.inlog-kaart { width: 100%; max-width: 390px; background: var(--paneel); border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; box-shadow: var(--schaduw); }
.inlog-kaart .kop { padding: 28px 28px 8px; text-align: center; }
.inlog-kaart .kop .naam { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.inlog-kaart .kop .naam b { color: var(--tally); }
.inlog-kaart .kop p { color: var(--zacht); font-size: 13px; margin: 6px 0 0; }
.inlog-kaart .kop img { max-height: 56px; max-width: 78%; display: block; margin: 0 auto 4px; }
.inlog-kaart form { padding: 20px 28px 28px; }

/* keuze tussen medewerker en klant */
.inlog-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 18px 28px 0; }
.inlog-keuze a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px;
  border: 1px solid var(--rand); border-radius: var(--r-s); background: var(--paneel-2);
  color: var(--zacht); text-decoration: none; font-size: 13px; font-weight: 600; text-align: center;
}
.inlog-keuze a:hover { background: var(--paneel-3); color: var(--tekst); text-decoration: none; }
.inlog-keuze a small { font-weight: 400; font-size: 11px; color: var(--uit); line-height: 1.3; }
.inlog-keuze a.actief {
  border-color: var(--tally); color: var(--tekst);
  background: linear-gradient(180deg, rgba(229,52,63,.16), rgba(229,52,63,.06));
}
.inlog-keuze a.actief small { color: var(--zacht); }

/* ----------------------------------------------------------------- diversen */
.balk-mini { height: 6px; background: var(--paneel-3); border-radius: 3px; overflow: hidden; }
.balk-mini i { display: block; height: 100%; background: var(--cyaan); }
.stapel { display: flex; flex-direction: column; gap: 3px; }
.klein { font-size: 12px; color: var(--uit); }
.scheiding { height: 1px; background: var(--rand); margin: 18px 0; border: 0; }
.rechtsuit { text-align: right; }
.nowrap { white-space: nowrap; }
.tally-punt { width: 8px; height: 8px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 8px var(--tally); display: inline-block; }

@media (max-width: 900px) {
  /* Het menu schuift over de pagina heen in plaats van ernaast te staan. */
  .rail { transform: translateX(-100%); transition: transform .2s; }
  .rail.open { transform: none; }
  .inhoud { margin-left: 0; }
  .hoofdbalk { left: 0; }
  .menu-knop { display: inline-flex !important; }
  main.pagina { padding: 16px; }
  .hoofdbalk > .binnen { padding: 0 12px; gap: 12px; }
  .hoofdbalk .zoek { display: none; }
  .subbalk .kruimels { display: none; }
  /* Op een smal scherm zit het hoofdmenu achter de knop. */
  .hoofdmenu {
    display: none; position: absolute; top: 58px; left: 0; right: 0; flex-direction: column;
    align-items: stretch; background: var(--paneel); border-bottom: 1px solid var(--rand);
    padding: 6px; gap: 2px; box-shadow: var(--schaduw); z-index: 46;
  }
  .hoofdmenu.open { display: flex; }
  .hoofdmenu a, .hoofdmenu button { text-align: left; padding: 10px 12px; }
  .hoofdbalk { position: relative; }
}
.menu-knop { display: none; }

/* ------------------------------------------- stand van de montage per scene
   Drie vinkjes naast elkaar: de edit, de kleur en het geluid. Aangevinkt
   kleuren ze groen, zodat je in één blik ziet wat er nog openstaat. */
.klaar-rij { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.klaar-vink {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 12px;
  border: 1px solid var(--rand); border-radius: var(--r-s); background: var(--bg);
}
.klaar-vink:hover { border-color: var(--rand-fel); }
.klaar-vink.aan { border-color: rgba(53,192,138,.5); background: rgba(53,192,138,.08); }
.klaar-vink input { margin: 2px 0 0; flex: 0 0 auto; }
.klaar-vink .wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.klaar-vink .wat b { font-size: 13px; }
.klaar-vink .wat .klein { color: var(--uit); }
.klaar-vink.aan .wat b { color: var(--groen); }
@media (max-width: 760px) { .klaar-rij { grid-template-columns: 1fr; } }

/* Dezelfde stand, maar om te lezen: in het klantportaal en in lijsten. */
.stand-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.stand-chips .stand-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rand); color: var(--uit);
}
.stand-chips .stand-chip.af { border-color: rgba(53,192,138,.5); color: var(--groen); }
.stand-chips .stand-chip i { font-style: normal; font-size: 11px; }
td.nowrap .stand-chips { flex-wrap: nowrap; }

/* Het vakje met de stand van de montage in het scene-overzicht. */
.stand-blok {
  display: flex; flex-direction: column; gap: 5px; padding: 6px 10px;
  border: 1px solid var(--rand); border-radius: var(--r-s); background: var(--bg);
}
.stand-blok .kopje {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--uit);
}
.stand-blok .stand-chips { gap: 4px; flex-wrap: nowrap; }
.stand-blok .stand-chip { padding: 2px 7px; font-size: 11px; }

/* Vier korte vinkjes naast elkaar, voor 'geldt bij' in de workflowstappen. */
.soort-vinkjes { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.soort-vinkjes .vinkje { margin: 0; font-size: 12.5px; white-space: nowrap; }

/* ---------------------------------------------------- koppen klantportaal
   In het portaal mogen de koppen groter: je klant scant de pagina, dus
   Producties, Beeldregistraties en Dronevluchten moeten er meteen uitspringen. */
.portaal .kaart-kop { padding-top: 16px; padding-bottom: 16px; }
.portaal .kaart-kop h2 { font-size: 21px; letter-spacing: .04em; }
.portaal .kaart-kop h3 { font-size: 17px; letter-spacing: .05em; }
.portaal .paginakop .titel h1 { font-size: 32px; }

/* --------------------------------------------- eindmontages in het portaal
   Hier gaat het je klant om, dus geen tabelregel maar een eigen blok per
   montage: de scene en het versienummer samen als knop naar de review. */
.montage-lijst { display: grid; gap: 12px; }
.montage-item {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--rand); border-radius: var(--r);
  background: var(--bg); border-left: 3px solid var(--cyaan);
}
.montage-item.af { border-left-color: var(--groen); }
.montage-item > .wat { flex: 1 1 320px; min-width: 0; }
.montage-item .titel {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 18px; font-weight: 600; color: var(--tekst); text-decoration: none;
}
.montage-item .titel:hover { color: var(--cyaan); text-decoration: none; }
.montage-item .titel .vnr {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--cyaan);
  border: 1px solid var(--rand-fel); border-radius: 999px; padding: 2px 10px;
}
.montage-item .onder { font-size: 12.5px; color: var(--uit); margin-top: 5px; }
.montage-item .rechterkant { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 760px) { .montage-item .rechterkant { margin-left: 0; } }

/* De scenelijst in het portaal: het nummer in een eigen vakje met wat lucht,
   en een lange scenenaam netjes afgekapt in plaats van over drie regels. */
.portaal .tabel .scene-nr { display: inline-block; min-width: 54px; }
.portaal .scenenaam {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
@media (min-width: 1100px) { .portaal .scenenaam { max-width: 380px; } }

/* ----------------------------------------------------------- montagevloer
   Een raster van scenes tegen workflowstappen. Elk vakje is een knop die de
   stand een stap verder zet, zodat je niet elke scene hoeft te openen. */
/* De tegels in een raster met een vast aantal kolommen, door de pagina
   uitgerekend: liever twee volle rijen dan één tegel alleen op de tweede. */
.stap-tegels {
  display: grid; gap: 8px;
  grid-template-columns: repeat(var(--kolommen, 4), minmax(0, 1fr));
}
@media (max-width: 1100px) { .stap-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .stap-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stap-tegel {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 8px 12px; border: 1px solid var(--rand); border-radius: var(--r-s);
  background: var(--bg); color: var(--tekst); text-decoration: none;
  border-left: 3px solid var(--kleur, var(--rand-fel));
}
.stap-tegel:hover { border-color: var(--rand-fel); text-decoration: none; color: var(--tekst); }
.stap-tegel.actief { background: var(--paneel-2); border-color: var(--tally); }
.stap-tegel.af { opacity: .55; }
.stap-tegel .naam { font-size: 13px; font-weight: 600; }
.stap-tegel .cijfers { font-size: 11.5px; color: var(--uit); }
.stap-tegel .cijfers b { color: var(--tekst); }
.stap-tegel .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Het blok met de tegels blijft bovenaan plakken, zodat je tijdens het
   scrollen door de scenes een andere stap kunt kiezen zonder terug te hoeven.
   Zodra hij plakt wordt hij een smalle balk: de kop verdwijnt, de tegels gaan
   naast elkaar op één regel. Het voelertje erboven meet wanneer dat is. */
.plak-voeler { height: 1px; margin-bottom: -1px; }
.tegelbalk { position: sticky; top: calc(var(--vast-top, 110px) + 4px); z-index: 30; }
.tegelbalk.plakt {
  box-shadow: 0 16px 26px -18px rgba(0,0,0,.95);
  border-color: var(--rand-fel);
}
/* Plakkend wordt het één regel: de tegels links, de knoppen rechts, de kop
   weg. Zo houdt de kolomkop van de tabel er nog ruimte onder over. */
.tegelbalk.plakt { display: flex; flex-direction: row-reverse; align-items: center; }
.tegelbalk.plakt .kaart-kop { flex: 0 0 auto; border-bottom: 0; padding: 6px 14px 6px 0; white-space: nowrap; }
.tegelbalk.plakt .kaart-kop h2 { display: none; }
.tegelbalk.plakt .kaart-body { flex: 1 1 auto; min-width: 0; padding: 7px 0 7px 14px; }
.tegelbalk.plakt .stap-tegels {
  display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px;
}
.tegelbalk.plakt .stap-tegel {
  flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 6px;
  padding: 5px 10px; white-space: nowrap;
}
.tegelbalk.plakt .stap-tegel .naam { font-size: 12px; }
.tegelbalk.plakt .stap-tegel .erbij { display: none; }
@media (max-width: 760px) { .tegelbalk { position: static; } }

/* Het raster is zo breed als het nodig heeft en begint links; de lege ruimte
   valt daardoor rechts, waar hij niet in de weg zit. */
/* De kolomkoppen blijven staan terwijl je door de scenes scrolt, net onder de
   balk met de stappen; het script geeft door hoe hoog die balk is. Een blok
   met overflow eromheen zou dat breken, dus op een breed scherm laten we het
   raster gewoon in de pagina staan. Alleen smal blijft het schuiven. */
.montage-wrap { overflow-x: auto; }
@media (min-width: 1101px) {
  .montage-wrap { overflow: visible; }
  .montage-raster thead th { position: sticky; top: var(--plak-top, 170px); z-index: 20; }
  .montage-raster thead th::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1px; background: var(--rand);
  }
}
.montage-raster th, .montage-raster td { padding-left: 10px; padding-right: 10px; }
.montage-raster th:first-child, .montage-raster td:first-child { padding-left: 14px; }
.montage-raster .rek { width: 100%; padding: 0; }

.montage-raster th.stap-kop {
  width: 44px; min-width: 44px; padding: 6px 2px; text-align: center; vertical-align: bottom;
}
.montage-raster th.stap-kop .draai {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; max-height: 112px; overflow: hidden; margin: 0 auto 4px;
  font-size: 10.5px; letter-spacing: .04em; text-transform: none;
}
.montage-raster th.stap-kop .alles {
  display: block; margin: 0 auto; width: 20px; height: 18px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--rand); border-radius: 4px; color: var(--uit); font-size: 11px;
}
.montage-raster th.stap-kop .alles:hover { color: var(--groen); border-color: var(--groen); }
.montage-raster td.vak { padding: 3px; text-align: center; }
/* De stap waar je op gefilterd hebt, lichten we op in het raster. */
.montage-raster th.stap-kop.gekozen { background: var(--paneel-2); }
.montage-raster td.vak.gekozen { background: rgba(255,255,255,.035); }
/* Na het opslaan springt de pagina terug naar de scene; de balk bovenin mag
   die rij dan niet afdekken. */
.montage-raster tr[id] { scroll-margin-top: 300px; }
.montage-raster td.leeg-vak .nvtb { color: var(--rand); }
.vakje {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; border-radius: 5px; cursor: pointer; font-size: 13px; line-height: 1;
  border: 1px solid var(--rand); background: var(--bg); color: var(--uit); padding: 0;
}
button.vakje:hover { border-color: var(--rand-fel); }
.vakje.v-bezig, .vakje.v-wacht {
  background: color-mix(in srgb, var(--kleur) 28%, transparent);
  border-color: var(--kleur); color: var(--tekst);
}
.vakje.v-gereed { background: rgba(53,192,138,.22); border-color: rgba(53,192,138,.6); color: var(--groen); }
.vakje.v-nvt { background: transparent; border-style: dashed; color: var(--rand-fel); }

/* De keuze in het venster achter een vakje: vier standen onder elkaar, de
   huidige met een randje eromheen zodat je ziet waar je vandaan komt. */
.stand-keuze { display: grid; gap: 8px; }
.stand-knop {
  display: block; width: 100%; text-align: left; cursor: pointer; padding: 10px 12px;
  border: 1px solid var(--rand); border-left: 3px solid var(--rand); border-radius: 8px;
  background: var(--paneel); color: var(--tekst); font: inherit;
}
.stand-knop:hover { border-color: var(--rand-fel); background: var(--paneel-2); }
.stand-knop .naam { display: block; font-weight: 600; }
.stand-knop .klein { display: block; color: var(--zacht); margin-top: 2px; }
.stand-knop.k-bezig  { border-left-color: var(--tally); }
.stand-knop.k-gereed { border-left-color: var(--groen); }
.stand-knop.k-nvt    { border-left-color: var(--uit); }
.stand-knop.aan { border-color: var(--cyaan); box-shadow: 0 0 0 1px var(--cyaan) inset; }
.stand-knop.aan .naam::after { content: ' · staat er nu op'; font-weight: 400; color: var(--cyaan); }

/* De timerknop in het raster: een klokje dat de tijd start, en een stopknop
   met een kloppend randje zodra de timer op die scene loopt. */
.montage-raster td.tijd-vak { white-space: nowrap; }
.timer-knop {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 26px; height: 24px; margin-left: 6px; padding: 0; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 6px; background: var(--bg); color: var(--uit);
}
.timer-knop:hover { color: var(--cyaan); border-color: var(--cyaan); }
.timer-knop.uit { opacity: .4; cursor: not-allowed; }
.timer-knop.uit:hover { color: var(--uit); border-color: var(--rand); }
.timer-knop.loopt {
  color: var(--tally); border-color: var(--tally); background: rgba(229,52,63,.12);
  animation: timer-klop 1.6s ease-in-out infinite;
}
.timer-knop.loopt:hover { color: #fff; background: var(--tally); border-color: var(--tally); }
.loopt-tijd { color: var(--tally); font-size: 11.5px; }
@keyframes timer-klop {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,52,63,.45); }
  50%      { box-shadow: 0 0 0 4px rgba(229,52,63,0); }
}
@media (prefers-reduced-motion: reduce) { .timer-knop.loopt { animation: none; } }

/* De balk bovenaan de montagevloer als er een timer loopt. */
.loopt-balk { border-color: rgba(229,52,63,.45); }
.loopt-balk .kaart-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.loopt-balk .wat { flex: 1 1 200px; }

/* Stills tussen de scenes: de scenes staan rustig op de achtergrond, de
   stills springen eruit met een gekleurde stip en een inspringing. */
.still-tabel .scene-rij td { color: var(--zacht); background: rgba(255,255,255,.02); }
.still-tabel .still-rij td { border-bottom: 1px solid rgba(43,51,66,.6); }
.still-tabel .still-rij td:nth-child(2) { padding-left: 4px; }
.still-stip {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 10px;
  background: var(--paneel-3); border: 1px solid var(--rand-fel);
}
.still-stip.s-zwart { background: #0B0E14; }
.still-stip.s-logo  { background: var(--cyaan); border-color: var(--cyaan); }
.still-stip.s-tekst { background: var(--oranje); border-color: var(--oranje); }
.still-stip.s-still { background: var(--smpte-5); border-color: var(--smpte-5); }
.still-mini { width: 54px; height: 32px; object-fit: cover; border-radius: 4px; border: 1px solid var(--rand); }

/* Het scherm waarin je alle scenes achter elkaar bijwerkt. */
.kolom-kiezer { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.kolom-kiezer .vinkje { margin: 0; }
.bulk-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.bulk-rij .veldgroep { min-width: 170px; }
.nummer-tabel select, .nummer-tabel textarea { width: 100%; }
.nummer-tabel .rek { width: 100%; padding: 0; }
.nummer-tabel textarea { min-height: 42px; padding: 6px 8px; font-size: 13px; resize: vertical; }
.nummer-tabel td.klaar-vakjes { white-space: nowrap; }
.nummer-tabel td.klaar-vakjes label {
  display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; font-size: 12px; color: var(--zacht);
}
.nummer-tabel td { padding-top: 6px; padding-bottom: 6px; }
.nummer-tabel input[type=text], .nummer-tabel input[type=time] { padding: 6px 8px; width: 100%; min-width: 0; }
.nummer-tabel input[type=time] { font-family: var(--mono); }
.nummer-tabel td.pijlen { white-space: nowrap; }
/* De regel tussen twee scenes: wat daar op het scherm staat zonder dat het een
   scene is. Bewust smal en rustig, zodat de scenes de lijst blijven dragen. */
.tussenrij td {
  padding: 3px 10px 3px 46px; background: transparent;
  border-bottom: 1px solid var(--rand); font-size: 12px;
}
.tussenrij.heeft-stills td { background: var(--paneel-2); }
.nummer-tabel tbody tr.tussenrij:hover { background: transparent; }
/* Een lege tussenruimte houdt zich stil tot je er met de muis langs gaat. */
.tussenrij.is-leeg .still-vink.is-nieuw { opacity: .3; transition: opacity .12s; }
.tussenrij.is-leeg:hover .still-vink.is-nieuw,
.tussenrij.is-leeg:focus-within .still-vink.is-nieuw { opacity: 1; }
.tussen-label { color: var(--uit); margin-right: 10px; text-transform: lowercase; }
.still-vink {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 14px;
  padding: 2px 8px 2px 6px; border: 1px solid var(--rand); border-radius: 999px; background: var(--paneel);
}
.still-vink label { display: inline-flex; align-items: center; gap: 5px; margin: 0; cursor: pointer; }
.still-vink .still-stip { margin-left: 0; width: 10px; height: 10px; }
.still-vink input[type=text] { width: 90px; padding: 1px 4px; font-size: 11px; text-align: center; }
.still-vink.is-nieuw { border-style: dashed; color: var(--uit); }
.still-vink.is-nieuw select { padding: 1px 6px; font-size: 11px; }
.still-opties { display: inline-flex; align-items: center; gap: 6px; }
.still-opties[hidden] { display: none; }   /* anders wint de regel hierboven van hidden */
.still-meer { color: var(--uit); text-decoration: none; padding: 0 2px; font-weight: 700; }
.still-meer:hover { color: var(--cyaan); }

/* Kopje boven de sleepkolom: alleen een teken, anders loopt hij over de
   kolom ernaast heen. */
.greep-kop { color: var(--uit); font-size: 13px; }
/* De greep waarmee je een scene naar zijn plek sleept. */
.sleep-greep {
  display: inline-grid; place-items: center; width: 26px; height: 26px; cursor: grab;
  color: var(--uit); font-size: 15px; line-height: 1; border-radius: var(--r-s); user-select: none;
}
.sleep-greep:hover { color: var(--tekst); background: var(--paneel-2); }
.sleep-greep:active { cursor: grabbing; }
.nummer-tabel tr.sleept { opacity: .55; outline: 1px dashed var(--cyaan); }
.nummer-tabel tr.sleept td { background: var(--paneel-2); }

.tekst-knop {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: inherit;
  color: var(--cyaan); text-decoration: underline; text-underline-offset: 2px;
}
.tekst-knop:hover { color: var(--tekst); }