/* Beheer: rustig, links uitgelijnd, één brede kolom. */
body.beheer { font-size: 15px; }
.balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(16px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid var(--lijn); background: var(--papier); position: sticky; top: 0; z-index: 10; }
.woordmerk { font-weight: 800; font-size: 19px; letter-spacing: -0.025em; font-stretch: 85%; color: var(--inkt); text-decoration: none; }
.vlak { max-width: 1120px; margin: 0 auto; padding: 28px 16px 80px; }
@media (min-width: 1152px) { .vlak { padding-inline: 0; } }

h1, h2, h3 { color: var(--inkt); letter-spacing: -0.015em; text-wrap: balance; }
.paginatitel { font-size: 30px; font-weight: 750; margin: 0 0 22px; letter-spacing: -0.025em; }
h2 { font-size: 19px; font-weight: 700; margin: 32px 0 10px; }
h3 { font-size: 16px; font-weight: 650; margin: 0 0 10px; }
.klein { font-size: 13.5px; color: var(--mos); }
.stil { color: var(--mos); }

/* formulierkop met tabs */
.formkop { margin-bottom: 26px; border-bottom: 1px solid var(--lijn); }
.formkop-regel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.formkop h1 { font-size: 28px; font-weight: 750; letter-spacing: -0.025em; margin: 0; }
.formkop-regel .knop { margin-left: auto; }
.tabs { display: flex; gap: 26px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 8px 0 12px; color: var(--mos); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--inkt); }
.tabs a[aria-current="page"] { color: var(--inkt); border-bottom-color: var(--kobalt); }
.teller { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--lijn-zacht); color: var(--mos); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

/* knoppen */
button, .knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 9px; border: 1.5px solid var(--kobalt); background: var(--kobalt); color: var(--op-kobalt); font-weight: 650; font-size: 14.5px; text-decoration: none; cursor: pointer; white-space: nowrap; }
button:hover, .knop:hover { background: var(--kobalt-diep); border-color: var(--kobalt-diep); }
button.stil, .knop.stil { background: transparent; color: var(--inkt); border-color: var(--lijn); }
button.stil:hover, .knop.stil:hover { border-color: var(--inkt); background: transparent; }
button.gevaar { background: transparent; color: var(--rood); border-color: color-mix(in srgb, var(--rood) 40%, var(--lijn)); }
button.gevaar:hover { background: var(--rood-zacht); border-color: var(--rood); }
.klein-knop { height: 34px; padding: 0 12px; font-size: 13.5px; }
button:disabled { opacity: .55; cursor: not-allowed; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }

/* velden */
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.veld > span, .veld > label > span, legend { font-weight: 600; font-size: 14px; }
input[type=text], input[type=email], input[type=date], input[type=number], input[type=tel], select, textarea {
  width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid var(--lijn); border-radius: 9px; background: var(--vel); font-size: 15px; }
textarea { height: auto; min-height: 80px; padding: 9px 12px; line-height: 1.45; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--kobalt); box-shadow: var(--focus); }
input[type=checkbox], input[type=radio] { accent-color: var(--kobalt); width: 17px; height: 17px; margin: 0; }
.smal { max-width: 480px; }
.rij { display: flex; gap: 8px; align-items: center; }
.rij > select, .rij > input { flex: 1; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { margin-bottom: 8px; }

/* sjablonen */
.sjablonen { display: grid; gap: 8px; }
.sjabloon { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--lijn); border-radius: 12px; background: var(--vel); cursor: pointer; }
.sjabloon:has(input:checked) { border-color: var(--kobalt); background: var(--kobalt-zacht); }
.sjabloon input { margin-top: 3px; }
.sjabloon > span { display: flex; flex-direction: column; gap: 2px; }

