/* KlusSure basis: kleuren, typografie, opbouw en vaste onderdelen.
   Beeldtaal w1 "Zoeken en ontdekken": wit, inkt #222, lijnen #ebebeb, een
   licht vlak #f7f7f7, koppen in 600, foto's met 12 px afronding. Blauw
   (--ks-merk) alleen voor de ene hoofdknop en in het logo.
   Regels:
   - Kleuren alleen via de variabelen hieronder, nooit een vaste kleur in een
     pagina. Dan klopt de donkere modus vanzelf.
   - Onderdelen in dit bestand beginnen met ks-. Een pagina of gebied geeft
     zijn eigen elementen een eigen prefix (ks-home-, ks-plts-, ks-kl-, ks-vm-,
     ks-bh-) in zijn eigen stijlblad.
   - Rustig en vlak: geen verlopen, geen gloed, geen blur. De enige schaduw
     is --ks-schaduw-zacht onder de zoekbalk en uitklapmenu's.
   - Beweging alleen met transform en opacity, kort (tot 300 ms), en uit bij
     prefers-reduced-motion.

   Tokens (gebruik deze in nieuw werk)
     --ks-achter        paginagrond (wit / #141414)
     --ks-paneel        vlak dat boven de pagina ligt (zoekbalk, menu)
     --ks-vlak          licht vlak voor een blok of zijkolom
     --ks-vlak-sterk    iets donkerder vlak (actieve rij, hover op vlak)
     --ks-inkt          tekst en lijnen die moeten opvallen
     --ks-zacht         bijzaken, toelichting (minstens 4,5:1 op achter en vlak)
     --ks-lijn          scheidingslijn
     --ks-lijn-sterk    lijn die iets meer mag opvallen (gestippelde plek, hover)
     --ks-rand          rand van invoervelden en keuzetegels (minstens 3:1)
     --ks-merk / --ks-merk-hover / --ks-op-merk   alleen de hoofdknop (KlusSure-blauw)
     --ks-logo-inkt / --ks-logo-merk              kleuren van het logo
     --ks-band / --ks-op-band / --ks-op-band-zacht donker vlak
     --ks-foto          vlak achter een foto die nog laadt
     --ks-op-foto / --ks-op-foto-zacht            tekst op een foto (licht en donker gelijk)
     --ks-foto-sluier / --ks-foto-sluier-midden   donkere sluier onder tekst op een foto
     --ks-foto-tekstschaduw                       zachte schaduw achter die tekst
     --ks-schaduw-zacht heel lichte schaduw (menu)
     --ks-schaduw-zoek  schaduw van de grote zoekbalk en de spotlight
     --ks-spot-sluier   vlak dat de pagina achter de spotlight dempt
     --ks-rond          hoekafronding van knoppen en velden (8px)
     --ks-rond-foto     hoekafronding van foto's en vlakken (12px)
   Oude namen blijven werken en wijzen naar de nieuwe:
     --ks-bg --ks-kaart --ks-kaart-2 --ks-stil --ks-accent --ks-accent-hover
     --ks-accent-inkt --ks-accent-zacht --ks-focus --ks-veld-rand
     --ks-radius(-klein/-groot) --ks-schaduw (nu: none). Status: --ks-groen
     --ks-rood --ks-oranje --ks-blauw, elk met -zacht.
     --ks-geel --ks-geel-hover --ks-op-geel --ks-logo-geel (nu blauw)
    De oude kleurnamen staan als hexwaarde in elk themablok (niet als var()),
    omdat tests/frontend.php het contrast op die namen narekent. Wijzig een
    nieuwe kleur dus ook bij zijn oude naam in hetzelfde blok. */

/* §1 Lettertype, kleuren en maten ---------------------------------------- */
/* Lettertype: de systeemletter van het apparaat (San Francisco op Apple,
   Segoe UI op Windows, Roboto op Android). Strak, niets te downloaden. */

:root {
  /* Licht */
  --ks-achter: #ffffff;
  --ks-paneel: #ffffff;
  --ks-vlak: #f7f7f7;
  --ks-vlak-sterk: #f0f0f0;
  --ks-inkt: #222222;
  --ks-zacht: #6a6a6a;
  --ks-lijn: #ebebeb;
  --ks-lijn-sterk: #d4d4d4;
  --ks-rand: #949494;
  --ks-merk: #1d5bf0;
  --ks-merk-hover: #1749c4;
  --ks-op-merk: #ffffff;
  /* Vlak achter het iDEAL | Wero-logo: altijd wit, ook donker (huisstijl iDEAL). */
  --ks-ideal-vlak: #ffffff;
  --ks-bel-u: #222222;
  --ks-op-bel-u: #ffffff;
  --ks-logo-inkt: #0b1b33;
  --ks-logo-merk: #1d5bf0;
  --ks-band: #222222;
  --ks-op-band: #ffffff;
  --ks-op-band-zacht: #c4c4c4;
  --ks-foto: #ebebeb;
  --ks-op-foto: #ffffff;
  --ks-op-foto-zacht: rgba(255, 255, 255, 0.92);
  --ks-foto-sluier: rgba(0, 0, 0, 0.72);
  --ks-foto-sluier-midden: rgba(0, 0, 0, 0.40);
  --ks-foto-tekstschaduw: rgba(0, 0, 0, 0.35);
  --ks-schaduw-zacht: 0 2px 10px rgba(0, 0, 0, 0.07);
  --ks-schaduw-zoek: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.10);
  --ks-spot-sluier: rgba(20, 20, 20, 0.34);
  --ks-held-sluier: rgba(8, 14, 26, 0.55);
  --ks-groen: #1a7340;
  --ks-groen-zacht: #edf4ef;
  --ks-rood: #b3261e;
  --ks-rood-zacht: #fbeeed;
  --ks-oranje: #8a4b00;
  --ks-oranje-zacht: #f9f1e4;
  /* Medailles (ks-md-): rustige metaaltinten, icoon minstens 3:1. */
  --ks-md-brons: #9a5a24; --ks-md-brons-zacht: #f7efe8;
  --ks-md-zilver: #66707a; --ks-md-zilver-zacht: #eff1f3;
  --ks-md-goud: #8f6a00; --ks-md-goud-zacht: #f8f1dc;
  --ks-blauw: #1d5ca6;
  --ks-blauw-zacht: #eef2f8;

  /* Maten */
  --ks-rond: 8px;
  --ks-rond-foto: 12px;
  --ks-rond-groot: 16px;
  --ks-rond-pil: 999px;
  /* Letterschaal: weinig maten, groot en duidelijk zoals een app. */
  --ks-t-1: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --ks-t-2: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --ks-t-3: 1.125rem;
  --ks-t-klein: .875rem;
  --ks-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ks-breed: 1280px;
  --ks-smal: 760px;
  --ks-zijmarge: 40px;
  --ks-kop-hoog: 72px;
  /* Echte hoogte van de kopbalk, met de veilige zone van een telefoon met inkeping. */
  --ks-kop-totaal: calc(var(--ks-kop-hoog) + env(safe-area-inset-top, 0px));
  --ks-veer: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* QR-code (tweestapsverificatie): altijd donker op licht, ook in de donkere
     modus, anders leest niet elke code-app hem. */
  --ks-qr-vlak: #ffffff;
  --ks-qr-inkt: #000000;

  /* Oude namen, zelfde waarde als de nieuwe, zodat bestaande pagina's meegaan */
  --ks-bg: #ffffff;
  --ks-kaart: #ffffff;
  --ks-kaart-2: #f4f4f2;
  --ks-stil: #555555;
  --ks-accent: #1d5bf0;
  --ks-accent-hover: #1749c4;
  --ks-accent-inkt: #ffffff;
  --ks-accent-zacht: #e9e9e6;
  --ks-focus: #111111;
  --ks-veld-rand: #8a8a8a;
  --ks-geel: var(--ks-merk);
  --ks-geel-hover: var(--ks-merk-hover);
  --ks-op-geel: var(--ks-op-merk);
  --ks-logo-geel: var(--ks-logo-merk);
  --ks-radius: var(--ks-rond);
  --ks-radius-klein: var(--ks-rond);
  --ks-radius-groot: var(--ks-rond-foto);
  --ks-schaduw: none;
  color-scheme: light;
}

