/* Beheer v5 (ontwerp, 25 sep 2026). Basis = v3 beheer.css ongewijzigd: zelfde kleuren, groen, balkjes, kaarten en
   beweging. Daarna uit v4 alleen de preview van stukken en de runnerkaart, en onderaan de toevoegingen voor v5. */
:root {
  --oranje: #f26419;
  --oranje-zacht: rgba(242, 100, 25, .13);
  --groen: #5fd48a;
  --groen-donker: #2f9e5b;
  --blauw: #6ea3ff;
  --rood: #ff6b6b;
  --rood-beheer: #d64545;
  --geel: #f5c542;

  /* klant (donker) */
  --k-bg: #0b0d0f;
  --k-vlak: #13161a;
  --k-vlak2: #1a1e23;
  --k-rand: #23262b;
  --k-rand-fel: #33373d;
  --k-tekst: #ffffff;
  --k-zacht: #a3a6ac;
  --k-flauw: #8a8d93;

  /* beheer (licht) */
  --b-bg: #fafafa;
  --b-vlak: #ffffff;
  --b-rand: #e6e7e9;
  --b-verhoogd: #f4f4f5;
  --b-kop: #0b0d0f;
  --b-tekst: #55585f;
  --b-flauw: #8a8d93;
  --b-dim: #5a5e66;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Poppins", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea, select { font-family: inherit; }

.logo { font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.logo i { color: var(--oranje); font-style: italic; }

/* ── Ontwerpnotities: geel gestippeld, nooit onderdeel van het product ─────── */
.notitie {
  border: 1.5px dashed #c9a227; background: #fff8dc; color: #5b4a00;
  border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5; margin: 14px 0;
}
.notitie b { color: #3d3200; }

.voorbeeldbalk {
  position: sticky; top: 0; z-index: 50; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 8px 16px; background: #1d1d1f; color: #eee; font-size: 12px;
}
.voorbeeldbalk a { color: #fff; text-decoration: none; padding: 4px 10px; border-radius: 999px; background: #333; }
.voorbeeldbalk a.actief { background: var(--oranje); }
.voorbeeldbalk span { opacity: .7; margin-right: 6px; }

.paneel { display: none; }
.paneel.actief { display: block; }
/* ═════════════════════════ BEHEER (licht) ═════════════════════════ */
body.beheer { background: var(--b-bg); color: var(--b-tekst); font-size: 14px; }
.b-app { display: flex; min-height: 100vh; }
.b-zij { width: 220px; flex: 0 0 220px; background: var(--b-vlak); border-right: 1px solid var(--b-rand); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; }
.b-zij .logo { font-size: 17px; color: var(--b-kop); padding: 0 8px 16px; }
.b-zij a { display: flex; justify-content: space-between; text-decoration: none; padding: 7px 10px; border-radius: 8px; color: var(--b-kop); font-size: 13px; }
.b-zij a:hover { background: var(--b-verhoogd); }
.b-zij a.actief { background: var(--b-verhoogd); font-weight: 600; }
.b-zij a small { color: var(--b-flauw); }
.b-zij .sectie { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--b-flauw); padding: 14px 10px 6px; }
.b-zij .onder { margin-top: auto; font-size: 12px; color: var(--b-flauw); padding: 8px 10px; }
.b-hoofd { flex: 1; min-width: 0; }
.b-kopbalk { background: var(--b-vlak); border-bottom: 1px solid var(--b-rand); padding: 16px 24px 0; }
.b-kopbalk .rij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b-kopbalk h1 { font-size: 20px; font-weight: 600; color: var(--b-kop); margin: 0; }
.b-kopbalk .ruimte { flex: 1; }
.b-tabs { display: flex; gap: 2px; margin-top: 12px; overflow-x: auto; }
.b-tabs button, .b-tabs a { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font-size: 14px; color: var(--b-dim); cursor: pointer; text-decoration: none; white-space: nowrap; }
.b-tabs .actief { border-bottom-color: var(--oranje); color: var(--b-kop); font-weight: 600; }
.b-tabs .alleen-beheer { color: #8a5cd6; }
.b-inhoud { padding: 20px 24px 80px; }
.b-kaart { background: var(--b-vlak); border: 1px solid var(--b-rand); border-radius: 12px; }
.b-knop { border: 1px solid var(--b-rand); background: var(--b-vlak); color: var(--b-kop); border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.b-knop.oranje { background: var(--oranje); border-color: var(--oranje); color: #fff; font-weight: 600; }
.b-knop.groen { background: var(--groen-donker); border-color: var(--groen-donker); color: #fff; font-weight: 600; }
.b-knop.rood { color: var(--rood-beheer); border-color: #f0c4c4; }
.b-knop.klein { padding: 4px 9px; font-size: 12px; }
.uitlog { font-size: 12px; color: var(--b-flauw); background: none; border: 0; cursor: pointer; }

/* strook wacht op jou */
.strook { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.strook a { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 10px; background: var(--b-vlak); border: 1px solid var(--b-rand); font-size: 13px; color: var(--b-kop); }
.strook a b { font-size: 16px; }
.strook a.alarm { border-color: #f0c4c4; background: #fff5f5; color: var(--rood-beheer); }
.strook .titel { font-weight: 600; color: var(--b-kop); align-self: center; margin-right: 4px; }

/* overzichtstabel (Astra) */
.ov-scroll { overflow-x: auto; }
table.ov { border-collapse: collapse; width: 100%; min-width: 1320px; font-size: 13px; }
.ov th { font-weight: 500; font-size: 12px; color: var(--b-flauw); text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--b-rand); white-space: nowrap; position: sticky; top: 0; background: var(--b-vlak); }
.ov td { padding: 12px 8px; border-bottom: 1px solid var(--b-rand); vertical-align: middle; white-space: nowrap; }
.ov tr.klik { cursor: pointer; }
.ov tr.klik:hover td { background: #f7f7f8; }
.ov .nr { color: var(--b-flauw); width: 28px; }
.ov .klant b { color: var(--b-kop); display: block; font-weight: 600; }
.ov .klant small { color: var(--b-flauw); }
.ov .dag { color: var(--oranje); font-weight: 600; }
.nietgezet { display: inline-block; border: 1.5px solid var(--rood-beheer); color: var(--rood-beheer); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.eig { width: 26px; height: 26px; border-radius: 50%; background: var(--oranje); color: #fff; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; }
.agentbol { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--b-dim); }
.agentbol i { width: 9px; height: 9px; border-radius: 50%; background: #c9cbd0; }
.agentbol.aan i { background: var(--groen-donker); box-shadow: 0 0 0 3px #2f9e5b22; }
.agentbol.pauze i { background: var(--geel); }
.slot { font-size: 12px; color: var(--b-dim); }
.voortgang { width: 66px; }
.voortgang .getal { font-size: 11px; color: var(--b-dim); margin-bottom: 4px; display: flex; justify-content: space-between; }
.voortgang .spoor { height: 4px; border-radius: 4px; background: #eceef0; overflow: hidden; }
.voortgang .spoor i { display: block; height: 100%; border-radius: 4px; }
.voortgang.groen .spoor i { background: #2f9e5b; }
.voortgang.oranje .spoor i { background: var(--oranje); }
.voortgang.rood { outline: 1.5px solid var(--rood-beheer); outline-offset: 4px; border-radius: 3px; }
.voortgang.rood .spoor i { background: var(--rood-beheer); }
.voortgang.leeg .getal { color: #c0c2c6; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--b-flauw); margin: 12px 0 0; align-items: center; }
.legenda .voortgang { display: inline-block; vertical-align: middle; margin-right: 6px; }
.legenda .spoor { display: block; }

/* overzicht op telefoon: kaarten */
.ov-kaarten { display: none; }

/* klantdetail */
.fasekaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.fasekaart { padding: 12px; border-radius: 12px; background: var(--b-vlak); border: 1px solid var(--b-rand); }
.fasekaart .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--b-verhoogd); color: var(--b-kop); font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.fasekaart .naam { font-weight: 600; color: var(--b-kop); font-size: 13px; }
.fasekaart .xy { font-size: 12px; color: var(--b-flauw); margin: 2px 0 8px; }
.fasekaart.rood { border: 1.5px solid var(--rood-beheer); background: #fffafa; }
.fasekaart .blokkade { font-size: 11px; color: var(--rood-beheer); margin-top: 8px; line-height: 1.4; }
.fasekaart .voortgang { width: 100%; }
.twee-kol { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.blok { padding: 16px 18px; }
.blok h2 { font-size: 15px; margin: 0 0 4px; color: var(--b-kop); display: flex; align-items: center; gap: 8px; }
.blok .uitleg { font-size: 12.5px; color: var(--b-flauw); margin: 0 0 12px; line-height: 1.5; }
.agentrij { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 7px 0; border-top: 1px solid var(--b-rand); font-size: 13px; }
.stat { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.stat.bezig { background: #3b6fd41a; color: #3b6fd4; }
.stat.review { background: #f264191a; color: #c24f12; }
.stat.geblokkeerd { background: #d645451a; color: var(--rood-beheer); }
.stat.verhaal { background: #8a5cd61a; color: #6b3fbf; }
.stat.niets { background: var(--b-verhoogd); color: var(--b-flauw); }
.stat.klaar { background: #2f9e5b1a; color: var(--groen-donker); }
.stat.open { background: var(--b-verhoogd); color: var(--b-dim); }
.stat.wacht { background: #f264191a; color: #c24f12; }
.schakel { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--b-kop); cursor: pointer; }
.schakel i { width: 36px; height: 20px; border-radius: 999px; background: #d6d8dc; position: relative; flex: 0 0 36px; }
.schakel i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0003; }
.schakel.aan i { background: var(--groen-donker); }
.schakel.aan i::after { left: 18px; }
.persoon { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--b-rand); }
.persoon b { color: var(--b-kop); font-weight: 600; }
.persoon small { display: block; color: var(--b-flauw); font-size: 12px; }
.persoon .knoppen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.toevoegen { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 12px; }
.toevoegen input, .b-veld { border: 1px solid var(--b-rand); border-radius: 8px; padding: 8px 10px; font-size: 13px; width: 100%; background: #fff; }
.gele-kaart { background: #fffbea; border: 1px solid #f1d98a; border-radius: 12px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.gele-kaart .tekst { flex: 1; min-width: 240px; color: #5b4a00; font-size: 13px; }
.gele-kaart .tekst b { color: #3d3200; }
.stappen { margin-top: 16px; }
.stap-groep { padding: 10px 16px; font-weight: 600; color: var(--b-kop); background: #f7f7f8; border-bottom: 1px solid var(--b-rand); display: flex; justify-content: space-between; font-size: 13px; }
.stap { display: grid; grid-template-columns: minmax(0,1fr) 90px 70px 96px auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--b-rand); font-size: 13px; }
.stap .titel { color: var(--b-kop); }
.stap .sop { font-size: 11px; color: var(--oranje); text-decoration: none; margin-left: 6px; }
.stap .wie { font-size: 12px; color: var(--b-flauw); }
.stap .dl { font-size: 12px; color: var(--b-dim); }
.stap .dl.over { color: var(--rood-beheer); font-weight: 600; }

/* beheer: resultaten, stukken, onderzoek */
.b-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.b-tegel { padding: 14px; border-radius: 12px; background: var(--b-vlak); border: 1px solid var(--b-rand); }
.b-tegel .naam { font-size: 12px; color: var(--b-flauw); }
.b-tegel .waarde { font-size: 22px; font-weight: 700; color: var(--b-kop); margin: 4px 0 2px; }
.b-tegel .onder { font-size: 11px; color: var(--b-flauw); }
table.b-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.b-tabel th { text-align: left; font-weight: 500; color: var(--b-flauw); padding: 9px 10px; border-bottom: 1px solid var(--b-rand); white-space: nowrap; font-size: 12px; }
.b-tabel td { padding: 9px 10px; border-bottom: 1px solid var(--b-rand); white-space: nowrap; }
.b-tabel .getal { text-align: right; }
.hoeken { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hoek { padding: 14px; border-radius: 12px; background: var(--b-vlak); border: 1px solid var(--b-rand); }
.hoek h3 { margin: 0 0 4px; font-size: 14px; color: var(--b-kop); }
.hoek p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.thumbs i { aspect-ratio: 4/5; border-radius: 6px; background: linear-gradient(160deg, #e9eaec, #d7d9dd); display: block; }
.hoek.weg { opacity: .55; }
.hoek.weg h3 { text-decoration: line-through; }

.sectiekop { font-size: 13px; font-weight: 600; color: var(--b-kop); margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  .b-app { display: block; }
  .b-zij { width: auto; flex: none; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--b-rand); padding: 10px 12px; align-items: center; gap: 6px; }
  .b-zij .logo { padding: 0 10px 0 0; }
  .b-zij .sectie, .b-zij .onder, .b-zij .alleen-desk { display: none; }
  .b-zij a { white-space: nowrap; gap: 6px; }
  .b-kopbalk { padding: 12px 16px 0; }
  .b-inhoud { padding: 16px 16px 80px; }
  .ov-scroll { display: none; }
  .ov-kaarten { display: grid; gap: 10px; }
  .ov-kaart { padding: 14px; }
  .ov-kaart .boven { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
  .ov-kaart .boven b { color: var(--b-kop); font-size: 15px; }
  .ov-kaart .boven small { display: block; color: var(--b-flauw); }
  .ov-kaart .feiten { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-bottom: 12px; align-items: center; }
  .ov-kaart .raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; }
  .ov-kaart .raster .voortgang { width: 100%; }
  .ov-kaart .raster .fnaam { font-size: 11px; color: var(--b-dim); margin-bottom: 2px; }
  .twee-kol { grid-template-columns: 1fr; }
  .stap { grid-template-columns: minmax(0,1fr) auto; }
  .stap .wie, .stap .dl { display: none; }
  .toevoegen { grid-template-columns: 1fr; }
}

/* ═══════════════════════ V3: toevoegingen op A + B ═══════════════════════ */
body.beheer { overflow-x: hidden; }
.b-zij a.logo { display: block; padding: 0 8px 16px; font-size: 17px; color: var(--b-kop); background: none; }
.b-zij a small.tel { font-variant-numeric: tabular-nums; }
.agentteller { display: flex; justify-content: space-between; padding: 7px 10px; margin-top: 10px; font-size: 13px; color: var(--b-kop); border-top: 1px solid var(--b-rand); padding-top: 12px; }
.agentteller small { color: var(--b-flauw); }
.datumregel { font-size: 12px; color: var(--b-flauw); }
.punt { color: #c0c2c6; }
.flauw { color: var(--b-flauw); font-size: 12px; }

/* strook: lijstje onder een teller */
.strook a { line-height: 20px; }
.strook a b { line-height: 20px; }
.strook a .pijl { width: 10px; height: 6px; fill: none; stroke: var(--b-flauw); stroke-width: 1.5; margin-left: -2px; }
.strook a[aria-expanded="true"] .pijl { transform: rotate(180deg); }
.strook a[aria-expanded="true"] { border-color: var(--b-kop); }
.strook .leegtekst { font-size: 13px; color: var(--b-flauw); align-self: center; }
.strook-lijst { margin: -6px 0 16px; padding: 4px 0; max-width: 560px; }
.strook-lijst a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 13px; color: var(--b-kop); text-decoration: none; border-top: 1px solid var(--b-rand); }
.strook-lijst a:first-child { border-top: 0; }
.strook-lijst a:hover { background: #f7f7f8; }
.strook-lijst a span { color: var(--oranje); font-size: 12px; font-weight: 600; }

/* overzichtstabel: past zonder scrollen */
table.ov { min-width: 0; }
.ov th, .ov td { padding-left: 6px; padding-right: 6px; }
.ov th:first-child, .ov td:first-child { padding-left: 14px; }
.ov th:last-child, .ov td:last-child { padding-right: 14px; }
.ov th { font-size: 11.5px; }
.ov .voortgang { width: 56px; }
.ov td.start .dag { display: block; font-size: 12px; margin-top: 1px; }
.ov .klant small { white-space: nowrap; }
.b-zij a { align-items: center; }
.ov td.klant { white-space: normal; }
.ov .klant small { display: block; font-size: 12px; }
.ov tr.klik td .voortgang { cursor: pointer; }
.geenrecord { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.geenrecord span { font-size: 12px; color: var(--b-flauw); white-space: normal; }
.legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.legenda .voortgang { width: 44px; margin-right: 0; }
.legenda .voortgang.rood { outline-offset: 3px; }

/* kaarten (telefoon en smal scherm) */
.ov-kaarten { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.ov-kaart { padding: 14px; text-decoration: none; display: block; }
.ov-kaart .boven { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.ov-kaart .boven b { color: var(--b-kop); font-size: 15px; }
.ov-kaart .boven small { display: block; color: var(--b-flauw); font-size: 12px; }
.ov-kaart .boven .dag { color: var(--oranje); font-weight: 600; font-size: 12px; line-height: 22px; }
.ov-kaart .feiten { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-bottom: 12px; align-items: center; }
.ov-kaart .raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.ov-kaart .raster .voortgang { width: 100%; }
.ov-kaart .raster .fnaam { font-size: 11px; color: var(--b-dim); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-kaart .raster .geenrecord { grid-column: 1 / -1; }
@media (max-width: 1379px) {
  .ov-scroll { display: none; }
  .ov-kaarten { display: grid; }
}

/* segmentknoppen en filters */
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--b-rand); background: var(--b-vlak); border-radius: 10px; }
.seg button { border: 0; background: none; border-radius: 7px; padding: 5px 12px; font-size: 13px; line-height: 18px; color: var(--b-dim); cursor: pointer; }
.seg button:hover { background: var(--b-verhoogd); }
.seg button.aan { background: var(--b-kop); color: #fff; font-weight: 600; }
.seg.klein { vertical-align: middle; margin: 0 4px; background: #fff; }
.seg.klein button { padding: 2px 10px; font-size: 12px; }
.filterbalk { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filter { display: inline-flex; align-items: center; gap: 8px; }
.filter span { font-size: 12px; color: var(--b-flauw); }
.filter select { border: 1px solid var(--b-rand); border-radius: 8px; padding: 6px 28px 6px 10px; font-size: 13px; line-height: 18px; color: var(--b-kop); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8d93' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.filterbalk .aantal { margin-left: auto; font-size: 12px; color: var(--b-flauw); }

/* klantlabel */
.ktag { display: inline-block; min-width: 22px; text-align: center; font-size: 10px; font-weight: 600; line-height: 16px; padding: 0 4px; border-radius: 4px; background: var(--b-verhoogd); color: var(--b-dim); margin-right: 6px; vertical-align: 1px; }

/* lijst en stappen: zelfde kolommen */
.lrij, .stap { display: grid; grid-template-columns: minmax(0, 1fr) 84px 92px 104px 250px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--b-rand); font-size: 13px; }
.lrij:last-child, .stap:last-child { border-bottom: 0; }
.lrij.kop { font-size: 12px; color: var(--b-flauw); padding-top: 9px; padding-bottom: 9px; }
.lrij.klik { cursor: pointer; }
.lrij.klik:hover { background: #f7f7f8; }
.lrij .titel b { display: block; color: var(--b-kop); font-weight: 500; }
.lrij .titel small, .stap .titel small { display: block; font-size: 12px; color: var(--b-flauw); margin-top: 2px; }
.stap .titel small.rood { color: var(--rood-beheer); }
.lrij .wie, .stap .wie { font-size: 12px; color: var(--b-flauw); }
.dl { font-size: 12px; color: var(--b-dim); }
.dl.over { color: var(--rood-beheer); font-weight: 600; }
.dl.nu { color: var(--oranje); font-weight: 600; }
.actie { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.stuklink { font-size: 12px; color: var(--oranje); text-decoration: none; font-weight: 500; white-space: nowrap; }
.is-klaar .titel, .is-klaar .titel b { color: var(--b-flauw); }
.leeg-rij { padding: 22px 16px; text-align: center; color: var(--b-flauw); font-size: 13px; }
.ronde { font-size: 11px; color: var(--b-dim); background: var(--b-verhoogd); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.stap .sop { margin-left: 6px; }

/* stappen per fase, inklapbaar */
.stap-groep { width: 100%; border: 0; border-bottom: 1px solid var(--b-rand); cursor: pointer; text-align: left; font-family: inherit; align-items: center; }
.stap-groep:hover { background: #f1f1f3; }
.stap-groep > span { display: inline-flex; align-items: center; }
.stap-groep .chev { display: inline-block; width: 14px; margin-right: 6px; color: var(--b-flauw); transition: transform .15s; text-align: center; }
.stap-groep.open .chev { transform: rotate(90deg); }
.stap-groep .xy { color: var(--b-flauw); font-weight: 500; }
.stappen { overflow: hidden; }
.stappen > .stap-groep:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }

/* bord */
.bord { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.bkol { background: var(--b-verhoogd); border-radius: 12px; padding: 8px; }
.bkop { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; font-size: 13px; font-weight: 600; color: var(--b-kop); }
.bkop .tel { min-width: 24px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--b-vlak); border: 1px solid var(--b-rand); display: inline-grid; place-items: center; font-size: 11px; line-height: 1; color: var(--b-dim); font-variant-numeric: tabular-nums; }
.bkol-review .bkop .tel, .bkol-bijklant .bkop .tel { color: #c24f12; }
.bkol-geblokkeerd .bkop .tel { color: var(--rood-beheer); }
.bkol-klaar .bkop .tel { color: var(--groen-donker); }
.bkaart { display: block; background: var(--b-vlak); border: 1px solid var(--b-rand); border-radius: 10px; padding: 10px; margin-bottom: 8px; text-decoration: none; }
.bkaart:hover { border-color: #cfd1d5; }
.bkaart.rood { border-color: var(--rood-beheer); background: #fffafa; }
.bkaart b { display: block; font-size: 13px; font-weight: 500; color: var(--b-kop); line-height: 1.35; }
.bkaart small { display: block; font-size: 11.5px; color: var(--b-flauw); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkaart .voet { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; }
.bkaart .voet .wie { color: var(--b-flauw); }
.bkaart .fbregel { display: block; margin-top: 8px; }
.bkol-klaar .bkaart b { color: var(--b-flauw); }
.bleeg { font-size: 12px; color: var(--b-flauw); text-align: center; padding: 12px 0 14px; }
.meer { width: 100%; background: none; border: 1px dashed #cfd1d5; border-radius: 8px; padding: 6px; font-size: 12px; color: var(--b-dim); cursor: pointer; }
.meer:hover { background: var(--b-vlak); }

/* kalender */
.kalnav { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; }
.kalnav .b-knop { min-width: 32px; text-align: center; line-height: 18px; }
.kalnav .bereik { font-size: 13px; font-weight: 600; color: var(--b-kop); margin-left: 8px; }
.kal { overflow: hidden; }
.kalkop, .kalweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalkop span { font-size: 12px; color: var(--b-flauw); padding: 8px 10px; border-bottom: 1px solid var(--b-rand); }
.kalweek { border-bottom: 1px solid var(--b-rand); }
.kalweek:last-child { border-bottom: 0; }
.kaldag { min-height: 122px; padding: 8px; border-right: 1px solid var(--b-rand); min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kaldag:last-child { border-right: 0; }
.kaldag.voorbij { background: #fcfcfc; }
.kaldag.voorbij .dnr { color: var(--b-flauw); }
.kaldag.vandaag { background: #fff8f3; box-shadow: inset 0 2px 0 var(--oranje); }
.kaldag .dnr { font-size: 12px; font-weight: 600; color: var(--b-kop); margin-bottom: 4px; line-height: 16px; }
.kaldag.vandaag .dnr { color: var(--oranje); }
.ktaak { display: flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 16px; color: var(--b-kop); text-decoration: none; min-width: 0; border-radius: 4px; padding: 1px 2px; }
.ktaak:hover { background: var(--b-verhoogd); }
.ktaak .ktag { margin-right: 0; flex: 0 0 auto; }
.ktaak > span:not(.ktag):not(.stat) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ktaak i, .kbol { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: #c0c2c6; display: inline-block; }
.s-bezig i, .kbol.s-bezig { background: #3b6fd4; }
.s-review i, .s-bijklant i, .kbol.s-review { background: var(--oranje); }
.s-rood i, .s-geblokkeerd i, .kbol.s-rood { background: var(--rood-beheer); }
.s-klaar i, .kbol.s-klaar { background: var(--groen-donker); }
.ktaak.s-klaar > span:not(.ktag) { color: var(--b-flauw); text-decoration: line-through; }
.kwebinar { display: block; background: var(--oranje); color: #fff; border-radius: 6px; padding: 4px 8px; font-size: 11.5px; line-height: 15px; text-decoration: none; margin-bottom: 2px; }
.kwebinar b { font-weight: 700; display: block; }
.kwebinar span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adag .kwebinar b, .adag .kwebinar span { display: inline; }
.adag .kwebinar b { margin-right: 6px; }
.kwebinar.mini { display: inline-block; padding: 0 6px; margin: 0; line-height: 16px; }
.kaldag .meer { padding: 2px; font-size: 11px; margin-top: 2px; }
.agenda { display: none; }

/* klantdetail */
.terug { font-size: 12px; color: var(--b-flauw); text-decoration: none; }
.kopklant { margin-top: 6px; }
.kopklant .pil-datum { cursor: default; font-weight: 600; }
.kickoff { font-size: 12px; color: var(--b-dim); }
.klantzicht { font-size: 12px; color: var(--oranje); text-decoration: none; }
.kopklant .meta { font-size: 12px; color: var(--b-flauw); }
a.fasekaart { display: block; text-decoration: none; color: inherit; }
a.fasekaart:hover { border-color: #cfd1d5; }
a.fasekaart.rood:hover { border-color: var(--rood-beheer); }
.agentseg { margin-bottom: 12px; }
.agentrij { align-items: center; }
.agentrij b { display: block; font-weight: 500; color: var(--b-kop); }
.agentrij small { display: block; font-size: 11.5px; color: var(--b-flauw); }
.agentrij .stat { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.blok .uitleg.klein { margin: 6px 0 4px; }
.gloed { animation: gloed 2.4s ease-out 1; }
@keyframes gloed { 0%, 40% { box-shadow: inset 0 0 0 2px var(--oranje); background: #fff8f3; } 100% { box-shadow: inset 0 0 0 2px transparent; } }
.inleiding { margin: 0 0 12px; font-size: 13px; }
.voetuitleg { font-size: 12px; color: var(--b-flauw); margin-top: 10px; }
.leegklant { max-width: 560px; }

/* resultaten */
.controle.rood { border: 1.5px solid var(--rood-beheer); background: #fffafa; }
.controlekop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.controlekop > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.controlekop b { color: var(--b-kop); font-size: 15px; }
.klantziet { font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--b-verhoogd); color: var(--b-dim); }
.klantziet.ja { background: #2f9e5b14; color: var(--groen-donker); font-weight: 500; }
.crij { display: grid; grid-template-columns: 140px minmax(0, 1fr) 130px 130px 96px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--b-rand); font-size: 13px; }
.crij:last-child { border-bottom: 0; }
.crij.kop { font-size: 12px; color: var(--b-flauw); }
.crij b { color: var(--b-kop); font-weight: 500; }
.crij .getal { font-variant-numeric: tabular-nums; color: var(--b-kop); }

/* materiaal */
.mrij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--b-rand); font-size: 13px; }
.mrij:last-child { border-bottom: 0; }
.mrij.kop { font-size: 12px; color: var(--b-flauw); }
.mrij .titel b { display: block; color: var(--b-kop); font-weight: 500; }
.mrij small { display: block; font-size: 12px; color: var(--b-flauw); margin-top: 2px; }
.mrij .stand .stat { display: inline-block; }
.mrij .actie { justify-content: flex-end; }

/* melding */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--b-kop); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 10px; box-shadow: 0 10px 30px #0003; z-index: 80; max-width: calc(100vw - 32px); }
.toast[hidden] { display: none; }

@media (max-width: 1100px) {
  .bord { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lrij, .stap { grid-template-columns: minmax(0, 1fr) 84px 92px 104px; }
  .lrij .actie, .stap .actie { grid-column: 1 / -1; justify-content: flex-start; }
  .lrij .actie:empty, .stap .actie:empty { display: none; }
  .lrij.kop span:last-child { display: none; }
}

@media (max-width: 760px) {
  .b-zij { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
  .b-zij a.logo { padding: 0 8px 0 0; font-size: 16px; }
  .b-zij .agentteller { display: none; }
  .b-kopbalk .rij { gap: 8px 10px; }
  .kopklant .ruimte { display: none; }
  .kopklant .meta { flex-basis: 100%; }
  .b-tabs button, .b-tabs a { padding: 10px 10px; }
  .ov-kaarten { grid-template-columns: 1fr; }
  .filterbalk .seg { width: 100%; }
  .filterbalk .seg button { flex: 1; }
  .filterbalk .aantal { margin-left: 0; }
  .lrij.kop { display: none; }
  .lrij, .stap { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; }
  .lrij .titel, .stap .titel { grid-column: 1 / -1; }
  .lrij .wie, .stap .wie { display: block; }
  .stap .dl { display: block; }
  .bord { grid-template-columns: 1fr; }
  .kal { display: none; }
  .agenda { display: grid; gap: 10px; }
  .adag { background: var(--b-vlak); border: 1px solid var(--b-rand); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
  .adag.vandaag { border-color: var(--oranje); }
  .akop { font-size: 12px; font-weight: 600; color: var(--b-kop); margin-bottom: 4px; }
  .adag .ktaak { font-size: 13px; line-height: 20px; gap: 8px; }
  .adag .ktaak .stat { margin-left: auto; }
  .kalnav .bereik { margin-left: 4px; font-size: 12px; }
  .crij.kop { display: none; }
  .crij { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .crij > span:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--b-flauw); }
  .crij > span:nth-child(3), .crij > span:nth-child(4) { display: none; }
  .crij > span:nth-child(5) { grid-column: 2; grid-row: 1 / 3; }
  .mrij.kop { display: none; }
  .mrij { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .mrij .stand, .mrij .actie { grid-column: 1 / -1; justify-content: flex-start; }
  .mrij .actie:empty { display: none; }
  .persoon { grid-template-columns: 1fr; }
  .persoon .knoppen { justify-content: flex-start; }
  .agentrij .stat { max-width: 150px; }
}

.fasekaart .voortgang.rood { outline: none; }
.persoon .knoppen { align-items: center; }
.legenda .voortgang.rood { margin: 0 4px; }
.nietgezet { white-space: nowrap; }
@media (max-width: 760px) {
  .b-tabs { gap: 0; }
  .b-tabs button, .b-tabs a { padding: 10px 8px; font-size: 13.5px; }
  .agentrij { grid-template-columns: 1fr; gap: 4px; }
  .agentrij .stat { justify-self: start; max-width: 100%; }
}
@media (max-width: 760px) {
  .b-zij a.logo { flex-basis: 100%; padding: 2px 0 6px; }
  .b-zij { padding: 12px 16px 10px; }
  .fasekaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fasekaart { padding: 10px; }
  .fasekaart .ico { display: none; }
  .fasekaart .naam { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fasekaart .xy { margin: 0 0 6px; }
  .fasekaart .blokkade { font-size: 10.5px; margin-top: 6px; }
  .filterbalk { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .filterbalk .seg { grid-column: 1 / -1; }
  .filter span { display: none; }
  .filter, .filter select { width: 100%; }
  .filterbalk .aantal { grid-column: 1 / -1; }
  .mrij .stand { grid-column: 1; }
  .mrij .actie { grid-column: 2; align-self: start; justify-content: flex-end; }
}
@media (max-width: 760px) {
  .filterbalk { grid-template-columns: 1fr 1fr; }
}

/* ── beweging ─────────────────────────────────────────────────────────── */
:root { --zacht-uit: cubic-bezier(.22, .8, .24, 1); }
@keyframes schuif-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vervaag-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vul { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes klap { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

.komt-in .b-kopbalk { animation: vervaag-in .25s ease-out both; }
.komt-in .b-inhoud > :not(.ov-scroll):not(.stappen), .komt-in .ov-scroll, .komt-in .stappen { animation: vervaag-in .3s ease-out both; }
.komt-in :is(.strook > *, .ov tbody tr, .ov-kaart, .fasekaart, .blok, .gele-kaart, .stap-groep, .stap, .bkol, .kalweek, .b-tegel, .hoek, .b-kaart) {
  animation: schuif-in .42s var(--zacht-uit) both; animation-delay: calc(var(--i, 0) * 28ms);
}
.komt-in .spoor i { transform-origin: left center; animation: vul .7s var(--zacht-uit) both; animation-delay: calc(120ms + var(--i, 0) * 28ms); }
.komt-in tr .spoor i, .komt-in .fasekaart .spoor i { animation-delay: 160ms; }
.stap.klapt-uit { animation: klap .28s var(--zacht-uit) both; animation-delay: calc(var(--i, 0) * 22ms); }
.strook-lijst:not([hidden]) { animation: klap .2s var(--zacht-uit) both; }
.toast:not([hidden]) { animation: toast-in .28s var(--zacht-uit) both; }

.b-knop, .seg button, .b-tabs a, .b-tabs button, .b-zij a, .stuklink, .klantzicht, .ov-kaart, .bkaart, .fasekaart, .hoek, .b-tegel, .meer, .ktaak, .kwebinar, .stap, .ov tr.klik td {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .2s var(--zacht-uit), opacity .18s ease;
}
.b-knop:hover { transform: translateY(-1px); box-shadow: 0 3px 10px #0000000f; }
.b-knop:active { transform: translateY(0) scale(.98); box-shadow: none; }
.ov-kaart:hover, .bkaart:hover, .hoek:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #0000000d; }
.fasekaart { cursor: default; }
a.fasekaart:hover, .fasekaart[data-href]:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #0000000d; }
.stap:hover { background: #fafafb; }
.stap-groep:hover { background: #f1f2f4; }
.stap-groep .chev { transition: transform .22s var(--zacht-uit); }
.gloed { animation: gloed 2.4s ease-out 1, schuif-in .42s var(--zacht-uit) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

/* ═══════════════════════ uit v4: preview van stukken en runner ═══════════════════════ */
.b-kopbalk.zonder-tabs { padding-bottom: 16px; }
a.stat { text-decoration: none; display: inline-block; }
a.stat.review:hover, a.stat.wacht:hover { background: #f2641930; }
.agentbol.rood i { background: var(--rood-beheer); box-shadow: 0 0 0 3px #d6454522; }
kbd { font-family: inherit; font-size: 11px; line-height: 16px; min-width: 18px; padding: 0 4px; border: 1px solid var(--b-rand); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--b-dim); display: inline-block; text-align: center; margin: 0 2px; }
.b-knop kbd { margin-left: 6px; background: #ffffff33; border-color: #ffffff55; color: inherit; }
.b-knop.rood kbd { background: #fff; }
.fk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: 1040px; }
.fk-raster.video { grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); }
.fk-item { margin: 0; background: var(--b-vlak); border: 1px solid var(--b-rand); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.fk-item.heeft-opm { border-color: #e9c46a; }
.fk-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--b-verhoogd); }
.fk-item figcaption { font-size: 12.5px; font-weight: 500; color: var(--b-kop); padding: 0 2px; }
.speler { position: relative; display: block; padding: 0; border: 0; background: #000; border-radius: 8px; overflow: hidden; cursor: pointer; width: 100%; }
.speler img { aspect-ratio: 9 / 16; border-radius: 0; opacity: .92; }
.speler .play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #ffffffe6; box-shadow: 0 6px 20px #0004; }
.speler .play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--b-kop); }
.speler .duur { position: absolute; right: 8px; bottom: 8px; font-size: 11px; line-height: 16px; color: #fff; background: #000a; border-radius: 4px; padding: 0 6px; }
.speler:hover .play { transform: scale(1.06); }
.opm-veld textarea, .fk-afkeur textarea, .opdracht textarea { resize: vertical; font-family: inherit; line-height: 1.45; }
.opm-veld .knoppen, .fk-afkeur .knoppen, .opdracht .knoppen { display: flex; gap: 6px; flex-wrap: wrap; }
.fk-doc { max-width: 760px; padding: 6px 0; }
.fk-alinea { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; align-items: start; padding: 14px 20px; border-bottom: 1px solid var(--b-rand); }
.fk-alinea:last-child { border-bottom: 0; }
.fk-alinea.heeft-opm { background: #fffdf4; }
.fk-alinea h3 { font-size: 12px; font-weight: 600; color: var(--b-flauw); margin: 0 0 4px; text-transform: none; }
.fk-alinea p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--b-kop); }
.fk-alinea p.onderwerp { font-size: 13px; color: var(--b-dim); margin-bottom: 4px; }
.fk-alinea .opm-knop { justify-self: end; }
.fk-acties { position: sticky; bottom: 0; z-index: 5; margin: 18px -24px 0; padding: 12px 24px; background: #fafafaf2; backdrop-filter: blur(6px); border-top: 1px solid var(--b-rand); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fk-knop { display: grid; gap: 6px; align-content: start; }
.fk-knop .b-knop { justify-self: start; display: inline-flex; align-items: center; line-height: 18px; }
.fk-knop span { font-size: 12px; line-height: 1.45; color: var(--b-flauw); }
.b-knop[aria-disabled="true"] { opacity: .55; }
.fk-afkeur { grid-column: 1 / -1; display: grid; gap: 8px; max-width: 640px; }
.fk-afkeur label { font-size: 13px; color: var(--b-tekst); }
.fk-afkeur label b { color: var(--b-kop); }
.fk-leeg .b-knop { text-decoration: none; display: inline-block; }
/* Agents */
.runner.stop { border: 1.5px solid var(--rood-beheer); background: #fffafa; }
.runnerkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.runnerkop h2 .agentbol { margin-right: 2px; }
.runnerkop .uitleg { margin-bottom: 0; }
.b-knop.noodstop { background: var(--rood-beheer); border-color: var(--rood-beheer); color: #fff; font-weight: 600; }
.hoewerkt { margin: 14px 0 0; padding: 12px 0 0 20px; border-top: 1px solid var(--b-rand); font-size: 13px; line-height: 1.6; color: var(--b-tekst); display: grid; gap: 2px; }
.hoewerkt li::marker { color: var(--oranje); font-weight: 600; }
.ag-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.agkop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.agkop h2 { margin: 0; }
.agkop small { font-size: 12px; color: var(--b-flauw); white-space: nowrap; }
.ag-kaart .agentseg { margin-bottom: 8px; }
.nuhierna { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; margin: 0 0 12px; font-size: 13px; padding: 10px 0; border-top: 1px solid var(--b-rand); border-bottom: 1px solid var(--b-rand); }
.nuhierna dt { color: var(--b-flauw); font-size: 12px; line-height: 20px; }
.nuhierna dd { margin: 0; color: var(--b-kop); line-height: 20px; }
.nuhierna dd small { display: block; font-size: 12px; line-height: 18px; }
.nuhierna small.rood { color: var(--rood-beheer); }
.logrij { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 1.45; padding: 4px 0; color: var(--b-tekst); }
.logrij .tijd { color: var(--b-flauw); font-variant-numeric: tabular-nums; white-space: nowrap; }
.logrij em { font-style: normal; font-size: 11px; color: var(--b-flauw); background: var(--b-verhoogd); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.logrij.leeg { display: block; color: var(--b-flauw); }

/* ═══════════════════════ V5: toevoegingen ═══════════════════════ */
.b-zij a small.tel { min-width: 20px; text-align: center; border-radius: 999px; background: var(--b-verhoogd); padding: 0 6px; font-size: 11px; line-height: 18px; }
.b-zij a.actief small.tel { background: #fff; }

/* labels voor soort taak */
.lbl { display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; letter-spacing: .01em; }
.lbl.feedback { background: #8a5cd61f; color: #6b3fbf; }
.lbl.beslissing { background: #3b6fd41a; color: #3b6fd4; }
.lbl.porren { background: #d645451a; color: var(--rood-beheer); }
.lbl.taak { background: #2f9e5b1a; color: var(--groen-donker); }
.lbl.klant, .lbl.agent { background: var(--b-verhoogd); color: var(--b-dim); }
.lbl.groot { font-size: 12px; line-height: 22px; padding: 0 10px; margin: 0; }
.lrij.is-feedback { box-shadow: inset 3px 0 0 #8a5cd6; }
.bkaart.is-feedback { border-left: 3px solid #8a5cd6; }
.bkaart-lbl { display: block; margin-bottom: 4px; }
.s-feedback i, .kbol.s-feedback { background: #8a5cd6; }
.wtag { display: inline-block; font-size: 10.5px; line-height: 16px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--b-rand); color: var(--b-dim); background: #fff; vertical-align: 1px; white-space: nowrap; }
.wtag.algemeen { border-style: dashed; color: var(--b-flauw); }
.lrij .wie { color: var(--b-kop); }
.lrij .actie a.b-knop { text-decoration: none; display: inline-block; line-height: 18px; }
.lrij, .stap { grid-template-columns: minmax(0, 1fr) 150px 92px 112px 120px; }

/* overzicht: webinar-rijen en mijlpaal */
.ov td.golive { white-space: normal; min-width: 104px; max-width: 132px; }
.ov .mijl { display: block; font-size: 11.5px; line-height: 1.35; color: var(--b-flauw); margin-top: 2px; }
.ov tr.groep td { border-bottom: 0; padding-bottom: 4px; }
.ov .aantalw { display: inline-block !important; margin-top: 3px; font-size: 11px !important; color: var(--oranje) !important; font-weight: 600; }
.ov small.algemeen { display: block; font-size: 10.5px; color: var(--b-flauw); margin-top: 2px; }
.ov tr.wrij td { padding-top: 8px; padding-bottom: 8px; background: #fcfcfd; }
.ov tr.wrij td.wnaam { padding-left: 18px; border-left: 2px solid var(--b-rand); }
.ov tr.wrij td.wnaam b { font-weight: 500; font-size: 12.5px; }
.ov tr.wrij td.wnaam small { white-space: normal; }
.ov .leegcel { color: #c0c2c6; display: block; text-align: center; width: 56px; }
.ov td.blokker { white-space: normal; color: var(--rood-beheer); font-size: 12px; font-weight: 500; min-width: 120px; max-width: 170px; line-height: 1.4; }
.ov td.blokker small { color: var(--b-flauw); font-weight: 400; }
.ov td.blokker .flauw { font-weight: 400; }
.ov-kaart .kwebkop { font-size: 12.5px; color: var(--b-dim); margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid var(--b-rand); }
.ov-kaart .kwebkop b { color: var(--b-kop); margin-right: 4px; }
.ov-kaart .stand { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--b-rand); display: grid; gap: 4px; font-size: 12.5px; color: var(--b-kop); }
.ov-kaart .stand em { font-style: normal; color: var(--b-flauw); margin-right: 6px; }
.ov-kaart .stand .blokker { color: var(--rood-beheer); font-weight: 500; }
.ov .klant a { text-decoration: none; }
.ov .klant a:hover b { color: var(--oranje); }

/* taken: weergave */
.weergave { margin-left: 8px; }
.filterbalk .schakel { font-size: 13px; }

/* taakpagina */
.tp-kopbalk h1 { font-size: 20px; }
.tp { max-width: 1080px; }
.tp-wat { border-left: 3px solid var(--b-rand); }
.tp-wat.jij { border-left-color: var(--oranje); background: #fffaf6; }
.tp-wat-kop { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--b-flauw); font-weight: 600; margin-bottom: 4px; }
.tp-zin { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--b-kop); }
.tp-feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 14px 0; }
.tp-feiten > div { padding: 12px 16px; border-right: 1px solid var(--b-rand); min-width: 0; }
.tp-feiten > div:nth-child(4) { border-right: 0; }
.tp-feiten > div.breed { grid-column: 1 / -1; border-top: 1px solid var(--b-rand); border-right: 0; }
.tp-feiten dt { font-size: 12px; color: var(--b-flauw); margin-bottom: 2px; }
.tp-feiten dd { margin: 0; font-size: 13.5px; color: var(--b-kop); line-height: 1.5; }
.tp-feiten dd a { text-decoration: none; }
.tp-feiten dd a:hover { color: var(--oranje); }
.tp-feiten small.rood { color: var(--rood-beheer); font-weight: 600; }
.tp > .b-kaart.blok, .tp > .fk-raster, .tp > .fk-doc, .tp > .paginavoorbeeld { margin-bottom: 14px; }
.tp-stukkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tp .veranderd { margin: 12px 0 0; font-size: 13px; color: var(--b-tekst); }
.tp .veranderd b { color: var(--b-kop); }
.stapper { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 12px 0 0; counter-reset: st; }
.stapper li { position: relative; padding: 10px 12px 10px 38px; border-radius: 10px; background: var(--b-verhoogd); counter-increment: st; }
.stapper li::before { content: counter(st); position: absolute; left: 10px; top: 11px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: #fff; color: var(--b-flauw); border: 1px solid var(--b-rand); }
.stapper b { display: block; font-size: 13px; font-weight: 600; color: var(--b-dim); }
.stapper small { display: block; font-size: 11.5px; color: var(--b-flauw); }
.stapper li.gedaan::before { content: "✓"; background: var(--groen-donker); border-color: var(--groen-donker); color: #fff; }
.stapper li.nu { background: #fff4ec; box-shadow: inset 0 0 0 1.5px var(--oranje); }
.stapper li.nu::before { background: var(--oranje); border-color: var(--oranje); color: #fff; }
.stapper li.nu b { color: var(--b-kop); }
.rondes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.rondes li { display: grid; grid-template-columns: 70px 60px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--b-rand); font-size: 13px; }
.rondes li b { color: var(--b-kop); font-weight: 600; }
.rondes li span { color: var(--b-flauw); font-size: 12px; }
.rondes li p { margin: 0; grid-column: 3; grid-row: 1; }
.rondes li.nu b { color: var(--oranje); }
.tp-uitleg { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--b-kop); max-width: 720px; }
.tp-sop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.tp-sop > span { font-size: 12px; color: var(--b-flauw); margin-right: 4px; }
.tp-sop.los { margin: 0 0 14px; }
.sopchip { display: inline-block; font-size: 12px; line-height: 20px; padding: 0 9px; border-radius: 999px; border: 1px solid #f2641955; color: #c24f12; background: #fff8f3; text-decoration: none; white-space: nowrap; }
.sopchip:hover { background: var(--oranje-zacht); }
.uitleg.rood { color: var(--rood-beheer) !important; }
.citaat { margin: 6px 0 0; padding: 10px 14px; border-left: 3px solid var(--oranje); background: var(--b-verhoogd); border-radius: 0 8px 8px 0; font-size: 14px; color: var(--b-kop); }
.citaat small { display: block; font-size: 12px; color: var(--b-flauw); margin-top: 4px; }
.concept blockquote { margin: 8px 0 0; padding: 12px 14px; background: #f4f6fb; border: 1px solid #dde3f0; border-radius: 10px; font-size: 13.5px; line-height: 1.55; color: var(--b-kop); }
.geenvoorbeeld .uitleg { margin: 0; }
.fk-doc .lang { white-space: pre-wrap; font-size: 13.5px; }
.paginavoorbeeld { overflow: hidden; max-width: 1040px; }
.browserbalk { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--b-rand); background: var(--b-verhoogd); font-size: 12px; color: var(--b-flauw); }
.browserbalk i { width: 9px; height: 9px; border-radius: 50%; background: #d6d8dc; }
.browserbalk span { margin-left: 8px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paginavoorbeeld img { display: block; width: 100%; height: auto; }
.tp-geschiedenis .logrij { border-top: 1px solid var(--b-rand); padding: 8px 0; }
.opm-lijst { margin: 6px 0 0; padding-left: 18px; color: var(--b-dim); }
.tp-acties { margin-top: 18px; }
.tp-acties .fk-knop .b-knop { text-decoration: none; }

/* klantpagina: Nog te doen */
.ntd { overflow: hidden; margin-bottom: 18px; }
.ntd-kop { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--b-rand); }
.ntd-kop h2 { font-size: 15px; margin: 0; color: var(--b-kop); }
.ntd-kop .ruimte { flex: 1; }
.ntd .stap-groep.afgerond { border-top: 1px solid var(--b-rand); border-bottom: 1px solid var(--b-rand); }
.ntd > :last-child { border-bottom: 0; }
.webkop { margin-top: 6px; }
.webkop .flauw { font-weight: 400; }
.stappen .stap { grid-template-columns: minmax(0, 1fr) 150px 92px 112px 120px; }

/* agents */
.runner { margin-bottom: 0; }
.agentbol.uit i { background: #c9cbd0; }
.agentbol.rood i { background: var(--rood-beheer); box-shadow: 0 0 0 3px #d6454522; }
.ag-kaart.is-uit { background: #fcfcfc; }
.agkop h2 { gap: 8px; }
.nuhierna { grid-template-columns: 118px minmax(0, 1fr); }
.nuhierna dd a { color: var(--b-kop); text-decoration: underline; text-decoration-color: #c9cbd0; text-underline-offset: 3px; }
.nuhierna dd a:hover { color: var(--oranje); }
.nuhierna dd .flauw { font-size: 12.5px; }
.wachtregel { display: block; }
.wachtregel em { font-style: normal; font-size: 11px; font-weight: 600; color: #c24f12; background: #f264191a; border-radius: 999px; padding: 0 7px; margin-right: 6px; }
.nuhierna .sopchip { margin: 0 4px 4px 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.nuhierna dd { min-width: 0; overflow-wrap: anywhere; }
.keur { display: flex; align-items: center; gap: 10px; }
.keur .spoor { width: 80px; flex: 0 0 80px; height: 5px; border-radius: 5px; background: #eceef0; overflow: hidden; }
.keur .spoor i { display: block; height: 100%; background: var(--groen-donker); }
.keur > span:last-child { font-size: 12.5px; color: var(--b-dim); }
.keur b { color: var(--b-kop); }
.kanal { margin: 0; font-size: 12px; line-height: 1.5; color: var(--b-flauw); }
.kanal b { color: var(--b-dim); font-weight: 600; }

/* SOP's */
.voorstellen { margin-bottom: 16px; }
.voorstellen h2 .tel { font-size: 11px; font-weight: 600; background: #8a5cd61f; color: #6b3fbf; border-radius: 999px; padding: 0 8px; line-height: 18px; }
.voorstel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--b-rand); }
.voorstel .vtekst p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--b-kop); }
.voorstel .vtekst small { display: block; margin-top: 4px; font-size: 12px; color: var(--b-flauw); }
.voorstel .vtekst small a { color: var(--oranje); text-decoration: none; }
.voorstel .knoppen { display: flex; gap: 6px; }
.voorstel.af .vtekst p { color: var(--b-flauw); text-decoration: line-through; }
.soplijst { overflow: hidden; }
.srij { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, .8fr) 56px; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--b-rand); font-size: 13px; }
.srij:last-child { border-bottom: 0; }
.srij.kop { font-size: 12px; color: var(--b-flauw); }
.srij.klik { cursor: pointer; }
.srij.klik:hover { background: #f7f7f8; }
.srij .titel b { display: block; color: var(--b-kop); font-weight: 500; }
.srij .titel small { display: block; font-size: 12px; color: var(--b-flauw); margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.chip { display: inline-block; font-size: 11.5px; line-height: 20px; padding: 0 8px; border-radius: 999px; background: var(--b-verhoogd); color: var(--b-dim); white-space: nowrap; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.agent { background: #3b6fd414; color: #3b6fd4; }
.srij .versie { font-size: 12px; color: var(--b-flauw); text-align: right; font-variant-numeric: tabular-nums; }
.sop-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.sop-editor textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.55; resize: vertical; margin: 6px 0 10px; min-height: 360px; }
.sop-editor .knoppen { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sop-editor .knoppen .uitleg { margin: 0; }
.sop-zij { display: grid; gap: 16px; }
.gebruik { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px 0; border-top: 1px solid var(--b-rand); }
.gebruik > span:first-child { font-size: 12px; color: var(--b-flauw); width: 100%; margin-bottom: 2px; }
.versierij { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--b-rand); font-size: 13px; }
.versierij .vnr { font-weight: 600; color: var(--b-dim); font-variant-numeric: tabular-nums; }
.versierij.nu .vnr { color: var(--groen-donker); }
.versierij .vwat b { display: block; font-weight: 500; color: var(--b-kop); font-size: 12.5px; line-height: 1.4; }
.versierij .vwat small { display: block; font-size: 11.5px; color: var(--b-flauw); }

.komt-in :is(.fk-item, .fk-alinea, .ag-kaart, .srij, .voorstel) { animation: schuif-in .42s var(--zacht-uit) both; animation-delay: calc(var(--i, 0) * 28ms); }
.sopchip, .chip, .srij, .speler .play { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .2s var(--zacht-uit); }

@media (max-width: 1100px) {
  .lrij, .stap, .stappen .stap { grid-template-columns: minmax(0, 1fr) 150px 92px 112px; }
  .ag-raster { grid-template-columns: minmax(0, 1fr); }
  .fk-acties { grid-template-columns: 1fr; gap: 10px; }
  .fk-knop { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .tp-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-feiten > div:nth-child(2) { border-right: 0; }
  .tp-feiten > div:nth-child(3), .tp-feiten > div:nth-child(4) { border-top: 1px solid var(--b-rand); }
  .sop-raster { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lrij, .stap, .stappen .stap { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lrij .wie { grid-column: 1 / -1; }
  .kopklant .ruimte, .b-kopbalk .ruimte { display: none; }
  .weergave { margin-left: 0; width: 100%; }
  .weergave button { flex: 1; }
  .fk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fk-raster.video { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk-alinea { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .fk-acties { position: static; margin: 16px 0 0; padding: 12px 0 0; background: none; backdrop-filter: none; }
  .fk-knop { grid-template-columns: 1fr; gap: 4px; }
  .agkop { flex-wrap: wrap; }
  .logrij { grid-template-columns: 1fr; gap: 0; }
  .tp-zin { font-size: 14.5px; }
  .tp-feiten { grid-template-columns: 1fr; }
  .tp-feiten > div { border-right: 0 !important; border-top: 1px solid var(--b-rand); }
  .tp-feiten > div:first-child { border-top: 0; }
  .stapper { grid-template-columns: 1fr; }
  .rondes li { grid-template-columns: 70px minmax(0, 1fr); }
  .rondes li p { grid-column: 1 / -1; grid-row: auto; }
  .ntd-kop .ruimte { display: none; }
  .ntd-kop .filter { flex: 1; }
  .ntd-kop .filter span { display: none; }
  .nuhierna { grid-template-columns: 1fr; gap: 2px; }
  .nuhierna dt { margin-top: 6px; }
  .voorstel { grid-template-columns: 1fr; }
  .srij.kop { display: none; }
  .srij { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .srij .chips { grid-column: 1 / -1; }
  .srij .versie { grid-column: 2; grid-row: 1; }
  .versierij { grid-template-columns: 34px minmax(0, 1fr); }
  .versierij .b-knop { grid-column: 2; justify-self: start; }
  .keur { flex-wrap: wrap; }
}
/* overzicht past op 1440 met de extra go-live-regel */
.ov .voortgang { width: 50px; }
.ov .leegcel { width: 50px; }
.ov td.klant { max-width: 190px; }
.ov .klant small { white-space: normal; }
.ov th { white-space: nowrap; }
.ov td.blokker { min-width: 130px; max-width: 160px; }
.sop-raster > *, .sop-zij > * { min-width: 0; }
.gebruik .chip { white-space: normal; text-align: left; }
@media (max-width: 1100px) { .sop-raster { grid-template-columns: minmax(0, 1fr); } }
.nw { white-space: nowrap; }
a.b-knop { text-decoration: none; }

/* ── fixronde v5 (25 sep): lange tekst, techniek, blokjes, fasestrip, telefoon ── */
.tp-uitleg, .tp-zin, .uitleg, .citaat, .concept blockquote, .fk-doc p, .tp-feiten dd, .lrij .titel, .porlijst li { overflow-wrap: anywhere; }
.sopchip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.concept blockquote { white-space: pre-line; }
details.techniek { margin-top: 10px; font-size: 12px; color: var(--b-flauw); }
details.techniek summary { cursor: pointer; width: max-content; }
details.techniek pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 6px 0 0; background: var(--b-verhoogd); padding: 8px 10px; border-radius: 8px; color: var(--b-dim); }
.rood { color: var(--rood-beheer); }
.b-knop[disabled] { opacity: .5; cursor: not-allowed; }
.gevolgen-lijst, .porlijst { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--b-kop); display: grid; gap: 4px; }
.porlijst small { display: block; font-size: 12px; color: var(--b-flauw); }
.porlijst a { color: var(--b-kop); }

/* overzichtkaart: fasen als één rij blokjes */
.ov-kaart.klik { cursor: pointer; }
.ov-kaart .feiten b { color: var(--b-kop); font-weight: 600; }
.ov-kaart .stand { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 10px; }
.fblokjes { display: flex; align-items: center; gap: 4px; width: 100%; border: 0; background: none; padding: 4px 0; cursor: pointer; font: inherit; }
.fblokjes i, .fblok { --kl: #2f9e5b; }
.fblokjes i { flex: 1; height: 14px; border-radius: 3px; background: linear-gradient(to right, var(--kl) var(--p), #e4e6e9 var(--p)); }
.fblokjes i.oranje, .fblok.oranje { --kl: var(--oranje); }
.fblokjes i.rood, .fblok.rood { --kl: var(--rood-beheer); }
.fblokjes i.rood { box-shadow: 0 0 0 1.5px var(--rood-beheer); }
.fblokjes i.leeg { background: repeating-linear-gradient(45deg, #eceef0 0 3px, #f7f7f8 3px 6px); }
.fblokjes .chev { flex: 0 0 auto; color: var(--b-flauw); margin-left: 4px; transition: transform .2s; }
.fblokjes[aria-expanded="true"] .chev { transform: rotate(90deg); }
.ov-kaart .fblokjes + .raster { margin-top: 10px; }

/* klantkop: compacte fasestrip */
.fasestrip { display: flex; align-items: stretch; gap: 4px; margin-top: 10px; max-width: 640px; }
.fasestrip .fs-naam { font-size: 11px; font-weight: 600; color: var(--b-flauw); align-self: center; width: 22px; }
.fblok { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 1px; padding: 5px 0 4px; border-radius: 6px; text-decoration: none; background: linear-gradient(to top, color-mix(in srgb, var(--kl) 22%, transparent) var(--p), var(--b-verhoogd) var(--p)); border: 1px solid var(--b-rand); }
.fblok b { font-size: 11px; color: var(--b-kop); font-weight: 700; }
.fblok small { font-size: 10px; color: var(--b-dim); font-variant-numeric: tabular-nums; }
.fblok.rood { border-color: var(--rood-beheer); box-shadow: inset 0 0 0 1px var(--rood-beheer); }
.fblok.leeg { opacity: .55; }

/* Nog te doen: groepen per webinar en Toon alle */
.ntd-groep { padding: 8px 16px 6px; font-size: 12px; font-weight: 600; color: var(--b-dim); background: var(--b-verhoogd); border-bottom: 1px solid var(--b-rand); }
.stap-groep.toon-alle { justify-content: center; color: var(--oranje); font-weight: 600; border-top: 1px solid var(--b-rand); }

/* bord: Klaar ingeklapt */
.bkol.ingeklapt .meer { width: 100%; }

@media (max-width: 760px) {
  /* vier tabs op één regel, tellers als stip */
  .b-zij { flex-wrap: nowrap; overflow: hidden; gap: 2px; padding: 8px 10px; }
  .b-zij a { padding: 6px 7px; font-size: 13px; }
  .b-zij a.logo { font-size: 14px; padding: 0 6px 0 0; }
  .b-zij a small.tel { font-size: 0; width: 7px; height: 7px; min-width: 7px; padding: 0; border-radius: 50%; background: var(--oranje); display: inline-block; margin-left: 3px; align-self: flex-start; }
  /* klantpagina: de strip in de kop vervangt de grote fasekaarten */
  .fasekaarten, .webkop { display: none; }
  .fasestrip { max-width: none; }
  /* SOP-lijst: geen paden op de telefoon */
  .srij .titel small { display: none; }
  .ov-kaart .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .b-zij a.logo { display: none; } .b-zij { justify-content: space-between; } }
/* Demo-balk */
.voorbeeldbalk.demobalk { flex-wrap: wrap; gap: 4px 10px; }
.voorbeeldbalk.demobalk strong { background: var(--oranje); color: #fff; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.voorbeeldbalk.demobalk span { opacity: .85; }