/* ===========================================================
   SER-inlogscherm (ser-login.jsx) — gedeeld door Analytics, Tools en de nieuwe app
   ===========================================================
   Byte-gelijk in ser-analytics-platform (frontend/) en ser-automation-platform
   (wortel); bewaakt door ser-login.test.mjs.

   Ontwerp: redesign v5 (doen-systeem/systeem.html, scherm Login en 2FA) met de
   tokens uit app/tokens.css (branch app-designsysteem). De tokens staan hier
   als custom properties op .serlogin, NIET op :root: huisstijl.css en de rest van
   de apps (ook SERP) blijven precies zoals ze zijn. Elke selector begint met
   .serlogin.

   Toegankelijkheid: kleine tekst ≥ 4,5:1, randen ≥ 3:1, elk bedieningselement
   ≥ 44×44 (--tik-min), zichtbare focusring (wit + teal-700), geen beweging bij
   prefers-reduced-motion. Breekpunten 390 / 768 / 1280.
   =========================================================== */

.serlogin {
  /* Merk en neutralen (app/tokens.css) */
  --ser-teal: #00b4a0;
  --ser-teal-700: #019289;
  --ser-teal-50: #e6f7f5;
  --ser-navy: #1e1e5a;
  --ser-navy-700: #16164a;
  --ser-navy-900: #0e0e3a;
  --ser-navy-950: #0a0a2e;
  --ser-gold: #f5a523;
  --ser-paars-licht: #c4b5fd;
  --ink-900: #0e0e2a;
  --ink-800: #1a1a38;
  --ink-700: #2a2a4a;
  --ink-600: #44476a;
  --ink-500: #5a5e7a;
  --ink-400: #7e8298;
  --ink-150: #e1e3ed;
  --ink-100: #ebedf3;
  --ink-50: #f4f5f9;
  --paper: #ffffff;
  /* Semantisch */
  --ok-tekst: #00756a;
  --warn-tekst: #8a5c00;
  --bad-tekst: #b4232a;
  --info-tekst: #1e4fb8;
  --ok-bg: var(--ser-teal-50);
  --warn-bg: #fff5e0;
  --bad-bg: #fdecea;
  --info-bg: #eaf1fe;
  --tekst-op-donker: var(--paper);
  --tekst-op-donker-zacht: rgba(255, 255, 255, 0.80);
  --vlak-op-donker: rgba(255, 255, 255, 0.08);
  --rand-op-donker: rgba(255, 255, 255, 0.22);
  --rail-bg-verloop: linear-gradient(180deg, var(--ser-navy-950) 0%, var(--ser-navy) 100%);
  --backdrop: rgba(14, 14, 42, 0.55);
  /* Typografie, maten */
  --font-sans: 'Rubik', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-lg: 0 12px 32px rgba(14, 14, 42, 0.10), 0 4px 8px rgba(14, 14, 42, 0.04);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--ser-teal-700);
  --focus-ring-op-donker: 0 0 0 2px var(--ser-navy), 0 0 0 4px var(--ser-teal);
  --tik-min: 44px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --fs-xs: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-2xl: 26px;
  --fs-kpi: 28px;
  --fw-halfvet: 600;
  --fw-vet: 700;
  /* Beweging (niet in app/tokens.css; hier lokaal) */
  --ease-uit: cubic-bezier(.2, .8, .2, 1);
  --duur-snel: 160ms;
  --ease-apple: cubic-bezier(.22, 1, .36, 1);
  /* Verhaal */
  --knoop: 40px;
  --lijn: rgba(0, 180, 160, 0.55);

  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 16px 56px;
  background: var(--ser-navy-900);
  background-image: var(--rail-bg-verloop);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}
.serlogin *, .serlogin *::before, .serlogin *::after { box-sizing: border-box; }