html[data-thema="donker"] {
  --ks-achter: #141414;
  --ks-paneel: #1f1f1f;
  --ks-vlak: #1a1a1a;
  --ks-vlak-sterk: #292929;
  --ks-inkt: #ededed;
  --ks-zacht: #a8a8a8;
  --ks-lijn: #333333;
  --ks-lijn-sterk: #474747;
  --ks-rand: #757575;
  --ks-merk: #5b93ff;
  --ks-merk-hover: #7aa8ff;
  --ks-op-merk: #0b1b33;
  --ks-bel-u: #4a4a4a;
  --ks-op-bel-u: #ededed;
  --ks-logo-inkt: #ffffff;
  --ks-logo-merk: #5b93ff;
  --ks-band: #1f1f1f;
  --ks-op-band: #ededed;
  --ks-op-band-zacht: #a8a8a8;
  --ks-foto: #292929;
  --ks-schaduw-zacht: 0 0 0 1px #333333;
  --ks-schaduw-zoek: 0 0 0 1px #333333, 0 10px 32px rgba(0, 0, 0, 0.55);
  --ks-spot-sluier: rgba(0, 0, 0, 0.6);
  --ks-groen: #6fcf97;
  --ks-groen-zacht: #15241a;
  --ks-rood: #f2928b;
  --ks-rood-zacht: #2a1716;
  --ks-oranje: #f0b45c;
  --ks-oranje-zacht: #2a2113;
  --ks-md-brons: #d99a62; --ks-md-brons-zacht: #2a1f16;
  --ks-md-zilver: #b4bec8; --ks-md-zilver-zacht: #1f2328;
  --ks-md-goud: #e2bd4f; --ks-md-goud-zacht: #2a2410;
  --ks-blauw: #8ab6f0;
  --ks-blauw-zacht: #151f2c;
  --ks-bg: #121212;
  --ks-kaart: #121212;
  --ks-kaart-2: #1c1c1c;
  --ks-stil: #ababab;
  --ks-accent: #5b93ff;
  --ks-accent-hover: #7aa8ff;
  --ks-accent-inkt: #0b1b33;
  --ks-accent-zacht: #262626;
  --ks-focus: #f2f2f2;
  --ks-veld-rand: #6e6e6e;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-thema="auto"] {
    --ks-achter: #141414;
    --ks-paneel: #1f1f1f;
    --ks-vlak: #1a1a1a;
    --ks-vlak-sterk: #292929;
    --ks-inkt: #ededed;
    --ks-zacht: #a8a8a8;
    --ks-lijn: #333333;
    --ks-lijn-sterk: #474747;
    --ks-rand: #757575;
    --ks-merk: #5b93ff;
    --ks-merk-hover: #7aa8ff;
    --ks-op-merk: #0b1b33;
    --ks-bel-u: #4a4a4a;
    --ks-op-bel-u: #ededed;
    --ks-logo-inkt: #ffffff;
    --ks-logo-merk: #5b93ff;
    --ks-band: #1f1f1f;
    --ks-op-band: #ededed;
    --ks-op-band-zacht: #a8a8a8;
    --ks-foto: #292929;
    --ks-schaduw-zacht: 0 0 0 1px #333333;
    --ks-schaduw-zoek: 0 0 0 1px #333333, 0 10px 32px rgba(0, 0, 0, 0.55);
    --ks-spot-sluier: rgba(0, 0, 0, 0.6);
    --ks-groen: #6fcf97;
    --ks-groen-zacht: #15241a;
    --ks-rood: #f2928b;
    --ks-rood-zacht: #2a1716;
    --ks-oranje: #f0b45c;
    --ks-oranje-zacht: #2a2113;
    --ks-md-brons: #d99a62; --ks-md-brons-zacht: #2a1f16;
    --ks-md-zilver: #b4bec8; --ks-md-zilver-zacht: #1f2328;
    --ks-md-goud: #e2bd4f; --ks-md-goud-zacht: #2a2410;
    --ks-blauw: #8ab6f0;
    --ks-blauw-zacht: #151f2c;
    --ks-bg: #121212;
    --ks-kaart: #121212;
    --ks-kaart-2: #1c1c1c;
    --ks-stil: #ababab;
    --ks-accent: #5b93ff;
    --ks-accent-hover: #7aa8ff;
    --ks-accent-inkt: #0b1b33;
    --ks-accent-zacht: #262626;
    --ks-focus: #f2f2f2;
    --ks-veld-rand: #6e6e6e;
    color-scheme: dark;
  }
}

/* §Webapp: zachte overgang tussen pagina's (Chrome 126+, Safari 18.2+; andere
   browsers laden gewoon). Kopbalk en tabbalk blijven staan, de inhoud vloeit
   kort over. Niets bij minder beweging. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; animation-timing-function: var(--ks-veer); }
}
.ks-kopbalk { view-transition-name: ks-kopbalk; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Telefoon met inkeping (viewport-fit=cover): kopbalk en zijkanten in de veilige zone. */
.ks-kopbalk { padding-top: env(safe-area-inset-top, 0px); }
@supports (padding: max(0px)) {
  html .ks-wrap, html .ks-binnen { padding-left: max(var(--ks-zijmarge), env(safe-area-inset-left, 0px)); padding-right: max(var(--ks-zijmarge), env(safe-area-inset-right, 0px)); }
}
.ks-nav-mobiel-lijst, .ks-chat-lijst { overscroll-behavior: contain; }
/* Gekozen keuzetegel: inktrand plus een eigen vlak (hover verandert alleen de rand). */
html .ks-keuze:has(input:checked) { background: var(--ks-vlak-sterk); }