/* status */
.status { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.status-live, .astatus-klaar { background: var(--groen-zacht); color: var(--groen); }
.status-concept, .astatus-bezig { background: var(--amber-zacht); color: var(--amber); }
.status-gesloten { background: var(--lijn-zacht); color: var(--mos); }
.astatus-nieuw { background: var(--kobalt-zacht); color: var(--kobalt); }
.toon-goed { color: var(--groen); }
.toon-matig { color: var(--amber); }
.toon-slecht { color: var(--rood); }

/* meldingen */
.melding { padding: 12px 16px; border-radius: 10px; background: var(--kobalt-zacht); color: var(--inkt); margin: 0 0 18px; border-left: 4px solid var(--kobalt); }
.melding.goed { background: var(--groen-zacht); border-left-color: var(--groen); }
.melding.fout { background: var(--rood-zacht); border-left-color: var(--rood); }

/* tabellen */
.tabelvak { overflow-x: auto; border-top: 1.5px solid var(--inkt); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-size: 13px; font-weight: 600; color: var(--mos); }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; }
.rijlink { font-weight: 650; color: var(--inkt); text-decoration: none; }
.rijlink:hover { color: var(--kobalt); text-decoration: underline; }
tr.gekozen td { background: var(--kobalt-zacht); }
tr.gekozen td:first-child { box-shadow: inset 3px 0 var(--kobalt); padding-left: 10px; }

/* leeg */
.leeg { padding: 48px 0; max-width: 520px; }
.leeg h1, .leeg h2 { margin-top: 0; }
.leeg p { color: var(--mos); }
.klein-leeg { padding: 32px 24px; border: 1.5px dashed var(--lijn); border-radius: 12px; }

/* indeling */
.twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: start; }
.twee-smal { grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 860px) { .twee, .twee-smal { grid-template-columns: 1fr; gap: 24px; } }
.twee > section > h2:first-child { margin-top: 0; }
.cijferregel { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; color: var(--mos); margin: 0 0 24px; }
.cijferregel strong { color: var(--inkt); font-size: 20px; font-weight: 750; margin-right: 4px; font-variant-numeric: tabular-nums; }
.cijferregel .knop { margin-left: auto; }