/* ── Kaart (het inloggen zelf: altijd eerst en het duidelijkst) ─────────── */
.serlogin .sl-kaart {
  order: 1;
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* ── Logo: los boven de kaart, wit op het navy vlak (niet in de kaart) ───── */
.serlogin .sl-kop {
  order: 0;
  width: 100%;
  max-width: 440px;
  color: var(--paper);
}
.serlogin .sl-logo-svg { display: block; width: 232px; height: auto; }
.serlogin h1 { font-size: 24px; line-height: 32px; letter-spacing: -0.01em; font-weight: 700; margin: 0; color: var(--ink-900); }
.serlogin .sl-lead { margin: var(--sp-2) 0 0; font-size: var(--fs-base); line-height: 20px; color: var(--ink-600); }
.serlogin .sl-lead + .sl-lead { margin-top: var(--sp-2); }
.serlogin .sl-stack { display: flex; flex-direction: column; gap: 12px; }
.serlogin form.sl-stack { gap: 14px; }

/* Knoppen */
.serlogin .sl-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tik-min);
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-500);
  background: var(--paper);
  color: var(--ink-800);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.serlogin .sl-knop:hover { background: var(--ink-50); color: var(--ink-900); }
.serlogin .sl-knop.prim { background: var(--ser-navy); border-color: var(--ser-navy); color: var(--paper); min-height: 48px; }
.serlogin .sl-knop.prim:hover { background: var(--ser-navy-700); }
.serlogin .sl-knop.google { min-height: 48px; width: 100%; font-size: 15px; color: var(--ink-900); }
.serlogin .sl-knop.zacht { border-color: transparent; background: transparent; color: var(--ser-navy); padding: 0 10px; margin-inline: -10px; justify-content: flex-start; }
.serlogin .sl-knop.zacht:hover { background: var(--ink-50); }
.serlogin .sl-knop.test { border-style: dashed; border-color: var(--warn-tekst); }
.serlogin .sl-knop[disabled], .serlogin .sl-knop[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.serlogin .sl-knop svg { flex: 0 0 auto; }
.serlogin .sl-knop:focus-visible,
.serlogin .sl-inv:focus-visible,
.serlogin a:focus-visible,
.serlogin .sl-persoon:focus-visible,
.serlogin .sl-sluit:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.serlogin .sl-scheiding { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-600); }
.serlogin .sl-scheiding::before, .serlogin .sl-scheiding::after { content: ""; flex: 1; border-top: 1px solid var(--ink-150); }
.serlogin .sl-alt { display: flex; flex-direction: column; gap: 2px; }
.serlogin .sl-klein { margin: 0; font-size: var(--fs-md); line-height: 20px; color: var(--ink-600); }
.serlogin .sl-klein a { color: var(--ser-navy); font-weight: 600; }

/* Velden */
.serlogin .sl-veld { display: flex; flex-direction: column; gap: 6px; }
.serlogin .sl-veld label { font-size: 13px; font-weight: 700; color: var(--ink-800); }
.serlogin .sl-veld .sl-hulp { font-size: 13px; color: var(--ink-600); line-height: 1.45; }
.serlogin .sl-inv {
  min-height: var(--tik-min);
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--ink-400);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-900);
  font: inherit;
  font-size: 15px;
}
.serlogin .sl-inv::placeholder { color: var(--ink-500); }
.serlogin .sl-inv[aria-invalid="true"] { border-color: var(--bad-tekst); }
.serlogin .sl-inv.code { font-size: 22px; letter-spacing: .2em; text-align: center; min-height: 52px; }
.serlogin .sl-wachtwoord { position: relative; }
.serlogin .sl-wachtwoord .sl-inv { padding-right: 52px; }
.serlogin .sl-wachtwoord .sl-oog {
  position: absolute; right: 0; top: 0; width: var(--tik-min); height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink-600); cursor: pointer; border-radius: var(--r-md);
}
.serlogin .sl-wachtwoord .sl-oog:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Meldingen: icoon + tekst, nooit alleen kleur */
.serlogin .sl-melding { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; line-height: 1.5; color: var(--ink-900); }
.serlogin .sl-melding svg { flex: 0 0 auto; margin-top: 2px; }
.serlogin .sl-melding.bad { background: var(--bad-bg); }
.serlogin .sl-melding.bad svg { color: var(--bad-tekst); }
.serlogin .sl-melding.ok { background: var(--ok-bg); }
.serlogin .sl-melding.ok svg { color: var(--ok-tekst); }
.serlogin .sl-melding.info { background: var(--info-bg); }
.serlogin .sl-melding.info svg { color: var(--info-tekst); }
.serlogin .sl-melding.warn { background: var(--warn-bg); }
.serlogin .sl-melding.warn svg { color: var(--warn-tekst); }