/* §2 Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--ks-achter); }
body {
  margin: 0;
  background: var(--ks-achter);
  color: var(--ks-inkt);
  font-family: var(--ks-font);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* Kolom over de hele hoogte: de voet staat onderaan, ook op korte pagina's. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
b, strong { font-weight: 600; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem); letter-spacing: 0; line-height: 1.15; }
h2 { font-size: clamp(1.3rem, 1.2rem + .5vw, 1.5rem); letter-spacing: 0; }
h3 { font-size: 1.1rem; letter-spacing: 0; line-height: 1.3; }
h4 { font-size: 1rem; line-height: 1.35; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--ks-lijn); margin: 32px 0; }
:focus-visible { outline: 2px solid var(--ks-focus); outline-offset: 2px; }
::selection { background: var(--ks-merk); color: var(--ks-op-merk); }

.ks-icoon {
  width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ks-overslaan { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 10px 16px; background: var(--ks-inkt); color: var(--ks-achter); border-radius: var(--ks-rond); text-decoration: none; }
.ks-overslaan:focus { left: 8px; }

/* §3 Opbouw --------------------------------------------------------------- */
.ks-main { flex: 1 0 auto; padding-bottom: 80px; }
.ks-wrap, .ks-binnen { width: 100%; max-width: var(--ks-breed); margin: 0 auto; padding: 0 var(--ks-zijmarge); }
.ks-wrap-smal { max-width: calc(var(--ks-smal) + 2 * var(--ks-zijmarge)); }
.ks-sectie { padding: 56px 0; }
.ks-sectie-vlak { background: var(--ks-vlak); }
.ks-sectie-lijn { border-top: 1px solid var(--ks-lijn); }
.ks-paginakop { padding-top: 40px; padding-bottom: 16px; }
.ks-paginakop h1 { margin-bottom: 12px; }
.ks-paginakop p { color: var(--ks-zacht); max-width: 62ch; font-size: 1rem; }
.ks-stapel > * + * { margin-top: 16px; }
.ks-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ks-rij-tussen { justify-content: space-between; }
.ks-raster { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.ks-raster-2 { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-raster-zij { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.ks-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
/* Rij "kop links, inhoud rechts" met een lijn erboven */
.ks-blok { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 56px; padding: 40px 0; border-top: 1px solid var(--ks-lijn); }
.ks-blok-kop { font-size: 1.15rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin: 0; }
.ks-blok-inhoud > * + * { margin-top: 16px; }
@media (max-width: 1127px) { :root { --ks-zijmarge: 24px; } }
@media (max-width: 880px) {
  .ks-raster-2, .ks-raster-zij, .ks-twee { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ks-blok { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 32px 0; }
}
@media (max-width: 860px) {
  :root { --ks-kop-hoog: 64px; }
  .ks-sectie { padding: 40px 0; }
  .ks-paginakop { padding-top: 28px; }
}
@media (max-width: 743px) { :root { --ks-zijmarge: 16px; } }

/* §4 Kopbalk en menu ------------------------------------------------------ */
.ks-kopbalk { background: var(--ks-achter); border-bottom: 1px solid var(--ks-lijn); position: sticky; top: 0; z-index: 20; }
.ks-kopbalk-rij { display: flex; align-items: center; gap: 24px; min-height: var(--ks-kop-hoog); }
/* Logo: het liggende logo A "Sprint" uit logo-v3, als inline SVG. Inkt en blauw
   komen uit --ks-logo-inkt en --ks-logo-merk, zodat het in donker vanzelf klopt.
   Vrije ruimte rondom: de helft van de K-hoogte; de kopbalk houdt die aan. */
.ks-logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; text-decoration: none; color: var(--ks-logo-inkt); }
.ks-logo svg { display: block; height: 30px; width: auto; aspect-ratio: 767.45 / 149.51; }
.ks-logo-inkt { fill: var(--ks-logo-inkt); }
.ks-logo-merk { fill: var(--ks-logo-merk); }
.ks-logo:focus-visible { outline-offset: 4px; border-radius: 4px; }
.ks-kop-label { margin-left: -8px; padding-left: 16px; border-left: 1px solid var(--ks-lijn); color: var(--ks-zacht); font-size: 15px; font-weight: 500; line-height: 24px; }
.ks-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 15px; font-weight: 500; }
.ks-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--ks-rond); text-decoration: none; color: var(--ks-inkt); transition: background-color .15s ease; }
.ks-nav a:hover { background: var(--ks-vlak-sterk); }
.ks-nav a.ks-actief, .ks-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.ks-kopbalk-rechts { display: flex; align-items: center; gap: 12px; flex: none; }
.ks-kopbalk-rechts:empty { display: none; }
.ks-kopbalk-rij:not(:has(.ks-nav)) .ks-kopbalk-rechts { margin-left: auto; }
.ks-kop-tegoed { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ks-inkt); white-space: nowrap; border: 1px solid var(--ks-lijn-sterk); border-radius: 999px; font-variant-numeric: tabular-nums; transition: background-color .15s ease; }
.ks-kop-tegoed:hover { background: var(--ks-vlak-sterk); }
/* iDEAL | Wero: nooit doorzichtig, altijd op wit, vrije ruimte rondom. */
.ks-ideal { display: inline-flex; align-items: center; padding: 7px; background: var(--ks-ideal-vlak); border: 1px solid var(--ks-lijn); border-radius: 6px; vertical-align: middle; line-height: 0; }
.ks-ideal img { display: block; height: 24px; width: auto; opacity: 1; }
.ks-kop-tegoed-label { color: var(--ks-zacht); font-weight: 500; }
.ks-kop-tegoed-laag { border-color: var(--ks-oranje); }
.ks-kop-tegoed-op { color: var(--ks-oranje); font-weight: 600; }
@media (max-width: 560px) {
  .ks-kop-tegoed { gap: 6px; padding: 0 10px; }
  .ks-kop-tegoed-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ks-kop-tegoed-laag .ks-kop-tegoed-op { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ks-kop-uit { display: inline-flex; align-items: center; gap: 6px; }
.ks-kop-uitform { display: inline-flex; margin: 0; }
.ks-nav-mobiel { display: none; position: relative; }
.ks-nav-mobiel summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ks-rond); border: 1px solid var(--ks-lijn); transition: transform .1s ease-out, background-color .15s ease; }
.ks-nav-mobiel summary::-webkit-details-marker { display: none; }
.ks-nav-mobiel summary:hover, .ks-nav-mobiel[open] summary { background: var(--ks-vlak); }
.ks-nav-mobiel summary:active { transform: scale(.94); }
.ks-nav-mobiel summary .ks-icoon { width: 22px; height: 22px; }
.ks-nav-mobiel-lijst { position: absolute; right: 0; top: 52px; z-index: 30; min-width: 240px; max-width: calc(100vw - 32px); max-height: calc(100dvh - var(--ks-kop-totaal) - 24px); overflow-y: auto; display: flex; flex-direction: column; padding: 6px; background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); box-shadow: var(--ks-schaduw-zacht); }
.ks-nav-mobiel-lijst a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--ks-rond); text-decoration: none; font-weight: 500; }
.ks-nav-mobiel-lijst a:hover { background: var(--ks-vlak-sterk); }
.ks-nav-mobiel-lijst a.ks-actief { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
@media (max-width: 860px) {
  .ks-kopbalk-rij { gap: 8px; }
  .ks-logo svg { height: 26px; }
  .ks-kop-label { margin-left: 0; padding-left: 10px; }
  .ks-nav { display: none; }
  .ks-nav-mobiel { display: block; order: 3; }
  .ks-kopbalk-rechts { margin-left: auto; gap: 8px; }
  .ks-kopbalk-rechts:empty + .ks-nav-mobiel { margin-left: auto; }
  .ks-kop-uit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
}
@media (max-width: 380px) {
  .ks-logo svg { height: 24px; }
}

/* §5 Voet ----------------------------------------------------------------- */
.ks-voet { margin-top: 0; background: var(--ks-vlak); border-top: 1px solid var(--ks-lijn); font-size: 14px; }
.ks-voet ul { list-style: none; padding: 0; margin: 0; }
/* Voet van het portaal: jaartal en links naast elkaar, zonder puntjes ertussen. */
.ks-voet-regel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.ks-voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 12px; padding-bottom: 20px; border-top: 1px solid var(--ks-lijn); color: var(--ks-zacht); }
.ks-voet-onder a { color: var(--ks-zacht); }
/* Op de telefoon een tikdoel van minstens 32 px hoog, zonder dat de regel verschuift. */
.ks-voet-regel a { display: inline-flex; align-items: center; min-height: 32px; }
.ks-voet-onder a:hover { color: var(--ks-inkt); }
.ks-voet-portaal { background: var(--ks-achter); }
.ks-voet-portaal .ks-voet-onder { border-top: 0; }
/* Iconen naar social media in de voettekst (kern/trustpilot.php). */
.ks-voet-sociaal { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ks-voet-sociaal a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ks-rond); color: var(--ks-zacht); }
.ks-voet-sociaal a:hover, .ks-voet-sociaal a:focus-visible { color: var(--ks-inkt); background: var(--ks-vlak); }
.ks-voet-sociaal svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
    .ks-voet-sociaal { margin-left: -12px; }
}
.ks-thema-knop { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--ks-rand); border-radius: var(--ks-rond); color: var(--ks-inkt); font: inherit; font-size: 14px; cursor: pointer; transition: transform .1s ease-out, background-color .15s ease; }
.ks-thema-knop:hover { background: var(--ks-vlak-sterk); }
.ks-thema-knop:active { transform: scale(.97); }
.ks-thema-knop .ks-icoon { width: 18px; height: 18px; }
/* Zonder JavaScript doet de knop niets; basis.js haalt data-ks-wacht weg. */
.ks-thema-knop[data-ks-wacht] { display: none; }
.ks-thema-knop .ks-thema-licht { display: none; }
html[data-thema="donker"] .ks-thema-knop .ks-thema-licht { display: inline; }
html[data-thema="donker"] .ks-thema-knop .ks-thema-donker { display: none; }

/* §6 Knoppen -------------------------------------------------------------- */
/* .ks-knop is de gele hoofdknop: één per scherm. De rest is tweede (omlijnd),
   donker (inkt vlak) of stil (tekst). Elke knop geeft een kleine indruk bij
   het drukken. */
.ks-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  background: var(--ks-merk); color: var(--ks-op-merk);
  border: 1px solid var(--ks-merk); border-radius: var(--ks-rond-pil);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: transform .1s ease-out, background-color .15s ease, border-color .15s ease;
}
.ks-knop:hover { background: var(--ks-merk-hover); border-color: var(--ks-merk-hover); text-decoration: none; }
.ks-knop:active { transform: scale(.97); }
/* Nog niet beschikbaar: een rustig grijs vlak in plaats van gedimd geel
   (dat wordt modderig in donker en flets in licht). Tekst --ks-zacht op
   --ks-vlak-sterk haalt 4,5:1 in beide thema's. */
.ks-knop[disabled], .ks-knop[aria-disabled="true"],
.ks-knop[disabled]:hover, .ks-knop[aria-disabled="true"]:hover {
  background: var(--ks-vlak-sterk); color: var(--ks-zacht); border-color: var(--ks-lijn);
  cursor: not-allowed; transform: none;
}
/* Bezig (basis.js, formulieren met data-ks-eenmalig): niet dimmen, alleen
   aria-busy en een klein draaiend icoon voor de tekst. Bij beperkte
   beweging staat het stil (regel onderaan dit blad). */