/* mail */
.mailvak h2 { margin-top: 0; }
.mailmeta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 14px; }
.mailmeta dt { color: var(--mos); }
.mailmeta dd { margin: 0; font-weight: 600; }
.mailvoorbeeld { width: 100%; height: 440px; border: 1.5px solid var(--lijn); border-radius: 12px; background: #EEF1EC; }
details.uitleg { margin-top: 24px; border-top: 1px solid var(--lijn); padding-top: 12px; }
details.uitleg summary { cursor: pointer; font-weight: 650; }
details.uitleg p { color: var(--mos); }
pre { background: var(--vel); border: 1px solid var(--lijn); border-radius: 8px; padding: 12px; overflow-x: auto; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
code { font-size: .92em; background: var(--lijn-zacht); padding: 1px 5px; border-radius: 4px; }

/* resultaten */
.blokken { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 0 48px; }
.blok { padding: 22px 0 18px; border-top: 1.5px solid var(--inkt); }
.blok-nps { grid-column: 1 / -1; }
.nps-groot { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; margin: 4px 0 18px; }
.nps-cijfer { font-size: clamp(64px, 10vw, 112px); font-weight: 800; font-stretch: 78%; letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.nps-uitleg { flex: 1; min-width: 260px; }
.nps-balk { display: flex; height: 18px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--lijn-zacht); }
.nps-balk span { min-width: 0; }
.d { background: var(--rood); } .p { background: var(--amber); } .g { background: var(--groen); }
.nps-legenda { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--mos); }
.nps-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.nps-legenda strong { color: var(--inkt); }
.verdeling { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; height: 120px; align-items: end; max-width: 640px; }
.kolom { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.staaf { display: block; border-radius: 4px 4px 0 0; min-height: 2px; }
.as { text-align: center; font-size: 12.5px; color: var(--mos); padding-top: 4px; font-variant-numeric: tabular-nums; }
.balken { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.balken li { display: grid; grid-template-columns: minmax(80px, 38%) 1fr 36px; gap: 12px; align-items: center; font-size: 14px; }
.balken .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spoor { height: 10px; background: var(--lijn-zacht); border-radius: 3px; overflow: hidden; }
.spoor span { display: block; height: 100%; background: var(--kobalt); border-radius: 3px; }
.balken .n { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.gemiddeld { font-size: 40px; font-weight: 800; font-stretch: 80%; letter-spacing: -0.03em; margin: 0 0 12px; line-height: 1; }
.gemiddeld span { font-size: 18px; color: var(--mos); font-weight: 600; letter-spacing: 0; }
.citaten { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.citaten li { padding-left: 14px; border-left: 3px solid var(--kobalt-zacht); white-space: pre-line; }

/* antwoorden */
.filterbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.filters { display: flex; gap: 4px; flex-wrap: wrap; }
.filters a { padding: 6px 12px; border-radius: 8px; color: var(--mos); text-decoration: none; font-weight: 600; font-size: 14px; }
.filters a[aria-current="true"] { background: var(--vel); color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--lijn); }
.antwoordlijst { margin: 0; }
.qa { padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.qa dt { color: var(--mos); font-size: 14px; margin-bottom: 4px; }
.qa dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.zijvak { position: sticky; top: 84px; display: grid; gap: 18px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.kv dt { color: var(--mos); text-transform: capitalize; }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* bouwer */
.bouwer { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .bouwer { grid-template-columns: 1fr; } }
.bouwer-lijst { position: sticky; top: 84px; display: grid; gap: 4px; max-height: calc(100vh - 110px); overflow-y: auto; padding-bottom: 8px; }
@media (max-width: 900px) { .bouwer-lijst { position: static; max-height: none; } }
.lijst-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 9px; border: 1.5px solid transparent; background: transparent; color: var(--inkt); font-weight: 500; text-align: left; height: auto; cursor: pointer; white-space: normal; }
.lijst-item:hover { background: var(--vel); border-color: var(--lijn); }
.lijst-item[aria-current="true"] { background: var(--vel); border-color: var(--kobalt); }
.lijst-item .nr { font-size: 13px; color: var(--mos); font-weight: 700; font-variant-numeric: tabular-nums; }
.lijst-item .tt { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
.lijst-item .tp { font-size: 12px; color: var(--mos); }
.lijst-item .logica { color: var(--kobalt); font-size: 12px; }
.lijst-kop { font-size: 13px; color: var(--mos); font-weight: 600; margin: 14px 0 4px 10px; }
.lijst-kop:first-child { margin-top: 0; }
.toevoegen { margin-top: 8px; }
.toevoegen select { height: 40px; }
.bewerker { background: var(--vel); border: 1.5px solid var(--lijn); border-radius: 14px; padding: 24px; }
.bewerker h2 { margin-top: 0; }
.bewerker .rij-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.vinkveld { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0 14px; cursor: pointer; }
.voorwaarde { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .voorwaarde { grid-template-columns: 1fr; } }
.opslaanbalk { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; margin-top: 24px; background: var(--papier); border-top: 1px solid var(--lijn); grid-column: 1 / -1; z-index: 5; }
.opslaanbalk .stand { color: var(--mos); font-size: 14px; }
.opslaanbalk .stand.vuil { color: var(--amber); font-weight: 600; }
.foutlijst { margin: 0 0 16px; padding: 12px 16px 12px 34px; border-radius: 10px; background: var(--rood-zacht); color: var(--rood); }
.hulp { color: var(--mos); font-size: 13.5px; margin: -6px 0 14px; }
.plaatshouders code { cursor: copy; }

@media (max-width: 640px) {
  .paginatitel, .formkop h1 { font-size: 24px; }
  .formkop-regel .knop { margin-left: 0; }
  th, td { padding-right: 10px; font-size: 14px; }
  .bewerker { padding: 18px 16px; }
  .cijferregel .knop { margin-left: 0; }
}

/* Inloggen en de balk rechtsboven */
.balk-rechts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.balk-rechts form { margin: 0; display: flex; gap: 6px; align-items: center; }
.orgnaam { font-weight: 650; font-size: 14px; }
.orgkeuze select { font: inherit; font-size: 14px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--lijn); background: var(--papier); color: var(--inkt); }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inlogvak { max-width: 380px; margin: 8vh auto 0; }
.inlogvak form { display: grid; gap: 14px; }
@media (max-width: 640px) { .balk { flex-wrap: wrap; } .ik { display: none; } }

/* instellingen */
.blok h2 { margin: 0 0 6px; }
.blok { scroll-margin-top: 80px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0 4px 0 0; }
td.acties { text-align: right; white-space: nowrap; }
.toevoegen.rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 14px; }
.toevoegen.rij .veld { flex: 1 1 180px; margin: 0; }
.eenmalig { border: 2px solid var(--kobalt, #2B4BD9); }
.kopieer { display: flex; gap: 8px; }
.kopieer input { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.termijnen { border: 0; padding: 0; margin: 12px 0; }
.termijn { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
details.log { margin-top: 14px; }