/* ==========================================================================
   vanAnaarWerk.nl — centraal stylesheet
   Enig CSS-bestand. Opbouw: fonts → tokens (laag 1/2/3) → reset → layout →
   secties → componenten → utilities → accessibility.
   Nooit hardcoded kleuren/spacing/fonts: altijd via token. BEM-naamgeving.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — zelf gehost. Plaats de .woff2-bestanden in static/fonts/.
   Zie static/fonts/README.md. Zonder bestanden valt de stack terug op system-ui.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/Inter-VariableFont.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Laag 1 — Primitives (nooit direct in componenten gebruiken)
   -------------------------------------------------------------------------- */
:root {
  --raw-zandwit: #F6F1E8;
  --raw-nachtblauw: #0E2A36;
  --raw-inkt: #14232B;
  --raw-koersteal: #176B5E;
  --raw-koper: #D9822B;
  --raw-leisteen: #53616A;
  --raw-mistgroen: #EAF3F1;

  --raw-teal-50: #EAF3F1;
  --raw-teal-100: #C5DDD8;
  --raw-teal-200: #9DC7BF;
  --raw-teal-500: #176B5E;
  --raw-teal-600: #125A4F;
  --raw-teal-700: #0D4A40;
  --raw-teal-800: #083A32;

  --raw-amber-50: #FFF5E6;
  --raw-amber-100: #FFE4B8;
  --raw-amber-500: #D9822B;
  --raw-amber-600: #BF7024;
  --raw-amber-700: #A05E1D;

  --raw-plum-100: #F3E8F0;
  --raw-plum-700: #7B2D5E;

  --raw-neutral-50: #F6F1E8;
  --raw-neutral-100: #EDE8DF;
  --raw-neutral-200: #D8D3CA;
  --raw-neutral-300: #B8B3AA;
  --raw-neutral-400: #53616A;
  --raw-neutral-500: #3A4750;
  --raw-neutral-600: #14232B;
  --raw-neutral-700: #0E2A36;

  --raw-success: #2E7D32;
  --raw-success-light: #E8F5E9;
  --raw-warning: #E65100;
  --raw-warning-light: #FFF3E0;
  --raw-error: #C62828;
  --raw-error-light: #FFEBEE;
  --raw-info: #1565C0;
  --raw-info-light: #E3F2FD;

  --raw-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --raw-font-mono: 'JetBrains Mono', monospace;
}

/* --------------------------------------------------------------------------
   Laag 2 — Semantisch (gebruik in componenten)
   -------------------------------------------------------------------------- */
:root {
  /* Vlakken */
  --color-bg-page: var(--raw-zandwit);
  --color-bg-card: #FFFFFF;
  --color-bg-alt: var(--raw-neutral-100);
  --color-bg-accent: var(--raw-mistgroen);
  --color-bg-overlay: rgba(14, 42, 54, 0.6);
  --color-bg-footer: var(--raw-nachtblauw);
  --color-bg-cta: var(--raw-nachtblauw);

  /* Tekst */
  --color-text-heading: var(--raw-nachtblauw);
  --color-text-primary: var(--raw-inkt);
  --color-text-secondary: var(--raw-leisteen);
  --color-text-muted: var(--raw-neutral-300);
  --color-text-inverse: #FFFFFF;
  --color-text-link: var(--raw-koersteal);

  /* Interactief */
  --color-primary: var(--raw-koersteal);
  --color-primary-hover: var(--raw-teal-600);
  --color-primary-active: var(--raw-teal-700);
  --color-primary-light: var(--raw-teal-50);
  --color-secondary: var(--raw-koper);
  --color-secondary-hover: var(--raw-amber-600);
  --color-secondary-active: var(--raw-amber-700);
  /* Koper voor tekst op lichte achtergrond — AA-veilig (~4.5:1 op zandwit);
     het felle --color-secondary haalt daar maar 2.6:1. Gebruik voor accenttekst. */
  --color-secondary-text: var(--raw-amber-700);

  /* Randen */
  --color-border: var(--raw-neutral-200);
  --color-border-strong: var(--raw-neutral-300);
  --color-border-focus: var(--raw-koersteal);

  /* Feedback */
  --color-success: var(--raw-success);
  --color-success-light: var(--raw-success-light);
  --color-warning: var(--raw-warning);
  --color-warning-light: var(--raw-warning-light);
  --color-error: var(--raw-error);
  --color-error-light: var(--raw-error-light);
  --color-info: var(--raw-info);
  --color-info-light: var(--raw-info-light);
  /* Gevoelig / bijzondere gegevens (chip) — apart van de accentkleur */
  --color-gevoelig: var(--raw-plum-700);
  --color-gevoelig-light: var(--raw-plum-100);

  /* Typografie */
  --font-sans: var(--raw-font-sans);
  --font-mono: var(--raw-font-mono);

  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.563rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --text-4xl: 3.815rem;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  --tracking-dense: -0.015em;
  --tracking-normal: 0;
  --tracking-loose: 0.05em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --measure: 65ch;

  /* Ruimte (4px-basis) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Indeling */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-padding: 1.5rem;

  /* Randen & radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* Schaduwen */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* Transities */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(23, 107, 94, 0.4);
}

@media (max-width: 479px) {
  :root { --container-padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* --------------------------------------------------------------------------
   Laag 3 — Component tokens
   -------------------------------------------------------------------------- */
:root {
  /* Knoppen */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-bg-hover: var(--color-primary-hover);
  --btn-primary-bg-active: var(--color-primary-active);
  --btn-primary-text: var(--color-text-inverse);
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--color-primary);
  --btn-secondary-text: var(--color-primary);
  --btn-accent-bg: var(--color-secondary);
  --btn-accent-bg-hover: var(--color-secondary-hover);
  --btn-accent-text: var(--color-text-inverse);
  --btn-padding-sm: var(--space-sm) var(--space-md);
  --btn-padding-md: var(--space-sm) var(--space-lg);
  --btn-padding-lg: var(--space-md) var(--space-xl);

  /* Kaarten */
  --card-bg: var(--color-bg-card);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-lg);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);

  /* Navbar */
  --navbar-bg: var(--color-bg-page);
  --navbar-height: 72px;
  --navbar-height-mobile: 64px;
}

/* --------------------------------------------------------------------------
   Reset & basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, svg { max-width: 100%; display: block; }

a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-dense);
  font-weight: var(--weight-bold);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { line-height: var(--leading-relaxed); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   Indeling — container & main
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow { max-width: var(--container-narrow); }

main { flex: 1 0 auto; }

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -3rem;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--easing);
}
.skip-link:focus { top: var(--space-sm); }

/* --------------------------------------------------------------------------
   Secties
   -------------------------------------------------------------------------- */
.section { padding-block: var(--space-3xl); }
.section--white { background-color: var(--color-bg-card); }
.section--alt { background-color: var(--color-bg-alt); }

/* Anker-offset: bij sprongen naar #anchor landt de sectietop net onder de
   sticky navbar (anders bedekt die de titel). Geldt voor alle ankerdoelen. */
.section,
.cta-block { scroll-margin-top: var(--navbar-height); }

.section__header {
  max-width: var(--measure);
  margin-bottom: var(--space-2xl);
}
.section__header--center {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}
.section__title { margin-bottom: var(--space-sm); }
.section__intro { color: var(--color-text-secondary); font-size: var(--text-md); }

.text-section { padding-block: var(--space-3xl); }
.text-section .container { max-width: var(--container-narrow); }
.text-section p { max-width: var(--measure); margin-bottom: var(--space-md); }

/* Hero */
.hero {
  padding-block: var(--space-4xl);
  background-color: var(--color-bg-page);
}
.hero__inner { max-width: var(--measure); }
.hero__title { font-size: var(--text-4xl); margin-bottom: var(--space-lg); }
.hero__subtitle {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.hero--compact { padding-block: var(--space-3xl); }
.hero--compact .hero__title { font-size: var(--text-2xl); }

/* Hero met foto (homepage). Mobiel: tekst boven, foto eronder.
   Desktop: tekst links, foto full-bleed rechts met zachte fade (zie media query). */
.hero--image { padding-block: 0; }
.hero--image .hero__content { padding-block: var(--space-3xl); }
.hero__eyebrow {
  color: var(--color-secondary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  margin-bottom: var(--space-md);
}
.hero--image .hero__title {
  font-size: var(--text-3xl);
  max-width: 20ch;
  margin-bottom: var(--space-lg);
}
.hero__lead {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  max-width: 48ch;
  margin-bottom: var(--space-xl);
}
.hero__media { line-height: 0; }
/* De beeld-macro (components/_beeld.html) wikkelt de img in een <picture>; die moet
   de hoogte van de kolom doorgeven, anders lost height:100% op de img op in niets. */
.hero__media picture { display: block; height: 100%; }
/* Mobiel toont de 4:5-portretcrop (personen centraal, art direction in de template);
   op desktop (≥1024px) rekt de brede compositie mee met de overlay-layout. */
.hero__img {
  width: 100%;
  /* height:auto verslaat de width/height-attribuut-hint — anders wint die van de
     aspect-ratio en rekt het beeld naar de attribuut-hoogte (de oude mobiel-bug). */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Beeld-band: redactioneel sfeerbeeld tussen secties (registry + beeld-macro,
   vorm='vierkant'). Bescheiden breedte zodat het beeld de tekst dient. */
.beeld-band { padding-block: var(--space-2xl); }
.beeld-band__inner {
  max-width: 560px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  line-height: 0;
}
.beeld-band__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
/* Scroll-hint onderaan de hero */
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.hero__scroll:hover { color: var(--color-primary); text-decoration: none; }
.hero__scroll-icon {
  display: inline-flex;
  color: var(--color-primary);
  animation: hero-bounce 1.8s var(--easing) infinite;
}
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-icon { animation: none; }
}

/* CTA-blok (donker) */
.cta-block {
  background-color: var(--color-bg-cta);
  color: var(--color-text-inverse);
  padding-block: var(--space-4xl);
  text-align: center;
}
.cta-block__icon {
  display: inline-flex;
  color: var(--color-secondary);
  margin-bottom: var(--space-md);
}
.cta-block__title { color: var(--color-text-inverse); margin-bottom: var(--space-md); }
.cta-block__text {
  color: var(--color-text-inverse);
  opacity: 0.9;
  max-width: var(--measure);
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Component: button
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--btn-padding-md);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing),
              color var(--duration-fast) var(--easing);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn--lg { padding: var(--btn-padding-lg); font-size: var(--text-md); }

.btn--primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn--primary:hover { background-color: var(--btn-primary-bg-hover); }
.btn--primary:active { background-color: var(--btn-primary-bg-active); }

.btn--secondary {
  background-color: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}
.btn--secondary:hover { background-color: var(--color-primary-light); }

.btn--accent { background-color: var(--btn-accent-bg); color: var(--btn-accent-text); }
.btn--accent:hover { background-color: var(--btn-accent-bg-hover); }

.btn--ghost { background-color: transparent; color: var(--color-text-inverse);
  border-color: var(--color-text-inverse); }
.btn--ghost:hover { background-color: rgba(255, 255, 255, 0.12); }
/* Gevaarlijke actie (verwijderen): terughoudend vlak, duidelijk error-accent. */
.btn--gevaar { background-color: transparent; color: var(--color-error);
  border-color: var(--color-error); }
.btn--gevaar:hover { background-color: var(--color-error-light); }

/* --------------------------------------------------------------------------
   Component: card & grid
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

.card {
  background-color: var(--card-bg);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--duration-base) var(--easing),
              transform var(--duration-base) var(--easing);
}
.card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
/* Hele kaart als link */
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover { text-decoration: none; }
/* Statisch kaart-paneel (geen hover-lift) — bijv. formulier/aside */
.card--static:hover { transform: none; box-shadow: var(--card-shadow); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.card__icon--primary { background-color: var(--color-bg-accent); color: var(--color-primary); }
.card__icon--accent { background-color: var(--color-bg-accent); color: var(--color-secondary); }
.card__icon--muted { background-color: var(--color-bg-alt); color: var(--color-text-secondary); }
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.card__text { color: var(--color-text-secondary); }
/* Lijst met situatie-vragen/punten binnen een doelgroepkaart */
.card__list {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: var(--space-xs);
}
.card__list li {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.card__list li::marker { color: var(--color-primary); }
.card--accent { border-color: var(--color-primary); }

/* Doelgroep-situatiekaarten (5 op een rij): compact + gelijke hoogte.
   Kleinere titel + iets minder padding/gap → meer ruimte voor de vragen. */
.card-grid--5 { gap: var(--space-md); align-items: stretch; }
.card-grid--5 .card { padding: var(--space-md); }
.card-grid--5 .card__title { font-size: var(--text-md); }
/* "Bekijk ›"-aanwijzer op klikbare kaarten (situatie-overzicht) */
.card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

/* Kruimelpad (breadcrumb) bovenaan detailpagina's */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-top: var(--space-lg);
}
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-text-heading); }