.serlogin .sl-testlabel {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn-tekst);
  font-size: 12px; font-weight: 700;
}

/* ── Het verhaal: bronnen → één bron → onze berekening → samen betere keuzes ──
   Geen genummerde stappen (besluit Marten 21-10) maar een stroom. Smal (< 768): verticaal
   en gecentreerd, de bronnen als chips met een trechter naar de eerste knoop. Vanaf 768:
   horizontaal, bronnen in een kolom, lijnen lopen samen in "één bron", daarna een lijn
   naar "onze berekening" en "samen betere keuzes". Ritme op 4 px, ruimtes uit --sp-*. */
.serlogin .sl-verhaal {
  order: 2;
  width: 100%;
  max-width: 440px;
  color: var(--tekst-op-donker);
}
.serlogin .sl-verhaal h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: var(--fw-vet); letter-spacing: -0.01em; color: var(--tekst-op-donker); }
/* Kop in twee delen; breekt bij voorkeur tussen "…berekening." en "Samen…" */
.serlogin .sl-verhaal h2 span { display: inline-block; }
.serlogin .sl-verhaal .sl-intro { margin: var(--sp-3) 0 0; font-size: 15px; line-height: 24px; color: var(--tekst-op-donker-zacht); text-wrap: pretty; }

.serlogin .sl-stroom { margin: var(--sp-8) 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.serlogin .sl-stroom .sl-label { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); line-height: 16px; font-weight: var(--fw-vet); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-op-donker-zacht); }
.serlogin .sl-bronnen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.serlogin .sl-bron {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--sp-3) 0 10px;
  border-radius: var(--r-pill); background: var(--vlak-op-donker); border: 1px solid var(--rand-op-donker);
  font-size: var(--fs-xs); line-height: 16px; font-weight: var(--fw-halfvet); color: var(--tekst-op-donker); white-space: nowrap;
}
.serlogin .sl-bron::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ser-teal); flex: 0 0 auto; }

/* Lijnen (decoratief). .sl-pad = de lijn, .sl-deeltje = een licht dat er één keer overheen
   loopt bij binnenkomst; in rust onzichtbaar. */
.serlogin .sl-samenloop, .serlogin .sl-trechter { display: block; overflow: visible; }
.serlogin .sl-samenloop { display: none; }
.serlogin .sl-trechter { width: 100%; height: 40px; margin: var(--sp-2) 0 0; }
.serlogin .sl-pad { fill: none; stroke: var(--lijn); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.serlogin .sl-deeltje { fill: none; stroke: var(--ser-teal); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 6 100; stroke-dashoffset: 6; opacity: 0; }

.serlogin .sl-fasen { display: flex; flex-direction: column; align-items: center; width: 100%; }
.serlogin .sl-fase { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: var(--sp-8); }
.serlogin .sl-fase:first-child { padding-top: 0; }
/* verticale lijn van de vorige knoop naar deze */
.serlogin .sl-fase:not(:first-child)::before {
  content: ""; position: absolute; top: var(--sp-2); left: calc(50% - 1px); width: 2px; height: calc(var(--sp-8) - var(--sp-2));
  background: var(--lijn); transform-origin: top;
}
.serlogin .sl-knoop {
  position: relative; z-index: 1;
  width: var(--knoop); height: var(--knoop); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ser-navy-900) linear-gradient(var(--vlak-op-donker), var(--vlak-op-donker));
  border: 1.5px solid var(--ser-teal); color: var(--ser-teal);
}
.serlogin .sl-knoop svg { display: block; }
.serlogin .sl-fase-bron .sl-knoop, .serlogin .sl-fase-keuze .sl-knoop { background: var(--ser-teal); color: var(--ser-navy); }
/* "Onze berekening": één rustige puls bij binnenkomst (ring); in rust onzichtbaar */
.serlogin .sl-fase-reken .sl-knoop::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--ser-teal); opacity: 0;
}
.serlogin .sl-fase h3 { margin: var(--sp-2) 0 0; font-size: var(--fs-base); line-height: 20px; font-weight: var(--fw-vet); color: var(--tekst-op-donker); }
.serlogin .sl-fase p { margin: var(--sp-1) 0 0; max-width: 240px; font-size: var(--fs-md); line-height: 20px; color: var(--tekst-op-donker-zacht); text-wrap: balance; }
.serlogin .sl-voet { order: 3; margin: 0; font-size: var(--fs-xs); line-height: 16px; color: var(--tekst-op-donker-zacht); }