[aria-busy="true"] { cursor: progress; }
.ks-bezig-icoon { width: 18px; height: 18px; flex: none; animation: ks-draai .8s linear infinite; }
@keyframes ks-draai { to { transform: rotate(360deg); } }
.ks-knop-tweede { background: transparent; color: var(--ks-inkt); border-color: var(--ks-rand); }
.ks-knop-tweede:hover { background: var(--ks-vlak-sterk); border-color: var(--ks-inkt); }
.ks-knop-donker { background: var(--ks-inkt); color: var(--ks-achter); border-color: var(--ks-inkt); }
.ks-knop-donker:hover { background: var(--ks-zacht); border-color: var(--ks-zacht); }
.ks-knop-licht { background: var(--ks-op-band); color: var(--ks-band); border-color: var(--ks-op-band); }
.ks-knop-licht:hover { background: var(--ks-op-band-zacht); border-color: var(--ks-op-band-zacht); }
.ks-knop-gevaar { background: transparent; color: var(--ks-rood); border-color: var(--ks-rood); }
.ks-knop-gevaar:hover { background: var(--ks-rood-zacht); border-color: var(--ks-rood); }
.ks-knop-klein { min-height: 44px; padding: 0 16px; font-size: 15px; }
.ks-knop-groot { min-height: 52px; padding: 0 24px; font-size: 16px; }
.ks-knop-blok, .ks-knop-breed { width: 100%; }
.ks-knop-stil { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; background: none; border: 0; font: inherit; color: var(--ks-zacht); cursor: pointer; text-decoration: none; }
.ks-knop-stil:hover { color: var(--ks-inkt); text-decoration: underline; text-underline-offset: 4px; }
.ks-knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ks-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.ks-link:hover { text-decoration-thickness: 2px; }

/* §7 Kaarten, pillen, meldingen ------------------------------------------ */
/* Een kaart is een vlak met een dunne lijn: geen schaduw, geen kleur. */
.ks-kaart { background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); padding: 24px; }
.ks-kaart-strak { padding: 0; overflow: hidden; }
.ks-kaart-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ks-kaart-kop h2, .ks-kaart-kop h3 { margin: 0; }
.ks-kaart-link { display: block; text-decoration: none; transition: border-color .15s ease, transform .1s ease-out; }
.ks-kaart-link:hover { border-color: var(--ks-rand); text-decoration: none; }
.ks-kaart-link:active { transform: scale(.99); }
.ks-kaart-accent { background: var(--ks-vlak); border-color: var(--ks-vlak); }
.ks-kaart-donker { background: var(--ks-band); color: var(--ks-op-band); border-color: var(--ks-band); }
.ks-kaart-donker .ks-stil, .ks-kaart-donker .ks-zacht { color: var(--ks-op-band-zacht); opacity: 1; }
.ks-raster > .ks-kaart, .ks-raster-2 > .ks-kaart { height: 100%; }

/* Pil: geen gekleurd blokje, maar een rustig label in tekst. De kleur zit
   alleen in een klein bolletje ervoor. */
.ks-pil { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--ks-inkt); font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap; text-decoration: none; }
.ks-pil .ks-icoon { width: 1em; height: 1em; }
.ks-pil-groen::before, .ks-pil-rood::before, .ks-pil-oranje::before, .ks-pil-blauw::before, .ks-pil-accent::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor;
}
.ks-pil-stil { color: var(--ks-zacht); font-weight: 500; }
.ks-pil-accent { color: var(--ks-inkt); }
.ks-pil-accent::before { background: var(--ks-inkt); }
.ks-pil-groen { color: var(--ks-groen); }
.ks-pil-rood { color: var(--ks-rood); }
.ks-pil-oranje { color: var(--ks-oranje); }
.ks-pil-blauw { color: var(--ks-blauw); }

/* Melding: een vlak blok met een dunne rand. Alleen een fout krijgt kleur,
   in de rand; blauw blijft voor de hoofdknop. */
.ks-melding { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond); background: var(--ks-vlak); color: var(--ks-inkt); font-size: 15px; }
.ks-melding-ok { border-color: var(--ks-lijn); }
.ks-melding-fout { border-color: var(--ks-rood); }
.ks-melding-let { border-color: var(--ks-lijn-sterk); }
.ks-melding-info { border-color: var(--ks-lijn); }
.ks-melding p:last-child { margin-bottom: 0; }
.ks-flash { padding-top: 24px; }

/* §8 Formulieren ---------------------------------------------------------- */
.ks-form > * + * { margin-top: 20px; }
.ks-form > input[type="hidden"] + :not(input[type="hidden"]) { margin-top: 0; }
.ks-veld { display: block; }
.ks-veld > label, .ks-label { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0 0 8px; padding: 0; }
.ks-veld-hulp { display: block; color: var(--ks-zacht); font-size: 14px; margin-top: 6px; }
.ks-veld-fout { display: block; color: var(--ks-rood); font-size: 14px; margin-top: 6px; font-weight: 600; }
.ks-invoer, .ks-veld input[type="text"], .ks-veld input[type="email"], .ks-veld input[type="tel"], .ks-veld input[type="number"],
.ks-veld input[type="datetime-local"], .ks-veld input[type="date"], .ks-veld input[type="search"], .ks-veld input[type="password"], .ks-veld select, .ks-veld textarea {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px;
  font: inherit; font-size: 16px; color: var(--ks-inkt); background: var(--ks-paneel);
  border: 1px solid var(--ks-rand); border-radius: var(--ks-rond);
}
.ks-veld textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.ks-veld input::placeholder, .ks-veld textarea::placeholder, .ks-invoer::placeholder { color: var(--ks-zacht); opacity: 1; }
.ks-veld input:focus, .ks-veld select:focus, .ks-veld textarea:focus, .ks-invoer:focus { outline: 2px solid var(--ks-inkt); outline-offset: -1px; border-color: var(--ks-inkt); }
.ks-veld-rij { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ks-veld.ks-veld-fout-rand input, .ks-veld.ks-veld-fout-rand select, .ks-veld.ks-veld-fout-rand textarea { border-color: var(--ks-rood); }

/* Keuzetegels: radio of checkbox als tikbaar vlak. Het rondje zelf is
   verborgen; het hele vlak is de knop. Gekozen: inkt vlak.
   <div class="ks-keuzes"><label class="ks-keuze"><input type="radio" name="x" value="a"><span>Tekst</span></label></div> */
.ks-keuzes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); border: 0; margin: 0; padding: 0; min-width: 0; }
.ks-keuze { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--ks-rand); border-radius: var(--ks-rond); background: var(--ks-paneel); cursor: pointer; font-size: 15px; font-weight: 500; line-height: 1.3; touch-action: manipulation; transition: transform .1s ease-out, border-color .15s ease, background-color .15s ease; }
.ks-keuze:hover { border-color: var(--ks-inkt); }
.ks-keuze:active { transform: scale(.98); }
.ks-keuze input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ks-inkt); }
/* Zonder :has toont niets anders welke tegel gekozen is: dan blijft het
   rondje zichtbaar. Met :has is het onzichtbaar maar bedienbaar en focusbaar. */
@supports selector(:has(*)) {
  .ks-keuze input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
}
.ks-keuze:has(input:checked) { border-color: var(--ks-inkt); box-shadow: inset 0 0 0 1px var(--ks-inkt); background: var(--ks-vlak); font-weight: 600; }
.ks-keuze:has(input:focus-visible) { outline: 2px solid var(--ks-inkt); outline-offset: 2px; }
.ks-keuze:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.ks-vinkje { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; cursor: pointer; }
.ks-vinkje input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ks-inkt); }
.ks-veld > label.ks-vinkje { display: flex; font-size: inherit; font-weight: inherit; margin-bottom: 0; }

/* Akkoord met de voorwaarden (ks_akkoord_blok in kern/juridisch.php): een
   kaartje met het vinkje bovenin en de documenten eronder als rijen. */