/* Veelgestelde vragen (situatiepagina) */
.faq { display: grid; gap: var(--space-lg); }
.faq__vraag { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.faq__antwoord { color: var(--color-text-secondary); }
/* In-context bewerk-link (alleen zichtbaar voor ingelogde beheerders) */
.faq__bewerk { display: inline-block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-primary); }

/* FAQ-hub: index per onderwerp (links naar de domeinpagina's) */
.faq-index { display: grid; gap: var(--space-xl); }
.faq-index__titel { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.faq-index__lijst { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.faq-index__lijst a { color: var(--color-text-secondary); }
.faq-index__lijst a:hover { color: var(--color-primary); }

/* Kwaliteitsbelofte — koperen lint + trage auto-carrousel (3 zichtbaar, schuift links).
   LET OP: de auto-beweging WIJKT AF van stijlgids §10 ("geen sliders"). Bewust traag,
   pauzeert bij hover/focus en staat stil bij prefers-reduced-motion. Te overleggen met
   Erik (zie docs/todo.md). Lijnkleur in één variabele: koper nu, groen = var(--color-primary). */
.kwaliteit { --belofte-accent: var(--color-secondary); }
.kwaliteit__lint {
  width: 100%;
  height: 3px;
  background-color: var(--belofte-accent);
  margin-bottom: var(--space-xl);
}
.beloftes-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.beloftes-track {
  display: flex;
  width: max-content;
  animation: belofte-marquee 45s linear infinite;
}
.beloftes-carousel:hover .beloftes-track,
.beloftes-carousel:focus-within .beloftes-track { animation-play-state: paused; }
.belofte {
  flex: 0 0 320px;
  margin-right: var(--space-lg);
  padding: var(--space-lg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-page);
}
.belofte__title {
  font-size: var(--text-md);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}
.belofte__text { color: var(--color-text-secondary); }

/* Merkzin — statement-band met bewuste nadruk (mistgroen + koper accent) */
.statement {
  background-color: var(--color-bg-accent);
  padding-block: var(--space-3xl);
  text-align: center;
}
.statement__rule {
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto var(--space-lg);
  background-color: var(--color-secondary);
}
.statement__text {
  max-width: 46ch;
  margin-inline: auto;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
}

/* AI-blok — concreet "AI helpt bij" + callout dat de mens beslist */
.ai__lead {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  margin-bottom: var(--space-lg);
}
.ai__list {
  list-style: none;
  padding: 0;
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm) var(--space-2xl);
}
.ai__list li { position: relative; padding-left: var(--space-lg); }
.ai__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}
.ai__callout {
  max-width: var(--measure);
  margin: var(--space-xl) auto 0;
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-bg-accent);
  border-radius: var(--radius-lg);
}
@keyframes belofte-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .beloftes-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .belofte--dup { display: none; }
  .belofte { margin-right: 0; margin-bottom: var(--space-lg); }
}

/* Domain-card: teal linkerborder op zandwit, licht op bij hover */
.domain-card {
  background-color: var(--color-bg-page);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--card-radius);
  padding: var(--space-xl);
  transition: background-color var(--duration-base) var(--easing);
}
.domain-card:hover { background-color: var(--color-bg-accent); }
/* Klikbare domeinkaart (homepage → /diensten/<slug>) */
.domain-card--link { display: block; color: inherit; text-decoration: none; }
.domain-card--link:hover { text-decoration: none; }
.domain-card__title { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.domain-card__text { color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Component: route-steps (zes stappen)
   -------------------------------------------------------------------------- */
.route {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
.route__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.route__marker {
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
}
.route__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-page);
  color: var(--color-primary);
}
.route__num {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.route__title { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.route__text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  max-width: 30ch;
  margin-inline: auto;
}

/* Scroll-reveal — subtiel verschijnen. Alleen actief met JS; zonder JS of bij
   prefers-reduced-motion blijft alles direct zichtbaar (geen lege pagina). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--easing),
              transform var(--duration-slow) var(--easing);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.route__step:nth-child(2) { transition-delay: 80ms; }
.route__step:nth-child(3) { transition-delay: 160ms; }
.route__step:nth-child(4) { transition-delay: 240ms; }
.route__step:nth-child(5) { transition-delay: 320ms; }
.route__step:nth-child(6) { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Component: media-text, fotoplaceholder, prose & contactlijst (o.a. Over ons)
   -------------------------------------------------------------------------- */
.media-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.media-placeholder {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  background-color: var(--color-bg-accent);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

/* Lopende tekst: nette verticale ritmiek tussen blokken */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-md); }

/* Twee gelijke tekstkolommen (bijv. Missie & Visie) */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* Twee kolommen 3:2 (bijv. contact: formulier breder, gegevens smaller) */
.cols-3-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* Geaccentueerde formule-regel (bijv. "AI + vakkennis + ...") */
.formula {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
}

/* Waarden-grid (kernwaarden): kaarten met icoontegel */
.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* "Wat we niet zijn": korte uitsluitingen met koper kruisje */
.nots {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.nots__item {
  position: relative;
  padding-left: var(--space-xl);
  color: var(--color-text-secondary);
}
.nots__item::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  color: var(--color-secondary);
  font-weight: var(--weight-bold);
}

/* Team — personen (foto + naam + rol + eigen tekst) */
.team {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
.person .media-placeholder { margin-bottom: var(--space-md); }
.person__name { font-size: var(--text-lg); margin-bottom: 2px; }
.person__role {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-sm);
}
.person__bio { color: var(--color-text-secondary); }

/* Contactgegevens */
.contact-list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.contact-list__item { display: flex; align-items: center; gap: var(--space-sm); }
.contact-list__icon { display: inline-flex; color: var(--color-primary); }

/* Formulier (herbruikbaar; functionaliteit volgt later) */
.form { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.field { display: grid; gap: var(--space-xs); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field__input,
.field__textarea,
.field__select {
  width: 100%;
  font: inherit;
  color: var(--color-text-primary);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.field__input:focus-visible,
.field__textarea:focus-visible,
.field__select:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--focus-ring);
}
.field__textarea { min-height: 8rem; resize: vertical; }
.field__select { min-height: 44px; cursor: pointer; }
/* Hulptekst + foutmelding onder een veld */
.field__hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.field__error { margin: 0; font-size: var(--text-sm); color: var(--color-error); }

/* Beheer: snel-bewerk-scherm — ruim antwoordveld */
.form--edit .field__textarea { min-height: 14rem; line-height: var(--leading-normal); }

/* Verticale stapel met ruime tussenruimte (bijv. kolomblokken) */
.stack { display: grid; gap: var(--space-xl); }

/* AVG-regel onder het contactformulier */
.avg-note {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-2xl);
}

/* --------------------------------------------------------------------------
   Component: usp
   -------------------------------------------------------------------------- */
.usp-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
.usp { display: flex; gap: var(--space-md); align-items: flex-start; }
.usp__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-primary);
  background-color: var(--color-bg-accent);
  border-radius: var(--radius-md);
}
.usp__title { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.usp__text { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   Component: domeinpagina (rijke blauwdruk — zie pages/domeinen/domein.html)
   Hergebruikt grotendeels bestaande componenten (hero, statement, route, card,
   ai-callout, faq, cta-block). Hieronder alleen de domein-specifieke aanvullingen.
   -------------------------------------------------------------------------- */

/* Statement-band met ondersteunende paragraaf (kernbelofte) */
.statement__body {
  max-width: 54ch;
  margin: var(--space-md) auto 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Herkenning: "Meer situaties"-uitklap (native <details>, geen JS) */
.situaties-meer { margin-top: var(--space-xl); text-align: center; }
.situaties-meer__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  list-style: none;
}
.situaties-meer__toggle::-webkit-details-marker { display: none; }
.situaties-meer__grid { margin-top: var(--space-lg); text-align: left; }

/* Diensten: type-badge + gelabelde lijstgroepen binnen een kaart */
.dienst__type {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-bg-accent);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  border-radius: var(--radius-sm);
}
.dienst__group { margin-top: var(--space-md); }
.dienst__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}