/* ── Beweging ───────────────────────────────────────────────────────────
   Alleen bij prefers-reduced-motion: no-preference; bij reduce staat direct de eindstand
   (geen animatie, geen overgang). Eén keer per paginalading: de klasse sl-binnenkomst staat
   alleen op de eerste mount (introGespeeld in ser-login.jsx). Geen lussen.
   Tijdlijn (± 2,5 s, easing --ease-apple): kaart 0–500 ms (direct bruikbaar) · logo 0–900 ·
   kop 150 · bronnen 450–800, 70 ms na elkaar · lijnen lopen samen 800–1500 met één licht
   erover · "één bron" 1350 · lijn + "onze berekening" 1650 met één puls · lijn + "samen
   betere keuzes" 2050–2550. Puur CSS (SVG-paden met pathLength), geen bibliotheek. */
@media (prefers-reduced-motion: no-preference) {
  .serlogin .sl-knop, .serlogin .sl-persoon, .serlogin .sl-sluit, .serlogin .sl-oog, .serlogin .sl-inv {
    transition: background-color var(--duur-snel) var(--ease-uit), border-color var(--duur-snel) var(--ease-uit),
      color var(--duur-snel) var(--ease-uit), box-shadow var(--duur-snel) var(--ease-uit), transform var(--duur-snel) var(--ease-uit);
  }
  .serlogin .sl-knop:active:not([disabled]) { transform: scale(0.98); }

  .serlogin.sl-binnenkomst .sl-kaart { animation: sl-op 500ms var(--ease-apple) both; }
  .serlogin.sl-binnenkomst .sl-logo-svg { animation: sl-logo 900ms var(--ease-apple) both; transform-origin: left center; }
  .serlogin.sl-binnenkomst .sl-logo-pijl { animation: sl-teken 900ms var(--ease-apple) both; }
  .serlogin.sl-binnenkomst .sl-verhaal h2 { animation: sl-op 800ms var(--ease-apple) 150ms both; }
  .serlogin.sl-binnenkomst .sl-intro { animation: sl-op 800ms var(--ease-apple) 250ms both; }
  .serlogin.sl-binnenkomst .sl-stroom .sl-label { animation: sl-in 600ms var(--ease-apple) 400ms both; }
  .serlogin.sl-binnenkomst .sl-bron { animation: sl-op 600ms var(--ease-apple) both; }
  .serlogin.sl-binnenkomst .sl-bron:nth-child(1) { animation-delay: 450ms; }
  .serlogin.sl-binnenkomst .sl-bron:nth-child(2) { animation-delay: 520ms; }
  .serlogin.sl-binnenkomst .sl-bron:nth-child(3) { animation-delay: 590ms; }
  .serlogin.sl-binnenkomst .sl-bron:nth-child(4) { animation-delay: 660ms; }
  .serlogin.sl-binnenkomst .sl-bron:nth-child(5) { animation-delay: 730ms; }
  .serlogin.sl-binnenkomst .sl-bron:nth-child(6) { animation-delay: 800ms; }
  .serlogin.sl-binnenkomst .sl-pad { stroke-dasharray: 100; animation: sl-trek 700ms var(--ease-apple) 800ms both; }
  .serlogin.sl-binnenkomst .sl-deeltje { animation: sl-deeltje 900ms var(--ease-apple) 950ms both; }
  .serlogin.sl-binnenkomst g:nth-child(2) > .sl-deeltje { animation-delay: 1000ms; }
  .serlogin.sl-binnenkomst g:nth-child(3) > .sl-deeltje { animation-delay: 1050ms; }
  .serlogin.sl-binnenkomst g:nth-child(4) > .sl-deeltje { animation-delay: 1100ms; }
  .serlogin.sl-binnenkomst g:nth-child(5) > .sl-deeltje { animation-delay: 1150ms; }
  .serlogin.sl-binnenkomst g:nth-child(6) > .sl-deeltje { animation-delay: 1200ms; }
  .serlogin.sl-binnenkomst .sl-fase > * { animation: sl-op 600ms var(--ease-apple) both; }
  .serlogin.sl-binnenkomst .sl-fase > .sl-knoop { animation-name: sl-knoop; }
  .serlogin.sl-binnenkomst .sl-fase-bron > * { animation-delay: 1350ms; }
  .serlogin.sl-binnenkomst .sl-fase-reken > * { animation-delay: 1750ms; }
  .serlogin.sl-binnenkomst .sl-fase-keuze > * { animation-delay: 2050ms; }
  .serlogin.sl-binnenkomst .sl-fase-bron::before { animation: var(--lijn-groei) 450ms var(--ease-apple) 1350ms both; }
  .serlogin.sl-binnenkomst .sl-fase-reken::before { animation: var(--lijn-groei) 450ms var(--ease-apple) 1600ms both; }
  .serlogin.sl-binnenkomst .sl-fase-keuze::before { animation: var(--lijn-groei) 450ms var(--ease-apple) 1900ms both; }
  .serlogin.sl-binnenkomst .sl-fase-reken .sl-knoop::after { animation: sl-puls 700ms var(--ease-apple) 1850ms both; }
  .serlogin.sl-binnenkomst .sl-voet { animation: sl-in 600ms var(--ease-apple) 900ms both; }
}
@keyframes sl-logo { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sl-teken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sl-op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sl-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sl-knoop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes sl-trek { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes sl-deeltje { 0% { stroke-dashoffset: 6; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes sl-puls { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sl-lijn-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sl-lijn-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .serlogin *, .serlogin *::before, .serlogin *::after { animation: none !important; transition: none !important; }
}

/* ── Stroom vanaf 768: horizontaal ──────────────────────────────────────
   Kolom bronnen (6 × 28 px, steek 36 → 208 hoog) · samenloop (56 px) · drie fasen in
   gelijke kolommen. De knopen staan op het midden (y 104); horizontale lijnen lopen van
   het eind van de samenloop door tot "samen betere keuzes". */
@media (min-width: 768px) {
  .serlogin .sl-stroom {
    display: grid; grid-template-columns: max-content 56px 1fr; grid-template-rows: auto auto;
    grid-template-areas: "label . ." "bronnen samenloop fasen"; align-items: start; text-align: left;
    --lijn-groei: sl-lijn-x;
  }
  .serlogin .sl-stroom .sl-label { grid-area: label; }
  .serlogin .sl-bronnen { grid-area: bronnen; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .serlogin .sl-samenloop { grid-area: samenloop; display: block; }
  .serlogin .sl-trechter { display: none; }
  .serlogin .sl-fasen { grid-area: fasen; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
  .serlogin .sl-fase { padding: calc(104px - var(--knoop) / 2) var(--sp-1) 0; text-align: center; min-width: 0; }
  .serlogin .sl-fase:first-child { padding-top: calc(104px - var(--knoop) / 2); }
  .serlogin .sl-fase::before,
  .serlogin .sl-fase:not(:first-child)::before {
    content: ""; position: absolute; top: calc(104px - 1px); height: 2px; width: auto;
    left: calc(-50% + var(--knoop) / 2); right: calc(50% + var(--knoop) / 2);
    background: var(--lijn); transform-origin: left;
  }
  .serlogin .sl-fase:first-child::before { left: 0; }
}
@media (max-width: 767.98px) { .serlogin .sl-stroom { --lijn-groei: sl-lijn-y; } }

/* ── Nep-Google-accountkiezer (alleen testomgeving) ─────────────────────── */
.serlogin .sl-achter {
  position: fixed; inset: 0; z-index: 1000; background: var(--backdrop);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto;
}
.serlogin .sl-kiezer {
  width: 100%; max-width: 460px; margin: auto 0; background: var(--paper); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.serlogin .sl-kiezer-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.serlogin .sl-kiezer h2 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--ink-900); }
.serlogin .sl-sluit {
  min-width: var(--tik-min); min-height: var(--tik-min); border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--ink-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.serlogin .sl-sluit:hover { background: var(--ink-50); }
.serlogin .sl-groep { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-600); letter-spacing: .02em; }
.serlogin .sl-personen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.serlogin .sl-persoon {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--ink-150); border-radius: var(--r-md); background: var(--paper);
  font: inherit; text-align: left; cursor: pointer; color: var(--ink-900);
}
.serlogin .sl-persoon:hover { background: var(--ink-50); border-color: var(--ink-400); }
.serlogin .sl-persoon[disabled] { opacity: .6; cursor: wait; }
.serlogin .sl-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ser-navy); color: var(--paper); font-weight: 700; font-size: 14px;
}
.serlogin .sl-persoon.klant .sl-avatar { background: var(--ok-tekst); }
.serlogin .sl-persoon .sl-naam { display: block; font-weight: 600; font-size: 14px; }
.serlogin .sl-persoon .sl-mail, .serlogin .sl-persoon .sl-rol { display: block; font-size: 13px; color: var(--ink-600); overflow-wrap: anywhere; }

/* ── 768: kaart iets ruimer ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .serlogin { padding: 48px 24px 64px; }
  .serlogin .sl-kaart { padding: 36px 32px; max-width: 560px; }
  .serlogin .sl-verhaal { max-width: 560px; }
  .serlogin .sl-kop { max-width: 560px; }
  .serlogin .sl-logo-svg { width: 260px; }
  .serlogin .sl-verhaal h2 { font-size: var(--fs-2xl); line-height: 32px; }
}

/* ── Breed (≥ 1100): één gecentreerde compositie ──────────────────────────
   Eén raster van max. 640 + gat + 440 (± 1180 px), midden op het scherm, ook op 1680 en
   2000: logo linksboven op de linkerrand van het verhaal, daaronder verhaal links en kaart
   rechts (samen verticaal gecentreerd), voet gecentreerd onder het geheel. */
@media (min-width: 1100px) {
  .serlogin {
    display: grid;
    grid-template-columns: minmax(0, 640px) 440px;
    grid-template-areas: "kop ." "verhaal kaart" "voet voet";
    justify-content: center; align-content: center; align-items: center;
    column-gap: clamp(48px, 6vw, 96px); row-gap: 0;
    padding: 48px 48px 64px;
  }
  .serlogin .sl-kop { grid-area: kop; max-width: none; margin: 0 0 var(--sp-8); }
  .serlogin .sl-verhaal { grid-area: verhaal; max-width: none; }
  .serlogin .sl-kaart { grid-area: kaart; max-width: 440px; }
  .serlogin .sl-voet { grid-area: voet; text-align: center; margin-top: 56px; }
  .serlogin .sl-logo-svg { width: 300px; }
  .serlogin .sl-verhaal h2 { font-size: var(--fs-kpi); line-height: 36px; }
}