/* Klantenzone (module klantenzone): eigen, lichte stijl op de tokens van style.css. Geen inline css (CSP). */
:root {
  --kz-navy: #0A1329;
  --kz-navy-2: #111c3a;
  --kz-grey: #F4F6F9;
  --kz-blue: #1A3A8F;
  --kz-blue-2: #1F44A0;
  --kz-red: #DE2D2F;
  --kz-red-donker: #c92325;
  --kz-ink: #0A1329;
  --kz-muted: #5b6478;
  --kz-line: rgba(10, 19, 41, .1);
  --kz-groen: #1a7f37;
  --kz-groen-licht: #e6f4ea;
  --kz-rood-licht: #fdecea;
  --kz-radius: 10px;
  --kz-radius-knop: 8px;
  --kz-display: "Poppins", system-ui, sans-serif;
  --kz-text: "Source Sans 3", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.kz { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--kz-grey); color: var(--kz-ink); font-family: var(--kz-text); font-size: 17px; line-height: 1.55; }
.kz a { color: var(--kz-blue-2); }
.kz-skip { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; z-index: 10; }
.kz-skip:focus { left: 8px; }

/* Kop */
.kz-kop { background: var(--kz-navy); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); background-image: radial-gradient(circle at 85% -40%, rgba(31, 68, 160, .55), transparent 55%); }
.kz-kop-binnen { position: relative; max-width: 1400px; margin: 0 auto; padding: 0 20px; height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.kz-kop a { color: #dfe5f5; text-decoration: none; } /* wint van .kz a (blauw) voor logo, naamchip en menu */
.kz-logo { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.kz .kz-logo { color: #fff; }
.kz-logo img { height: 42px; width: auto; display: block; }
.kz-logo span { font-family: var(--kz-display); font-weight: 600; font-size: 15px; letter-spacing: .02em; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .25); line-height: 1.2; }
.kz-nav { display: flex; align-items: center; gap: 18px; min-width: 0; }
.kz-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.kz-nav-links a { display: block; padding: 9px 16px; border-radius: 999px; color: #dfe5f5; text-decoration: none; font: 500 15px/1 var(--kz-display); white-space: nowrap; transition: background .2s, color .2s; }
.kz-nav-links a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.kz-nav-links a.kz-actief { background: #fff; color: var(--kz-navy); }
.kz-nav-cta { display: flex; align-items: center; gap: 14px; }
.kz-wie { color: #dfe5f5; font: 500 14px/1.2 var(--kz-display); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; padding: 9px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.kz-kop .kz-wie:hover, .kz-kop .kz-wie.kz-actief { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.kz-afmelden-form { margin: 0; display: inline; }
.kz-afmelden { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--kz-radius-knop); padding: 10px 16px; font: 600 14px/1 var(--kz-display); cursor: pointer; transition: background .2s, border-color .2s; }
.kz-afmelden:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.kz-burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: transparent; cursor: pointer; position: relative; flex: none; }
.kz-burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, top .25s; }
.kz-burger span:nth-child(1) { top: 18px; }
.kz-burger span:nth-child(2) { top: 26px; }
.kz-kop.kz-open .kz-burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.kz-kop.kz-open .kz-burger span:nth-child(2) { top: 22px; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .kz-burger { display: block; }
  .kz-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 16px 20px; background: var(--kz-navy); border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); }
  .kz-kop.kz-open .kz-nav { display: flex; }
  .kz-nav-links { flex-direction: column; align-items: stretch; gap: 2px; padding: 6px; border-radius: 14px; }
  .kz-nav-links a { padding: 12px 14px; border-radius: 10px; white-space: normal; }
  .kz-nav-cta { justify-content: space-between; }
  .kz-wie { max-width: none; }
}

.kz-meekijk { background: #fff3cd; color: #5c4300; border-bottom: 1px solid #f1d58a; font-size: 15px; }
.kz-meekijk-binnen { max-width: 1400px; margin: 0 auto; padding: 10px 20px; }

/* Inhoud */
.kz-main { flex: 1 0 auto; width: 100%; max-width: 1400px; /* zo breed als het domeinbeheer (gebruiker 2026-11-10) */ margin: 0 auto; padding: 36px 20px 48px; }
.kz h1 { font-family: var(--kz-display); font-weight: 800; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 8px; }
.kz h2 { font-family: var(--kz-display); font-weight: 700; font-size: 20px; margin: 0 0 12px; }
.kz-sub { color: var(--kz-muted); margin: 0 0 22px; }
.kz-kaart { background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-radius); padding: 26px 28px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(10, 19, 41, .04); }
.kz-kaart p:last-child { margin-bottom: 0; }
.kz-smal { max-width: 460px; margin: 6vh auto 0; }
.kz-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
/* In een raster regelt gap de afstand; de kaartmarge erbij gaf dubbele ruimte tussen de rijen */
.kz-raster > .kz-kaart { margin-bottom: 0; }
.kz-leeg { color: var(--kz-muted); font-style: italic; }

/* Formulieren */
.kz label { display: block; font-weight: 600; font-size: 15px; margin: 16px 0 6px; }
.kz input[type=text], .kz input[type=email], .kz input[type=password], .kz textarea, .kz select { width: 100%; padding: 12px 14px; border: 1px solid var(--kz-line); border-radius: 10px; font: inherit; font-size: 16px; background: #fff; color: var(--kz-ink); }
.kz input:focus, .kz textarea:focus, .kz select:focus { outline: 0; border-color: var(--kz-blue-2); box-shadow: 0 0 0 3px rgba(31, 68, 160, .18); }
.kz-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--kz-red); color: #fff; border: 0; border-radius: var(--kz-radius-knop); padding: 13px 22px; font: 600 15px/1.2 var(--kz-display); letter-spacing: .01em; cursor: pointer; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; box-shadow: 0 12px 30px -14px rgba(222, 45, 47, .7); }
.kz-knop:hover { background: var(--kz-red-donker); transform: translateY(-1px); color: #fff; }
.kz-knop-licht { background: #fff; color: var(--kz-ink); border: 1px solid rgba(10, 19, 41, .18); box-shadow: none; }
.kz-knop-licht:hover { background: #f7f8fb; color: var(--kz-ink); border-color: rgba(10, 19, 41, .3); }
/* De algemene linkkleur (.kz a) mag een knop-als-link niet blauw maken */
.kz a.kz-knop { color: #fff; }
.kz a.kz-knop-licht { color: var(--kz-ink); }

/* Bevestigingsdialoog (window.kzBevestig in klantenzone.js): een native <dialog> in plaats van window.confirm, zelfde
   uiterlijk als de modals van het domeinbeheer */
.kz-dialoog { border: 0; padding: 0; margin: 12vh auto 0; width: calc(100% - 40px); max-width: 460px; background: #fff; color: var(--kz-ink); border-radius: var(--kz-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); font: inherit; }
.kz-dialoog::backdrop { background: rgba(10, 19, 41, .5); }
.kz-dialoog[open] { animation: kzDialoogIn .15s ease-out; }
@keyframes kzDialoogIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.kz-dialoog-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--kz-line); }
.kz .kz-dialoog-kop h2, .kz-site .kz-dialoog-kop h2 { font: 700 17px/1.2 var(--kz-display); margin: 0; }
.kz-dialoog-sluit { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--kz-muted); padding: 0 2px; }
.kz-dialoog-body { padding: 18px 20px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.kz-dialoog-body p { margin: 0; }
.kz-dialoog-voet { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--kz-line); }
.kz-dialoog-voet .kz-knop { padding: 11px 18px; }
.kz-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.kz-hulp { color: var(--kz-muted); font-size: 14px; margin: 8px 0 0; }
.kz-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kz-details { margin-top: 18px; }
.kz-details summary { cursor: pointer; color: var(--kz-blue-2); font-weight: 600; }

/* Meldingen en badges */
.kz-melding { border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; font-size: 15px; border: 1px solid transparent; }
.kz-melding.ok { background: var(--kz-groen-licht); color: var(--kz-groen); border-color: rgba(26, 127, 55, .25); }
.kz-melding.fout { background: var(--kz-rood-licht); color: #b3261e; border-color: rgba(179, 38, 30, .25); }
.kz-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: #eef1f4; color: #57606a; }
.kz-badge.groen { background: var(--kz-groen-licht); color: var(--kz-groen); }
.kz-badge.rood { background: var(--kz-rood-licht); color: #b3261e; }
.kz-badge.blauw { background: #e8edf9; color: var(--kz-blue); }

/* Lijsten en tabellen */
.kz-lijst { list-style: none; margin: 0; padding: 0; }
.kz-lijst li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--kz-line); }
/* De knop in een lijstregel niet mee laten rekken met een tweeregelige tekst (werd een ovaal) */
.kz-lijst li > .kz-knop { flex-shrink: 0; align-self: center; white-space: nowrap; }
.kz-lijst li:first-child { border-top: 0; }
.kz table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kz th, .kz td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--kz-line); vertical-align: top; }
.kz th { color: var(--kz-muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.kz-tabel-scroll { overflow-x: auto; }

/* Voet */
.kz-voet { background: #060c1c; color: #8d99bb; padding: 56px 20px 28px; font-size: 15px; margin-top: 24px; }
.kz-voet-binnen { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.kz-voet img { height: 40px; width: auto; display: block; }
.kz-voet-merk p { margin: 16px 0 0; max-width: 340px; line-height: 1.55; }
.kz .kz-voet-kop { color: #fff; font: 700 16px/1.2 var(--kz-display); margin: 4px 0 14px; }
.kz-voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kz-voet a { color: #aab4d0; text-decoration: none; }
.kz-voet a:hover { color: #fff; text-decoration: underline; }
.kz-voet-onder { max-width: 1400px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 14px; }
.kz-voet-onder nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 760px) {
  .kz-voet-binnen { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  .kz-kop-binnen { height: 68px; padding: 0 16px; }
  .kz-logo span { display: none; }
  .kz-main { padding: 24px 16px 36px; }
  .kz-kaart { padding: 20px 18px; }
  .kz-smal { margin-top: 2vh; }
}

/* Voorstellen (fase 1) */
.kz-kruimels { font-size: 14px; color: var(--kz-muted); margin: 0 0 10px; }
.kz-kruimels a { color: var(--kz-muted); }
.kz-kop-rij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.kz-regels td strong { font-weight: 600; }
.kz-regel-uit td { color: var(--kz-muted); }
.kz-rechts { text-align: right; }
.kz-nowrap { white-space: nowrap; }
.kz-hulp-inline { color: var(--kz-muted); font-size: 14px; }
.kz-optie { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.kz-optie input { width: 18px; height: 18px; }
.kz-dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; margin: 0; }
.kz-dl dt { color: var(--kz-muted); }
.kz-dl dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; }
.kz-dl .kz-dl-totaal { color: var(--kz-ink); font-weight: 700; font-size: 1.1em; border-top: 1px solid var(--kz-line); padding-top: 8px; }
.kz-akkoord { border: 2px solid var(--kz-red); }
.kz-vink { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-top: 14px; }
.kz-vink input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
.kz-knop-klein { padding: 9px 14px; font-size: 13.5px; }
.kz-weiger { margin-top: 12px; }

/* Opdrachten en materiaal aanleveren (fase 2) */
.kz-badge.oranje { background: #fff1e0; color: #a4550a; }
.kz-badge-rand { background: transparent; border: 1px solid var(--kz-line); color: var(--kz-muted); font-weight: 500; }
.kz input[type=url] { width: 100%; padding: 12px 14px; border: 1px solid var(--kz-line); border-radius: 10px; font: inherit; font-size: 16px; background: #fff; color: var(--kz-ink); }
.kz progress { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border: 0; border-radius: 999px; background: #e3e7ee; overflow: hidden; color: var(--kz-groen); }
.kz progress::-webkit-progress-bar { background: #e3e7ee; border-radius: 999px; }
.kz progress::-webkit-progress-value { background: var(--kz-groen); border-radius: 999px; transition: width .2s; }
.kz progress::-moz-progress-bar { background: var(--kz-groen); border-radius: 999px; }
.kz-voortgang { margin: 0 0 16px; }
.kz-voortgang p { margin: 8px 0 0; }
.kz-voortgang-klein { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.kz-voortgang-klein progress { max-width: 180px; height: 8px; flex: 0 0 auto; }
.kz-opdrachten li { align-items: center; flex-wrap: wrap; }
.kz-opdracht-info { flex: 1 1 260px; }
.kz-opdracht-info .kz-badge { margin-left: 6px; }

.kz-item { background: #fff; border: 1px solid var(--kz-line); border-left: 4px solid #f0b46a; border-radius: var(--kz-radius); padding: 20px 22px; margin-bottom: 16px; scroll-margin-top: 16px; }
.kz-item-aangeleverd { border-left-color: var(--kz-blue-2); }
.kz-item-nodig { border-left-color: var(--kz-red); }
.kz-item-klaar { border-left-color: var(--kz-groen); padding: 12px 22px; background: #fbfcfd; }
.kz-item-klaar h2 { color: var(--kz-muted); font-weight: 600; }
.kz-item:target { box-shadow: 0 0 0 3px rgba(31, 68, 160, .18); }
.kz-item-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.kz-item-kop h2 { font-size: 18px; margin: 0; }
.kz-item-labels { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.kz-vinkje { color: var(--kz-groen); font-weight: 800; }
.kz-item-uitleg { color: var(--kz-muted); margin: 8px 0 0; }
.kz-item-notitie { background: var(--kz-rood-licht); color: #8c1d18; border-radius: 10px; padding: 10px 14px; margin: 12px 0 0; }
.kz-item-gegeven { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 15px; }
.kz-item-gegeven dt { color: var(--kz-muted); }
.kz-item-gegeven dd { margin: 0; overflow-wrap: anywhere; }
.kz-item-form { margin-top: 6px; }
.kz-item-meer { margin-top: 12px; }
.kz-item-form .kz-acties { margin-top: 16px; }

.kz-bestanden { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15px; }
.kz-bestanden:empty { display: none; }
.kz-bestanden li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--kz-line); }
.kz-bestanden li:first-child { border-top: 0; }
.kz-bestand-naam { font-weight: 600; overflow-wrap: anywhere; }
.kz-verwijder-form { margin: 0 0 0 auto; display: inline; }
.kz-link-knop { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: #b3261e; cursor: pointer; text-decoration: underline; }

.kz-upload { margin-top: 14px; padding: 16px; border: 2px dashed rgba(10, 19, 41, .18); border-radius: 12px; background: var(--kz-grey); }
.kz-upload label { margin-top: 0; }
.kz-upload input[type=file] { display: block; max-width: 100%; font: inherit; font-size: 15px; margin: 4px 0 10px; }
.kz-upload-tip { display: none; margin: 0 0 6px; color: var(--kz-muted); font-size: 15px; }
.kz-upload-js .kz-upload-tip { display: block; }
.kz-upload-over { border-color: var(--kz-blue-2); background: #e8edf9; }
.kz-upload-rijen:empty { display: none; }
.kz-upload-rijen { margin-top: 10px; }
.kz-upload-rij { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px 0; border-top: 1px solid var(--kz-line); font-size: 14.5px; }
.kz-upload-naam { font-weight: 600; overflow-wrap: anywhere; }
.kz-upload-status { color: var(--kz-muted); font-size: 14px; }
.kz-upload-ok .kz-upload-status { color: var(--kz-groen); }
.kz-upload-fout .kz-upload-status { color: #b3261e; }
.kz-upload-fout .kz-balk::-webkit-progress-value { background: #b3261e; }
.kz-upload-fout .kz-balk::-moz-progress-bar { background: #b3261e; }
.kz-meldinglijst { margin: 0; padding-left: 18px; }

/* Fase 4: betalingen (betaalpagina, retour van Mollie, blok op het voorstel, melding op de opdracht) */
.kz-melding.info { background: #e8edf9; color: var(--kz-blue); border-color: rgba(26, 58, 143, .2); }
.kz-melding p { margin: 0; }
.kz-melding .kz-acties { margin-top: 12px; }
.kz-betaling-pagina { max-width: 640px; }
.kz-betaling .kz-dl { grid-template-columns: auto 1fr; }
.kz-betaling-open { border: 2px solid var(--kz-red); }
.kz-betaling-voorstel { margin: 0 0 6px; }
.kz-betaling-bedrag { font-family: var(--kz-display); font-weight: 800; font-size: clamp(30px, 5vw, 42px); line-height: 1.1; letter-spacing: -.01em; margin: 6px 0 18px; }
.kz-betaling-bedrag small { font-family: var(--kz-text); font-weight: 400; font-size: 15px; color: var(--kz-muted); letter-spacing: 0; }
.kz-betaling .kz-dl dd.kz-betaling-wat { white-space: normal; font-weight: 400; }
.kz-betaling-status { font-size: 13.5px; }
.kz-betaling-uitleg { margin: 18px 0 0; }
.kz-betaling .kz-acties form { margin: 0; }

@media (min-width: 641px) {
  .kz-upload-rij { grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) minmax(0, 1.4fr); align-items: center; gap: 12px; }
}
@media (max-width: 640px) {
  .kz-item { padding: 16px; }
  .kz-item-klaar { padding: 10px 16px; }
  .kz-item-form .kz-acties .kz-knop { width: 100%; }
}

/* Fase 5: vragen (tickets) in de zone (Klantenzone_VraagController, partial index/_vragen.phtml) */
.kz-vraag-kopknop { margin-top: 4px; }
.kz-vragen .kz-vraag-titel { font-weight: 600; overflow-wrap: anywhere; }
.kz-vraag-actie { color: #a4550a; font-weight: 600; }
.kz-vraag-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.kz-vraag-gegevens { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 18px; font-size: 15px; }
.kz-vraag-gegevens dt { color: var(--kz-muted); }
.kz-vraag-gegevens dd { margin: 0; min-width: 0; }
.kz-vraag-breek { overflow-wrap: anywhere; }
.kz-vraag-tekst { overflow-wrap: anywhere; }
.kz-vraag-bijlagen { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15px; }
.kz-vraag-bijlagen li { padding: 4px 0; overflow-wrap: anywhere; }
.kz-vraag-bijlagen a::before { content: "\1F4CE"; margin-right: 6px; }
.kz-vraag-gesprek { list-style: none; margin: 0; padding: 0; }
.kz-vraag-bericht { border: 1px solid var(--kz-line); border-radius: 12px; padding: 14px 18px; margin: 0 0 14px; background: #fff; }
.kz-vraag-bericht:last-child { margin-bottom: 0; }
.kz-vraag-bericht-vco { background: #f3f6fc; border-color: rgba(31, 68, 160, .18); border-left: 4px solid var(--kz-blue-2); }
.kz-vraag-bericht-kop { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.kz-vraag-bericht-html { overflow-wrap: anywhere; }
.kz-vraag-bericht-html > :first-child { margin-top: 0; }
.kz-vraag-bericht-html > :last-child { margin-bottom: 0; }
.kz-vraag-bericht-html img { max-width: 100%; height: auto; }
.kz-vraag-bericht-html pre { white-space: pre-wrap; }
.kz-vraag-bevestig { border: 2px solid var(--kz-groen); }
.kz-vraag-bevestig form.kz-acties { margin-top: 14px; }
.kz-vraag-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.kz-vraag-form legend { font-weight: 600; font-size: 15px; margin: 0 0 8px; padding: 0; }
.kz-keuzes { display: grid; gap: 10px; }
.kz label.kz-keuze { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; padding: 12px 14px; border: 1px solid var(--kz-line); border-radius: 10px; cursor: pointer; }
.kz-keuze input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
.kz-keuze span { display: flex; flex-direction: column; }
.kz-keuze small { color: var(--kz-muted); font-size: 14px; }
.kz-keuze:has(input:checked) { border-color: var(--kz-blue-2); background: #f3f6fc; }
.kz-vraag-form input[type=file] { width: 100%; padding: 10px; border: 1px dashed rgba(10, 19, 41, .2); border-radius: 10px; background: var(--kz-grey); font: inherit; font-size: 15px; }
.kz-veldfout { color: #b3261e; font-size: 14px; font-weight: 600; margin: 6px 0 0; }
@media (min-width: 641px) {
  .kz-keuzes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kz-keuzes .kz-veldfout { grid-column: 1 / -1; }
}

/* Fase 5 (klantkant): proeven nakijken, berichten bij een opdracht, het startformulier en domeinen voor eindklanten */
.kz-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kz-proeven, .kz-intake-blok, #berichten { scroll-margin-top: 16px; }
.kz-proef { border: 1px solid var(--kz-line); border-left: 4px solid var(--kz-line); border-radius: 12px; padding: 16px 18px; margin-top: 16px; }
.kz-proef-klaar { border-left-color: #f0b46a; background: #fffaf3; }
.kz-proef-goedgekeurd { border-left-color: var(--kz-groen); }
.kz-proef-feedback { border-left-color: var(--kz-blue-2); }
.kz-proef-vervangen { background: #fbfcfd; }
.kz-proef-vervangen h3 { color: var(--kz-muted); }
.kz-proef:target { box-shadow: 0 0 0 3px rgba(31, 68, 160, .18); }
.kz h3 { font-family: var(--kz-display); font-weight: 700; font-size: 17px; margin: 0; }
.kz h4 { font-family: var(--kz-display); font-weight: 700; font-size: 16px; margin: 0; }
.kz-proef-omschrijving { margin: 10px 0 0; }
.kz-proef-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.kz-proef-akkoord { margin: 12px 0 0; color: var(--kz-groen); font-weight: 600; }
.kz-proef-reactie { background: var(--kz-grey); border-radius: 10px; padding: 10px 14px; margin: 12px 0 0; font-size: 15px; }
.kz-proef-reageer { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
.kz-proef-form { background: #fff; border: 1px solid var(--kz-line); border-radius: 12px; padding: 16px; }
.kz-proef-form-goedkeuren { border-top: 3px solid var(--kz-groen); }
.kz-proef-form-feedback { border-top: 3px solid var(--kz-blue-2); }
.kz-proef-form .kz-acties { margin-top: 14px; }
.kz-proeven-eerder { margin-top: 18px; }
.kz-berichten { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kz-bericht { max-width: 82%; border-radius: 14px; padding: 10px 14px; font-size: 15.5px; }
.kz-bericht-vco { align-self: flex-start; background: #e8edf9; border-bottom-left-radius: 4px; }
.kz-bericht-klant { align-self: flex-end; background: var(--kz-grey); border: 1px solid var(--kz-line); border-bottom-right-radius: 4px; }
.kz-bericht-kop { margin: 0 0 4px; font-size: 13.5px; color: var(--kz-muted); }
.kz-bericht-kop strong { color: var(--kz-ink); }
.kz-bericht-tekst { margin: 0; overflow-wrap: anywhere; }
.kz-bericht-form { margin-top: 8px; }
.kz-intake { max-width: 760px; }
.kz-intake-vraag { padding: 4px 0 8px; }
.kz-intake-uitleg { margin: 0 0 8px; }
.kz .kz-intake-fout input, .kz .kz-intake-fout textarea { border-color: #b3261e; }
.kz-intake-foutmelding { color: #b3261e; font-size: 14px; font-weight: 600; margin: 6px 0 0; }
.kz input[type=email] { width: 100%; }
.kz-intake-antwoorden { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 12px 0 0; font-size: 15px; }
.kz-intake-antwoorden dt { color: var(--kz-muted); margin-top: 10px; }
.kz-intake-antwoorden dd { margin: 0; overflow-wrap: anywhere; }
.kz-domein-alleenlezen { margin: 14px 0 0; }
.kz-domein-ns { margin: 0; padding-left: 18px; }
.kz-domein-waarde { overflow-wrap: anywhere; max-width: 520px; }
@media (min-width: 760px) {
  .kz-proef-reageer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .kz-bericht { max-width: 100%; }
}
/* Naam in de balk is een link naar de accountpagina (wachtwoord instellen) */

/* Overzicht: "Voor jou te doen" over de volle breedte, één regel per item; daaronder tegels met een getal */
.kz-tel { display: inline-block; min-width: 28px; padding: 2px 9px; border-radius: 999px; background: var(--kz-red); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; vertical-align: 3px; margin-left: 6px; }
.kz-tedoen .kz-lijst li { padding: 10px 0; }
.kz-lijst-tekst { min-width: 0; }
.kz-lijst-meta { display: block; color: var(--kz-muted); font-size: 14px; margin-top: 2px; }
.kz-tegels { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.kz-tegel { display: flex; flex-direction: column; padding: 22px 24px; }
.kz-tegel h2 { font-size: 18px; margin-bottom: 6px; }
.kz-tegel-getal { font-family: var(--kz-display); font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -.02em; margin: 4px 0 8px; }
.kz-tegel-getal small { font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: 0; color: var(--kz-muted); }
.kz-tegel-tekst { color: var(--kz-muted); font-size: 15px; margin: 0; }
.kz-tegel-tekst strong { color: var(--kz-ink); }
.kz-tegel .kz-acties { margin-top: auto; padding-top: 16px; }
.kz-tegel .kz-acties:last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  /* Breed genoeg: titel en toelichting op één regel */
  .kz-tedoen .kz-lijst-meta { display: inline; margin: 0 0 0 .6em; }
  .kz-tedoen .kz-lijst-meta::before { content: "·"; margin-right: .6em; }
}
@media (max-width: 640px) {
  .kz-tedoen .kz-lijst li { flex-wrap: wrap; }
  .kz-tedoen .kz-lijst li > .kz-knop { width: 100%; }
}

/* Laadindicator (klantenzone.js): balk bovenaan meteen, pilletje met spinner na 400 ms; boven de portaaloverlay (1100).
   Het laadscherm eronder (1190) vangt klikken vanaf het eerste moment (doorzichtig) en dimt na 400 ms licht mee. */
.kz-laadscherm { position: fixed; inset: 0; z-index: 1190; display: none; background: rgba(10, 19, 41, 0); cursor: progress; transition: background .25s ease; }
.kz-laadscherm.kz-actief { display: block; }
.kz-laadscherm.kz-zichtbaar { background: rgba(10, 19, 41, .22); }
.kz-laadbalk { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--kz-red); box-shadow: 0 0 8px rgba(222, 45, 47, .6); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; z-index: 1200; }
.kz-laadbalk.kz-actief { opacity: 1; animation: kzLaadKruip 10s cubic-bezier(.08, .7, .2, 1) forwards; }
@keyframes kzLaadKruip { 0% { transform: scaleX(0); } 8% { transform: scaleX(.35); } 100% { transform: scaleX(.9); } }
.kz-laadpil { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; background: var(--kz-navy); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; box-shadow: 0 8px 28px rgba(10, 19, 41, .28); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; z-index: 1200; }
.kz-laadpil.kz-actief { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.kz-laadpil-spinner { flex: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: kzLaadDraai .8s linear infinite; }
@keyframes kzLaadDraai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kz-laadbalk.kz-actief { animation: none; transform: scaleX(.9); }
  .kz-laadpil, .kz-laadpil.kz-actief, .kz-laadscherm { transition: none; }
  .kz-laadpil-spinner { animation: none; border-color: rgba(255, 255, 255, .5); border-top-color: #fff; border-right-color: #fff; }
}

/* ── Siteschil: de pagina's zonder login (inloggen, inloglink, toegang vragen) dragen kop, hero en voet van de site en
   gebruiken de markup van de supportpagina (style.css: form als kaart, .field met zwevend label, .btn, .split met
   .aside-card). Hier alleen wat de zone daar nog bij nodig heeft. ───────────────────────────────────────────────── */
.kz-site-main { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 7vw, 112px); }
.kz-site-main .support-form .btn { margin-top: 8px; }
.kz-site-main .kz-melding { margin: 0 0 22px; }
.kz-site-main .aside-card form { background: transparent; color: inherit; border-radius: 0; padding: 0; margin-top: 20px; box-shadow: none; }
.kz-site-main .aside-card.dark-card .field input { background: #fff; color: var(--ink, #0a1329); }
.kz-site-main .aside-card.dark-card .field input:focus + label, .kz-site-main .aside-card.dark-card .field input:not(:placeholder-shown) + label { color: var(--blue-2, #1f44a0); }
.kz-site-main .aside-card .btn-ghost { margin-top: 4px; }
.kz-site-main .aside-card .tekstlink { font-weight: 600; }

/* ── API-sleutels en handleiding (Klantenzone_ApiController, views api/): codeblok, de eenmalige nieuwe sleutel,
   het scopeveld en de endpoints van de handleiding. ───────────────────────────────────────────────────────────── */
.kz code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--kz-grey); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.kz-code { margin: 10px 0 14px; padding: 14px 16px; background: var(--kz-navy); color: #e6ebf7; border-radius: var(--kz-radius); overflow-x: auto; font-size: 14px; line-height: 1.5; white-space: pre; }
.kz .kz-code code { background: transparent; color: inherit; padding: 0; font-size: inherit; overflow-wrap: normal; }
.kz-api-kopknop { margin-top: 0; }
.kz-api-nieuw { border: 2px solid var(--kz-groen); background: #f6fbf7; }
.kz-api-sleutel { font-size: 16px; white-space: pre-wrap; word-break: break-all; user-select: all; }
.kz-api-scopes { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.kz-api-scopes legend { font-weight: 600; font-size: 15px; padding: 0; margin: 0 0 2px; }
.kz .kz-api-scopes .kz-vink { margin-top: 8px; font-weight: 400; }
.kz-api-intrekken { margin: 0; }
.kz-api-tabel td { vertical-align: middle; }
/* Handleiding: inhoudsopgave naast de inhoud (vanaf 1100px een sticky zijkolom), endpoints per groep en inklapbaar */
.kz-api-handleiding { display: block; }
.kz-api-inhoud { min-width: 0; }
.kz-api-toc { background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-radius); padding: 16px 18px; margin-bottom: 22px; font-size: 14.5px; }
.kz-api-toc-titel { margin: 0 0 8px; font-family: var(--kz-display); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--kz-muted); }
.kz-api-toc ul { list-style: none; margin: 0; padding: 0; }
.kz-api-toc ul ul { margin: 2px 0 4px 12px; padding-left: 10px; border-left: 1px solid var(--kz-line); font-size: 14px; }
.kz .kz-api-toc a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--kz-ink); text-decoration: none; line-height: 1.35; }
.kz .kz-api-toc a:hover, .kz .kz-api-toc a:focus-visible { background: var(--kz-grey); }
.kz .kz-api-toc a.kz-api-toc-actief { background: #e8edf9; color: var(--kz-blue-2); font-weight: 600; }
@media (min-width: 1100px) {
  .kz-api-handleiding { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
  .kz-api-toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; margin-bottom: 0; }
}
.kz-api-groep { font-family: var(--kz-display); font-size: 18px; font-weight: 600; margin: 30px 0 4px; scroll-margin-top: 16px; }
.kz-api-endpoint { border-top: 1px solid var(--kz-line); scroll-margin-top: 16px; }
.kz-api-endpoint > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 28px 12px 0; position: relative; }
.kz-api-endpoint > summary::-webkit-details-marker { display: none; }
.kz-api-endpoint > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--kz-muted); border-bottom: 2px solid var(--kz-muted); transform: rotate(45deg); transition: transform .15s; }
.kz-api-endpoint[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.kz-api-endpoint > summary code { font-weight: 600; }
.kz-api-endpoint-kort { flex: 1 1 260px; color: var(--kz-muted); font-size: 15px; }
/* Methodebadges zoals in Swagger-UI (gebruiker 2026-11-10): gevuld per methode, de rij van het blok licht in dezelfde tint */
.kz-methode { display: inline-block; min-width: 64px; padding: 6px 10px; border-radius: 4px; text-align: center; font: 700 12px/1 var(--kz-display); letter-spacing: .04em; color: #fff; text-transform: uppercase; }
.kz-methode-get { background: #2f7fc3; }
.kz-methode-post { background: #2aa35f; }
.kz-methode-put { background: #c98a2d; }
.kz-methode-patch { background: #3b9a9a; }
.kz-methode-delete { background: #d04b45; }
.kz-api-endpoint { border-top: 0; margin-top: 6px; }
.kz-api-endpoint > summary { padding-left: 12px; border-left: 4px solid transparent; border-radius: 4px; }
.kz-ep-get > summary { background: #eef5fc; border-left-color: #2f7fc3; }
.kz-ep-post > summary { background: #edf8f1; border-left-color: #2aa35f; }
.kz-ep-put > summary { background: #fdf4e7; border-left-color: #c98a2d; }
.kz-ep-patch > summary { background: #ecf7f7; border-left-color: #3b9a9a; }
.kz-ep-delete > summary { background: #fdeeed; border-left-color: #d04b45; }
/* Een open blok wordt een kaart in de tint van de methode (zoals Swagger-UI), met de tussenkoppen in die kleur */
.kz-api-endpoint[open] { border: 1px solid transparent; border-radius: 6px; margin-top: 10px; }
.kz-api-endpoint[open] > summary { border-left: 0; border-radius: 6px 6px 0 0; padding-left: 16px; }
.kz-ep-get[open] { border-color: #bcd5ee; background: #f4f8fd; }
.kz-ep-post[open] { border-color: #bde2cb; background: #f2faf5; }
.kz-ep-put[open] { border-color: #ead3ad; background: #fdf8ef; }
.kz-ep-patch[open] { border-color: #badcdc; background: #f1f9f9; }
.kz-ep-delete[open] { border-color: #efc0bd; background: #fdf2f1; }
.kz-api-endpoint-inhoud { padding: 12px 16px 18px; }
.kz-api-label { margin: 14px 0 6px; font: 600 14px/1.3 var(--kz-display); }
.kz-api-label span { font-weight: 400; color: var(--kz-ink); }
.kz-ep-get .kz-api-label { color: #2f7fc3; }
.kz-ep-post .kz-api-label { color: #2aa35f; }
.kz-ep-put .kz-api-label { color: #c98a2d; }
.kz-ep-patch .kz-api-label { color: #3b9a9a; }
.kz-ep-delete .kz-api-label { color: #d04b45; }
.kz-api-endpoint-inhoud .kz-code { margin: 0; }
.kz-api-endpoint-inhoud > p:first-child { margin-top: 0; }
.kz-api-uitklap { margin: 14px 0; }
.kz-api-uitklap > summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.kz-api-doc h2 { scroll-margin-top: 16px; }
.kz-api-endpoint:target > summary code, .kz-api-doc h2:target, .kz-api-groep:target { background: #fff3dc; box-shadow: 0 0 0 4px #fff3dc; border-radius: 4px; }
.kz-api-endpoint .kz-item-gegeven { margin-bottom: 12px; }
.kz-api-opsomming { margin: 0; padding-left: 20px; }
.kz-api-opsomming li { margin: 4px 0; }

/* ── Testconsole "Probeer het uit" in de handleiding van de API (klantenzone-api-console.js): sleutelveld met de
   wisknop ernaast, de velden per endpoint in een raster, de drieweg-keuzes voor PATCH, en het resultaat met het
   verzoek en het antwoord naast elkaar (smal scherm: onder elkaar) en de curl-opdracht eronder. ─────────────────── */
.kz-api-console [hidden], .kz-api-proef [hidden], .kz-api-proef[hidden] { display: none !important; }
.kz-api-console { border: 2px solid #e8edf9; }
.kz-api-console-sleutelrij { display: flex; gap: 10px; align-items: stretch; }
.kz-api-console-sleutelrij input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.kz-api-console-sleutelrij .kz-knop { flex: 0 0 auto; }
.kz .kz-api-proef input[type=date], .kz .kz-api-proef input[type=number] { width: 100%; padding: 12px 14px; border: 1px solid var(--kz-line); border-radius: 10px; font: inherit; font-size: 16px; background: #fff; color: var(--kz-ink); }
/* Proefblok per endpoint ("Probeer het uit", zoals Swagger-UI): wit deelpaneel in de getinte kaart, rand in een lichte
   variant van de methodekleur; de summary is een knopachtige regel; daarin de parametertabel, Verstuur en de panelen */
.kz-api-proef { margin-top: 18px; background: #fff; border: 1px solid var(--kz-line); border-radius: 6px; padding: 14px 16px; }
.kz-ep-get .kz-api-proef { border-color: #bcd5ee; }
.kz-ep-post .kz-api-proef { border-color: #bde2cb; }
.kz-ep-put .kz-api-proef { border-color: #ead3ad; }
.kz-ep-patch .kz-api-proef { border-color: #badcdc; }
.kz-ep-delete .kz-api-proef { border-color: #efc0bd; }
.kz-api-proef > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid currentColor; border-radius: 4px; font: 600 14px/1.2 var(--kz-display); color: var(--kz-ink); background: #fff; }
.kz-api-proef > summary::-webkit-details-marker { display: none; }
.kz-api-proef > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.kz-api-proef[open] > summary::before { transform: rotate(45deg); }
.kz-api-proef > summary:hover, .kz-api-proef > summary:focus-visible { background: var(--kz-grey); }
.kz-ep-get .kz-api-proef > summary { color: #2f7fc3; }
.kz-ep-post .kz-api-proef > summary { color: #2aa35f; }
.kz-ep-put .kz-api-proef > summary { color: #c98a2d; }
.kz-ep-patch .kz-api-proef > summary { color: #3b9a9a; }
.kz-ep-delete .kz-api-proef > summary { color: #d04b45; }
.kz-api-proef-inhoud { margin-top: 14px; }
.kz-api-parameters td { vertical-align: middle; }
.kz-api-parameters td:first-child { white-space: nowrap; }
.kz-api-parameters td:nth-child(3) { white-space: nowrap; }
.kz-api-param-waarde { width: 42%; min-width: 220px; }
.kz-api-parameters label { margin: 0; }
.kz-api-parameters strong { color: #b3261e; font-weight: 600; }
.kz-api-param-verplicht td:first-child code { font-weight: 700; }
.kz-api-drieweg { border: 0; padding: 0; margin: 0; min-width: 0; }
.kz .kz-api-drieweg .kz-vink { display: inline-flex; margin: 4px 16px 4px 0; }
.kz .kz-api-parameters .kz-vink { margin: 0; }
/* Smal scherm: elke parameter als kaartje (naam en waar bovenaan, het veld over de volle breedte, de uitleg eronder) */
@media (max-width: 640px) {
  .kz-api-parameters thead { display: none; }
  .kz-api-parameters, .kz-api-parameters tbody { display: block; }
  .kz-api-parameters tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--kz-line); }
  .kz .kz-api-parameters td { display: block; padding: 0; border: 0; }
  .kz-api-parameters td:nth-child(3) { justify-self: start; }
  .kz-api-param-waarde { grid-column: 1 / -1; order: 3; width: auto; min-width: 0; }
  .kz-api-parameters td:nth-child(4) { grid-column: 1 / -1; order: 4; font-size: 14px; color: var(--kz-muted); }
}
.kz-api-dnstypes td:first-child { white-space: nowrap; }
.kz .kz-api-parameters textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; min-height: 96px; resize: vertical; }
.kz-api-console-echt { padding: 10px 14px; margin-top: 14px; background: #fff7ec; border: 1px solid #f3d3a8; border-radius: 10px; }
.kz .kz-api-console-echt .kz-vink { margin: 0; font-weight: 600; }
.kz-api-console-melding { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--kz-grey); font-size: 15px; }
.kz-api-console-melding-fout { background: var(--kz-rood-licht); color: #b3261e; font-weight: 600; }
.kz-api-console-panelen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; margin-top: 22px; }
.kz-api-console-paneel h4, .kz-api-console-curl h4 { margin: 0 0 8px; font-size: 15px; }
.kz-api-console-paneel .kz-code { margin: 0; max-height: 520px; overflow: auto; }
.kz-api-console-panelen .kz-api-console-paneel:first-child .kz-code { white-space: pre-wrap; word-break: break-all; }
.kz-api-console-status { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kz-api-console-status .kz-badge { font-size: 14px; }
.kz-api-console-headers { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.kz-api-console-curl { margin-top: 22px; }
.kz-api-console-curl .kz-code { margin: 0; }
.kz-api-console-kopieer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 0; }
@media (max-width: 760px) {
  .kz-api-console-panelen { grid-template-columns: minmax(0, 1fr); }
  .kz-api-console-sleutelrij { flex-direction: column; }
}