.ks-akk { border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-foto); background: var(--ks-paneel); overflow: hidden; transition: border-color .15s ease; }
.ks-akk:has(.ks-akk-vink:checked) { border-color: var(--ks-merk); }
.ks-akk.ks-akk-fout { border-color: var(--ks-rood); }
.ks-akk-regel { display: flex; gap: 14px; align-items: flex-start; padding: 16px; cursor: pointer; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--ks-inkt); }
.ks-akk-vink { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ks-merk); cursor: pointer; }
.ks-akk-tekst { min-width: 0; }
.ks-akk > .ks-veld-fout { display: block; margin: -10px 0 0; padding: 0 16px 14px 52px; }
.ks-akk-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ks-lijn); background: var(--ks-vlak); }
.ks-akk-docs > li { margin: 0; padding: 0; }
.ks-akk-docs > li + li { border-top: 1px solid var(--ks-lijn); }
.ks-akk-doc { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px; color: var(--ks-inkt); text-decoration: none; }
.ks-akk-doc:hover .ks-akk-doc-titel { text-decoration: underline; text-underline-offset: 3px; }
.ks-akk-doc:focus-visible { outline: 2px solid var(--ks-merk); outline-offset: -2px; }
.ks-akk-doc-icoon { display: flex; width: 22px; justify-content: center; color: var(--ks-zacht); flex: none; }
.ks-akk-doc-icoon svg { width: 20px; height: 20px; }
.ks-akk-doc-tekst { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ks-akk-doc-titel { font-size: 15px; font-weight: 500; line-height: 1.3; }
.ks-akk-doc-versie { font-size: 13px; color: var(--ks-zacht); line-height: 1.3; }
.ks-akk-doc-pijl { display: flex; color: var(--ks-zacht); flex: none; }
.ks-akk-doc-pijl svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .ks-keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-keuze { min-height: 48px; padding: 8px 12px; }
}

