:root {
  --navy: #0c1a3a;
  --navy-2: #13254f;
  --blauw: #1f45ff;
  --blauw-licht: #eaf0ff;
  --achtergrond: #f4f6fb;
  --kaart: #ffffff;
  --lijn: #e3e8f0;
  --tekst: #1d2433;
  --grijs: #6b7385;
  --groen: #12805c;
  --groen-licht: #e3f5ee;
  --rood: #c2352b;
  --rood-licht: #fdecea;
  --oranje: #b26a00;
  --oranje-licht: #fff3df;
  --radius: 12px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  font-family: "Segoe UI", Calibri, system-ui, sans-serif;
  font-size: 14px;
  color: var(--tekst);
  background: var(--achtergrond);
}

/* ---------- Zijbalk ---------- */
.zijbalk {
  background: var(--navy);
  color: #c9d2e8;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.merk { display: flex; align-items: center; gap: 12px; padding: 0 8px 22px; }
.merk img { width: 42px; height: 42px; border-radius: 50%; }
.merk strong { display: block; color: #fff; font-size: 16px; }
.merk span { font-size: 12px; letter-spacing: .5px; color: #8fa0c8; }
nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin-bottom: 2px;
  border-radius: 8px; color: #c9d2e8; text-decoration: none; cursor: pointer;
}
nav a i { font-style: normal; width: 18px; text-align: center; opacity: .8; }
nav a:hover { background: var(--navy-2); color: #fff; }
nav a.actief { background: var(--blauw); color: #fff; }
nav a.uit { opacity: .45; cursor: default; }
nav a.uit:hover { background: none; color: #c9d2e8; }
.nav-kop { margin: 18px 10px 6px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #6f80aa; }
.voet-zijbalk { margin-top: auto; padding: 0 8px; display: grid; gap: 6px; }
.voet-zijbalk small { color: #6f80aa; font-size: 11px; }
.ingelogd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #c9d2e8; }
.ingelogd button { padding: 4px 8px; font-size: 12px; }

/* ---------- Inhoud ---------- */
main { padding: 28px 32px 48px; min-width: 0; }
.kop-rij { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
h1 { margin: 0; font-size: 24px; color: var(--navy); }
.sub { color: var(--grijs); margin-top: 4px; }
h2 { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--grijs); margin: 0 0 12px; font-weight: 700; }
.laden, .fout { padding: 40px; color: var(--grijs); }
.fout { color: var(--rood); white-space: pre-wrap; }

.raster { display: grid; gap: 16px; }
.raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster.twee { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); margin-top: 16px; }
@media (max-width: 1100px) { .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } .raster.twee { grid-template-columns: 1fr; } }

.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px 20px; }
.tegel .label { color: var(--grijs); font-size: 12px; margin-bottom: 6px; }
.tegel .waarde { font-size: 26px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.tegel .toelichting { color: var(--grijs); font-size: 12px; margin-top: 6px; }
.tegel.groot { grid-column: span 2; }
@media (max-width: 1100px) { .tegel.groot { grid-column: span 2; } }

.balk { height: 10px; background: var(--blauw-licht); border-radius: 99px; overflow: hidden; margin: 12px 0 8px; position: relative; }
.balk > div { height: 100%; background: var(--blauw); border-radius: 99px; min-width: 4px; }
.mijlpalen { display: flex; justify-content: space-between; font-size: 11px; color: var(--grijs); font-variant-numeric: tabular-nums; }
.mijlpalen .bereikt { color: var(--groen); font-weight: 600; }

.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li { display: flex; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--lijn); }
.lijst li:last-child { border-bottom: 0; }
.lijst .hoofd { flex: 1; min-width: 0; }
.lijst .hoofd strong { color: var(--navy); }
.lijst .hoofd div { color: var(--grijs); font-size: 13px; margin-top: 2px; }
.leeg { color: var(--grijs); padding: 8px 0; }

.pil { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--blauw-licht); color: var(--blauw); white-space: nowrap; }
.pil.groen { background: var(--groen-licht); color: var(--groen); }
.pil.rood { background: var(--rood-licht); color: var(--rood); }
.pil.oranje { background: var(--oranje-licht); color: var(--oranje); }
.pil.grijs { background: #eef0f4; color: var(--grijs); }

/* ---------- Knoppen en formulieren ---------- */
button, .knop {
  font: inherit; border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer;
  background: var(--blauw); color: #fff; font-weight: 600;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: wait; }
.knop-licht { background: transparent; color: #c9d2e8; border: 1px solid #2a3c6b; }
.knop-tweede { background: #fff; color: var(--navy); border: 1px solid var(--lijn); }
select, input, textarea {
  font: inherit; color: var(--tekst); background: #fff;
  border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 10px; width: 100%;
}
select:focus, input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--blauw); outline-offset: 1px; }
label { display: grid; gap: 4px; font-size: 12px; color: var(--grijs); }
.filters { display: flex; gap: 10px; align-items: center; }
.filters select { width: auto; }

/* ---------- Sales-bord ---------- */
.bord { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(215px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; cursor: grab; scrollbar-width: none; position: relative; }
.bord::-webkit-scrollbar { display: none; }
.bord.slepen { cursor: grabbing; user-select: none; }
.bord.slepen * { cursor: grabbing; }
/* Zachte rand laat zien dat er links of rechts nog meer staat. */
.bord.meer-rechts { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.bord.meer-links { mask-image: linear-gradient(to right, transparent, #000 48px); }
.bord.meer-links.meer-rechts { mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.nagesprek-balk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--oranje-licht); border: 1px solid #f3d9a8; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.nagesprek-balk button { padding: 5px 12px; font-size: 13px; }
.md.briefing { background: var(--achtergrond); border-radius: 8px; padding: 10px 14px; font-size: 13px; }

/* ---------- Sales-assistent (chatpaneel) ---------- */
.assistent-kop { display: flex; gap: 8px; align-items: center; padding: 16px; border-bottom: 1px solid var(--lijn); }
.assistent-kop > div { flex: 1; min-width: 0; }
.assistent-kop .sub { font-size: 12px; }
.chat-lijst { overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; background: var(--achtergrond); }
.chat-leeg { color: var(--tekst); font-size: 14px; line-height: 1.5; }
.chat-bericht { display: grid; gap: 8px; }
.chat-ballon { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; background: var(--kaart); border: 1px solid var(--lijn); justify-self: start; }
.chat-bericht.jij .chat-ballon { background: var(--blauw); color: #fff; border-color: var(--blauw); justify-self: end; }
.chat-ballon.typen { display: flex; gap: 4px; padding: 13px 15px; }
.chat-ballon.typen span { width: 7px; height: 7px; border-radius: 50%; background: var(--grijs); animation: typen 1s infinite ease-in-out; }
.chat-ballon.typen span:nth-child(2) { animation-delay: .15s; } .chat-ballon.typen span:nth-child(3) { animation-delay: .3s; }
@keyframes typen { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.chat-actie { background: var(--kaart); border: 1px solid var(--lijn); border-left: 3px solid var(--blauw); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13px; }
.chat-actie.klaar { border-left-color: var(--groen); }
.chat-actie.weg { opacity: .55; border-left-color: var(--lijn); }
.chat-actie .veldlijst { font-size: 12px; }
.chat-mail { white-space: pre-wrap; font-size: 12px; background: var(--achtergrond); border-radius: 6px; padding: 8px; margin-top: 6px; }
.chat-invoer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; border-top: 1px solid var(--lijn); align-items: end; }
.chat-invoer textarea { resize: none; }

.deal[draggable] { cursor: grab; }
.deal.wordt-gesleept { opacity: .4; }
.kolom.doel { outline: 2px dashed var(--blauw); outline-offset: -2px; background: var(--blauw-licht); }
.kolom { background: #eaeef6; border-radius: var(--radius); padding: 12px; min-height: 200px; }
.kolom-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding: 0 2px; }
.kolom-kop strong { color: var(--navy); }
.kolom-kop span { color: var(--grijs); font-size: 12px; font-variant-numeric: tabular-nums; }
.deal { background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: grid; gap: 8px; }
.deal .titel { display: flex; justify-content: space-between; gap: 8px; }
.deal .titel strong { color: var(--navy); }
.deal .meta { color: var(--grijs); font-size: 12px; }
.deal .actie { font-size: 13px; background: var(--achtergrond); border-radius: 6px; padding: 6px 8px; }
.deal .actie.te-laat { background: var(--rood-licht); color: var(--rood); }
.deal .onder { display: flex; gap: 6px; }
.deal .onder select { flex: 1; min-width: 0; }
.deal .onder button { flex: none; }
.deal .onder select { font-size: 12px; padding: 5px 6px; }
.deal .onder button { font-size: 12px; padding: 5px 10px; }
.deal .waarschuwing { font-size: 12px; color: var(--oranje); }

/* ---------- Dialoog en melding ---------- */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(520px, 92vw); box-shadow: 0 20px 60px rgba(12,26,58,.25); }
dialog::backdrop { background: rgba(12,26,58,.45); }
dialog form { padding: 22px 24px; display: grid; gap: 12px; }
dialog h3 { margin: 0 0 4px; color: var(--navy); font-size: 18px; }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.velden .breed { grid-column: span 2; }
.dialoog-knoppen { display: flex; justify-content: end; gap: 8px; margin-top: 6px; }
#melding { position: fixed; bottom: 20px; right: 20px; display: grid; gap: 8px; }
#melding div { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: 420px; }
#melding div.fout { background: var(--rood); }

/* ---------- Klanten ---------- */
.klanten { display: grid; gap: 14px; }
.klant h3 { margin: 0; color: var(--navy); font-size: 17px; display: flex; gap: 8px; align-items: center; }
.klant .sub { font-size: 13px; margin-top: 3px; }
.klant-kop { display: flex; justify-content: space-between; gap: 16px; align-items: start; flex-wrap: wrap; }
.klant-cijfers { display: flex; gap: 18px; align-items: center; }
.klant-cijfers div { display: grid; text-align: right; }
.klant-cijfers span { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: 1px; }
.klant-cijfers strong { font-size: 17px; color: var(--navy); font-variant-numeric: tabular-nums; }
.klant-blokken { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn); }
@media (max-width: 900px) { .klant-blokken { grid-template-columns: 1fr; } }
.klant .kans { background: var(--oranje-licht); color: var(--oranje); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.klant-deals { margin-top: 12px; font-size: 13px; color: var(--grijs); }
.klant-deals a { color: var(--blauw); }
.notitie-klein { margin-top: 10px; font-size: 12px; color: var(--grijs); border-left: 3px solid var(--lijn); padding-left: 10px; }

/* ---------- Badge, tabs ---------- */
.badge { margin-left: auto; background: #ff5a4f; color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); margin-bottom: 16px; flex-wrap: wrap; }
.tab { background: none; color: var(--grijs); border-radius: 8px 8px 0 0; padding: 10px 14px; font-weight: 600; }
.tab.actief { color: var(--blauw); box-shadow: inset 0 -2px 0 var(--blauw); }
.tab:hover { filter: none; color: var(--navy); }
.kolom-kop a { color: var(--blauw); font-size: 13px; }

/* ---------- Meldingen ---------- */
.meldingen { display: grid; gap: 12px; }
.melding { background: #fff; border: 1px solid var(--lijn); border-left: 4px solid var(--blauw); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; }
.melding.prio-hoog { border-left-color: #ff5a4f; }
.melding.prio-laag { border-left-color: #c3cad8; }
.melding-kop { display: flex; justify-content: space-between; gap: 12px; }
.melding-kop strong { color: var(--navy); font-size: 15px; }
.melding-kop .sub { font-size: 13px; margin-top: 3px; }
.melding-kop a, .agent-oordeel a { color: var(--blauw); }
.melding-labels { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.melding-voet { display: flex; gap: 8px; justify-content: end; }
.melding-voet button { font-size: 13px; padding: 6px 12px; }
.actie-blok { background: var(--achtergrond); border-radius: 8px; padding: 12px; display: grid; gap: 8px; }
.actie-blok.klaar { opacity: .75; }
.actie-blok button { justify-self: start; }
.actie-kop { font-weight: 600; color: var(--navy); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.veldlijst { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.veldlijst dt { color: var(--grijs); }
.veldlijst dd { margin: 0; }
textarea { resize: vertical; line-height: 1.45; }

/* ---------- Mailbox ---------- */
.mailbox { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .mailbox { grid-template-columns: 1fr; } }
.maillijst { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); max-height: calc(100vh - 220px); overflow-y: auto; }
.maillijst li { padding: 11px 14px; border-bottom: 1px solid var(--lijn); cursor: pointer; display: grid; gap: 3px; }
.maillijst li:hover { background: var(--achtergrond); }
.maillijst li.actief { background: var(--blauw-licht); }
.maillijst li.ongelezen strong { color: var(--blauw); }
.maillijst .pil { justify-self: start; }
.mail-regel { display: flex; justify-content: space-between; gap: 8px; }
.mail-regel strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-onderwerp { font-size: 13px; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leesvak { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); padding: 20px 22px; min-height: 300px; }
.leesvak h3 { margin: 0 0 6px; color: var(--navy); }
.leesvak .sub { font-size: 13px; }
.mailtekst { white-space: pre-wrap; font-family: inherit; font-size: 14px; line-height: 1.55; margin: 16px 0; max-height: 50vh; overflow-y: auto; }
.agent-oordeel { margin-top: 12px; background: var(--blauw-licht); border-radius: 8px; padding: 10px 12px; }
.antwoord { border-top: 1px solid var(--lijn); padding-top: 14px; display: grid; gap: 10px; }
.antwoord .filters input { flex: 1; }
.concept-form { margin-top: 4px; }

/* ---------- Projecten & Financiën ---------- */
.deal label { font-size: 11px; }
.deal label select { font-size: 12px; padding: 5px 6px; }
dialog.breed { width: min(860px, 94vw); }
.regel { display: grid; grid-template-columns: 2fr 2fr 80px 110px 36px; gap: 6px; margin-bottom: 6px; align-items: center; }
.regel-kop { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: 1px; }
.regel button { padding: 6px 0; }
.totaalvak { background: var(--blauw-licht); border-radius: 8px; padding: 10px 12px; font-variant-numeric: tabular-nums; }
label.vink { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst); }
label.vink input { width: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--grijs); padding: 8px 10px; border-bottom: 1px solid var(--lijn); }
.tabel td { padding: 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; font-variant-numeric: tabular-nums; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel .r { text-align: right; }
.tabel a { color: var(--blauw); font-weight: 600; }
.tabel .knoppen button { font-size: 12px; padding: 5px 10px; margin-left: 4px; }
.grafiek { display: flex; gap: 10px; align-items: end; height: 220px; padding-top: 10px; overflow-x: auto; }
.staaf { flex: 1; min-width: 56px; display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; }
.staaf .bedrag { font-size: 11px; color: var(--grijs); height: 16px; font-variant-numeric: tabular-nums; }
.kolomstaaf { display: flex; flex-direction: column; justify-content: flex-end; background: var(--achtergrond); border-radius: 6px; overflow: hidden; }
.kolomstaaf .mrr { background: var(--blauw); }
.kolomstaaf .een { background: #8fa8ff; }
.staaf .maand { font-size: 11px; color: var(--grijs); margin-top: 6px; }
.staaf.nu .maand { color: var(--navy); font-weight: 700; }
.staaf.nu .kolomstaaf { outline: 2px solid var(--blauw); outline-offset: 2px; }
.leg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-left: 6px; }
.leg.mrr { background: var(--blauw); }
.leg.een { background: #8fa8ff; }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: #fff; color: var(--grijs); border: 1px solid var(--lijn); border-radius: 99px; padding: 6px 13px; font-size: 13px; }
.chip.actief { background: var(--navy); color: #fff; border-color: var(--navy); }
.lijst li.klikbaar { cursor: pointer; border-radius: 8px; }
.lijst li.klikbaar:hover { background: var(--achtergrond); }

/* ---------- Agents ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .team { grid-template-columns: 1fr; } }
.agent-kaart { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px; display: grid; gap: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.agent-kaart:hover { border-color: #c5d0ea; box-shadow: 0 4px 16px rgba(12,26,58,.06); }
.agent-kaart.gekozen { border-color: var(--blauw); box-shadow: 0 0 0 1px var(--blauw); }
.agent-kaart p { margin: 0; color: var(--tekst); font-size: 13px; line-height: 1.5; }
.agent-top { display: flex; gap: 12px; align-items: center; }
.agent-top strong { color: var(--navy); font-size: 16px; }
.agent-top .sub { margin-top: 1px; font-size: 12px; }
.agent-icoon { width: 40px; height: 40px; border-radius: 10px; background: var(--blauw-licht); color: var(--blauw); display: grid; place-items: center; font-size: 19px; flex: none; }
.agent-onder { display: flex; justify-content: space-between; align-items: end; gap: 10px; border-top: 1px solid var(--lijn); padding-top: 12px; margin-top: auto; }
.agent-onder .sub { font-size: 12px; }
.agent-getal { font-size: 24px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.agent-onder button { font-size: 13px; padding: 7px 12px; white-space: nowrap; }

h3.groep { font-size: 14px; color: var(--navy); margin: 18px 0 8px; }
.taken { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; }
.taak { border-bottom: 1px solid var(--lijn); border-left: 3px solid var(--blauw); }
.taak:last-child { border-bottom: 0; }
.taak.prio-hoog { border-left-color: #ff5a4f; }
.taak.prio-laag { border-left-color: #c3cad8; }
.taak.klaar { border-left-color: var(--lijn); }
.taak.uit { background: #fafbfe; }
.taak-regel { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 11px 14px; cursor: pointer; }
.taak.klaar .taak-regel { grid-template-columns: 30px minmax(0, 1fr) auto; cursor: default; }
.taak-regel:hover { background: var(--achtergrond); }
.taak-agent { width: 30px; height: 30px; border-radius: 8px; background: var(--blauw-licht); color: var(--blauw); display: grid; place-items: center; font-size: 14px; flex: none; }
.taak-hoofd { min-width: 0; }
.taak-hoofd strong { color: var(--navy); }
.taak-hoofd .sub { font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taak.uit .taak-hoofd .sub { white-space: normal; }
.taak-wat { font-size: 12px; color: var(--grijs); white-space: nowrap; }
.taak-knoppen { display: flex; gap: 6px; }
.taak-knoppen button { font-size: 13px; padding: 6px 12px; white-space: nowrap; }
.knop-icoon { padding: 6px 10px !important; }
.taak-detail { padding: 2px 16px 16px 58px; display: grid; gap: 10px; }
.taak-detail a { color: var(--blauw); }
@media (max-width: 900px) {
  .taak-regel { grid-template-columns: 30px minmax(0, 1fr); }
  .taak-wat { display: none; }
  .taak-knoppen { grid-column: 2; }
  .taak-detail { padding-left: 16px; }
}
.afgehandeld { margin-top: 22px; }
.afgehandeld summary { cursor: pointer; color: var(--grijs); font-weight: 600; margin-bottom: 8px; }

/* ---------- Projecten: portfolio ---------- */
.portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.site-kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.site-kaart:hover, .site-kaart:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(12,26,58,.1); outline: none; }
.beeld { position: relative; aspect-ratio: 16 / 10; background: #eaeef6; overflow: hidden; border-bottom: 1px solid var(--lijn); }
.beeld img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: object-position 6s ease-in-out; }
.site-kaart:hover .beeld img { object-position: bottom; }
.beeld-status { position: absolute; top: 12px; left: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.beeld-status.pil:not(.groen):not(.oranje):not(.grijs) { background: #fff; }
.beeld-status.grijs { background: #fff; }
.beeld-leeg { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--grijs); font-size: 13px; }
.initialen { width: 64px; height: 64px; border-radius: 16px; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--lijn); border-top-color: var(--blauw); border-radius: 50%; animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.site-info { padding: 14px 16px 16px; display: grid; gap: 4px; }
.site-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.site-titel strong { color: var(--navy); font-size: 16px; }
.site-titel .sub { margin: 0; font-variant-numeric: tabular-nums; }
.site-info > .sub { margin: 0; font-size: 13px; }
.site-links { display: flex; gap: 12px; margin-top: 4px; font-size: 13px; }
.site-links a { color: var(--blauw); font-weight: 600; text-decoration: none; }
.site-links a:hover { text-decoration: underline; }
.site-links a.test { color: var(--grijs); }
.site-tip { margin-top: 8px; font-size: 12px; font-weight: 600; background: var(--blauw-licht); color: var(--blauw); border-radius: 6px; padding: 5px 8px; justify-self: start; }
.site-tip.oranje { background: var(--oranje-licht); color: var(--oranje); }

.project-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 800px) { .project-detail { grid-template-columns: 1fr; } }
.detail-beeld { border: 1px solid var(--lijn); border-radius: 10px; overflow-y: auto; max-height: 560px; background: #eaeef6; }
.detail-beeld img { width: 100%; display: block; }
.detail-beeld .beeld-leeg { min-height: 260px; }
.detail-info { display: grid; gap: 12px; align-content: start; }
.detail-info .veldlijst a { color: var(--blauw); }
.detail-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-knoppen button { font-size: 13px; padding: 7px 12px; }

/* ---------- Lasten ---------- */
.staaf-paar { display: flex; gap: 3px; min-height: 0; }
.staaf-paar .kolomstaaf { flex: 3; }
.kostenstaaf { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; background: var(--achtergrond); border-radius: 6px; overflow: hidden; }
.kostenstaaf div { background: #ff8a80; }
.staaf.nu .staaf-paar .kolomstaaf { outline: 2px solid var(--blauw); outline-offset: 2px; }
.leg.kost { background: #ff8a80; }
.boek-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--oranje-licht); color: var(--oranje); border-radius: 8px; padding: 10px 12px; margin-top: 12px; font-weight: 600; flex-wrap: wrap; }
.boek-balk button { font-size: 13px; padding: 7px 12px; }
.tabel tr.uit-tabel td { opacity: .55; }

/* ---------- Producten ---------- */
.raster.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .raster.drie { grid-template-columns: 1fr; } }
.producten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1200px) { .producten { grid-template-columns: 1fr; } }
.product { display: grid; gap: 14px; align-content: start; }
.product-kop { display: flex; gap: 12px; align-items: center; }
.product-logo { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.product-logo.icoon { background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 22px; }
.product-naam { flex: 1; min-width: 0; }
.product-naam strong { color: var(--navy); font-size: 17px; }
.product-naam .sub { margin-top: 1px; font-size: 12px; }
.fase-kiezer { width: auto; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 99px; border: 0; }
.fase-kiezer.fase-oranje { background: var(--oranje-licht); color: var(--oranje); }
.fase-kiezer.fase-groen { background: var(--groen-licht); color: var(--groen); }
.fase-kiezer.fase-grijs { background: #eef0f4; color: var(--grijs); }
.fase-kiezer.fase-blauw { background: var(--blauw-licht); color: var(--blauw); }
.belofte { margin: 0; line-height: 1.5; color: var(--tekst); }
.product-cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--achtergrond); border-radius: 10px; padding: 10px 12px; }
.product-cijfers span { display: block; font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: 1px; }
.product-cijfers strong { color: var(--navy); font-variant-numeric: tabular-nums; }
.product-cijfers em.open { font-style: normal; color: var(--oranje); }
.verkoopklaar-kop { display: flex; justify-content: space-between; font-size: 13px; color: var(--grijs); }
.verkoopklaar-kop strong { color: var(--navy); }
.verkoopklaar .balk { margin: 6px 0 8px; }
.verkoopklaar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.verkoopklaar .vink { font-size: 13px; cursor: pointer; }
.verkoopklaar .gedaan { color: var(--grijs); text-decoration: line-through; }
.werkmap { border-top: 1px solid var(--lijn); padding-top: 10px; font-size: 13px; display: grid; gap: 4px; }
.werkmap-kop { font-weight: 600; color: var(--navy); }
.commit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product > button { justify-self: start; }
.pakketten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .pakketten { grid-template-columns: 1fr; } }
.pakket { border-style: dashed; }
.pakket.midden { border-color: var(--blauw); border-style: solid; }
.pakket-naam { font-size: 17px; font-weight: 700; color: var(--navy); }
.pakket-prijs { color: var(--blauw); font-weight: 600; margin: 4px 0 10px; }
.pakket ul { margin: 0; padding-left: 18px; line-height: 1.7; }
.gepauzeerd { padding: 6px 0; }

/* ---------- Kennis & strategie ---------- */
.tijdlijn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tijdlijn { grid-template-columns: 1fr 1fr; } }
.mijlpaal { padding: 22px 16px 4px 0; border-top: 3px solid var(--lijn); position: relative; }
.mijlpaal.bereikt { border-top-color: var(--groen); }
.mijlpaal.volgend { border-top-color: var(--blauw); }
.mijlpaal-punt { position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--lijn); }
.mijlpaal.bereikt .mijlpaal-punt { background: var(--groen); border-color: var(--groen); }
.mijlpaal.volgend .mijlpaal-punt { border-color: var(--blauw); }
.mijlpaal strong { color: var(--navy); font-size: 18px; display: block; margin: 2px 0 6px; }
.mijlpaal p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tekst); }
.genummerd, .risicos { margin: 0; padding-left: 20px; line-height: 1.6; font-size: 13px; }
.genummerd li, .risicos li { margin-bottom: 6px; }
.beslissingen li { padding: 8px 0; font-size: 13px; }
a.link { color: var(--blauw); font-size: 13px; font-weight: 600; text-decoration: none; }
.vragen { columns: 2 380px; column-gap: 16px; }
.vraag-sectie { break-inside: avoid; margin-bottom: 16px; display: block; }
.balk.dun { height: 5px; margin: 4px 0 10px; }
.vraaglijst { list-style: none; margin: 0; padding: 0; }
.vraaglijst li { display: flex; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.vraaglijst li[data-vraag] { cursor: pointer; }
.vraaglijst li[data-vraag]:hover, .vraaglijst li[data-vraag]:focus-visible { background: var(--blauw-licht); outline: none; }
.vraaglijst li.besloten { color: var(--grijs); }
.vraag-vink { width: 18px; height: 18px; border: 2px solid #c3cad8; border-radius: 5px; flex: none; display: grid; place-items: center; font-size: 11px; margin-top: 1px; }
.besloten .vraag-vink { background: var(--groen); border-color: var(--groen); color: #fff; }
.vraaglijst code, .md code { background: #eef0f4; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.vraag-citaat { background: var(--achtergrond); border-left: 3px solid var(--blauw); border-radius: 6px; padding: 10px 12px; font-size: 14px; }

.kennisbank { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .kennisbank { grid-template-columns: 1fr; } }
.kb-lijst { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); padding: 12px; max-height: calc(100vh - 200px); overflow-y: auto; position: sticky; top: 16px; }
.kb-lijst input { margin-bottom: 8px; }
.kb-map { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--grijs); margin: 12px 6px 4px; font-weight: 700; }
.kb-doc { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--tekst); text-decoration: none; font-size: 13px; }
.kb-doc:hover { background: var(--achtergrond); }
.kb-doc.actief { background: var(--blauw-licht); color: var(--blauw); font-weight: 600; }
.kb-open { background: var(--oranje-licht); color: var(--oranje); border-radius: 99px; font-size: 11px; padding: 0 7px; align-self: center; }
.kb-treffer { display: grid; gap: 2px; }
.kb-treffer small { color: var(--grijs); font-size: 12px; line-height: 1.4; }
.kb-lezer { min-height: 400px; }
.kb-pad { display: flex; justify-content: space-between; font-size: 12px; color: var(--grijs); border-bottom: 1px solid var(--lijn); padding-bottom: 8px; margin-bottom: 4px; }
.md { line-height: 1.6; font-size: 14px; }
.md h1 { font-size: 22px; margin: 14px 0 10px; }
.md h2 { font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--navy); margin: 22px 0 8px; }
.md h3 { font-size: 15px; color: var(--navy); margin: 18px 0 6px; }
.md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; display: block; overflow-x: auto; }
.md th, .md td { border-bottom: 1px solid var(--lijn); padding: 7px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--achtergrond); }
.md blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--blauw); background: var(--blauw-licht); border-radius: 6px; }
.md a { color: var(--blauw); }
.md pre { background: var(--achtergrond); padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md input[type=checkbox] { width: auto; margin-right: 6px; }
.md ul, .md ol { padding-left: 22px; }
.markering { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px; vertical-align: 1px; }
.markering.open { background: var(--oranje-licht); color: var(--oranje); }
.markering.concept { background: var(--blauw-licht); color: var(--blauw); }
.beslissing-tekst { color: var(--tekst); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Agenda ---------- */
.week { padding: 0; overflow: hidden; }
.week-kop, .week-heledag { display: grid; grid-template-columns: 56px repeat(var(--dagen), minmax(0, 1fr)); border-bottom: 1px solid var(--lijn); }
.week-kop > div { padding: 10px 8px; text-align: center; color: var(--grijs); font-size: 12px; text-transform: capitalize; }
.week-kop strong { display: block; font-size: 20px; color: var(--navy); }
.week-kop .vandaag strong { background: var(--blauw); color: #fff; border-radius: 50%; width: 34px; height: 34px; line-height: 34px; margin: 2px auto 0; }
.week-heledag { min-height: 34px; }
.week-heledag > div { padding: 4px; border-left: 1px solid var(--lijn); display: grid; gap: 3px; align-content: start; }
.week-heledag > div:first-child { border-left: 0; font-size: 11px; display: grid; place-items: center; }
.week-raster { display: grid; grid-template-columns: 56px repeat(var(--dagen), minmax(0, 1fr)); height: 560px; overflow-y: auto; position: relative; }
.week-raster > .uren, .week-raster > .dagkolom { height: calc(var(--uren) * 52px); }
.uren > div { height: 52px; font-size: 11px; color: var(--grijs); text-align: right; padding-right: 8px; transform: translateY(-7px); }
.dagkolom { position: relative; border-left: 1px solid var(--lijn); background-image: repeating-linear-gradient(to bottom, var(--lijn) 0 1px, transparent 1px 52px); }
.dagkolom.vandaag { background-color: #f7f9ff; }
.nu-lijn { position: absolute; left: 0; right: 0; height: 2px; background: #ff5a4f; z-index: 2; }
.nu-lijn::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ff5a4f; }
.afspraak { display: block; width: 100%; text-align: left; background: var(--blauw-licht); color: var(--navy); border-left: 3px solid var(--blauw); border-radius: 6px; padding: 4px 6px; font-size: 12px; font-weight: 400; overflow: hidden; }
.afspraak.geplaatst { position: absolute; left: 3px; right: 3px; width: auto; z-index: 1; }
.afspraak strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afspraak span { display: block; color: var(--grijs); font-size: 11px; }
.afspraak .afspraak-klant { color: var(--groen); font-weight: 600; }
.afspraak.klant { background: var(--groen-licht); border-left-color: var(--groen); }
.afspraak.lead { background: var(--oranje-licht); border-left-color: var(--oranje); }
.afspraak.lead .afspraak-klant { color: var(--oranje); }
.afspraak:hover { filter: brightness(.97); }
/* Kleur per soort (vaste naamgeving, config/agenda-soorten.json). */
.afspraak.soort { background: color-mix(in srgb, var(--sk) 13%, var(--kaart)); border-left-color: var(--sk); }
.afspraak.soort.zonder { background: var(--kaart); border: 1px dashed var(--lijn); border-left: 3px dashed var(--grijs); }
.soort-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--grijs); margin: -4px 0 12px; }
.soort-legenda span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--sk); margin-right: 5px; }
.soort-tijd { display: grid; gap: 7px; }
.soort-tijd .rij { display: grid; grid-template-columns: 140px 1fr 56px; gap: 10px; align-items: center; font-size: 13px; }
.soort-tijd .balk { height: 10px; border-radius: 5px; background: var(--lijn); overflow: hidden; }
.soort-tijd .balk i { display: block; height: 100%; background: var(--sk); border-radius: 5px; }
.wie-keuze { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.wie-keuze label { display: flex; gap: 6px; align-items: center; font-weight: 400; font-size: 13px; color: var(--tekst); white-space: nowrap; }
.wie-keuze input { width: auto; margin: 0; }
.tijd-pil { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--blauw); min-width: 64px; }
.stappen li { margin-bottom: 12px; }
.stappen code { font-size: 12px; }
.afspraak.kort { display: flex; gap: 6px; align-items: baseline; padding-top: 2px; padding-bottom: 2px; } .afspraak.kort strong { flex: 1; min-width: 0; } .afspraak.kort .afspraak-klant { display: none; }
.groep-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; } .groep-kop h3.groep { margin: 0 0 8px; } .groep-kop button { font-size: 13px; padding: 6px 12px; margin-bottom: 8px; } .filter-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--oranje-licht); color: var(--oranje); font-weight: 600; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; } .filter-balk button { font-size: 13px; padding: 6px 12px; }
.klant-voorstel { margin-top: 12px; display: grid; gap: 8px; } .voorstel-regel { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--blauw-licht); border-radius: 8px; padding: 10px 12px; font-size: 13px; } .voorstel-regel .sub { font-size: 12px; } .voorstel-regel button { font-size: 13px; padding: 6px 12px; white-space: nowrap; }

/* ---------- Btw & bonnen ---------- */
.scan-balk { display: flex; align-items: center; gap: 10px; background: var(--blauw-licht); color: var(--blauw); font-weight: 600; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.spinner.klein { width: 16px; height: 16px; border-width: 2px; }
label.knop { display: inline-flex; align-items: center; color: #fff; font-size: 14px; cursor: pointer; }
.bonnen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.bon { display: flex; gap: 12px; border: 1px solid var(--lijn); border-radius: 10px; padding: 10px; cursor: pointer; background: #fff; }
.bon:hover, .bon:focus-visible { border-color: var(--blauw); outline: none; }
.bon-beeld { width: 72px; height: 92px; flex: none; border-radius: 6px; background: var(--achtergrond); overflow: hidden; display: grid; place-items: center; color: var(--grijs); font-weight: 700; }
.bon-beeld img { width: 100%; height: 100%; object-fit: cover; }
.bon-info { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: start; }
.bon-titel { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.bon-titel strong { color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bon .sub { margin: 0; font-size: 12px; }
.bon .taak-knoppen { margin-top: 4px; }
.bon .taak-knoppen button { font-size: 12px; padding: 5px 10px; }
.opmerking { font-size: 12px; color: var(--oranje); }
.opmerkingen { margin: 0; padding: 8px 12px 8px 26px; background: var(--oranje-licht); color: var(--oranje); border-radius: 8px; font-size: 13px; }
.waarschuwing-balk { background: var(--oranje-licht); color: var(--oranje); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.tabel.aangifte td { padding: 7px 10px; }
.tabel.aangifte .rubriek { font-weight: 700; color: var(--blauw); width: 36px; }
.tabel.aangifte tr.sectie td { background: var(--achtergrond); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--grijs); font-weight: 700; padding: 6px 10px; }
.tabel.aangifte tr.leeg-rij td { color: #a3abbb; }
.tabel.aangifte tr.leeg-rij .rubriek { color: #a3abbb; }
.tabel tr.totaal-rij td { font-weight: 700; color: var(--navy); border-top: 2px solid var(--navy); font-size: 14px; }
.tabel tr.klikbaar { cursor: pointer; }
.tabel tr.klikbaar:hover td { background: var(--achtergrond); }
.tabel tr.na-indienen td { background: var(--oranje-licht); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.checklist li { padding-left: 26px; position: relative; }
.checklist li::before { content: ''; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border: 2px solid #c3cad8; border-radius: 4px; }
.checklist li.ok::before { content: '✓'; background: var(--groen); border-color: var(--groen); color: #fff; font-size: 11px; display: grid; place-items: center; }
.btw-regel { display: grid; grid-template-columns: 1.2fr 1fr 1fr 36px; gap: 6px; margin-bottom: 6px; align-items: center; }
.btw-regel button { padding: 6px 0; }
fieldset.velden { border: 0; padding: 0; margin: 0; min-width: 0; }
.doc-frame { width: 100%; height: 560px; border: 0; display: block; }
.kaart.eerder summary { cursor: pointer; } .kaart.eerder summary .sub { font-size: 12px; }
label.knop.knop-tweede { color: var(--navy); }
.tabel td.plus { color: var(--groen); }
.tabel .knoppen select { width: auto; font-size: 12px; padding: 5px 6px; margin-left: 4px; }

/* ---------- Acquisitie (bellijst) ---------- */
.ik-ben { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ik-ben select { width: auto; }
.acq-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.bellijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.belkaart { display: grid; gap: 10px; align-content: start; }
.bel-kop { display: flex; gap: 10px; align-items: start; }
.bel-kop input[type=checkbox] { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.bel-naam { flex: 1; min-width: 0; }
.bel-naam strong { font-size: 16px; color: var(--navy); }
.score { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blauw-licht); color: var(--blauw); font-weight: 700; }
.bel-kansen { display: flex; flex-wrap: wrap; gap: 6px; }
.bel-waarom { font-size: 13px; }
.bel-opening { background: var(--blauw-licht); border-radius: 8px; padding: 10px 12px; font-size: 14px; display: grid; gap: 2px; }
.bel-opening .sub { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.bel-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bel-links .knop { text-decoration: none; display: inline-flex; align-items: center; }
.bel-knop { font-size: 15px; padding: 10px 16px; }
.bel-uitkomst { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--lijn); padding-top: 10px; }
.bel-uitkomst button { padding: 10px 8px; }

/* ---------- Telefoon: zijbalk wordt een balk bovenaan met menu ---------- */
.menu-knop { display: none; }
@media (max-width: 760px) {
  body { display: block; }
  .zijbalk { position: sticky; top: 0; z-index: 40; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 14px; }
  .merk { padding: 0; flex: 1; }
  .merk img { width: 34px; height: 34px; }
  .menu-knop { display: block; background: var(--navy-2); color: #fff; font-size: 18px; padding: 6px 12px; }
  .zijbalk nav, .voet-zijbalk { display: none; width: 100%; }
  .zijbalk.open nav { display: block; margin-top: 10px; max-height: 70vh; overflow-y: auto; }
  .zijbalk.open .voet-zijbalk { display: grid; margin-top: 10px; padding: 0; }
  main { padding: 16px 14px 40px; }
  h1 { font-size: 21px; }
  .raster.vier { grid-template-columns: 1fr 1fr; }
  .bellijst { grid-template-columns: 1fr; }
  .kop-rij .filters { width: 100%; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .tab { white-space: nowrap; }
}

/* ---------- Assistent als eigen pagina ---------- */
.assistent-pagina { display: grid; grid-template-rows: auto 1fr auto; height: calc(100vh - 76px); max-width: 860px; margin: 0 auto; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; }
.assistent-pagina .assistent-kop { flex-wrap: wrap; }
.assistent-pagina .assistent-kop h1 { font-size: 20px; }
.chat-bel { background: var(--kaart); border: 1px solid var(--lijn); border-left: 3px solid var(--oranje); border-radius: 10px; padding: 12px; display: grid; gap: 9px; max-width: 520px; }
.chat-auto { font-size: 13px; color: var(--groen); display: flex; align-items: center; gap: 6px; }
.chat-auto.fout { color: var(--rood); }
@media (max-width: 760px) {
  main:has(.assistent-pagina) { padding: 0; }
  .assistent-pagina { height: calc(100dvh - 58px); border: 0; border-radius: 0; }
  .assistent-pagina .assistent-kop .sub { display: none; }
  .chat-ballon { max-width: 94%; }
}
.chat-actie .taak-knoppen { display: flex; gap: 8px; grid-column: 1 / -1; }
.chat-actie .taak-knoppen button { flex: 1; max-width: 200px; }
@media (max-width: 760px) {
  .assistent-pagina .assistent-kop { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 14px; }
  .assistent-pagina .assistent-kop > div { grid-column: 1 / -1; }
  .assistent-pagina .ik-ben { font-size: 0; }
  .assistent-pagina .ik-ben select { font-size: 14px; }
  .chat-actie .taak-knoppen button { max-width: none; }
}

/* ---------- Agent-team ---------- */
.dagplan { margin-bottom: 18px; border-left: 4px solid var(--blauw); }
.dagplan-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dagplan-kop strong { color: var(--navy); font-size: 15px; }
.dagplan-kern { margin: 6px 0 12px; color: var(--navy); font-weight: 600; }
.dagplan-personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 8px; }
.dagplan-persoon { background: var(--achtergrond); border-radius: 8px; padding: 10px 12px; }
.dagplan-wie { font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.dagplan-persoon ol { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.dagplan.leeg-plan .sub { display: flex; align-items: center; gap: 10px; margin-top: 6px; }

.organogram { display: grid; gap: 0; }
.org-rij { display: grid; gap: 16px; }
.org-top { grid-template-columns: minmax(0, 420px); justify-content: center; }
.org-midden { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.org-onder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.org-lijn { height: 18px; width: 2px; background: #c5d0ea; margin: 0 auto; }
.org-uitleg { background: #fff; border: 1px dashed var(--lijn); border-radius: var(--radius); padding: 16px 18px; font-size: 13px; line-height: 1.55; }
.org-uitleg strong { color: var(--navy); }
.org-uitleg ol { margin: 6px 0 0; padding-left: 18px; }
.org-check { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--oranje-licht); color: var(--oranje); }
.org-check.goed { background: var(--groen-licht); color: var(--groen); }

.lid-kaart { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; align-content: start; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lid-kaart:hover { border-color: #c5d0ea; box-shadow: 0 4px 16px rgba(12,26,58,.06); }
.lid-kaart.gekozen { border-color: var(--blauw); box-shadow: 0 0 0 1px var(--blauw); }
.lid-kaart p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tekst); }
.lid-kaart .agent-top { position: relative; }
.lid-getal { margin-left: auto; background: var(--blauw); color: #fff; border-radius: 99px; min-width: 26px; height: 26px; padding: 0 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.gezond { font-size: 10px; vertical-align: 1px; }
.gezond.goed { color: var(--groen); }
.gezond.let-op { color: #e59400; }
.gezond.fout { color: var(--rood); }
.lid-taken { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--lijn); display: grid; gap: 2px; }
.lid-taken li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 28px; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.lid-taken .taak-naam { color: var(--navy); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lid-taken .sub { font-size: 12px; white-space: nowrap; }
.taak-status { font-size: 10px; color: #c3cad8; }
.taak-status.ok { color: var(--groen); }
.taak-status.fout { color: var(--rood); }
.taak-status.bezig { color: var(--blauw); animation: knipper 1s infinite; }
@keyframes knipper { 50% { opacity: .3; } }
.knop-mini { background: var(--blauw-licht); color: var(--blauw); width: 26px; height: 26px; padding: 0 !important; border-radius: 6px; font-size: 11px; }

.review-blok { border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.review-blok ul { margin: 4px 0 0; padding-left: 18px; }
.review-blok.groen { background: var(--groen-licht); color: var(--groen); }
.review-blok.oranje { background: var(--oranje-licht); color: var(--oranje); }
.review-blok.rood { background: var(--rood-licht); color: var(--rood); }

.rapporten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rapport.breed { grid-column: 1 / -1; }
.rapport h2 { margin: 0; font-size: 16px; }
.rapport h3 { font-size: 13px; margin: 14px 0 6px; }
.rapport-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.check-lijst, .lessen { margin: 0 0 8px; padding-left: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; }
.lessen { padding-left: 18px; list-style: disc; }
.review-balk { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--lijn); margin-bottom: 4px; }
.review-balk .groen { background: var(--groen); }
.review-balk .oranje { background: #e59400; }
.review-balk .rood { background: var(--rood); }

@media (max-width: 1100px) {
  .org-midden, .rapporten { grid-template-columns: 1fr; }
  .org-onder { grid-template-columns: 1fr; }
}

/* ---------- Acquisitie-funnel ---------- */
.segment { display: inline-flex; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 3px; gap: 2px; }
.segment button { background: none; color: var(--grijs); padding: 6px 12px; border-radius: 7px; font-weight: 600; }
.segment button.actief { background: var(--navy); color: #fff; }
.trechter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.trechter-stap { position: relative; background: var(--blauw-licht); border-radius: 10px; padding: 14px 12px; text-align: center; }
.trechter-stap:nth-child(n+3) { background: #e3f0ff; }
.trechter-stap:last-child { background: var(--groen-licht); }
.trechter-getal { font-size: 28px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.trechter-naam { font-weight: 700; color: var(--navy); margin: 2px 0; }
.trechter-stap .sub { font-size: 12px; }
.trechter-door { position: absolute; right: -17px; top: 50%; transform: translateY(-50%); z-index: 1; background: #fff; border: 1px solid var(--lijn); border-radius: 99px; font-size: 11px; font-weight: 700; color: var(--blauw); padding: 2px 6px; }
.weekgrafiek { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; align-items: end; margin: 14px 0 8px; }
.week-kolom { text-align: center; }
.week-staaf { height: 140px; position: relative; background: var(--achtergrond); border-radius: 6px; overflow: hidden; }
.week-staaf > div { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 6px 6px 0 0; }
.week-staaf .gebeld { background: #b9c8ff; }
.week-staaf .interesse { background: var(--groen); left: 25%; right: 25%; }
.week-getal { font-size: 12px; font-weight: 600; color: var(--navy); margin-top: 4px; }
.week-kolom .sub { font-size: 11px; }
.stip { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: 0; }
.stip.blauw { background: #b9c8ff; }
.stip.groen { background: var(--groen); }
.funnel-balk { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; color: var(--tekst); text-decoration: none; font-size: 13px; }
.funnel-balk b { color: var(--navy); font-size: 15px; }
.funnel-balk:hover { border-color: #c5d0ea; }
@media (max-width: 1100px) { .trechter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trechter-door { display: none; } }
@media (max-width: 760px) { .trechter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weekgrafiek { gap: 4px; } .funnel-balk .sub { width: 100%; } }

/* ---------- Sales: bord/funnel + chat ---------- */
.sales-indeling { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.sales-hoofd { min-width: 0; }
.sales-chat { position: sticky; top: 12px; height: calc(100vh - 150px); min-height: 480px; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; }
.sales-chat-kop { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--lijn); color: var(--navy); }
.sales-chat #funnel-balk .funnel-balk { margin: 8px 10px 0; width: calc(100% - 20px); cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.sales-chat .chat-lijst { min-height: 0; }
.sales-chat .chat-ballon { max-width: 92%; }
.sales-chat .chat-bel, .sales-chat .chat-actie { max-width: 100%; }
.bord-balk { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.raster.gelijk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.funnel-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1500px) { .funnel-tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.segment .alleen-smal { display: none; }
@media (max-width: 1500px) { .sales-hoofd .raster.gelijk { grid-template-columns: 1fr; } .sales-hoofd .trechter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sales-hoofd .trechter-door { display: none; } }
@media (max-width: 1100px) {
  .segment .alleen-smal { display: inline-block; }
  .sales-indeling { grid-template-columns: 1fr; }
  .sales-indeling.weergave-chat .sales-hoofd, .sales-indeling.weergave-bord .sales-chat, .sales-indeling.weergave-acquisitie .sales-chat { display: none; }
  .sales-chat { position: static; height: calc(100dvh - 190px); }
}
@media (max-width: 760px) {
  main:has(.weergave-chat) { padding-bottom: 0; }
  .sales-kop .sub, .sales-kop .ik-ben { font-size: 0; }
  .sales-kop .ik-ben select { font-size: 14px; }
  .sales-chat { height: calc(100dvh - 170px); border-radius: 10px; }
  .funnel-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Chat: kaarten nooit breder dan het venster. */
.chat-lijst { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.chat-bericht { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.chat-actie, .chat-bel { min-width: 0; overflow-wrap: anywhere; }
/* Voorstellen van de agents in de chat */
.chat-voorstel { background: var(--kaart); border: 1px solid var(--lijn); border-left: 3px solid #8a63ff; border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.chat-voorstel.prio-hoog { border-left-color: #ff5a4f; }
.chat-voorstel details { display: grid; gap: 8px; }
.chat-voorstel details[open] summary { margin-bottom: 6px; }
.chat-voorstel .actie-blok { margin-top: 6px; }
.chat-voorstel .velden { grid-template-columns: 1fr; }
.chat-voorstel .taak-knoppen { display: flex; gap: 8px; }
.chat-voorstel .taak-knoppen button { flex: 1; max-width: 200px; }
/* Sales-chat inklappen (alleen op een breed scherm) */
.chat-uitklap { display: none; }
.chat-kop-knoppen { display: flex; gap: 6px; }
.chat-uitklap span { writing-mode: vertical-rl; font-size: 13px; letter-spacing: 1px; }
.chat-uitklap b { background: #ff5a4f; color: #fff; border-radius: 99px; min-width: 22px; height: 22px; padding: 0 6px; font-size: 12px; display: grid; place-items: center; }
@media (min-width: 1101px) {
  .sales-indeling.chat-dicht { grid-template-columns: minmax(0, 1fr) 54px; }
  .chat-dicht .sales-chat { grid-template-rows: 1fr; height: auto; min-height: 220px; }
  .chat-dicht .sales-chat > :not(.chat-uitklap) { display: none; }
  .chat-dicht .chat-uitklap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; background: none; color: var(--navy); font-weight: 700; font-size: 18px; cursor: pointer; }
  .chat-dicht .chat-uitklap:hover { background: var(--blauw-licht); }
}
@media (max-width: 1100px) { .alleen-breed { display: none !important; } }
.chat-uitklap b[hidden] { display: none; }

/* ---------- Marketing (contentplanner) ---------- */
.mk-doel { font-size: 16px; color: var(--grijs); font-weight: 600; }
.mk-voortgang { height: 6px; background: #eef0f4; border-radius: 99px; margin-top: 8px; overflow: hidden; }
.mk-voortgang i { display: block; height: 100%; background: var(--groen); border-radius: 99px; }
.mk-let { color: var(--oranje); }
.mk-nieuw-tel { color: var(--groen); }
.mk-balk { margin-top: 22px; gap: 12px; flex-wrap: wrap; }
.mk-pijlers { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-chip { background: #fff; color: var(--navy); border: 1px solid var(--lijn); border-radius: 99px; padding: 5px 11px; font-size: 12px; font-weight: 600; }
.mk-chip.actief { background: var(--navy); color: #fff; border-color: var(--navy); }
.mk-chip[style].actief { background: var(--pijler); border-color: var(--pijler); }
.mk-indeling { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.mk-weeknav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-weeknav .sub { margin-left: 6px; }
.mk-weeklabel { margin: 4px 2px 8px; color: var(--navy); }
.mk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.mk-dag { background: #eaeef6; border-radius: 10px; padding: 8px; min-height: 130px; display: flex; flex-direction: column; gap: 6px; }
.mk-dag.vandaag { background: var(--blauw-licht); outline: 2px solid var(--blauw); outline-offset: -2px; }
.mk-dag.verleden { opacity: .75; }
.mk-dag.doel, .mk-plank.doel, .mk-bord .kolom.doel { outline: 2px dashed var(--blauw); outline-offset: -2px; background: var(--blauw-licht); }
.mk-dag-kop { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--grijs); text-transform: capitalize; }
.mk-plus { background: none; color: var(--grijs); padding: 0 6px; font-size: 15px; line-height: 1.2; opacity: 0; }
.mk-dag:hover .mk-plus, .mk-plus:focus-visible { opacity: 1; }
.mk-post { background: #fff; border: 1px solid var(--lijn); border-left: 4px solid var(--pijler); border-radius: 8px; padding: 7px 8px; display: grid; gap: 4px; cursor: pointer; font-size: 12px; min-width: 0; }
.mk-post:hover { box-shadow: 0 2px 8px rgba(12,26,58,.08); }
.mk-post.nieuw { box-shadow: 0 0 0 2px var(--groen-licht); }
.mk-post.geplaatst { opacity: .7; }
.mk-post.suggestie { border-style: dashed; border-left-style: solid; background: #fbfcff; }
.mk-post.wordt-gesleept { opacity: .4; }
.mk-post-kop { display: flex; gap: 6px; align-items: start; }
.mk-dag .mk-emoji { display: none; }
.mk-dag .mk-post { padding: 6px 7px; }
.mk-post-kop strong { color: var(--navy); font-size: 13px; line-height: 1.3; flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.mk-post-meta { color: var(--grijs); font-size: 11px; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.mk-post-meta .pil { font-size: 10px; padding: 1px 6px; }
.mk-haak { color: var(--tekst); line-height: 1.4; }
.mk-bron { color: var(--grijs); font-size: 11px; }
.mk-beeld { width: 100%; max-height: 110px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--lijn); }
.mk-beeld.groot { max-height: 220px; }
.mk-plank { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.mk-plank-lijst { display: grid; gap: 8px; }
.mk-snel { display: flex; gap: 6px; }
.mk-snel input { flex: 1; min-width: 0; }
.mk-formats ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; }
.mk-bord { grid-auto-columns: minmax(240px, 1fr); cursor: default; }
.mk-bord .kolom { display: flex; flex-direction: column; gap: 8px; }
.mk-dialoog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.mk-tekstblok { display: grid; gap: 10px; align-content: start; }
.mk-tekstknoppen { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-tekstknoppen input { flex: 1; min-width: 140px; }
.mk-kanalen { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.mk-kanalen .sub { width: 100%; font-size: 12px; }
.mk-toestemming { background: var(--oranje-licht); padding: 8px 10px; border-radius: 8px; }
.mk-weg { margin-right: auto; color: var(--rood); }
@media (max-width: 1300px) { .mk-indeling { grid-template-columns: 1fr; } .mk-plank { position: static; max-height: none; } }
@media (max-width: 900px) {
  .mk-week { grid-template-columns: 1fr; gap: 6px; }
  .mk-dag { min-height: 0; }
  .mk-dag.verleden:not(:has(.mk-post)) { display: none; }
  .mk-plus { opacity: 1; }
  .mk-dialoog { grid-template-columns: 1fr; }
}

/* ---------- Website (eigen site) ---------- */
.web-kern { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.web-interview { display: grid; gap: 10px; padding: 16px; }
.web-onderwerpen { display: flex; flex-wrap: wrap; gap: 5px; }
.web-onderwerpen .pil { font-size: 11px; }
.web-chat { max-height: 52vh; min-height: 220px; border-radius: 10px; border: 1px solid var(--lijn); }
.web-chat .chat-ballon p { margin: 0 0 6px; }
.web-chat .chat-ballon p:last-child { margin: 0; }
.web-wie { font-size: 11px; opacity: .8; margin-bottom: 3px; }
.web-interview .chat-invoer { border: 0; padding: 0; background: none; }
.web-verhaal { display: grid; gap: 10px; align-content: start; }
.web-verhaal textarea { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; }
.leeg-uitleg { color: var(--tekst); line-height: 1.55; }
.web-paginas { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.web-lijst { display: grid; gap: 6px; position: sticky; top: 16px; }
.web-pag { background: #fff; color: var(--tekst); border: 1px solid var(--lijn); border-radius: 10px; padding: 9px 12px; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-weight: 400; }
.web-pag strong { color: var(--navy); width: 100%; }
.web-pag .sub { font-size: 11px; }
.web-pag.actief { border-color: var(--blauw); box-shadow: 0 0 0 2px var(--blauw-licht); }
.web-detail { display: grid; gap: 12px; min-width: 0; }
.web-herschrijf { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.web-herschrijf input { flex: 1; min-width: 220px; }
.web-oordeel { margin-top: 14px; padding: 12px 14px; background: var(--blauw-licht); border-radius: 10px; font-size: 13px; line-height: 1.5; }
.web-oordeel p { margin: 4px 0; }
.web-oordeel ul { margin: 6px 0 0; padding-left: 18px; }
.web-kop { margin: 10px 0 0; color: var(--navy); font-size: 15px; }
.web-voorstel { display: grid; gap: 8px; padding: 14px 16px; }
.web-oud { color: var(--grijs); text-decoration: line-through; text-decoration-color: rgba(194,53,43,.5); font-size: 13px; line-height: 1.45; }
b.code { font-weight: 600; color: var(--blauw); font-family: Consolas, monospace; font-size: 11px; }
.web-klaar { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--lijn); border-left: 3px solid var(--groen); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
.web-klaar > span:not(.web-oud) { flex: 1; }
.web-klaar .web-oud { flex: 1; }
.web-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.web-foto { margin: 0; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; display: grid; }
.web-foto img { width: 100%; height: 150px; object-fit: cover; object-position: top; background: #eef0f4; }
.web-foto figcaption { padding: 8px; display: grid; gap: 6px; font-size: 12px; }
.web-alles summary { cursor: pointer; }
.web-blok { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--lijn); font-size: 13px; line-height: 1.45; }
.web-blok:has(textarea) { grid-template-columns: 1fr; }
.web-beeld { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.web-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 2px dashed #c5d0ea; border-radius: var(--radius); padding: 18px; background: #fff; cursor: pointer; color: var(--tekst); font-size: 14px; }
.web-upload.doel { border-color: var(--blauw); background: var(--blauw-licht); }
.web-upload select { width: auto; }
.beeld-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.bb-foto { background: #fff; color: var(--tekst); border: 1px solid var(--lijn); border-radius: 10px; padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: left; font-weight: 400; }
.bb-foto:hover { box-shadow: 0 2px 10px rgba(12,26,58,.1); filter: none; }
.bb-foto img { width: 100%; height: 130px; flex: none; object-fit: cover; background: #eef0f4; }
.beeld-info { display: grid; gap: 3px; padding: 7px 9px; font-size: 11px; color: var(--grijs); }
.beeld-info strong { color: var(--navy); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beeld-info .pil { justify-self: start; font-size: 10px; }
.beeld-groot { width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; background: #eef0f4; }
.web-fotodag { display: grid; gap: 10px; position: sticky; top: 16px; }
.web-shots { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; max-height: 50vh; overflow-y: auto; }
.web-publijst { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; }
.web-let { background: var(--oranje-licht); color: var(--oranje); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin: 10px 0; }
dialog.kiezer form { max-height: 86vh; overflow-y: auto; }
.mk-afbeelding { display: grid; gap: 6px; justify-items: start; }
@media (max-width: 1100px) {
  .web-kern, .web-paginas, .web-beeld { grid-template-columns: 1fr; }
  .web-lijst { position: static; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .web-fotodag { position: static; }
}