/* WerfHero – beheer (app.werfhero.be)
   Zelfde huisstijl als de app en de site: inktzwart en geel #FFC20E met mate, Archivo voor titels en grote getallen,
   kort geel streepje voor koppen in hoofdletters, zwarte pictogramvakken met een geel teken.
   Twee thema's op <html data-thema>: "licht" (zoals de app) en "donker" (de kleuren van het donkere thema van de app);
   de gebruiker kiest in de balk (Licht / Donker), zonder keuze is de cockpit donker en zijn de klantpagina's licht.
   <html data-cockpit> staat op Platform van de eigenaar (gevarenstreep bovenaan, hero, kroon), in beide thema's.
   Elk onderdeel leest enkel de tokens hieronder. Rood enkel voor gevaar. NOOIT blauw of navy. */

:root {
  color-scheme: light;
  /* Kleuren met een betekenis (klant) */
  --achtergrond: #FAFAF8;
  --oppervlak: #FFFFFF;
  --oppervlak-2: #F2F1EE;
  --oppervlak-hover: #F7F6F3;
  --rand: #E4E2DC;
  --rand-zacht: #F0EEE9;
  --tekst: #141414;
  --tekst-2: #5E5E5E;
  --accent: #FFC20E;
  --accent-hover: #FFD24D;
  --op-accent: #141414;
  --goud: #E5AC00;
  --inkt-blok: #141414;
  --op-inkt: #FFFFFF;
  --op-inkt-2: #A8A8A8;
  --inkt-verhoogd: #2A2A2A;
  --merkdoos: #141414;
  --knop-inkt: #141414;
  --knop-inkt-hover: #2E2E2E;
  --gevaar-tekst: #C81F37;
  --gevaar-vlak: #D7263D;
  --ok-tekst: #0F7A56;
  --let-tekst: #B54708;
  --veld-bg: #FFFFFF;
  --focus: #141414;
  --meter-vul: #141414;
  --grafiek-staaf: #141414;
  --grafiek-nul: #D9D6CE;
  /* MRR-lijn en de rand van haar punten: inkt op licht (geel haalt op wit geen contrast), geel op donker. */
  --grafiek-lijn: #141414;
  /* Geel als vlak in een grafiek of als bedrag: op licht een inktrand of inkt (geel haalt op wit geen 3:1), op donker puur geel. */
  --accent-tekst: #141414;
  --accent-omlijning: #141414;
  --spark-punt-rand: #141414;
  --zij-bg: #141414;
  --zij-hover: #222222;
  --balk-bg: #FFFFFF;
  --schaduw-hover: 0 8px 24px rgba(20, 20, 20, .08);
  --schaduw-dialoog: 0 24px 64px rgba(0, 0, 0, .22);
  /* Onderlijn van gewone links (namen, e-mailadressen): grijs; geel enkel bij hover of focus. */
  --onderlijn: rgba(94, 94, 94, .4);
  /* Gekozen segment (zoals SegmentedControl in de app): verhoogd vlak op een grijze baan, geen geel. */
  --seg-baan: #EDEBE6;
  --seg-actief: #FFFFFF;
  --seg-schaduw: 0 1px 3px rgba(20, 20, 20, .14);

  /* Ruimte, hoeken, letters en beweging */
  --r1: 4px; --r2: 8px; --r3: 12px; --r4: 16px; --r5: 24px; --r6: 32px; --r7: 48px;
  --hoek-xs: 8px; --hoek-sm: 12px; --hoek-md: 16px; --hoek-lg: 20px; --hoek-pil: 999px;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t1: 120ms; --t2: 200ms; --t3: 320ms;
  --strepen: repeating-linear-gradient(-45deg, #FFC20E 0 8px, #141414 8px 16px);
  --zij: 248px;
  /* Inhoud vult de breedte naast het menu; pas op een heel breed scherm (> 1800 px inhoud) een rand links en rechts. */
  --inhoud-max: 1800px;
  --balk-h: 71px;
  --boven: 0px;
}

/* Donker thema: inkt met geel en goud (waarden uit het donkere thema van de app). Standaard in de cockpit van de eigenaar.
   In het lichte thema houden de inktblokken van de cockpit (hero, kop van een bedrijf) binnenin deze kleuren. */
[data-thema="donker"], [data-thema="licht"] .op-inkt {
  color-scheme: dark;
  --achtergrond: #0A0A0A;
  --oppervlak: #161616;
  --oppervlak-2: #1E1E1E;
  --oppervlak-hover: #1C1C1C;
  --rand: #262626;
  --rand-zacht: #1F1F1F;
  --tekst: #F5F5F5;
  --tekst-2: #A8A8A8;
  --inkt-blok: #1A1A1A;
  --inkt-verhoogd: #333333;
  --merkdoos: #2A2A2A;
  --knop-inkt: #333333;
  --knop-inkt-hover: #404040;
  --gevaar-tekst: #F25C6E;
  --ok-tekst: #32D583;
  --let-tekst: #FF8A3D;
  --veld-bg: #111111;
  --focus: #FFC20E;
  --meter-vul: #FFC20E;
  --grafiek-staaf: #3A3A3A;
  --grafiek-nul: #2A2A2A;
  --grafiek-lijn: #FFC20E;
  --accent-tekst: #FFC20E;
  --accent-omlijning: transparent;
  --spark-punt-rand: #161616;
  --zij-bg: #0F0F0F;
  --zij-hover: #1C1C1C;
  --balk-bg: #111111;
  --schaduw-hover: 0 8px 28px rgba(0, 0, 0, .5);
  --schaduw-dialoog: 0 24px 64px rgba(0, 0, 0, .7);
  --onderlijn: rgba(168, 168, 168, .38);
  --seg-baan: #1E1E1E;
  --seg-actief: #3A3A3A;
  --seg-schaduw: 0 1px 2px rgba(0, 0, 0, .5);
}
/* Cockpit: ruimte voor de gevarenstreep van 6 px bovenaan het scherm. */
[data-cockpit] { --boven: 6px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--achtergrond); }
body {
  margin: 0; font-family: var(--font); font-weight: 500; font-size: 15px; line-height: 1.5;
  color: var(--tekst); background: var(--achtergrond); -webkit-font-smoothing: antialiased;
  accent-color: var(--accent); overflow-x: hidden;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
svg { width: 20px; height: 20px; flex: none; }
h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 900; letter-spacing: -0.01em; }
h1 { font-family: var(--display); font-stretch: 112%; }
p { margin: 0 0 .8em; text-wrap: pretty; }
a { color: inherit; text-decoration-color: var(--onderlijn); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color var(--t1) ease; }
a:hover, a:focus-visible { text-decoration-color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.zij :focus-visible, .aanmeld__merk :focus-visible, .op-inkt :focus-visible, .tegel--inkt:focus-visible { outline-color: var(--accent); }
::selection { background: var(--accent); color: var(--op-accent); }
/* !important: ook een verborgen veld in .veld (bv. een logo kiezen) blijft 1 px en duwt de pagina niet breder. */
/* Symbolen en verlopen van de pictogrammen (index.html): uit de flow, zonder style-attribuut (CSP van het beheer). */
.svg-defs { position: absolute; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--op-accent); padding: 10px 16px; font-weight: 800; border-radius: var(--hoek-xs); }
.skip:focus { top: 12px; }
.zacht { color: var(--tekst-2); }
.tekst-gevaar { color: var(--gevaar-tekst); font-weight: 700; }
.tekst-let { color: var(--let-tekst); font-weight: 700; }
.tekst-ok { color: var(--ok-tekst); font-weight: 700; }
[data-tel], .getal { font-variant-numeric: tabular-nums; }
/* Delen naast elkaar met " · ": een kort deel op één regel; een e-mailadres ook, en te lang eindigt het op "…". */
.nw { white-space: nowrap; }
.nw--mail { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
/* Kort geel streepje (14×4) voor een kop in hoofdletters, zoals in de app en op de site. */
.marker { display: inline-block; width: 14px; height: 4px; border-radius: 2px; background: var(--accent); flex: none; }

/* ---------- Knoppen en velden ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; font: inherit; font-weight: 800; font-size: 15px;
  border: 2px solid transparent; border-radius: var(--hoek-sm); cursor: pointer; white-space: nowrap;
  text-decoration: none; background: none; color: inherit;
  transition: background-color var(--t1) ease, color var(--t1) ease, border-color var(--t1) ease, transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease);
}
.knop:active:not(:disabled) { transform: scale(.98); }
.knop:disabled { opacity: .45; cursor: not-allowed; }
.knop svg { width: 18px; height: 18px; }
/* Eén gele hoofdactie per scherm. */
.knop--geel { background: var(--accent); color: var(--op-accent); }
.knop--geel:hover:not(:disabled) { background: var(--accent-hover); }
/* Bevestigen binnen een kaart (Opslaan, Toevoegen). */
.knop--inkt { background: var(--knop-inkt); color: var(--op-inkt); }
.knop--inkt:hover:not(:disabled) { background: var(--knop-inkt-hover); }
.knop--rand { border-color: var(--rand); background: var(--oppervlak); color: var(--tekst); }
.knop--rand:hover:not(:disabled) { border-color: var(--tekst); }
.knop--rood { background: var(--gevaar-vlak); color: #FFFFFF; }
.knop--rood:hover:not(:disabled) { background: #B81E33; }
.knop--klein { min-height: 38px; padding: 0 14px; font-size: 14px; }
.knop--breed { width: 100%; }
/* Pictogramknop (spook, 40×40): bekijken, nieuw bestand, wijzigen, verwijderen. Rood pas bij hover of focus. */
.knop--ikoon { width: 40px; min-height: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--hoek-sm); background: transparent; color: var(--tekst-2); flex: none; }
.knop--ikoon:hover:not(:disabled), .knop--ikoon:focus-visible { background: var(--oppervlak-2); color: var(--tekst); }
.knop--ikoon.knop--gevaar:hover:not(:disabled), .knop--ikoon.knop--gevaar:focus-visible { color: var(--gevaar-tekst); background: color-mix(in srgb, var(--gevaar-vlak) 12%, transparent); }
label.knop--ikoon { cursor: pointer; }
label.knop--ikoon:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; color: var(--tekst); }
.link { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 700; color: var(--tekst); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; }
.link--rood { color: var(--gevaar-tekst); text-decoration-color: currentColor; }
.ikoon-knop { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--hoek-sm); border: 0; background: transparent; color: inherit; cursor: pointer; }
.ikoon-knop:hover { background: rgba(127, 127, 127, .15); }

