/* Huisstijl van de campaign builder: licht papier, zwarte tekst, het geel van
   het logo als accent, Montserrat voor koppen en Inter voor tekst. Het logo is
   wit met geel en staat daarom op de donkere kopbalk. Lopende tekst is zwart,
   geen grijs. */
:root {
  --inkt: #000;
  --papier: #f4f4f2;
  --kaart: #fff;
  --vlak: #f7f7f5;
  --rand: #d9d9d3;
  --rand-sterk: #000;
  --accent: #ffea00;
  --donker: #0d0d0d;
  --fout: #b3261e;
  --fout-vlak: #fdecea;
  --goed: #1b7a3d;
  --goed-vlak: #e7f4ec;
  --radius: 10px;
  --schaduw: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --kop: "Montserrat", system-ui, sans-serif;
  --tekst: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--papier); }

body {
  margin: 0;
  color: var(--inkt);
  background: var(--papier);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--kop); line-height: 1.2; margin: 0; }
h1 { font-size: 30px; font-weight: 800; }
h2 { font-size: 21px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }

[hidden] { display: none !important; }

/* Voor schermlezers en wachtwoordbeheerders, niet voor het oog. De !important
   is nodig: `input[type="email"]` hieronder is specifieker en zet width: 100%,
   en dan duwt dit veld de pagina breder dan het scherm. */