/* Voor wie / niet: "minder goed"-lijst met koper marker */
.card__list--no li::marker { color: var(--color-secondary); }

/* Generieke tekstsectie: opsomming met teal stip (scope, rolzuiverheid, MKB, ...) */
.checklist {
  list-style: none;
  padding: 0;
  max-width: var(--measure);
  margin-inline: auto;
  display: grid;
  gap: var(--space-sm);
}
.checklist li { position: relative; padding-left: var(--space-lg); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

/* Kleine toelichting onder een dienstkaart (bv. "Betaling: via UWV") */
.dienst__note {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Kleine regel onder de hero-CTA's (bv. "Met AI waar het helpt...") */
.hero__note {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Component: navbar
   -------------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--navbar-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}
.navbar__inner {
  height: var(--navbar-height-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.navbar__brand {
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--color-text-heading);
}
.navbar__brand:hover { text-decoration: none; }

/* Logo — beeldmerk (kompas-SVG) + woordmerk, swap-baar via brand.LOGO_VARIANT. */
.logo { display: inline-flex; align-items: center; gap: var(--space-sm); }
.logo__mark { height: 2rem; width: auto; }
.logo__full { display: block; height: 40px; width: auto; }

/* Woordmerk — centraal, gerenderd via components/_brand.html. Kleuren via tokens.
   Licht: van/naar nachtblauw, A + Werk koersteal, .nl leisteen. Donker: alles wit. */
.wordmark { font-weight: var(--weight-bold); color: var(--color-text-heading); }
.wordmark__accent { color: var(--color-primary); }
.wordmark__tld { color: var(--color-text-secondary); font-weight: var(--weight-regular); }
.wordmark--inverse,
.wordmark--inverse .wordmark__accent,
.wordmark--inverse .wordmark__tld { color: var(--color-text-inverse); }

.navbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--color-text-heading);
  cursor: pointer;
}
.navbar__menu { display: none; }
.navbar__menu[data-open="true"] {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset-inline: 0;
  top: var(--navbar-height-mobile);
  background-color: var(--navbar-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-md) var(--container-padding);
  gap: var(--space-md);
}
.navbar__link { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.navbar__link:hover { color: var(--color-primary); text-decoration: none; }
.navbar__cta { margin-top: var(--space-sm); }

/* Ingelogd: 'Uitloggen' is een button maar oogt als een navbar-link. */
.navbar__logout { margin: 0; }
.navbar__logout-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.navbar__logout-btn:hover { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Component: footer
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--color-bg-footer);
  color: var(--color-text-inverse);
  padding-block: var(--space-3xl);
  margin-top: var(--space-4xl);
}
.footer__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
.footer__wordmark {
  font-size: var(--text-md);
  margin-bottom: var(--space-md);
}
.footer__blurb {
  color: var(--color-text-inverse);
  opacity: 0.8;
  font-size: var(--text-sm);
  max-width: 32ch;
  line-height: var(--leading-relaxed);
}
.footer__heading {
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  margin-bottom: var(--space-md);
}
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.footer__link { color: var(--color-text-inverse); opacity: 0.85; }
.footer__link:hover { color: var(--raw-teal-200); opacity: 1; }
.footer__muted { color: var(--color-text-inverse); opacity: 0.6; font-size: var(--text-sm); }
.footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.15);
  font-size: var(--text-sm);
  opacity: 0.75;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   Component: flash-meldingen
   -------------------------------------------------------------------------- */
.flash-list { display: grid; gap: var(--space-sm); padding-block: var(--space-md); }
.flash {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  font-size: var(--text-sm);
  transition: opacity var(--duration-base) ease;
}
/* Succes/info-flashes faden na 5s uit (JS zet de klasse; zie main.js). */
.flash--verdwenen { opacity: 0; }
.flash--error { background-color: var(--color-error-light); border-color: var(--color-error); color: var(--color-error); }
.flash--warning { background-color: var(--color-warning-light); border-color: var(--color-warning); color: var(--color-warning); }
.flash--success { background-color: var(--color-success-light); border-color: var(--color-success); color: var(--color-success); }
.flash--info { background-color: var(--color-info-light); border-color: var(--color-info); color: var(--color-info); }

/* --------------------------------------------------------------------------
   Hulpklassen
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Component: admin-shell (beheer-dashboard met zijbalk) — zie docs/beheer.md
   -------------------------------------------------------------------------- */
.admin-shell { display: flex; flex-direction: column; gap: var(--space-lg); }
.admin-shell__inhoud { flex: 1 1 auto; min-width: 0; }

/* Pagina's binnen de shell brengen hun eigen section/container niet nóg eens in beeld. */
.admin-shell__inhoud .section { padding: 0; }
.admin-shell__inhoud .container { max-width: none; padding: 0; margin: 0; }

@media (min-width: 900px) {
  .admin-shell { flex-direction: row; align-items: flex-start; }
  .admin-shell__zijbalk { flex: 0 0 13.75rem; position: sticky; top: var(--space-lg); }
}

/* Zijbalk-navigatie (uit de navigatie-registry) */
.admin-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}
.admin-nav__home { font-weight: var(--weight-bold); color: var(--color-text-heading); text-decoration: none; }
.admin-nav__groep { display: flex; flex-direction: column; gap: var(--space-xs); }
.admin-nav__groep-titel {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  color: var(--color-text-secondary);
}
.admin-nav__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.admin-nav__link { color: var(--color-text-link); text-decoration: none; }
.admin-nav__link:hover { text-decoration: underline; }

/* Dashboard-tegels */
.admin-dashboard__welkom { margin-top: var(--space-xs); color: var(--color-text-secondary); }
.admin-dashboard__sectie { margin-top: var(--space-xl); }
.admin-dashboard__groep { margin-bottom: var(--space-md); font-size: var(--text-lg); }
.admin-dashboard__tegels {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.admin-tegel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--easing),
              box-shadow var(--duration-fast) var(--easing);
}
.admin-tegel:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.admin-tegel__label { font-weight: var(--weight-bold); color: var(--color-text-heading); }
.admin-tegel__beschrijving { font-size: var(--text-sm); color: var(--color-text-secondary); }
/* Placeholder-tegel: nog niet beschikbaar (geen link, gedempt, geen hover-effect) */
.admin-tegel--placeholder { opacity: 0.6; }
.admin-tegel--placeholder:hover { border-color: var(--color-border); box-shadow: none; }

/* --------------------------------------------------------------------------
   Component: accordion — hét herbruikbare uitklapblok (details/summary, geen JS)
   Balk = titel + korte omschrijving + chevron; inhoud klapt eronder open.
   Eén component voor rollen, handboek en alles wat nog groeit (zie stijlgids).
   -------------------------------------------------------------------------- */
.accordion-lijst { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.accordion {
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.accordion__kop {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer; list-style: none;
  border-radius: var(--radius-md);
}
.accordion__kop::-webkit-details-marker { display: none; }
.accordion__kop:hover { background-color: var(--color-bg-alt); }
.accordion__tekst { flex: 1; min-width: 0; display: grid; gap: var(--space-xs); }
.accordion__titel { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-medium); }
.accordion__kort { font-size: var(--text-sm); color: var(--color-text-secondary); }
.accordion__pijl {
  flex-shrink: 0; display: inline-flex; color: var(--color-text-secondary);
  transition: transform var(--duration-base) var(--easing);
}
.accordion[open] > .accordion__kop .accordion__pijl { transform: rotate(180deg); }
.accordion__inhoud { padding: var(--space-xs) var(--space-lg) var(--space-lg); }

/* --------------------------------------------------------------------------
   Component: beheer-kop — paginakop in het beheer (terug-link + primaire actie)
   Houdt link en knop netjes uit elkaar i.p.v. aan elkaar geplakt in een <p>.
   -------------------------------------------------------------------------- */
.beheer-kop {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
  margin: var(--space-sm) 0 var(--space-lg);
}

/* --------------------------------------------------------------------------
   Component: rollen & rechten — rechten-formulier binnen een accordion
   -------------------------------------------------------------------------- */
.rolkaart { display: grid; gap: var(--space-md); }
.badge {
  display: inline-block; vertical-align: middle;
  padding: 0.1em 0.6em;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-full);
}
.recht-lijst { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.recht { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-md); }
.recht > .toggle { margin-top: var(--space-sm); }
.recht__info { min-width: 0; }
.recht__samenvatting {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
}
.recht__samenvatting::-webkit-details-marker { display: none; }
.recht__samenvatting:hover { background-color: var(--color-bg-alt); }
.recht__tekst { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.recht__label { font-weight: var(--weight-medium); }
.recht__kort { font-size: var(--text-sm); color: var(--color-text-secondary); }
.recht__code { font-family: monospace; font-size: var(--text-xs); color: var(--color-text-secondary); }
.uitleg { display: inline-flex; flex-shrink: 0; color: var(--color-text-secondary); }
.recht__info[open] .uitleg { color: var(--color-primary); }
.recht__uitleg {
  margin: var(--space-xs) var(--space-sm) var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-xs);
}
.recht__uitleg p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }

/* --------------------------------------------------------------------------
   Component: beheer-tabel (content-overzicht) + status-badge
   -------------------------------------------------------------------------- */
.content-groep__titel { margin-top: var(--space-xl); font-size: var(--text-lg); }
.content-groep__intro { max-width: 65ch; color: var(--color-text-secondary); }
.handboek-lijst { max-width: 65ch; line-height: var(--leading-relaxed); display: grid; gap: var(--space-xs); }
/* Handboek-naslag: subkopjes + begrippenlijst (term → betekenis) binnen een accordion. */
.handboek-kop { margin: var(--space-md) 0 var(--space-xs); font-size: var(--text-base); }
.handboek-tekst { max-width: 65ch; margin: 0 0 var(--space-sm); line-height: var(--leading-relaxed); }
.handboek-begrippen { margin: 0; display: grid; gap: var(--space-xs); }
.handboek-begrippen__rij {
  display: grid; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}
