/* ==========================================================================
   Dashboard Akari Displays, de beheerinterface (BOUWSPEC 10, ONTWERP.md 12 tot 16)
   Overgenomen uit de goedgekeurde mock (ontwerp/v2/v2.css, overgang-keuze.css,
   lettertype-keuze.css en scherm/akari-beeld.css), met daaronder wat de echte
   interface erbij nodig heeft: inloggen, laden, fouten, dialogen, de
   Akari-omgeving. Tokens in ../tokens.css. Geen inline stijlen (CSP).
   ========================================================================== */

:root {
  --zijbalk-w: 272px;    /* v2: breder dan v1, want de inzetten staan er met periode en aantal onder */
  --vv-schaal: 0.3333;   /* de grote voorvertoning: 1080 x 1920 op 360 x 640 */
}
/* De voorvertoning past altijd in één keer in beeld, met het onderschrift erbij. */
@media (max-height: 980px) { :root { --vv-schaal: 0.3; } }    /* 324 x 576, laptop van 900 hoog */
@media (max-height: 860px) { :root { --vv-schaal: 0.26; } }   /* 281 x 499, laptop van 800 hoog */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "calt" 1, "tnum" 1;
}
a { color: var(--brand-tekst); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; -webkit-user-drag: none; user-select: none; }
.num { font-variant-numeric: tabular-nums; }

/* --- Knoppen ----------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--knop-h); padding: 0 14px;
  border: var(--rand-sterk); border-radius: var(--r); background: transparent; color: var(--ink);
  font-weight: 500; white-space: nowrap;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-druk) var(--ease);
}
.knop:hover { background: var(--bg-raised); }
.knop:active { transform: scale(0.98); }
.knop--primair { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.knop--primair:hover { background: var(--brand-druk); border-color: var(--brand-druk); }
.knop--tekst { border-color: transparent; color: var(--ink-muted); padding: 0 8px; }
.knop--tekst:hover { color: var(--ink); background: transparent; }
.knop--klein { height: var(--knop-h-klein); padding: 0 10px; font-size: var(--t-label); }
.knop .punt { width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--warn); }
.knop--primair .punt { background: var(--warn-op-blauw); }   /* op het blauw, in beide thema's gelijk */
.knop svg { width: 16px; height: 16px; }
.knop svg + span { margin-left: 8px; }