.onzichtbaar {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ---- kopbalk ---- */

.kopbalk {
  background: var(--donker);
  color: #fff;
}
.kopbalk-binnen {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.kopbalk img { height: 40px; width: auto; display: block; }
.kopbalk-rechts { display: flex; align-items: center; gap: 20px; font-size: 14px; }
/* De knoppen in de kopbalk: pillen met de koppenletter. Hulp springt eruit
   in het geel, Uitloggen blijft rustig. */
.kopbalk-rechts button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--kop);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.kopbalk-rechts button:hover { background: rgba(255, 255, 255, 0.2); }
.kopbalk-rechts button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kopbalk-rechts .hulp-open { background: var(--accent); color: var(--inkt); padding: 8px 16px 8px 12px; }
.kopbalk-rechts .hulp-open:hover { background: #fff27a; transform: translateY(-1px); }
.kopbalk-rechts .uitloggen { background: transparent; color: rgba(255, 255, 255, 0.75); padding: 8px 4px; }
.kopbalk-rechts .uitloggen:hover { background: transparent; color: #fff; }

/* ---- indeling ---- */

.pagina { max-width: 1040px; margin: 0 auto; padding: 32px 20px 120px; }
.pagina.breed { max-width: 1040px; }

.kaart {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 24px;
}
.stapel > * + * { margin-top: 16px; }
.stapel-groot > * + * { margin-top: 28px; }

.terug { display: inline-block; font-size: 14px; font-weight: 600; text-decoration: none; margin-bottom: 18px; }
.terug:hover { text-decoration: underline; }

.onderkop { margin-top: 6px; font-size: 17px; }

/* ---- knoppen en velden ---- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--inkt);
  border-radius: 8px;
  background: var(--accent);
  color: var(--inkt);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
}
.knop:hover { background: #fff27a; }
.knop:disabled { opacity: 0.5; cursor: default; }
.knop.rustig { background: var(--kaart); }
.knop.rustig:hover { background: var(--vlak); }
.knop.klein { font-size: 13px; padding: 6px 12px; border-width: 1.5px; }

.veld { display: block; }
.veld > span { display: block; font-weight: 600; margin-bottom: 6px; }

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  font: inherit;
  color: var(--inkt);
  background: var(--kaart);
  border: 1.5px solid var(--rand);
  border-radius: 8px;
  padding: 10px 12px;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
textarea[readonly] { background: var(--vlak); resize: none; }

input:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: none;
  border-color: var(--rand-sterk);
  box-shadow: 0 0 0 3px var(--accent);
}

.melding {
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 500;
}
.melding.fout { background: var(--fout-vlak); color: var(--fout); }
.melding.goed { background: var(--goed-vlak); color: var(--goed); }
.melding.info { background: var(--vlak); border: 1px solid var(--rand); }

/* ---- status-labels ---- */

.label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1.5px solid var(--inkt);
}
.label.concept { background: var(--kaart); }
.label.agent_leest { background: var(--vlak); }
.label.vervolgvragen { background: #fff6a6; }
.label.ingediend { background: var(--accent); }

/* ---- inloggen en wachtwoord ---- */

.inlog { max-width: 440px; margin: 56px auto; padding: 0 20px; }
.inlog h1 { font-size: 26px; margin-bottom: 8px; }
.inlog form { margin-top: 22px; }
.inlog .knop { width: 100%; margin-top: 6px; }
.inlog .klein-tekst { font-size: 14px; margin-top: 18px; }

/* ---- overzicht ---- */

.overzicht-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.overzicht-kop > div { flex: 1 1 420px; max-width: 680px; }
.overzicht-kop > .knop { flex: none; }

.doc-lijst { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; }
.doc-lijst li + li { margin-top: 12px; }
.doc-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.doc-rij h3 { font-size: 18px; }
.doc-meta { font-size: 14px; margin-top: 4px; }
.doc-meta .label { margin-right: 8px; vertical-align: 1px; }

.leeg { text-align: center; padding: 40px 24px; }
.leeg p + p { margin-top: 8px; }

/* ---- het formulier ---- */

.status-banner { border: 2px solid var(--inkt); background: var(--accent); border-radius: var(--radius); padding: 16px 18px; font-weight: 500; }
.status-banner p + p { margin-top: 6px; }

/* Het blok vervolgvragen staat bovenaan en valt op: daar moet de klant nu iets. */
.sectie.vervolg { border: 2px solid var(--inkt); }
.overgeslagen { margin-top: 8px; font-style: italic; }

.intro p + p { margin-top: 10px; }

.sectie h2 { padding-bottom: 14px; border-bottom: 3px solid var(--accent); margin-bottom: 20px; }
.sectie-intro { margin: -6px 0 18px; font-weight: 500; }

.vraag + .vraag { margin-top: 26px; }
.vraag label { display: block; font-weight: 700; }
.vraag .toelichting { margin-top: 2px; }
.vraag textarea { margin-top: 10px; }

/* Arbeidsvoorwaarden: in het sjabloon een tabel, onderwerp links en antwoord
   rechts. Op een smal scherm onder elkaar. */
.sectie.kort .vraag { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
.sectie.kort .vraag + .vraag { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); }
.sectie.kort .vraag label { padding-top: 10px; }
.sectie.kort textarea { margin-top: 0; min-height: 46px; }
@media (max-width: 640px) {
  .sectie.kort .vraag { grid-template-columns: 1fr; gap: 6px; }
  .sectie.kort .vraag label { padding-top: 0; }
}

.voetbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--kaart);
  border-top: 1px solid var(--rand);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}
.voetbalk-binnen {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.opslagstatus { font-size: 14px; font-weight: 500; }
.opslagstatus.fout { color: var(--fout); }
.voortgang { font-size: 14px; }

/* ---- beheer ---- */

.inline-formulier { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.inline-formulier .veld { flex: 1 1 260px; }

.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { text-align: left; font-family: var(--kop); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px 8px 0; border-bottom: 2px solid var(--inkt); }
.tabel td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabel td.acties { text-align: right; white-space: nowrap; }
.tabel td.acties > * + * { margin-left: 6px; }
.tabel-leeg { font-size: 14px; }

.klant-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.subkop { font-family: var(--kop); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 22px 0 6px; }
.mail-fout { color: var(--fout); font-weight: 600; }

/* ---- dialogen ---- */

dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  color: var(--inkt);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.dialoog { padding: 24px; }
.dialoog h2 { margin-bottom: 10px; padding-right: 32px; }
.dialoog form > * + * { margin-top: 14px; }
.dialoog-knoppen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.sluit {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.sluit:hover { background: var(--vlak); }
.link-vak {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ---- wachten op de agent en de vervolgvragen één voor één ---- */

.klein { font-size: 14px; }

/* Een nieuw scherm (wachten, vragen, document) vervaagt in beeld. */
.verschijn { animation: verschijn 0.4s ease both; }
@keyframes verschijn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.wacht { text-align: center; padding: 56px 24px; }
.wacht h2 { margin-top: 22px; }
.wacht p { margin-top: 8px; }
.wacht .klein { margin-top: 18px; }

/* Drie stippen die om de beurt oplichten: de agent is bezig. */
.laden { display: inline-flex; gap: 10px; }
.laden span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--inkt);
  animation: stip 1.2s ease-in-out infinite;
}
.laden span:nth-child(2) { animation-delay: 0.15s; }
.laden span:nth-child(3) { animation-delay: 0.3s; }
@keyframes stip {
  0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; }
  40% { transform: scale(1); opacity: 1; background: var(--accent); box-shadow: 0 0 0 2px var(--inkt); }
}

.wizard { border: 2px solid var(--inkt); }
.wizard-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.teller { font-size: 14px; font-weight: 600; }
.wizard > p { margin-top: 8px; }

.voortgangsbalk {
  height: 8px;
  margin: 18px 0 26px;
  border: 1px solid var(--inkt);
  border-radius: 999px;
  overflow: hidden;
  background: var(--kaart);
}
.voortgangsbalk > div { height: 100%; width: 0; background: var(--accent); transition: width 0.35s ease; }

.stap-vak { overflow: hidden; }
.stap.vooruit { animation: vanRechts 0.3s ease both; }
.stap.achteruit { animation: vanLinks 0.3s ease both; }
@keyframes vanRechts {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes vanLinks {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

.wizard-vraag { display: block; font-family: var(--kop); font-size: 20px; font-weight: 700; line-height: 1.3; }
.stap .toelichting { margin-top: 6px; }
.stap textarea { margin-top: 14px; }
.wizard-knoppen { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.wizard .opslagstatus { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .verschijn, .stap.vooruit, .stap.achteruit, .laden span { animation: none; }
  .voortgangsbalk > div { transition: none; }
}

/* ---- de teksten van de agent ---- */

.teksten-kop { margin: 24px 0 10px; }
.sectie.teksten .sectie-intro + .teksten-kop { margin-top: 0; }
.tekst { border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; }
.tekst + .tekst { margin-top: 14px; }
.tekst-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}
.tekst-kop h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
/* De witregels en emoji's uit de tekst blijven staan zoals de agent ze schreef. */
.tekst-inhoud { white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px 16px; }

/* ---- goedkeuren en afkeuren ---- */

.tekst-acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.tekst-label {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border: 1.5px solid var(--inkt);
  border-radius: 999px;
  background: var(--kaart);
  white-space: nowrap;
}
.tekst-label.goed { background: var(--goed-vlak); color: var(--goed); border-color: var(--goed); }
.tekst-label.bezig { background: #fff6a6; }
.tekst.stand-goedgekeurd { border-color: var(--goed); }
.tekst.stand-goedgekeurd .tekst-kop { background: var(--goed-vlak); }
.tekst.stand-herschrijven,
.tekst.stand-nalopen { border: 2px solid var(--inkt); }
.tekst-voet { display: grid; gap: 12px; padding: 12px 16px 14px; border-top: 1px solid var(--rand); }
.tekst-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.tekst-wacht { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.tekst-wacht .laden { gap: 6px; flex: none; }
.tekst-wacht .laden span { width: 8px; height: 8px; }

.feedback summary,
.oude-tekst summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.feedback ol { display: grid; gap: 14px; margin: 10px 0 0; padding-left: 20px; }
.feedback-meta { font-size: 13px; font-weight: 600; }
.feedback-uitleg { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.oude-tekst { margin-top: 6px; }
.oude-tekst summary { font-weight: 500; font-size: 13px; }
.oude-tekst .tekst-inhoud { margin-top: 6px; font-size: 14px; background: var(--vlak); border: 1px solid var(--rand); border-radius: 6px; }

/* Het venster voor afkeuren: vinkjes, uitleg en voor wie het geldt. */
#afkeur-dialoog { max-height: calc(100vh - 32px); overflow-y: auto; }
#tekst-bewerk-dialoog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
#tekst-bewerk-uitleg { margin-bottom: 16px; }
#tekst-bewerk-veld { width: 100%; min-height: 260px; resize: vertical; }
.tekst-vergelijk { margin-top: 16px; }
.tekst-vergelijk .tekst-inhoud { border: 1px solid var(--rand); border-radius: 6px; margin: 8px 0; }
.keuzes { border: none; margin: 18px 0 0; padding: 0; min-width: 0; }
.keuzes legend,
.keuzes-kop { display: block; font-weight: 700; margin-bottom: 6px; padding: 0; }
fieldset.keuzes label { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; cursor: pointer; }
fieldset.keuzes input { flex: none; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--inkt); }
fieldset.keuzes small { display: block; font-size: 13px; }

/* ---- welkom en hulp ---- */

/* Het welkom bovenaan de startpagina's: een donkere band over de hele
   breedte onder de kopbalk, met de voornaam in het geel van het logo. De
   tekst staat op dezelfde lijn als het logo en de inhoud. */
.welkom {
  background: var(--donker);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 4px solid var(--accent);
}
.welkom-binnen { max-width: 1040px; margin: 0 auto; padding: 36px 20px 40px; }
.welkom-groet { font-family: var(--kop); font-size: 34px; font-weight: 800; line-height: 1.15; }
.welkom-groet span { color: var(--accent); }

.hulp-open svg { width: 17px; height: 17px; stroke-width: 2.4; }

dialog.hulp-venster { width: min(420px, calc(100vw - 32px)); }
.hulp-venster h2 { margin-bottom: 18px; }
.contact-knoppen { display: grid; gap: 10px; }
.contact-knop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 2px solid var(--inkt);
  border-radius: 12px;
  background: var(--kaart);
  color: var(--inkt);
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.contact-knop:hover { background: var(--accent); transform: translateY(-1px); }
.contact-knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.contact-icoon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--inkt);
  color: var(--accent);
}
.contact-knop.whatsapp .contact-icoon { background: #25d366; color: #fff; }
.contact-icoon svg { width: 22px; height: 22px; }
.contact-tekst { display: flex; flex-direction: column; min-width: 0; }
.contact-tekst strong { font-family: var(--kop); font-size: 16px; }
.contact-tekst span { font-size: 14px; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .welkom-binnen { padding: 26px 20px 30px; }
  .welkom-groet { font-size: 28px; }
}