/* §9 Tabellen en lijsten -------------------------------------------------- */
/* Tabel zonder kader: kopregel met een lijn, rijen met dunne lijnen. */
.ks-tabel-wrap { overflow-x: auto; }
.ks-tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.ks-tabel caption { text-align: left; font-size: 14px; font-weight: 600; padding-bottom: 10px; }
.ks-tabel th, .ks-tabel td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-tabel th:last-child, .ks-tabel td:last-child { padding-right: 0; }
.ks-tabel th { font-size: 13px; font-weight: 600; color: var(--ks-zacht); background: none; white-space: nowrap; }
.ks-tabel thead th { padding-top: 0; border-bottom-color: var(--ks-lijn-sterk); }
.ks-tabel tbody th { font-size: inherit; font-weight: 500; color: var(--ks-inkt); white-space: normal; }
.ks-tabel td.ks-getal, .ks-tabel th.ks-getal { text-align: right; white-space: nowrap; }
.ks-tabel td.ks-getal { font-weight: 600; }
.ks-tabel tfoot td { border-bottom: 0; font-size: 14px; color: var(--ks-zacht); }
.ks-gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0; border-top: 1px solid var(--ks-lijn); }
.ks-gegevens dt, .ks-gegevens dd { padding: 11px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-gegevens dt { color: var(--ks-zacht); padding-right: 24px; }
.ks-gegevens dd { margin: 0; font-weight: 500; }
@media (max-width: 520px) {
  .ks-gegevens { grid-template-columns: 1fr; }
  .ks-gegevens dt { padding-bottom: 0; padding-right: 0; border-bottom: 0; font-size: 14px; }
  .ks-gegevens dd { padding-top: 2px; }
}
/* Lijst met lijnen tussen de punten (geen vinkjes als versiering). */
.ks-lijst, .ks-lijst-vink { list-style: none; padding: 0; border-top: 1px solid var(--ks-lijn); }
.ks-lijst > li, .ks-lijst-vink > li { padding: 12px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-genummerd { list-style: none; padding: 0; counter-reset: ks-nr; border-top: 1px solid var(--ks-lijn); }
.ks-genummerd > li { counter-increment: ks-nr; display: grid; grid-template-columns: 32px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-genummerd > li::before { content: counter(ks-nr); color: var(--ks-zacht); font-variant-numeric: tabular-nums; font-weight: 500; }

/* §10 Tijdlijn ------------------------------------------------------------ */
.ks-tijdlijn { list-style: none; margin: 0; padding: 0; position: relative; }
.ks-tijdlijn li { position: relative; padding: 0 0 18px 28px; }
.ks-tijdlijn li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--ks-achter); border: 2px solid var(--ks-rand); }
.ks-tijdlijn li::after { content: ""; position: absolute; left: 8px; top: 21px; bottom: 0; width: 1px; background: var(--ks-lijn-sterk); }
.ks-tijdlijn li:last-child::after { display: none; }
.ks-tijdlijn li.ks-tijdlijn-nu::before { background: var(--ks-inkt); border-color: var(--ks-inkt); }
.ks-tijdlijn-tijd { display: block; font-size: 13px; color: var(--ks-zacht); }

/* Stappenlijn: ol.ks-voortgang > li(.ks-klaar | .ks-nu) > b + span */
.ks-voortgang { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.ks-voortgang li { padding-top: 14px; border-top: 3px solid var(--ks-lijn); font-size: 14px; line-height: 1.35; color: var(--ks-zacht); }
.ks-voortgang li b { display: block; font-size: 15px; font-weight: 600; }
.ks-voortgang li span { display: block; margin-top: 2px; }
.ks-voortgang li.ks-klaar { border-top-color: var(--ks-inkt); color: var(--ks-inkt); }
.ks-voortgang li.ks-nu { border-top-color: var(--ks-merk); color: var(--ks-inkt); }
@media (max-width: 860px) {
  .ks-voortgang { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .ks-voortgang li { border-top: 0; border-left: 3px solid var(--ks-lijn); padding: 6px 0 14px 16px; }
  .ks-voortgang li.ks-klaar { border-left-color: var(--ks-inkt); }
  .ks-voortgang li.ks-nu { border-left-color: var(--ks-merk); }
}

/* §11 Leeg, fout, sterren ------------------------------------------------- */
.ks-leeg { padding: 32px 24px; background: var(--ks-vlak); border-radius: var(--ks-rond-foto); text-align: left; }
.ks-leeg-titel { font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.ks-leeg > p:last-child { margin-bottom: 0; }
.ks-fout { padding: 72px var(--ks-zijmarge); }
.ks-fout > .ks-pil { margin-bottom: 8px; }
/* Inlogpagina van de beta (kern/router.php, ks_beta_inlogpagina). */
.ks-beta-slot { padding: 72px var(--ks-zijmarge); }
.ks-sterren { display: inline-flex; align-items: center; gap: 1px; }
.ks-ster .ks-icoon { width: 16px; height: 16px; color: var(--ks-zacht); fill: none; }
.ks-ster-vol .ks-icoon { color: var(--ks-inkt); fill: var(--ks-inkt); }
.ks-sterren-getal { margin-left: 6px; font-weight: 600; font-size: 14px; }

/* §12 Chat ---------------------------------------------------------------- */
.ks-chat { display: flex; flex-direction: column; gap: 16px; }
.ks-chat-lijst { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; min-height: 160px; overflow-y: auto; padding: 16px; background: var(--ks-vlak); border-radius: var(--ks-rond-foto); }
.ks-chat-bericht { align-self: flex-start; max-width: 80%; padding: 10px 14px; border-radius: var(--ks-rond-foto); border-bottom-left-radius: 4px; background: var(--ks-paneel); border: 1px solid var(--ks-lijn); white-space: pre-wrap; overflow-wrap: anywhere; }
.ks-chat-bericht-eigen { align-self: flex-end; background: var(--ks-inkt); color: var(--ks-achter); border-color: var(--ks-inkt); border-bottom-left-radius: var(--ks-rond-foto); border-bottom-right-radius: 4px; }
.ks-chat-bericht-eigen .ks-chat-meta { color: inherit; opacity: .8; }
.ks-chat-bericht-systeem { align-self: center; max-width: 92%; padding: 4px 8px; background: none; border: 0; color: var(--ks-zacht); font-size: 13px; text-align: center; }
.ks-chat-slot { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; width: 26px; height: 20px; margin: 0 2px; border-radius: 6px; background: var(--ks-vlak-sterk); border: 1px solid var(--ks-lijn-sterk); color: var(--ks-inkt); cursor: help; }
.ks-chat-slot svg { width: 13px; height: 13px; }
.ks-chat-meta { display: block; font-size: 12px; color: var(--ks-zacht); margin-top: 4px; }
.ks-chat-invoer { display: flex; gap: 8px; align-items: flex-end; }
.ks-chat-invoer textarea { flex: 1; height: 48px; min-height: 48px; max-height: 180px; padding: 11px 14px; font: inherit; line-height: 24px; color: var(--ks-inkt); background: var(--ks-paneel); border: 1px solid var(--ks-rand); border-radius: var(--ks-rond); resize: vertical; }
/* Groeit mee met de tekst waar de browser dat kan; anders kan de bezoeker hem zelf groter trekken. */
@supports (field-sizing: content) { .ks-chat-invoer textarea { field-sizing: content; height: auto; resize: none; } }
.ks-chat-invoer textarea:focus { outline: 2px solid var(--ks-inkt); outline-offset: -1px; border-color: var(--ks-inkt); }
.ks-chat-invoer .ks-knop { min-height: 48px; }
/* Veilige zone onderaan (iPhone): de invoer blijft boven de thuisbalk. */
.ks-chat-invoer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.ks-chat-noot { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; color: var(--ks-zacht); }
.ks-chat-noot .ks-icoon { width: 16px; height: 16px; }
.ks-chat-let { margin: 8px 0 0; font-size: 14px; }
.ks-chat-meld { margin-top: 12px; font-size: 14px; color: var(--ks-zacht); }
.ks-chat-meld summary { cursor: pointer; }
.ks-chat-meld form { display: grid; gap: 8px; margin-top: 8px; }
.ks-chat-meld textarea { width: 100%; font: inherit; padding: 8px 12px; border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond); background: var(--ks-kaart); color: var(--ks-inkt); }
.ks-chat-meld .ks-knop { justify-self: start; }
@media (max-width: 860px) {
  .ks-chat-lijst { padding: 12px; }
  .ks-chat-bericht { max-width: 88%; }
}

/* §13 Tekst en hulpklassen ------------------------------------------------ */
.ks-h1 { font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: 0; margin: 0; }
.ks-h2 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: 0; margin: 0; }
.ks-h3 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin: 0; }
.ks-lead { font-size: 17px; line-height: 1.5; max-width: 52ch; }
.ks-cijfer { display: block; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .ks-h1 { font-size: 28px; line-height: 1.2; }
  .ks-h2 { font-size: 21px; }
  .ks-h3 { font-size: 17px; }
  .ks-lead { font-size: 16px; }
  .ks-cijfer { font-size: 28px; }
}
.ks-band { background: var(--ks-band); color: var(--ks-op-band); }
.ks-band .ks-zacht, .ks-band .ks-stil { color: var(--ks-op-band-zacht); }
.ks-band :focus-visible { outline-color: var(--ks-op-band); }
.ks-foto { position: relative; margin: 0; background: var(--ks-foto); border-radius: var(--ks-rond-foto); overflow: hidden; }
.ks-foto img { width: 100%; height: 100%; object-fit: cover; }
html[data-thema="donker"] .ks-foto img { filter: brightness(.92); }
@media (prefers-color-scheme: dark) { html[data-thema="auto"] .ks-foto img { filter: brightness(.92); } }
.ks-stil, .ks-zacht { color: var(--ks-zacht); }
.ks-klein { font-size: 14px; }
.ks-vet { font-weight: 600; }
.ks-centreer { text-align: center; }
.ks-geen-marge { margin: 0; }
.ks-mt { margin-top: 24px; }
.ks-mb { margin-bottom: 24px; }
.ks-verborgen, .ks-weg { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
/* Geen tabular-nums: dat gaf eerder lelijk brede leestekens ("€ 3 . 500").
   .ks-getallen blijft bestaan voor bestaande pagina's maar doet niets meer. */
.ks-getallen { font-variant-numeric: normal; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .ks-knop:active, .ks-keuze:active, .ks-kaart-link:active, .ks-thema-knop:active, .ks-nav-mobiel summary:active { transform: none; }
}

@media print {
  .ks-kopbalk, .ks-voet, .ks-thema-knop, .ks-chat-invoer { display: none !important; }
  /* Printen altijd licht, ook als het donkere thema aan staat. */
  html, html[data-thema] {
    --ks-achter: #ffffff; --ks-vlak: #f4f4f2; --ks-vlak-sterk: #e9e9e6; --ks-inkt: #000000; --ks-zacht: #444444;
    --ks-lijn: #dddddd; --ks-lijn-sterk: #b5b5b5; --ks-rand: #8a8a8a;
    --ks-merk: #1d5bf0; --ks-merk-hover: #1749c4; --ks-op-merk: #ffffff; --ks-logo-inkt: #0b1b33; --ks-logo-merk: #1d5bf0;
    --ks-geel-hover: #1749c4; --ks-band: #111111; --ks-op-band: #ffffff; --ks-op-band-zacht: #c4c4c4; --ks-foto: #a3a3a3;
    --ks-groen: #1a7340; --ks-groen-zacht: #edf4ef; --ks-rood: #b3261e; --ks-rood-zacht: #fbeeed;
    --ks-oranje: #8a4b00; --ks-oranje-zacht: #f9f1e4; --ks-blauw: #1d5ca6; --ks-blauw-zacht: #eef2f8;
    --ks-md-brons: #9a5a24; --ks-md-brons-zacht: #f7efe8; --ks-md-zilver: #66707a; --ks-md-zilver-zacht: #eff1f3; --ks-md-goud: #8f6a00; --ks-md-goud-zacht: #f8f1dc;
    --ks-bg: #ffffff; --ks-kaart: #ffffff; --ks-kaart-2: #f4f4f2; --ks-stil: #444444; --ks-accent-hover: #1749c4;
    --ks-accent-zacht: #e9e9e6; --ks-focus: #000000; --ks-veld-rand: #8a8a8a;
    color-scheme: light;
  }
}

/* Demo-omgeving ------------------------------------------------------------
   Alleen als ks_demo_aan(): een smalle balk boven de kop en de pagina /demo. */
.ks-demo-balk { background: var(--ks-band); color: var(--ks-op-band); font-size: .85rem; }
.ks-demo-balk-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-top: 8px; padding-bottom: 8px; }
.ks-demo-balk-link { color: var(--ks-op-band); font-weight: 600; }
.ks-demo-kop { margin: 32px 0 8px; }
.ks-demo-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ks-lijn); }
.ks-demo-rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-demo-tekst { min-width: 0; }
.ks-demo-naam { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ks-demo-uitleg { margin: 2px 0 0; color: var(--ks-zacht); font-size: .92rem; }
.ks-demo-form { margin: 0; flex: none; }
.ks-demo-zoek { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0 0; }
.ks-demo-zoek-veld { flex: 1; min-width: 0; margin: 0; }
.ks-demo-zoek-knop { flex: none; }
.ks-demo-aantal { margin: 10px 0 0; color: var(--ks-zacht); font-size: .92rem; }
.ks-demo-noot { margin: 0 0 4px; color: var(--ks-zacht); font-size: .92rem; }
.ks-demo-subkop { margin: 20px 0 6px; font-size: 1rem; font-weight: 600; }
.ks-demo-plaatsen { border-top: 1px solid var(--ks-lijn); }
.ks-demo-plaats { border-bottom: 1px solid var(--ks-lijn); }
.ks-demo-plaats-kop { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; cursor: pointer; list-style: none; font-weight: 600; }
.ks-demo-plaats-kop::-webkit-details-marker { display: none; }
.ks-demo-plaats-kop::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ks-zacht); border-bottom: 2px solid var(--ks-zacht); transform: rotate(45deg); transition: transform .15s ease-out; }
.ks-demo-plaats[open] > .ks-demo-plaats-kop::after { transform: rotate(-135deg); }
.ks-demo-plaats-naam { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ks-demo-plaats-aantal { color: var(--ks-zacht); font-weight: 400; font-variant-numeric: tabular-nums; }
.ks-demo-lijst-in { border-top: 1px solid var(--ks-lijn); }
.ks-demo-lijst-in .ks-demo-rij:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ks-demo-plaats-kop::after { transition: none; } }
@media print { .ks-demo-balk { display: none; } }

/* Foto's van een vakman (kern/vakman_fotos.php): logo of initialen en een
   strook met eerder werk. Gedeeld door klantpagina, vakman en beheer. */
.ks-vf-logo { flex: none; display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; background: var(--ks-vlak-sterk); border: 1px solid var(--ks-lijn); color: var(--ks-zacht); font-weight: 600; letter-spacing: .02em; }
.ks-vf-logo-klein { width: 40px; height: 40px; font-size: 14px; }
.ks-vf-logo-groot { width: 96px; height: 96px; font-size: 30px; }
.ks-vf-strook { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ks-vf-strook li { margin: 0; }
.ks-vf-strook a { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ks-vlak-sterk); }
.ks-vf-strook a:focus-visible { outline: 2px solid var(--ks-focus); outline-offset: 2px; }
.ks-vf-strook img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-vf-meer { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ks-band) 70%, transparent); color: var(--ks-op-band); font-weight: 600; }

