/* ═══════════════════════════════════════════════════════════════════════════
   Notuleo — design system
   Layered on Bootstrap 5.3. Self-hosted Inter. Corporate / legal SaaS look.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "InterVar";
  src: url("/static/vendor/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
  /* ── HET THEMA VAN NOTULEO ───────────────────────────────────────────────
     De homepage is de leidraad (beslissing Frederik, september 2026). Elke
     waarde hieronder staat ook in het webgedeelte van dit bestand: er is
     sindsdien één palet in plaats van twee. De volledige uitleg, met de
     betekenis per kleur en de regels per onderdeel, staat in THEMA.md.       */

  /* Merkkleuren. Indigo is de enige actiekleur, mint betekent "in orde",
     violet bestaat alleen binnen het verloop. */
  --nt-indigo:      #4338ca;
  --nt-indigo-700:  #3730a3;
  --nt-indigo-800:  #312e81;
  --nt-violet:      #8b5cf6;
  --nt-mint:        #2dd4bf;
  --nt-mint-700:    #0d9488;

  /* Het handmerk: van het werk naar het resultaat. Alleen op het merkteken
     en op een lijn, nooit als vulling van een knop of een kaart, en nooit
     onder witte tekst (daarvoor is er het diepe verloop hieronder). */
  --nt-verloop: linear-gradient(135deg, #4338ca 0%, #8b5cf6 55%, #2dd4bf 100%);
  /* Het diepe verloop, voor alles waar witte tekst op staat. Het heldere
     verloop hierboven wordt naar het einde toe zo licht dat wit er niet meer
     leesbaar op is (4,2 op 1 op violet, 1,9 op mint); dit is het verloop van
     de donkere banden op de homepage (25 september 2026). */
  --nt-verloop-diep: linear-gradient(135deg, #312e81 0%, #4338ca 45%, #0f766e 100%);

  /* De oude namen blijven bestaan zodat geen enkel scherm breekt; zij wijzen
     nu naar de kleuren van de homepage. */
  --nt-primary:     var(--nt-indigo);
  --nt-primary-600: var(--nt-indigo-700);
  --nt-primary-700: var(--nt-indigo-800);
  --nt-primary-050: #f7f5ff;
  --nt-primary-100: #f2eeff;
  --nt-navy:        #17162c;
  --nt-navy-2:      #2b2452;

  /* Grijzen. Warmer dan de vorige reeks: #f4f6fb trok naar blauw en vloekte
     met indigo. */
  --nt-ink:      #17162c;
  --nt-body:     #5f6070;
  --nt-muted:    #6b6c7a;
  --nt-faint:    #a5a6b2;

  --nt-bg:          #fafafc;
  --nt-surface:     #ffffff;
  --nt-tint:        #f7f5ff;
  --nt-violet-vlak: #f2eeff;
  --nt-mint-vlak:   #edfcf9;
  --nt-line:        #e7e5ef;
  --nt-line-2:      #d7d3e5;

  /* Rood voor wat wist of verwijdert. */
  --nt-gevaar:      #b42318;
  --nt-gevaar-vlak: #fef3f2;
  --nt-gevaar-rand: #fecdca;

  /* De kleur van "hier moet iets gebeuren", in de cockpit en op het
     beheeroverzicht: één kleur voor één betekenis. */
  --nt-actie:       #a4243b;
  /* Dezelfde kleur als fijne rand en zachte gloed rond een kaart met een
     vastgestelde fout (Frederik, 25 september 2026: "als een rode
     schaduw"). */
  --nt-actie-rand:     #efc9d0;
  --nt-schaduw-actie:  0 0 0 3px rgba(164,36,59,.06), 0 6px 20px rgba(164,36,59,.13);

  /* Rondingen. Hoe groter het vlak, hoe ronder de hoek; vier maten, zoals de
     homepage. */
  --nt-radius-knop:  12px;
  --nt-radius-tegel: 13px;
  --nt-radius-sm:    12px;
  --nt-radius:       18px;
  --nt-radius-lg:    20px;
  --nt-radius-xl:    24px;

  /* Letterladder, afgeleid van de homepage. Zes trappen, niets ertussenin.
       xs  12,8px  datums, merktekens, meta
       sm  13,6px  bijschriften en hulptekst
       md  15,2px  gewone tekst (de maat van de homepage)
       lg  17,6px  hoofding van een kader
       xl  22,4px  tussentitel
       2xl 32px    paginatitel                                                */
  --nt-tekst-xs:  .8rem;
  --nt-tekst-sm:  .85rem;
  --nt-tekst-md:  .95rem;
  --nt-tekst-lg:  1.1rem;
  --nt-tekst-xl:  1.4rem;
  --nt-tekst-2xl: 2rem;

  /* Ruimte. Eén reeks voor de hele tool; de twee grootste zakken een trap op
     een gsm, net zoals de secties van de homepage. */
  --nt-ruimte-1: 4px;
  --nt-ruimte-2: 8px;
  --nt-ruimte-3: 12px;
  --nt-ruimte-4: 16px;
  --nt-ruimte-5: 24px;
  --nt-ruimte-6: 32px;
  --nt-ruimte-7: 48px;
  --nt-ruimte-8: 72px;

  /* Eén schaduw, altijd samen met een rand. */
  --nt-schaduw:    0 1px 2px rgba(23,22,44,.04), 0 8px 24px rgba(23,22,44,.06);
  --nt-shadow-sm:  0 1px 2px rgba(23,22,44,.04);
  --nt-shadow:     var(--nt-schaduw);
  --nt-shadow-lg:  0 4px 12px -4px rgba(23,22,44,.08), 0 24px 48px -20px rgba(23,22,44,.18);

  /* De vaste verticale ruimte tussen twee delen binnen een kader (een
     veldgroep, een uitklapbaar onderdeel, een groepskop). Opmerking
     Frederik, 8 september 2026, bij het vergaderblok: "meer ruimte tussen
     gegevens van de vergadering en het vinkje", met de vraag of daar geen
     regel voor bestaat die voor heel Notuleo geldt. Dit token is die
     regel, aangesloten op de ruimtereeks van het thema; de meting
     GROEPSRUIMTE in tests/veldbreedtes_playwright.py bewaakt haar op alle
     schermen. */
  --nt-groepruimte: var(--nt-ruimte-5);


  /* Bootstrap overrides */
  --bs-body-font-family: "InterVar", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--nt-body);
  --bs-body-bg: var(--nt-bg);
  --bs-border-color: var(--nt-line);
  --bs-border-radius: var(--nt-radius-knop);
  --bs-border-radius-lg: var(--nt-radius);
  --bs-border-radius-xl: var(--nt-radius-lg);
  --bs-emphasis-color: var(--nt-ink);
  --bs-secondary-color: var(--nt-muted);
  /* Bootstrap 5.3 kleurt een link via de rgb-vorm; zet je alleen
     --bs-link-color, dan blijft elke gewone link het blauw van Bootstrap
     houden en staan er twee blauwen op één scherm (vastgesteld september
     2026 op de dossierkaart). */
  --bs-link-color: var(--nt-indigo);
  --bs-link-color-rgb: 67,56,202;
  --bs-link-hover-color: var(--nt-indigo-700);
  --bs-link-hover-color-rgb: 55,48,163;
  --bs-primary: var(--nt-indigo);
  --bs-primary-rgb: 67,56,202;
}
@media (max-width: 767.98px) {
  :root { --nt-ruimte-7: 32px; --nt-ruimte-8: 40px; }
}


/* ── Base ───────────────────────────────────────────────────────────────────── */
/* De navigatiebalk plakt bovenaan. Zonder deze marge verdwijnt de titel van
   het blok waarnaar een link springt eronder, en land je middenin de inhoud
   (feedback Frederik, augustus 2026: "ik kom ergens totaal anders uit"). */
html { scroll-padding-top: 5.25rem; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--bs-body-font-family);
  background: var(--nt-bg);
  color: var(--nt-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--nt-ink);
  font-weight: 700;
  letter-spacing: -0.021em;
}
h1, .h1 { font-weight: 800; }

.text-muted { color: var(--nt-muted) !important; }
a { text-underline-offset: 2px; }

/* EEN TUSSENTITEL IS NOOIT KLEINER DAN DE TEKST ERONDER
   Frederik, 24 september 2026: "doorheen heel de tool staan de tussentitels
   nu kleiner dan de tekst eronder. Dit is raar." De opschriften van stap 1,
   het label boven een vraag of antwoord van de AI-jurist en de groepskoppen
   van het benoemingsformulier stonden op 12,8 pixels in een lichtgrijze
   kleur, boven tekst van 15,2. Een titel onderscheidt zich voortaan door
   GEWICHT en KLEUR (vet, donker) en is minstens even groot als wat eronder
   staat; de tekst zelf is gewoon en iets lichter. Dat is ook de vorm van de
   samenvattingslijsten in het ontwerpsysteem van de Britse overheid, dat voor
   formulierzware diensten de maatstaf is. De meting TITELMAAT in
   tests/veldbreedtes_playwright.py houdt het zo. */
.nt-eyebrow {
  font-size: var(--nt-tekst-md);
  font-weight: 600;
  color: var(--nt-ink);
}

/* ── Navbar ─────────────────────────────────────────────────────────────────── */
/* De balk van de tool is dezelfde als die van de homepage: wit, plakkend, met
   een waas erachter en één lijn eronder. Wie van de website naar de tool gaat,
   mag geen breuk zien (beslissing Frederik, september 2026: de homepage is de
   leidraad). Zie THEMA.md punt 6. */
.corp-navbar {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nt-line);
  padding: .6rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.corp-navbar .navbar-brand {
  color: var(--nt-ink);
  font-weight: 800;
  font-size: var(--nt-tekst-xl);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.corp-navbar .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--nt-verloop);
  color: #fff;
  border-radius: var(--nt-radius-tegel);
  font-weight: 700;
  font-size: 1.05rem;
}
/* Gelijke tussenruimte tussen alle knoppen in de balk (opmerking Frederik,
   augustus 2026: de afstanden verschilden door een losse extra marge op één
   knop). Elke knop krijgt dezelfde kleine ruimte, geen uitzonderingen. */
.corp-navbar .navbar-nav { gap: .3rem; }
.corp-navbar .nav-link {
  color: var(--nt-ink) !important;
  font-size: var(--nt-tekst-sm);
  font-weight: 500;
  padding: .45rem 1rem !important;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}
.corp-navbar .nav-link:hover { color: var(--nt-indigo) !important; background: var(--nt-tint); }
.corp-navbar .nav-link.active {
  color: var(--nt-indigo) !important;
  background: var(--nt-violet-vlak);
}
.corp-navbar .nav-link i { opacity: .7; }
/* Vijf tabbladen sinds de AI-jurist er een eigen tabblad kreeg (25 september
   2026): op een kleiner laptopscherm liep een opschrift anders over twee
   regels ("AI-" / "jurist") en stond het icoon erboven. Een opschrift blijft
   op één regel, en tussen 992 en 1200 pixels krimpt alleen de binnenruimte. */
.corp-navbar .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .corp-navbar .navbar-nav .nav-link { padding: .45rem .6rem !important; }
}
/* De knop Afmelden staat op een witte balk en volgt dus de gewone actie. */
.corp-navbar .btn-outline-light {
  border-color: var(--nt-line-2);
  color: var(--nt-body);
  font-weight: 500;
}
.corp-navbar .btn-outline-light:hover {
  background: var(--nt-tint); border-color: var(--nt-indigo); color: var(--nt-indigo);
}


/* ── De onderdelen van het thema ─────────────────────────────────────────────
   Afgeleid van de homepage; de volledige uitleg staat in THEMA.md.          */

/* De knop. Dezelfde vorm en maat als op de homepage: ronding twaalf, gewicht
   vijfhonderd, en een lichte variant met een rand in plaats van grijs. */
.btn {
  border-radius: var(--nt-radius-knop);
  font-weight: 500;
  font-size: var(--nt-tekst-md);
  padding: .6rem 1.4rem;
}
.btn-sm { padding: .4rem 1rem; font-size: var(--nt-tekst-sm); border-radius: 10px; }
.btn-lg { padding: .8rem 1.8rem; font-size: var(--nt-tekst-lg); }
/* De knopvariabelen van Bootstrap zelf zetten, niet alleen de achtergrond:
   anders valt een UITGESCHAKELDE knop terug op het blauw van Bootstrap en
   staan er twee blauwen op één scherm. Zo gebeurde het met "Vraag stellen"
   (vastgesteld september 2026). */
.btn-primary {
  --bs-btn-bg: var(--nt-indigo);
  --bs-btn-border-color: var(--nt-indigo);
  --bs-btn-hover-bg: var(--nt-indigo-700);
  --bs-btn-hover-border-color: var(--nt-indigo-700);
  --bs-btn-active-bg: var(--nt-indigo-800);
  --bs-btn-active-border-color: var(--nt-indigo-800);
  /* Uitgeschakeld: een vlak in plaats van een verbleekte knop. Indigo op 65
     procent leest als een tweede, lichtere actiekleur, en dan lijkt een knop
     die nog niets doet toch aanklikbaar. */
  --bs-btn-disabled-bg: var(--nt-violet-vlak);
  --bs-btn-disabled-border-color: var(--nt-line-2);
  --bs-btn-disabled-color: var(--nt-muted);
  --bs-btn-disabled-opacity: 1;
  --bs-btn-focus-shadow-rgb: 67,56,202;
}
.btn-outline-primary {
  --bs-btn-color: var(--nt-indigo);
  --bs-btn-border-color: var(--nt-indigo);
  --bs-btn-hover-bg: var(--nt-indigo);
  --bs-btn-hover-border-color: var(--nt-indigo);
  --bs-btn-active-bg: var(--nt-indigo-700);
  --bs-btn-active-border-color: var(--nt-indigo-700);
  --bs-btn-disabled-color: var(--nt-indigo);
  --bs-btn-disabled-border-color: var(--nt-indigo);
  --bs-btn-focus-shadow-rgb: 67,56,202;
}
.btn-outline-secondary, .btn-light {
  --bs-btn-color: var(--nt-body);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--nt-line-2);
  --bs-btn-hover-color: var(--nt-indigo);
  --bs-btn-hover-bg: var(--nt-tint);
  --bs-btn-hover-border-color: var(--nt-indigo);
  --bs-btn-active-color: var(--nt-indigo);
  --bs-btn-active-bg: var(--nt-violet-vlak);
  --bs-btn-active-border-color: var(--nt-indigo);
  --bs-btn-disabled-color: var(--nt-muted);
  --bs-btn-disabled-border-color: var(--nt-line);
  --bs-btn-focus-shadow-rgb: 67,56,202;
}
/* Wissen: alleen een rand, nooit gevuld. */
.btn-outline-danger {
  --bs-btn-color: var(--nt-gevaar);
  --bs-btn-border-color: var(--nt-gevaar-rand);
  --bs-btn-hover-bg: var(--nt-gevaar-vlak);
  --bs-btn-hover-color: var(--nt-gevaar);
  --bs-btn-hover-border-color: var(--nt-gevaar);
  --bs-btn-active-bg: var(--nt-gevaar-vlak);
  --bs-btn-active-color: var(--nt-gevaar);
  --bs-btn-active-border-color: var(--nt-gevaar);
}

/* De kaart: wit, een rand én een schaduw. Nooit het een zonder het ander. */
.card {
  border-radius: var(--nt-radius);
  border: 1px solid var(--nt-line);
  box-shadow: var(--nt-schaduw);
  background: var(--nt-surface);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--nt-line);
  border-radius: var(--nt-radius) var(--nt-radius) 0 0;
  font-weight: 600;
  color: var(--nt-ink);
  padding: 1rem 1.25rem;
}

/* Het invoerveld, met de focusring van de homepage in plaats van het blauw
   van Bootstrap. */
.form-control, .form-select {
  border-radius: var(--nt-radius-knop);
  border-color: var(--nt-line-2);
  padding: .65rem .9rem;
  font-size: var(--nt-tekst-md);
  color: var(--nt-ink);
  background-color: var(--nt-surface);
  transition: border-color .15s, box-shadow .15s;
}
.form-control-sm, .form-select-sm { padding: .45rem .7rem; font-size: var(--nt-tekst-sm); }
/* Een keuzelijst houdt rechts de ruimte voor haar pijltje vrij. De gedeelde
   binnenmarge hierboven nam die weg, zodat een lange keuze onder het pijltje
   doorliep, in elke keuzelijst van de tool (gevonden op 25 september 2026 in
   de filter van Documenten, bij een lange vennootschapsnaam). */
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding-right: 2rem; }
.form-control::placeholder { color: var(--nt-muted); }
.form-control:hover, .form-select:hover { border-color: var(--nt-muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--nt-indigo);
  box-shadow: 0 0 0 3px rgba(67,56,202,.12);
}
/* Het opschrift boven een veld staat in inkt, niet in grijs: zo leest de
   homepage haar formulier ook. */
.form-label { font-size: var(--nt-tekst-md); font-weight: 500; color: var(--nt-ink);
  margin-bottom: .4rem; }
/* Het merkteken na een veldnaam: "(verplicht)" of "(optioneel)", overal in
   dezelfde vorm (opmerking Frederik, 24 september 2026: "verplicht staat
   zonder haken en optioneel met, niet consistent"). Gewoon gewicht en grijs,
   in de maat van de veldnaam; in de kop van een kader in de maat van gewone
   tekst, zodat het een toevoeging blijft en geen deel van de titel wordt. */
.nt-merk { font-weight: 400; color: var(--nt-body); }
.card-header .nt-merk { font-size: var(--nt-tekst-md); }
/* Een vast gegeven in een rij velden staat ook in een kader, met een lichte
   vulling omdat het niet te wijzigen is (opmerking Frederik, 24 september
   2026: "vreemd dat dit plots niet in een kader staat"). Gemeten door
   VASTGEGEVEN in tests/veldbreedtes_playwright.py. */
.form-control.nt-vast, .form-control.nt-vast:focus { background: var(--nt-bg); color: var(--nt-ink);
  box-shadow: none; border-color: var(--nt-line); cursor: default; }
.input-group .btn { border-radius: 0 var(--nt-radius-knop) var(--nt-radius-knop) 0; }
.form-text { color: var(--nt-body); }

/* De meldingen, met één vlak en één rand per betekenis. */
.alert { border: 1px solid transparent; border-radius: var(--nt-radius-knop);
  font-size: var(--nt-tekst-md); font-weight: 500; }
.alert-success { background: var(--nt-mint-vlak); border-color: var(--nt-mint); color: var(--nt-ink); }
.alert-info { background: var(--nt-tint); border-color: var(--nt-line); color: var(--nt-body); }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.corp-main { min-height: calc(100vh - 132px); }

/* Koppen in de tool volgen de letterladder, niet de Bootstrap-klassen. Zonder
   deze regel stond "Vennootschappen" op 28 pixels en "Nieuwe handeling" op 24,
   afhankelijk van welke hulpklasse de pagina toevallig droeg. Eén paginatitel,
   één tussentitel. Wie bewust wil afwijken zet de maat op de eigen klasse van
   het onderdeel of in een style-attribuut. */
.corp-main h1 { font-size: var(--nt-tekst-2xl); }
.corp-main h2,
.corp-main h3,
.corp-main h4,
.corp-main h5,
.corp-main h6 { font-size: var(--nt-tekst-xl); }

.corp-footer {
  background: var(--nt-surface);
  border-top: 1px solid var(--nt-line);
  padding: 1.5rem 0;
  margin-top: 5rem;
}

/* De knop, de kaart en het invoerveld staan één keer beschreven, in het
   themablok hierboven. Wat hier vroeger stond, herhaalde dat en won ervan:
   een knop van gewicht 600 met een gloed uit het oude blauwe palet. Zet een
   knop- of veldregel dus nooit onder deze lijn.                             */
.card.shadow-sm { box-shadow: var(--nt-shadow) !important; }
.card-body { padding: 1.35rem; }
.border-dashed { border: 1.5px dashed var(--nt-line) !important; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.table { --bs-table-border-color: var(--nt-line-2); color: var(--nt-body); }
.table > thead th {
  font-size: var(--nt-tekst-xs);
  color: var(--nt-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--nt-line);
}
.table > :not(caption) > * > * { padding: .8rem .65rem; }

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .7em; border-radius: 7px; }

/* ── Avatars ────────────────────────────────────────────────────────────────── */
.corp-avatar {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--nt-primary-050), var(--nt-primary-100));
  color: var(--nt-primary-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
  border: 1px solid rgba(51,85,255,.10);
}

/* ── Quick-start cards ──────────────────────────────────────────────────────── */



/* Klein pijltje bij een knop die de cockpit verlaat: de gebruiker ziet
   vooraf dat hij naar het dossier springt en niet in de cockpit blijft. */
/* Kleine tussentitel boven een reeks rijen in een cockpitpaneel. Zij moet de
   ogen leiden zonder als kop te wegen: gedempt, klein, met wat lucht erboven.
   Ingevoerd bij het UBO-paneel (augustus 2026), waar twee reeksen onder
   elkaar staan: de structuur en de datum van bevestiging. */

/* ── Hero (landing) ─────────────────────────────────────────────────────────── */
.corp-hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(51,85,255,.35), transparent 60%),
    radial-gradient(900px 420px at 8% 115%, rgba(109,134,255,.22), transparent 60%),
    linear-gradient(120deg, #312e81 0%, #4338ca 45%, #0f766e 100%);
  color: #fff;
  padding: 6rem 0 7rem;
}