/* Stepper: twee kleine knoppen om een getal */
.stepper { display: inline-flex; align-items: center; height: var(--knop-h); border: var(--rand-sterk); border-radius: var(--r); }
.stepper button { width: 34px; height: 100%; border: 0; background: transparent; color: var(--ink-muted); font-size: 16px; transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.stepper button:hover { color: var(--ink); background: var(--bg-raised); }
.stepper button:first-child { border-radius: var(--r) 0 0 var(--r); }
.stepper button:last-child { border-radius: 0 var(--r) var(--r) 0; }
.stepper output { min-width: 40px; text-align: center; font-weight: 600; border-left: var(--rand); border-right: var(--rand); line-height: 34px; }

/* Statusstip */
.stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.stip--ok { background: var(--ok); }
.stip--err { background: var(--err); }
.stip--warn { background: var(--warn); }
.stip--brand { background: var(--brand-tekst); }


.werkversie { display: flex; align-items: center; margin: 0 0 20px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.werkversie .stip { margin-right: 10px; }
.werkversie b { color: var(--ink); font-weight: 500; margin-right: 6px; }

/* De sleepzone: breed, rustig, gestippeld. Bij een bestand erboven (is-boven)
   wordt de rand het accent en het vlak iets lichter. */
.sleepzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: var(--sleepzone-h); margin: 0 0 20px;
  border: 1px dashed var(--line-sterk); border-radius: var(--r);
  text-align: center; transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.sleepzone.is-boven { border-color: var(--brand-tekst); background: var(--bg-raised); }
.sleepzone p { margin: 0; }
.sleepzone .regels { margin-top: 4px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }

/* De regel boven het raster: teller links, instellingen rechts */
.rasterbalk { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.opslag { display: flex; align-items: center; font-size: var(--t-klein); color: var(--ink-muted); }
.opslag b { color: var(--ink); font-weight: 500; }
.opslag .sep { margin: 0 8px; color: var(--ink-faint); }
.balk { position: relative; width: 120px; height: var(--balk-h); margin-left: 12px; border-radius: 2px; background: var(--bg-raised); overflow: hidden; }
.balk i { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 2px; background: var(--ink-muted); transform-origin: 0 50%; transform: scaleX(var(--deel, 0)); }
.rasterbalk__rechts { display: flex; align-items: center; }
.rasterbalk__rechts > * + * { margin-left: 16px; }
.rasterbalk__rechts label { font-size: var(--t-klein); color: var(--ink-muted); margin-right: -6px; }

/* --- Het raster van tegels ------------------------------------------------------ */
.raster {
  display: grid; grid-template-columns: repeat(auto-fill, var(--tegel-w)); grid-gap: 28px var(--tegel-gap);
  list-style: none; margin: 0; padding: 0;
}
.item { width: var(--tegel-w); }
.item__serie {
  display: block; width: 100%; margin: 8px 0 0; padding: 0 2px; border: 0; background: transparent; text-align: left;
  font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item__serie:hover { color: var(--ink); }
.item__serie.is-leeg { color: var(--ink-faint); }
.item__serie.is-bron { color: var(--ink-faint); cursor: default; }

.tegel {
  position: relative; width: var(--tegel-w); height: var(--tegel-h);
  border-radius: var(--r); background: var(--bg-raised); overflow: hidden;
  cursor: grab; transition: transform var(--dur-sleep) var(--ease-aankomen), opacity var(--dur-sleep) var(--ease);
}
.tegel img { width: 100%; height: 100%; object-fit: cover; }
.tegel:hover .prullenbak { opacity: 1; }

/* Chips op een miniatuur: volgnummer, speelduur, seconden. Glas zonder blur. */
.chip {
  position: absolute; display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: var(--r); background: var(--glas); color: #fff;
  font-size: var(--t-label); font-weight: 600; line-height: 24px; letter-spacing: 0;
}
.chip--nr { top: 8px; left: 8px; min-width: 24px; justify-content: center; padding: 0 6px; }
.chip--duur { right: 8px; bottom: 8px; }
.chip--sec { left: 8px; bottom: 8px; cursor: text; }
.chip--sec.is-eigen { background: #fff; color: #0B0D10; }   /* een foto met eigen seconden */
.chip--liggend { left: 8px; bottom: 8px; padding: 0 6px; }
.chip--liggend + .chip--sec { left: 44px; }
.chip svg { width: 14px; height: 14px; }
.chip svg + span { margin-left: 4px; }

.afspelen {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--glas); color: #fff; pointer-events: none;
}
.afspelen svg { width: 18px; height: 18px; margin-left: 3px; }

.prullenbak {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r); background: var(--glas); color: #fff;
  opacity: 0; transition: opacity var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.prullenbak:hover { background: var(--err); }
.prullenbak svg { width: 14px; height: 14px; }

/* Donkere tegels: upload, wacht, bezig, mislukt. Geen beeld, wel het 9:16-vlak. */
.tegel--staat { cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.tegel--staat .staat__titel { margin: 0; font-size: var(--t-klein); line-height: var(--lh-klein); font-weight: 600; }
.tegel--staat .staat__sub { margin: 4px 0 0; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-muted); }
.tegel--upload img { position: absolute; top: 0; left: 0; opacity: 0.45; }
.tegel--upload .staat__titel, .tegel--upload .staat__sub { position: relative; color: #fff; }
.tegel--upload .staat__sub { color: rgba(255, 255, 255, 0.8); }
.tegel--mislukt { border: 1px solid var(--err); justify-content: flex-start; padding-top: 48px; }
.tegel--mislukt .staat__titel { color: var(--err); }
.tegel--mislukt .staat__sub { margin-top: 8px; }
.tegel--mislukt .staat__knoppen { margin-top: auto; display: flex; align-items: center; }
.tegel--mislukt .staat__knoppen .knop + .knop { margin-left: 4px; }

/* Voortgang onderin een tegel: bepaald (--deel) of onbepaald (loopt). */
.voortgang { position: absolute; left: 0; right: 0; bottom: 0; height: var(--balk-h); background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.voortgang i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--brand-tekst); transform-origin: 0 50%; transform: scaleX(var(--deel, 0)); }
.voortgang--loopt i { width: 40%; animation: loopt 1400ms var(--ease) infinite; }
@keyframes loopt { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Slepen: de tegel die mee beweegt is een kloon (position fixed); het
   origineel wordt het gat. Alleen transform en opacity. */
.tegel.is-kloon { position: fixed; z-index: var(--z-sleep); margin: 0; pointer-events: none; transform: scale(1.04); opacity: 0.94; transition: none; }
.item.is-gat .tegel { opacity: 0; }
.item.is-gat { outline: 1px dashed var(--line-sterk); outline-offset: -1px; border-radius: var(--r); }
.item.is-gat .item__serie { visibility: hidden; }
body.is-slepen { cursor: grabbing; user-select: none; }
body.is-slepen .tegel { cursor: grabbing; }


/* De Akari-placeholder als miniatuur: donker, één stilstaande lichtval, het
   woordmerk. Zo ziet een scherm eruit dat nog nooit gepubliceerd is. */
.placeholder {
  display: block; position: relative; width: 100%; height: 100%; overflow: hidden; background: #0A0A0B;
  background-image: radial-gradient(90% 60% at 50% 112%, rgba(31, 107, 255, 0.55) 0%, rgba(31, 107, 255, 0) 70%);
}
.placeholder img { position: absolute; left: 22%; top: 46%; width: 56%; height: auto; opacity: 0.92; }

/* --- Hulp ------------------------------------------------------------------------- */
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   v2: raamwerk
   ========================================================================== */
.app { display: flex; min-height: 100vh; }
.inhoud { flex: 1; min-width: 0; }

/* --- Zijbalk (12 oktober, avond) --------------------------------------------
   Een stap donkerder dan de inhoud (--zb-bg). Groepen met een kop: Akari (alleen
   voor Akari), de klant met zijn schermen en inzetten, Templates; onderaan, altijd
   in beeld (sticky): Hulp, Instellingen, Account, Weergave, Uitloggen.
   Hoofditems hebben een icoon van 20 px (lijn 2); kinderen staan zonder icoon op
   de lijn van de tekst. Het item waar je bent: vlak, witte tekst, gewicht 500. */
.zijbalk {
  flex: none; width: var(--zijbalk-w);
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 20px 12px 0;
  background: var(--zb-bg); border-right: var(--rand);
}
.merk { display: flex; align-items: center; height: 24px; margin: 0 8px; }
.merk img { height: 15px; width: auto; }
.merk span { margin-left: 10px; padding-left: 10px; border-left: var(--rand-sterk); font-size: var(--t-klein); color: var(--ink-muted); line-height: 16px; }

.zb-groep { margin-top: 24px; }
.zb-groep + .zb-groep { margin-top: 20px; padding-top: 16px; border-top: var(--rand); }
.zb-label { margin: 0 8px 6px; font-size: var(--t-label); line-height: var(--lh-label); font-weight: 600; color: var(--ink-faint); }
.klantnaam {
  margin: 0 8px 18px; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zb-lijst { list-style: none; margin: 0; padding: 0; }
.zb-lijst > li + li { margin-top: 2px; }
.zb-lijst--los { margin-top: 8px; }

.zb-link {
  display: flex; align-items: center; width: 100%; min-height: 36px; padding: 6px 8px;
  border: 0; border-radius: var(--r); background: transparent; color: var(--ink-muted);
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.zb-link:hover { color: var(--ink); background: var(--zb-hover); text-decoration: none; }
.zb-link[aria-current="page"] { color: var(--ink); background: var(--zb-actief); box-shadow: inset 0 0 0 1px var(--zb-actief-rand); font-weight: 500; }
.zb-link__naam { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-teller { margin-left: 8px; font-size: var(--t-label); font-weight: 400; color: var(--ink-faint); }

/* Het icoon, met bij een scherm de online-stip in de hoek. */
.zb-icoon { position: relative; flex: none; display: block; width: 20px; height: 20px; margin-right: 12px; }
.zb-icoon svg { display: block; width: 20px; height: 20px; }
.zb-icoon .stip { position: absolute; right: -3px; bottom: -2px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--zb-bg); }
.zb-link:hover .zb-icoon .stip { box-shadow: 0 0 0 2px var(--zb-hover); }
.zb-link[aria-current="page"] .zb-icoon .stip { box-shadow: 0 0 0 2px var(--zb-actief); }
.zb-scherm { color: var(--ink); font-weight: 500; }

/* De inzetten en Scherminstellingen hangen onder hun scherm, op de lijn van de naam. */
.zb-inzetten { list-style: none; margin: 2px 0 8px; padding: 0 0 0 32px; }
.zb-inzetten > li + li { margin-top: 1px; }
.zb-inzet { display: block; min-height: 0; padding: 6px 8px; }
.zb-inzet__regel { display: flex; align-items: center; }
.zb-inzet__naam { flex: 1; min-width: 0; font-size: var(--t-klein); line-height: var(--lh-klein); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-inzet__meta { display: block; margin-top: 2px; font-size: var(--t-label); line-height: var(--lh-label); font-weight: 400; color: var(--ink-faint); }
.zb-scherminstellingen { font-size: var(--t-klein); line-height: var(--lh-klein); }
.zb-leeg { margin: 0; padding: 4px 8px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }

/* Het teken voor wat live staat: een woord in groen, met een stip ervoor. */
.live { display: inline-flex; align-items: center; flex: none; margin-left: 8px; font-size: var(--t-label); line-height: var(--lh-label); font-weight: 600; color: var(--ok); }
.live::before { content: ""; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ok); }
.gepland { flex: none; margin-left: 8px; font-size: var(--t-label); color: var(--ink-muted); }

/* Uitklappen: Instellingen en Account. Het pijltje draait, de lijst verschijnt. */
.zb-pijl { flex: none; width: 16px; height: 16px; margin-left: 8px; color: var(--ink-faint); transition: transform var(--dur-hover) var(--ease); }
.zb-uitklap[aria-expanded="true"] .zb-pijl { transform: rotate(90deg); }
.zb-sub { list-style: none; margin: 0 0 4px; padding: 0 0 0 32px; animation: opkomen var(--dur-fade) var(--ease); }
.zb-sub .zb-link { min-height: 32px; padding: 6px 8px; font-size: var(--t-klein); line-height: var(--lh-klein); }
.zb-account__naam { display: block; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.zb-account__meta { display: block; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; }

/* Onderaan: blijft staan als de rest van de zijbalk scrolt. */
.zb-onder {
  position: sticky; bottom: 0; margin: auto -12px 0; padding: 8px 12px 12px;
  border-top: var(--rand); background: var(--zb-bg);
}
.zb-onder .zb-lijst > li + li { margin-top: 1px; }

/* Weergave: Systeem, Licht, Donker als segmentknop (besluit V). */
.zb-weergave { display: flex; align-items: center; min-height: 40px; padding: 4px 4px 4px 8px; color: var(--ink-muted); }
.zb-weergave .zb-link__naam { flex: 1; }
.thema-schakel { display: inline-flex; flex: none; padding: 2px; border-radius: var(--r); background: var(--zb-hover); }
.thema-schakel button {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-faint);
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), transform var(--dur-druk) var(--ease);
}
.thema-schakel button + button { margin-left: 2px; }
.thema-schakel button:hover { color: var(--ink); }
.thema-schakel button:active { transform: scale(0.94); }
.thema-schakel button[aria-pressed="true"] { background: var(--segment-aan); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-sterk); }
.thema-schakel svg { width: 18px; height: 18px; }

/* Akari in de omgeving van een klant: een omgekeerde band boven de inhoud, altijd
   in beeld. Donker op licht, licht op donker: onmiskenbaar, en niet blauw (blauw
   betekent: dit gaat naar het scherm). */
.omgeving {
  position: sticky; top: 0; z-index: var(--z-kop);
  display: flex; align-items: center; min-height: 48px; padding: 8px var(--inhoud-pad);
  background: var(--ink); color: var(--bg);
}
.omgeving > svg { flex: none; width: 20px; height: 20px; margin-right: 12px; }
.omgeving b { font-weight: 600; }
.omgeving .knop { flex: none; margin-left: auto; border-color: var(--bg); color: var(--bg); background: transparent; }
.omgeving .knop:hover { background: var(--bg); color: var(--ink); }
.omgeving .knop svg { width: 16px; height: 16px; }
.omgeving .knop svg + span { margin-left: 4px; }

/* --- Kopbalk ------------------------------------------------------------------ */
.kop {
  display: flex; align-items: flex-end; justify-content: space-between;
  max-width: var(--inhoud-max); padding: 24px var(--inhoud-pad) 0;
}
.kop__pad { display: inline-flex; align-items: center; margin: 0 0 6px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.kop__pad:hover { color: var(--ink); text-decoration: none; }
.kop__pad svg { width: 14px; height: 14px; margin-left: 4px; color: var(--ink-faint); }
.kop__titel { margin: 0; font-size: var(--t-titel); line-height: var(--lh-titel); font-weight: 600; letter-spacing: var(--tr-tight); }
.kop__status { display: flex; align-items: center; flex-wrap: wrap; margin: 6px 0 0; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.kop__status .stip { margin-right: 8px; }
.sep { margin: 0 8px; color: var(--ink-faint); }
.kop__acties { display: flex; align-items: center; flex: none; margin-left: 24px; padding-bottom: 2px; }
.kop__acties > * + * { margin-left: 12px; }

/* Tabbladen van een inzet: platte woorden, het actieve onderstreept in wit. */
.tabs { display: flex; max-width: calc(var(--inhoud-max) - 2 * var(--inhoud-pad)); margin: 20px var(--inhoud-pad) 0; border-bottom: var(--rand); }
.tabs a {
  position: relative; display: flex; align-items: center; height: 40px; margin-right: 28px;
  color: var(--ink-muted); transition: color var(--dur-hover) var(--ease);
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.tabs .zb-teller { margin-left: 6px; }

.pagina { max-width: var(--inhoud-max); padding: 28px var(--inhoud-pad) 64px; }
.paneel-tab[hidden] { display: none; }
.paneel-tab { animation: opkomen var(--dur-fade) var(--ease); }
@keyframes opkomen { from { opacity: 0; } to { opacity: 1; } }

.sectiekop { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.sectiekop h2 { margin: 0; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.label { display: block; margin: 0 0 6px; font-size: var(--t-label); line-height: var(--lh-label); font-weight: 500; color: var(--ink-faint); }
.hulp { margin: 8px 0 0; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }

/* ==========================================================================
   Het display: toestel, voorvertoning op ware verhouding
   Het scherm wordt echt op 1080 x 1920 getekend en dan geschaald, zodat de
   knop, de marges en de letters dezelfde verhouding hebben als op de zuil.
   ========================================================================== */
.toestel {
  --s: var(--vv-schaal);
  display: inline-block; padding: 12px; border-radius: var(--r);
  background: #000; border: 1px solid #23272E;
}
.toestel--klein { --s: 0.1667; padding: 8px; }
.toestel__scherm { position: relative; width: calc(1080px * var(--s)); height: calc(1920px * var(--s)); overflow: hidden; background: #0A0A0B; }
.podium {
  position: absolute; top: 0; left: 0; width: 1080px; height: 1920px;
  transform-origin: 0 0; transform: scale(var(--s));
  font-family: var(--font); color: #fff;
}
.podium .dia { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms linear; }
.podium .dia.is-zichtbaar { opacity: 1; }
.podium .placeholder { position: absolute; top: 0; left: 0; }

/* De knop zoals op het echte scherm (bald-brewer-slideshow/css/app.css):
   rechtsonder, 72 van de rand, 96 van onder, matglas, ring eromheen. */
.podium__cta {
  position: absolute; right: 72px; bottom: 96px; max-width: 640px; min-height: 132px;
  padding: 32px 48px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 32px;
  background: rgba(10, 12, 10, 0.42); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  text-align: left;
}
.podium__cta::after {
  content: ""; position: absolute; top: -7px; right: -7px; bottom: -7px; left: -7px;
  border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 39px; opacity: 0;
  animation: cta-ring 2.4s var(--ease) infinite;
}
@keyframes cta-ring { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.025); } }
.podium__hoofd { display: block; font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; }
.podium__sub { display: block; margin-top: 8px; font-size: 32px; line-height: 1.3; opacity: 0.7; }

.voorvertoning { margin: 0; }
.voorvertoning figcaption { display: flex; flex-direction: column; align-items: stretch; margin-top: 12px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-faint); }

/* Segmentknop: twee keuzes in één vlak */
.vv-onder .segment { display: flex; margin-bottom: 8px; }
.vv-onder .segment button { flex: 1; }
.segment { display: inline-flex; padding: 2px; border-radius: var(--r); background: var(--bg-raised); }
.segment button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); font-size: var(--t-label); font-weight: 500; transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.segment button:hover { color: var(--ink); }
.segment button[aria-pressed="true"] { background: var(--segment-aan); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-sterk); }

/* --- Het vaste adres: de zin, de URL, kopiëren, QR ----------------------------- */
.adres__zin { margin: 0; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.adres__sub { margin: 4px 0 16px; color: var(--ink-muted); }
.url { display: flex; align-items: flex-start; }
.url code {
  flex: 1; min-width: 0; display: block; min-height: var(--knop-h); padding: 8px 12px;
  border-radius: var(--r); background: var(--bg-sunken); border: var(--rand);
  font-family: var(--font); font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink); overflow-wrap: anywhere;
  user-select: all;
}
.url .knop { margin-left: 8px; min-width: 112px; }
.knop .stip { margin-right: 8px; }
.qr { display: flex; align-items: center; margin-top: 16px; }
.qr img { flex: none; width: 132px; height: 132px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--qr-rand); }
.qr p { margin: 0 0 0 16px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.qr p strong { display: block; margin-bottom: 4px; font-size: var(--t-body); line-height: var(--lh-body); font-weight: 500; color: var(--ink); }

/* --- Feiten als platte rijen met haarlijnen ------------------------------------ */
.feiten { margin: 0; }
.feit { display: flex; align-items: baseline; padding: 12px 0; border-top: var(--rand); }
.feit:last-child { border-bottom: var(--rand); }
.feit dt { flex: none; width: 128px; color: var(--ink-muted); }
.feit dd { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; margin: 0; }
.feit dd .stip { margin-right: 8px; }
.feit dd .rechts { margin-left: auto; }
.feit--groot { align-items: center; }
.groot { font-size: var(--t-groot); line-height: var(--lh-groot); font-weight: 600; letter-spacing: var(--tr-tight); margin-right: 10px; }
.feit__meta { display: block; width: 100%; margin-top: 2px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-faint); }

/* ==========================================================================
   Inzet: Overzicht
   ========================================================================== */
.overzicht { display: grid; grid-template-columns: auto minmax(340px, 480px); grid-column-gap: 56px; align-items: start; justify-content: start; }
.overzicht__rechts > * + * { margin-top: 36px; }

/* ==========================================================================
   Scherm: bovenblok en de lijst inzetten
   ========================================================================== */
.scherm-boven { display: grid; grid-template-columns: auto minmax(220px, 1fr) minmax(320px, 400px); grid-column-gap: 40px; align-items: start; margin-bottom: 48px; }
.scherm-boven .feit dt { width: 104px; }

.inzetten { list-style: none; margin: 0; padding: 0; border-top: var(--rand); }
.inzetrij {
  display: grid; grid-template-columns: 45px minmax(0, 1fr) 150px 96px 20px; grid-column-gap: 20px; align-items: center;
  padding: 12px; border-bottom: var(--rand); color: var(--ink);
  transition: background var(--dur-hover) var(--ease), transform var(--dur-druk) var(--ease);
}
.inzetrij:hover { background: var(--bg-raised); text-decoration: none; }
.inzetrij:active { transform: scale(0.998); }
.inzetrij__mini { width: 45px; height: 80px; border-radius: 6px; overflow: hidden; background: var(--bg-sunken); }
.inzetrij__mini img { width: 100%; height: 100%; object-fit: cover; }
.inzetrij__naam { display: flex; align-items: center; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.inzetrij__meta { display: block; margin-top: 4px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.inzetrij__status { font-size: var(--t-klein); color: var(--ink-muted); }
.inzetrij__leads { text-align: right; font-size: var(--t-klein); color: var(--ink-muted); }
.inzetrij__leads strong { display: block; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; color: var(--ink); }
.inzetrij__pijl { width: 20px; height: 20px; color: var(--ink-faint); }

/* Lege staat: een nieuw scherm zonder inzet. Rustig, één zin, twee wegen. */
.leeg { padding: 48px 0 56px; border-top: var(--rand); border-bottom: var(--rand); text-align: center; }
.leeg h3 { margin: 0; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.leeg p { max-width: 460px; margin: 8px auto 0; color: var(--ink-muted); }
.leeg__knoppen { margin-top: 24px; }
.leeg__knoppen .knop + .knop { margin-left: 12px; }

/* ==========================================================================
   Leads
   ========================================================================== */
.periode-regel { display: block; margin: 0 0 20px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.periode-regel b { color: var(--ink); font-weight: 500; }
.leads-kop { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.leads-kop__links { display: flex; align-items: flex-end; }
.leads-kop__getal { margin-bottom: 18px; }
.leads-kop__getal .groot { display: block; margin: 0; }
.leads-kop__getal span { color: var(--ink-muted); }
.staven { display: flex; align-items: flex-end; height: 92px; margin-left: 40px; }
.staaf { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 40px; height: 100%; margin-right: 6px; }
.staaf i { display: block; width: 24px; border-radius: 3px; background: var(--bg-hover); }
.staaf.is-hoogst i { background: var(--ink-muted); }
.staaf b { margin-bottom: 4px; font-size: var(--t-label); line-height: var(--lh-label); font-weight: 600; }
.staaf span { margin-top: 6px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }
.leads-kop__acties { display: flex; align-items: center; }
.leads-kop__acties > * + * { margin-left: 8px; }

.zoek {
  width: 200px; height: var(--veld-h); padding: 0 12px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--bg-raised); color: var(--ink); font: inherit;
}
.zoek::placeholder { color: var(--ink-faint); }
.zoek:focus { outline: none; border-color: var(--line-sterk); }

.tabel { width: 100%; border-collapse: collapse; }
.tabel th { height: 36px; padding: 0 12px; text-align: left; font-size: var(--t-klein); font-weight: 500; color: var(--ink-muted); border-bottom: var(--rand); white-space: nowrap; }
.tabel td { height: 44px; padding: 0 12px; border-bottom: var(--rand); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tabel tbody tr { cursor: pointer; transition: background var(--dur-hover) var(--ease); }
.tabel tbody tr:nth-child(even) { background: var(--bg-rij); }
.tabel tbody tr:hover { background: var(--bg-raised); }
.tabel tbody tr.is-open { background: var(--bg-hover); box-shadow: inset 2px 0 0 var(--ink); }
.tabel .gedempt { color: var(--ink-muted); }
.tabel .num { font-variant-numeric: tabular-nums; }
.ja { color: var(--ok); }

/* Detailpaneel van rechts: opacity en 12 px, de tabel schuift niet. */
.detail {
  position: fixed; top: 0; right: 0; z-index: var(--z-paneel); width: var(--paneel-w); height: 100vh;
  display: flex; flex-direction: column; padding: 24px; background: var(--paneel); border-left: var(--rand);
  opacity: 0; transform: translateX(12px); pointer-events: none;
  transition: opacity var(--dur-paneel) var(--ease), transform var(--dur-paneel) var(--ease-aankomen);
}
.detail.is-open { opacity: 1; transform: none; pointer-events: auto; }
.detail__kop { display: flex; align-items: flex-start; justify-content: space-between; }
.detail__kop h3 { margin: 0; font-size: var(--t-titel); line-height: var(--lh-titel); font-weight: 600; letter-spacing: var(--tr-tight); }
.detail__kop p { margin: 4px 0 0; color: var(--ink-muted); }
.sluit { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r); background: transparent; color: var(--ink-muted); }
.sluit:hover { background: var(--bg-hover); color: var(--ink); }
.sluit svg { width: 18px; height: 18px; }
.detail .feiten { margin-top: 24px; overflow-y: auto; }
.detail .feit dt { width: 120px; font-size: var(--t-klein); }
.detail .feit dd { word-break: break-word; }
.detail__ref { margin: 16px 0 0; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }
.detail__knoppen { display: flex; align-items: center; margin-top: auto; padding-top: 16px; }
.detail__knoppen .knop + .knop { margin-left: 8px; }
.detail__knoppen .knop--weg { margin-left: auto; color: var(--err); }

.leeg-regel { padding: 64px 0; text-align: center; color: var(--ink-muted); border-top: var(--rand); }
.leeg-regel b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Formulieren: Teksten, Formulier, dialogen
   ========================================================================== */
.formulier { max-width: 640px; }
.groep + .groep { margin-top: 36px; }
.groep h2 { margin: 0 0 4px; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.groep > p { margin: 0 0 4px; color: var(--ink-muted); }
.veld { display: block; margin-top: 16px; }
.veld input, .veld textarea, .veld select {
  display: block; width: 100%; height: var(--veld-h); padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--r); background: var(--bg-raised); color: var(--ink); font: inherit;
}
.veld textarea { height: auto; min-height: 64px; padding: 8px 12px; resize: vertical; }
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: none; border-color: var(--line-sterk); }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 12px; }

.veldenlijst { list-style: none; margin: 12px 0 0; padding: 0; border-top: var(--rand); }
.veldenlijst li { display: flex; align-items: center; height: 52px; border-bottom: var(--rand); }
.veldenlijst .naam { flex: 1; font-weight: 500; }
.veldenlijst .soort { width: 160px; color: var(--ink-muted); font-size: var(--t-klein); }
.schakel { display: inline-flex; align-items: center; width: 112px; border: 0; background: transparent; color: var(--ink-muted); font-size: var(--t-klein); padding: 0; }
.schakel i { position: relative; flex: none; width: 32px; height: 18px; margin-right: 8px; border-radius: 9px; background: var(--line-sterk); transition: background var(--dur-hover) var(--ease); }
.schakel i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--dur-hover) var(--ease); }
.schakel[aria-pressed="true"] { color: var(--ink); }
.schakel[aria-pressed="true"] i { background: var(--ok); }
.schakel[aria-pressed="true"] i::after { transform: translateX(14px); }

.dialoog {
  width: 480px; max-width: calc(100vw - 48px); padding: 24px; border: var(--rand); border-radius: var(--r);
  background: var(--paneel); color: var(--ink);
}
.dialoog::backdrop { background: var(--sluier); }
.dialoog[open] { animation: opkomen var(--dur-paneel) var(--ease); }
.dialoog h2 { margin: 0; font-size: var(--t-titel); line-height: var(--lh-titel); font-weight: 600; letter-spacing: var(--tr-tight); }
.dialoog form > p { margin: 8px 0 0; color: var(--ink-muted); }
.dialoog .veld input, .dialoog .veld select { background: var(--veld-in-paneel); }
.dialoog__knoppen { display: flex; justify-content: flex-end; margin-top: 24px; }
.dialoog__knoppen .knop + .knop { margin-left: 8px; }

.keuzes { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 12px; }
.keuze {
  display: block; padding: 12px; border: var(--rand-sterk); border-radius: var(--r); background: transparent; text-align: left;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.keuze:hover { background: var(--bg-hover); }
.keuze b { display: block; font-weight: 500; }
.keuze span { display: block; margin-top: 2px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }
.keuze[aria-pressed="true"] { border-color: var(--ink); background: var(--bg-hover); }
.keuzes--drie { grid-template-columns: 1fr 1fr 1fr; }
.is-weg { display: none !important; }

/* ==========================================================================
   Templates
   ========================================================================== */
.templates { list-style: none; margin: 0; padding: 0; border-top: var(--rand); max-width: 960px; }
.template { display: flex; align-items: flex-start; padding: 20px 0; border-bottom: var(--rand); }
.template__mini { flex: none; width: 90px; height: 160px; border-radius: var(--r); overflow: hidden; background: var(--bg-sunken); }
.template__mini img { width: 100%; height: 100%; object-fit: cover; }
.template__tekst { flex: 1; min-width: 0; margin-left: 24px; }
.template__tekst h2 { margin: 0; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.template__tekst p { margin: 6px 0 0; color: var(--ink-muted); }
.template__tekst .meta { font-size: var(--t-klein); color: var(--ink-faint); }
.template__knoppen { display: flex; align-items: center; flex: none; margin-left: 24px; }
.template__knoppen .knop + .knop { margin-left: 8px; }
.uitleg { max-width: 960px; margin: 16px 0 0; font-size: var(--t-klein); color: var(--ink-faint); }

/* --- Melding rechtsonder: komt op met opacity, weg na drie seconden ------------ */
.melding {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); max-width: 440px;
  display: flex; align-items: center; padding: 12px 16px; border: var(--rand); border-radius: var(--r);
  background: var(--paneel); font-size: var(--t-klein); line-height: var(--lh-klein);
  opacity: 0; transition: opacity var(--dur-paneel) var(--ease); pointer-events: none;
}
.melding.is-zichtbaar { opacity: 1; }
.melding .stip { margin-right: 10px; }

/* ==========================================================================
   v2, ronde 2 (12 oktober 2026, middag): bewerken op het display
   Teksten en formulier, Uiterlijk, de voorvertoning als iframe, eigen vragen.
   ========================================================================== */

/* De voorvertoning is nu het echte display in het klein: scherm.html in een
   iframe van 1080 x 1920, geschaald zoals het podium. */
.schermframe {
  position: absolute; top: 0; left: 0; display: block; width: 1080px; height: 1920px; border: 0;
  transform-origin: 0 0; transform: scale(var(--s)); background: #0A0A0B;
}
#frame-overzicht, #frame-uiterlijk { pointer-events: none; }

/* Onder de voorvertoning op Overzicht: de keuze, dan de uitleg, dan het formaat. */
.vv-onder .vv-uitleg { color: var(--ink-muted); }
.vv-onder .vv-uitleg b { color: var(--ink); font-weight: 500; }
.vv-onder .vv-formaat { margin-top: 4px; }
.voorvertoning .vv-onder { max-width: calc(1080px * var(--vv-schaal) + 26px); }

/* Statusregel in de kop: wat er nog niet op het scherm staat. */
.kop__wijziging { display: flex; align-items: center; width: 100%; margin-top: 2px; color: var(--ink); }
.kop__wijziging::before { content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--warn); }

/* --- Twee kolommen: het display links (blijft staan), de rest rechts -------- */
.bewerk { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-column-gap: 48px; align-items: start; }
.bewerk__links { position: sticky; top: 16px; width: calc(1080px * var(--vv-schaal) + 26px); }
.bewerk__rechts { max-width: 640px; min-width: 0; }
.stappen { display: flex; margin-bottom: 10px; }
.stappen button { flex: 1; padding: 0 4px; }
.vv-hint { margin: 10px 0 0; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.vv-hint b { color: var(--ink); font-weight: 500; }
.bewerk__zin { margin: 0 0 16px; color: var(--ink-muted); }
.bewerk__zin--teksten { margin-top: 28px; padding-top: 16px; border-top: var(--rand); font-size: var(--t-klein); line-height: var(--lh-klein); }
.sectiekop--los { margin-top: 44px; }
.knop:disabled { opacity: 0.4; cursor: default; }

/* --- De lijst met vragen ---------------------------------------------------- */
.veldkop, .veldrij { display: grid; grid-template-columns: 24px minmax(0, 1fr) 68px 64px 92px; grid-column-gap: 8px; align-items: center; }
.veldkop { height: 28px; padding: 0 8px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }
.veldkop span:first-child { grid-column: 1 / 3; padding-left: 32px; }
.veldkop span:nth-child(2), .veldkop span:nth-child(3) { text-align: center; }
.veldkop span:last-child { text-align: right; }
.veldlijst { list-style: none; margin: 0; padding: 0; border-top: var(--rand); }
.veldrij { height: 48px; padding: 0 8px; border-bottom: var(--rand); background: var(--bg); transition: background var(--dur-hover) var(--ease); }
.veldrij:hover { background: var(--bg-rij); }
.veldrij.is-gekozen { background: var(--bg-raised); box-shadow: inset 2px 0 0 var(--brand-tekst); }
.veldrij__greep { display: flex; align-items: center; justify-content: center; width: 24px; height: 32px; color: var(--ink-faint); cursor: grab; border-radius: 6px; }
.veldrij__greep:hover { color: var(--ink); background: var(--bg-hover); }
.veldrij__greep svg { width: 16px; height: 16px; }
.veldrij--vast .veldrij__greep { cursor: default; }
.veldrij--vast .veldrij__greep:hover { background: transparent; }
.veldrij__naam { display: flex; align-items: center; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; text-align: left; color: var(--ink); }
.veldrij__naam:hover .veldrij__label { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-sterk); }
.veldrij__icoon { flex: none; width: 18px; height: 18px; margin-right: 12px; color: var(--ink-muted); }
.veldrij__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veldrij__eigen { flex: none; margin-left: 8px; padding: 1px 6px; border: var(--rand-sterk); border-radius: 6px; font-size: 11px; line-height: 14px; color: var(--ink-muted); }
.veldrij__stap { font-size: var(--t-klein); color: var(--ink-muted); text-align: center; }
.veldrij__altijd { font-size: var(--t-label); color: var(--ink-faint); text-align: center; }
.veldrij__altijd:last-child { text-align: right; padding-right: 2px; }
.veldrij .vink { justify-self: center; }
.veldrij .schakel--los { justify-self: end; }
.veldrij.is-uit .veldrij__label, .veldrij.is-uit .veldrij__icoon, .veldrij.is-uit .veldrij__stap { color: var(--ink-faint); }
.veldrij.is-uit .vink { opacity: 0.4; }

/* Slepen: de rij die meebeweegt is een kloon, het origineel is het gat. */
.veldrij.is-kloon { position: fixed; z-index: var(--z-sleep); margin: 0; background: var(--bg-raised); border: var(--rand-sterk); border-radius: var(--r); pointer-events: none; transform: scale(1.01); }
.veldrij.is-gat { background: transparent; outline: 1px dashed var(--line-sterk); outline-offset: -1px; }
.veldrij.is-gat > * { visibility: hidden; }
body.is-slepen .veldrij__greep { cursor: grabbing; }

/* Schakelaar zonder tekst (in de rij) en met tekst (in het paneel) */
.schakel--los { width: auto; }
.schakel--los i { margin-right: 0; }
.schakel--breed { width: auto; margin-right: 24px; }
.schakel:disabled { opacity: 0.5; cursor: default; }
/* Vinkje voor Verplicht: een vakje, geen tweede schakelaar */
.vink { position: relative; width: 20px; height: 20px; padding: 0; border: var(--rand-sterk); border-radius: 5px; background: transparent; transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.vink[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.vink[aria-pressed="true"] i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vink:disabled { opacity: 0.45; cursor: default; }

/* De schets: wat komt op welke stap */
.stapschets { margin-top: 24px; }
.stapschets__kop { margin: 0 0 8px; font-size: var(--t-label); line-height: var(--lh-label); font-weight: 500; color: var(--ink-faint); }
.stapschets ol { list-style: none; margin: 0; padding: 0; }
.stapschets li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 96px; grid-column-gap: 12px; align-items: baseline; padding: 8px 0; border-top: var(--rand); font-size: var(--t-klein); line-height: var(--lh-klein); }
.stapschets li:last-child { border-bottom: var(--rand); }
.stapschets__nr { font-weight: 500; }
.stapschets__wat { color: var(--ink-muted); }
.stapschets__ruimte { display: flex; align-items: center; justify-content: flex-end; font-size: var(--t-label); color: var(--ink-faint); }
.stapschets__ruimte .balk { width: 56px; margin: 0 8px 0 0; }
.stapschets__uitleg { display: flex; align-items: baseline; margin: 12px 0 0; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.stapschets__uitleg .stip { flex: none; margin-right: 10px; transform: translateY(-1px); }

/* --- Het bewerkpaneel (van rechts, zoals het leadpaneel) ---------------------- */
.bewerkpaneel { overflow-y: auto; }
.bewerkpaneel__waar { display: flex; align-items: center; margin: 0 0 4px !important; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.bp-icoon { width: 16px; height: 16px; margin-right: 8px; color: var(--ink-muted); }
.bewerkpaneel .detail__kop h3 { font-size: var(--t-kop); line-height: var(--lh-kop); letter-spacing: var(--tr-kop); word-break: break-word; }
.bewerkpaneel__inhoud { margin-top: 8px; }
.bewerkpaneel .veld input, .bewerkpaneel .veld textarea, .bewerkpaneel .veld select { background: var(--veld-in-paneel); }
.bewerkpaneel .veld.is-gekozen .label { color: var(--ink); }
.bewerkpaneel .veld.is-gekozen input, .bewerkpaneel .veld.is-gekozen textarea { border-color: var(--line-sterk); }
.bp-plek { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r); background: var(--veld-in-paneel); font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.bp-schakels { display: flex; align-items: center; margin-top: 20px; }
.label .teller { float: right; font-weight: 400; color: var(--ink-faint); }
.opties { list-style: none; margin: 0 0 4px; padding: 0; }
.opties li { display: flex; align-items: center; }
.opties li + li { margin-top: 6px; }
.opties input { flex: 1; min-width: 0; height: var(--veld-h); padding: 0 12px; border: 1px solid transparent; border-radius: var(--r); background: var(--veld-in-paneel); color: var(--ink); font: inherit; }
.opties input:focus { outline: none; border-color: var(--line-sterk); }
.sluit--klein { flex: none; width: 28px; height: 28px; margin-left: 4px; }
.sluit--klein svg { width: 14px; height: 14px; }
.bewerkpaneel .detail__knoppen:empty { display: none; }

/* --- Dialoog Veld toevoegen ------------------------------------------------- */
.dialoog--breed { width: 620px; }
.soorten { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-top: 16px; }
.soortkaart {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-column-gap: 4px; align-items: start;
  padding: 12px; border: var(--rand-sterk); border-radius: var(--r); background: transparent; text-align: left;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-druk) var(--ease);
}
.soortkaart:hover { background: var(--bg-hover); border-color: var(--ink-muted); }
.soortkaart:active { transform: scale(0.99); }
.soortkaart svg { grid-row: span 2; width: 20px; height: 20px; color: var(--ink); }
.soortkaart b { font-weight: 500; }
.soortkaart span { margin-top: 2px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-muted); }
.terug-link { display: inline-flex; align-items: center; height: 24px; margin: -4px 0 8px; padding: 0; border: 0; background: transparent; color: var(--ink-muted); font-size: var(--t-klein); }
.terug-link:hover { color: var(--ink); }
.terug-link svg { width: 14px; height: 14px; margin-right: 4px; transform: rotate(180deg); }
.dialoog h2.met-icoon { display: flex; align-items: center; }
.dialoog h2.met-icoon svg { width: 22px; height: 22px; margin-right: 10px; }
.vinkregel { display: flex; align-items: center; margin-top: 16px; color: var(--ink-muted); cursor: pointer; }
.vinkregel input { width: 16px; height: 16px; margin: 0 10px 0 0; accent-color: var(--brand); }

/* --- Uiterlijk: stijlen ----------------------------------------------------- */
.stijlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-gap: 20px 22px; }
.stijlkeuze { display: block; width: 120px; padding: 0; border: 0; background: transparent; text-align: left; color: var(--ink-muted); }
.stijlkeuze__scherm {
  position: relative; display: block; width: 120px; height: 213px; overflow: hidden; border-radius: 8px; background: #0A0A0B;
  box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--dur-hover) var(--ease), transform var(--dur-druk) var(--ease);
}
.stijlkeuze__scherm iframe { position: absolute; top: 0; left: 0; width: 1080px; height: 1920px; border: 0; transform-origin: 0 0; transform: scale(0.11111); pointer-events: none; }
.stijlkeuze:hover .stijlkeuze__scherm { box-shadow: 0 0 0 1px var(--ink-muted); }
.stijlkeuze:active .stijlkeuze__scherm { transform: scale(0.98); }
.stijlkeuze[aria-pressed="true"] .stijlkeuze__scherm { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.stijlkeuze__naam { display: block; margin-top: 10px; font-size: var(--t-klein); line-height: var(--lh-klein); }
.stijlkeuze:hover .stijlkeuze__naam { color: var(--ink); }
.stijlkeuze[aria-pressed="true"] .stijlkeuze__naam { color: var(--ink); font-weight: 500; }
.stijl-gekozen { margin: 20px 0 0; padding-top: 14px; border-top: var(--rand); color: var(--ink-muted); }
.stijl-gekozen b { color: var(--ink); font-weight: 500; }

/* --- Uiterlijk: merkkleuren ------------------------------------------------- */
.kleuren { border-top: var(--rand); }
.kleur { display: grid; grid-template-columns: 40px minmax(0, 1fr) 104px; grid-column-gap: 14px; align-items: center; padding: 12px 0; }
.kleur__staal { position: relative; display: block; width: 40px; height: 40px; border-radius: var(--r); cursor: pointer; }
.kleur__staal span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--staal-rand); pointer-events: none; }
.kleur__staal input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.kleur__tekst b { display: block; font-weight: 500; }
.kleur__tekst span { display: block; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.kleur__hex {
  width: 104px; height: var(--veld-h); padding: 0 10px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--bg-raised); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; text-transform: lowercase;
}
.kleur__hex:focus { outline: none; border-color: var(--line-sterk); }
.kleur__hex.is-fout { border-color: var(--err); }
.kleur__melding { border-bottom: var(--rand); }
.kleur__melding:not(:empty) { display: flex; align-items: flex-start; margin-top: -4px; padding: 0 0 14px 54px; }
.kleur__melding .stip { flex: none; margin: 6px 10px 0 0; }
.kleur__melding p { margin: 0 0 8px; color: var(--ink); }
.mini-staal { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--staal-rand); }
.knop .mini-staal + span { margin-left: 0; }

/* --- Leads: antwoorden op eigen vragen -------------------------------------- */
.tabel td.meer { max-width: 200px; color: var(--ink-muted); }
.tabel td.meer .sep { margin: 0 6px; }
.detail .feit--vraag { display: block; }
.detail .feit--vraag dt { width: auto; margin-bottom: 2px; }

/* --- Uiterlijk: vier onderdelen in tabjes (12 oktober, ronde overgangen) -------- */
.onderdelen { margin-bottom: 24px; }
.onderdelen .punt { display: inline-block; width: 6px; height: 6px; margin: 0 0 1px 6px; border-radius: 50%; background: var(--warn); vertical-align: middle; }
.onderdeel[hidden] { display: none; }

/* ==========================================================================
   Thema, naam en slot (12 oktober 2026, ONTWERP.md hoofdstuk 16)
   ========================================================================== */

/* Het woordmerk: wit op donker, bijna zwart op licht. Twee bestanden, één plek. */
.merk__beeld--licht { display: none; }
[data-thema="licht"] .merk__beeld--donker { display: none; }
[data-thema="licht"] .merk__beeld--licht { display: block; }

/* Alleen in de mock: de regel onder "Ontwerpvoorstel v2" waarmee je de slotstaat aan en uit zet. */

/* De balk "Je account staat op slot": boven elke pagina, een vlak met een amber
   stip, wat er aan de hand is, wat je kunt doen. Geen rood, geen alarm: niemand
   heeft iets fout gedaan, en alles is nog terug te zetten. */
.slotbalk {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; grid-column-gap: 14px; align-items: start;
  max-width: calc(var(--inhoud-max) - 2 * var(--inhoud-pad)); margin: 20px var(--inhoud-pad) 0; padding: 16px 20px;
  border: var(--rand); border-radius: var(--r); background: var(--bg-raised);
}
.slotbalk > .stip { margin-top: 8px; }
.slotbalk__titel { margin: 0; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.slotbalk__tekst p { margin: 4px 0 0; color: var(--ink); }
.slotbalk__tekst .slotbalk__meta { margin-top: 6px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.slotbalk__acties { display: flex; flex-direction: column; align-items: flex-end; margin-left: 12px; }
.slotbalk__acties .knop { background: var(--paneel); }
.slotbalk__acties .knop:hover { background: var(--bg-hover); }
.slotbalk__tel { margin-top: 8px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); white-space: nowrap; }
.slotbalk__tel a { color: var(--ink); }

/* ==========================================================================
   Dashboard Akari Displays v2, tabblad Uiterlijk: "Overgang tussen beelden"
   Kiosk-designer, 12 oktober 2026. Hoort bij overgang-keuze.js.
   Zelfde taal als de soorten bij Veld toevoegen en de keuzes van de knop:
   lijn van 1 px, één radius, gekozen = witte rand en het hovervlak.
   ========================================================================== */

.ov-soorten { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; }
.ov-soort {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-column-gap: 12px; align-items: start;
  padding: 12px 14px 12px 10px; border: var(--rand-sterk); border-radius: var(--r); background: transparent;
  color: var(--ink); text-align: left;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-druk) var(--ease);
}
.ov-soort:hover { background: var(--bg-hover); border-color: var(--ink-muted); }
.ov-soort:active { transform: scale(0.99); }
.ov-soort[aria-pressed="true"] { border-color: var(--ink); background: var(--bg-hover); }
.ov-icoon { grid-row: span 2; width: 40px; height: 40px; color: var(--ink-muted); }
.ov-soort[aria-pressed="true"] .ov-icoon { color: var(--ink); }
.ov-soort b { font-weight: 500; }
.ov-soort span { margin-top: 2px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-muted); }

.ov-rijen { margin-top: 20px; border-top: var(--rand); }
.ov-rij { display: grid; grid-template-columns: 80px auto minmax(0, 1fr); grid-column-gap: 16px; align-items: center; padding: 12px 0; border-bottom: var(--rand); }
.ov-rij[hidden] { display: none; }
.ov-rij__label { color: var(--ink); font-weight: 500; }
.ov-rij__uitleg { color: var(--ink-muted); font-size: var(--t-klein); line-height: var(--lh-klein); }
.ov-rij .segment button { min-width: 72px; }
.ov-pijlen button { min-width: 40px !important; padding: 0 8px; }
.ov-pijlen button span { display: block; width: 16px; height: 16px; }
.ov-pijlen svg { display: block; width: 16px; height: 16px; }

/* Dashboard Akari Displays v2, Uiterlijk, onderdeel Lettertype. Hoort bij lettertype-keuze.js.
   Zelfde kaarttaal als Overgang en Veld toevoegen: lijn van 1 px, één radius,
   gekozen = witte rand en het hovervlak. Het voorbeeld staat in de echte letter. */
.lt-paren { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin: 10px 0; }
.lt-kaart {
  display: block; width: 100%; padding: 14px; border: var(--rand-sterk); border-radius: var(--r); background: transparent;
  color: var(--ink); text-align: left;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-druk) var(--ease);
}
.lt-kaart:hover { background: var(--bg-hover); border-color: var(--ink-muted); }
.lt-kaart:active { transform: scale(0.99); }
.lt-kaart[aria-pressed="true"] { border-color: var(--ink); background: var(--bg-hover); }
.lt-kaart b { display: block; font-weight: 500; }
.lt-kaart__zin { display: block; margin-top: 2px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-muted); }
.lt-kaart--breed { padding: 12px 14px; }