.handboek-begrippen dt { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.handboek-begrippen dd { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 65ch; line-height: var(--leading-normal); }
@media (min-width: 640px) {
  /* Vaste termkolom: alle rijen lijnen uit (auto zou per rij verschillen — rommelig). */
  .handboek-begrippen__rij { grid-template-columns: 15rem 1fr; gap: var(--space-md); align-items: start; }
}

/* Meldingen (Elo Spoor 1) */
.melding-lijst { display: grid; gap: var(--space-md); margin-top: var(--space-sm); }
.melding {
  display: grid; gap: var(--space-xs);
  padding: var(--space-md);
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.melding__kop { display: flex; align-items: center; gap: var(--space-sm); }
.melding__meta { font-size: var(--text-sm); color: var(--color-text-secondary); }
.melding__tekst { margin: 0; }
.melding__pagina { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); word-break: break-all; }
.melding__afgehandeld { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.melding__notitie { margin: 0; font-size: var(--text-sm); }
.melding__acties { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); align-items: flex-start; }
.melding__afhandel { display: flex; gap: var(--space-sm); flex: 1 1 16rem; align-items: flex-start; }
.melding__afhandel .field__textarea { flex: 1; }

/* Auditlog: inklapbare regels die laten zien wát er veranderde (oud -> nieuw) */
.audit-lijst { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.audit-rij { border-bottom: var(--border-width) solid var(--color-border); }
.audit-rij__kop { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline; padding: var(--space-sm) 0; cursor: pointer; list-style: none; }
.audit-rij__kop::-webkit-details-marker { display: none; }
.audit-rij__kop:hover { color: var(--color-primary); }
.audit-rij__actie { font-weight: var(--weight-medium); }
.audit-rij__meta { font-size: var(--text-sm); color: var(--color-text-secondary); }
.audit-rij__details { display: grid; gap: var(--space-xs); padding: 0 0 var(--space-sm) var(--space-md); }
.audit-detail { margin: 0; font-size: var(--text-sm); }
.audit-detail--uitleg { color: var(--color-text-secondary); max-width: 65ch; }
/* Technische traceer-regel (event-code + doel-id) — klein en monospace, onderaan. */
.audit-rij__code { margin: 0; font-family: monospace; font-size: var(--text-xs); color: var(--color-text-secondary); word-break: break-all; }
.audit-diff { display: grid; gap: 0.1rem; padding: var(--space-sm); background-color: var(--color-bg-alt); border-radius: var(--radius-md); }
.audit-diff__veld { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.audit-diff__oud { margin: 0; font-size: var(--text-sm); color: var(--color-error); text-decoration: line-through; }
.audit-diff__nieuw { margin: 0; font-size: var(--text-sm); color: var(--color-primary); }

/* Controle-voortgang + 'definitief maken' (review-pass) */
.content-voortgang { display: inline-block; margin: 0 0 var(--space-sm); padding: var(--space-xs) var(--space-sm); background-color: var(--color-bg-alt); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-secondary); }
.definitief-actie { margin-top: var(--space-md); }
.definitief-status { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-text-secondary); }

.beheer-tabel { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); }
.beheer-tabel th,
.beheer-tabel td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-width) solid var(--color-border);
}
.beheer-tabel th { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.beheer-tabel tbody tr:hover { background-color: var(--color-bg-alt); }
.beheer-stats { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; margin: var(--space-sm) 0 var(--space-md); padding: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.tabel-actie { display: inline-flex; color: var(--color-primary); }

/* In-context potlood per paginasectie (alleen zichtbaar voor beheerders met bewerkrecht) */
.sectie-potlood { display: inline-flex; align-items: center; margin-left: var(--space-sm); color: var(--color-text-secondary); vertical-align: middle; }
.sectie-potlood:hover { color: var(--color-primary); }
.sectie-potlood-blok { margin: 0 0 var(--space-sm); font-size: var(--text-sm); }

/* Onderdelen-index in het sectie-bewerkscherm (per kaart apart bewerken) */
.sectie-kaarten { list-style: none; margin: var(--space-sm) 0 var(--space-lg); padding: 0; }
.sectie-kaart {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) 0; border-bottom: var(--border-width) solid var(--color-border);
}
.sectie-kaart__titel { min-width: 0; }

/* Elo — in-context melder (zwevend, alleen voor ingelogde beheerders) */
.elo { position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-sm); }
.elo__panel { width: min(20rem, calc(100vw - 2 * var(--space-md))); text-align: left; }
.elo__titel { margin: 0 0 var(--space-sm); font-weight: var(--weight-medium); }
.elo__pagina { margin: var(--space-xs) 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-text-secondary); word-break: break-all; }
.elo__status { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); min-height: 1.2em; }