.veld { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.veld input, .veld select, .veld textarea, .invoer {
  font: inherit; font-weight: 600; font-size: 16px; color: var(--tekst);
  min-height: 48px; padding: 0 14px; border: 2px solid var(--rand); border-radius: var(--hoek-sm); background: var(--veld-bg); width: 100%;
  transition: border-color var(--t1) ease, box-shadow var(--t1) ease;
}
.veld textarea { padding: 10px 14px; min-height: 110px; resize: vertical; font-size: 15px; }
.veld input:focus, .veld select:focus, .veld textarea:focus, .invoer:focus { outline: none; border-color: var(--tekst); box-shadow: 0 0 0 3px var(--accent); }
.veld input::placeholder, .invoer::placeholder { color: var(--tekst-2); opacity: .8; }
.veld small { font-weight: 500; color: var(--tekst-2); font-size: 13px; }
.code-invoer { letter-spacing: .5em; font-size: 24px !important; font-weight: 800 !important; text-align: center; }
/* Meldingen in een formulier: op grijs met een gekleurde rand links (geen zachtrode of zachtgele vlakken). */
.fout, .ok, .let-op { display: block; padding: 10px 14px; border-radius: var(--hoek-sm); background: var(--oppervlak-2); border-left: 4px solid; font-weight: 700; font-size: 14px; }
.fout { color: var(--gevaar-tekst); border-left-color: var(--gevaar-vlak); }
.ok { color: var(--tekst); border-left-color: var(--ok-tekst); }
.let-op { color: var(--tekst); border-left-color: var(--let-tekst); font-weight: 600; }

/* Gevarenstreep: de signatuur, spaarzaam (hoogstens één per scherm). */
.strepen { height: 12px; background: var(--strepen); }
.strepen--dun { height: 6px; }
@keyframes strook-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.merk { display: inline-flex; align-items: center; gap: 10px; color: var(--op-inkt); }
.merk img { width: 32px; height: auto; }
.merk span { font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: 20px; letter-spacing: .03em; text-transform: uppercase; }
.merk--donker { color: var(--tekst); }

/* Taalkeuze */
.taal { display: inline-flex; border: 1.5px solid var(--rand); border-radius: var(--hoek-sm); background: var(--oppervlak); }
.taal button { font: inherit; font-weight: 800; font-size: 13px; letter-spacing: .04em; border: 0; background: none; color: var(--tekst-2); padding: 6px 10px; cursor: pointer; min-height: 34px; transition: color var(--t1) ease, background-color var(--t1) ease; }
.taal button[aria-pressed="true"] { background: linear-gradient(var(--accent), var(--accent)) bottom / 100% 2px no-repeat, var(--knop-inkt); color: var(--op-inkt); }
.taal button:hover:not([aria-pressed="true"]) { color: var(--tekst); }
/* Hoeken van de eerste en laatste knop volgen de groep (de groep knipt niet, zodat de focusrand volledig zichtbaar is). */
.taal button:first-child { border-radius: calc(var(--hoek-sm) - 1.5px) 0 0 calc(var(--hoek-sm) - 1.5px); }
.taal button:last-child { border-radius: 0 calc(var(--hoek-sm) - 1.5px) calc(var(--hoek-sm) - 1.5px) 0; }
/* Focus: boven de buurknop, met een smalle rand in de kleur van de groep tussen knop en focusrand (ook naast de gekozen knop). */
.taal button:focus-visible { position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--oppervlak); }
.taal button:first-child:focus-visible { border-radius: calc(var(--hoek-sm) - 1.5px) 6px 6px calc(var(--hoek-sm) - 1.5px); }
.taal button:last-child:focus-visible { border-radius: 6px calc(var(--hoek-sm) - 1.5px) calc(var(--hoek-sm) - 1.5px) 6px; }
/* Themakeuze (zon / maan): zelfde segmentstijl als de taalkeuze. */
.taal--thema button { display: inline-grid; place-items: center; padding: 6px 9px; }
.taal--thema svg { width: 16px; height: 16px; }

/* ---------- Laden ---------- */
.scherm--laden { min-height: 100vh; display: grid; place-items: center; background: #141414; }
/* Licht: het laadscherm is licht (geen donker scherm vóór een lichte pagina). Is het thema nog een gok (eerste bezoek
   zonder adres), dan blijft het donker zoals voorheen. */
[data-thema="licht"]:not([data-thema-gok]) .scherm--laden { background: var(--achtergrond); }
.scherm--laden img { animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .4; } }

/* ---------- Inloggen ---------- */
.aanmeld { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; }
.aanmeld__merk { background: var(--inkt-blok); color: var(--op-inkt); padding: 40px 44px 0; display: flex; flex-direction: column; }
.aanmeld__boven { margin: auto 0 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--op-inkt); }
.aanmeld__slogan { margin: 0 0 18px; font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: clamp(34px, 4.4vw, 58px); line-height: 1; color: var(--accent); }
.aanmeld__uitleg { color: var(--op-inkt-2); font-size: 17px; max-width: 30ch; margin-bottom: 40px; }
.aanmeld__merk .strepen { margin: 0 -44px; height: 16px; animation: strook-in 700ms var(--ease) 150ms both; }
.aanmeld__vak { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; position: relative; }
.aanmeld__taal { position: absolute; top: 20px; right: 20px; }
.aanmeld__kaart { width: 100%; max-width: 420px; background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--hoek-lg); padding: 32px; }
.aanmeld__kaart h1 { font-size: 28px; margin-bottom: 12px; }
.aanmeld__kaart .fout { margin-bottom: 14px; }
.aanmeld__extra { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 14px; }
.aanmeld__voet { margin-top: 18px; font-size: 14px; text-align: center; }
.aanmeld__voet a { font-weight: 700; color: var(--tekst); text-decoration-color: var(--accent); }

/* ---------- Melding (geen beheerder) ---------- */
.melding { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 0; }
.melding__kaart { max-width: 520px; width: 100%; background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--hoek-lg); padding: 32px; margin-bottom: auto; margin-top: auto; }
.melding__kaart h1 { font-size: 26px; margin: 22px 0 10px; }
.melding__icoon { width: 56px; height: 56px; border-radius: var(--hoek-md); background: var(--merkdoos); color: var(--accent); display: grid; place-items: center; margin-top: 22px; }
.melding__icoon svg { width: 28px; height: 28px; }
.melding__acties { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.melding__strepen { align-self: stretch; margin: 24px -16px 0; }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; padding-top: var(--boven); }
.zij { width: var(--zij); flex: none; background: var(--zij-bg); color: var(--op-inkt); display: flex; flex-direction: column;
  padding: 22px 16px 0; position: sticky; top: var(--boven); height: calc(100vh - var(--boven)); z-index: 40; overflow-y: auto; }
.zij__kop { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 26px; }
.zij__sluit { display: none; color: var(--op-inkt); }
.menu a { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--hoek-sm); color: #CFCFCF; text-decoration: none; font-weight: 600; font-size: 15px; margin-bottom: 3px;
  transition: background-color var(--t1) ease, color var(--t1) ease; }