.lt-proef { display: block; margin-bottom: 12px; padding-bottom: 10px; border-bottom: var(--rand); }
.lt-proef__kop { display: block; font-size: 26px; line-height: 32px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-proef__tekst { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

.lt-eigen { margin-top: 10px; padding: 4px 14px 14px; border: var(--rand); border-radius: var(--r); background: var(--bg-raised); }
.lt-eigen__rij { display: grid; grid-template-columns: 80px minmax(0, 270px) auto; grid-column-gap: 16px; align-items: center; padding: 10px 0; border-bottom: var(--rand); }
.lt-eigen__kies { margin: 0; }
.lt-eigen__kies select { width: 100%; height: var(--veld-h); padding: 0 10px; border: var(--rand-sterk); border-radius: var(--r); background: var(--bg); color: var(--ink); font: inherit; }
.lt-eigen .segment button[disabled] { opacity: 0.35; cursor: not-allowed; }
.lt-eigen__proef { padding-top: 14px; }
.lt-eigen__proef .lt-proef { margin: 0; padding: 0; border: 0; }
.lt-eigen__proef .lt-proef__kop { font-size: 40px; line-height: 46px; }

/* ==========================================================================
   De Akari-beelden op het display: leeg en op slot (1080 x 1920, staand)
   Hoort bij akari-beeld.js. Maten in px op 1080 x 1920 of in procenten,
   nooit vh: dit staat ook in de voorvertoning van het dashboard, geschaald.
   Alleen stilstaand beeld: geen animatie, geen ademen, geen knop, geen formulier.
   Geen flex-gap, geen inset, geen aspect-ratio (WebView 83).
   ========================================================================== */
.akari-beeld {
  position: absolute; top: 0; left: 0; width: 1080px; height: 1920px; overflow: hidden;
  background: #0A0A0B; color: #F4F6F8;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Het enige licht: een stilstaande lichtval in Akari-blauw vanaf de onderrand. */
.akari-beeld__licht {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image: radial-gradient(90% 60% at 50% 112%, rgba(31, 107, 255, 0.55) 0%, rgba(31, 107, 255, 0) 70%);
}

/* Leeg: het woordmerk is het beeld. 56 procent breed, op 46 procent hoogte. */
.akari-beeld--leeg .akari-beeld__merk { position: absolute; left: 22%; top: 46%; width: 56%; height: auto; opacity: 0.92; }

/* Op slot: het licht staat gedimd (de helft van leeg), het woordmerk wordt
   de afzender boven één zin. Het midden van het blok ligt rond 47 procent van
   de hoogte, waar bij leeg het woordmerk staat. */
.akari-beeld--slot .akari-beeld__licht { opacity: 0.5; }
.akari-beeld__blok { position: absolute; left: 120px; right: 120px; top: 600px; text-align: center; }
.akari-beeld--slot .akari-beeld__merk { display: block; width: 300px; height: auto; margin: 0 auto; opacity: 0.92; }
.akari-beeld__zin {
  margin: 88px auto 0; max-width: 820px;
  font-size: 64px; line-height: 76px; font-weight: 600; letter-spacing: -0.025em;
  text-wrap: balance;
}
.akari-beeld__streep { display: block; width: 64px; height: 2px; margin: 72px auto 0; background: rgba(244, 246, 248, 0.22); }
.akari-beeld__contact {
  margin: 56px 0 0; font-size: 36px; line-height: 52px; font-weight: 500; letter-spacing: -0.005em;
  color: rgba(244, 246, 248, 0.72);
  font-variant-numeric: tabular-nums;
}
.akari-beeld__contact span { display: block; }

/* ==========================================================================
   De echte interface (oktober 2026): wat de mock niet had
   ========================================================================== */

[hidden] { display: none !important; }
:root { --zijbalk-w: 264px; }   /* BOUWSPEC 10.2: 264 breed */
.pagina-wissel { animation: opkomen var(--dur-fade) var(--ease); }
.laden { margin: 48px 0; color: var(--ink-faint); font-size: var(--t-klein); }
.foutregel { display: flex; align-items: center; margin: 0 0 20px; color: var(--err); }
.foutregel .stip { margin-right: 10px; }
.offlinebalk {
  display: flex; align-items: center; max-width: calc(var(--inhoud-max) - 2 * var(--inhoud-pad)); margin: 16px var(--inhoud-pad) 0;
  padding: 10px 14px; border: var(--rand); border-radius: var(--r); background: var(--bg-raised); font-size: var(--t-klein);
}
.offlinebalk .stip { margin-right: 10px; }
.knop--gevaar, .knop--gevaar:hover { background: var(--err-knop); border-color: var(--err-knop); color: #fff; }
.knop--vol { width: 100%; }
.knop[disabled], .knop:disabled { opacity: 0.5; cursor: default; }
.knop--primair[disabled] .punt { display: none; }
.linkknop { padding: 0; border: 0; background: transparent; color: var(--brand-tekst); font: inherit; cursor: pointer; text-align: left; }
.linkknop:hover { text-decoration: underline; text-underline-offset: 2px; }
.live--los { margin-left: 0; }
.leeg-regel--groot { padding: 96px 0; }
.leeg-regel__knoppen { margin-top: 20px; }
.leeg-regel__knoppen .knop + .knop { margin-left: 8px; }
.dialoog__fout { margin: 12px 0 0; color: var(--err); font-size: var(--t-klein); }
.dialoog .veld textarea { background: var(--veld-in-paneel); }
.veld .hulp { display: block; }
.veld.is-fout input, .veld.is-fout textarea { border-color: var(--err); }
.knoppenrij { display: flex; align-items: center; flex-wrap: wrap; }
.knoppenrij > * + * { margin-left: 8px; }

/* --- Het losse paneel: inloggen, tweede stap, koppelen, wachtwoord ----------------- */
.los { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 48px 24px; }
.los-paneel { width: 400px; max-width: 100%; }
.los-paneel--breed { width: 480px; }
.los-merk { display: flex; align-items: center; height: 24px; margin-bottom: 40px; }
.los-merk img { height: 16px; width: auto; }
.los-merk span { margin-left: 10px; padding-left: 10px; border-left: var(--rand-sterk); font-size: var(--t-klein); color: var(--ink-muted); line-height: 16px; }
.los-titel { margin: 0 0 8px; font-size: var(--t-titel); line-height: var(--lh-titel); font-weight: 600; letter-spacing: var(--tr-tight); }
.los-stap { margin: 0 0 6px; font-size: var(--t-klein); color: var(--ink-faint); }
.los-tekst { margin: 8px 0 0; color: var(--ink-muted); }
.los-tekst--klein { margin-top: 16px; font-size: var(--t-klein); }
.los-form .knop--vol { margin-top: 24px; }
.los-paneel > .knop--vol { margin-top: 24px; }
.los-fout { margin: 12px 0 0; color: var(--err); font-size: var(--t-klein); }
.los-link { margin: 16px 0 0; font-size: var(--t-klein); }
.los-lijst { margin: 12px 0 0; padding-left: 20px; color: var(--ink); }
.los-lijst li + li { margin-top: 4px; }
.los-qr { display: flex; justify-content: center; margin: 20px 0 4px; }
.los-qr img { width: 200px; height: 200px; padding: 8px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--qr-rand); }
.sleutel-tekst { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.veld .code-veld { height: 56px; font-size: 28px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.veld .code-veld--herstel { font-size: 20px; letter-spacing: 0.08em; }
.sterkte { display: flex; align-items: center; margin-top: 10px; }
.sterkte .balk { width: 120px; margin: 0 10px 0 0; }
.sterkte .balk.is-goed i { background: var(--ok); }
.sterkte__tekst { font-size: var(--t-label); color: var(--ink-faint); }
.herstelcodes {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px 24px; margin: 20px 0 0; padding: 16px 20px; list-style: none;
  border-radius: var(--r); background: var(--bg-raised);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; line-height: 24px; letter-spacing: 0.04em;
}
.herstelcodes__knoppen { display: flex; margin-top: 12px; }
.herstelcodes__knoppen .knop + .knop { margin-left: 8px; }

/* --- Zijbalk: wat de echte interface erbij heeft ------------------------------------- */
.zb-inzet .stip { flex: none; margin: 0 0 0 8px; }
.zb-nieuw { flex: none; margin-left: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: var(--brand-ink); font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; }
.zb-eerder > summary { list-style: none; color: var(--ink-faint); font-size: var(--t-label); }
.zb-eerder > summary::-webkit-details-marker { display: none; }
.zb-inzetten--eerder { padding-left: 0; }
.zb-weergave .thema-schakel { margin-left: 8px; }
.thema-schakel--tekst button { width: auto; padding: 0 12px; }
.thema-schakel--tekst button span { margin-left: 8px; font-size: var(--t-klein); }

/* --- Startpagina: kaarten per scherm ---------------------------------------------- */
.schermkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-gap: 20px; max-width: 1100px; list-style: none; margin: 0; padding: 0; }
.schermkaart {
  display: grid; grid-template-columns: var(--mini-w) minmax(0, 1fr); grid-column-gap: 20px; align-items: start;
  padding: 16px; border: var(--rand); border-radius: var(--r); color: var(--ink);
  transition: background var(--dur-hover) var(--ease), transform var(--dur-druk) var(--ease);
}
.schermkaart:hover { background: var(--bg-raised); text-decoration: none; }
.schermkaart:active { transform: scale(0.995); }
.schermkaart__mini { position: relative; width: var(--mini-w); height: var(--mini-h); border-radius: 8px; overflow: hidden; background: var(--bg-sunken); }
.schermkaart__mini img { width: 100%; height: 100%; object-fit: cover; }
.schermkaart h2 { margin: 0; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.schermkaart p { margin: 6px 0 0; display: flex; align-items: center; color: var(--ink-muted); font-size: var(--t-klein); }
.schermkaart p .stip { margin-right: 8px; }
.schermkaart .schermkaart__nieuw { color: var(--ink); font-weight: 500; }

/* --- Voorvertoning met wisselende schaal ------------------------------------------ */
.schermframe.is-stil { pointer-events: none; }
.toestel__laag {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; color: #9AA3AE; font-size: var(--t-klein); background: #0A0A0B;
}
.akari-beeld-schaal { position: absolute; top: 0; left: 0; width: 1080px; height: 1920px; transform-origin: 0 0; transform: scale(var(--s)); }

/* --- Schermpagina: extra's --------------------------------------------------------- */
.scherm-akari { margin-top: 48px; max-width: 760px; }
.scherm-akari .feit dt { width: 180px; }
.qr__knoppen { margin-top: 8px; }
.sectiekop__acties { display: flex; align-items: center; }
.sectiekop__acties > * + * { margin-left: 8px; }
.inzetrij__status .live { margin-left: 0; }
.inzetrij__waarschuwing { display: block; margin-top: 2px; font-size: var(--t-label); color: var(--err); }
.alle-leads { margin-top: 56px; }

/* --- Inzet ------------------------------------------------------------------------- */
.kop__titel-knop { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: text; }
.kop__titel-knop:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-sterk); }
.tabs .punt { width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--warn); }
.overzicht__acties { display: flex; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.overzicht__acties .knop { margin: 0 8px 8px 0; }
.blok + .blok { margin-top: 32px; }
.blok h2 { margin: 0 0 8px; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.blok > p { margin: 0 0 12px; color: var(--ink-muted); }
.drie-getallen { display: flex; }
.drie-getallen > div { margin-right: 32px; }
.drie-getallen b { display: block; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; font-variant-numeric: tabular-nums; }
.drie-getallen span { font-size: var(--t-klein); color: var(--ink-muted); }
.feit .knop--tekst.rechts { height: auto; padding: 0; }

/* --- Carrousel --------------------------------------------------------------------- */
.sleepzone { cursor: pointer; }
.sleepzone.is-groot { height: 240px; }
.rasterbalk__rechts .knop { margin-left: 16px; }
.tegel--wacht { background: var(--bg-sunken); }
.chip--sec { padding: 0 6px; }
.chip--sec input { width: 22px; height: 20px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: right; -moz-appearance: textfield; }
.chip--sec input::-webkit-outer-spin-button, .chip--sec input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chip--sec input:focus { outline: none; }
.chip--sec span { margin-left: 2px; }
.voorstel-balk { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 20px; padding: 14px 16px; border: var(--rand); border-radius: var(--r); background: var(--bg-raised); }
.voorstel-balk p { margin: 0; }
.voorstel-balk ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-muted); font-size: var(--t-klein); }
.voorstel-balk .knoppenrij { flex: none; margin-left: 16px; }
.item__naam { display: block; margin: 8px 0 0; padding: 0 2px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Teksten en formulier ------------------------------------------------------------ */
.past-niet { display: flex; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--err); border-radius: var(--r); color: var(--ink); font-size: var(--t-klein); line-height: var(--lh-klein); }
.past-niet .stip { flex: none; margin: 5px 10px 0 0; }
.meer { margin-top: 32px; border-top: var(--rand); }
.meer > summary { padding: 14px 0; font-weight: 500; cursor: pointer; list-style: none; }
.meer > summary::-webkit-details-marker { display: none; }
.meer__inhoud { padding-bottom: 16px; }
.meer h3 { margin: 24px 0 0; font-size: var(--t-body); font-weight: 600; }
.meer h3 + p { margin: 4px 0 0; color: var(--ink-muted); font-size: var(--t-klein); }
.tijdveld { display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-column-gap: 12px; align-items: center; margin-top: 10px; }
.tijdveld input { height: var(--veld-h); padding: 0 10px; border: 1px solid transparent; border-radius: var(--r); background: var(--bg-raised); color: var(--ink); font: inherit; text-align: right; }
.tijdveld input:focus { outline: none; border-color: var(--line-sterk); }
.tijdveld small { display: block; color: var(--ink-faint); font-size: var(--t-label); }
.bp-standaard { margin: 6px 0 0; font-size: var(--t-label); color: var(--ink-faint); }
.bp-soort { display: flex; align-items: center; margin-top: 16px; color: var(--ink-muted); font-size: var(--t-klein); }
.bp-soort svg { width: 16px; height: 16px; margin-right: 8px; }
.bp-gedeeld { margin: 12px 0 0; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }
.opgeslagen { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); padding: 8px 12px; border: var(--rand); border-radius: var(--r); background: var(--paneel); font-size: var(--t-klein); opacity: 0; transition: opacity var(--dur-paneel) var(--ease); pointer-events: none; }
.opgeslagen.is-zichtbaar { opacity: 1; }
.veld-voorbeeld { margin-top: 16px; padding: 12px; border: var(--rand); border-radius: var(--r); background: var(--veld-in-paneel); }
.veld-voorbeeld__kop { display: block; margin-bottom: 8px; font-size: var(--t-label); color: var(--ink-faint); }
.veld-voorbeeld__label { display: block; font-size: var(--t-klein); color: var(--ink); }
.veld-voorbeeld__vak { display: block; height: 32px; margin-top: 6px; border: var(--rand-sterk); border-radius: 8px; }
.veld-voorbeeld__vak--lang { height: 64px; }
.veld-voorbeeld__keuzes { display: flex; flex-wrap: wrap; margin-top: 6px; }
.veld-voorbeeld__keuzes span { margin: 0 6px 6px 0; padding: 4px 10px; border: var(--rand-sterk); border-radius: 8px; font-size: var(--t-klein); }
.veld-voorbeeld__vink { display: inline-block; width: 18px; height: 18px; margin-right: 8px; border: var(--rand-sterk); border-radius: 4px; vertical-align: -4px; }
.dialoog__onder { margin: 16px 0 0; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }

/* --- Leads ------------------------------------------------------------------------- */
.leads-filters { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.leads-filters > * { margin: 0 8px 8px 0; }
.leads-filters input[type="date"] { height: var(--veld-h); padding: 0 10px; border: 1px solid transparent; border-radius: var(--r); background: var(--bg-raised); color: var(--ink); font: inherit; }
.leads-filters select { height: var(--veld-h); padding: 0 10px; border: 1px solid transparent; border-radius: var(--r); background: var(--bg-raised); color: var(--ink); font: inherit; }
.tabel-schuif { overflow-x: auto; }
.tabel tbody tr.is-nieuw { background: var(--bg-hover); }
.tabel tbody tr.is-nieuw td:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--brand-tekst); }
.tabel .weg { width: 44px; text-align: right; }
.tabel .weg button { opacity: 0; }
.tabel tr:hover .weg button, .tabel .weg button:focus { opacity: 1; }
.tabel .weg .prullenbak { position: static; display: inline-flex; background: transparent; color: var(--ink-muted); }
.tabel .weg .prullenbak:hover { background: var(--err-knop); color: #fff; }
.paginering { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: var(--t-klein); color: var(--ink-muted); }
.staven--leeg { color: var(--ink-faint); font-size: var(--t-klein); align-items: center; }
.leeg-cel { height: 88px; text-align: center; color: var(--ink-muted); }

/* --- Templates ---------------------------------------------------------------------- */
.template__knoppen { flex-wrap: wrap; justify-content: flex-end; max-width: 420px; }
.template__knoppen .knop { margin: 0 0 8px 8px; }

/* --- Instellingen, Account, Hulp ---------------------------------------------------- */
.instellingen { max-width: 760px; }
.instellingen .groep { padding-top: 28px; border-top: var(--rand); }
.instellingen .groep:first-child { padding-top: 0; border-top: 0; }
.instellingen .groep > p { margin-bottom: 12px; }
.regel-schakel { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.pakketregels { margin: 12px 0 0; padding: 0; list-style: none; }
.pakketregels li { display: flex; justify-content: space-between; padding: 8px 0; border-top: var(--rand); }
.pakketregels li:last-child { border-bottom: var(--rand); }
.pakketregels span { color: var(--ink-muted); }
.menu-knop { position: relative; display: inline-block; }
.rij-menu {
  position: absolute; right: 0; top: 100%; z-index: var(--z-paneel); min-width: 200px; margin-top: 4px; padding: 6px;
  border: var(--rand); border-radius: var(--r); background: var(--paneel); text-align: left;
}
.rij-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; white-space: nowrap; }
.rij-menu button:hover { background: var(--bg-hover); }
.rij-menu .is-gevaar { color: var(--err); }
.tabel tr.is-ingetrokken td { color: var(--ink-faint); }
.tabel td.menu-cel { width: 56px; overflow: visible; text-align: right; }
.tabel--rustig tbody tr { cursor: default; }
.waarschuwing-regel { display: flex; align-items: flex-start; margin-top: 12px; color: var(--ink); font-size: var(--t-klein); }
.waarschuwing-regel .stip { flex: none; margin: 5px 10px 0 0; }
.hulp-pagina { max-width: 640px; }
.hulp-pagina h2 { margin: 28px 0 6px; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; }
.hulp-pagina h2:first-child { margin-top: 0; }
.hulp-pagina p { margin: 0; color: var(--ink-muted); }
.hulp-pagina .knoppenrij { margin-top: 32px; }
.onderwerp-knoppen { display: flex; flex-wrap: wrap; margin-top: 8px; }
.onderwerp-knoppen .knop { margin: 0 6px 6px 0; }
.accountblok { max-width: 640px; }

/* --- Akari-omgeving ------------------------------------------------------------------ */
.filters { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filters .segment { margin-right: 12px; }
.klantcel small { display: block; color: var(--ink-faint); font-size: var(--t-label); }
.soortwoord { display: inline-flex; align-items: center; }
.soortwoord .stip { margin-right: 8px; }
.stip--proef { background: var(--brand-tekst); }
.amber { color: var(--warn); }
.rood { color: var(--err); }
.placeholder-blok { max-width: 640px; padding: 24px; border: 1px dashed var(--line-sterk); border-radius: var(--r); color: var(--ink-muted); }
.placeholder-blok b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.klantkop-acties { display: flex; flex-wrap: wrap; }
.klantkop-acties .knop { margin: 0 8px 8px 0; }
.inzetrij--acties { grid-template-columns: minmax(0, 1fr) 150px 110px 250px; }
.inzetrij--acties:hover { background: transparent; }
.inzetrij__link { display: grid; grid-template-columns: 45px minmax(0, 1fr); grid-column-gap: 20px; align-items: center; color: var(--ink); border-radius: var(--r); }
.inzetrij__link:hover { text-decoration: none; }
.inzetrij__link:hover .inzetrij__naam { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-sterk); }
.inzetrij__acties { display: flex; justify-content: flex-end; }
.veldgroep { padding: 18px 8px 8px; border-bottom: var(--rand); font-size: var(--t-label); line-height: var(--lh-label); font-weight: 500; color: var(--ink-faint); list-style: none; }
.veldlijst > .veldgroep:first-child { padding-top: 8px; }
.bp-schakels + .bp-schakels { margin-top: 12px; }
.bewerk__rechts .veldkop { margin-top: 4px; }
.scherm-akari__knoppen { margin-top: 16px; }
.dialoog__vv { display: flex; justify-content: center; margin-top: 16px; }
.bewerk__links .stappen { flex-wrap: wrap; }
.bewerk__links .stappen button { flex: 1 0 auto; white-space: nowrap; padding: 0 8px; }


/* ==========================================================================
   Dashboard Akari Displays, de Akari-kant (rol akari-beheerder)
   Kiosk-designer, 12 oktober 2026. Hoort bij akari.js; zie ONTWERP.md hoofdstuk 18.
   Zelfde taal als de klantkant: platte rijen met haarlijnen, één radius, één
   accent, status als stip en woord. Geen kaartjes, geen schaduwen.
   ========================================================================== */

/* --- Vier getallen boven het overzicht: klein genoeg om rustig te blijven --- */
.akari-getallen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 40px; border-top: var(--rand); border-bottom: var(--rand); }
.akari-getal { padding: 14px 20px 14px 0; }
.akari-getal + .akari-getal { padding-left: 20px; border-left: var(--rand); }
.akari-getal b { display: block; font-size: var(--t-titel); line-height: var(--lh-titel); font-weight: 600; letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
.akari-getal span { display: block; margin-top: 2px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }

/* --- Twee kolommen: links wat aandacht vraagt, rechts het systeem ------------ */
.akari-twee { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-column-gap: 56px; align-items: start; margin-bottom: 48px; }
.akari-twee--gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.aandacht { list-style: none; margin: 0; padding: 0; border-top: var(--rand); }
.aandacht li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; grid-column-gap: 14px; align-items: start; padding: 14px 0; border-bottom: var(--rand); }
.aandacht .stip { margin-top: 6px; }
.aandacht b { display: block; font-weight: 500; }
.aandacht b a { color: var(--ink); }
.aandacht p { margin: 2px 0 0; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.aandacht .knop { margin-left: 16px; }
.aandacht__rust { margin: 0; padding: 14px 0; border-bottom: var(--rand); color: var(--ink-muted); }

span.hulp { display: block; }

/* --- Filters boven een tabel -------------------------------------------------- */
.filterbalk { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.filterbalk__links, .filterbalk__rechts { display: flex; align-items: center; }
.filterbalk__links > * + *, .filterbalk__rechts > * + * { margin-left: 12px; }
.filterbalk select {
  height: var(--veld-h); padding: 0 10px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--bg-raised); color: var(--ink); font: inherit;
}
.filterbalk select:focus { outline: none; border-color: var(--line-sterk); }
.segment--filter button { height: 30px; padding: 0 12px; font-size: var(--t-klein); }
.segment--filter .zb-teller { margin-left: 6px; }

/* --- Tabellen met twee regels per cel ---------------------------------------- */
.tabel--ruim td { height: 60px; }
.tabel--ruim td.cel { white-space: nowrap; }
.cel b { display: block; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.cel span { display: block; margin-top: 2px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; }
.cel--status { display: flex; align-items: center; }
.cel--status .stip { margin-right: 8px; }
.tabel td.rechts, .tabel th.rechts { text-align: right; }
.tabel td.knoppen { width: 1%; text-align: right; }
.tabel td.knoppen .knop + .knop { margin-left: 4px; }
.tabel tr.is-grijs td { color: var(--ink-faint); }
.tabel tr.is-grijs .cel b { color: var(--ink-muted); }
.tabel--stil tbody tr { cursor: default; }
.tabel--stil tbody tr:hover { background: transparent; }
.tabel--stil tbody tr:nth-child(even):hover { background: var(--bg-rij); }
.warn-tekst, .cel .warn-tekst { color: var(--warn); }
.cel .err-tekst { color: var(--err); }
.gedempt, .cel .gedempt { color: var(--ink-muted); }
.err-tekst { color: var(--err); }
.ok-tekst { color: var(--ok); }
.ster { margin-left: 2px; font-style: normal; color: var(--warn); font-weight: 600; }
.cel b.cel--status { display: flex; align-items: center; }
.tabel--klanten { table-layout: fixed; }
.tabel--klanten td { max-width: none; }
.tabel--klanten td.cel--pakket { white-space: normal; }
.akari-twee > .blok + .blok { margin-top: 0; }

/* --- Klantpagina --------------------------------------------------------------- */
.blok + .blok { margin-top: 44px; }
.blok > p.blok__zin { margin: -4px 0 16px; color: var(--ink-muted); }
.gebruik { list-style: none; margin: 0; padding: 0; border-top: var(--rand); }
.gebruik li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 120px; grid-column-gap: 16px; align-items: center; padding: 12px 0; border-bottom: var(--rand); }
.gebruik li > span:first-child { color: var(--ink-muted); }
.gebruik .balk { width: 100%; margin: 0; }
.gebruik .balk.is-vol i { background: var(--warn); }
.gebruik li > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.knoppenrij { display: flex; flex-wrap: wrap; margin-top: 16px; }
.knoppenrij .knop { margin: 0 8px 8px 0; }
.regel-schakel { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: var(--rand); }
.regel-schakel p { margin: 2px 0 0; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.regel-schakel .schakel { width: auto; flex: none; margin-left: 24px; }

/* Schermen van een klant: naam en status, het adres met kopiëren, de QR. */
.schermlijst { list-style: none; margin: 0; padding: 0; border-top: var(--rand); }
.schermlijst > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 96px; grid-column-gap: 28px; align-items: start; padding: 20px 0; border-bottom: var(--rand); }
.schermlijst h3 { display: flex; align-items: center; margin: 0; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.schermlijst h3 svg { width: 20px; height: 20px; margin-right: 10px; color: var(--ink-muted); }
.schermlijst p { margin: 4px 0 0; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.schermlijst p .stip { margin-right: 8px; }
.schermlijst .qr-klein { width: 96px; height: 96px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--qr-rand); }

/* Een keuze uit drie pakketten in de dialoog en op het tabblad Pakket. */
.pakketkeuze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 10px; margin-top: 6px; }
.pakketkeuze .keuze span { line-height: 16px; }

/* Het ene moment dat iets eenmalig is: de sleutel van een scherm, een token. */
.eenmalig { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line-sterk); border-radius: var(--r); background: var(--veld-in-paneel); }
.eenmalig code { display: block; font-family: var(--font); font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.eenmalig__zin { display: flex; align-items: flex-start; margin: 12px 0 0; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink); }
.eenmalig__zin .stip { flex: none; margin: 5px 8px 0 0; }
.eenmalig__qr { display: flex; align-items: center; margin-top: 14px; }
.eenmalig__qr img { width: 96px; height: 96px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--qr-rand); }
.eenmalig__qr p { margin: 0 0 0 14px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }

/* --- Pakketten: een tabel met velden ----------------------------------------- */
.pakkettabel { width: 100%; max-width: 980px; border-collapse: collapse; }
.pakkettabel th, .pakkettabel td { padding: 12px 16px 12px 0; border-bottom: var(--rand); text-align: left; vertical-align: middle; }
.pakkettabel thead th { padding-top: 0; font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: var(--tr-kop); }
.pakkettabel thead th span { display: block; margin-top: 2px; font-size: var(--t-klein); line-height: var(--lh-klein); font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }
.pakkettabel tbody th { width: 200px; font-weight: 400; color: var(--ink-muted); }
.pakkettabel input, .pakkettabel select {
  height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--bg-raised); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums;
}
.pakkettabel input { width: 96px; }
.pakkettabel input.breed { width: 128px; }
.pakkettabel input:focus, .pakkettabel select:focus { outline: none; border-color: var(--line-sterk); }
.pakkettabel .eenheid { margin-left: 8px; color: var(--ink-muted); font-size: var(--t-klein); }
.pakkettabel .types { font-size: var(--t-klein); line-height: var(--lh-klein); }
.pakkettabel .types span { display: block; }
.pakkettabel .types span.is-uit { color: var(--ink-faint); text-decoration: line-through; }

/* --- Claude-toegang: de uitleg in gewone taal -------------------------------- */
.uitleg-stappen { margin: 0; padding: 0; list-style: none; counter-reset: stap; }
.uitleg-stappen li { position: relative; padding: 0 0 14px 34px; counter-increment: stap; }
.uitleg-stappen li::before {
  content: counter(stap); position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%;
  border: var(--rand-sterk); font-size: var(--t-label); line-height: 20px; font-weight: 600; text-align: center; color: var(--ink-muted);
}
.uitleg-stappen .url { margin-top: 8px; }
.kader-zin { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r); background: var(--bg-raised); font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }
.kader-zin b { color: var(--ink); font-weight: 500; }
.rechten { list-style: none; margin: 8px 0 0; padding: 0; }
.rechten li { padding: 10px 0; border-top: var(--rand); }
.rechten li:last-child { border-bottom: var(--rand); }
.rechten .vinkregel { margin-top: 0; color: var(--ink); }
.rechten p { margin: 4px 0 0 26px; font-size: var(--t-klein); line-height: var(--lh-klein); color: var(--ink-muted); }