/* Kaarten op de landing: subtiel zweefeffect bij aanwijzen. */
#modules .card, #handelingen .card, #cockpit .card, #prijzen .card {
  transition: transform .12s ease, box-shadow .12s ease;
}
#modules .card:hover, #handelingen .card:hover,
#prijzen .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--nt-shadow-lg) !important;
}

/* ── Cockpit-band op de landing (donker, apart van de handelingen) ──────────── */
.cockpit-band {
  background:
    radial-gradient(900px 400px at 90% 0%, rgba(139,92,246,.30), transparent 60%),
    linear-gradient(120deg, #312e81 0%, #4338ca 45%, #0f766e 100%);
  color: #fff;
}
.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 100px;
  padding: .4rem 1rem;
  font-size: var(--nt-tekst-xs);
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.hero-title { font-size: clamp(2.1rem, 4.4vw, 3.25rem); font-weight: 800; line-height: 1.22; letter-spacing: -.03em; color: #fff; }
/* De catalogus draagt dezelfde band, maar met een rustiger titel. */
.hero-title.hero-title-catalogus { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.hero-subtitle { font-size: 1.12rem; opacity: .9; line-height: 1.7; margin-top: .9rem; }

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.corp-spinner {
  width: 52px; height: 52px;
  border: 4px solid var(--nt-primary-100);
  border-top-color: var(--nt-primary);
  border-radius: 50%;
  animation: corp-spin .8s linear infinite;
  margin: 0 auto;
}
@keyframes corp-spin { to { transform: rotate(360deg); } }

/* ── List groups ────────────────────────────────────────────────────────────── */
.list-group-item { border-color: var(--nt-line-2); padding: .9rem 1.1rem; }
.list-group-item-action:hover { background: var(--nt-primary-050); }

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.alert-warning { background: #fff8eb; color: #92610a; border-color: #fde8bf; }
.alert-danger  { background: #fef2f2; color: #a32020; border-color: #fbd0d0; }

/* ── Type intro banner (decision form) ──────────────────────────────────────── */
.nt-type-intro {
  background: var(--nt-primary-050);
  border: 1px solid rgba(51,85,255,.14);
  border-left: 4px solid var(--nt-primary);
  border-radius: var(--nt-radius-sm);
  padding: 1rem 1.2rem;
  font-size: var(--nt-tekst-md);
  color: var(--nt-body);
  line-height: 1.55;
}
.nt-type-intro > .nt-type-meta:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.nt-type-meta {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(51,85,255,.16);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: var(--nt-tekst-sm);
}
.nt-type-meta-item { display: flex; gap: .65rem; align-items: baseline; }
.nt-type-meta-item > i {
  color: var(--nt-primary-600);
  font-size: .95rem;
  width: 1.1rem;
  flex: 0 0 auto;
  text-align: center;
}

/* ── Opzoeken in de KBO ──────────────────────────────────────────────────────
   Staat in een gewoon wit kader, zoals elk ander kader in de tool. Het
   vroegere donkerblauwe paneel met de witte knop brak met de rest van de
   interface (feedback Frederik, augustus 2026). */
.nt-kbo-status-ok  { color: var(--nt-navy); font-weight: 600; }
.nt-kbo-status-err { color: var(--nt-actie); font-weight: 600; }

/* Merkteken "akte via notaris". Stond als gele waarschuwingsbadge midden in
   de titel, waar hij bij een lange titel zomaar ergens belandde (feedback
   Frederik, augustus 2026: "rommelig geplaatst"). Nu overal hetzelfde: een
   rustig merkteken op een eigen regel onder de titel. */
/* Een handeling die nog in voorbereiding is: zichtbaar, maar niet te kiezen.
   De beheerder krijgt deze stijl niet te zien; voor hem blijft de kaart open. */
.nt-handelingkaart-dicht {
  cursor: default;
  opacity: .72;
  background: var(--nt-bg, #f8f9fc);
}
.nt-handelingkaart-dicht:hover {
  border-color: var(--nt-line);
  box-shadow: none;
  transform: none;
}

/* "Coming Soon": deze handeling staat wel in de lijst maar is nog niet
   nagekeken (wens Frederik, augustus 2026: de tool wordt mogelijk gelanceerd
   vooraleer alle handelingen in orde zijn gebracht). Zij staat op dezelfde
   vaste plaats als de notarismarkering, rechtstreeks onder de titel, maar als
   klein gevuld merkteken: het is een tijdelijke stand en geen eigenschap van
   de handeling, dus zij mag opvallen. */
.nt-comingsoon {
  display: inline-block;
  margin: .3rem .4rem 0 0;
  padding: .1rem .45rem;
  background: var(--nt-primary-050, #eef1ff);
  border: 1px solid rgba(51,85,255,.22);
  border-radius: 999px;
  font-size: var(--nt-tekst-xs);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--nt-primary-700, #2a45cc);
  white-space: nowrap;
  vertical-align: .05em;
}
.nt-comingsoon + .nt-notarisbadge { margin-top: .15rem; }

/* De markering "akte via notaris". Zij stond eerst als omlijnd pilletje onder
   de titel, daarna als gevuld label achter de titel; allebei vond Frederik ze
   lelijk, en achter de titel landde zij op elke kaart ergens anders (augustus
   2026: "positionering moet echt beter en de badge is ook lelijk, ik wil qua
   positionering consistentie over alle handelingen heen"). Daarom nu: geen
   vlak, geen rand, maar een gedempte regel op een VASTE plaats, altijd
   rechtstreeks onder de titel en op dezelfde lijn als de titel begint. Dat is
   dezelfde vorm als de regel "hoort bij ..." eronder, alleen in de kleur van
   de notaris. */
.nt-notarisbadge {
  display: block;
  margin: .25rem 0 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--nt-tekst-xs);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  color: #8d621c;
  white-space: nowrap;
}
.nt-notarisbadge::before {
  font-family: bootstrap-icons; content: "\f62e";
  margin-right: .3rem; font-size: .8rem; font-weight: 400;
  vertical-align: -.05em;
}

/* Melding onder het orgaanveld bij een duaal bestuur: informatief, geen
   waarschuwing, dus in de huiskleur en niet in het rood. */
.nt-duaal-melding { color: var(--nt-primary-700); font-weight: 500; }

/* Merkteken op een knop of titel: klein, en het neemt de kleur van de knop
   over zodat het nergens uit de toon valt. Niet doorzichtig: met een
   doorzichtigheid van 0,7 haalde het maar 3,2 op 1 (25 september 2026).
   De schrijfwijze blijft die van de tekst zelf: "Coming Soon" met
   hoofdletters, zoals bij de handelingen (opmerking Frederik, augustus 2026
   over de kleurenkeuze in het UBO-paneel). */
.nt-badge-binnenkort {
  display: inline-block; margin-left: .4rem; padding: .05rem .35rem;
  border-radius: 999px; font-size: var(--nt-tekst-xs); font-weight: 600;
  border: 1px solid currentColor; vertical-align: middle;
  /* Zonder deze regelhoogte maakt het merkteken zijn knop één pixel hoger dan
     de knoppen ernaast, en dat is precies de klacht waaruit het paneel is
     ontstaan (Frederik, augustus 2026: "knopjes die niet op dezelfde hoogte
     staan"). Gemeten in september 2026: 32 tegenover 31 pixels. */
  line-height: 1;
}

/* Trefferlijst bij het zoeken op naam: rustige regels, geen kaders in een
   kader. */
.nt-kbo-resultaten { display: flex; flex-direction: column; }
.nt-kbo-resultaat {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; width: 100%; text-align: left;
  padding: .55rem .25rem; border: 0; background: none;
  border-bottom: 1px solid var(--nt-line); font-size: var(--nt-tekst-md);
}
.nt-kbo-resultaat:first-child { border-top: 1px solid var(--nt-line); }
/* Naam en adres onder elkaar, het ondernemingsnummer rechts ernaast. */
.nt-kbo-tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nt-kbo-resultaat:hover { background: #f4f7ff; }

/* ── Nalezen: fase 3 van de werkplek ────────────────────────────────────────
   Ontwerp van 24 september 2026 ("Bouw de tool maar zo"): één kolom, de punten
   ter nazicht in één kaart, dan de documenten, dan de balk met de hoofdknop.

   Een kaart met een vastgestelde fout moet opvallen, maar subtiel (Frederik,
   augustus 2026: "hij moet opvallen, maar op een subtielere manier"). Eerst
   was dat een rode rand links; op 25 september 2026 vroeg hij "die ronde rond
   er helemaal fijntjes rond durven laten gaan als een rode schaduw". Dus een
   fijne rode rand rondom en een zachte rode gloed, geen vol rood vlak. */
.nt-nazicht {
  border: 1px solid var(--nt-actie-rand);
  box-shadow: var(--nt-schaduw-actie);
}
/* Het blad met de tekst: de hoofding zoals in het Word-document, daaronder
   het leesveld, dat met zijn inhoud meegroeit (zie review.html). Een vaste
   hoogte toonde bij een kort besluit een groot leeg vlak en gaf een lang
   besluit een tweede schuifbalk (Frederik, augustus 2026). */
.doc-sheet { border-top: 1px solid var(--nt-line); }
.doc-sheet-head { padding: 1.5rem 2rem 1.1rem; border-bottom: 1px solid var(--nt-line); text-align: center; }
.doc-company { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: var(--nt-tekst-lg); color: var(--nt-ink); }
.doc-sub { color: var(--nt-body); font-size: var(--nt-tekst-sm); margin-top: .2rem; line-height: 1.5; }
.nt-leesveld {
  display: block; width: 100%; min-height: 200px; resize: none; overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif; font-size: var(--nt-tekst-md); line-height: 1.85;
  white-space: pre-wrap; color: var(--nt-ink); background: var(--nt-surface);
  border: 0; border-radius: 0; padding: 1.7rem 2rem 2rem;
}
.nt-leesveld:focus { outline: none; box-shadow: inset 0 0 0 2px var(--nt-violet-vlak); }
/* Elk document een rij met zijn eigen leesveld eronder (Frederik, 25
   september 2026: "elk document moet zijn eigen veld krijgen om in na te
   lezen"). Het leesveld loopt over de hele breedte van de kaart, van rand tot
   rand, zoals het blad vroeger. */
.nt-rijen > li > .nt-deel { grid-column: 1 / -1; margin: .5rem -1.35rem -.875rem; }
@media (max-width: 575.98px) {
  .doc-sheet-head { padding: 1.1rem 1rem .9rem; }
  .nt-leesveld { padding: 1.1rem 1rem 1.4rem; }
}
/* De voet van de tekst: wat er met je aanpassingen gebeurt, en bewaren. */
.nt-tekstvoet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
/* Een kaart die op iets wacht: het draaiende teken naast de titel en de zin. */
.nt-wachtkaart { display: flex; align-items: center; gap: 1rem; }
.corp-main .nt-wachtkaart h2 { font-size: var(--nt-tekst-lg); font-weight: 600; margin: 0; }
.nt-wachtkaart p { font-size: var(--nt-tekst-sm); color: var(--nt-body); margin: .5rem 0 0; }
.nt-werkplek-noot { font-size: var(--nt-tekst-sm); color: var(--nt-body); margin: 0; }
.nt-wachtbalk { height: 6px; margin-top: 1.25rem; }
.nt-wachtbalk .progress-bar { background: var(--nt-verloop); transition: width .8s ease; }
/* Onder de kolom: het onomkeerbare, klein en apart. */
.nt-werkplek-voet { margin: 0; }
/* Meerdere knoppen in de balk: naast elkaar, en op een gsm onder elkaar. */
.nt-actiebalk-knoppen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
@media (max-width: 575.98px) { .nt-actiebalk-knoppen { flex: 1 1 100%; } }

/* ── Opvolgen: fase 4 van de werkplek ───────────────────────────────────────
   De taken na het downloaden als rijen. Noteren opent een klein formulier
   onder de taak zelf (de datum, Opslaan), zodat de rij haar plaats houdt. */
.nt-noteer { margin-top: .5rem; font-size: var(--nt-tekst-sm); color: var(--nt-body); }
.nt-noteer .form-control { flex: 0 1 11rem; }
/* Een knop die een formulier verstuurt, staat in de rij zoals elke andere knop. */
.nt-knopformulier { display: contents; }
/* Een eigen taak: de omschrijving, de datum en de knop op één regel. */
.nt-eigentaak { display: grid; grid-template-columns: minmax(0, 1fr) 11rem auto; gap: .5rem .75rem; align-items: end; }
.nt-eigentaak .form-label { font-size: var(--nt-tekst-sm); }
@media (max-width: 575.98px) { .nt-eigentaak { grid-template-columns: minmax(0, 1fr); } }

/* ── Utilities ──────────────────────────────────────────────────────────────── */
.min-w-0 { min-width: 0; }
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }
.text-primary { color: var(--nt-primary-600) !important; }
.bg-primary { background-color: var(--nt-primary) !important; }
.bg-light { background-color: #f7f9fd !important; }
.shadow-sm { box-shadow: var(--nt-shadow-sm) !important; }
.shadow { box-shadow: var(--nt-shadow) !important; }
.fw-semibold { font-weight: 600 !important; }

/* De letterladder als hulpklassen, voor sjablonen die vroeger een eigen
   font-size in een style-kenmerk zetten. Zo blijft één maat op één plaats. */
.nt-tekst-xs { font-size: var(--nt-tekst-xs); }
.nt-tekst-sm { font-size: var(--nt-tekst-sm); }
.nt-tekst-md { font-size: var(--nt-tekst-md); }
.nt-tekst-lg { font-size: var(--nt-tekst-lg); }
.nt-tekst-xl { font-size: var(--nt-tekst-xl); }

/* Iconen zijn geen tekst en volgen de ladder dus niet. Wel staan hun maten
   hier, zodat er geen font-size meer in een style-kenmerk hoeft. */
.nt-icoon-hulp { font-size: var(--nt-tekst-sm); cursor: help; }
/* Het merkvierkant op de instelpagina. Stond vroeger volledig in een
   style-kenmerk, met een kleurtoken dat niet bestond, waardoor het vierkant
   kleurloos bleef. */
.brand-mark-groot {
  width: 56px; height: 56px; font-size: 1.5rem; border-radius: 14px;
  background: var(--nt-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ── Cockpit (aparte module: corporate housekeeping) ─────────────────────────
   Sober gehouden op vraag van Frederik (augustus 2026): geen avatarletters,
   geen felle badges. De stand staat altijd in woorden. Sinds het ontwerp van
   24 september 2026 ("Bouw de tool maar zo") draagt een rij ook een klein
   statusicoon (_stip.html): groen met een vinkje, een grijze ring of rood met
   een uitroepteken, nooit een kaal gekleurd bolletje. */
.cockpit-band-sub { color: rgba(255,255,255,.86); max-width: 760px; }
.cockpit-module-badge {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.85); font-weight: 500; font-size: var(--nt-tekst-xs);
}

/* ── UBO-analyse ────────────────────────────────────────────────────────────── */
.analysis-text {
  white-space: pre-wrap;
  font-size: var(--nt-tekst-md);
  line-height: 1.65;
}

/* De twee instrumenten in de uitgelogde balk: groter en duidelijker, links. */
.corp-navbar .nav-public-tool {
  font-size: var(--nt-tekst-lg);
  font-weight: 600;
}
/* ── Cockpit per vennootschap: de zes rubrieken als tabbladen ───────────────
   Eén markering per tegel: het actieve tabblad draagt een blauwe onderlijn.
   Een rubriek die aandacht vraagt zegt dat in woorden, niet met een stip. */
.cockpit-band-deep { padding-bottom: 1.5rem; }
.cockpit-body { padding-bottom: 3rem; }
/* De kolommen strekken mee, zodat de zes tegels altijd even hoog zijn
   (vaste wens van Frederik: kaders op gelijke hoogte). */
/* Eén strakke balk met zes tabbladen, niet zes losse kaartjes met gekleurde
   strepen eronder. Gelijke kolommen, dunne scheidingslijnen, en alleen het
   actieve tabblad krijgt een markering. */
/* De zes rubrieken als tabbladenrij, in een kaart zoals al het andere op dit
   scherm. Drie ronden waren daarvoor nodig (opmerkingen Frederik, 8 september
   2026). Eerst stond zij in een kaart MET verticale lijnen tussen elk paar
   tabbladen en met een actief tabblad dat zowel een gekleurd vlak als een
   dikke onderrand droeg: dat las als een tabel met hokjes en het was dubbel
   gemarkeerd. Daarna werd het een kale rij op een lijn, maar die plakte tegen
   de gekleurde band en stond los van een scherm dat verder uit kaarten
   bestaat ("er is overlap met de gekleurde balk en dat kan niet, er moet ook
   wat meer ruimte zijn en het moet beter bij de rest van de lay-out passen").

   Nu: een gewone kaart met ruimte onder de band, en daarin zes tabbladen
   zonder scheidingslijnen. De markering van het actieve tabblad is dezelfde
   als in de navigatiebalk hierboven, een zacht violet vlak met een ronding.
   Zo staat er op dit scherm maar één soort actief-markering. */
.cockpit-tabs {
  display: flex;
  overflow-x: auto; scrollbar-width: thin;
  gap: .2rem;
  padding: .4rem;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius);
  box-shadow: var(--nt-schaduw);
}
.cockpit-tab {
  flex: 1 1 auto; white-space: nowrap;
  appearance: none; border: 0; background: none;
  text-align: left; cursor: pointer;
  padding: .5rem;
  border-radius: var(--nt-radius-knop);
  color: var(--nt-body);
  transition: background .12s ease, color .12s ease;
  display: flex; flex-direction: column; gap: .1rem;
}
.cockpit-tab .ck-tab-label {
  font-weight: 500; color: var(--nt-body); font-size: var(--nt-tekst-md); line-height: 1.3;
}
.cockpit-tab:hover { background: var(--nt-tint); }
.cockpit-tab:hover .ck-tab-label { color: var(--nt-ink); }
.cockpit-tab.active { background: var(--nt-violet-vlak); }
.cockpit-tab.active .ck-tab-label { color: var(--nt-indigo); font-weight: 600; }
.cockpit-tab .ck-tab-feit {
  color: var(--nt-muted); font-size: var(--nt-tekst-xs); line-height: 1.35;
}
/* De dringendheid zit in het icoon en de kleur van het feit, niet in een
   derde regel: zo staan de zes tabbladen even hoog (opmerking Frederik,
   augustus 2026). Het feit blijft op één regel; past de rij niet, dan schuift
   zij opzij. */
.cockpit-tab .ck-tab-feit.is-actie { color: var(--nt-actie); font-weight: 500; }

/* Op een smal scherm schuift de rij opzij in plaats van in hokjes te breken:
   zes vakjes van twee bij drie werd een raster, en dat was juist het uitzicht
   dat weg moest. De pagina zelf schuift niet mee. */
@media (max-width: 991.98px) {
  .cockpit-tabs { scrollbar-width: none; }
  .cockpit-tabs::-webkit-scrollbar { display: none; }
  .cockpit-tab { flex: 0 0 auto; max-width: 12rem; }
}

/* ── Kaart met een icoon, een titel, feiten en één actie ─────────────────────
   Opmerking Frederik, augustus 2026 bij de beheerpagina ("kijk hoe een lelijke
   lay-out"): de titel "Referentiedocumenten" liep buiten haar kaart en werd
   afgeknipt, de knoppen hadden elk een andere breedte en eentje sloeg om over
   twee regels. Drie oorzaken, alle drie hier opgelost:

   1. Een titel naast een icoon staat in een flexrij. Een flexkind krimpt
      standaard niet onder zijn inhoud (min-width: auto), dus een lang woord
      duwt zichzelf buiten de kaart. min-width: 0 plus afbreken lost dat op.
   2. De knop droeg de naam van de bestemming ("Naar de referentiedocumenten"),
      terwijl de titel er al boven stond. Eén kort opschrift op elke kaart
      houdt alle knoppen even breed.
   3. De feiten en de knop lijnen uit over kaarten met een verschillend aantal
      regels: de feitenlijst rekt op, de knop staat onderaan.               */
.nt-kaartkop {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1rem; min-width: 0;
}
.nt-kaartkop > .nt-kaarttitel {
  min-width: 0; flex: 1 1 auto; margin: 0;
  font-weight: 700; color: var(--nt-ink); font-size: var(--nt-tekst-lg);
  overflow-wrap: break-word;
}
/* In een smalle kaart (vier naast elkaar) staat het icoon BOVEN de titel.
   Naast elkaar bleef er te weinig over voor een lang woord als
   "Referentiedocumenten": dat brak dan middenin. Boven elkaar krijgt de titel
   de volle kaartbreedte en blijft zij één geheel. */
.nt-feitenlijst { list-style: none; padding: 0; margin: 0; flex: 1 1 auto; }
.nt-feitenlijst > li {
  display: flex; justify-content: space-between; gap: .5rem 1rem;
  /* Past de waarde niet naast haar opschrift, dan zakt zij naar de regel
     eronder in plaats van het opschrift over twee regels te duwen. */
  flex-wrap: wrap;
  padding: .35rem 0; font-size: var(--nt-tekst-sm);
  border-bottom: 1px solid var(--nt-line-2);
}
.nt-feitenlijst > li:last-child { border-bottom: 0; }
.nt-feitenlijst .nt-feitnaam { color: var(--nt-muted); min-width: 0; }
.nt-feitenlijst .nt-feitnaam { flex: 1 1 auto; }
.nt-feitenlijst .nt-feitwaarde {
  font-weight: 600; color: var(--nt-ink);
  margin-left: auto; text-align: right;
}
/* Eén knop per kaart, over de volle breedte: zo zijn ze allemaal even groot,
   ongeacht hun opschrift, en slaat er nooit een om over twee regels. */
.nt-kaartactie { margin-top: auto; width: 100%; white-space: nowrap; }

/* De kaart van het beheeroverzicht. Opdracht van Frederik, september 2026:
   "minder tekst en folietjes", consistente knoppen, en meteen duidelijk wat
   elk stuk behandelt. Vandaar één vorm voor alle kaarten: titel, één zin,
   één statusregel, één knop. De feitenlijsten van vier of vijf regels stonden
   in de weg en staan nu op de pagina zelf. */
.nt-beheerkaart { display: flex; flex-direction: column; height: 100%; }
.nt-beheerkaart .nt-kaartkop { margin-bottom: .75rem; }
.nt-beheeruitleg {
  margin: 0 0 .75rem; color: var(--nt-muted);
  font-size: var(--nt-tekst-sm); line-height: 1.5;
}
.nt-beheerstatus {
  margin: 0 0 1rem auto; margin-left: 0; margin-top: auto;
  padding-top: .75rem; border-top: 1px solid var(--nt-line-2);
  font-size: var(--nt-tekst-sm); font-weight: 600; color: var(--nt-ink);
}
/* Vraagt een onderdeel om actie, dan draagt de statusregel de kleur; er komt
   geen tweede regel bij die hetzelfde nog eens zegt. */
.nt-beheerstatus.is-actie { color: var(--nt-actie); }

/* Een rustige tussenkop binnen een groot invulblok, om de velden in groepen
   te leggen (het benoemingsblok: identiteit, adres, mandaat). Opmerking
   Frederik, 8 september 2026: "ik vind de kader rommelig. Dit moet
   gestructureerder en overzichtelijker." Klein en gedempt, met een fijne
   lijn die de groep opent; de eerste groep draagt de lijn niet. */
/* De groepskop staat BOVEN de veldnamen van zijn groep ("Identiteit" boven
   "Voornaam" en "Naam"), dus is hij groter dan zij: de kaderhoofdingmaat.
   Hij stond op 12,8 pixels in lichtgrijs, de kleinste en lichtste tekst van
   het blok, terwijl hij de hoogste kop is (zie .nt-eyebrow). */
.nt-veldgroepkop {
  margin: var(--nt-groepruimte) 0 .5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--nt-line-2);
  font-size: var(--nt-tekst-lg);
  font-weight: 600;
  color: var(--nt-ink);
}
.nt-veldgroepkop.is-eerste { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Een kader van het besluitformulier ───────────────────────────────────
   Opmerking Frederik, 24 september 2026, bij "Wie wordt benoemd": "Dit stuk
   vind ik momenteel erg rommelig. Veel verschillende formaten, witregels
   zijn niet consistent, plots andere kleuren ... Sommige dingen in de kader,
   andere erbuiten." Vier regels voor elk kader van elke handeling, bewaakt
   door KAARTVORM en KAARTRITME in tests/veldbreedtes_playwright.py:
     1. vijf tekstvormen: de titel (kop en groepskop, lg vet), de veldnaam
        (md half vet), de waarde (md, inkt), de toevoeging bij een veldnaam
        ("(verplicht)" of "(optioneel)": md, grijs) en de uitleg (sm, grijs);
     2. het icoon in de kop is indigo, bij elke handeling;
     3. geen kader in een kader: een groep opent met een lijn en een
        groepskop, een persoon met een dikkere lijn;
     4. overal evenveel wit tussen twee velden die onder elkaar staan. */
#decision-form .card-header .bi { color: var(--nt-indigo) !important; }
#decision-form .card-body .small { font-size: var(--nt-tekst-sm); }
#decision-form .card-body .text-muted { color: var(--nt-body) !important; }
#decision-form .card-body .form-check-label { font-size: var(--nt-tekst-md); color: var(--nt-ink); }
#decision-form .form-label .text-muted { color: var(--nt-body) !important; font-weight: 400; }
/* Een vinkje als laatste in zijn kolom draagt geen eigen ondermarge: het
   raster zorgt al voor het wit, anders stond er 31 pixels waar elders 22. */
#decision-form .row > * > .form-check:last-child { margin-bottom: 0; }
/* Een rij velden die op een gsm onder elkaar valt (een aandeelhouder: type,
   voornaam, achternaam, aandelen) houdt hetzelfde wit als elk ander veld,
   niet de halve ruimte van naast elkaar. */
#decision-form .nt-veldrij { row-gap: var(--bs-gutter-y, 1.2rem); }

/* Een persoon in een lijst (wie wordt benoemd, wie wordt ontslagen) staat
   niet meer in een grijs vak. Staan er twee of meer, dan scheidt een lijn ze
   en draagt elk de verwijderknop rechtsboven op een eigen regel; staat er
   maar één, dan is er niets te verwijderen. */
.person-block { position: relative; }
.person-block + .person-block {
  margin-top: var(--nt-ruimte-6);
  padding-top: var(--nt-groepruimte);
  border-top: 2px solid var(--nt-line-2);
}
.person-block .remove-person { display: flex; margin: 0 0 var(--nt-ruimte-2) auto; }
.person-block:only-child .remove-person { display: none; }
/* Opent de persoon met een groepskop (Identiteit), dan staat de knop rechts
   op de hoogte van die kop, niet op een eigen regel erboven. */
.person-block:has(> .nt-veldgroepkop) > .remove-person {
  position: absolute; right: 0; margin: 0;
  /* De bovenmarge van de kop valt samen met die van het blok, dus de kop
     begint op de lijn: de knop staat de binnenruimte van de kop lager. */
  top: calc(.85rem - 4px);
}
.person-block + .person-block:has(> .nt-veldgroepkop) > .remove-person {
  top: calc(var(--nt-groepruimte) - 4px);
}
/* Na de lijn tussen twee personen opent de eerste groep zonder eigen lijn. */
.person-block + .person-block > .nt-veldgroepkop:first-of-type {
  margin-top: 0; padding-top: 0; border-top: 0;
}
.person-block:last-child { margin-bottom: var(--nt-ruimte-5); }
/* Een groep die in een kolom van het raster staat ("Wie beslist", "Gegevens
   van de vergadering"): het raster draagt al een deel van de groepsruimte,
   zodat de lijn even ver onder het vorige veld staat als elders. */
.row > * > .nt-veldgroep > .nt-veldgroepkop:first-child {
  margin-top: calc(var(--nt-groepruimte) - var(--bs-gutter-y, 0px));
}

/* Een lijst met namen achter elkaar, in kolommen, zonder opsommingstekens:
   voor de achtergrondlijst van genoteerde vennootschappen. */
.nt-namenlijst {
  list-style: none; padding: 0; margin: 0;
  columns: 3; column-gap: 2rem;
  font-size: var(--nt-tekst-sm);
}
.nt-namenlijst > li { padding: .2rem 0; break-inside: avoid; }
@media (max-width: 767.98px) { .nt-namenlijst { columns: 1; } }

/* Een NAAM wordt nooit afgeknipt. Regel van Frederik, augustus 2026: een
   vennootschapsnaam, een documenttitel of een bestandsnaam die halverwege
   ophoudt ("Kennisname van het ontslag van een bestu...") zegt de gebruiker
   niets meer. Zulke regels lopen dus door op een tweede regel in plaats van
   te worden afgekapt. Een BIJREGEL met datums mag wél worden afgeknipt: daar
   is de eerste helft nog bruikbaar. Zet deze klasse in de plaats van
   text-truncate op elke regel die iets of iemand benoemt. */
.nt-naamregel {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}


/* De icoontegel van de foutpagina's en het notarisportaal: één vlak, één
   kleur, geen verloop, zoals op de homepage van de website. */
.home-tool-icon {
  width: 64px; height: 64px; border-radius: var(--nt-radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--nt-violet-vlak); color: var(--nt-indigo);
  font-size: 1.7rem;
}

/* ── Lay-outpass (feedback: meer ruimte tussen kaders, tekst en lijnen) ─────── */
.card .card-body { padding: 1.35rem 1.5rem; }
.card .card-header { padding: 0.95rem 1.5rem; }
.card .card-footer { padding: 0.95rem 1.5rem; }
.card { margin-bottom: 0; }
#decision-form .card { margin-bottom: 2rem; }
#decision-form .row.g-3 { --bs-gutter-y: 1.2rem; }
#decision-form .card-header { font-size: var(--nt-tekst-lg); }
.form-text { margin-top: 0.35rem; font-size: var(--nt-tekst-sm); }
.form-check { margin-bottom: 0.35rem; }
/* Keuzes naast elkaar op één regel: de ondermarge is er voor keuzes onder
   elkaar. Op een regel gaf zij negen pixels te veel wit boven het volgende
   veld (meting KAARTRITME, 25 september 2026, bij één hand). */
.d-flex > .form-check { margin-bottom: 0; }

/* Duidelijkere selectievakjes overal in de tool */
.form-check-input {
  width: 1.15em; height: 1.15em; margin-top: 0.16em;
  border-width: 1.5px; border-color: #9aa4bf;
}
.form-check-input:focus { border-color: var(--nt-primary); box-shadow: 0 0 0 .2rem rgba(67,56,202,.18); }
/* Een aangevinkt vakje of een gekozen rondje in indigo. Bootstrap zet daar
   zijn eigen blauw (#0d6efd), en dat stond naast het indigo van het thema
   bij elke keuze in de tool (vastgesteld 24 september 2026, bij de vraag
   Nee of Ja naar de soorten bestuurders). */
.form-check-input:checked, .form-check-input:indeterminate {
  background-color: var(--nt-indigo); border-color: var(--nt-indigo);
}

/* Door de tool voorgestelde tekst (placeholders): zelfde grootte als de
   ingevulde tekst, maar lichter en cursief, zodat meteen duidelijk is dat het
   om een voorstel gaat en de tekst niet verspringt zodra de gebruiker typt.
   De regel viel op 8 september 2026 half weg bij een opruimbeurt: de
   selectors bleven staan zonder hun eigenschappen en plakten aan de regel
   hieronder vast. Vastgesteld op 25 september 2026, toen de voorbeeldvragen
   in Vraag het aan Notuleo schuin moesten staan en het niet deden. */
.form-control::placeholder, textarea.form-control::placeholder {
  font-style: italic; color: var(--nt-muted); opacity: 1;
}

/* ── Eén lettertype en één veldformaat in elk formulier ─────────────────────
   Datum-, tijd- en bestandsvelden nemen zonder deze regels het lettertype en
   de opmaak van het besturingssysteem over: ze ogen dan plots anders dan de
   velden ernaast. */
.form-control, .form-select, textarea, select, input, button, .btn,
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="file"] {
  font-family: var(--bs-body-font-family);
}
input[type="date"].form-control, input[type="time"].form-control,
input[type="datetime-local"].form-control {
  font-size: var(--nt-tekst-md); line-height: 1.5;
  min-height: calc(1.5em + 1.2rem + 2px);
}
input[type="date"].form-control-sm, input[type="time"].form-control-sm {
  font-size: var(--nt-tekst-sm);
  min-height: calc(1.5em + .5rem + 2px);
}
/* Kalender- en klokicoon rustig in beeld in plaats van hard zwart */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: .5; cursor: pointer;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { opacity: .85; }
/* Bestandsveld: het echte veld gaat schuil achter een eigen knop met een
   Nederlandse tekst (de systeemknop staat in de taal van het toestel). */
.nt-file { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.nt-file .nt-file-input { position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.nt-file .nt-file-name { font-size: var(--nt-tekst-md); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Leesbare, gestructureerde tooltips overal (geen pikzwart kader) */
.tooltip { --bs-tooltip-opacity: 1; }
.tooltip-inner {
  background: #ffffff; color: #1f2a44; text-align: left; max-width: 320px;
  padding: .55rem .75rem; font-size: var(--nt-tekst-sm); line-height: 1.5;
  border: 1px solid #d7dbe4; border-radius: .55rem; box-shadow: 0 8px 24px rgba(20,30,60,.16);
}
.tooltip-inner strong { color: #0f1a33; }
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #d7dbe4; }
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #d7dbe4; }
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #d7dbe4; }
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #d7dbe4; }
.list-group-item { padding-top: 0.85rem; padding-bottom: 0.85rem; }
.alert { padding: 0.9rem 1.1rem; }
h5, .h5 { margin-bottom: 0.65rem; }
h6, .h6 { margin-bottom: 0.5rem; }
hr { margin-top: 1.15rem; margin-bottom: 1.15rem; }
.table > :not(caption) > * > * { padding-top: 0.65rem; padding-bottom: 0.65rem; }
.breadcrumb { margin-bottom: 0.85rem; }


/* ── Uniforme knoppen en actierijen (feedback: balkjes even groot, tekst
      gecentreerd — geldt sitewide) ──────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; }
.btn > .bi { line-height: 1; }
.card-footer .form-control-sm,
.card-header .form-control-sm { height: calc(1.5em + .5rem + 2px); }

/* ── Bèta-markering (notarisbrug in testfase) ───────────────────────────────── */
.nt-beta {
  background: var(--nt-violet-vlak);
  color: var(--nt-indigo-800);
  border: 1px solid var(--nt-line-2);
  font-size: var(--nt-tekst-xs);
  vertical-align: middle;
}

/* ── Prijzen: elk onderdeel (Documenten / Cockpit) in een eigen kader ───────── */
.pricing-group {
  background: var(--nt-bg);
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-lg);
  padding: 1.75rem;
}
@media (max-width: 575.98px) { .pricing-group { padding: 1.1rem; } }

/* Fichekader "De handeling en de regels" (stap 1 van de begeleide flow):
   compacter lettertype en een net stappenplan met hangende inspringing. */
.playbook-kader { font-size: var(--nt-tekst-md); }
.playbook-kader .small { font-size: var(--nt-tekst-sm); }

/* Verzorgde fiche (stap 1: het stappenplan en de regels) */
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.5rem; }
.fiche .fiche-field.span2 { grid-column: 1 / -1; }
.fiche .fiche-label {
  display: flex; align-items: center; gap: .45rem;
  /* Een tussentitel: minstens de maat van de tekst eronder (zie .nt-eyebrow). */
  font-size: var(--nt-tekst-md); font-weight: 600;
  /* Ruimte onder het titeltje: het label mag niet tegen zijn tekst plakken
     (feedback Frederik, augustus 2026). */
  color: var(--nt-ink); margin-bottom: .55rem;
}
/* Geen iconen meer bij de labels: acht iconen op één fiche was ruis. Alleen
   de kopbalk van de kaart draagt er nog een (feedback Frederik, augustus 2026). */

/* De fiche leest in drie groepen: de regels (orgaan, meerderheid, quorum),
   het proces (stappenplan, resultaat, formaliteiten) en de bron. Een dunne
   lijn markeert de overgang, zodat het geen lange reeks losse blokken is. */
.fiche .fiche-groep {
  border-top: 1px solid var(--nt-line-2);
  padding-top: 1.15rem;
  margin-top: .1rem;
}
.fiche .fiche-value { color: var(--nt-body); font-size: var(--nt-tekst-md); line-height: 1.55; }
/* Meerdere zinnen in een fiche-veld lezen als opsomming, niet als tekstblok. */
.fiche .fiche-punten { margin: 0; padding-left: 1.05rem; }
.fiche .fiche-punten li { margin-bottom: .3rem; }
.fiche .fiche-punten li:last-child { margin-bottom: 0; }
.fiche .fiche-punten li::marker { color: var(--nt-primary-600); }
.fiche .fiche-value.strong { color: var(--nt-ink); font-weight: 600; }
/* Rechtsgrond: één blok per rechtsvorm, gescheiden door een dunne lijn. De
   rechtsvorm staat voluit ("Besloten vennootschap"), één artikel volgt op
   dezelfde regel, meerdere artikelen komen eronder als opsomming. Het vroegere
   tweekolomsgrid brak korte labels als "BV" in sommige browsers verticaal af;
   deze opbouw kent dat probleem niet meer (gemeld door Frederik). */
.fiche .fiche-rechtsgrond { display: block; }
.fiche .fiche-rechtsgrond .rg-blok,
.fiche .fiche-rechtsgrond .rg-vrij { padding: .45rem 0; }
.fiche .fiche-rechtsgrond .rg-blok:first-child,
.fiche .fiche-rechtsgrond .rg-vrij:first-child { padding-top: 0; }
.fiche .fiche-rechtsgrond .rg-blok:last-child,
.fiche .fiche-rechtsgrond .rg-vrij:last-child { padding-bottom: 0; }
.fiche .fiche-rechtsgrond .rg-blok + .rg-blok,
.fiche .fiche-rechtsgrond .rg-blok + .rg-vrij,
.fiche .fiche-rechtsgrond .rg-vrij + .rg-blok {
  border-top: 1px solid var(--nt-line-2);
}
.fiche .fiche-rechtsgrond .rg-vorm {
  font-weight: 600;
  color: var(--nt-ink);
  /* Breken mag alleen op een spatie, nooit middenin een rechtsvorm. */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
.fiche .fiche-rechtsgrond .rg-scheiding { color: var(--nt-muted); }
.fiche .fiche-rechtsgrond .rg-lijst {
  list-style: none; margin: .3rem 0 0; padding: 0;
}
.fiche .fiche-rechtsgrond .rg-lijst li {
  position: relative; padding-left: .95rem; margin-bottom: .22rem;
}
.fiche .fiche-rechtsgrond .rg-lijst li:last-child { margin-bottom: 0; }
.fiche .fiche-rechtsgrond .rg-lijst li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .3rem; height: .3rem; border-radius: 50%;
  background: var(--nt-primary-600);
}
.fiche .fiche-caveat {
  display: block; margin-top: -.35rem; font-size: var(--nt-tekst-xs);
  color: var(--nt-muted); line-height: 1.45;
}
/* Het handmerk van de tool. Een handeling ÍS een volgorde, dus hier mag het
   verloop voluit: de nummers zijn bollen met het verloop erin, verbonden door
   een haarlijn die van indigo naar mint loopt (THEMA.md punt 6). Dit is de
   enige plaats waar het verloop een vlak vult.

   De lijn hoort bij de STAPPEN, niet bij het blok. Zij stond eerst op het blok
   zelf, van boven tot onder, en liep dan dwars door de inleidende zin boven
   stap 1 (opmerking Frederik, 8 september 2026: "meer ruimte en vorm mag niet
   over de tekst"). Elke stap tekent nu zijn eigen stukje lijn naar de
   volgende, dus er staat nooit een lijn waar geen bollen zijn. */
/* HET STAPPENPLAN ALS EEN ECHTE TIJDLIJN
   Frederik, 9 september 2026: "de tekst staat bij sommige in het midden van de
   nummers en bij andere niet, de lijntjes lopen niet door". Beide klachten
   kwamen uit dezelfde meetfout in de opmaak.

   1. De bol was 32 pixels hoog en de tekstregel 24, en de tekst kreeg een
      duwtje van 3 pixels om dat te verbergen. Bij één regel viel dat niet op,
      bij drie wel. De bol is nu even hoog als de tekstregel zelf
      (--fstep-regel), dus vallen hun middens samen, of de stap nu één regel
      telt of vijf. Niet bijregelen met een marge: dan klopt het bij de ene
      lettergrootte en niet bij de andere.
   2. De lijn liep alleen door de tussenruimte (1,1rem), terwijl het gat tussen
      twee bollen 34 tot 57 pixels was: onder elke bol bleef een leeg stuk
      staan. Zij loopt nu van de onderkant van de bol tot de bovenkant van de
      volgende, hoe lang de tekst er ook tussen staat. Zij blijft per stap
      getekend, zodat er nooit een lijn staat waar geen bollen zijn (regel van
      8 september 2026: vorm mag niet over tekst lopen). */
.fiche-steps {
  --fstep-regel: 1.625rem;   /* de hoogte van één tekstregel én van de bol */
  --fstep-gat: var(--nt-ruimte-5);
}
.fiche-steps .fstep {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-bottom: var(--fstep-gat); position: relative;
}
.fiche-steps .fstep:last-child { margin-bottom: 0; }
.fiche-steps .fstep:not(:last-child)::before {
  content: ""; position: absolute; width: 2px; border-radius: 2px;
  left: calc(var(--fstep-regel) / 2 - 1px);
  top: var(--fstep-regel);
  bottom: calc(var(--fstep-gat) * -1);
  background: linear-gradient(180deg, rgba(67,56,202,.3), rgba(45,212,191,.3));
}
.fstep-num {
  flex: 0 0 auto;
  width: var(--fstep-regel, 1.625rem); height: var(--fstep-regel, 1.625rem);
  border-radius: 50%;
  background: var(--nt-verloop-diep); color: #fff;
  font-weight: 600; font-size: var(--nt-tekst-xs);
  display: flex; align-items: center; justify-content: center;
}
.fiche-steps .fstep-txt {
  font-size: var(--nt-tekst-md); color: var(--nt-body);
  line-height: var(--fstep-regel);
}
/* Een titel draagt lucht onder zich (regel van Frederik, 8 september 2026:
   "nu plakt de titel veel te dicht tegen de tekst"). */
.fiche-steps .fstep-kop {
  font-weight: 600; color: var(--nt-ink); font-size: var(--nt-tekst-md);
  margin: .4rem 0 .6rem;
}
/* Meerdere stappenplannen (bestuursmodel onbekend): alleen de koppen, de
   gebruiker klapt open wat hij nodig heeft (augustus 2026). */
.fiche-steps details.fstep-blok { margin: .25rem 0; border: 1px solid var(--nt-line, #e3e7ee); border-radius: .5rem; padding: .35rem .6rem; background: #fff; }
.fiche-steps details.fstep-blok > summary.fstep-kop { cursor: pointer; margin: 0; list-style: none; display: flex; align-items: center; gap: .45rem; }
.fiche-steps details.fstep-blok > summary.fstep-kop::before { content: "\25B8"; font-size: .8rem; color: var(--nt-accent, #1f3b63); transition: transform .15s ease; }
.fiche-steps details.fstep-blok[open] > summary.fstep-kop::before { transform: rotate(90deg); }
.fiche-steps details.fstep-blok > summary.fstep-kop::-webkit-details-marker { display: none; }
.fiche-steps details.fstep-blok[open] { padding-bottom: .5rem; }
.fiche-steps .fstep-plain {
  font-size: var(--nt-tekst-md); color: var(--nt-body); margin-bottom: 1rem;
}
/* Het tweede niveau onder een stap: wat op datzelfde moment gebeurt (regel
   van Frederik, 22 september 2026). Het staat binnen de tekst van de stap,
   zodat de verbindingslijn tussen de bollen erlangs doorloopt. */
.fiche-steps .fstep-deel {
  margin: .35rem 0 0; padding-left: 1.15rem; list-style: disc;
}
.fiche-steps .fstep-deel li { margin-bottom: .2rem; }
.fiche-steps .fstep-deel li::marker { color: var(--nt-accent, #4338ca); }
/* Een slotregel onder het plan volgt na de laatste bol: geen lijn eronder. */
.fiche-steps .fstep:has(~ .fstep)::before { display: block; }
.fiche-steps .fstep:not(:has(~ .fstep))::before { display: none; }
/* De slotregel hoort bij het plan, dus staat zij er dichter onder dan twee
   stappen bij elkaar staan, en zij draagt geen eigen ondermarge: de ruimte
   tot het volgende veld is dezelfde als tussen elke twee velden (Frederik, 24
   september 2026: "hier boven en onder is wat te veel witregel"). Zij stond
   32 pixels onder de laatste stap, even ver als twee stappen van elkaar, en 38
   pixels boven het volgende veld, waar twee velden elders 22 pixels uit
   elkaar staan: haar marge van 1rem telde op bij de rasterruimte. */
.fiche-steps .fstep:has(+ .fstep-plain) { margin-bottom: 0; }
.fiche-steps .fstep + .fstep-plain {
  /* 8 pixels marge geeft 16 zichtbaar (met de regelruimte erbij): duidelijk
     dichter bij het plan dan de 22 tot het volgende veld, zodat het oog ziet
     waar zij bij hoort. Met 12 werd het 20 tegen 22, en dat zag niemand. */
  margin-top: var(--nt-ruimte-2); color: var(--nt-muted, #5b6472);
}
/* Het laatste element van een veld draagt nooit een ondermarge, op welke
   diepte ook: in een raster telt die op bij de ruimte tussen de velden, en dan
   staat er onder het ene veld meer wit dan onder het andere. Eerst stond hier
   alleen het directe kind, en dan bleef het segment onder het plan van het
   ontslag (.fstep-naschrift) met zijn laatste alinea 16 pixels te veel geven. */
.fiche .fiche-field :last-child { margin-bottom: 0; }

/* Het segment dat de fiche zelf onder het stappenplan plaatst (fiche 2 en 3,
   augustus 2026). Het hoort bij de stappen maar is er geen: een dunne lijn
   erboven scheidt het, zonder er een tweede kader van te maken. */
.fiche-steps .fstep-naschrift {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--nt-line-2);
}
.fiche-afwijk { background: var(--nt-primary-050); border: 1px solid var(--nt-primary-100); border-radius: var(--nt-radius-sm); padding: 1rem 1.15rem; }
.fiche-afwijk .afwijk-kop {
  display: flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: var(--nt-tekst-md); color: var(--nt-ink); margin-bottom: .25rem;
}
.fiche-afwijk .afwijk-kop i { color: var(--nt-primary-600); }
.fiche-afwijk .afwijk-uitleg {
  font-size: var(--nt-tekst-sm); color: var(--nt-muted); line-height: 1.45; margin: 0 0 .8rem;
}
/* Het soort document, het bestand en de knop op één lijn. Zonder deze regels
   valt de bestandsnaam onder de kiesknop en oogt het kader rommelig. */
.fiche-afwijk .afwijk-rij {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.fiche-afwijk .afwijk-soort { flex: 0 1 13rem; width: auto; }
.fiche-afwijk .afwijk-rij .nt-file {
  flex: 1 1 11rem; min-width: 0; flex-wrap: nowrap; gap: .5rem;
}
.fiche-afwijk .afwijk-rij .nt-file .nt-file-btn { flex: 0 0 auto; }
.fiche-afwijk .afwijk-rij .nt-file .nt-file-name { flex: 1 1 auto; }
.fiche-afwijk .afwijk-knop { flex: 0 0 auto; margin-left: auto; }
.fiche-afwijk .afwijk-kluis {
  flex: 1 1 auto; min-width: 0; font-size: var(--nt-tekst-sm); color: var(--nt-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 575.98px) {
  .fiche-afwijk .afwijk-soort { flex: 1 1 100%; }
  .fiche-afwijk .afwijk-knop { margin-left: 0; flex: 1 1 100%; }
}
@media (max-width: 575.98px) { .fiche { grid-template-columns: 1fr; } }

/* ── Stepper van de begeleide flow (Nieuwe handeling) ─────────────────────── */
.wizard-stepper { display: flex; align-items: flex-start; }
.wizard-stepper .wizard-tab {
  position: relative;
  flex: 1;
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}
.wizard-stepper .wizard-tab:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  right: calc(50% + 22px);
  left: calc(-50% + 22px);
  height: 2px;
  border-radius: 1px;
  background: var(--nt-line);
  transition: background .2s ease;
}
.wizard-stepper .wizard-tab.done:not(:first-child)::before,
.wizard-stepper .wizard-tab.active:not(:first-child)::before {
  background: var(--nt-primary);
}
.wizard-stepper .ws-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--nt-surface);
  border: 2px solid var(--nt-line);
  color: var(--nt-muted);
  font-weight: 600;
  font-size: .85rem;
  transition: all .2s ease;
}
.wizard-stepper .ws-check { display: none; font-size: 1rem; }
.wizard-stepper .wizard-tab.done .ws-dot {
  background: var(--nt-primary);
  border-color: var(--nt-primary);
  color: #fff;
}
.wizard-stepper .wizard-tab.done .ws-num { display: none; }
.wizard-stepper .wizard-tab.done .ws-check { display: block; }
.wizard-stepper .wizard-tab.active .ws-dot {
  background: var(--nt-primary);
  border-color: var(--nt-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--nt-primary-100);
}
.wizard-stepper .ws-label {
  font-size: var(--nt-tekst-xs);
  font-weight: 500;
  color: var(--nt-muted);
  line-height: 1.2;
  text-align: center;
}
.wizard-stepper .wizard-tab.active .ws-label { color: var(--nt-ink); font-weight: 600; }
.wizard-stepper .wizard-tab.done .ws-label { color: var(--nt-body); }
.wizard-stepper .wizard-tab:hover .ws-dot { border-color: var(--nt-primary); }
@media (max-width: 575.98px) {
  .wizard-stepper .ws-label { font-size: var(--nt-tekst-xs); }
  .wizard-stepper .wizard-tab:not(:first-child)::before {
    right: calc(50% + 18px); left: calc(-50% + 18px);
  }
}

/* Zachte actieknoppen (reviewpagina en verwante kaarten): rustig tintvlak
   in de huisstijl; alleen de downloadknop blijft gevuld primair. */
.btn-soft {
  background: var(--nt-primary-050); color: var(--nt-primary-700);
  border: 1px solid var(--nt-primary-100); font-weight: 500;
}
.btn-soft:hover, .btn-soft:focus {
  background: var(--nt-primary-100); color: var(--nt-primary-700);
  border-color: var(--nt-primary-100);
}
.btn-soft:disabled { background: var(--nt-primary-050); color: var(--nt-primary-700); border-color: var(--nt-primary-100); opacity: .45; }
/* Gelijke maat voor de hoofdacties op de reviewpagina. */
@media (max-width: 575.98px) { .review-actie { min-width: 100%; } }

/* Uitgelichte formulekaart op de prijzenpagina's. */
.pricing-card-featured {
  border: 1px solid var(--nt-primary) !important;
  box-shadow: 0 .5rem 1.25rem rgba(51, 85, 255, .12) !important;
}
/* Zachte hover op de vennootschapskaarten. */
/* ── Velden die hun inhoud tonen ──────────────────────────────────────────
   Terugkerende klacht van Frederik: "de data passen niet goed in de
   kadertjes". Een rij invoervelden hoort niet in vaste kolommen te staan die
   te smal zijn voor wat erin komt ("Lid van de raad van toezicht", een datum
   voluit). Deze rij verdeelt de ruimte naar wat elk veld nodig heeft en gaat
   op een smal scherm netjes onder elkaar. Een test bewaakt dit op alle
   formulieren (tests/test_veldbreedtes.py). */
.nt-veldrij {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.nt-veldrij .nt-veld { min-width: 0; }
.nt-veldrij .nt-veld-naam { flex: 3 1 13rem; }
.nt-veldrij .nt-veld-functie { flex: 2 1 12.5rem; }
.nt-veldrij .nt-veld-datum { flex: 1 1 9.5rem; }
/* De drie kolommen van een bestuurdersrij. Aanleiding: een functie die door
   haar kadertje werd afgeknipt (opmerking Frederik, september 2026). De maten
   komen sindsdien uit de LEVENDE KBO (223 vennootschappen, 351 functiehouders),
   niet uit een geschatte waarde. Een geschatte waarde ging namelijk meteen mis:
   de datumkolom werd op "14 oktober 2023" geijkt en was zeven pixels te smal
   voor elke datum in september, waardoor een doorsnee dossier de rijen liet
   stapelen.
     functie  de breedste keuze is "Vaste vertegenwoordiger", 167px, plus rand,
              binnenmarge en de ruimte voor het pijltje: 14rem (was 13,2rem
              tot de keuzelijst op 25 september 2026 haar pijltje vrijhield). De KBO-lezing brengt elke functie op deze
              vaste woordenlijst, dus deze kolom heeft een echte bovengrens.
     datum    de breedste datum is "30 september 2024", 132px plus rand: 10rem.
              Alle twaalf maandnamen komen in de gegevens voor, dus september
              is het uiterste en geen aanname.
     naam     krijgt de rest en als enige groeiruimte, want een naam heeft geen
              bovengrens ("Notariële bestuursvennootschap VAN TULDEN Bart").
              Wat er niet meer in past, laat de groep stapelen. */
.nt-veldrij-functie .nt-veld-naam { flex: 3 1 13.9rem; }
.nt-veldrij-functie .nt-veld-functie { flex: 0 1 14rem; }
.nt-veldrij-functie .nt-veld-datum { flex: 0 1 10rem; }
@media (max-width: 575.98px) {
  .nt-veldrij .nt-veld { flex: 1 1 100%; }
}
/* Opschrift boven een rij invoervelden. Zonder die woorden is niet duidelijk
   wat een kolom aangeeft, zeker bij een datum (feedback Frederik, augustus
   2026). De opschriften staan in dezelfde flexverdeling als de velden zelf,
   zodat ze altijd boven de juiste kolom blijven staan. */
.nt-veldkoppen {
  font-size: var(--nt-tekst-md); color: var(--nt-ink); font-weight: 500;
  /* Gelijk aan de binnenrand van een bestuurdersrij (p-2 plus de rand),
     zodat kop en veld exact boven elkaar staan. */
  padding: 0 calc(.5rem + 1px) .25rem;
}
/* Ruimte voor de verwijderknop rechts van elke rij, zodat de opschriften
   niet één knopbreedte verschuiven. Even breed als de vrijgehouden hoek van
   .nt-rijkader hieronder. */
.nt-veldkop-ruimte { flex: 0 0 2.25rem; }

/* De verwijderknop van een invulrij staat als rood vuilbakje in de
   RECHTERBOVENHOEK van haar kader.

   Regel van Frederik, september 2026, bij de bestuurdersrij: "het X'je staat
   op een rare plaats, ik zou er een vuilbakje van maken (zo met rood) en dat
   in de hoek zetten." Zij stond als laatste veld ín de rij, dus zodra de
   velden op een smal scherm onder elkaar gaan, belandde zij ergens
   halverwege het kader, tussen een datumveld en een keuzevakje. In de hoek
   staat zij altijd op dezelfde plaats, op elk schermformaat. Het kruisje
   werd meteen een vuilbakje, zoals overal elders in de tool. */
/* De letterlijke instructie die Notuleo krijgt, op de beheerpagina
   Documentstructuur. Zij moet leesbaar blijven als een lap tekst: vaste
   breedte, regels die omslaan, en schuiven wanneer een regel toch te lang is
   in plaats van de bladzijde opzij te duwen. */
.nt-prompttekst {
  margin: 0;
  padding: 14px 16px;
  background: var(--nt-bg);
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--nt-tekst-sm);
  line-height: 1.6;
  color: var(--nt-body);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 34rem;
  overflow-y: auto;
}

.nt-rijkader { position: relative; padding-right: 2.25rem !important; }
.nt-rijverwijder {
  position: absolute;
  top: .3rem;
  right: .3rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--nt-radius-sm);
  background: transparent;
  color: var(--nt-gevaar);
  line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.nt-rijverwijder:hover, .nt-rijverwijder:focus-visible {
  background: var(--nt-gevaar-vlak);
  border-color: var(--nt-gevaar-rand);
}
/* Opschrift per veld, alleen op een smal scherm: daar staat de kolomrij niet
   meer boven de velden. */
/* Eén opschrift voor élk veld in een rij, en het ziet er overal hetzelfde uit.
   Opmerking Frederik, september 2026: "wat raar dat NAAM, FUNCTIE, IN FUNCTIE
   SINDS in hoofdletters staat en ondernemingsnummer, vaste vertegenwoordiger
   en vertegenwoordiger sinds niet. Consistentie". In dezelfde kaart stonden
   twee soorten opschrift die op vijf punten verschilden: grootte, dikte,
   kleur, letterafstand en kapitalen. Gewone letters winnen, want zo staan de
   opschriften in de rest van de tool (366 keer `form-label` tegenover elf keer
   kapitalen). Deze drie klassen dragen daarom dezelfde vier eigenschappen; een
   toets in test_ontwerpregels.py laat ze niet meer uit elkaar lopen. */
.nt-veldlabel {
  display: block; font-size: var(--nt-tekst-md);
  color: var(--nt-ink); font-weight: 500;
  margin-bottom: .15rem;
}
/* Opschrift per veld voor de gestapelde vorm. Stond eerder als d-sm-none in
   het sjabloon, maar dan is de regel niet meer terug te draaien wanneer een
   rij ook op een laptop moet stapelen (zie hieronder). */
.nt-veldlabel-smal { display: none; }
@media (max-width: 575.98px) { .nt-veldlabel-smal { display: block; } }
/* Een waarde die van BUITEN komt, kent geen bovengrens die het scherm kan
   afdwingen: de KBO schrijft de functie van een bestuurder voluit. Een
   keuzelijst kan haar tekst niet afbreken, dus hoe breed de kolom ook wordt
   gemaakt, er bestaat altijd een langere functie. Past er iets niet, dan gaat
   de hele groep rijen op zijn kant: elk veld op zijn eigen regel met zijn
   eigen opschrift, precies zoals op een gsm. Liever een rij hoger dan een
   woord dat de gebruiker niet leest (regel van Frederik, september 2026:
   "geen tekst mag door haar kader worden afgeknipt"). */
.nt-veldgroep-gestapeld .nt-veldrij .nt-veld { flex: 1 1 100%; }
.nt-veldgroep-gestapeld .nt-veldlabel-smal { display: block; }
/* ── Voettekst van een kaart ──────────────────────────────────────────────
   Eén rustige strook onderaan een kader, in plaats van meerdere gestapelde
   banden met knoppenbalken (feedback Frederik, augustus 2026, over het
   UBO-kader). Links de handeling met haar status, rechts de documenten als
   gewone tekstlinks. Op een smal scherm komen de groepen onder elkaar. */
/* Twee vaste regels onder elkaar in plaats van twee groepen die om de
   breedte vechten: dat laatste liet het datumveld en zijn knop op elkaar
   springen en gaf een gat in het midden (feedback Frederik, augustus 2026). */
/* Het datumveld in een voettekst blijft op zijn eigen maat: het mag de rij
   niet uit elkaar duwen. */

/* Een keuzelijst knipt haar tekst af achter het pijltje. Genoeg ruimte laten
   is de enige echte oplossing; deze regel voorkomt dat de tekst ónder het
   pijltje doorloopt. */
.form-select { text-overflow: ellipsis; }
/* Zoekveld met knop: op een smal scherm gaat de knop onder het veld. Anders
   knijpt de knop het invoerveld tot een paar tekens breed. */
@media (max-width: 575.98px) {
  .nt-kbo-zoekrij { flex-wrap: wrap; }
  .nt-kbo-zoekrij > .form-control {
    flex: 1 1 100%; border-radius: var(--nt-radius-sm) !important;
  }
  .nt-kbo-zoekrij > .btn {
    flex: 1 1 100%; margin-top: .5rem;
    border-radius: var(--nt-radius-sm) !important;
  }
}
/* ── Handelingenkaart ────────────────────────────────────────────────────────
   Eén opmaak voor de publieke catalogus én voor de kiezer in de tool. Beide
   pagina's renderen dezelfde partial (_handelingenlijst.html), zodat ze er
   identiek uitzien en niet uit de pas kunnen lopen. De kaart draagt ALLEEN de
   titel; de uitleg staat in de hulpballon bij het vraagteken (wens Frederik,
   augustus 2026). Daardoor zijn alle kaarten even hoog en staat er nergens een
   afgekapte zin. */
.nt-handelingkaart {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  height: 100%;
  padding: .85rem 1rem;
  background: var(--nt-surface);
  border: 1.5px solid var(--nt-line);
  border-radius: var(--nt-radius);
  color: var(--nt-ink);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nt-handelingkaart:hover {
  border-color: var(--nt-primary);
  box-shadow: var(--nt-shadow);
  transform: translateY(-1px);
  color: var(--nt-ink);
}
/* Aangevinkt: alleen in de tool, want alleen daar staat er een keuzevakje in. */
.nt-handelingkaart:has(input:checked) {
  border-color: var(--nt-primary);
  background: var(--nt-primary-050);
  box-shadow: 0 0 0 3px rgba(51, 85, 255, .12);
}
.nt-handelingkaart .type-pick { margin: 0 !important; }
.nt-handelingkaart-tekst {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
/* De titel van een handeling is een REGEL in een lijst van meer dan honderd,
   geen kaderhoofding (wens Frederik, 9 september 2026: "het lettertype van de
   handelingen zelf mag iets kleiner"). Op de hoofdingmaat las de lijst als
   honderd koppen onder elkaar. Zij staat nu op de maat van de gewone tekst;
   de rubriekkop erboven houdt de hoofdingmaat, zodat de rangorde blijft. */
.nt-handelingkaart-titel {
  display: block;
  font-weight: 600;
  font-size: var(--nt-tekst-md);
  line-height: 1.35;
}
.nt-handelingkaart-moeder {
  display: block;
  margin-top: .1rem;
  font-size: var(--nt-tekst-sm);
  color: var(--nt-muted);
}
/* Het keuzevakje, het vraagteken en de pijl staan op de hoogte van de EERSTE
   regel van de titel, niet in het midden van een kaart die door haar buur is
   uitgerekt. */
.nt-handelingkaart .type-pick { margin-top: .12rem !important; }
.nt-handelingkaart-hulp {
  flex-shrink: 0;
  margin-top: .1rem;
  font-size: var(--nt-tekst-md);
  color: var(--nt-muted);
  cursor: help;
}
.nt-handelingkaart-pijl {
  flex-shrink: 0;
  margin-top: -.1rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--nt-primary);
}

/* Tussentitels boven elke rubriek handelingen. Waren kleine grijze
   hoofdletters en gingen daardoor visueel verloren tussen de kaarten
   (feedback Frederik, augustus 2026: "die mogen iets duidelijker"). Nu een
   icoon in een gekleurd vierkantje, de titel donker en groter, en een fijne
   lijn die de rubriek van de vorige afsluit. */
.nt-rubriek { margin-bottom: 2rem; }
.nt-rubriekkop {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .85rem;
}
.nt-rubriekicoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: var(--nt-radius-tegel);
  background: var(--nt-violet-vlak);
  color: var(--nt-indigo);
  font-size: 1rem;
}
.nt-rubriektitel {
  /* Ook als <h2> gebruikt (het beheeroverzicht), dus de eigen marge van een
     kop moet weg; anders staat de lijn ernaast niet meer op ooghoogte. */
  margin: 0;
  font-weight: 700;
  font-size: var(--nt-tekst-lg);
  line-height: 1.2;
  color: var(--nt-ink);
  white-space: nowrap;
}
/* De lijn vult de rest van de breedte, zodat de titel als kop leest. */
.nt-rubrieklijn {
  flex: 1 1 auto;
  height: 1px;
  background: var(--nt-line);
}
.nt-rubriekuitleg {
  margin: -.45rem 0 .85rem calc(34px + .65rem);
  font-size: var(--nt-tekst-sm);
  line-height: 1.4;
  color: var(--nt-muted);
}
@media (max-width: 575.98px) {
  .nt-rubriektitel { white-space: normal; }
  .nt-rubrieklijn { display: none; }
  .nt-rubriekuitleg { margin-left: 0; }
}

/* De handelingenlijst: inklapbare rubrieken, en in een open rubriek de
   handelingen als gelijke blokken, drie naast elkaar (wens Frederik, 25
   september 2026: "de handelingen per categorie in drie kolommen", "de tekst
   iets kleiner en de blokken even groot, zo een beetje het Airbnb effect",
   gekozen: "bredere en inklapbaar"). De kop van een rubriek is zelf een regel
   in de lijst van rubrieken en draagt dus gewone tekst (LIJSTMAAT); het
   pijltje zegt dat zij open- en dichtgaat. */
details.nt-rubriek { margin: 0; border-top: 1px solid var(--nt-line); }
details.nt-rubriek:last-of-type { border-bottom: 1px solid var(--nt-line); }
details.nt-rubriek > summary.nt-rubriekkop { list-style: none; cursor: pointer; margin: 0; padding: .875rem .5rem; border-radius: var(--nt-radius-sm); }
details.nt-rubriek > summary.nt-rubriekkop::-webkit-details-marker { display: none; }
details.nt-rubriek > summary.nt-rubriekkop::after {
  content: ""; width: 16px; height: 16px; flex: none; margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235f6070' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center no-repeat;
  transition: transform .15s ease;
}
details.nt-rubriek[open] > summary.nt-rubriekkop::after { transform: rotate(180deg); }
details.nt-rubriek > summary.nt-rubriekkop:hover { background: var(--nt-tint); }
details.nt-rubriek > summary .nt-rubriektitel { font-size: var(--nt-tekst-md); font-weight: 600; white-space: normal; }
details.nt-rubriek > summary .nt-rubriekicoon { width: 30px; height: 30px; min-width: 30px; }
details.nt-rubriek > .nt-rubriekuitleg { margin: 0 0 .5rem; }
/* Lucht onder de kop van een open rubriek, zoals onder elke titel. */
details.nt-rubriek > summary + * { margin-top: .5rem; }
/* De blokken: drie per rij, en allemaal even hoog. De hoogte is die van de
   langste titel met de regel "akte via notaris" eronder; wordt een titel
   ooit langer (een andere taal), dan groeit haar rij mee in plaats van de
   tekst af te knippen. Een blok met twee wegen is twee rijen hoog. */
.nt-keuzelijst {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(6.5rem, auto); gap: .875rem; padding-bottom: 1.25rem;
}
.nt-keuzeregel { min-width: 0; }
.nt-keuzeregel > .nt-duaalkaart { height: 100%; }
.nt-keuzeregel:has(> .nt-handelingkaart-varianten),
.nt-keuzeregel:has(> .nt-duaalkaart[data-duaal-vorm="duaal"]:not([style*="none"])) { grid-row: span 2; }
.nt-keuzelijst .nt-handelingkaart {
  position: relative; display: block; height: 100%;
  padding: 1rem 2.75rem 1rem 1.125rem;
  border: 1px solid var(--nt-line); border-radius: 14px; background: var(--nt-surface); box-shadow: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.nt-keuzelijst .nt-handelingkaart:hover { border-color: var(--nt-line); box-shadow: 0 6px 20px rgba(24, 22, 60, .10); transform: translateY(-2px); }
/* Gekozen: een indigo rand en een zacht violet vlak, zoals elke keuze in de
   vormtaal van de werkplek. */
.nt-keuzelijst .nt-handelingkaart:has(input:checked) { border-color: var(--nt-indigo); background: var(--nt-violet-vlak); box-shadow: inset 0 0 0 1px var(--nt-indigo); }
.nt-keuzelijst .nt-handelingkaart-titel { font-size: var(--nt-tekst-sm); line-height: 1.4; }
.nt-keuzelijst .nt-notarisbadge, .nt-keuzelijst .nt-handelingkaart-moeder { font-size: var(--nt-tekst-xs); }
/* De keuze: een rondje rechtsboven, met een vinkje wanneer gekozen. */
.nt-keuzelijst .nt-handelingkaart > .type-pick {
  position: absolute; top: .9rem; right: .9rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
}
/* De uitleg: het vraagteken rechtsonder; in de publieke catalogus de pijl. */
.nt-keuzelijst .nt-handelingkaart > .nt-handelingkaart-hulp { position: absolute; bottom: .8rem; right: .95rem; margin: 0; font-size: var(--nt-tekst-sm); }
.nt-keuzelijst .nt-handelingkaart > .nt-handelingkaart-pijl { position: absolute; top: .75rem; right: .75rem; margin: 0; }
/* Een fiche met twee wegen: hetzelfde blok, met de twee keuzes erin. */
.nt-keuzelijst .nt-handelingkaart-varianten { display: flex; flex-direction: column; gap: .5rem; padding-right: 1.125rem; }
.nt-keuzelijst .nt-handelingkaart-varianten:hover { box-shadow: none; transform: none; }
.nt-keuzelijst .nt-handelingkaart-varianten .nt-handelingkaart-kop { padding: 0; }
.nt-keuzelijst .nt-variant { font-size: var(--nt-tekst-sm); border-radius: var(--nt-radius-sm); }
@media (prefers-reduced-motion: reduce) { .nt-keuzelijst .nt-handelingkaart:hover { transform: none; } }
@media (max-width: 767.98px) { .nt-keuzelijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Op een gsm: één blok per regel, zo hoog als de titel vraagt, met het
   vraagteken naast het rondje. */
@media (max-width: 575.98px) {
  .nt-keuzelijst { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: .625rem; }
  .nt-keuzeregel:has(> .nt-handelingkaart-varianten),
  .nt-keuzeregel:has(> .nt-duaalkaart[data-duaal-vorm="duaal"]:not([style*="none"])) { grid-row: auto; }
  .nt-keuzelijst .nt-handelingkaart { min-height: 3.75rem; padding-right: 4.5rem; }
  .nt-keuzelijst .nt-handelingkaart > .nt-handelingkaart-hulp { top: .95rem; bottom: auto; right: 2.75rem; }
}
/* De bredere pagina. Eerst voor de kiezer en de publieke catalogus, zodat
   drie blokken naast elkaar elk een titel op één of twee regels dragen; sinds
   25 september 2026 voor elk tabblad van de navigatiebalk (wens Frederik:
   "Je mag de andere tabs even breed maken"): de home, Documenten, de
   vennootschappen met hun dossier en Prijzen. Een formulier en de werkplek
   van een handeling houden de leesbare kolom van 50 rem. */
.nt-kolom.nt-kolom-breed { max-width: 70rem; }

/* ── Aandeelhouders- en ledenrijen ───────────────────────────────────────────
   Elk veld draagt zijn eigen opschrift, zodat het altijd bij het juiste veld
   hoort en meeschuift wanneer de rij van persoon naar rechtspersoon wisselt.
   Vroeger stond er één kolomrij boven de lijst; die klopte alleen voor een
   rechtspersoon en liet het achternaamveld zonder opschrift (feedback
   Frederik, augustus 2026: "nogal chaotisch"). */
.sh-veldlabel {
  /* Zelfde vier eigenschappen als .nt-veldlabel en .nt-veldkoppen. */
  display: none;
  margin-bottom: .25rem;
  font-size: var(--nt-tekst-md);
  font-weight: 500;
  color: var(--nt-ink);
}
/* Laptop: een rij draagt haar opschriften wanneer zij de eerste is of wanneer
   haar vorm verschilt van de rij erboven (zie pasShLabelsAan in
   shareholders.js). Zolang alle rijen dezelfde vorm hebben blijft het dus bij
   één reeks bovenaan, en staat er nooit een verkeerd opschrift boven een veld:
   een persoonsrij heeft immers twee naamvelden en een rechtspersoonsrij één. */
@media (min-width: 768px) {
  .sh-row.sh-toonlabels .sh-veldlabel { display: block; }
  /* Een rij die opschriften krijgt, staat iets losser van de vorige. */
  .sh-row + .sh-row.sh-toonlabels { margin-top: 1rem; }
}
/* Gsm: de velden staan onder elkaar, dus draagt elk veld zijn eigen
   opschrift; een kolomrij heeft daar geen betekenis. */
@media (max-width: 767.98px) {
  .sh-veldlabel { display: block; }
  .sh-row { padding-bottom: .75rem; border-bottom: 1px solid var(--nt-line-2); }
  .sh-row:last-child { border-bottom: 0; }
}
.sh-row + .sh-row { margin-top: .5rem; }

/* Verwijderknop: een rustig icoon in plaats van een rode omlijnde knop, die
   in een rij invoervelden te veel aandacht trok. Rood pas bij aanwijzen. */
/* De kolommen van een aanwezigenrij: flexbreedtes in plaats van een vast
   raster, zodat een verdwijnende kolom (aandelen bij een bestuursorgaan,
   voornaam bij een rechtspersoon) geen gat achterlaat. */
.sh-row .sh-kolom-type { flex: 0 1 10.5rem; }
.sh-row .sh-kolom-naam { flex: 1 1 10rem; }
.sh-row .sh-kolom-venn { flex: 2 1 16rem; }
.sh-row .sh-kolom-aandelen { flex: 0 1 7rem; }
.sh-row .sh-kolom-knop { flex: 0 0 auto; padding-bottom: .35rem; }
@media (max-width: 575.98px) {
  .sh-row .sh-kolom-type, .sh-row .sh-kolom-naam,
  .sh-row .sh-kolom-venn, .sh-row .sh-kolom-aandelen { flex: 1 1 100%; }
}

.sh-verwijder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--nt-radius-sm);
  background: transparent;
  color: var(--nt-faint);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.sh-verwijder:hover, .sh-verwijder:focus-visible {
  color: var(--nt-gevaar);
  background: var(--nt-gevaar-vlak);
  border-color: var(--nt-gevaar-rand);
}

/* ── Vragenlijst van een handeling ───────────────────────────────────────────
   Twee velden naast elkaar horen op dezelfde hoogte te beginnen, ook wanneer
   het ene opschrift over twee regels loopt en het andere over één (opmerking
   Frederik, augustus 2026: "kaders van dezelfde rij die niet op dezelfde
   hoogte staan kunnen niet"). Het opschrift krijgt daarom de hoogte van twee
   regels, zodat een opschrift van één regel en een van twee regels even hoog
   zijn. De hulpzin onder een veld duwt het volgende veld niet omhoog of
   omlaag: hij staat onder het invulveld, niet ertussen. */
.vr-veld { display: flex; flex-direction: column; }
.vr-veld > .form-label {
  line-height: 1.3;          /* vaste regelhoogte, anders klopt de rekensom niet */
  min-height: 2.6em;         /* exact twee regels */
  margin-bottom: .35rem;
}

/* ── Kaart met varianten ─────────────────────────────────────────────────────
   Eén fiche kan twee manieren kennen om de handeling uit te voeren (fiche 40:
   een bijkomende inbreng met of zonder uitgifte van nieuwe aandelen). Dan
   blijft het één regel in de lijst, met de twee wegen eronder. */
.nt-handelingkaart-varianten {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
  gap: .5rem;
}
.nt-handelingkaart-varianten:hover {
  border-color: var(--nt-line);
  box-shadow: none;
  transform: none;
}
/* De kop van een variantkaart begint waar de titels van de gewone kaarten
   beginnen: die zijn ingesprongen door het keuzevakje ervoor. Anders staan de
   titels in het rooster niet op één lijn. */
.nt-handelingkaart-varianten .nt-handelingkaart-kop { padding-left: 1.6rem; }
.nt-variantlijst { display: flex; flex-direction: column; gap: .3rem; }
.nt-variant {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-sm);
  background: var(--nt-bg, #f8f9fc);
  color: var(--nt-ink);
  text-decoration: none;
  font-size: var(--nt-tekst-md);
  cursor: pointer;
}
.nt-variant:hover { border-color: var(--nt-primary); color: var(--nt-ink); }
.nt-variant > span { flex: 1 1 auto; }
.nt-variant:has(input:checked) {
  border-color: var(--nt-primary);
  background: var(--nt-primary-050);
}
.nt-handelingkaart-varianten .nt-handelingkaart-kop {
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* ── Rij met acties bij een bestand ─────────────────────────────────────────
   Opmerking Frederik, augustus 2026, bij de fichepagina: "ik wil dat de knop
   uploaden en downloaden dezelfde vorm en grootte hebben, en ik vind de
   lay-out wat rommelig". Een klein icoonknopje naast een brede knop leest als
   twee verschillende soorten actie, en drie losse onderdelen in een smalle
   cel breken over drie regels.

   Deze groep zet ze op één lijn: beide knoppen dragen een opschrift, hebben
   dezelfde hoogte en dezelfde minimumbreedte, en het bestandsveld ertussen
   krimpt in plaats van de knoppen weg te duwen. Op een gsm gaat elke knop
   over de volle breedte, onder elkaar. */
/* Een rijtje feiten met één en dezelfde scheidingslijn: naam links, waarde
   rechts. Vervangt een lijst waarin het ene item een kader had en het andere
   niet (opmerking Frederik, augustus 2026: "kader, geen kader, kader vind ik
   maar niks"). */
.nt-feitenlijst > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--nt-line);
}
.nt-feitenlijst > div:last-child { border-bottom: 0; }
.nt-feitenlijst dt { font-weight: 400; color: var(--nt-muted); margin: 0; }
.nt-feitenlijst dd { font-weight: 600; margin: 0; text-align: right; }

/* Dezelfde actierij, maar links uitgelijnd (in een kaart in plaats van in een
   tabelcel). */
.nt-actiegroep.nt-actiegroep-links { justify-content: flex-start; }
.nt-actiegroep.nt-actiegroep-links .nt-file-name { flex: 1 1 auto; text-align: left; order: 0; }

/* De twee schakelaars per fiche staan onder elkaar, zodat de kolom rustig
   blijft. */
.nt-stand { min-height: 1.5rem; margin-bottom: .1rem; }
.nt-stand .form-check-label { font-size: var(--nt-tekst-sm); }

/* "Bestand kiezen" en "Opladen" zijn twee verschillende dingen: het eerste
   kiest, het tweede voert uit. In de huiskleur leken ze even zwaar (opmerking
   Frederik, augustus 2026: "bestand kiezen en opladen is hetzelfde"). De
   kiesknop is daarom neutraal en alleen de echte actie blijft blauw. */
.nt-file-btn.btn-soft {
  background: var(--nt-surface);
  border: 1px solid var(--nt-line);
  color: var(--nt-body);
  font-weight: 500;
}
.nt-file-btn.btn-soft:hover {
  background: var(--nt-bg, #f8f9fc);
  border-color: var(--nt-muted);
  color: var(--nt-ink);
}

.nt-actiegroep {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Wikkelen mag: de bestandsnaam gaat achteraan naar een eigen regel in
     plaats van de knoppen samen te knijpen. */
  flex-wrap: wrap;
  gap: .5rem;
}
.nt-actiegroep .nt-actie {
  flex: 0 0 auto;
  min-width: 6.6rem;
  justify-content: center;
}
/* Het bestandsveld levert zijn knop en zijn naam rechtstreeks aan de rij af,
   zodat de knop naast de andere knoppen staat en de gekozen bestandsnaam de
   volle breedte krijgt op een eigen regel eronder. Naast drie knoppen blijft
   er van een naam anders maar een paar tekens over ("f.."), en dan weet je
   niet welk bestand je hebt gekozen. */
.nt-actiegroep .nt-file { display: contents; }
.nt-actiegroep .nt-file-btn { flex: 0 0 auto; }
.nt-actiegroep .nt-file-name {
  flex: 1 0 100%;
  min-width: 0;
  text-align: right;
  margin-top: .25rem;
  /* Achteraan in de rij, zodat de drie knoppen naast elkaar blijven staan en
     de naam eronder komt in plaats van ertussen. */
  order: 9;
}
/* Zolang er geen bestand gekozen is, blijft "Geen bestand gekozen" weg: in een
   rij van drie knoppen leest die melding als vierde element en knijpt ze de
   knoppen samen. Zodra er een bestand is, staat de naam er wel. */
.nt-actiegroep .nt-file[data-leeg] .nt-file-name { display: none; }
@media (max-width: 767.98px) {
  .nt-actiegroep { flex-wrap: wrap; justify-content: stretch; }
  .nt-actiegroep .nt-actie { flex: 1 1 100%; }
  .nt-actiegroep .nt-file { flex: 1 1 100%; }
}

/* Een tabel met vaste kolombreedtes: de kolommen volgen de colgroup en de
   inhoud past zich aan, in plaats van dat één lange titel de hele tabel
   breder duwt dan het kader. */
.nt-tabel-vast { table-layout: fixed; width: 100%; }

/* De voet van de handelingenkiezer (opmerkingen Frederik, augustus 2026: eerst
   "de gebruiker moet helemaal naar beneden scrollen om verder te gaan", daarna
   twee keer over de uitvoering: een zwevend kader was "een witte band met een
   blauwe kader", en de eerste voet was nog altijd te zwaar).

   Het is de VOET VAN DE KAART zelf. Zij blijft onderaan het scherm staan
   terwijl de lijst eronder doorloopt, en de lijst vervaagt erboven in plaats
   van eronder afgesneden te worden. Eén regel hoog, geen kader om de melding,
   geen zware knop: alles wat over de keuze gaat staat op één lijn. Staat er
   niets aangevinkt, dan blijft zij gewoon onderaan de kaart en kost zij geen
   schermruimte. */
.nt-actiebalk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: var(--nt-surface);
  border-top: 1px solid var(--nt-line-2);
  border-radius: 0 0 var(--nt-radius) var(--nt-radius);
}
.nt-actiebalk.is-actief {
  position: sticky;
  bottom: 0;
  z-index: 20;
}

/* Een balk die niet de voet van een kaart is maar los onder een lang
   formulier staat, draagt zelf de rand rondom (regel van Frederik, augustus
   2026: dezelfde doorknop als bij de handelingen op elke pagina waar veel
   gescrold moet worden). */
.nt-actiebalk-los {
  border: 1px solid var(--nt-line-2);
  border-radius: var(--nt-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
/* De lijst schuift eronder door en vervaagt, zodat er geen harde snijlijn
   ontstaat waar de voet begint. */
.nt-actiebalk.is-actief::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.75rem;
  background: linear-gradient(to top, var(--nt-surface), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* De melding staat als gewone regel naast de knop: geen alarmkader, alleen een
   gekleurd teken vooraan. */
.nt-actiebalk-melding {
  flex: 1 1 20rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  font-size: var(--nt-tekst-md);
  line-height: 1.45;
  color: var(--nt-body);
}
.nt-actiebalk-melding .bi { flex: none; line-height: 1.45; }
.nt-actiebalk-melding.is-ok .bi { color: #16a34a; }
.nt-actiebalk-melding.is-let-op .bi { color: #b45309; }
.nt-actiebalk-knop { white-space: nowrap; }
@media (max-width: 575.98px) {
  .nt-actiebalk { padding: .75rem; gap: .625rem; }
  /* Op een gsm mag het opschrift omslaan: "Doorgaan naar de formaliteiten
     na het besluit" is breder dan het scherm en schoof anders over de rand. */
  .nt-actiebalk .nt-actiebalk-knop { flex: 1 1 100%; white-space: normal; }
}

/* Een rubriekkop in een beheertabel. De lijsten in Beheer dragen dezelfde
   rubrieken en dezelfde volgorde als de catalogus en de kiezer (regel van
   Frederik, augustus 2026: de overzichten moeten altijd gelijklopen), en de
   kop maakt dat zichtbaar zonder een extra kolom te kosten. */
.nt-rubriekrij th {
  background: var(--nt-bg);
  color: var(--nt-muted);
  font-weight: 600;
  font-size: var(--nt-tekst-xs);
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* Eén algemene regel in Beheer: nummer, reden, punten en waar zij wordt
   afgedwongen. De regels staan onder het fichedocument en horen erbij, dus zij
   dragen dezelfde rust als een fiche (wens Frederik, augustus 2026: "dat
   document met die algemene regels is belangrijk dus dat moet je goed
   structureren"). */
.nt-algemeneregel {
  padding: .75rem 0;
  border-top: 1px solid var(--nt-line-2);
}
.nt-algemeneregel:first-of-type { border-top: 0; padding-top: 0; }

/* Een rij cijfers in Beheer: vijf getallen naast elkaar in plaats van vijf
   regels onder elkaar (opmerking Frederik, augustus 2026: "ik wil een propere
   beheer-sectie die overzichtelijk is"). Het getal komt eerst, het opschrift
   eronder, zodat de rij in één blik te lezen is. */
.nt-kpirij {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.nt-kpi {
  flex: 1 1 8rem;
  padding: .625rem .75rem;
  background: var(--nt-bg);
  border-radius: var(--nt-radius-sm);
}
.nt-kpi-getal {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--nt-ink);
}
.nt-kpi-label {
  display: block;
  margin-top: .125rem;
  font-size: var(--nt-tekst-xs);
  line-height: 1.35;
  color: var(--nt-muted);
}

/* Een knop die een lange lijst open- en dichtklapt. De lijsten in Beheer zijn
   naslag, geen dagelijkse lectuur: zij staan dicht tot je ze nodig hebt. */
.nt-uitklap {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 0;
  border: 0;
  background: none;
  font-size: var(--nt-tekst-sm);
  font-weight: 600;
  color: var(--nt-primary);
}
.nt-uitklap:hover { color: var(--nt-primary-700); }
.nt-uitklap .bi { transition: transform .15s ease; }
.nt-uitklap[aria-expanded="true"] .bi { transform: rotate(180deg); }
.nt-uitklap-aantal { font-weight: 400; color: var(--nt-muted); }

/* Het uitklapblok in het vergaderkader: het merkteken van <summary> valt weg,
   zodat de regel er precies uitziet als de andere uitklapknoppen. */

/* Een lange tabel in een eigen venster met schuifbalk. De fichetabel telt
   tachtig regels; zonder venster wordt de beheerpagina onwerkbaar lang.

   `contain: paint` is hier geen versiering maar de oplossing van een echte
   fout: zonder die regel telt Chrome de VOLLEDIGE tabelhoogte mee in de
   hoogte van de bladzijde, ook al is zij zichtbaar afgeknipt. De gebruiker
   scrolde daardoor bijna vijfduizend pixels leegte voorbij de voettekst
   (gemeten augustus 2026). */
.nt-tabelvenster {
  max-height: 360px;
  overflow-y: auto;
  contain: paint;
}

/* ── De vormtaal van de werkplek, doorgetrokken over de tool ───────────────
   Ontwerp van 24 en 25 september 2026, goedgekeurd door Frederik ("Bouw de
   tool maar zo"). Scherm per scherm ingebouwd, met dezelfde onderdelen:
   een kolom van leesbare breedte, een kop met kruimel, titel en hoogstens
   twee knoppen, en kaders met een titel. */
.nt-kolom { max-width: 50rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nt-ruimte-5); }
.nt-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; }
.nt-kop h1 { margin: .15rem 0 0; }
.nt-kop-kruimel { font-size: var(--nt-tekst-sm); color: var(--nt-body); margin: 0; }
.nt-kop-kruimel a { color: var(--nt-body); text-decoration: none; }
.nt-kop-kruimel a:hover { color: var(--nt-indigo); text-decoration: underline; }
/* Twee ingangen naast elkaar, even hoog, elk met een tegel, een titel, één
   zin en de knoppen onderaan. */
/* Filters op één regel: zoeken, de vennootschap en de stand. Een keuzelijst
   kan een lange naam niet afbreken, dus de vennootschap krijgt de breedte van
   haar langste naam en krimpt nooit (wens Frederik, 25 september 2026: een
   naam mag niet worden afgeknipt). Het zoekveld neemt wat overblijft. Past de
   langste naam niet meer naast de andere twee, dan gaat de lijst naar een
   eigen regel. Op een gsm staat alles onder elkaar, en noemt de voet van de
   lijst de gekozen vennootschap voluit. */
.nt-filterrij { display: flex; flex-wrap: wrap; gap: .75rem; }
.nt-filterrij > .nt-filter-zoek { flex: 1 1 10rem; min-width: 0; }
.nt-filterrij > .nt-filter-vennootschap { flex: 0 0 auto; max-width: 100%; }
/* Breed genoeg voor de langste stand, "Formaliteiten nog open". */
.nt-filterrij > .nt-filter-stand { flex: 0 0 14rem; }
@media (max-width: 767.98px) {
  .nt-filterrij > .nt-filter-zoek, .nt-filterrij > .nt-filter-vennootschap, .nt-filterrij > .nt-filter-stand { flex: 1 1 100%; }
}
.nt-ingangen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nt-ruimte-5); }
@media (max-width: 767.98px) { .nt-ingangen { grid-template-columns: minmax(0, 1fr); } }
.nt-ingang .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; height: 100%; }
.corp-main .nt-ingang h2 { font-size: var(--nt-tekst-lg); font-weight: 600; margin: 0; }
.nt-ingang p { font-size: var(--nt-tekst-sm); color: var(--nt-body); margin: 0; }
/* Zo verloopt een handeling: de vier fasen naast elkaar, elk met een bol in
   het verloop, zoals de huidige fase in de kop van de werkplek. Twee aan twee
   op een tablet, onder elkaar op een gsm. */
.nt-verloop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
@media (max-width: 991.98px) { .nt-verloop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .nt-verloop { grid-template-columns: minmax(0, 1fr); } }
.nt-verloop > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .75rem; align-items: start; }
.nt-verloop-n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nt-verloop-diep); color: #fff; font-size: var(--nt-tekst-sm); font-weight: 600;
}
.nt-verloop-titel { font-size: var(--nt-tekst-md); font-weight: 600; line-height: 1.4; color: var(--nt-ink); padding-top: .15rem; }
.nt-verloop p { font-size: var(--nt-tekst-sm); color: var(--nt-body); margin: .25rem 0 0; }
/* Op een gsm staan de twee knoppen van een ingang onder elkaar, over de volle
   breedte, in beide ingangen. Naast elkaar paste de ene rij wel en de andere
   niet, en dan zagen twee gelijke kaarten er anders uit (meting
   HERHALENDE_RIJ). */
@media (max-width: 575.98px) {
  .nt-ingang .nt-knoppen { align-self: stretch; }
  .nt-ingang .nt-knoppen .btn { flex: 1 1 100%; }
}
.nt-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .25rem; }
/* De icoontegel van het thema: één vlak, één kleur, geen verloop (THEMA.md). */
.nt-tegel {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--nt-violet-vlak); color: var(--nt-indigo); font-size: 1.15rem;
}

/* Een kaart met een kop: de titel links en hoogstens één kleine knop rechts,
   op dezelfde regel; de uitleg eronder over de volle breedte. Zo staat de knop
   in elke kaart op dezelfde plaats, hoe lang de uitleg ook is. Wat eronder
   komt, zijn rijen of velden. */
.nt-kaderkop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.corp-main .nt-kaderkop h2 { font-size: var(--nt-tekst-lg); font-weight: 600; margin: 0; }
.nt-kaderkop > p { order: 3; flex: 0 0 100%; font-size: var(--nt-tekst-sm); color: var(--nt-body); margin: 0; }
/* De titel neemt de ruimte en breekt zelf af, zodat de knop ook op een gsm
   naast de titel blijft en in elke kaart op dezelfde plaats staat (meting
   HERHALENDE_RIJ op de kaarten van Controleren, 25 september 2026). */
.corp-main .nt-kaderkop > h2 { flex: 1 1 12rem; min-width: 0; }
/* De titel van een kaart in het formulier van de werkplek (ontwerp van 24
   september 2026): in de kaart zelf, zonder icoon en zonder scheidingslijn,
   met de velden er vlak onder. */
.card > .nt-kaartkop { padding-bottom: 0; }
.card > .nt-kaartkop + .card-body { padding-top: 1rem; }
/* Een keuze tussen twee wegen: twee kaarten naast elkaar, elk met een rondje
   rechts. Het gekozen kader krijgt een indigo rand en een zacht violet vlak
   (vormtaal van het ontwerp: "Keuze: altijd een kader met een rondje
   rechts"). Onder elkaar op een gsm. */
.nt-keuzekaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 575.98px) { .nt-keuzekaarten { grid-template-columns: minmax(0, 1fr); } }
.nt-keuzekaart {
  position: relative; display: flex; flex-direction: column; gap: .15rem; margin: 0;
  padding: .85rem 3rem .85rem 1.1rem; border: 1px solid var(--nt-line-2); border-radius: var(--nt-radius-sm);
  background: var(--nt-surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.nt-keuzekaart:hover { border-color: var(--nt-muted); }
.nt-keuzekaart > .form-check-input { position: absolute; top: 50%; right: 1.1rem; margin: 0; transform: translateY(-50%); }
.nt-keuzekaart:has(> .form-check-input:checked) { border-color: var(--nt-indigo); background: var(--nt-violet-vlak); box-shadow: inset 0 0 0 1px var(--nt-indigo); }
.nt-keuzekaart:has(> .form-check-input:focus-visible) { outline: 2px solid var(--nt-indigo); outline-offset: 2px; }
/* De vraag boven de keuzekaarten: het vraagteken ernaast steekt boven de
   letters uit, dus zakt zij twee pixels. Zo staat zij even ver onder de
   velden erboven als elke andere veldnaam (meting KAARTRITME). */
.nt-keuzevraag { margin-top: 2px; }
.nt-keuzekaart-titel { font-size: var(--nt-tekst-md); font-weight: 500; color: var(--nt-ink); }
.nt-keuzekaart-uitleg { font-size: var(--nt-tekst-sm); color: var(--nt-body); }
/* Rijen onder elkaar in een kaart, met een lijn ertussen: het statusicoon, de
   naam met één regel eronder, en rechts de knop. Een lijst met een stand
   draagt die in een eigen kolom, zodat de standen en de knoppen in elke rij op
   dezelfde plaats staan, hoe lang de naam ook is. */
.nt-rijen { list-style: none; margin: 0; padding: 0; }
.nt-rijen > li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: .25rem .875rem;
  align-items: start; padding: .875rem 1.35rem; border-top: 1px solid var(--nt-line);
}
.nt-rijen.zonder-stip > li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.nt-rijen.met-stand > li { grid-template-columns: 18px minmax(0, 1fr) 16rem auto; }
/* De eerste rij direct onder de rand van de kaart draagt geen tweede lijn. */
.card > .nt-rijen:first-child > li:first-child { border-top: 0; }
/* De naam van een rij is geen tussentitel boven een alinea maar het eerste
   deel van de rij zelf: de regel eronder hoort er dicht tegenaan. */
.nt-rijnaam { font-size: var(--nt-tekst-md); font-weight: 600; line-height: 1.4; color: var(--nt-ink); }
.nt-rijnaam a { color: var(--nt-ink); text-decoration: none; }
.nt-rijnaam a:hover { color: var(--nt-indigo); }
.nt-rijen p { font-size: var(--nt-tekst-sm); color: var(--nt-body); margin: .125rem 0 0; }
.nt-rijen p b { color: var(--nt-ink); font-weight: 600; }
.nt-rijen .is-uit .nt-rijnaam { color: var(--nt-body); text-decoration: line-through; }
/* Het punt van deze pagina in een reeks (de agendapunten van een gecombineerd
   document): een zacht violet vlak, dezelfde markering als een gekozen blok. */
.nt-rijen > li.is-huidig { background: var(--nt-violet-vlak); }
.nt-rijstand { font-size: var(--nt-tekst-sm); color: var(--nt-body); }
/* Een rij met een icoon in plaats van een stand ("Wat je kan vragen" op het
   tabblad AI-jurist): het icoon staat in de kolom van de stip. */
.nt-rij-icoon { color: var(--nt-indigo); font-size: var(--nt-tekst-lg); line-height: 1.3; }
.nt-rijstand.is-actie { color: var(--nt-actie); font-weight: 500; }
.nt-rijstand p { font-weight: 400; }
.nt-rijacties { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; }
.nt-heel { white-space: nowrap; }
/* Termijnen: de datum en de knop in een vaste kolom, zodat de datums onder
   elkaar staan, ook in een rij zonder knop. */
.nt-rijen.met-datum > li { grid-template-columns: 18px minmax(0, 1fr) 8.5rem 7.5rem; }
/* Documenten: de stand en de knoppen in vaste kolommen, ook wanneer een rij
   een knop minder draagt. */
.nt-rijen.zonder-stip.met-stand > li { grid-template-columns: minmax(0, 1fr) 9rem 14.5rem; }
/* Een lijst in een venster volgt de rand van het venster, niet die van een kaart. */
.nt-rijen-venster > li { padding-inline: 0; }
.nt-rijen-venster > li:last-child { border-bottom: 1px solid var(--nt-line); }
/* Op een gsm staat alles onder de naam: de stand, de datum en de knop. Deze
   regel staat ná elke soort rij, anders wint de vaste kolom van de laptop. */
@media (max-width: 575.98px) {
  .nt-rijen > li, .nt-rijen.met-stand > li, .nt-rijen.met-datum > li { grid-template-columns: 18px minmax(0, 1fr); }
  .nt-rijen.zonder-stip > li, .nt-rijen.zonder-stip.met-stand > li { grid-template-columns: minmax(0, 1fr); }
  .nt-rijen > li > .nt-rijstand, .nt-rijen > li > .nt-rijacties { grid-column: 2; justify-content: flex-start; }
  .nt-rijen.zonder-stip > li > .nt-rijstand, .nt-rijen.zonder-stip > li > .nt-rijacties { grid-column: 1; }
  .nt-rijen > li > .nt-rijacties:empty { display: none; }
  /* Een korte naam met één knop (de officiële bronnen) houdt de knop ernaast. */
  .nt-rijen.knop-ernaast > li { grid-template-columns: minmax(0, 1fr) auto; }
  .nt-rijen.knop-ernaast > li > .nt-rijacties { grid-column: 2; }
}
/* De voet onder een lijst: hoeveel er zijn, of waar de rest staat. */
.nt-kaartvoet { padding: .875rem 1.35rem; border-top: 1px solid var(--nt-line); font-size: var(--nt-tekst-sm); color: var(--nt-body); }
.nt-voetknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.nt-voetknoppen form { margin: 0; }
.nt-voetlink { font-size: var(--nt-tekst-sm); color: var(--nt-indigo); text-decoration: none; }
.nt-voetlink:hover { text-decoration: underline; }
/* Twee kaarten in één tabblad staan onder elkaar, met de ruimte van de kolom. */
.nt-kaarten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nt-ruimte-5); }
/* Een feitenlijst: het opschrift links, het gegeven rechts, een lijn ertussen. */
.nt-feiten { margin: 0; }
.nt-feit { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: .25rem 1rem; padding: .75rem 1.35rem; border-top: 1px solid var(--nt-line); font-size: var(--nt-tekst-md); }
.nt-feit dt { font-weight: 400; color: var(--nt-body); }
.nt-feit dd { margin: 0; color: var(--nt-ink); }
.nt-feit dd.nt-tekst-actie, .nt-rijen p.nt-tekst-actie { color: var(--nt-actie); }
@media (max-width: 575.98px) { .nt-feit { grid-template-columns: minmax(0, 1fr); } }
/* Eén veld met zijn knop ernaast, zoals een datum en Noteren. */
.nt-rijformulier { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nt-rijformulier .form-control { flex: 0 1 14rem; }
/* Een veld dat de rest van de regel vult, zoals de vraag of de keuze van de vennootschap. */
.nt-rijformulier-vol > .form-control, .nt-rijformulier-vol > .form-select { flex: 1 1 16rem; width: auto; min-width: 0; }
/* De werkplek van een handeling (ontwerp van 24 september 2026, "Bouw de
   tool maar zo"): een kop met de knop Stappenplan en regels, daaronder de vier
   fasen. De huidige fase draagt haar nummer in het verloop, een afgeronde fase
   een vinkje in groen (THEMA.md laat het verloop toe voor de bollen van een
   volgorde). Een fase die nog niet kan, is gedempt en geen link. */
.nt-fasen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.nt-fasen ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
.nt-fasen li { display: flex; align-items: center; }
.nt-fasen li + li::before { content: "\203A"; color: var(--nt-faint); margin-right: .5rem; }
.nt-fase {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .6rem .3rem .3rem;
  border: 0; border-radius: 999px; background: none; font-size: var(--nt-tekst-sm);
  color: var(--nt-body); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
a.nt-fase:hover, button.nt-fase:hover { background: var(--nt-tint); color: var(--nt-ink); }
.nt-fase-n {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--nt-line); font-size: var(--nt-tekst-xs); font-weight: 600; color: var(--nt-body);
}
.nt-fase.is-huidig { color: var(--nt-ink); font-weight: 600; cursor: default; }
.nt-fase.is-huidig .nt-fase-n { background: var(--nt-verloop-diep); border-color: transparent; color: #fff; }
.nt-fase.is-klaar .nt-fase-n {
  color: transparent; border-color: var(--nt-mint-700);
  background: var(--nt-mint-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.3 2.4 2.4 5.2-5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.nt-fase.is-dicht { opacity: .55; cursor: default; }
.nt-bewaard { font-size: var(--nt-tekst-sm); color: var(--nt-body); }
.nt-bewaard.is-fout { color: var(--nt-actie); }
@media (max-width: 575.98px) { .nt-fasen li + li::before { display: none; } }
/* De regels van de handeling vallen op, zonder de hoofdknop te zijn. */
.nt-knop-regels { --bs-btn-bg: var(--nt-violet-vlak); --bs-btn-color: var(--nt-indigo); --bs-btn-border-color: #d9d1fb; --bs-btn-hover-bg: #e9e2ff; --bs-btn-hover-color: var(--nt-indigo); --bs-btn-hover-border-color: #c9bdf8; --bs-btn-active-bg: #e9e2ff; --bs-btn-active-color: var(--nt-indigo); --bs-btn-active-border-color: #c9bdf8; }
.nt-regelpaneel { background: var(--nt-tint); border-color: #ddd5fb; }
.nt-regelpaneel-intro { font-size: var(--nt-tekst-md); color: var(--nt-body); margin: 0 0 1rem; }
/* Onderaan Invullen: de drie blokken die na de inhoud komen, onder een eigen
   kop (regel van Frederik, 9 september 2026: zij horen apart van de inhoud). */

/* Prijzen, ingelogd: het tegoed als één getal naast de titel, en de
   abonnementen als gelijke vakken, twee aan twee. De formule die de
   beheerder uitlicht, draagt een indigo rand; de rest is neutraal. */
.nt-tegoedtotaal { font-size: var(--nt-tekst-lg); font-weight: 600; color: var(--nt-indigo); font-variant-numeric: tabular-nums; }
.nt-formules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 575.98px) { .nt-formules { grid-template-columns: minmax(0, 1fr); } }
.nt-formule { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border: 1px solid var(--nt-line); border-radius: var(--nt-radius-sm); }
.nt-formule.is-uitgelicht { border-color: var(--nt-indigo); box-shadow: inset 0 0 0 1px var(--nt-indigo); }
.corp-main .nt-formule h3 { font-size: var(--nt-tekst-md); font-weight: 600; margin: 0; }
.nt-formuleprijs { font-size: var(--nt-tekst-xl); font-weight: 600; line-height: 1.25; color: var(--nt-ink); font-variant-numeric: tabular-nums; }
.nt-formuleprijs small { font-size: var(--nt-tekst-sm); font-weight: 400; color: var(--nt-body); }
.nt-formule p, .nt-formule ul { font-size: var(--nt-tekst-sm); color: var(--nt-body); margin: 0; }
.nt-formule ul { padding-left: 1.1rem; }
.nt-formuleknop { margin-top: auto; padding-top: .75rem; }
.nt-tekst-actie { color: var(--nt-actie); }
/* Dag en maand naast elkaar: de dag smal, de maand vult de rest. */
.nt-dagmaand { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; }
/* Het statusicoon in een tabblad van het dossier: kleiner, voor het feit. */
.ck-tab-feit { display: flex; align-items: center; gap: .375rem; }
.ck-tab-feit .nt-stip { width: 12px; height: 12px; margin: 0; }
/* Het statusicoon (sjabloon _stip.html): groen met een vinkje, een grijze
   ring of rood met een uitroepteken. */
.nt-stip { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.nt-stip circle { fill: currentColor; }
.nt-stip path { fill: none; stroke: var(--nt-surface); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nt-stip.is-ok { color: var(--nt-mint-700); }
.nt-stip.is-actie { color: var(--nt-actie); }
.nt-stip.is-open { color: var(--nt-faint); }
.nt-stip.is-open circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Zoeken en filteren boven een lijst, op één regel. */
.nt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.nt-filters .form-control { flex: 1 1 16rem; }
/* De band bovenaan het dossier van een vennootschap: het verloop van de
   homepage (THEMA.md laat het hier toe), als kaart in de kolom en met ruimte
   eronder, zodat de tabbladen er niet tegen plakken (8 september 2026). */
.nt-band { border-radius: var(--nt-radius); padding: var(--nt-ruimte-5) var(--nt-ruimte-6); background: var(--nt-verloop-diep); color: #fff; }
.corp-main .nt-band h1 { color: #fff; }
.nt-band .nt-kop-kruimel a, .nt-band .nt-band-sub { color: rgba(255,255,255,.86); }
.nt-band .nt-kop-kruimel a { text-decoration: none; }
.nt-band .nt-kop-kruimel a:hover { color: #fff; text-decoration: underline; }
.nt-band-sub { font-size: var(--nt-tekst-sm); margin: .5rem 0 0; }
.nt-knop-wit { --bs-btn-bg: #fff; --bs-btn-color: var(--nt-indigo); --bs-btn-border-color: #fff; --bs-btn-hover-bg: var(--nt-tint); --bs-btn-hover-color: var(--nt-indigo); --bs-btn-hover-border-color: var(--nt-tint); --bs-btn-active-bg: var(--nt-violet-vlak); --bs-btn-active-color: var(--nt-indigo); --bs-btn-active-border-color: var(--nt-violet-vlak); }
.nt-knop-rand-wit { --bs-btn-bg: transparent; --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.6); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-bg: rgba(255,255,255,.18); --bs-btn-active-color: #fff; --bs-btn-active-border-color: #fff; }
@media (max-width: 575.98px) {
  .nt-band { padding: var(--nt-ruimte-4) var(--nt-ruimte-5); }
  /* Een lange vennootschapsnaam vult anders het hele scherm. */
  .corp-main .nt-band h1 { font-size: var(--nt-tekst-xl); }
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIEKE WEBSITE (augustus 2026)
   De uitgelogde website volgt de ontwerpgids van Frederik
   (uploads/design_guidelines.md): indigo, violet en mint op een rustige
   witte ondergrond, Poppins als merkletter, veel witruimte en één
   gradiëntmoment per scherm. Deze tokens staan los van de app-tokens
   hierboven zodat de tool zelf onaangeroerd blijft.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --web-indigo:      #4338ca;
  --web-indigo-700:  #3730a3;
  --web-violet:      #8b5cf6;
  --web-mint:        #2dd4bf;
  --web-ink:         #17162c;
  --web-body:        #5f6070;
  --web-muted:       #6b6c7a;
  --web-zacht:       #fafafc;
  --web-tint:        #f7f5ff;
  --web-violet-vlak: #f2eeff;
  --web-mint-vlak:   #edfcf9;
  --web-lijn:        #e7e5ef;
  --web-lijn-2:      #d7d3e5;
  --web-gradient: linear-gradient(135deg, #4338ca 0%, #8b5cf6 55%, #2dd4bf 100%);
  --web-schaduw: 0 1px 2px rgba(23,22,44,.04), 0 8px 24px rgba(23,22,44,.06);
}

.web {
  background: #fff;
  color: var(--web-ink);
  font-family: "Poppins", "InterVar", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
.web ::selection { background: var(--web-violet-vlak); }

/* ── De lichte navigatiebalk ────────────────────────────────────────────── */
.web-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--web-lijn);
  padding: .65rem 0;
}
.web-navbar .navbar-brand { padding: 0; }
.web-logo { height: 32px; width: auto; display: block; }
.web-navbar .nav-link {
  color: var(--web-ink);
  font-weight: 500;
  font-size: .92rem;
  padding: .45rem 1rem;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}
/* Ruimte tussen de menukeuzes onderling. Een opschrift blijft op één regel. */
.web-navbar .navbar-nav > .nav-item + .nav-item { margin-left: .55rem; }
.web-navbar .nav-link { white-space: nowrap; }
/* Net boven 1200 pixels is de ruimte krap, zeker in het Frans ("Juriste IA",
   "Prix et rendement", "Se connecter"): daar krimpt alleen de binnenruimte. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .web-navbar .nav-link { padding: .45rem .6rem; }
  .web-navbar .navbar-nav > .nav-item + .nav-item { margin-left: .2rem; }
}
.web-navbar .nav-link:hover,
.web-navbar .nav-link:focus { color: var(--web-indigo); background: var(--web-tint); }
.web-navbar .navbar-toggler { border: 0; }
.web-navbar .dropdown-menu {
  border: 1px solid var(--web-lijn);
  border-radius: 12px;
  box-shadow: var(--web-schaduw);
}
.web-navbar .dropdown-item.actief {
  color: var(--web-indigo);
  font-weight: 600;
  background: var(--web-tint);
}

/* ── Knoppen ────────────────────────────────────────────────────────────── */
.web-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--web-indigo);
  color: #fff;
  font-weight: 500;
  font-size: .95rem;
  border: 1px solid var(--web-indigo);
  border-radius: 12px;
  padding: .6rem 1.4rem;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.web-knop:hover, .web-knop:focus {
  background: var(--web-indigo-700);
  border-color: var(--web-indigo-700);
  color: #fff;
}
.web-knop-licht {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #fff;
  color: var(--web-indigo);
  font-weight: 500;
  font-size: .95rem;
  border: 1px solid var(--web-lijn-2);
  border-radius: 12px;
  padding: .6rem 1.4rem;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
/* Witte knop op een donkere of gekleurde ondergrond, en de omlijnde witte
   variant ernaast (de kop en het actieblok). */
.web-knop-wit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #fff;
  color: var(--web-indigo);
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid #fff;
  border-radius: 12px;
  padding: .6rem 1.4rem;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.web-knop-wit:hover, .web-knop-wit:focus {
  color: var(--web-indigo-700);
  box-shadow: 0 8px 24px rgba(23,22,44,.25);
  transform: translateY(-1px);
}
.web-knop-licht:hover, .web-knop-licht:focus {
  border-color: var(--web-indigo);
  color: var(--web-indigo);
  background: var(--web-tint);
}
.web-knop-groot, .web-knop-licht.web-knop-groot { padding: .8rem 1.8rem; font-size: 1rem; }

/* ── Secties en koppen ──────────────────────────────────────────────────── */
.web-sectie { padding: 5.5rem 0; }
.web-sectie-zacht { background: var(--web-zacht); }
.web-sectie-tint { background: var(--web-tint); }
/* LET OP: `.web ` als voorvoegsel is geen stijl, maar specificiteit. Elke
   publieke pagina staat in <main class="corp-main"><div class="web">...,
   en `.corp-main h1 { font-size: var(--nt-tekst-2xl) }` (2 stappen
   specificiteit: één klasse + één element) won het anders altijd van een
   kale `.web-kop` (1 klasse), want een klasse-plus-element weegt zwaarder
   dan één klasse alleen. Daardoor stond ELKE paginatitel op de publieke
   website al sinds de eerste ronde vast op 24px in plaats van haar eigen
   maat, tot Frederik vroeg om de hoofdtitel groter te maken (augustus 2026)
   en dat bij het nameten aan het licht kwam. */
.web .web-kop {
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--web-ink);
}
.web-intro {
  color: var(--web-body);
  font-size: 1.05rem;
  max-width: 46rem;
  margin: .75rem auto 0;
}

/* ── De kop van de pagina ───────────────────────────────────────────────── */
/* De headerafbeelding loopt over de volle breedte; een indigo verloop vanaf
   links houdt de witte titel leesbaar op elk deel van de foto. */
.web-hero {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0 7rem;
  background-size: cover;
  background-position: center;
  color: #fff;
  isolation: isolate;
}
.web-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
      rgba(23,22,44,.94) 0%,
      rgba(49,46,129,.88) 34%,
      rgba(49,46,129,.55) 62%,
      rgba(23,22,44,.30) 100%);
}
/* `.web ` voorvoegsel: zie de uitleg boven `.web-kop`, dezelfde reden
   (`.corp-main h1` won anders altijd van deze regel op specificiteit). */
.web .web-hero-titel {
  font-weight: 700;
  font-size: clamp(3.2rem, 7vw, 5.75rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
}
.web-hero-sub {
  color: rgba(255,255,255,.88);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 34rem;
  margin-top: 1.25rem;
}
.web-hero-punten {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.web-hero-punten li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: rgba(255,255,255,.92);
  font-size: .95rem;
}
.web-hero-punten .bi {
  color: var(--web-mint);
  line-height: 1.5;
}

/* De kop komt bij het openen van de pagina in beeld, regel na regel. Zij
   staat bovenaan en wordt dus nooit gescrold: zonder deze animatie beweegt
   er niets tot de bezoeker zelf begint te scrollen (opmerking Frederik,
   augustus 2026: "still no moving elements"). De vulling is `backwards`,
   dus tijdens de vertraging staat het eerste beeld al klaar. */
.web-hero-titel,
.web-hero-sub,
.web-hero-knoppen,
.web-hero-punten li {
  animation: web-opkomen .85s cubic-bezier(.22,.85,.3,1) backwards;
}
.web-hero-titel      { animation-delay: .10s; }
.web-hero-sub        { animation-delay: .28s; }
.web-hero-knoppen    { animation-delay: .46s; }
.web-hero-punten li:nth-child(1) { animation-delay: .62s; }
.web-hero-punten li:nth-child(2) { animation-delay: .72s; }
.web-hero-punten li:nth-child(3) { animation-delay: .82s; }
@media (prefers-reduced-motion: reduce) {
  .web-hero-titel, .web-hero-sub, .web-hero-knoppen,
  .web-hero-punten li { animation: none; }
}

/* ── De band met de vier troeven ────────────────────────────────────────── */
/* Blauwgroen verloop in de huisstijl; de uiteinden zijn donker genoeg om de
   witte tekst overal leesbaar te houden. */
.web-band {
  background: linear-gradient(120deg, #312e81 0%, #4338ca 45%, #0f766e 100%);
  color: #fff;
  padding: 3.5rem 0;
  /* De dunne witte scheiding met de kop erboven (wens Frederik). */
  border-top: 1px solid #ffffff;
}
.web-troef { display: flex; gap: 1rem; align-items: flex-start; }
.web-troef-icoon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  background: rgba(255,255,255,.14);
}
.web-troef-titel { font-weight: 600; font-size: 1.1rem; color: #fff; }
.web-troef-tekst { color: rgba(255,255,255,.85); font-size: .9rem; margin: .2rem 0 0; }

/* ── Zo werkt het ───────────────────────────────────────────────────────── */
.web-stap-tekst { color: var(--web-body); font-size: .95rem; margin: .4rem 0 0; }
/* Grijs in plaats van groen (opmerking Frederik, reviewronde augustus 2026). */
.web-besparing {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: 3rem;
  background: var(--web-zacht);
  border: 1px solid var(--web-lijn);
  border-radius: 16px;
  padding: 1rem 1.75rem;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--web-body);
}
.web-besparing .bi {
  color: var(--web-muted);
  font-size: 1.5rem;
}

/* ── De documentenlijst ─────────────────────────────────────────────────── */
.web-rubriek {
  background: #fff;
  border: 1px solid var(--web-lijn);
  border-radius: 18px;
  box-shadow: var(--web-schaduw);
  padding: 1.75rem;
  height: 100%;
}
.web-rubriek-kop {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}
.web-rubriek-icoon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--web-indigo);
  background: var(--web-violet-vlak);
  font-size: 1.1rem;
}
.web-rubriek-titel { font-weight: 600; font-size: 1.12rem; color: var(--web-ink); margin: 0; }
.web-rubriek ul { list-style: none; margin: 0; padding: 0; }
.web-rubriek li {
  color: var(--web-body);
  font-size: .92rem;
  padding: .3rem 0 .3rem 1.35rem;
  position: relative;
}
.web-rubriek li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--web-mint);
}

/* ── Waarom Notuleo ─────────────────────────────────────────────────────── */
.web-waarom {
  background: #fff;
  border: 1px solid var(--web-lijn);
  border-radius: 18px;
  box-shadow: var(--web-schaduw);
  padding: 1.9rem;
  height: 100%;
}
.web-waarom-icoon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--web-indigo);
  background: var(--web-violet-vlak);
  margin-bottom: 1.1rem;
}
.web-waarom-titel { font-weight: 600; font-size: 1.15rem; color: var(--web-ink); }
.web-waarom-tekst { color: var(--web-body); font-size: .95rem; margin: .45rem 0 0; }
/* Een kaart met een voorbeeldvraag onderaan (de pagina AI-jurist): de vraag
   staat in elke kaart op dezelfde hoogte, schuin zoals in het vraagkader van
   de tool, onder een fijne lijn. */
.web-waarom.met-voorbeeld { display: flex; flex-direction: column; }
.web-waarom.met-voorbeeld .web-waarom-tekst { margin-bottom: 1.1rem; }
.web-waarom-voorbeeld {
  margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--web-lijn);
  font-style: italic; color: var(--web-ink); font-size: .95rem;
}

/* ── Demo en contact ────────────────────────────────────────────────────── */
.web-agenda {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--web-lijn);
  background: #fff;
  box-shadow: var(--web-schaduw);
}
.web-formulier {
  background: #fff;
  border: 1px solid var(--web-lijn);
  border-radius: 20px;
  box-shadow: var(--web-schaduw);
  padding: 2rem;
}
.web-formulier label {
  font-weight: 500;
  font-size: .9rem;
  color: var(--web-ink);
  margin-bottom: .35rem;
}
.web-formulier .form-control {
  border-radius: 12px;
  border-color: var(--web-lijn-2);
  padding: .65rem .9rem;
  font-size: .95rem;
}
.web-formulier .form-control:focus {
  border-color: var(--web-indigo);
  box-shadow: 0 0 0 .2rem rgba(67,56,202,.12);
}

/* ── Blog en cases ──────────────────────────────────────────────────────── */
.web-artikelkaart {
  display: block;
  background: #fff;
  border: 1px solid var(--web-lijn);
  border-radius: 18px;
  box-shadow: var(--web-schaduw);
  padding: 1.75rem;
  height: 100%;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.web-artikelkaart:hover { border-color: var(--web-indigo); color: inherit; transform: translateY(-2px); }
.web-artikelkaart h3 { font-weight: 600; font-size: 1.2rem; color: var(--web-ink); }
.web-artikel-meta {
  font-size: .8rem;
  font-weight: 500;
  color: var(--web-muted);
}
.web-artikel {
  max-width: 44rem;
  margin: 0 auto;
}
.web-artikel p { color: var(--web-body); font-size: 1.02rem; }
.web-tussenkop { font-weight: 600; font-size: 1.4rem; color: var(--web-ink); margin: 2rem 0 .75rem; }
.web-leeg {
  background: var(--web-zacht);
  border: 1px dashed var(--web-lijn-2);
  border-radius: 18px;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--web-body);
}

/* ── De voettekst ───────────────────────────────────────────────────────── */
.web-footer { background: var(--web-ink); color: rgba(255,255,255,.72); padding: 3.5rem 0 2rem; }
/* Het witte logo van Frederik; op een donkere ondergrond hoort het volledige
   logo, niet het symbool met losse tekst ernaast. */
.web-footer-logo { height: 34px; width: auto; display: block; }
.web-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.web-footer a:hover { color: #fff; }
.web-footer-kop { color: #fff; font-weight: 600; font-size: 1rem; margin-bottom: .75rem; }
.web-footer-onder {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}

/* Het logo-symbool in de donkere balk van de tool zelf. */
.corp-navbar .brand-symbool { height: 30px; width: auto; }

@media (max-width: 991.98px) {
  .web-sectie { padding: 3.5rem 0; }
  .web-hero { padding: 3rem 0; }
}
/* De balk van de website klapt uit vanaf 1200 pixels (navbar-expand-xl);
   daaronder staat het menu in een wit kader onder de balk. */
@media (max-width: 1199.98px) {
  .web-navbar .navbar-collapse {
    background: #fff;
    border: 1px solid var(--web-lijn);
    border-radius: 14px;
    margin-top: .75rem;
    padding: .75rem;
  }
}
.web-footer-slot { max-width: 24rem; }
.web-accordion-breedte { max-width: 46rem; }
.web-agenda-breedte { max-width: 62rem; }
/* De maten die Calendly zelf meegeeft in zijn insluitcode. */
.web-agenda .calendly-inline-widget { width: 100%; min-width: 320px; height: 700px; }
.web-contactadres { color: var(--web-indigo); font-weight: 500; text-decoration: none; }
.web-contactadres:hover { color: var(--web-indigo-700); }

/* Beheerpagina Website. */
.nt-beheerbreedte { max-width: 1120px; }
.nt-beheersectie {
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-sm);
  padding: .8rem 1rem;
  background: var(--nt-surface);
}
.nt-beheersectie summary { cursor: pointer; }
.nt-beheersectie + .nt-beheersectie { margin-top: .75rem; }
.nt-beheerafbeelding { max-height: 140px; background: var(--nt-bg); }
.nt-berichtcel { max-width: 420px; white-space: pre-line; }
/* Een korte websitepagina (blog zonder berichten) laat anders de grijze
   app-achtergrond zien tussen de inhoud en de voettekst. */
.corp-main:has(.web) { background: #fff; }
.web { min-height: 60vh; }

/* ── Reviewronde augustus 2026: detailrij onder het menu ────────────────── */
/* Zoals bij instaclause.com: wie op een laptop over een menukeuze zweeft,
   krijgt een rij met verdere details. Op een gsm blijft het gewone
   uitklapmenu gelden; daar bestaat geen zweven. */
.web-navbar .navbar-nav { align-items: center; }
.web-navitem { position: static; }
.web-megapanel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--web-lijn);
  box-shadow: 0 24px 48px -24px rgba(23,22,44,.25);
  padding: 1.5rem 0 1.75rem;
  display: none;
}
/* De brug: een onzichtbare strook boven het paneel, zodat de muis van de
   menukeuze naar het paneel kan zonder dat het zweven onderbroken wordt. */
.web-megapanel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.4rem;
}
@media (min-width: 1200px) {
  .web-navitem:hover .web-megapanel,
  .web-navitem:focus-within .web-megapanel { display: block; }
  .web-navitem:hover > .nav-link,
  .web-navitem:focus-within > .nav-link {
    color: var(--web-indigo);
    background: var(--web-tint);
  }
}
.web-megalink {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.web-megalink:hover, .web-megalink:focus {
  background: var(--web-tint);
  color: inherit;
}
.web-megalink-icoon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--web-indigo);
  background: var(--web-violet-vlak);
  font-size: 1.05rem;
}
.web-megalink-titel { font-weight: 600; font-size: 1rem; color: var(--web-ink); }
.web-megalink-tekst { color: var(--web-body); font-size: .85rem; margin: .15rem 0 0; }

/* ── Zo werkt het: een rustige tijdlijn in plaats van drie kaarten ──────── */
.web-stappenrij { position: relative; }
.web-tijdstap { text-align: center; padding: 0 1rem; position: relative; }
.web-tijdstap-bol {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4338ca 0%, #0d9488 100%);
  color: #fff;
  font-size: 1.5rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 24px -10px rgba(67,56,202,.55);
}
.web-tijdstap-nummer {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--web-lijn-2);
  color: var(--web-indigo);
  font-size: .8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* De verbindingslijn tussen de bollen, alleen op een laptop. Zij loopt van
   het midden van de eerste bol tot het midden van de laatste (vier stappen,
   dus 12,5 % en 87,5 %) en vervaagt naar beide uiteinden. */
@media (min-width: 992px) {
  .web-stappenrij::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(67,56,202,0) 0%,
        rgba(67,56,202,.35) 12%,
        rgba(139,92,246,.35) 50%,
        rgba(45,212,191,.45) 88%,
        rgba(45,212,191,0) 100%);
  }
}
.web-tijdstap-titel { font-weight: 600; font-size: 1.15rem; color: var(--web-ink); }
.web-tijdstap-tekst {
  color: var(--web-body);
  font-size: .95rem;
  margin: .5rem auto 0;
  max-width: 20rem;
}

/* Verschijnen bij het scrollen: onzichtbaar tot de sectie in beeld komt, dan
   één voor één (de vertraging zet de JavaScript per stap). Wie beweging
   beperkt heeft, ziet alles meteen.

   LET OP: dit is bewust een KEYFRAME-animatie en geen transition. Een
   transition op deze blokken werd al eens stilgelegd door een hover-regel
   verderop in het bestand die haar eigen `transition` zette en daarmee de
   hele lijst verving (augustus 2026). Een animatie kan zo niet worden
   overschreven. De vulling is `backwards`: tijdens de vertraging geldt het
   eerste beeld, en na afloop gelden weer de gewone stijlen, zodat de hover
   van de kaart gewoon blijft werken. */
@keyframes web-opkomen {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}
.web-verschijn { opacity: 0; }
.web-verschijn.is-zichtbaar {
  opacity: 1;
  animation: web-opkomen .75s cubic-bezier(.22,.85,.3,1) backwards;
}

/* De verbindingslijn van "Zo werkt het" tekent zichzelf van links naar
   rechts zodra de rij in beeld komt. Zij draagt geen opacity, dus zij staat
   los van de blokken hierboven. */
.web-groeilijn::before { transform: scaleX(0); transform-origin: left center; }
.web-groeilijn.is-zichtbaar::before {
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(.22,.85,.3,1) .15s;
}

/* De aangeleverde swish-elementen drijven traag, zodat de bovenkant van de
   pagina leeft ook zonder te scrollen (wens Frederik, augustus 2026). */
@keyframes web-drijven {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-22px, 16px, 0) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .web-verschijn { opacity: 1; }
  .web-verschijn.is-zichtbaar { animation: none; }
  .web-groeilijn::before, .web-groeilijn.is-zichtbaar::before {
    transform: none; transition: none;
  }
}

/* ── Voor wie: vier echte kaarten met een foto ──────────────────────────── */
.web-doelgroep {
  background: #fff;
  border: 1px solid var(--web-lijn);
  border-radius: 18px;
  box-shadow: var(--web-schaduw);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.web-doelgroep img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.web-doelgroep-inhoud { padding: 1.6rem 1.75rem; }
.web-doelgroep-titel { font-weight: 600; font-size: 1.2rem; color: var(--web-ink); }
.web-doelgroep-tekst { color: var(--web-body); font-size: .95rem; margin: .5rem 0 0; }

/* De ingekorte handelingenlijst per rubriek. */
.web-rubriek-meer {
  color: var(--web-muted);
  font-weight: 600;
  letter-spacing: .1em;
}
.web-rubriek li.web-rubriek-meer::before { background: var(--web-lijn-2); }

/* ── Het actieblok boven de voettekst ───────────────────────────────────── */
.web-cta {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(120deg, #4338ca 0%, #6d5cf0 45%, #0f766e 100%);
  color: #fff;
  padding: 3.5rem 2rem;
  text-align: center;
  isolation: isolate;
}
.web-cta-swish {
  position: absolute;
  right: -60px;
  bottom: -40px;
  width: 420px;
  max-width: 60%;
  opacity: .35;
  z-index: -1;
  pointer-events: none;
}
.web-cta-titel {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  color: #fff;
}
.web-cta-tekst {
  color: #fff;
  font-size: 1.05rem;
  max-width: 38rem;
  margin: .75rem auto 1.75rem;
}
.web-cta-voetnoot {
  color: #fff;
  font-size: .85rem;
  margin: 1rem 0 0;
}

/* ── Decor: de aangeleverde swish-elementen ─────────────────────────────── */
.web-decor { position: relative; isolation: isolate; overflow: hidden; }
.web-decor-beeld {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.web-decor-golf { right: -80px; bottom: -30px; width: 520px; opacity: .25; }
.web-decor-boog { left: -140px; top: -120px; width: 460px; opacity: .16; }
.web-footer-swish { right: -60px; top: -40px; width: 420px; opacity: .35; }

/* ── De nieuwsbrief in de voettekst ─────────────────────────────────────── */
.web-nieuwsbrief input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px;
  color: #fff;
  padding: .55rem .9rem;
  font-size: .9rem;
  min-width: 0;
  flex: 1 1 12rem;
}
.web-nieuwsbrief input::placeholder { color: rgba(255,255,255,.55); }
.web-nieuwsbrief input:focus {
  outline: none;
  border-color: var(--web-mint);
  background: rgba(255,255,255,.14);
}
/* De publieke catalogus staat in de vormtaal van de landing, maar de lijst
   zelf blijft de gedeelde kaartenlijst van de tool (die moet identiek zijn
   aan de kiezer na het inloggen). */
.nt-cataloguslijst { max-width: 70rem; }

/* Extra decor bovenaan de pagina (wens Frederik, augustus 2026: "add 1-2 more
   instances of the design attributes, esp. in the segments near the top").
   Telkens gedempt en achter de tekst, zodat de leesbaarheid niet lijdt. */
/* Gespiegeld (wens Frederik, augustus 2026: "mirror the white design
   element in the hero, currently the LHS is cut off"): in het bestand zelf
   lopen de bogen aan de LINKERkant hard tegen de rand van het beeld aan. Zo
   gespiegeld valt die harde rand buiten het scherm en wijzen de fijne
   uiteinden de kop in. De spiegeling zit mee in de keyframes, want een
   animatie zet ook `transform`. */
.web-hero-swish {
  right: -300px; top: -140px; width: 820px; opacity: .20;
  transform: scaleX(-1);
  animation: web-drijven-spiegel 15s ease-in-out infinite;
}
@keyframes web-drijven-spiegel {
  0%, 100% { transform: scaleX(-1) translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: scaleX(-1) translate3d(-22px, 16px, 0) rotate(-2deg); }
}
.web-band-swish {
  right: -90px; bottom: -120px; width: 420px; opacity: .22;
  animation: web-drijven 19s ease-in-out infinite reverse;
}
.web-decor-hoek {
  left: -160px; top: -80px; width: 420px; opacity: .12;
  animation: web-drijven 23s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .web-hero-swish, .web-band-swish, .web-decor-hoek { animation: none; }
}
@media (max-width: 767.98px) {
  /* Op een gsm is er geen ruimte voor decor naast de tekst. */
  .web-hero-swish, .web-band-swish, .web-decor-hoek { display: none; }
}

/* ── De pagina's Voor wie en Team (augustus 2026) ───────────────────────── */
.web-doelgroepbeeld {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--web-lijn);
  box-shadow: var(--web-schaduw);
}
.web-doelgroepbeeld img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}
.web-punten { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.web-punten li { display: flex; align-items: flex-start; gap: .65rem; color: var(--web-body); }
.web-punten .bi { color: var(--web-mint); line-height: 1.5; }

.web-teamkaart {
  background: #fff;
  border: 1px solid var(--web-lijn);
  border-radius: 18px;
  box-shadow: var(--web-schaduw);
  padding: 2rem;
  height: 100%;
  text-align: center;
}
.web-teamfoto {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.25rem;
  display: block;
}
.web-teamfoto-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--web-violet-vlak);
  color: var(--web-indigo);
  font-size: 3rem;
}
.web-teamnaam { font-weight: 600; font-size: 1.15rem; color: var(--web-ink); }
.web-teamfunctie {
  color: var(--web-indigo);
  font-weight: 500;
  font-size: .9rem;
  margin-top: .15rem;
}
.web-teamtekst { color: var(--web-body); font-size: .95rem; margin: .75rem 0 0; }
.nt-beheerafbeelding-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  border: 1px dashed var(--nt-line);
  border-radius: var(--nt-radius-sm);
  color: var(--nt-muted);
  font-size: var(--nt-tekst-sm);
}

/* ── De rekenhulp op de prijzenpagina (augustus 2026) ───────────────────── */
.roi-kader {
  background: #fff;
  border: 1px solid var(--web-lijn);
  border-radius: 20px;
  box-shadow: var(--web-schaduw);
  padding: 2rem;
}
.roi-schuif { width: 100%; accent-color: var(--web-indigo); }
.roi-aantal {
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--web-indigo);
}
.roi-vak {
  background: var(--web-zacht);
  border: 1px solid var(--web-lijn);
  border-radius: 16px;
  padding: 1.25rem;
  height: 100%;
  text-align: center;
}
.roi-vak-uitgelicht {
  background: linear-gradient(120deg, #4338ca 0%, #0f766e 100%);
  border-color: transparent;
  color: #fff;
}
.roi-vak-label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--web-muted);
}
.roi-vak-uitgelicht .roi-vak-label { color: rgba(255,255,255,.8); }
.roi-vak-waarde {
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--web-ink);
  margin-top: .35rem;
  /* De cijfers wisselen bij het schuiven; een vaste breedte per cijfer houdt
     de vakken stil in plaats van te laten springen. */
  font-variant-numeric: tabular-nums;
}
.roi-vak-uitgelicht .roi-vak-waarde { color: #fff; }
.roi-vak-bij { font-size: .85rem; color: var(--web-body); margin-top: .25rem; }
.roi-vak-uitgelicht .roi-vak-bij { color: rgba(255,255,255,.85); }

/* Een zachte reactie op de muis, zodat de kaarten leven zonder te bewegen
   waar het stoort (wens Frederik, augustus 2026: meer dynamiek). Deze regel
   mag haar eigen transition zetten: de opkomst bij het scrollen is een
   keyframe-animatie en staat daar los van. Zet hier dus NOOIT opnieuw de
   opkomst in een transition. */
.web-rubriek, .web-waarom, .web-doelgroep, .web-teamkaart {
  transition: opacity .5s ease, transform .3s ease, box-shadow .18s ease,
              border-color .18s ease;
}
.web-rubriek:hover, .web-waarom:hover, .web-doelgroep:hover,
.web-teamkaart:hover {
  transform: translateY(-3px);
  border-color: var(--web-lijn-2);
  box-shadow: 0 4px 12px -4px rgba(23,22,44,.10),
              0 24px 44px -24px rgba(23,22,44,.30);
}
@media (prefers-reduced-motion: reduce) {
  .web-rubriek:hover, .web-waarom:hover, .web-doelgroep:hover,
  .web-teamkaart:hover { transform: none; }
}
.nt-prijsintro { max-width: 640px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Reactie en de voorkeuren van de gebruiker (september 2026)

   Ontleend aan de skill `apple-design` (.claude/skills/apple-design), voor
   zover ze slaat op een formulierentoepassing zonder sleepbewegingen. Wat we
   eruit overnemen staat in ONTWERP.md; veren, gebaren en doorschijnende
   materialen laten we bewust liggen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Een knop reageert op het indrukken, niet op het loslaten. Het duwtje is
   klein en kort: het bevestigt de aanraking zonder de aandacht te trekken. */
.btn,
.nt-handelingkaart {
  transition: transform 100ms ease-out, background-color .15s ease,
              border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:active,
.nt-handelingkaart:active {
  transform: scale(.985);
}
.btn-lg:active { transform: scale(.99); }

/* Minder beweging. De gebruiker die dat in zijn systeem vraagt, krijgt geen
   schuivende, springende of opkomende elementen meer, alleen nog het gewone
   scherm. Overgangen verdwijnen niet helemaal maar worden onmerkbaar kort,
   zodat de tussentoestanden van uitklapbare blokken blijven werken. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .nt-handelingkaart:active,
  .nt-handelingkaart:hover {
    transform: none;
  }
}

/* Minder doorschijnendheid. Wie dat vraagt, ziet vaste vlakken in plaats van
   een waas: de balk van de website wordt wit, de markering in de band vol. */
@media (prefers-reduced-transparency: reduce) {
  .web-navbar, .corp-navbar {
    background: #ffffff;
    backdrop-filter: none;
  }
  .hero-badge {
    background: rgba(255, 255, 255, .22);
    backdrop-filter: none;
  }
}

/* Meer contrast. Randen en bijzinnen worden donkerder, zodat de scheiding
   tussen de vlakken zichtbaar blijft voor wie daarom vraagt. */
@media (prefers-contrast: more) {
  :root {
    --nt-line:   #b4bccb;
    --nt-line-2: #c4cbda;
    --nt-muted:  #4b5563;
    --nt-faint:  #5f6775;
  }
  .card,
  .form-control,
  .form-select,
  .btn-outline-secondary,
  .btn-light {
    border-color: #8b93a3;
  }
  .form-control::placeholder { color: #5f6775; }
}

/* ── AI-jurist: de vrije ingang en de vraagbaak ─────────────────────────────
   Eén invoerbalk op de home, het vraagscherm met voorbeeldzinnen, en het
   antwoordscherm met genummerde bronnen. De letters komen uit de ladder, de
   kleuren uit de tokens. */
/* "Vraag het aan Notuleo" is het opschrift van één veld, geen paginatitel
   (wens Frederik, 9 september 2026: "ook Vraag het aan Notuleo mag iets
   kleiner"). Op de tussentitelmaat woog het zwaarder dan de paginatitel
   erboven. */
.nt-jurist-titel { font-size: var(--nt-tekst-lg); font-weight: 700; color: var(--nt-ink); }
.nt-jurist-veld {
  font-size: var(--nt-tekst-lg); padding: .9rem 1.1rem;
  border: 1px solid var(--nt-line); background: var(--nt-surface);
}
/* Alleen het tekstvak van de home is hoog. Boven de handelingenlijst blijft
   de vraagbalk één regel, anders duwt zij de handelingen van het scherm. */
textarea.nt-jurist-veld { min-height: 6.5rem; }
.nt-jurist-balk { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Vraag het aan Notuleo, het enige kader in kleur op de home (Frederik, 25
   september 2026, bij het ontwerp van de werkplek: "meer in kleur zetten ipv
   de kader erboven. Maar niet overdrijven"). Een zacht violet vlak, de titel
   in indigo, het vak zelf wit. De voorbeeldvragen staan schuin en grijs in
   het vak; de regel voor alle voorbeeldtekst hierboven maakt ze schuin. */
.nt-vraagkaart { background: var(--nt-violet-vlak); border: 1px solid #ddd5fb; }
.nt-vraagkaart-titel { font-size: var(--nt-tekst-lg); font-weight: 600; color: var(--nt-indigo); margin: 0 0 .5rem; }
/* Op de home is de titel van het kader de titel van de pagina. */
.corp-main .nt-vraagkaart-titel.is-paginatitel { font-size: var(--nt-tekst-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--nt-indigo); margin: 0 0 .625rem; }
.nt-vraagkaart-uitleg { font-size: var(--nt-tekst-sm); color: var(--nt-body); margin: 0 0 1rem; }
.nt-vraagkaart .nt-jurist-veld { border-color: #d3c9f7; font-size: var(--nt-tekst-md); line-height: 1.5; }
/* Op een gsm lopen de drie voorbeeldvragen over twee regels: het vak wordt
   hoog genoeg om ze alle drie te tonen, anders viel de laatste weg. */
@media (max-width: 575.98px) { .nt-vraagkaart textarea.nt-jurist-veld { min-height: 12.5rem; } }
/* De vennootschap staat op haar eigen regel, over de volle breedte: een naam
   heeft geen bovengrens en een keuzelijst kan haar tekst niet afbreken (de
   meting VELDBREEDTES zag "Algemene Vennootschap voor Vastgoedbeheer"
   afgeknipt toen de knoppen ernaast stonden). Eronder staat nog één knop,
   rechts; een vennootschap toevoegen is de laatste keuze van de lijst. Op een
   gsm krijgt de knop de volle breedte. */
.nt-vraag-voet { display: grid; gap: .75rem; margin-top: 1.25rem; }
.nt-vraag-knoppen { display: flex; justify-content: flex-end; }
@media (max-width: 575.98px) { .nt-vraag-knoppen .btn { flex: 1 1 auto; } }

/* Het wachtscherm van de AI-jurist: de stappen van de keten, onder elkaar.
   Wat klaar is staat in de gewone tekstkleur met een vinkje, de lopende stap
   in de gewone kleur met een draaiend teken, de rest gedempt. */
.nt-voortgang { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.nt-voortgang-stap { display: flex; gap: .75rem; align-items: flex-start; color: var(--nt-muted); }
.nt-voortgang-stap.is-klaar, .nt-voortgang-stap.is-bezig { color: var(--nt-ink); }
.nt-voortgang-stap.is-klaar .nt-voortgang-teken { color: var(--nt-primary-600); }
.nt-voortgang-teken { flex: 0 0 1.25rem; display: flex; justify-content: center; padding-top: .15rem; }
.nt-voortgang-tekst { flex: 1 1 0; min-width: 0; }
.nt-voortgang-gevonden { display: block; margin-top: .25rem; color: var(--nt-muted); font-size: var(--nt-tekst-sm); }
.nt-jurist-balk input.nt-jurist-veld { flex: 1 1 18rem; min-width: 0; }
/* De vennootschap hoort bij de vraag, dus zij staat in dezelfde voet als de
   knop: kiezen en versturen op één regel (wens Frederik, september 2026).
   De link ernaast is er voor wie de vennootschap nog moet aanmaken. */
.nt-jurist-dossier {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0;
}
/* De keuzelijst neemt de ruimte die in de voet overblijft. Een vaste breedte
   knipte een lange vennootschapsnaam af, en een keuzelijst kan haar tekst
   niet afbreken (dezelfde valkuil als bij de kolom Functie). */
.nt-jurist-dossier .form-select { flex: 1 1 13rem; min-width: 0; }
/* Op een gsm gaat het opschrift BOVEN de keuzelijst, zodat zij de volle
   breedte krijgt: naast elkaar nam het opschrift bijna honderd pixels en
   werd een gewone vennootschapsnaam afgeknipt. Zelfde uitweg als bij de
   kolom Functie in de bestuurdersrij. */
@media (max-width: 575.98px) {
  .nt-jurist-dossier { flex-direction: column; align-items: stretch; gap: .25rem; }
  /* In een kolom is de flexbasis een HOOGTE: zonder deze regel rekte de
     keuzelijst uit tot dertien regels hoog. */
  .nt-jurist-dossier .form-select { flex: 0 0 auto; }
}
.nt-jurist-veldlabel {
  font-size: var(--nt-tekst-sm); color: var(--nt-muted); margin: 0; white-space: nowrap;
}
.nt-jurist-knop { flex: 0 0 auto; }
/* Het veld waarin de gebruiker zegt wat er aan een antwoord scheelt: het
   neemt de rest van de regel, en springt op een gsm naar een eigen regel. */
.nt-jurist-toelichting { flex: 1 1 16rem; min-width: 12rem; }
.nt-jurist-veld:focus { border-color: var(--nt-primary); box-shadow: 0 0 0 .25rem var(--nt-primary-050); }
.nt-jurist-vraag {
  background: var(--nt-primary-050); border-radius: var(--nt-radius);
  padding: 1rem 1.25rem; color: var(--nt-ink); overflow-wrap: anywhere;
  font-size: var(--nt-tekst-md);
}
.nt-jurist-kern { font-size: var(--nt-tekst-lg); color: var(--nt-ink); line-height: 1.6; }
/* Elke voorgestelde handeling is dezelfde rij: de naam links, de bediening
   rechts. Zij mocht wikkelen, en dan zakte de bediening naar een eigen regel
   zodra de omschrijving lang genoeg was. Dat gebeurde bij de ene handeling
   wel en bij de andere niet, dus stond de knop Start op hetzelfde scherm op
   twee verschillende plaatsen (opmerking Frederik, 8 september 2026). De
   tekstkolom krimpt nu in plaats van de bediening weg te duwen: een lange
   omschrijving loopt over twee regels. Pas op een smal scherm gaat élke rij
   op haar kant, en dan zijn ze weer allemaal gelijk. */
.nt-jurist-handeling {
  display: flex; gap: 1rem; align-items: center; flex-wrap: nowrap;
  padding: .75rem 0; border-bottom: 1px solid var(--nt-line-2);
}
.nt-jurist-handeling > .flex-grow-1 { flex: 1 1 0; min-width: 0; }
.nt-jurist-handeling:last-of-type { border-bottom: 0; }
.nt-jurist-handeling-actie {
  display: flex; gap: .5rem; align-items: center; flex-wrap: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 575.98px) {
  .nt-jurist-handeling { flex-wrap: wrap; align-items: flex-start; }
  .nt-jurist-handeling-actie { flex-wrap: wrap; }
}
/* Het antwoord loopt na de kern verder in gewone tekst, elke zin met haar
   bron erachter; geen apart kader "Uitwerking" meer (Frederik, 25 september
   2026). */
.nt-jurist-vervolg { color: var(--nt-ink); line-height: 1.6; }
.nt-jurist-kern .nt-bronlabel,
.nt-jurist-vervolg .nt-bronlabel { vertical-align: middle; }
.nt-jurist-voetnoot { font-size: var(--nt-tekst-sm); }
.nt-bronlabel {
  flex-shrink: 0; display: inline-block; font-size: var(--nt-tekst-xs); font-weight: 700;
  background: var(--nt-primary-050); color: var(--nt-primary-700); border-radius: 6px;
  padding: .2rem .45rem; text-decoration: none; letter-spacing: .02em; line-height: 1.4;
}
.nt-bron {
  border: 1px solid var(--nt-line); border-radius: var(--nt-radius-sm);
  background: var(--nt-surface); margin-bottom: .6rem;
}
.nt-bron summary {
  cursor: pointer; padding: .7rem 1rem; font-weight: 600; color: var(--nt-ink);
  display: flex; gap: .6rem; align-items: center; min-width: 0;
}
.nt-bron-tekst {
  white-space: pre-wrap; padding: 0 1rem 1rem; font-size: var(--nt-tekst-sm);
  color: var(--nt-body); line-height: 1.6; max-height: 24rem; overflow: auto;
}

/* Het nazichtboek in Beheer (25 september 2026): de inhoudstafel met per
   scenario zijn stand, en de vragen onder het stappenplan. */
.nt-nazicht-inhoud { display: flex; flex-wrap: wrap; gap: .5rem; }
.nt-nazicht-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border: 1px solid #ddd5fb; border-radius: 999px;
  background: #fff; color: var(--nt-body); text-decoration: none;
  font-size: var(--nt-tekst-sm);
}
.nt-nazicht-chip:hover { border-color: var(--nt-accent, #4338ca); }
.nt-nazicht-filter { cursor: pointer; }
.nt-nazicht-filter.is-actief {
  background: var(--nt-primary); border-color: var(--nt-primary); color: #fff;
}
.nt-nazicht-filter.is-actief i { color: #fff; }
.nt-nazicht-nagekeken i { color: #15803d; }
.nt-nazicht-gewijzigd i { color: #b45309; }
.nt-nazicht-open i { color: var(--nt-muted, #5b6472); }
.nt-nazicht-vragen { margin: 0; padding-left: 1.2rem; }
.nt-nazicht-vragen li { margin-bottom: .35rem; }
.nt-nazicht-document { padding: .6rem 0; border-bottom: 1px solid var(--nt-line); }
.nt-nazicht-document:last-of-type { border-bottom: 0; }
.nt-nazicht-verouderd { color: #b45309; }
.nt-nazicht-tekst {
  white-space: pre-wrap; font-size: var(--nt-tekst-sm); line-height: 1.5;
  max-height: 32rem; overflow-y: auto; padding: .75rem 1rem; margin-top: .5rem;
  background: var(--nt-bg); border-radius: var(--nt-radius-sm);
}
/* Nazichtboek: aanpassen op het scherm (25 september 2026). */
.nt-aanpassen {
  border: 0; background: none; padding: 0 0 0 .5rem; margin: 0;
  color: var(--nt-primary); font-size: var(--nt-tekst-xs); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.nt-aanpassen i { margin-right: .25rem; }
.nt-aanpassen:hover { text-decoration: underline; }
.nt-nazicht-onderdeel { padding: .5rem 0; border-bottom: 1px solid var(--nt-line); }
.nt-nazicht-onderdeel:last-child { border-bottom: 0; }
.nt-nazicht-voorproef { overflow-wrap: anywhere; }
/* Nazichtboek: de artikelnummers die de controle als fout of twijfel meldde
   (27 september 2026). De zin zelf staat als citaat, de wettekst achter een
   eigen klik, zodat de lijst kort blijft. */
.nt-rijen p.nt-artikelzin {
  color: var(--nt-ink); border-left: 2px solid var(--nt-line-2);
  padding-left: .75rem; margin: .375rem 0 .5rem;
}
.nt-artikelwet { margin: .25rem 0 .5rem; }
.nt-artikelwet > summary { cursor: pointer; font-size: var(--nt-tekst-sm); color: var(--nt-indigo-700); }
.nt-artikelwet[open] > summary { margin-bottom: .25rem; }
.nt-bewerkvak { font-size: var(--nt-tekst-sm); line-height: 1.5; }
.nt-bewerktabel textarea, .nt-bewerktabel input { font-size: var(--nt-tekst-sm); }
.nt-bewerktabel { min-width: 52rem; }
.nt-bewerktabel th:first-child { width: 9rem; }