.menu a:hover { background: var(--zij-hover); color: #FFFFFF; }
/* Actief: verhoogd vlak, wit, geel pictogram en een geel balkje links (geen geel blok). */
.menu a[aria-current="page"] { background: var(--inkt-verhoogd); color: #FFFFFF; font-weight: 800; }
.menu a[aria-current="page"] > svg { color: var(--accent); }
.menu a[aria-current="page"]::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.menu__uit { margin-left: auto; font-size: 13px; color: #8A8A8A; }
.teller { margin-left: auto; background: #FFFFFF; color: #141414; font-size: 12px; font-weight: 800; border-radius: var(--hoek-pil); padding: 1px 8px; font-variant-numeric: tabular-nums; }
.teller--gevaar { background: var(--gevaar-vlak); color: #FFFFFF; }
.menu__kop { margin: 0 0 6px; padding: 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9A9A9A; overflow-wrap: anywhere; }
.menu + .menu .menu__kop, .menu + .menu > .menu__kop { margin-top: 16px; padding-top: 16px; border-top: 1px solid #2A2A2A; }
.zij__voet { margin-top: auto; }
/* Eigenaar: de voet van het menu (bedrijf en MSE Group) blijft onderaan in beeld; bij een laag venster schuiven de
   menu-items eronder door, zodat het MSE-logo nooit afgesneden wordt. Boven de gevarenstreep onderaan (klantpagina's). */
.zij__voet:has(> .zij__mse:not([hidden])) { position: sticky; bottom: 6px; z-index: 1; background: var(--zij-bg); }
.zij:has(.zij__voet > .zij__mse:not([hidden])) .zij__strepen { position: sticky; bottom: 0; z-index: 1; }
[data-cockpit] .zij__voet:has(> .zij__mse:not([hidden])) { bottom: 0; }
.zij__bedrijf { margin-top: auto; border-top: 1px solid #2A2A2A; padding: 16px 8px; font-size: 13px; color: #9A9A9A; display: grid; gap: 2px; }
.zij__bedrijf b { color: #FFFFFF; font-size: 15px; overflow-wrap: anywhere; }
@media (min-width: 901px) { .zij__bedrijf--platform { display: none; } }
.zij__bedrijf select { font: inherit; font-weight: 700; color: #FFFFFF; background: #2A2A2A; border: 1px solid #444444; border-radius: var(--hoek-xs); padding: 6px 8px; margin-bottom: 8px; min-height: 42px; }
.zij__strepen { margin: 0 -16px; flex: none; }
/* Donker: een fijne lijn tussen het menu en de inhoud (in de cockpit goud). */
[data-thema="donker"] .zij { box-shadow: inset -1px 0 0 var(--rand); }
[data-thema="donker"][data-cockpit] .zij { box-shadow: inset -1px 0 0 rgba(255, 194, 14, .2); }
/* In de cockpit staat de gevarenstreep bovenaan het scherm, niet in de zijbalk. */
[data-cockpit] .zij__strepen { display: none; }
.zij__gebruiker { display: none; margin-top: 6px; color: #CFCFCF; overflow-wrap: anywhere; }
.zij__taal { display: none; margin-bottom: 14px; flex-wrap: wrap; gap: 8px 6px; }
/* Eigenaar: "Een product van MSE Group" en het MSE GROUP-logo, klein en gedempt onderaan het menu (logo volledig, niet
   bijgesneden). De naam staat als tekst op één regel: "GROUP" in het logo is op deze maat te klein om te lezen. */
.zij__mse { margin: 0; padding: 14px 8px 18px; border-top: 1px solid #2A2A2A; display: grid; justify-items: start; gap: 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9A9A9A; white-space: nowrap; }
.zij__mse img { width: 152px; height: auto; }
/* Taalkeuze in het donkere menu (gsm): donker, niet wit. */
.zij .taal { background: #1E1E1E; border-color: #333333; }
.zij .taal button { color: #A8A8A8; }
.zij .taal button:hover:not([aria-pressed="true"]) { color: #FFFFFF; }
.zij .taal button[aria-pressed="true"] { background-color: #333333; color: #FFFFFF; }
.zij .taal button:focus-visible { box-shadow: 0 0 0 2px var(--zij-bg); }
.zij__scherm { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 35; animation: vervaag var(--t2) ease; }
@keyframes vervaag { from { opacity: 0; } }

/* Cockpit: gevarenstreep van 6 px bovenaan het scherm; schuift één keer in. */
[data-cockpit] body::before { content: ""; position: fixed; z-index: 45; left: 0; right: 0; top: 0; height: 6px; background: var(--strepen); pointer-events: none; animation: strook-in 600ms var(--ease) both; }

.hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.balk { display: flex; align-items: center; gap: 14px; padding: 14px 32px; border-bottom: 1px solid var(--rand); background: var(--balk-bg); position: sticky; top: var(--boven); z-index: 30; }
.balk__menu { display: none; }
.balk__bedrijf { display: grid; min-width: 0; }
.balk__label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balk__bedrijf b { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balk__rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.gebruiker { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gebruiker__tekst { display: grid; line-height: 1.25; min-width: 0; }
.gebruiker__tekst b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.gebruiker__tekst small { font-size: 12px; color: var(--tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #141414; display: grid; place-items: center; font-weight: 900; font-size: 14px; flex: none; }

/* Eigenaarsbadge: zwart met een gouden rand, kroon in een goudverloop. */
.eigenaar-badge { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 9px; border-radius: var(--hoek-pil); background: #000000; border: 1px solid rgba(229, 172, 0, .6);
  color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; flex: none; line-height: 1; }
.eigenaar-badge svg { width: 16px; height: 16px; }

main#inhoud { width: 100%; max-width: calc(var(--inhoud-max) + 64px); margin: 0 auto; padding: 32px 32px 48px; display: grid; gap: 24px; align-content: start; outline: none; }
.pagina { display: grid; gap: 24px; min-width: 0; }

/* Paginakop: bovenregel met geel streepje, titel, ondertitel en rechts hoogstens één hoofdactie. */
.kop-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.kop-pagina__tekst { flex: 1 1 320px; min-width: 0; }
.bovenregel { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst); overflow-wrap: anywhere; }
.kop-pagina h1 { font-size: 34px; }
.kop-pagina__sub { color: var(--tekst-2); margin: 8px 0 0; font-size: 16px; max-width: 72ch; }
.kop-pagina__actie { display: flex; flex-wrap: wrap; gap: 12px; }

/* Waarschuwing: op grijs met een pictogram in de toonkleur en een rand links in die kleur. */
.banner { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--hoek-md); padding: 14px 16px; background: var(--oppervlak-2); border-left: 4px solid var(--tekst-2); color: var(--tekst); font-weight: 600; }
.banner > svg { margin-top: 1px; color: var(--tekst-2); }
.banner b { display: block; font-weight: 800; }
.banner p { margin: 2px 0 0; color: var(--tekst-2); }
.banner--gevaar { border-left-color: var(--gevaar-vlak); }
.banner--gevaar > svg { color: var(--gevaar-tekst); }
.banner--let { border-left-color: var(--let-tekst); }
.banner--let > svg { color: var(--let-tekst); }

/* ---------- Tegels (cijfers bovenaan een pagina) ---------- */
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tegel { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--hoek-lg); padding: 20px 22px;
  color: var(--tekst); text-decoration: none; transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) ease; }
.tegel__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); }
.tegel__kop > span:first-child { min-width: 0; text-wrap: balance; }
.tegel__getal { margin-top: 10px; font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 36px; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tegel__getal--woord { font-size: 26px; line-height: 1.15; overflow-wrap: break-word; }
.tegel__van { color: var(--tekst-2); font-size: .62em; }
.tegel__sub { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.tegel__sub svg { width: 14px; height: 14px; vertical-align: -2px; }
/* Status met tekst over twee regels: de stip bij de eerste regel. */
.tegel__sub .status { align-items: flex-start; }
.tegel__sub .status::before { margin-top: .5em; }
.tegel .meter { margin-top: 14px; }
.tegel--inkt { background: var(--inkt-blok); border-color: var(--inkt-blok); color: var(--op-inkt); }
.tegel--inkt .tegel__kop, .tegel--inkt .tegel__sub, .tegel--inkt .tegel__van { color: var(--op-inkt-2); }
.tegel--inkt .tegel__sub { color: var(--op-inkt); font-weight: 700; }
.tegel--inkt .meter { background: rgba(255, 255, 255, .14); }
.tegel--inkt .meter i { background: var(--accent); }
a.tegel:hover { box-shadow: var(--schaduw-hover); border-color: var(--tekst-2); }
a.tegel.tegel--inkt:hover { border-color: var(--inkt-blok); }
/* Donker: de inkttegel (pakket) valt op met een gouden rand, zoals de MRR-tegel van de cockpit. */
[data-thema="donker"] .tegel--inkt, [data-thema="donker"] a.tegel.tegel--inkt:hover { border-color: rgba(255, 194, 14, .3); }

.meter { height: 8px; border-radius: 4px; background: var(--oppervlak-2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--meter-vul); border-radius: 4px; transform-origin: left center; }
.meter--vol i { background: var(--gevaar-vlak); }
.meter--leeg i { background: var(--grafiek-nul); }

/* Kleine lijn of staafjes (120×32) in een tegel. */
.spark { display: block; width: 100%; max-width: 168px; height: 32px; margin-top: 12px; overflow: visible; }
.spark__lijn { fill: none; stroke: var(--tekst-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark--accent .spark__lijn { stroke: var(--grafiek-lijn); }
.spark__punt { fill: var(--accent); stroke: var(--spark-punt-rand); stroke-width: 2; }
.spark__staaf { fill: var(--grafiek-staaf); }
.spark__staaf--nu { fill: var(--accent); stroke: var(--accent-omlijning); stroke-width: 1.5; }
/* Nog te weinig metingen: zelfde hoogte als een lijn, eventueel "Gemeten sinds …". */
.spark--leeg { display: flex; align-items: flex-end; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--tekst-2); }

/* ---------- Kaarten en rijen (even hoog) ---------- */
.rij { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.rij--gelijk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rij--75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.kolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.kolom { display: grid; gap: 16px; align-content: start; min-width: 0; }
.kaart { background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--hoek-lg); padding: 24px; min-width: 0; }
/* Sectiekop: geel streepje, titel in hoofdletters, eventueel een teller en rechts "Alle … ›". */
.kaart > h2, .sectie-kop { display: flex; align-items: center; gap: 10px; min-height: 24px; margin: 0 0 16px; font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; color: var(--tekst); }
.kaart > h2::before, .sectie-kop::before { content: ""; width: 14px; height: 4px; border-radius: 2px; background: var(--accent); flex: none; }
.kaart > h2 > svg { width: 16px; height: 16px; }
.kaart > h2 .pill, .sectie-kop .pill { letter-spacing: 0; }
.kaart > h2 .meer { margin-left: auto; font-size: 13px; color: var(--tekst-2); font-weight: 700; letter-spacing: 0; text-transform: none; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  /* Groter tikvlak (gsm) zonder de kop hoger te maken. */
  padding: 12px 0 12px 12px; margin-top: -12px; margin-bottom: -12px; }
.kaart > h2 .meer:hover { color: var(--tekst); }
.kaart > h2 .meer svg { width: 14px; height: 14px; }
.kaart > p:last-child { margin-bottom: 0; }
.kaart__sub { font-size: 14px; color: var(--tekst-2); margin: -8px 0 16px; }

/* Onderdelen van het pakket: raster met een zwart rondje en een geel vinkje (geen muur van zwarte pillen). */
.modulelijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.modulelijst li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 700; }
.modulelijst__vink { width: 20px; height: 20px; border-radius: 50%; background: var(--merkdoos); color: var(--accent); display: grid; place-items: center; flex: none; }
.modulelijst__vink svg { width: 12px; height: 12px; }
.modulelijst li.uit { color: var(--tekst-2); font-weight: 600; }
.modulelijst li.uit .modulelijst__vink { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rand); }
.modulelijst li.uit .modulelijst__vink::after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: var(--tekst-2); }

/* Snelle filters (Platform → Bedrijven) en ankers in een pagina. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--hoek-pil); border: 1.5px solid var(--rand); background: var(--oppervlak);
  color: var(--tekst); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--t1) ease, border-color var(--t1) ease, color var(--t1) ease; }
.chip:hover { border-color: var(--tekst); }
.chip[aria-pressed="true"] { background: var(--tekst); border-color: var(--tekst); color: var(--achtergrond); }
.chip svg { width: 14px; height: 14px; }

.pill { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; border-radius: var(--hoek-pil); padding: 2px 10px; font-size: 12px; font-weight: 800; background: var(--oppervlak-2); color: var(--tekst); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill--inkt { background: var(--knop-inkt); color: var(--op-inkt); }
/* Enkel voor de naam van het pakket (zoals Pill in de app). */
.pill--plan { background: var(--accent); color: var(--op-accent); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }

/* Status: stip met tekst in de kleur van de toon (zoals StatusLabel in de app). */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status--ok { color: var(--ok-tekst); }
.status--let { color: var(--let-tekst); }
.status--gevaar { color: var(--gevaar-tekst); }
.status--proef { color: var(--tekst); }
.status--proef::before { background: var(--accent); }

.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rand-zacht); align-items: center; font-size: 14px; }
.lijst li:first-child { padding-top: 0; }
.lijst li:last-child { border-bottom: 0; padding-bottom: 0; }
.lijst li > div { min-width: 0; }
.lijst b { font-weight: 800; overflow-wrap: anywhere; }
.lijst small { display: block; color: var(--tekst-2); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.lijst small.tekst-gevaar { color: var(--gevaar-tekst); }
.lijst small.tekst-let { color: var(--let-tekst); }
/* Aandacht: pictogram bovenaan bij een uitleg van twee regels (niet midden in de tekst). */
.lijst--boven li { align-items: flex-start; }

/* Pictogramvak zoals in de app: zwart (donker: verhoogd grijs) met een geel teken. */
.ikoonvak { width: 36px; height: 36px; border-radius: var(--hoek-sm); background: var(--merkdoos); color: var(--accent); display: grid; place-items: center; flex: none; }
.ikoonvak svg { width: 20px; height: 20px; }
.ikoonvak--gedempt { background: var(--oppervlak-2); color: var(--tekst-2); }
.ikoonvak--gevaar { background: var(--gevaar-vlak); color: #FFFFFF; }
.leeg-staat { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--hoek-md); background: var(--oppervlak-2); }
.leeg-staat b { display: block; font-weight: 800; }
.leeg-staat p { margin: 2px 0 0; color: var(--tekst-2); font-size: 14px; }

.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; font-size: 14px; }
.gegevens dt { color: var(--tekst-2); font-weight: 700; }
.gegevens dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* ---------- Tabel ---------- */
/* position: relative houdt ook verborgen (sr-only) koppen binnen de scrollzone: anders scrolt de hele pagina zijwaarts. */
.tabel-wrap { overflow-x: auto; margin: 0 -8px; position: relative; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); font-weight: 800; padding: 8px; border-bottom: 1px solid var(--rand); white-space: nowrap; }
td { padding: 12px 8px; height: 64px; border-bottom: 1px solid var(--rand-zacht); vertical-align: middle; font-variant-numeric: tabular-nums; }
tbody tr { transition: background-color var(--t1) ease; }
tr:last-child td { border-bottom: 0; }
td.acties { text-align: right; white-space: nowrap; }
.acties-rij { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.acties-rij .knop--klein + .knop--ikoon, .acties-rij .knop--klein + .knop--klein { margin-left: 4px; }
.persoon { display: flex; align-items: center; gap: 12px; min-width: 0; }
.persoon .avatar { width: 36px; height: 36px; font-size: 12px; background: var(--merkdoos); color: var(--accent); }
.persoon b { display: block; font-weight: 800; overflow-wrap: anywhere; }
.persoon small { display: block; color: var(--tekst-2); font-size: 12px; overflow-wrap: anywhere; }
.leeg { color: var(--tekst-2); font-size: 14px; padding: 8px 0; margin: 0; }

/* Uitnodigen */
.uitnodig { display: grid; grid-template-columns: 2fr 1.5fr minmax(190px, 1.2fr) auto; gap: 12px; align-items: end; }
.uitnodig .veld { margin: 0; }
.uitnodig .knop { min-height: 48px; }
.uitnodig__melding { margin-top: 12px; }
.uitnodig__melding:empty { display: none; }

.form-rij { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.form-rij .veld { flex: 1 1 260px; margin: 0; }
.form-rij .knop { min-height: 48px; }

.schakel { display: flex; align-items: center; gap: 12px; font-weight: 700; cursor: pointer; }
.schakel input { width: 22px; height: 22px; }

.info { font-size: 14px; color: var(--tekst-2); background: var(--oppervlak-2); border-radius: var(--hoek-md); padding: 12px 16px; margin: 0; }

/* Dialoog: verschijnt met een fade en een kleine schaal, de achtergrond vervaagt mee. */
.dialoog { border: 1px solid var(--rand); border-radius: var(--hoek-lg); padding: 24px; max-width: 440px; width: calc(100% - 32px); box-shadow: var(--schaduw-dialoog); color: var(--tekst); background: var(--oppervlak); }
.dialoog[open] { animation: dialoog-in 160ms var(--ease); }
.dialoog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); animation: vervaag 160ms ease; }
@keyframes dialoog-in { from { opacity: 0; transform: scale(.98); } }
.dialoog h2 { font-family: var(--display); font-stretch: 108%; font-size: 21px; margin-bottom: 10px; }
.dialoog__knoppen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 200%); visibility: hidden; background: #141414; color: #FFFFFF; padding: 12px 18px; border-radius: var(--hoek-sm); font-weight: 700; z-index: 60;
  transition: transform var(--t2) var(--ease), visibility 0s linear var(--t2); max-width: calc(100% - 32px); border-left: 6px solid var(--accent); box-shadow: var(--schaduw-hover); }
.toast.toon { transform: translate(-50%, 0); visibility: visible; transition: transform var(--t2) var(--ease); }
.toast--fout { border-left-color: var(--gevaar-vlak); }
[data-thema="donker"] .toast { background: #222222; box-shadow: 0 0 0 1px #333333, var(--schaduw-hover); }

/* ---------- Platform (enkel voor de eigenaar van WerfHero) ---------- */
.terug { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-weight: 700; font-size: 14px; color: var(--tekst-2); text-decoration: none; padding: 4px 0; }
.terug:hover { color: var(--tekst); }
.terug svg { width: 16px; height: 16px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.cel2 { display: inline-grid; line-height: 1.3; }
.cel2 small { color: var(--tekst-2); font-size: 12px; font-weight: 600; }
.rood { color: var(--gevaar-tekst); }

.filters { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(130px, 1fr)) minmax(220px, 1.4fr); gap: 12px; align-items: end; margin-top: 16px; }
.filters .veld { margin: 0; }
/* Status, pakket en sorteren: op een groot scherm gewoon in het raster; op de gsm achter de knop "Filters". */
.filters__extra { display: contents; }
.filters__knop { display: none; }
.filters__knop .pill { min-height: 20px; padding: 0 7px; }
.filters__sorteer { display: flex; gap: 8px; align-items: end; min-width: 0; }
.filters__sorteer .veld { flex: 1; min-width: 0; }
.richting { min-height: 48px; min-width: 48px; padding: 0; font-size: 18px; }
.pf-aantal { margin: 16px 0 4px; font-size: 14px; font-weight: 700; }

.sorteer { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; white-space: nowrap; }
.sorteer:hover, th[aria-sort] .sorteer { color: var(--tekst); }
.pf-tabel td { white-space: nowrap; }
.pf-tabel td.eerste { white-space: normal; min-width: 190px; }
/* Koppen mogen op twee regels: zo past de hele lijst ook op een laptop (1280 px) zonder zijwaarts scrollen. */
.pf-tabel th { white-space: normal; vertical-align: bottom; }
.pf-tabel .sorteer { white-space: normal; text-align: left; }
.pf-tabel .pf-meer-cel { display: none; }
.pf-meer svg { width: 16px; height: 16px; transition: transform var(--t2) var(--ease); }
.pf-meer[aria-expanded="true"] svg { transform: rotate(180deg); }
.pf-groep { display: grid; gap: 16px; min-width: 0; }

/* Beheer van een bedrijf: 3 + 2 over de volle breedte (geen lege cel); kleiner 2 kolommen, de laatste breed. */
.acties-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.acties-raster > * { grid-column: span 2; }
.acties-raster > :nth-child(4), .acties-raster > :nth-child(5) { grid-column: span 3; }
.actie { background: var(--oppervlak-2); border-radius: var(--hoek-md); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.actie h3 { font-size: 15px; font-weight: 800; }
.actie .veld { margin: 0; }
.actie .knop { align-self: flex-start; }
.actie__knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.actie__help { font-size: 13px; color: var(--tekst-2); margin: 0; }
.actie__stand { margin: 0; font-weight: 700; font-size: 14px; }

/* Segmentkeuze (aan / uit / standaard, 3 / 6 / 12 maanden): het gekozen segment in inkt met witte tekst, zonder geel. */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--hoek-sm); background: var(--seg-baan); flex: none; }
.seg button { font: inherit; font-weight: 800; font-size: 13px; border: 0; border-radius: 9px; background: none; color: var(--tekst-2); padding: 6px 12px; cursor: pointer; min-height: 32px; white-space: nowrap; transition: background-color var(--t1) ease, color var(--t1) ease, box-shadow var(--t1) ease; }
.seg button[aria-pressed="true"] { background: var(--seg-actief); color: var(--tekst); box-shadow: var(--seg-schaduw); }
.seg button:hover:not([aria-pressed="true"]) { color: var(--tekst); }
.seg button:focus-visible { outline-offset: 0; border-radius: 9px; }

.kaart--gevaar { border-color: var(--gevaar-vlak); }
.kaart--gevaar > h2 { color: var(--gevaar-tekst); }
.kaart--gevaar > h2::before { background: var(--gevaar-vlak); }
.kaart--gevaar > h2 svg { color: var(--gevaar-tekst); }

.dialoog__invoer { margin: 14px 0 0; }
#dialoog-extra { margin: 12px 0 0; }

/* ---------- Responsief ---------- */
@media (hover: hover) and (min-width: 641px) {
  tbody tr:hover { background: var(--oppervlak-hover); }
}
@media (max-width: 1180px) {
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rij, .rij--gelijk, .rij--75, .kolommen { grid-template-columns: minmax(0, 1fr); }
  .uitnodig { grid-template-columns: 1fr 1fr; }
  .gebruiker__tekst { display: none; }
  .acties-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acties-raster > *, .acties-raster > :nth-child(4), .acties-raster > :nth-child(5) { grid-column: auto; }
  .acties-raster > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .filters { grid-template-columns: 1fr 1fr; }
}
/* Laptop en tablet: naast taal- en themakeuze toont de eigenaarsbadge enkel de kroon (zoals op de gsm), zodat de
   paginanaam en het e-mailadres in de balk leesbaar blijven (ook in het Frans: "Propriétaire", "Se déconnecter"). */
@media (max-width: 1320px) {
  .eigenaar-badge { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .eigenaar-badge > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 900px) {
  :root { --balk-h: 63px; }
  .zij { position: fixed; left: 0; top: var(--boven); bottom: 0; height: auto; transform: translateX(-100%); transition: transform var(--t2) var(--ease), visibility 0s linear var(--t2); visibility: hidden; width: min(300px, 86vw); }
  .zij.open { transform: none; visibility: visible; transition: transform var(--t2) var(--ease); }
  .zij__kop { padding-right: 0; }
  .zij__sluit, .balk__menu { display: inline-grid; }
  .zij__gebruiker { display: block; }
  .balk { padding: 10px 16px; gap: 8px; }
  main#inhoud { padding: 20px 16px 40px; }
  .aanmeld { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .aanmeld__merk { padding: 24px 20px 0; }
  .aanmeld__boven { margin-top: 28px; }
  .aanmeld__slogan { font-size: 34px; }
  .aanmeld__uitleg { margin-bottom: 24px; }
  .aanmeld__merk .strepen { margin: 0 -20px; }
  .aanmeld__vak { justify-content: flex-start; padding-top: 68px; }
}
@media (max-width: 640px) {
  .balk__rechts .knop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .balk__rechts .knop { padding: 0 10px; }
  .balk__rechts { gap: 8px; }
  .avatar { width: 34px; height: 34px; font-size: 12px; }
  .balk__label { display: none; }
  .balk__bedrijf b { font-size: 15px; }
  .kop-pagina h1 { font-size: 26px; }
  .kop-pagina__sub { font-size: 15px; }
  .kop-pagina__actie, .kop-pagina__actie .knop { width: 100%; }
  .tegels { gap: 12px; }
  .tegel { padding: 16px; }
  .tegel__kop { font-size: 11px; letter-spacing: .06em; }
  /* Twee naast elkaar: koppen houden twee regels plaats, zodat de getallen op dezelfde hoogte staan. */
  .tegels .tegel__kop { align-items: flex-start; min-height: calc(2 * 1.3em); line-height: 1.3; }
  .tegel__getal { font-size: 28px; }
  .tegel__getal--woord { font-size: 17px; font-stretch: 100%; overflow-wrap: normal; hyphens: auto; }
  .uitnodig { grid-template-columns: 1fr; }
  .kaart { padding: 16px; }
  .aanmeld__kaart, .melding__kaart { padding: 20px; }
  .modulelijst { gap: 10px 12px; }
  .acties-raster { grid-template-columns: minmax(0, 1fr); }
  .acties-raster > :last-child:nth-child(odd) { grid-column: auto; }
  /* Bedrijven: zoeken en de knop "Filters" naast elkaar; status, pakket en sorteren pas na een tik. */
  .filters { grid-template-columns: minmax(0, 1fr) auto; }
  .filters__knop { display: inline-flex; align-self: end; min-height: 48px; }
  .filters__knop svg { transition: transform var(--t2) var(--ease); }
  .filters.is-open .filters__knop svg { transform: rotate(180deg); }
  .filters__extra { display: none; grid-column: 1 / -1; gap: 12px; }
  .filters.is-open .filters__extra { display: grid; }
  /* Snelle filters op één rij die zijwaarts schuift (niet het hele eerste scherm vol chips). */
  .chips--rol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px; }
  .chips--rol::-webkit-scrollbar { display: none; }
  .chips--rol .chip { flex: none; }
  .chips--rol { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  /* Geen kaart rond de kaartjes van de bedrijven. */
  .pf-lijst-kaart { background: none; border: 0; padding: 0; border-radius: 0; }
  /* Tabel als lijst: rijen met een lijn ertussen (geen kaart in een kaart), acties op een vaste rij. */
  .tabel-wrap { overflow: visible; margin: 0; }
  table.stapel, table.stapel tbody, table.stapel tr, table.stapel td { display: block; width: 100%; }
  table.stapel thead { display: none; }
  table.stapel tr { padding: 14px 0; border-bottom: 1px solid var(--rand); }
  table.stapel tr:first-child { padding-top: 4px; }
  table.stapel tr:last-child { border-bottom: 0; padding-bottom: 0; }
  /* Bedrijven (zonder kaart errond): elk bedrijf een compact kaartje. */
  table.pf-bedrijven tr { background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--hoek-md); padding: 12px 14px; margin-bottom: 8px; }
  table.pf-bedrijven tr:first-child { padding-top: 12px; }
  table.pf-bedrijven tr:last-child { margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid var(--rand); }
  table.pf-bedrijven tr { position: relative; }
  table.pf-bedrijven .persoon .avatar { display: none; }
  table.pf-bedrijven td { padding: 2px 0; }
  /* "Meer" rechtsboven in het kaartje (geen aparte rij). */
  table.pf-bedrijven td.eerste { padding-right: 104px; }
  table.pf-bedrijven td.eerste b a { padding: 6px 0; }
  table.pf-bedrijven td.acties.pf-meer-cel { position: absolute; top: 12px; right: 14px; width: auto; margin: 0; padding: 0; border: 0; }
  table.stapel td { height: auto; border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
  table.stapel td::before { content: attr(data-label); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-2); text-align: left; }
  table.stapel td.eerste { display: block; text-align: left; padding-bottom: 6px; }
  table.stapel td.eerste::before { content: none; }
  table.stapel td.acties { justify-content: flex-start; flex-wrap: wrap; gap: 4px; margin-top: 6px; padding-top: 6px; white-space: normal; }
  table.pf-bedrijven td.acties { border-top: 1px solid var(--rand-zacht); margin-top: 8px; padding-top: 8px; }
  table.stapel td.acties::before { content: none; }
  table.stapel td.acties .acties-rij { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; }
  table.stapel td.acties:empty, table.stapel td.acties:not(:has(button, a, label)) { display: none; }
  .gegevens { grid-template-columns: 1fr; gap: 2px; }
  .gegevens dd { margin-bottom: 8px; }
  /* Tikvlakken van minstens 40 px op de gsm. */
  .taal button { min-height: 40px; min-width: 40px; }
  .knop--klein { min-height: 42px; }
  .balk__rechts .knop { min-height: 42px; min-width: 42px; }
  /* De avatar is enkel versiering (naam en e-mail staan in het menu) en de taalkeuze staat in het menu:
     zo blijft er in de balk plaats voor de bedrijfsnaam. */
  .balk .gebruiker, .balk__rechts [data-taalkeuze], .balk__rechts [data-themakeuze] { display: none; }
  /* Eigenaarsbadge op de gsm: enkel de kroon (de paginanaam ernaast blijft leesbaar). */
  .eigenaar-badge { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .eigenaar-badge > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zij__taal { display: flex; }
  .kaart > h2 .meer { padding: 14px 0 14px 12px; margin-top: -14px; margin-bottom: -14px; }
  .aanmeld__extra .link { padding: 10px 0; }
  .k-optie { min-height: 42px; }
  .seg button { min-height: 38px; padding: 6px 10px; }
  .chip { min-height: 40px; }
  /* Bedrijfsnamen openen het bedrijf: op de gsm een ruimer tikvlak. */
  .pf-tabel td.eerste b a, .pf-todo__tekst b a, .k-tabel td a { display: inline-block; padding: 10px 0; }
  .terug { padding: 10px 0; }
  .pf-tabel td, .pf-tabel td.eerste { white-space: normal; min-width: 0; }
  /* Bedrijven op de gsm: naam, status met einde en plaatsen; de rest achter "Meer". */
  .pf-tabel td.pf-meer-cel { display: flex; }
  .pf-tabel tr:not(.is-open) .pf-kol--meer { display: none; }
}

/* Kop krijgt focus na het wisselen van pagina; geen kader nodig. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }

/* Tablet en kleine laptop: Aangemaakt en Laatst actief (en de avatar) weg, zodat de lijst zonder zijwaarts scrollen past. */
@media (min-width: 641px) and (max-width: 1240px) {
  .pf-tabel .pf-kol--extra, .pf-tabel .persoon .avatar { display: none; }
  .pf-tabel .cel2 small { white-space: normal; }
  .pf-tabel th, .pf-tabel td { padding-left: 6px; padding-right: 6px; }
  .k-tabel td { white-space: normal; }
}

/* Abonnement starten (beheerder): gekozen pakket met een zwarte rand en een geel keuzerondje, geen geel vlak. */
.betaal { display: grid; gap: 16px; margin-top: 16px; }
.betaal__keuze { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.betaal__keuze legend { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.betaal__optie { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--rand); border-radius: var(--hoek-md); cursor: pointer; background: var(--oppervlak);
  transition: border-color var(--t1) ease, box-shadow var(--t1) ease; }
.betaal__optie:hover { border-color: var(--tekst-2); }
.betaal__optie:has(input:checked) { border-color: var(--tekst); box-shadow: inset 0 0 0 .5px var(--tekst); }
.betaal__optie input { accent-color: var(--tekst); width: 20px; height: 20px; margin: 0; flex: none; }
.betaal__optie:has(input:disabled) { cursor: not-allowed; background: var(--oppervlak-2); border-style: dashed; }
.betaal__optie:has(input:disabled) > span { color: var(--tekst-2); }
.betaal__optie:has(input:disabled):hover { border-color: var(--rand); }
.betaal__totaal { margin: 0; }
.betaal__totaal b { display: block; font-weight: 800; }
.betaal__totaal small, .betaal__inhoud { display: block; color: var(--tekst-2); font-size: 13px; font-weight: 600; margin-top: 2px; }
.betaal__totaal small.fout { color: var(--gevaar-tekst); margin-top: 8px; }
.betaal__klein { margin: 6px 0 0; font-size: 13px; }
.betaal > .knop--geel { justify-self: start; }
/* Lanceringsaanbod: de gewone prijs doorstreept naast de prijs tijdens het aanbod; vinkje voor een eigen kortingscode. */
.betaal__oud { color: var(--tekst-2); font-weight: 600; text-decoration-thickness: 1.5px; }
.betaal__vink { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 600; color: var(--tekst-2); cursor: pointer; }
.betaal__vink input { accent-color: var(--tekst); width: 18px; height: 18px; margin: 0; flex: none; }
/* Lange knoptekst ("Abonnement beheren (facturen, …)") mag op twee regels, niet buiten de kaart. */
#portaal { white-space: normal; text-align: center; max-width: 100%; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }

/* Kortingen (Platform): twee symmetrische kolommen. */
.korting { display: grid; gap: 16px; }
.k-raster { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.k-kolom { flex: 1 1 300px; min-width: 0; display: grid; gap: 16px; align-content: start; align-self: stretch; border: 1px solid var(--rand); border-radius: var(--hoek-md); padding: 16px; }
/* In een kolom: de groepen zonder eigen kader (de kolom is het kader), zodat beide kolommen gelijk ogen. */
.k-kolom > .k-groep { border: 0; padding: 0; gap: 10px; }
.k-kolom > .k-groep + .k-groep { padding-top: 8px; }
.k-kolom > .k-groep legend { padding: 0; margin-bottom: 8px; }
.k-kolom:not(:has(> :not([hidden]))) { display: none; }
.k-kolom > .veld { margin: 0; }
.k-groep { border: 1px solid var(--rand); border-radius: var(--hoek-md); padding: 12px 16px 16px; margin: 0; min-width: 0; display: grid; gap: 12px; }
.k-groep legend { font-weight: 800; font-size: 14px; padding: 0 4px; }
.k-groep .veld { margin: 0; }
.k-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.k-optie { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--rand); border-radius: var(--hoek-sm); cursor: pointer; font-weight: 700; font-size: 14px; background: var(--oppervlak); transition: border-color var(--t1) ease; }
.k-optie:hover { border-color: var(--tekst-2); }
.k-optie:has(input:checked) { border-color: var(--tekst); background: var(--oppervlak-2); }
.k-optie:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.k-optie input { accent-color: var(--tekst); margin: 0; }
/* Eén keuze uit een paar (soort, duur, hoe): segmentkeuze zoals .seg; het rondje verdwijnt, het label is het vlak. */
.k-keuzes:has(> .k-optie input[type="radio"]) { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; max-width: 100%; border-radius: var(--hoek-sm); background: var(--seg-baan); justify-self: start; }
.k-keuzes:has(> .k-optie input[type="radio"]) .k-optie { position: relative; border: 0; border-radius: 9px; padding: 0 14px; min-height: 38px; font-size: 13px; font-weight: 800; color: var(--tekst-2); background: none; white-space: nowrap; transition: background-color var(--t1) ease, color var(--t1) ease, box-shadow var(--t1) ease; }
.k-keuzes:has(> .k-optie input[type="radio"]) .k-optie input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.k-keuzes:has(> .k-optie input[type="radio"]) .k-optie:hover { color: var(--tekst); }
.k-keuzes:has(> .k-optie input[type="radio"]) .k-optie:has(input:checked) { background: var(--seg-actief); color: var(--tekst); box-shadow: var(--seg-schaduw); }
.k-keuzes:has(> .k-optie input[type="radio"]) .k-optie:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 0; }
.k-keuzes:has(> .k-optie input[type="radio"]) .k-optie:has(input:disabled) { opacity: .6; }
.k-maanden { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.k-maanden .veld { flex: 0 1 140px; }
.k-maanden .seg { min-height: 48px; display: inline-flex; max-width: 100%; }
.k-maanden .seg button { min-height: 42px; padding: 6px 12px; font-size: 13px; }
.k-code-invoer { text-transform: uppercase; font-weight: 800 !important; letter-spacing: .06em; }
.k-voorbeeld { margin: 0; font-weight: 800; }
.k-voorbeeld:empty { display: none; }
.korting > .knop { justify-self: start; }
.k-klaar { display: grid; gap: 8px; margin: 0 0 16px; font-weight: 600; }
.k-klaar p { margin: 0; }
.k-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.k-code__tekst { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 24px; font-weight: 800; letter-spacing: .08em; color: var(--tekst); background: var(--oppervlak); border: 2px dashed var(--accent); border-radius: var(--hoek-sm); padding: 4px 14px; user-select: all; }
.k-codecel { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.k-mono { font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.k-klein { display: block; color: var(--tekst-2); font-size: 12px; font-weight: 600; }
.k-tabel td.acties { text-align: right; }
#pf-korting .info, #pf-korting .banner { margin-bottom: 16px; }
@media (max-width: 640px) {
  .k-code__tekst { font-size: 20px; }
}

/* ---------- Cockpit van de eigenaar (Platform; standaard donker, ook licht) ---------- */
/* Hero: inkt met een zachte gouden gloed. Links de datum, de groet en "— Eigenaar van WerfHero"; rechts de snelle acties.
   De kroon staat in de balk, MSE Group klein onderaan het menu. */
.cp-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); grid-template-areas: "tekst snel";
  gap: 24px 40px; align-items: center; padding: 32px;
  border-radius: var(--hoek-lg); border: 1px solid rgba(255, 194, 14, .16); color: var(--op-inkt);
  background: radial-gradient(600px circle at 85% -20%, rgba(255, 194, 14, .10), transparent 70%), var(--inkt-blok); }
.cp-hero__tekst { grid-area: tekst; min-width: 0; }
.cp-hero__datum { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cp-hero h1 { font-size: 44px; line-height: 1.02; color: #FFFFFF; overflow-wrap: anywhere; text-wrap: balance; }
.cp-hero__rol { margin: 10px 0 0; color: var(--op-inkt-2); font-size: 16px; font-weight: 600; }
.cp-hero__zin { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 15px; font-weight: 600; color: #E6E6E6; }
.cp-snel { grid-area: snel; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-self: end; }
.cp-snel__kort { display: none; }
.cp-snel__knop { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 6px 16px; border-radius: var(--hoek-pil); background: var(--inkt-verhoogd); border: 1px solid rgba(255, 255, 255, .06);
  color: #FFFFFF; font-weight: 700; font-size: 14px; text-decoration: none; transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), background-color var(--t1) ease; }
.cp-snel__knop > span:not(.sr-only):not(.cp-snel__uit) { min-width: 0; line-height: 1.2; overflow-wrap: break-word; }
.cp-snel__knop svg { width: 18px; height: 18px; color: var(--accent); }
.cp-snel__knop:hover { background: #3D3D3D; box-shadow: var(--schaduw-hover); }
.cp-snel__knop--hoofd { background: var(--accent); border-color: var(--accent); color: #141414; }
.cp-snel__knop--hoofd svg { color: #141414; }
.cp-snel__knop--hoofd:hover { background: var(--accent-hover); }
.cp-snel__uit { margin-left: auto; color: var(--op-inkt-2); }

/* KPI-tegels. Breed (≥ 1100 px): alles op één rij, MRR dubbel zo breed. Daaronder: MRR over de volle breedte en
   4 gelijke tegels (geen scheef 3 + 2). Op de gsm: MRR en dan 2 × 2. Koppen houden altijd twee regels plaats. */
.cp-tegels { container-type: inline-size; }
.cp-tegels__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cp-tegels__raster > :first-child { grid-column: 1 / -1; }
.cp-tegels .tegel__kop { align-items: flex-start; min-height: calc(2 * 1.3em); line-height: 1.3; }
.cp-tegels .tegel:not(.cp-mrr-tegel) .tegel__getal { margin-top: 6px; }
.cp-mrr-tegel { container: mrr / inline-size; border-color: rgba(255, 194, 14, .3); background: linear-gradient(180deg, rgba(255, 194, 14, .07), transparent 65%), var(--oppervlak); }
/* Licht: een lichte kaart met een gouden rand en een warme gloed bovenaan (de hero blijft het enige donkere blok). */
[data-thema="licht"] .cp-mrr-tegel { border-color: var(--goud); background: linear-gradient(180deg, rgba(255, 194, 14, .16), transparent 70%), var(--oppervlak); }
.cp-mrr-binnen { display: flex; flex-direction: column; height: 100%; }
.cp-mrr-binnen .tegel__kop { min-height: 0; }
/* Altijd op één regel: de letter volgt de breedte van de tegel; een groot bedrag (€ 12.345,67) iets kleiner. */
.cp-mrr { color: var(--accent-tekst); white-space: nowrap; font-size: clamp(32px, 15cqi, 54px); }
.cp-mrr--lang { font-size: clamp(28px, 11.5cqi, 54px); }
.cp-arr { margin-top: 6px; font-size: 14px; color: var(--tekst-2); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-arr b { color: var(--tekst); font-weight: 800; }
/* MRR over de volle breedte: grote lijn rechts naast het bedrag. */
@container mrr (min-width: 520px) {
  .cp-mrr-binnen { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "kop kop" "getal spark" "arr spark" "sub sub"; column-gap: 40px; align-items: end; }
  .cp-mrr-binnen > .tegel__kop { grid-area: kop; }
  .cp-mrr-binnen > .cp-mrr { grid-area: getal; font-size: 54px; }
  .cp-mrr-binnen > .cp-arr { grid-area: arr; }
  .cp-mrr-binnen > .spark { grid-area: spark; justify-self: end; width: 100%; max-width: 380px; height: 64px; margin-top: 0; align-self: end; }
  .cp-mrr-binnen > .spark--leeg { align-self: end; justify-content: flex-end; }
  .cp-mrr-binnen > .tegel__sub { grid-area: sub; }
}
@container (min-width: 760px) {
  .cp-tegels__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp-tegels .tegel { padding: 18px; }
  .cp-tegels .tegel__kop { font-size: 11px; letter-spacing: .08em; }
}
@container (min-width: 1100px) {
  .cp-tegels__raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cp-tegels__raster > * { grid-column: span 1; }
  .cp-tegels__raster > :first-child { grid-column: span 2; }
}

/* Proeven die aflopen: strook van 7 dagen, een gele stip op elke dag waarop er een afloopt. */
.cp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 12px; max-width: 224px; }
.cp-week__dag { display: grid; justify-items: center; gap: 5px; }
.cp-week__dag i { width: 100%; max-width: 22px; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rand); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: #141414; }
.cp-week__dag.is-vol i { background: var(--accent); box-shadow: none; }
.cp-week__dag small { font-size: 12px; font-weight: 700; color: var(--tekst-2); text-transform: uppercase; line-height: 1; }
.cp-week__dag.is-nu small { color: var(--tekst); }

/* Feed: aanmeldingen, betalingen, supportvragen en eigen acties. */
.cp-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.cp-feed__groep { margin: 18px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); }
.kaart > h2 + .cp-feed__groep { margin-top: 0; }
.cp-feed__lijst { list-style: none; margin: 0; padding: 0; }
.cp-feed__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rand-zacht); font-size: 14px; }
.cp-feed__item:last-child { border-bottom: 0; }
.cp-feed__tekst b { display: block; font-weight: 800; overflow-wrap: anywhere; }
.cp-feed__tekst small { display: block; color: var(--tekst-2); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.cp-feed__item time { align-self: start; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--tekst-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Namen en adressen: grijze onderlijn, geel bij hover of focus (zie a). Een regel met " · " breekt enkel tussen de delen. */
.cp-feed__tekst small, .pf-todo__tekst small { overflow-wrap: normal; }

/* Te doen */
.pf-todo__lijst { list-style: none; margin: 0; padding: 0; }
.pf-todo__item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; border-bottom: 1px solid var(--rand-zacht); }
.pf-todo__item:first-child { padding-top: 0; }
.pf-todo__item:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-todo__tekst { flex: 1 1 200px; min-width: 0; }
.pf-todo__tekst b { display: block; font-weight: 800; overflow-wrap: anywhere; }
.pf-todo__tekst small { display: block; color: var(--tekst-2); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pf-todo__acties { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; padding-left: 48px; }

/* Trechter */
.pf-trechter__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pf-trechter__kop { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 14px; }
.pf-trechter__kop b { margin-left: auto; font-family: var(--display); font-stretch: 112%; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pf-trechter__pct { min-width: 54px; text-align: right; color: var(--tekst-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.pf-trechter__balk { height: 10px; border-radius: 5px; background: var(--oppervlak-2); overflow: hidden; margin: 6px 0 4px; }
.pf-trechter__balk i { display: block; height: 100%; border-radius: 5px; background: var(--grafiek-staaf); transform-origin: left center; }
.pf-trechter__stap--2 .pf-trechter__balk i { background: var(--tekst-2); }
.pf-trechter__stap--3 .pf-trechter__balk i { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent-omlijning); }
.pf-trechter__stap small { color: var(--tekst-2); font-size: 12px; }
.pf-trechter__omzet { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rand-zacht); font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.pf-trechter__omzet b { color: var(--tekst); font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* Grafieken (inline SVG, zonder bibliotheek): staafjes grijs met de huidige week geel, MRR als gele lijn. */
.grafiek { margin: 0; }
.grafiek__vlak { position: relative; height: 170px; margin-top: 26px; }
.grafiek__vlak svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.grafiek__vlak--leeg { margin-top: 0; border-radius: var(--hoek-sm); background: var(--oppervlak-2); }
.grafiek__basis { stroke: var(--rand); stroke-width: 1; vector-effect: non-scaling-stroke; }
.staaf { fill: var(--grafiek-staaf); }
.staaf--nu { fill: var(--accent); stroke: var(--accent-omlijning); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.staaf--nul { fill: var(--grafiek-nul); }
.grafiek__waarde { position: absolute; transform: translate(-50%, -6px); font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.grafiek__waarde--mrr { transform: translate(-50%, -14px); font-size: 13px; background: var(--oppervlak); padding: 2px 4px; border-radius: 4px; }
.grafiek__waarde--rechts { transform: translate(calc(-100% + 6px), -16px); }
.grafiek__waarde--links { transform: translate(-6px, -16px); }
/* Het vorige punt lag hoger: het label onder het laatste punt, anders leek het bij die piek te horen. */
.grafiek__waarde--onder { transform: translate(-50%, 12px); }
.grafiek__waarde--onder.grafiek__waarde--rechts { transform: translate(calc(-100% + 6px), 12px); }
.grafiek__waarde--onder.grafiek__waarde--links { transform: translate(-6px, 12px); }
.grafiek__lijn { fill: none; stroke: var(--grafiek-lijn); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafiek__stippel { fill: none; stroke: var(--tekst-2); stroke-width: 2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.grafiek__punt { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--oppervlak); border: 2.5px solid var(--grafiek-lijn); transform: translate(-50%, -50%); }
.grafiek__punt--laatst { width: 13px; height: 13px; background: var(--accent); }
.grafiek__leeg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; margin: 0; padding: 0 16px 20px; color: var(--tekst-2); font-size: 14px; font-weight: 600; }
.grafiek__as { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--tekst-2); }
.grafiek__as span { text-align: center; white-space: nowrap; overflow: visible; visibility: hidden; }
.grafiek__as span:nth-last-child(odd), .grafiek__as .nu { visibility: visible; }
.grafiek__as .nu { color: var(--tekst); font-weight: 800; }
.grafiek__uitleg { margin-top: 12px; font-size: 12px; color: var(--tekst-2); }

/* Gebruik */
.pf-gebruik__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-gebruik__item { background: var(--oppervlak-2); border-radius: var(--hoek-md); padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; }
.pf-gebruik__l { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-2); }
.pf-gebruik__v { font-family: var(--display); font-stretch: 112%; font-size: 26px; font-weight: 900; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.pf-gebruik__item .meter { margin-top: 10px; }
.pf-gebruik__sub { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--tekst-2); }
.pf-gebruik__voet { margin: 14px 0 0; font-size: 12px; }

/* Bedrijf-detail: donkere kop en een vaste navigatiebalk in de pagina. */
.cp-kop { display: grid; gap: 12px; padding: 28px 32px; border-radius: var(--hoek-lg); color: var(--op-inkt); border: 1px solid rgba(255, 194, 14, .14);
  background: radial-gradient(520px circle at 90% -30%, rgba(255, 194, 14, .09), transparent 70%), var(--inkt-blok); }
.cp-kop .bovenregel { color: var(--op-inkt); margin: 0; }
.cp-kop h1 { font-size: 36px; color: #FFFFFF; overflow-wrap: anywhere; }
.cp-kop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--op-inkt-2); font-size: 14px; font-weight: 600; }
.cp-kop__meta .status--proef { color: #FFFFFF; }
/* Ankerbalk: blijft onder de balk staan; de sectie waar je bent is gemarkeerd; op de gsm een zachte rand waar nog chips staan. */
.pf-anker-wrap { position: sticky; top: calc(var(--boven) + var(--balk-h)); z-index: 20; min-width: 0; margin: -10px -2px; background: var(--achtergrond); }
.pf-anker-wrap::before, .pf-anker-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; opacity: 0; transition: opacity var(--t2) ease; }
.pf-anker-wrap::before { left: 0; background: linear-gradient(90deg, var(--achtergrond), transparent); }
.pf-anker-wrap::after { right: 0; background: linear-gradient(270deg, var(--achtergrond), transparent); }
.pf-anker-wrap.rand-l::before, .pf-anker-wrap.rand-r::after { opacity: 1; }
.pf-anker { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; scrollbar-width: none; }
.pf-anker::-webkit-scrollbar { display: none; }
.pf-anker .chip { flex: none; }
.pf-anker .chip[aria-current="true"] { background: var(--tekst); border-color: var(--tekst); color: var(--achtergrond); }
#p-platform [id] { scroll-margin-top: calc(var(--boven) + var(--balk-h) + 24px); }
#p-platform [id^="pf-sec-"], #p-platform #pf-korting { scroll-margin-top: calc(var(--boven) + var(--balk-h) + 72px); }

@media (max-width: 1180px) {
  .cp-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "snel"; }
  .cp-snel { max-width: 560px; }
}
@media (max-width: 640px) {
  .cp-hero { padding: 20px; gap: 18px; }
  .cp-hero h1 { font-size: 30px; }
  .cp-hero__rol { font-size: 15px; }
  .cp-snel { gap: 8px; }
  .cp-snel__knop { min-height: 48px; padding: 0 12px; font-size: 13px; gap: 8px; }
  .cp-kop { padding: 20px; }
  .cp-kop h1 { font-size: 28px; }
  .pf-todo__acties { padding-left: 0; }
  .grafiek__vlak { height: 140px; }
  .grafiek__as span:nth-last-child(odd) { visibility: hidden; }
  .grafiek__as span:nth-last-child(3n+1), .grafiek__as .nu { visibility: visible; }
  .pf-gebruik__raster { gap: 10px; }
  .pf-gebruik__item { padding: 12px; }
  .pf-gebruik__v { font-size: 22px; }
}
/* Snelle acties op de gsm: korte tekst op één regel (de lange blijft voor schermlezers). */
@media (max-width: 480px) {
  .cp-snel__lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cp-snel__kort { display: inline; white-space: nowrap; }
}
@media (max-width: 380px) { .pf-gebruik__raster { grid-template-columns: 1fr; } }
@media (max-width: 340px) { .cp-snel { grid-template-columns: minmax(0, 1fr); } }

/* Link naar het abonnement in waarschuwingen (op de gsm zit Bedrijf achter het menu) */
.naar { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; min-height: 32px; font-weight: 800; font-size: 14px; color: var(--tekst); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.naar svg { width: 14px; height: 14px; }
.naar:hover { text-decoration-color: currentColor; }
.banner .naar { color: inherit; }
@media (max-width: 640px) { .naar { min-height: 42px; margin-top: 0; } }

/* ── Platform → Partners ─────────────────────────────────────────────────
   Logo's van partners kunnen elke kleur hebben (bv. navy): rond het logo enkel wit en grijs, nooit geel. */
.pt-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.pt-kaart { display: flex; flex-direction: column; gap: 12px; transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.pt-kop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pt-kop__tekst { flex: 1; min-width: 0; }
.pt-kop h3 { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.pt-link { display: inline-block; font-size: 13px; color: var(--tekst-2); overflow-wrap: anywhere; text-decoration-color: var(--rand); }
.pt-logo { width: 88px; height: 48px; flex: none; border: 1px solid var(--rand); border-radius: var(--hoek-sm); background: #FFFFFF; display: grid; place-items: center; padding: 5px; overflow: hidden; }
.pt-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pt-logo span { font-weight: 900; color: #6B6B6B; }
.pt-logo--groot { width: 160px; height: 72px; }
/* Nog geen logo: gestippeld leeg vak in de kleuren van het thema (geen wit blok, dat in het donker kapot lijkt). */
.pt-logo--leeg { background: var(--oppervlak-2); border: 1.5px dashed var(--rand); }
.pt-logo--leeg span { color: var(--tekst-2); font-size: 15px; }
.pt-logo--groot.pt-logo--leeg span { font-size: 20px; }
.pt-tekst { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.pt-pakketten { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-feiten { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; font-size: 14px; }
.pt-feiten dt { color: var(--tekst-2); font-size: 12px; font-weight: 700; }
.pt-feiten dd { margin: 0; font-weight: 700; }
.pt-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pt-cijfers div { background: var(--oppervlak-2); border-radius: var(--hoek-sm); padding: 10px 12px; min-width: 0; }
.pt-cijfers b { display: block; font-family: var(--display); font-stretch: 112%; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pt-cijfers small { color: var(--tekst-2); font-size: 12px; font-weight: 700; }
.pt-klein { margin: -4px 0 0; color: var(--tekst-2); font-size: 12px; }
/* Acties op één rij: Wijzigen, (De)activeren en een vuilbak. */
.pt-acties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; margin-top: auto; align-items: center; }
.pt-acties .knop--klein { min-width: 0; padding: 0 10px; }
.pt-form-kaart { margin-bottom: 0; }
.pt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pt-breed { grid-column: 1 / -1; }
.pt-raster .k-groep { margin-bottom: 14px; }
.pt-raster .veld { align-content: start; }
.pt-raster .veld input { width: 100%; min-width: 0; }
.pt-logo-keuze { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-bestand { cursor: pointer; }
.pt-bestand:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pt-actief { align-self: end; margin-bottom: 14px; justify-self: start; }
.pt-form-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .pt-raster { grid-template-columns: minmax(0, 1fr); }
  .pt-form-knoppen .knop { flex: 1 1 auto; }
  .pt-actief { min-height: 42px; }
}

/* ── Wettelijke verplichtingen ──────────────────────────────────────────── */
@media (min-width: 641px) { .vp-tabel td.eerste { width: 42%; } }
.vp-tabel .persoon b { overflow-wrap: break-word; }
.vp-kijker { max-width: min(1000px, calc(100% - 32px)); width: 100%; height: calc(100vh - 64px); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.vp-kijker:not([open]) { display: none; }
.vp-kijker__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-kijker__kop h2 { flex: 1; min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
.vp-kijker iframe { flex: 1; width: 100%; border: 1px solid var(--rand); border-radius: var(--hoek-sm); }
.vp-kijker img { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; }

/* ── Ploegen: personeel (vaste namen), accounts en werven per ploeg ───────── */
.pl-nieuw { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pl-nieuw .veld { flex: 1 1 280px; margin: 0; }
.pl-nieuw .knop { min-height: 48px; }
.pl-kaart { display: grid; gap: 16px; }
.pl-uitleg { max-width: 820px; }
.pl-kaart > h2 { margin: 0; }
.pl-kaart > .kaart__sub { margin: -8px 0 0; }
.pl-kop { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.pl-titel { flex: 1 1 240px; min-width: 0; max-width: 460px; min-height: 44px !important; font-family: var(--display); font-stretch: 108%; font-size: 20px !important; font-weight: 800 !important; }
/* Naam van de ploeg: ziet eruit als een titel; de rand verschijnt pas bij hover of focus (je kan hem gewoon aanpassen). */
.pl-titel:not(:focus) { border-color: transparent; background: transparent; padding-left: 10px; margin-left: -10px; }
.pl-titel:not(:focus):hover { border-color: var(--rand); background: var(--veld-bg); }
.pl-meta { color: var(--tekst-2); font-size: 14px; font-weight: 600; }
.pl-kop__knoppen { margin-left: auto; display: flex; gap: 4px; }
.pl-klap svg { transition: transform var(--t2) var(--ease); }
.pl-klap[aria-expanded="false"] svg { transform: rotate(-90deg); }
/* Personeel over de volle breedte (vast raster per persoon), daaronder accounts en werven naast elkaar. */
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; align-items: start; }
.pl-grid > .pl-kol:first-child { grid-column: 1 / -1; }
.pl-grid > .pl-kol + .pl-kol { border-top: 1px solid var(--rand-zacht); padding-top: 16px; }
.pl-kol { min-width: 0; display: grid; gap: 10px; align-content: start; }
.pl-kol h3 { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); }
.pl-personen { list-style: none; margin: 0; padding: 0; }
/* Eén persoon op één regel, in elke ploeg en in "Zonder ploeg" op dezelfde plaats: naam · functie · verplaatsen · vuilbak. */
.pl-persoon { display: grid; grid-template-columns: minmax(0, 1fr) 170px 200px 40px; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rand-zacht); min-width: 0; }
.pl-persoon__naam { min-width: 0; font-weight: 800; overflow-wrap: break-word; }
.pl-select { font: inherit; font-size: 13px; font-weight: 600; color: var(--tekst); min-height: 38px; padding: 0 6px; border: 1.5px solid var(--rand); border-radius: var(--hoek-xs); background: var(--veld-bg); width: 100%; min-width: 0; text-overflow: ellipsis; }
.pl-select:focus { outline: none; border-color: var(--tekst); box-shadow: 0 0 0 3px var(--accent); }

/* Toevoegen in hetzelfde raster als de personen: naam onder de namen, functie onder de functies, de knop ernaast. */
.pl-toevoeg { display: grid; grid-template-columns: minmax(0, 1fr) 170px 200px 40px; gap: 8px; align-items: end; margin-top: 4px; }
.pl-toevoeg .veld { margin: 0; font-size: 13px; }
.pl-toevoeg .veld input, .pl-toevoeg .veld select { min-height: 42px; font-size: 15px; padding: 0 10px; }
.pl-toevoeg .knop { grid-column: 3 / 5; justify-self: start; min-height: 42px; }
.pl-plak summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 6px 0; width: fit-content;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pl-plak form { display: grid; gap: 8px; margin-top: 6px; }
.pl-plak .veld { margin: 0; }
.pl-plak .knop { justify-self: start; }
.pl-vinken { list-style: none; margin: 0; padding: 0; display: grid; }
.pl-vink { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; min-width: 0; }
.pl-vink input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--tekst); }
.pl-vink > span:not(.pill):not(.status) { flex: 1; min-width: 0; }
.pl-vink b { display: block; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.pl-vink small { display: block; color: var(--tekst-2); font-size: 12px; overflow-wrap: anywhere; }
/* E-mailadres op één regel ("…" als het niet past), niet door de pil "Beheerder". */
.pl-vink small.pl-mail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.pl-zicht { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: -4px 0 6px 30px; font-size: 13px; color: var(--tekst-2); }
.pl-zicht .link { font-size: 13px; }
.pl-zoek { margin: 0; }
.pl-zoek input { min-height: 42px; font-size: 15px; }
.pl-werflijst { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.pl-zonder-toevoeg { display: grid; gap: 10px; }
@media (max-width: 900px) {
  .pl-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .pl-toevoeg { grid-template-columns: 1fr; }
  .pl-toevoeg .knop { grid-column: 1 / -1; }
  .pl-persoon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; row-gap: 6px; padding: 10px 0; }
  .pl-persoon__naam { grid-column: 1 / -1; }
  .pl-select { min-height: 42px; }
  .pl-titel { font-size: 18px !important; }
  .pl-zicht .link { padding: 10px 0; }
  .pl-plak summary { padding: 10px 0; }
  .pl-vink { padding: 9px 0; }
}

/* ── Platform › Demo-gebruikers ──────────────────────────────────────────── */
.dl-chip-n { font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.dl-zoek { margin-top: 16px; max-width: 480px; }
.dl-zoek .veld { margin: 0; }
.dl-tabel td { white-space: normal; vertical-align: top; }
.dl-tabel td.eerste { min-width: 200px; }
.dl-tabel td.acties { vertical-align: top; padding-top: 6px; }
.dl-tabel .persoon { align-items: flex-start; }
.dl-tabel .persoon .avatar { margin-top: 2px; }
.dl-tabel .dl-mail { overflow-wrap: break-word; }
.dl-tabel .cel2 { gap: 2px; }
.dl-contact { display: flex; align-items: center; gap: 0; margin: -8px 0 -4px -10px; }
.dl-contact .knop--ikoon { color: var(--tekst); }
.dl-tel { white-space: nowrap; }
.dl-tel a { text-decoration: none; }
.dl-pil { width: fit-content; margin-top: 4px; }
.dl-pil svg { width: 12px; height: 12px; }
.dl-notitie { max-width: 240px; overflow-wrap: anywhere; }
.dl-tabel tr.is-open > td { border-bottom-color: transparent; }
.dl-tabel tr.dl-form-rij > td { height: auto; padding: 0 8px 16px; }
.dl-opvolg { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px 16px; align-items: start; background: var(--oppervlak-2); border-radius: var(--hoek-md); padding: 16px; }
.dl-opvolg .veld { margin: 0; }
.dl-opvolg textarea { min-height: 88px; }
.dl-opvolg__datum .link { justify-self: start; font-size: 14px; }
.dl-opvolg__knoppen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dl-opvolg__weg { margin-left: auto; font-size: 14px; }
@media (min-width: 641px) and (max-width: 1240px) {
  .dl-tabel .dl-kol--extra { display: none; }
}
@media (max-width: 640px) {
  .dl-zoek { max-width: none; }
  /* Elke demo-gebruiker een compact kaartje (zoals de bedrijven), het opvolgformulier er vlak onder. */
  table.dl-tabel tr:not(.dl-form-rij) { background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--hoek-md); padding: 12px 14px; margin-bottom: 8px; }
  table.dl-tabel tr:not(.dl-form-rij):first-child { padding-top: 12px; }
  table.dl-tabel tr:not(.dl-form-rij):last-child { margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid var(--rand); }
  table.dl-tabel tr.is-open { border-radius: var(--hoek-md) var(--hoek-md) 0 0; border-bottom-color: transparent; margin-bottom: 0; }
  table.dl-tabel tr.dl-form-rij { padding: 0; border: 0; margin-bottom: 8px; }
  table.dl-tabel td.dl-form-cel { display: block; padding: 0; text-align: left; }
  table.dl-tabel td.dl-form-cel::before { content: none; }
  .dl-opvolg { grid-template-columns: minmax(0, 1fr); border: 1px solid var(--rand); border-top: 0; border-radius: 0 0 var(--hoek-md) var(--hoek-md); }
  .dl-opvolg__weg { margin-left: 0; padding: 10px 0; }
  .dl-opvolg__datum .link { padding: 10px 0; }
  table.dl-tabel td { padding: 3px 0; align-items: flex-start; }
  table.dl-tabel td .cel2 { justify-items: end; }
  table.dl-tabel td.eerste .cel2 { justify-items: start; }
  table.dl-tabel .persoon .avatar { display: none; }
  .dl-contact { margin: -6px -10px -6px 0; justify-content: flex-end; }
  .dl-notitie { max-width: none; }
  table.dl-tabel td.acties { border-top: 1px solid var(--rand-zacht); margin-top: 8px; padding-top: 8px; }
}

/* ── Laden: skelet met de vorm van de pagina ─────────────────────────────── */
.skelet { display: grid; gap: 16px; }
.skelet__rij2 { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; }
.skelet__blok, .skelet__regel i, .skelet__regel span {
  border-radius: var(--hoek-lg); background: linear-gradient(90deg, var(--oppervlak-2) 0%, var(--rand) 40%, var(--oppervlak-2) 80%);
  background-size: 300% 100%; animation: glans 1.2s linear infinite; }
.skelet__kaart { background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--hoek-lg); padding: 24px; display: grid; gap: 14px; }
.skelet__regel { display: flex; align-items: center; gap: 12px; }
.skelet__regel i { width: 36px; height: 36px; border-radius: var(--hoek-sm); flex: none; }
.skelet__regel span { height: 14px; flex: 1; border-radius: 7px; max-width: 520px; }
.skelet__regel:nth-child(even) span { max-width: 380px; }
@keyframes glans { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@media (max-width: 640px) { .skelet__rij2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skelet__kaart { padding: 16px; } }

/* ── Beweging: enkel bij een paginawissel, nooit bij minder beweging ─────── */
@media (prefers-reduced-motion: no-preference) {
  /* Pagina binnenkomen: elk blok zacht omhoog, 40 ms na elkaar (hoogstens 6 stappen). */
  .pagina > .is-in { animation: binnen var(--t3) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .pagina > .wacht { opacity: 0; }
  @keyframes binnen { from { opacity: 0; transform: translateY(8px); } }
  /* De hero stond er al tijdens het laden: enkel de zin eronder ("Laden…" → wat er vandaag speelt) komt zacht binnen. */
  .cp-hero__zin--in { animation: zin-in var(--t3) var(--ease) both; }
  @keyframes zin-in { from { opacity: 0; } }
  /* Meters, trechter en staafjes groeien; lijnen tekenen zich van links naar rechts. */
  .is-in .meter i, .is-in .pf-trechter__balk i { animation: groei-x 600ms var(--ease) 120ms both; }
  @keyframes groei-x { from { transform: scaleX(0); } }
  .is-in .staaf, .is-in .spark__staaf { transform-box: fill-box; transform-origin: 50% 100%; animation: groei-y 600ms var(--ease) 120ms both; }
  @keyframes groei-y { from { transform: scaleY(0); } }
  .is-in .spark__lijn, .is-in .grafiek__lijn, .is-in .grafiek__vulling-vlak { animation: teken 700ms var(--ease) 120ms both; }
  @keyframes teken { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
  .is-in .spark__punt, .is-in .grafiek__punt, .is-in .grafiek__waarde { animation: verschijn 240ms ease 760ms both; }
  @keyframes verschijn { from { opacity: 0; } }
  /* Live-stip in de cockpit: zacht kloppend. */
  .cp-live { animation: live 2.4s ease-out infinite; }
  @keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255, 194, 14, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 194, 14, 0); } }
}
/* Hover-lift: enkel op klikbare blokken (tabelrijen krijgen enkel een achtergrond). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.tegel:hover, .pt-kaart:hover, .cp-snel__knop:hover { transform: translateY(-2px); }
  .pt-kaart:hover { box-shadow: var(--schaduw-hover); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
  .skelet__blok, .skelet__regel i, .skelet__regel span { animation: none; }
  .knop:active:not(:disabled) { transform: none; }
}