/* Vast (naam/koppeling) veld in het bewerkscherm: grijs, niet te wijzigen */
.field--vast .field__input,
.field--vast .field__textarea {
  background-color: var(--color-bg-alt);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

/* Content-overzicht: inklapbare items (klik titel -> antwoord) */
.content-lijst { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.content-rij {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.content-rij__info { min-width: 0; }
.content-rij__titel { display: flex; align-items: center; gap: var(--space-xs); cursor: pointer; list-style: none; }
.content-rij__titel::-webkit-details-marker { display: none; }
.content-rij__titel:hover { color: var(--color-primary); }
.content-rij__titel svg { flex-shrink: 0; transition: transform var(--duration-fast); }
.content-rij__info[open] .content-rij__titel svg { transform: rotate(180deg); }
.content-rij__antwoord {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
/* Status-badge hergebruikt .badge; 'goedgekeurd'/'actief' krijgen de teal-accent */
.badge--goedgekeurd,
.badge--actief,
.badge--definitief { background-color: var(--color-bg-accent); color: var(--color-primary); }

/* Toegangsstatus op de gebruikerskaart: uitgenodigd = onderweg (warning-tint),
   verlopen = actie nodig (error-tint); gedeactiveerd/geen toegang blijven neutraal. */
.badge--uitgenodigd { background-color: var(--color-warning-light); color: var(--color-warning); }
.badge--verlopen { background-color: var(--color-error-light); color: var(--color-error); }

/* --------------------------------------------------------------------------
   Component: uitnodiging versturen — preview-vóór-versturen van de mail
   -------------------------------------------------------------------------- */
.uitnodiging-kop { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); }
.uitnodiging-kop__regel { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.mail-voorbeeld {
  width: 100%;
  height: 60vh;
  background-color: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
/* Verstuur-acties onder het voorbeeld: toggle op een eigen regel, knoppen netjes naast
   elkaar (niet opgerekt/gedrukt), met lucht eromheen. */
.mail-verstuur__tab { margin: var(--space-sm) 0 0; }
.mail-verstuur { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.mail-verstuur__meelezen { align-items: center; gap: var(--space-sm); }
.mail-verstuur__knoppen { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
/* Sjabloon-beheer: test-versturen + definitief onder het voorbeeld. */
.sjabloon-acties { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: var(--space-md); }
.sjabloon-test { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.sjabloon-test .field__input { width: auto; min-width: 14rem; }

/* --------------------------------------------------------------------------
   Component: gebruikers — kaarten per rol
   -------------------------------------------------------------------------- */
.gebruiker-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  margin-top: var(--space-sm);
}
.gebruiker-kaart {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.gebruiker-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.gebruiker-kaart__naam { font-weight: var(--weight-medium); }
.gebruiker-kaart__rol { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.gebruiker-kaart__email { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); word-break: break-all; }
.gebruiker-kaart__beschermd {
  margin: 0; display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.gebruiker-kaart__acties { display: grid; gap: var(--space-sm); }
.gebruiker-kaart__rij { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
/* Mailbox-toewijzing (op de Mailboxen-pagina) — schuifjes (toggle-component) + opslaan. */
.mailbox-keuze__opties { display: grid; gap: var(--space-sm); }
.mailbox-keuze__optie { align-items: center; gap: var(--space-sm); cursor: pointer; }
.mailbox-keuze__naam { font-size: var(--text-sm); }
/* Postbus-beheer per box: toegang-blok + handtekening-blok onder elkaar. */
.mailbox-box { display: grid; gap: var(--space-lg); justify-items: start; }
.mailbox-box__blok { display: grid; gap: var(--space-sm); width: 100%; }
.mailbox-box__kop { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.gebruiker-kaart__rolform { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.gebruiker-kaart__rolform .field__select { flex: 1; min-width: 8rem; }
/* Naam wijzigen: veld + knop op één rij (knop lijnt met de invoer, niet met het label). */
.gebruiker-kaart__naamform { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: end; }
.gebruiker-kaart__naamform .field { flex: 1; min-width: 8rem; }

/* Toggle-schakelaar (herbruikbaar): toegankelijke checkbox getoond als schuifknop */
.toggle { position: relative; display: inline-flex; }
.toggle__input { position: absolute; width: 0; height: 0; opacity: 0; }
.toggle__track {
  position: relative; flex-shrink: 0;
  width: 2.5rem; height: 1.4rem;
  background-color: var(--color-border-strong);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-base);
}
.toggle__track::after {
  content: ""; position: absolute; top: 0.2rem; left: 0.2rem;
  width: 1rem; height: 1rem;
  background-color: var(--color-bg-card);
  border-radius: var(--radius-full);
  transition: transform var(--duration-base);
}
.toggle__input:checked + .toggle__track { background-color: var(--color-primary); }
.toggle__input:checked + .toggle__track::after { transform: translateX(1.1rem); }
.toggle__input:focus-visible + .toggle__track { box-shadow: var(--focus-ring); }

/* --------------------------------------------------------------------------
   Responsief — tablet (>=768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .navbar__inner { height: var(--navbar-height); }
  .navbar__toggle { display: none; }
  .navbar__menu,
  .navbar__menu[data-open="true"] {
    display: flex;
    flex-direction: row;
    position: static;
    align-items: center;
    border: none;
    padding: 0;
    gap: var(--space-lg);
    background: none;
  }
  .navbar__cta { margin-top: 0; }

  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .ai__list { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }

  /* Route op tablet: twee per rij */
  .route { grid-template-columns: repeat(2, 1fr); }

  /* Foto naast tekst + twee kolommen + team (Over ons) */
  .media-text { grid-template-columns: 1fr 1fr; }
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cols-3-2 { grid-template-columns: 3fr 2fr; align-items: start; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .nots { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Responsief — desktop (>=1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .card-grid--5 { grid-template-columns: repeat(5, 1fr); }
  /* Route op desktop: drie per rij → twee rijen van drie */
  .route { grid-template-columns: repeat(3, 1fr); }
  /* Kernwaarden op desktop: drie per rij (5 stuks → 3 + 2) */
  .values { grid-template-columns: repeat(3, 1fr); }

  /* Hero met foto op desktop: tekst links, foto full-bleed rechts.
     De foto vult de volle hoogte van de hero (= hoogte van de tekst) en valt
     links zacht weg in de zandwit (mask). Geen min-height: sectiehoogte volgt
     de tekst, zodat foto en tekst symmetrisch uitlijnen. */
  .hero--image { position: relative; overflow: hidden; }
  .hero--image .hero__content {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-block: var(--space-4xl);
  }
  /* Tekst in de linkerhelft zodat de foto rechts vrij blijft */
  .hero--image .hero__content > * { max-width: 50%; }
  .hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    /* Brede, zachte fade: de foto lost over ~de halve breedte op in de zandwit,
       zodat beeld en achtergrond in elkaar overlopen (mask = geen kleur-hack). */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 50%);
    mask-image: linear-gradient(to right, transparent 0%, #000 50%);
  }
  .hero--image .hero__img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    /* Rechts verankeren: onze brede composities hebben het onderwerp rechts en de
       lege ruimte links (onder de tekst-fade). Center-crop sneed op brede schermen
       juist het onderwerp weg (bevinding Mario 2026-07-19). */
    object-position: right center;
  }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Coming-soon — tijdelijke "binnenkort live"-pagina (COMING_SOON-vlag)
   Zelfstandige pagina (buiten base.html) met eigen, gecentreerde opmaak in
   huisstijl, zodat bezoekers vanAnaarWerk direct herkennen. Zie docs/deploy.md.
   -------------------------------------------------------------------------- */
.comingsoon {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--container-padding);
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  text-align: center;
}
.comingsoon__panel {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.comingsoon__logo {
  width: 5rem;
  height: auto;
  margin-bottom: var(--space-sm);
}
.comingsoon__brand {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
}
.comingsoon__eyebrow {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--color-secondary-text);
}
.comingsoon__title {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-text-heading);
}
.comingsoon__lead {
  margin: 0;
  max-width: 34ch;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}
.comingsoon__note {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}
.comingsoon__contact {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.comingsoon__link {
  color: var(--color-text-link);
  font-weight: var(--weight-semibold);
}
.comingsoon__link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.comingsoon__footer {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* Blijf-op-de-hoogte-formulier op de tijdelijke pagina (dubbele opt-in). */
.comingsoon__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 26rem;
  margin: var(--space-lg) auto;
  text-align: left;
}
.comingsoon__form-kop {
  margin: 0;
  font-weight: var(--weight-semibold);
}
.comingsoon__veld {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-sm);
}
.comingsoon__input {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  background-color: var(--color-bg-card);
  color: var(--color-text-primary);
}
.comingsoon__input:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}
.comingsoon__akkoord {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: var(--text-sm);
}
.comingsoon__btn {
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.comingsoon__btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.comingsoon__fout {
  margin: 0;
  color: var(--color-error);
  font-size: var(--text-sm);
}
/* Honeypot: onzichtbaar voor mensen (buiten beeld), wél in de DOM voor bots. */
.comingsoon__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.comingsoon__tekst {
  text-align: left;
  max-width: 60ch;
  margin: 0 auto;
}

/* Iets ruimer op grotere schermen */
@media (min-width: 48rem) {
  .comingsoon__title { font-size: var(--text-4xl); }
  .comingsoon__lead { max-width: 42ch; }
}

/* --------------------------------------------------------------------------
   Beheer — actie-knoppen naast elkaar (elke actie is een eigen <form>)
   -------------------------------------------------------------------------- */
.beheer-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.beheer-acties form { margin: 0; }

/* --------------------------------------------------------------------------
   CRM — eigen full-width omgeving met top-nav (docs/crm.md; mockup-goedgekeurd).
   Bewust géén admin-zijbalk: de inhoud benut de volle breedte.
   -------------------------------------------------------------------------- */
.crm { width: 100%; display: flex; flex-direction: column; }

/* Top-nav (nachtblauw, on-brand) */
.crm-nav {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  padding: var(--space-sm) var(--space-xl);
  background-color: var(--color-bg-footer);
  color: var(--color-text-inverse);
}
.crm-nav__terug { color: rgba(255, 255, 255, 0.7); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); text-decoration: none; }
.crm-nav__terug:hover { color: #fff; }
.crm-nav__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); flex: 1; }
/* Visuele groepen in de tabbalk (Relaties · Uitvoering · Kantoor · Inrichting): een dunne
   scheider tussen groepen; Dashboard rechts uitgelijnd. Wrapping blijft gewoon werken. */
.crm-nav__groep { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.crm-nav__groep + .crm-nav__groep { border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: var(--space-sm); margin-left: var(--space-xs); }
.crm-nav__groep--rechts { margin-left: auto; border-left: none; padding-left: 0; }
.crm-nav__tab { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.crm-nav__tab:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff; }
.crm-nav__tab.is-actief { background-color: var(--color-primary); color: #fff;
  font-weight: var(--weight-semibold); }
.crm-nav__tab--straks { color: rgba(255, 255, 255, 0.4); cursor: default; }
.crm-nav__tab--straks small { font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-loose); opacity: 0.7; }

.crm-doek { padding: var(--space-xl); }

/* Opvolg-vorm in de mail-acties (ronde M): termijn-keuze + knop op één regel. */
.inbox-mail__opvolgen { display: flex; gap: var(--space-xs); align-items: center; }
.inbox-mail__opvolgen .field__input { width: auto; }

/* --------------------------------------------------------------------------
   Portaal — de eigen pagina van deelnemer en opdrachtgever (/mijn).
   Smalle, rustige kolom op de site-schil; hergebruikt .kaart en .beheer-tabel.
   -------------------------------------------------------------------------- */
.portaal { max-width: 46rem; margin: 0 auto; padding: var(--space-xl) var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-lg); }
.portaal__kop h1 { margin-bottom: var(--space-xs); }
.portaal__coach { color: var(--color-text-secondary); max-width: 65ch; }
.portaal__lijst { list-style: none; padding: 0; display: flex; flex-direction: column;
  gap: var(--space-sm); }

/* Paginakop + terug-link */
.crm-kop { display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.crm-kop__sub { margin: var(--space-xs) 0 0; max-width: 70ch; font-size: var(--text-sm);
  color: var(--color-text-secondary); }
.crm-terug { display: inline-block; margin-bottom: var(--space-sm); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--color-text-link); text-decoration: none; }

/* Beheer-kaart: het statische paneel van álle beheer-/CRM-schermen (tabellen,
   agenda-dagen, formulieren, stoplicht). Zelfde tokens als .card, maar bewust
   zónder hover-lift — dit zijn geen klikbare tegels. Root-cause-fix 2026-07-11:
   deze klasse werd overal gebruikt maar was nooit gedefinieerd. */
.kaart {
  background-color: var(--card-bg);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-lg);
}
.kaart > :last-child { margin-bottom: 0; }

/* Lijst-tabel */
.crm-tabelwrap { overflow-x: auto; }
.crm-tabel { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.crm-tabel thead th { text-align: left; padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-loose);
  color: var(--color-text-secondary); font-weight: var(--weight-semibold);
  background-color: var(--color-bg-page); border-bottom: var(--border-width) solid var(--color-border); }
.crm-tabel tbody td { padding: var(--space-md);
  border-bottom: var(--border-width) solid var(--color-border); vertical-align: middle; }
.crm-tabel tbody tr:last-child td { border-bottom: 0; }
.crm-tabel tbody tr:hover { background-color: var(--color-primary-light); }
.crm-cel-naam { font-weight: var(--weight-semibold); }
.crm-cel-sub { display: block; font-size: var(--text-xs); color: var(--color-text-secondary);
  font-weight: var(--weight-regular); }
.crm-link { color: var(--color-text-link); font-weight: var(--weight-semibold); text-decoration: none; }
.crm-link:hover { text-decoration: underline; }
.crm-leeg { padding: var(--space-2xl); text-align: center; color: var(--color-text-secondary); }
.crm-leeg-inline { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Cockpit (detailkaart) */
.crm-cockpit-kop { display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.crm-cockpit-kop__titel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.crm-cockpit { display: grid; gap: var(--space-lg); align-items: start; grid-template-columns: 1fr; }
.crm-kolom { display: flex; flex-direction: column; gap: var(--space-lg); }
.crm-blok { background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.crm-blok__kop { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-border); }
/* Titel links, álle actieknoppen rechts — ook als een blok er meer dan één heeft. */
.crm-blok__kop h2 { font-size: var(--text-base); margin: 0; margin-right: auto; }
.crm-blok__kop form { margin: 0; }
.crm-blok__body { padding: var(--space-lg); }
.crm-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-md) var(--space-xl); margin: 0; }
.crm-veld dt { font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-loose); color: var(--color-text-secondary); }
.crm-veld dd { margin: 2px 0 0; font-size: var(--text-sm); }
.crm-notitie { margin: var(--space-lg) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.crm-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: var(--space-sm); }
.crm-lijst li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.crm-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2rem; height: 2rem; border-radius: var(--radius-full);
  background-color: var(--color-bg-accent); color: var(--color-primary);
  font-size: var(--text-xs); font-weight: var(--weight-bold); }
.crm-muur { background-color: var(--color-bg-accent);
  border: var(--border-width) solid var(--color-primary-light); border-radius: var(--radius-lg);
  padding: var(--space-lg); font-size: var(--text-sm); }
.crm-muur__t { display: block; margin-bottom: var(--space-sm); color: var(--color-primary); }
.crm-muur p { margin: 0; }

/* Formulier */
.crm-form { max-width: 52rem; }
.crm-form__rij { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.crm-form__acties { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* Bewerken-per-blok op de kaart: de knop staat rechts in de blok-balk (consistent met
   + Contact / + Overeenkomst); het formulier klapt onder de balk open (details/summary,
   geen JS). De summary draagt de bestaande .btn-klassen; de knoptekst wisselt
   Bewerken ↔ Sluiten zodat een open blok ook weer dicht kan (bevinding Mario 2026-07-15). */
.crm-bewerk > summary { list-style: none; }
.crm-bewerk > summary::-webkit-details-marker { display: none; }
.crm-bewerk[open] { flex: 1 1 100%; display: flex; flex-direction: column; }
.crm-bewerk[open] > summary { align-self: flex-end; }
.crm-bewerk__dicht { display: none; }
.crm-bewerk[open] .crm-bewerk__open { display: none; }
.crm-bewerk[open] .crm-bewerk__dicht { display: inline; }
.crm-bewerk__form { margin-top: var(--space-sm); padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--color-border); text-align: left; }

/* Semantische status-badges (herbruikbaar, tokengestuurd) */
.badge--succes { background-color: var(--color-success-light); color: var(--color-success); }
.badge--waarschuwing { background-color: var(--color-warning-light); color: var(--color-warning); }

/* Cockpit-zijkolom + formulier-rijen op breder scherm */
@media (min-width: 60rem) {
  .crm-cockpit { grid-template-columns: 1fr 20rem; }
  .crm-form__rij { grid-template-columns: 1fr 1fr; }
}

/* CRM — deelnemer-cockpit: gevoelig-chip, later-blok, medisch-slot, extra status-badges */
.chip-gevoelig { background-color: var(--color-gevoelig-light); color: var(--color-gevoelig); }
.badge--info { background-color: var(--color-info-light); color: var(--color-info); }
.badge--fout { background-color: var(--color-error-light); color: var(--color-error); }
.badge--later { background-color: var(--color-bg-alt); color: var(--color-text-secondary);
  font-weight: var(--weight-medium); }
.crm-blok--later .crm-blok__body { color: var(--color-text-secondary); }
.crm-slot { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg);
  background-color: var(--color-bg-page);
  border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius-md); }
.crm-slot__t { font-weight: var(--weight-semibold); color: var(--color-text-heading); font-size: var(--text-sm); }
.crm-slot__u { margin: 0; font-size: var(--text-xs); color: var(--color-text-secondary); }

/* CRM — formulier-groepen (fieldset), schuifjes-rij en kaart-detailtjes */
.crm-fieldset { margin: 0; display: grid; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.crm-fieldset legend { padding: 0 var(--space-sm); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--color-text-heading); }
.crm-toggles { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.crm-toggle { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
.crm-toggle__tekst { font-size: var(--text-sm); }
.crm-groei { flex: 1; min-width: 0; }
.crm-mini { font-size: var(--text-xs); white-space: nowrap; }
.crm-toelicht { margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-accent); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md); font-size: var(--text-sm); }
.crm-velden--enkel { grid-template-columns: 1fr; }

/* Onthul-groep: het schuifje onthult de velden pas (CSS :has, geen JS) —
   gebruikt voor afwijkende adressen, verzuim/eerste ziektedag en de weekplanning */
.crm-onthul { display: grid; gap: var(--space-sm); }
.crm-onthul .crm-onthul__velden { display: none; }
.crm-onthul:has(.toggle__input:checked) .crm-onthul__velden {
  display: grid; gap: var(--space-md); margin-top: var(--space-xs);
}
.crm-ai-aanvullen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }

/* Weekplanning: 7 dagen × dagdelen — aanvinkrooster (formulier) en leeslijst (cockpit) */
.crm-week { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.crm-week th, .crm-week td { padding: var(--space-xs) var(--space-sm);
  border: var(--border-width) solid var(--color-border); text-align: center; }
.crm-week thead th { font-weight: var(--weight-semibold); color: var(--color-text-heading); }
.crm-week tbody th[scope="row"] { text-align: left; font-weight: var(--weight-normal); white-space: nowrap; }
.crm-week__cel { display: flex; align-items: center; justify-content: center; cursor: pointer;
  min-height: var(--space-lg); }
.crm-week__cel input { width: 1.15rem; height: 1.15rem; cursor: pointer; accent-color: var(--color-primary); }
.crm-week-lees { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }

/* Traject-blokje op de cockpit: naam + startdatum, met de afgeleide deadlines eronder. */
.crm-traject { display: grid; gap: var(--space-xs); padding: var(--space-sm) 0; }
.crm-traject + .crm-traject { border-top: var(--border-width) solid var(--color-border); }
.crm-traject__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); }
.crm-traject__acties { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }

/* Catalogus: moment-regel (label + verwijderknop) en dashboard-statkaarten. */
.crm-moment { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.crm-moment-form { margin-top: var(--space-lg); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-lg); }
.crm-los { margin-top: var(--space-xl); }

/* Gegenereerd document — één kolom, het formulier ín het document (kop read-only uit CRM,
   invulvragen inline eronder; werkt op smal scherm/iPad). */
/* Links het formulier, rechts een contextpaneel; op smal scherm/iPad stapelt het (paneel onder). */
.document-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 60rem) { .document-layout { grid-template-columns: minmax(0, 1fr) 20rem; } }
.document-hoofd { min-width: 0; }
.document-context { display: grid; gap: var(--space-lg); align-content: start; }
.document__kop { border-bottom: var(--border-width) solid var(--color-border); padding-bottom: var(--space-md); margin-bottom: var(--space-lg); }
.document__sub { color: var(--color-text-muted); font-size: var(--text-sm); }
.document__blok { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: var(--border-width) solid var(--color-border); }
.document__blok:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.document__rubriek { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.document__velden { display: grid; gap: var(--space-xs); }
.document__velden > div { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.document__velden dt { min-width: 12rem; color: var(--color-text-muted); }
.document__tekst { white-space: pre-wrap; max-width: 65ch; }
.document__mini { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.document__veld { margin-bottom: var(--space-lg); }
.document__vraag { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-xs); }
.document__waarde { white-space: pre-wrap; max-width: 65ch; }
.document__waarde--crm { color: var(--color-text-secondary); }
.document__invoer { min-height: 6rem; }
.document__ondertekening { display: grid; gap: var(--space-md); }
.document__htk { padding: var(--space-md); background-color: var(--color-bg-accent); border-radius: var(--radius-md); }
.document__acties { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
/* Verzend-actie: kanaalkeuze (mail/post) naast de 'markeer verstuurd'-knop. */
.document__verzend { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-end; }
.document__verzend .field__select { max-width: 9rem; }
/* Agenda: venster-navigatie, dag-kaarten en de drie voorstellen. */
.agenda-nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.agenda-dag { margin-bottom: var(--space-md); }
.agenda-dag__titel { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
/* Lege dag: één rustige regel — overzicht boven opsomming (herontwerp 2026-07-11). */
.agenda-dag--leeg { margin: 0 0 var(--space-sm); padding: 0 var(--space-md); }
.agenda-dag--leeg .agenda-dag__titel { font-size: var(--text-base); color: var(--color-text-secondary); margin: 0; }
.agenda-dag__leegtekst { font-weight: 400; color: var(--color-text-secondary); margin-left: var(--space-sm); }
/* Agenda-item: tijd-kolom | inhoud | acties-menu — rustige rijen i.p.v. knoppen-brij. */
.agenda-lijst { list-style: none; margin: 0; padding: 0; }
.agenda-item { display: flex; align-items: flex-start; gap: var(--space-lg); padding: var(--space-sm) 0; }
.agenda-item + .agenda-item { border-top: var(--border-width) solid var(--color-border); }
.agenda-item__tijd { display: flex; flex-direction: column; min-width: 4.5rem; }
.agenda-item__tijd strong { font-size: var(--text-lg); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.agenda-item__tijd span { font-size: var(--text-sm); color: var(--color-text-secondary); }
.agenda-item__info { flex: 1 1 16rem; }
.agenda-item__titel { margin: 0; }
.agenda-item__sub { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
/* Acties-menu: native details/summary-dropdown (geen JS, CSP-proof). */
.acties-menu { position: relative; margin-left: auto; flex-shrink: 0; }
.acties-menu summary { list-style: none; }
.acties-menu summary::-webkit-details-marker { display: none; }
.acties-menu__paneel { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: 20; min-width: 11rem; display: grid; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-bg-card); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.acties-menu__paneel .btn { width: 100%; }
.agenda-voorstellen { display: grid; gap: var(--space-sm); }
.agenda-voorstel { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; }
/* Aanvinkbaar voorstel: het hele label is klikbaar, het vinkje in huisstijlkleur. */
.agenda-voorstel__kies { display: flex; align-items: center; gap: var(--space-sm); flex: 1; cursor: pointer; }
.agenda-voorstel__kies input { width: var(--space-lg); height: var(--space-lg); accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
/* Actieknoppen onder de voorstellenlijst (versturen / handmatig). */
.agenda-acties { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
/* Beschikbaarheids-tabel (A6): compacte kolommen, tijden niet oprekken. */
.voorkeur-tabel th[scope="row"] { text-align: left; width: 30%; }
.voorkeur-tabel td { text-align: left; }
.voorkeur-tijd { max-width: 9rem; }

/* Opgeslagen handtekening op Mijn gegevens (PNG-dataURL, alleen eigen account). */
.handtekening-voorbeeld { display: block; max-width: 20rem; margin-bottom: var(--space-md);
  padding: var(--space-sm); background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }

/* Tweestapsverificatie: QR-code (op wit voor scanbaarheid), eenmalige herstelcodes
   en de handmatige otpauth-koppeling (lange string — breken, niet oprekken). */
.tweefactor-qr { display: block; width: 12rem; height: 12rem; margin: var(--space-md) 0;
  padding: var(--space-sm); background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.tweefactor-codes { list-style: none; padding: var(--space-md); margin: var(--space-md) 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs);
  background-color: var(--color-bg-card); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md); max-width: 28rem; }
.tweefactor-handmatig { margin-bottom: var(--space-md); max-width: 65ch; overflow-wrap: anywhere; }

/* Postvak IN (Mail M1): tabs per postbus + mail-kaarten met SLA-linkerrand
   (reactiebelofte 2 werkdagen) en de Postkamer-verwerkt-regel. */
.inbox-tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.inbox-tabs__tab { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border); text-decoration: none;
  color: var(--color-text); font-size: var(--text-sm); }
.inbox-tabs__tab--actief { background-color: var(--color-primary); color: var(--color-text-inverse);
  border-color: var(--color-primary); }
.inbox-mail { margin-bottom: var(--space-md); border-left: 4px solid var(--color-border); }
.inbox-mail--groen { border-left-color: var(--color-success); }
.inbox-mail--oranje { border-left-color: var(--color-warning); }
.inbox-mail--rood { border-left-color: var(--color-error); }
.inbox-mail__kop { display: flex; justify-content: space-between; gap: var(--space-md);
  flex-wrap: wrap; align-items: baseline; }
.inbox-mail__afzender { font-weight: 600; }
.inbox-mail__adres { color: var(--color-text-secondary); font-size: var(--text-sm);
  margin-left: var(--space-xs); }
.inbox-mail__meta { display: flex; gap: var(--space-xs); align-items: center; }
.inbox-mail__tijd { color: var(--color-text-secondary); font-size: var(--text-sm); }
.inbox-mail__onderwerp { margin: var(--space-xs) 0; font-weight: 500; }
.inbox-mail__inhoud { margin: var(--space-sm) 0; }
.inbox-mail__tekst { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 65ch;
  font-family: inherit; font-size: var(--text-sm); background-color: var(--color-bg-alt);
  padding: var(--space-md); border-radius: var(--radius-md); }
.inbox-mail__postkamer { font-size: var(--text-sm); color: var(--color-success);
  margin: var(--space-xs) 0; }
.inbox-mail__postkamer--leeg { color: var(--color-text-secondary); }
.inbox-mail__postkamer--wacht { color: var(--color-text-secondary); }
.inbox-mail__acties { display: flex; gap: var(--space-xs); margin-top: var(--space-sm);
  flex-wrap: wrap; }
/* Postkamer-gestuurde mail: geen handmatige knoppen, alleen een korte toelichting. */
.inbox-mail__stuur { font-size: var(--text-sm); color: var(--color-text-secondary);
  margin: var(--space-sm) 0 0; }
/* Schakelaar 'toon ook afgehandelde' boven de werkvoorraad (klein, rustig). */
.inbox-tabs__toon { font-size: var(--text-sm); margin: 0 0 var(--space-md); }
.inbox-mail__onderwerp a { color: inherit; }
.inbox-mail__oppakker, .inbox-mail__bijlagen { font-size: var(--text-sm);
  color: var(--color-text-secondary); margin: var(--space-xs) 0; }
/* Detailpagina: label-formulier als één rij (select + knop naast elkaar). */
.inbox-detail__label { display: flex; gap: var(--space-sm); align-items: flex-end;
  flex-wrap: wrap; margin-bottom: var(--space-sm); }
.inbox-detail__label .field__select { max-width: 18rem; }
/* Detailweergave van het bericht: gewone leestekst (regelafbrekingen behouden),
   zonder invulveld-achtergrond — een mail is leesstof, geen formulier. */
.inbox-mail__tekst--detail { background-color: transparent; padding: 0;
  font-size: var(--text-base); line-height: var(--leading-relaxed); max-width: 72ch; }
/* Afhandelen-blokken: rustige scheiding tussen label / koppeling / notitie. */
.inbox-detail__blok { border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg); margin-top: var(--space-lg); }
.inbox-detail__blok .field__label { display: block; margin-bottom: var(--space-xs); }
.inbox-detail__blok .btn { margin-top: var(--space-xs); }
/* Notitie-formulier: label boven het veld, alles onder elkaar (geen flex-rij). */
.inbox-detail__notitie { display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--space-xs); }
.inbox-detail__notitie .field__textarea { width: 100%; max-width: 46rem; }

/* Takenbalk: subtiel, altijd bovenin het CRM (details/summary, geen JS). Groen is het
   doel; de dot en linkerrand dragen de kleur. Uitklappen toont Systeem + Begeleiding. */
.takenbalk { margin-bottom: var(--space-lg); }
.takenbalk__samenvatting { display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); font-size: var(--text-sm);
  background-color: var(--color-bg-card); border: var(--border-width) solid var(--color-border);
  border-left: var(--space-xs) solid var(--color-success); border-radius: var(--radius-md);
  cursor: pointer; list-style: none; }
.takenbalk__samenvatting::-webkit-details-marker { display: none; }
.takenbalk--oranje .takenbalk__samenvatting { border-left-color: var(--color-warning); }
.takenbalk--rood .takenbalk__samenvatting { border-left-color: var(--color-error); }
.takenbalk__dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; flex-shrink: 0;
  background-color: var(--color-success); }
.takenbalk--oranje .takenbalk__dot { background-color: var(--color-warning); }
.takenbalk--rood .takenbalk__dot { background-color: var(--color-error); }
.takenbalk__hint { margin-left: auto; color: var(--color-text-secondary); font-size: var(--text-sm); }
.takenbalk__paneel { margin-top: var(--space-xs); padding: var(--space-md);
  background-color: var(--color-bg-card); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md); display: grid; gap: var(--space-lg); }
.takenbalk__groeptitel { margin: 0 0 var(--space-sm); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }

/* Stip — klein stoplicht-bolletje naast een naam (compleetheid van een account).
   Zelfde kleurtaal als .stoplicht: groen = compleet, oranje = bijna, rood = kern mist.
   Gebruik inline naast tekst (opdrachtgever-lijst en -kaartkop). */
.stip { display: inline-block; width: var(--space-sm); height: var(--space-sm);
  border-radius: var(--radius-full); background-color: var(--color-success);
  vertical-align: middle; }
.stip--oranje { background-color: var(--color-warning); }
.stip--rood { background-color: var(--color-error); }
.stip--grijs { background-color: var(--color-text-secondary); }

/* Urensaldo-regel (ronde U): één regel per traject in het Afspraken-blok — zelfde
   stoplicht-kleurtaal; de cijfers zijn afgeleid uit de agenda (urensaldo_service). */
.uren-regel { display: flex; gap: var(--space-xs); align-items: center;
  font-size: var(--text-sm); margin-bottom: var(--space-sm); }

/* Werkdashboard (ronde D): cijferkop + twee taken-kolommen — leegwerken op échte data. */
.werk-cijfers { display: flex; flex-wrap: wrap; gap: var(--space-md);
  margin-bottom: var(--space-lg); }
.werk-cijfer { background-color: var(--color-bg-card, var(--color-bg));
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column;
  min-width: 8rem; }
.werk-cijfer strong { font-size: var(--text-2xl); }
.werk-cijfer span { font-size: var(--text-sm); color: var(--color-text-secondary); }
.werk-kolommen { display: grid; gap: var(--space-lg);
  grid-template-columns: 1fr; }
@media (min-width: 900px) { .werk-kolommen { grid-template-columns: 1fr 1fr; } }
.werk-taken { list-style: none; padding: 0; display: flex; flex-direction: column;
  gap: var(--space-sm); }
.werk-taken li { display: flex; gap: var(--space-xs); align-items: center; }

/* Facturen F1: het overdrachtsblok (alles voor SnelStart op één regel) + het
   inline bedrag-formulier uit de orderregel. */
.facturen-overdracht { display: block; width: 100%; margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); background-color: var(--color-bg);
  border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); }