/* KlusSure op uw telefoon (ks_app_installeer_blok, assets/js/installeer.js).
   Gedeeld door klant en vakman; zonder JS en in de app zelf verborgen. */
.ks-inst { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; margin: 40px 0 0; padding: 16px; border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-groot); background: var(--ks-paneel); }
.ks-inst[hidden] { display: none; }
.ks-inst-icoon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ks-vlak-sterk); color: var(--ks-inkt); }
.ks-inst-icoon svg { width: 22px; height: 22px; }
.ks-inst-kop { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: normal; }
.ks-inst-uitleg { margin: 2px 0 0; color: var(--ks-zacht); font-size: 15px; }
@media (max-width: 520px) {
  .ks-inst { grid-template-columns: auto minmax(0, 1fr); }
  .ks-inst-knop { grid-column: 1 / -1; width: 100%; }
}
/* Medailles (kern/medailles.php, gedrag in assets/js/medailles.js) ---------
   Gedeeld onderdeel: bij reacties (klant), op Prestaties (vakman), op de
   klantpagina en de bedrijfspagina. Brons, zilver en goud zijn rustige
   metaaltinten; de tekst blijft in --ks-inkt. Tik of hover toont de uitleg. */
.ks-md-rij { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ks-md { position: relative; margin: 0; }
.ks-md-knop {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin: 0; padding: 2px 10px 2px 3px;
  border: 1px solid var(--ks-lijn); border-radius: 999px; background: var(--ks-achter); color: var(--ks-inkt);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: left;
  transition: border-color .15s;
}
.ks-md-knop:hover, .ks-md-knop[aria-expanded="true"] { border-color: var(--ks-lijn-sterk); }
.ks-md-knop:focus-visible { outline: 2px solid var(--ks-focus); outline-offset: 2px; }
.ks-md-penning {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px;
  border: 1.5px solid currentColor; border-radius: 50%;
}
.ks-md-penning svg { width: 14px; height: 14px; }
.ks-md-penning-groot { width: 44px; height: 44px; border-width: 2px; }
.ks-md-penning-groot svg { width: 22px; height: 22px; }
.ks-md-open { color: var(--ks-zacht); background: var(--ks-vlak); border-style: dashed; }
.ks-md-brons { color: var(--ks-md-brons); background: var(--ks-md-brons-zacht); }
.ks-md-zilver { color: var(--ks-md-zilver); background: var(--ks-md-zilver-zacht); }
.ks-md-goud { color: var(--ks-md-goud); background: var(--ks-md-goud-zacht); }

.ks-md-uitleg {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  display: none; flex-direction: column; gap: 4px; width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px; border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond);
  background: var(--ks-paneel); color: var(--ks-inkt); box-shadow: var(--ks-schaduw-zacht);
  font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left;
  transform: translateX(var(--ks-md-schuif, 0px));
}
/* Verborgen met display: none, zodat een uitleg buiten beeld de pagina niet
   breder maakt; bij tonen een korte fade (animatie start bij display). */

.ks-md-uitleg-onder { bottom: auto; top: calc(100% + 8px); }
.ks-md:hover .ks-md-uitleg, .ks-md-knop:focus-visible + .ks-md-uitleg, .ks-md-knop[aria-expanded="true"] + .ks-md-uitleg {
  display: flex; animation: ks-md-tip .15s ease-out;
}
@keyframes ks-md-tip { from { opacity: 0; } to { opacity: 1; } }
.ks-md-uitleg-kop { font-weight: 600; }
.ks-md-uitleg-tekst { color: var(--ks-zacht); }
.ks-md-uitleg-stand { font-weight: 600; }
.ks-md-uitleg-nog { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; color: var(--ks-zacht); }
.ks-md-leeg { margin: 0; color: var(--ks-zacht); font-size: 14px; }

/* Voortgang naar het volgende niveau */
.ks-md-voortgang {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px;
  border: 0; border-radius: 999px; background: var(--ks-vlak-sterk); color: var(--ks-inkt); overflow: hidden;
}
.ks-md-voortgang::-webkit-progress-bar { background: var(--ks-vlak-sterk); border-radius: 999px; }
.ks-md-voortgang::-webkit-progress-value { background: var(--ks-inkt); border-radius: 999px; transition: width .3s; }
.ks-md-voortgang::-moz-progress-bar { background: var(--ks-inkt); border-radius: 999px; }