/* --- Team: per medewerker de klanten met twee schakelaars --------------------- */
.klantvink { list-style: none; margin: 16px 0 0; padding: 0; border-top: var(--rand); }
.klantvink li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-column-gap: 16px; align-items: center; padding: 10px 0; border-bottom: var(--rand); }
.klantvink .schakel { width: auto; }
.klantvink__kop { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-column-gap: 16px; margin-top: 20px; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-faint); }

/* --- Hulp ------------------------------------------------------------------------ */
.hulp-tekst { max-width: 600px; }
.hulp-tekst h2 { margin: 0 0 12px; font-size: var(--t-titel); line-height: var(--lh-titel); font-weight: 600; letter-spacing: var(--tr-tight); }
.hulp-tekst p { margin: 0 0 16px; }
.hulp-tekst p b { font-weight: 600; }
.hulp-knoppen { display: flex; margin-top: 24px; }
.hulp-knoppen .knop + .knop { margin-left: 8px; }
.hulp-knoppen .knop svg { width: 18px; height: 18px; }
.hulp-knoppen .knop svg + span { margin-left: 8px; }
.tabel td.wat { max-width: 380px; white-space: normal; }

/* --- De echte Akari-omgeving: kleine aanvullingen op akari.css ------------------- */
.tabel tr[data-href] { cursor: pointer; }
.eenmalig code { display: block; margin: 8px 0; padding: 10px 12px; border-radius: var(--r); background: var(--bg-sunken); overflow-wrap: anywhere; font-size: var(--t-klein); }
.stijlkeuze__scherm .toestel--mini { padding: 0; border: 0; border-radius: 0; background: transparent; }
.stijlkeuze__scherm .toestel--mini .toestel__scherm { width: 120px; height: 213px; }
.stijlkeuze[disabled] { cursor: default; }