.facturen-bedrag { display: inline-flex; gap: var(--space-xs); align-items: center; }
.facturen-bedrag .field__input { max-width: 14rem; padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm); }

/* Stoplicht-kleurtaal (gedeeld): punt-rijen in de takenbalk + het contact-blok
   op de deelnemer-kaart. Groen = in orde, oranje = te doen, rood = actie. */
.stoplicht { border-left: var(--space-xs) solid var(--color-success); margin-bottom: var(--space-lg); }
.stoplicht--oranje { border-left-color: var(--color-warning); }
.stoplicht--rood { border-left-color: var(--color-error); }
.stoplicht__kop { margin: 0 0 var(--space-md); font-weight: 600; }
.stoplicht__kop--groen { color: var(--color-success); margin-bottom: 0; }
.stoplicht__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.stoplicht__punt { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.stoplicht__punt .badge { flex-shrink: 0; min-width: 4.5rem; text-align: center; }
.stoplicht__tekst { flex: 1 1 20rem; }
.stoplicht__knop { margin-left: auto; }
/* In een smal kaart-paneel (zijkolom, bv. Account-compleetheid) dwingt de 20rem-basis de
   tekst ónder zijn badge — dan lees je badge en punt verkeerd aan elkaar (bevinding Mario
   2026-07-15). Daar: badge en tekst altijd samen op één regel. */
.crm-blok .stoplicht__tekst { flex-basis: 8rem; }
.crm-blok .stoplicht__punt { flex-wrap: nowrap; align-items: flex-start; }

/* Bibliotheek: actie-knoppen per document-rij (Proef-PDF + Gecontroleerd) naast elkaar. */
.bib-acties { display: flex; gap: var(--space-xs); align-items: center; white-space: nowrap; }
.bib-acties form { margin: 0; }

/* Documentenkast: filterbalk (coach/soort) boven de accordion-lijst. */
.kast-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-lg); }
.kast-filters .field__input { max-width: 18rem; }