/* Alle medailles als kaarten, even hoog, voet onderaan */
.ks-md-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ks-md-kaart {
  display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px;
  border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); background: var(--ks-achter);
}
.ks-md-kaart:target { border-color: var(--ks-inkt); }
.ks-md-kaart-kop { display: flex; align-items: center; gap: 12px; }
.ks-md-kaart-titel { margin: 0; font-weight: 600; line-height: 1.3; }
.ks-md-kaart-niveau { margin: 2px 0 0; color: var(--ks-zacht); font-size: 13px; }
.ks-md-kaart-tekst { margin: 0; color: var(--ks-zacht); font-size: 14px; line-height: 1.45; }
.ks-md-kaart-stand { margin: 0; font-size: 14px; font-weight: 600; }
.ks-md-kaart-voet { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 4px; }
.ks-md-kaart-nog { margin: 0; color: var(--ks-zacht); font-size: 13px; }
.ks-md-treden { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ks-md-trede { flex: 1; height: 4px; margin: 0; border: 0; border-radius: 2px; background: var(--ks-vlak-sterk); }
.ks-md-trede.ks-md-trede-aan { background: currentColor; }

/* Melding na het halen van een medaille */
.ks-md-nieuw {
  width: calc(100% - 32px); max-width: 380px; margin: auto; padding: 24px;
  border: 1px solid var(--ks-lijn); border-radius: 16px; background: var(--ks-paneel); color: var(--ks-inkt);
  text-align: center; box-shadow: var(--ks-schaduw-zoek);
}
.ks-md-nieuw::backdrop { background: var(--ks-spot-sluier); }
.ks-md-nieuw[open] { animation: ks-md-in .25s ease-out; }
.ks-md-nieuw-penningen { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.ks-md-penning-nieuw { width: 64px; height: 64px; border-width: 2px; animation: ks-md-penning .3s ease-out both; }
.ks-md-penning-nieuw svg { width: 30px; height: 30px; }
.ks-md-penning-nieuw:nth-child(2) { animation-delay: .08s; }
.ks-md-penning-nieuw:nth-child(3) { animation-delay: .16s; }
.ks-md-nieuw-kop { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.ks-md-nieuw-lijst { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.ks-md-nieuw-lijst span { color: var(--ks-zacht); }
.ks-md-nieuw-uitleg { display: block; font-size: 14px; }
.ks-md-nieuw-knoppen { display: flex; flex-direction: column; gap: 8px; }
@keyframes ks-md-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ks-md-penning { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ks-md-voortgang::-webkit-progress-value { transition: none; }
  .ks-md-uitleg, .ks-md-nieuw[open], .ks-md-penning-nieuw { animation: none !important; }
}

/* Prestatiescore als badge (ks_md_score_badge) */
.ks-md-score-wrap { display: inline-block; }
.ks-md-score {
  display: inline-grid; place-items: center; flex: none; min-width: 24px; height: 24px; padding: 0 4px;
  border: 1.5px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ks-md-score svg { width: 14px; height: 14px; }
.ks-md-score.ks-md-open { color: var(--ks-zacht); }
.ks-md-score-lijst { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ks-md-score-rij { display: flex; justify-content: space-between; gap: 16px; }
.ks-md-score-rij b { font-variant-numeric: tabular-nums; }
.ks-md-rij-ingeklapt .ks-md-extra { display: none; }
/* Variant rond (.ks-md-rond om de rij): alleen de penningen, de naam staat
   in de uitleg en blijft voor schermlezers in de knop. */
.ks-md-rond .ks-md-titel {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ks-md-rond .ks-md-knop { justify-content: center; min-width: 32px; min-height: 32px; padding: 3px; }
.ks-md-rond .ks-md-meer { padding: 3px 8px; white-space: nowrap; }
.ks-md-meer-plek { margin: 0; }
.ks-md-meer { padding-left: 10px; color: var(--ks-zacht); }
.ks-md-meer[hidden] { display: none; }
/* Keuzeknop bij een huisnummer met toevoegingen (adres.js, klus plaatsen en
   vakman). Gedeeld, omdat het script hem in beide gebieden maakt. */
.ks-adres-keuze { min-height: 40px; min-width: 56px; padding: 0 14px; border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-pil); background: var(--ks-kaart); color: var(--ks-inkt); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ks-adres-keuze:hover { border-color: var(--ks-inkt); }
.ks-adres-keuze:focus-visible { outline: 2px solid var(--ks-focus); outline-offset: 2px; }
/* Reclamaties: historie van een melding (kern/reclamatie.php,
   ks_rcl_tijdlijn), voor vakman, klant en beheer. */
.ks-rcl-tijdlijn { margin-top: 4px; }
.ks-rcl-stap-kop { margin: 0; line-height: 1.4; }
.ks-rcl-stap-tekst { margin: 4px 0 0; white-space: normal; overflow-wrap: anywhere; }
.ks-rcl-stap-intern .ks-rcl-stap-tekst { padding: 8px 12px; border-left: 3px solid var(--ks-rand); }
.ks-rcl-bestanden { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ks-rcl-bestanden a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.ks-rcl-bestanden .ks-icoon { width: 18px; height: 18px; flex: none; }

/* Passkeys (kern/passkey.php, assets/js/passkey.js): inloggen met Face ID of
   vingerafdruk. Gedeeld door de inlogpagina's en Profiel / Mijn gegevens. */
.ks-pk-inlog { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; }
.ks-pk-inlog[hidden] { display: none; }
.ks-pk-knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.ks-pk-knop svg { width: 20px; height: 20px; flex: none; }
.ks-pk-knop[hidden] { display: none; }
.ks-pk-inlog .ks-pk-knop { width: 100%; }
.ks-pk-noot { margin: 0; color: var(--ks-zacht); font-size: 15px; }
.ks-pk-noot:empty { display: none; }
.ks-pk-of { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; color: var(--ks-zacht); font-size: 14px; }
.ks-pk-of::before, .ks-pk-of::after { content: ""; flex: 1; height: 1px; background: var(--ks-lijn); }
.ks-pk-beheer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ks-pk-kop { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: normal; }
.ks-pk-uitleg { margin: 0; color: var(--ks-zacht); font-size: 15px; }
.ks-pk-lijst { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--ks-lijn); }
.ks-pk-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-pk-naam { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
.ks-pk-naam svg { width: 18px; height: 18px; flex: none; color: var(--ks-zacht); }
.ks-pk-wanneer { grid-column: 1; color: var(--ks-zacht); font-size: 14px; }
.ks-pk-rij form { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

/* Spoedklus (kern/klusfilter.php): label met klokje, in de waarschuwingskleur. */
.ks-spoed-pil { color: var(--ks-oranje); font-weight: 600; }
.ks-spoed-noot { color: var(--ks-oranje); }

/* Melden (DSA): link onder de chat en bedrijfsgegevens in de voet van het portaal */
.ks-chat-melden { margin: 0; font-size: .85rem; }
.ks-chat-melden a { display: inline-flex; align-items: center; gap: 6px; color: var(--ks-stil); }
.ks-chat-melden a:hover { color: var(--ks-inkt); }
.ks-chat-melden .ks-icoon { width: 15px; height: 15px; }
.ks-voet-bedrijf { display: block; flex-basis: 100%; font-size: .85rem; }

/* Momentenkiezer (ks_momenten_kiezer in kern/momenten.php): aanvangstijd als
   knoppen, een tijdvak van een uur en een raster met dagen om aan te klikken.
   Gebruikt bij klus plaatsen en op de klantpagina. Prefix ks-mk-. */
.ks-mk { display: grid; gap: 18px; min-width: 0; }
.ks-mk-deel { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.ks-mk-kop { padding: 0; margin: 0 0 2px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ks-zacht); }
.ks-mk-tijden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .ks-mk-tijden { max-width: 560px; } }
.ks-mk-tijd { position: relative; display: flex; touch-action: manipulation; cursor: pointer; }
.ks-mk .ks-mk-tijd input[type="radio"], .ks-mk .ks-mk-dag input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.ks-mk-tijd span { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--ks-lijn-sterk); border-radius: 999px; background: var(--ks-paneel); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ks-inkt); transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease-out; }
.ks-mk-tijd:hover span { border-color: var(--ks-inkt); }
.ks-mk-tijd:active span { transform: scale(.96); }
.ks-mk-tijd:has(input:checked) span { background: var(--ks-inkt); border-color: var(--ks-inkt); color: var(--ks-achter); }
.ks-mk-tijd:has(input:focus-visible) span { outline: 2px solid var(--ks-merk); outline-offset: 2px; }
.ks-mk .ks-mk-eigen-keuze { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.ks-mk .ks-mk-eigen-tijd { flex: 1; min-width: 0; min-height: 44px; width: 100%; margin: 0; padding: 0 4px; text-align: center; font-weight: 600; -webkit-appearance: none; appearance: none; border: 1px solid var(--ks-lijn-sterk); border-radius: 999px; background: var(--ks-paneel); color: var(--ks-inkt); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; }
.ks-mk .ks-mk-eigen-tijd:hover { border-color: var(--ks-inkt); }
.ks-mk .ks-mk-eigen-tijd::-webkit-calendar-picker-indicator { display: none; }
.ks-mk-eigen:has(.ks-mk-eigen-keuze:checked) .ks-mk-eigen-tijd { background: var(--ks-inkt); border-color: var(--ks-inkt); color: var(--ks-achter); color-scheme: dark; }
.ks-mk .ks-mk-eigen-tijd:focus-visible { outline: 2px solid var(--ks-merk); outline-offset: 2px; }
.ks-mk-vak { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0 0; cursor: pointer; font-size: 15px; line-height: 1.4; }
.ks-mk .ks-mk-vak input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; padding: 0; -webkit-appearance: auto; appearance: auto; accent-color: var(--ks-inkt); cursor: pointer; }
.ks-mk-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ks-mk-dag { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 64px; padding: 6px 2px; border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond); background: var(--ks-paneel); color: var(--ks-inkt); cursor: pointer; touch-action: manipulation; user-select: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease-out; }
.ks-mk-dag:hover { border-color: var(--ks-inkt); }
.ks-mk-dag:active { transform: scale(.95); }
.ks-mk-dag-naam, .ks-mk-dag-maand { font-size: 12px; color: var(--ks-zacht); line-height: 1.2; }
.ks-mk-dag-nr { font-size: 18px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ks-mk-dag-vandaag .ks-mk-dag-nr { color: var(--ks-merk); }
.ks-mk-dag:has(input:checked) { background: var(--ks-inkt); border-color: var(--ks-inkt); color: var(--ks-achter); }
.ks-mk-dag:has(input:checked) .ks-mk-dag-naam, .ks-mk-dag:has(input:checked) .ks-mk-dag-maand, .ks-mk-dag:has(input:checked) .ks-mk-dag-nr { color: var(--ks-achter); }
.ks-mk-dag:has(input:focus-visible) { outline: 2px solid var(--ks-merk); outline-offset: 2px; }
.ks-mk-dag-uit { border-style: dashed; border-color: var(--ks-lijn); background: transparent; cursor: default; }
.ks-mk-dag-uit:hover { border-color: var(--ks-lijn); }
.ks-mk-dag-uit:active { transform: none; }
.ks-mk-dag-uit .ks-mk-dag-nr, .ks-mk-dag-uit .ks-mk-dag-naam, .ks-mk-dag-uit .ks-mk-dag-maand { color: var(--ks-zacht); font-weight: 400; }
.ks-mk .ks-mk-dag-uit input { cursor: default; }
.ks-mk-voet { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 32px; }
.ks-mk-som { margin: 0; font-size: 15px; color: var(--ks-zacht); }
.ks-mk-wis { flex: none; padding: 6px 2px; border: 0; background: none; color: var(--ks-inkt); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ks-mk-fout { margin: 0; }
@media (max-width: 420px) {
  .ks-mk-dagen { gap: 4px; }
  .ks-mk-dag { min-height: 56px; }
  .ks-mk-dag-nr { font-size: 16px; }
  .ks-mk-dag-naam, .ks-mk-dag-maand { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-mk-tijd span, .ks-mk-dag { transition: none; }
  .ks-mk-tijd:active span, .ks-mk-dag:active { transform: none; }
}