/* Tijdelijke schone-lei-knop op het dashboard (achter TESTDATA_OPSCHONEN; weg vóór livegang). */
.testdata-opruim { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-md); }
.testdata-opruim .field__input { max-width: 20rem; }
.testdata-opruim__zeker { display: inline-flex; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); }

/* Tijdelijke demo-invulknop (achter DEMO_INVULLEN; weg vóór livegang). */
.document__demo { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.document__pdf-actie { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--border-width) solid var(--color-border); }
/* Acties-rij mag meerdere losse formulieren bevatten (elk één knop) zonder eigen marge. */
.document__acties form { margin: 0; }
/* Tijdsbalk van een traject: start → laatste moment; voortgang tot vandaag, momenten als stippen.
   Urgentie: ok = neutraal, binnenkort (≤ 30 dagen) = waarschuwing, verlopen = fout. */
/* Tijdlijn van het traject: dikke afgeronde balk met mijlpaal-pins en een ronde
   vandaag-knop (bevinding Mario). 'verstreken' = vandaag ligt voorbij het eind —
   de knop klemt dan rechts en kleurt rood i.p.v. te lezen als 'op de laatste mijlpaal'. */
.tijdsbalk { position: relative; height: 20px; margin: var(--space-md) 0 var(--space-sm); }
.tijdsbalk__lijn { position: absolute; top: 50%; left: 0; right: 0; height: 8px;
  transform: translateY(-50%); background-color: var(--color-border); border-radius: 999px; }
.tijdsbalk__voortgang { position: absolute; top: 50%; left: 0; height: 8px;
  transform: translateY(-50%); background-color: var(--color-primary); border-radius: 999px; }
.tijdsbalk__punt { position: absolute; top: 50%; left: 0; width: 10px; height: 10px;
  transform: translate(-50%, -50%); border-radius: 50%; background-color: var(--color-bg-card);
  border: 2px solid var(--color-text-muted); }
.tijdsbalk__punt--binnenkort { border-color: var(--color-warning); }
.tijdsbalk__punt--verlopen { border-color: var(--color-error); }
.tijdsbalk__vandaag { position: absolute; top: 50%; left: 0; width: 18px; height: 18px;
  transform: translate(-50%, -50%); border-radius: 50%; background-color: var(--color-bg-card);
  border: 3px solid var(--color-primary); box-shadow: var(--shadow-sm); z-index: 1; }
.tijdsbalk--verstreken .tijdsbalk__voortgang { background-color: var(--color-border); }
.tijdsbalk--verstreken .tijdsbalk__vandaag { border-color: var(--color-error); }
.tijdsbalk__status { font-size: var(--text-sm); color: var(--color-error);
  font-weight: var(--weight-semibold); margin: 0 0 var(--space-xs); }
.tijdsbalk-regel--binnenkort .crm-mini { color: var(--color-warning); font-weight: 600; }
.tijdsbalk-regel--verlopen .crm-mini { color: var(--color-error); font-weight: 600; }
/* Trajectkaart-herindeling (bevinding Mario): tijdlijn op volle breedte, daaronder
   twee kolommen — Documenten (inkomend/bewijs) naast Rapportages (wat wij opleveren). */
.crm-traject__tijdlijn { margin-bottom: var(--space-md); }
.crm-traject__kolommen { display: grid; gap: var(--space-lg); align-items: start; }
.crm-vak { background-color: var(--color-bg-alt); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-md); }
.crm-vak__kop { font-size: var(--text-base); font-weight: var(--weight-semibold);
  margin-bottom: var(--space-xs); }
.crm-vak__sub { font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-text-secondary); margin: var(--space-sm) 0 var(--space-xs); }
.crm-vak__acties { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
@media (min-width: 48rem) { .crm-traject__kolommen { grid-template-columns: 1fr 1fr; } }
/* Documentrij in de cockpit: link + status links, verwijder-knop rechts op dezelfde regel. */
.crm-doc-rij { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.crm-doc-rij__verwijder { margin-left: auto; }
/* Keuze-blok na 'Definitief maken': hoe wordt er ondertekend (aanbieden of samen). */
.document-keuze { margin-bottom: var(--space-md); padding: var(--space-md); background-color: var(--color-bg-accent); border-radius: var(--radius-md); }
.document-keuze__titel { margin: 0 0 var(--space-sm); font-size: var(--text-base); }
.document-keuze__opties { margin: 0 0 var(--space-md); padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
/* Admin-volledigheidscheck vóór verzending: groen/rood per controlepunt. */
.document-check { margin-top: var(--space-lg); padding: var(--space-md); background-color: var(--color-bg-accent); border-radius: var(--radius-md); }
.document-check__titel { margin: 0 0 var(--space-sm); font-size: var(--text-base); }
.document-check__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.document-check__punt { display: flex; gap: var(--space-sm); align-items: baseline; }
.document-check__mark { flex: 0 0 auto; font-weight: 700; }
.document-check__punt.is-ok .document-check__mark { color: var(--color-success); }
.document-check__punt.is-fout .document-check__mark { color: var(--color-error); }
/* Urentabel (bv. rubriek 5.3): activiteit links, uren-invoer rechts — spiegelt de UWV-tabel. */
.urentabel { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 32rem; }
.urentabel__rij { display: flex; align-items: center; gap: var(--space-sm); }
.urentabel__label { flex: 1; }
.urentabel__uren { width: 5.5rem; text-align: right; }
.urentabel-lees { list-style: none; margin: 0; padding: 0; max-width: 32rem; }
.urentabel-lees li { display: flex; justify-content: space-between; gap: var(--space-sm); }
/* Documentenkast: bevroren PDF-bewijsstukken (klaargezet/getekend/verzonden) per document. */
.document-kast { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.document-kast__item { display: flex; flex-direction: column; gap: 2px; }
.document-kast__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (min-width: 40rem) { .document__ondertekening { grid-template-columns: 1fr 1fr; } }
/* Handtekening op het scherm: tekenvak + de vastgelegde afbeelding. touch-action:none = niet scrollen tijdens tekenen. */
.handtekening { width: 100%; height: 8rem; margin: var(--space-sm) 0; background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); touch-action: none; cursor: crosshair; }
.document__handtekening { max-width: 100%; height: 6rem; margin-top: var(--space-sm);
  background-color: var(--color-bg-card); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
/* Keuze-/meerkeuze-velden (radio/checkbox naast label). */
.field__keuzes { display: grid; gap: var(--space-xs); }
.field__keuze { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--text-sm); }
.crm-stats { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg); }
.crm-stat { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg);
  background-color: var(--color-bg-accent); border-radius: var(--radius-md); min-width: 10rem; }
.crm-stat__getal { font-size: var(--text-3xl); font-weight: var(--weight-semibold); color: var(--color-primary); line-height: 1; }
.crm-stat__label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Uitkering: de gekozen vorm onthult haar eigen detailvelden (CSS :has, geen JS).
   De option-waarden volgen constants.py (UITKERINGEN); 'gemeente' dekt participatiewet + ioaw_iow. */
.crm-uitkering { display: grid; gap: var(--space-md); }
.crm-uitkering__detail { display: none; }
.crm-uitkering:has(option[value="ww"]:checked) .crm-uitkering__detail--ww,
.crm-uitkering:has(option[value="wia"]:checked) .crm-uitkering__detail--wia,
.crm-uitkering:has(option[value="wajong"]:checked) .crm-uitkering__detail--wajong,
.crm-uitkering:has(option[value="participatiewet"]:checked) .crm-uitkering__detail--gemeente,
.crm-uitkering:has(option[value="ioaw_iow"]:checked) .crm-uitkering__detail--gemeente {
  display: grid; gap: var(--space-md);
}
/* Binnen WIA hangen de subvelden af van de soort (het ouder-blok gate't op uitkering=wia):
   WGA-fase + einddatum = alle WGA (niet IVA); restverdiencapaciteit = alleen WGA 35-80%. */
.crm-wia-wga, .crm-wia-3580 { display: none; }
.crm-uitkering:has(option[value="wga_35_80"]:checked) .crm-wia-wga,
.crm-uitkering:has(option[value="wga_80_100"]:checked) .crm-wia-wga,
.crm-uitkering:has(option[value="wga_35_80"]:checked) .crm-wia-3580 {
  display: grid; gap: var(--space-md);
}

/* Intake (opdrachten): twee-panelen-controlescherm — origineel links, voorstel rechts.
   Mobile-first: panelen stapelen; naast elkaar vanaf tablet. Zie docs/opdracht-intake.md §3. */
.intake-invoer { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.intake-melding { margin-bottom: var(--space-lg); display: grid; gap: var(--space-md); }
.intake-panelen { display: grid; gap: var(--space-lg); align-items: start; }
.intake-paneel { display: grid; gap: var(--space-md); }
.intake-paneel__titel { font-size: var(--text-lg); }
.intake-paneel__pdf { width: 100%; min-height: 32rem; border: none; }
.intake-paneel__pdf-link { font-size: var(--text-sm); color: var(--color-text-secondary);
  margin: var(--space-xs) 0 0; }
.intake-paneel__tekst {
  white-space: pre-wrap; font-size: var(--text-sm); max-height: 40rem;
  overflow-y: auto; overflow-x: auto;
}
.intake-afwijzen { margin-top: var(--space-md); }
@media (min-width: 64rem) {
  .intake-panelen { grid-template-columns: 1fr 1fr; }
  .intake-paneel__pdf { min-height: 48rem; }
}

/* Traject-panelen op de deelnemer-kaart: tijdlijn links, documenten bij het traject rechts.
   Mobile-first gestapeld; naast elkaar vanaf tablet. Inzage volgt de dossier-scope. */
.crm-traject__panelen { display: grid; gap: var(--space-lg); align-items: start; }
.crm-traject__paneeltitel { font-size: var(--text-base); margin-bottom: var(--space-sm); }
.crm-traject__subkop { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); margin: var(--space-sm) 0 var(--space-xs); }
.crm-dossier-upload { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); align-items: center; }
.crm-dossier-upload .field__input { max-width: 16rem; }
.crm-coach-beheer { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); align-items: center; }
.crm-coach-beheer__vorm { display: flex; gap: var(--space-sm); align-items: center; }
@media (min-width: 64rem) {
  .crm-traject__panelen { grid-template-columns: 3fr 2fr; }
}

/* Bouwershandboek: compacte technische naslag binnen het accordion-component. */
.bouwdocs__kop { font-size: var(--text-base); margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.bouwdocs__taak { margin-bottom: var(--space-md); max-width: 65ch; }

/* ==========================================================================
   CRM-eigen aanvullingen (AI Loopbaan Solutions) — alleen wat de bron niet
   heeft; uitsluitend tokens, zelfde conventies. De rest van dit bestand is
   integraal het bewezen design-systeem van vanAnaarWerk.
   ========================================================================== */

/* Leesbare gedempte tekst (AA-veilig — leisteen, niet het decoratieve muted) */
.muted { color: var(--color-text-secondary); }

/* Merkbalk: merknaam of logo van de professional (theming-v1) */
.navbar__merknaam { font-size: var(--text-md); font-weight: var(--weight-bold);
  color: var(--color-text-heading); }
.navbar__logo { max-height: 40px; width: auto; }

/* Uitloggen als tab in de CRM-nav (form-knop, zelfde uiterlijk als een tab) */
.crm-nav__uitloggen { background: none; border: none; cursor: pointer; font: inherit; }

/* Scherm-ondertekening (canvas) — twee partijen naast elkaar op breder scherm */
.ondertekening { display: grid; gap: var(--space-lg); margin-block: var(--space-lg); }
@media (min-width: 48rem) { .ondertekening { grid-template-columns: 1fr 1fr; } }
.ondertekening__partij { display: grid; gap: var(--space-sm); }
.handtekening { border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-md); background-color: var(--color-bg-card); }
.handtekening__beeld { max-width: 20rem; border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md); background-color: var(--color-bg-card); }

/* Hub: compacte groepslabels (zelfde stijl als tabel-/veldkoppen in de bron) */
.hub__groepkop { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-loose);
  color: var(--color-text-secondary); font-weight: var(--weight-semibold); }
.card-grid--5 .card__text { font-size: var(--text-sm); }