/* Template scaffolding — page layout and web-scale sizing only; every color,
   font, radius and shadow comes from ../../styles.css. The voice is the
   deck's, re-derived for a scrolling page: the grid SHOWS — 2px
   rules draw the structure — red is spent as a mark, and its one field
   moment is the poster close (the deck's divider logic: the red page sets
   nothing small).

   THE RHYTHM: a 28px leading unit (17px Archivo body at ~1.65), 14px
   half-step; line-heights and block margins in unit multiples, heads
   cap-trimmed, ?baselines/B to review. The deck's seat-pinning relaxes to
   per-block discipline on a fluid page. The system's own interface
   components (nav, buttons, inputs) keep their styles.css leading — the
   rhythm governs the page's text, not the controls.

   THE LANDING LAWS (shared by all six systems' landing templates):
   #1 display headers break per sentence (.line spans); #2 the landing
   advertises an invented product played straight — modernist's is Takt,
   timetables that run like Switzerland; #3 spacing is cluster-scoped
   (display leading ratio-governed ≈1.06 for Archivo's tight caps — the
   display-block lattice exemption — tight single-unit gaps inside a text
   cluster, the air between sections); #4 no hero eyebrow — the nav brand
   names the product.

   Optical left alignment: the deck's measured Archivo 800 value carries
   verbatim (-0.058em where caps lead a display line; em-scaled). */
:root {
  /* Merkkleur uit het KrissTickets-logo — de accentrol van het systeem,
     opnieuw gezet in blauw; de ramp volgt dezelfde OKLCH-lichtheidstrap. */
  --color-accent: #1a4fd6;
  --color-accent-100: oklch(0.955 0.025 264);
  --color-accent-200: oklch(0.90 0.055 264);
  --color-accent-300: oklch(0.82 0.10 264);
  --color-accent-400: oklch(0.62 0.19 264);
  --color-accent-500: #1a4fd6;
  --color-accent-600: oklch(0.43 0.20 264);
  --color-accent-700: oklch(0.38 0.175 264);
  --color-accent-800: oklch(0.30 0.14 264);
  --color-accent-900: oklch(0.22 0.10 264);
  --color-accent-2: #1a4fd6;
  --color-accent-2-100: oklch(0.955 0.025 264);
  --color-accent-2-200: oklch(0.90 0.055 264);
  --color-accent-2-300: oklch(0.82 0.10 264);
  --color-accent-2-400: oklch(0.62 0.19 264);
  --color-accent-2-500: #1a4fd6;
  --color-accent-2-600: oklch(0.43 0.20 264);
  --color-accent-2-700: oklch(0.38 0.175 264);
  --color-accent-2-800: oklch(0.30 0.14 264);
  --color-accent-2-900: oklch(0.22 0.10 264);
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
/* the component demo pads the masthead with its own spacing; on the page the
   masthead's contents take the page gutter and sit on the wrap's text axis
   (padding-only — full-width paint such as a masthead rule is untouched) */
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav-brand img { display: block; height: 20px; width: auto; }
.nav a[aria-current='location'], .nav a[aria-current='page'] { color: var(--color-accent); } /* in-page anchor, not
   a page link — 'location' is the truthful value; carry the component's active ink */
@media (max-width: 480px) { .nav a:not(.nav-brand):not(.btn) { display: none; } } /* phone width: the nav
   keeps brand + the one action (layout-only — the component's look is
   untouched); the full link row's min-content crosses narrow-phone widths */

/* — drawn structure: the 2px rule is the section seam (the deck's header
   band as page grammar; rules span the content column, solid — this system
   does not fade its rules) — */
.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

/* — kicker (deck grammar: uppercase, tabular, accent; no hanging dash —
   modernist marks are squares, and they belong to lists, not labels) — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); /* accent-colored SMALL text takes the deep step —
     6.4:1, where the base accent measures 3.8:1 (a large-text value; the
     deck's kickers are 24px, this one is 13px) */
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — hero — */
.hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: clamp(38px, 5.5vw, 72px); /* law #3: ratio-governed ≈1.06 —
     Archivo's 800 sits tight and all-cap-height; the display-block lattice
     exemption (no 14px step is both tighter than the old look and clear) */
  letter-spacing: -0.02em; margin: 0;
  margin-left: -0.058em; /* optical left alignment — the deck's measured Archivo 800 value */
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; } /* law #1: one sentence per line */
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic; } /* 1.5 units: clears the display's descenders with cluster-tight air (law #3) */
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — stat row (in-grammar: red stays a MARK on the light ground — the stat
   numerals take the accent at display size, ≥3:1 as large text per the
   system's own accent rule; the red FIELD is reserved for the close) — */
.stats { padding: calc(2.5 * var(--leading)) 0; }
.stats .grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading); }
.stat-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  color: var(--color-accent); /* display figures stay proportional — the deck's figure policy */
  margin: 0; margin-left: -0.045em; /* digits lead — the deck's "0"-population value */
  text-box: trim-both cap alphabetic; }
.stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* small-text ink on the
     light ground: 70% measures 5.8:1 (the deck's 55% furniture mix is a
     24px large-text convention — at 13px the 4.5:1 bar applies, and 55%
     measures only 3.7:1 here) */
  margin: var(--half) 0 0; }

/* — feature rows (the deck's ruled-toc grammar: 2px rules ON the seams,
   red square marks hanging at the numbers — drawn structure, no cards) — */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.feature { display: grid; grid-template-columns: minmax(64px, 160px) minmax(0, 420px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.5 * var(--leading)) 0; }
.feature + .feature { border-top: 2px solid var(--color-divider); } /* the ruled seam — solid, the system's weight */
.f-num { position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: var(--leading); color: var(--color-text);
  font-feature-settings: "tnum" 1; margin: 0; text-box: trim-both cap alphabetic; }
.f-num::before { content: ""; position: absolute; left: -24px; top: calc(0.5cap - 5px);
  width: 10px; height: 10px; background: var(--color-accent); } /* the deck's 10px red square,
     hanging left of the number's axis — at narrow widths the gutter folds it away */
@media (max-width: 1280px) { .f-num::before { display: none; } }
.f-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0; text-box: trim-both cap alphabetic; }
.f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic; }

/* — imagery split (grayscale photograph — the system prints in black and
   white; the box pins the bundled asset's 951×665 ratio so swaps
   cover-crop into the same frame) — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em;
  margin: 0; text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; }
.split-figure { margin: 0; }
.split-figure image-slot { width: 100%; aspect-ratio: 951 / 665; }

/* — productvitrines: een schermafbeelding in een 2px-kader, de rand als
   frame in plaats van een schaduw; interface-beeld blijft in kleur (de
   grayscale-regel geldt voor fotografie) — */
.showcase { padding: calc(3 * var(--leading)) 0 calc(2 * var(--leading)); }
.showcase-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--half) clamp(24px, 5vw, 96px); align-items: baseline; }
.showcase-head .note { font-size: 17px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic; }
.shot { margin: calc(1.5 * var(--leading)) 0 0; background: var(--color-surface, #fff); }
.shot image-slot { display: block; width: 100%; aspect-ratio: 16 / 10; }
.shot.tall image-slot { aspect-ratio: 4 / 3; }
.shot figcaption { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent);
  padding: var(--half) 0 0; }
.bullets { list-style: none; margin: calc(1.5 * var(--leading)) 0 0; padding: var(--leading) 0 0;
  border-top: 2px solid var(--color-divider);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--leading) clamp(24px, 4vw, 64px); }
.bullets h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
  text-box: trim-both cap alphabetic; }
.bullets p { font-size: 15.5px; line-height: var(--leading); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); text-box: trim-both cap alphabetic; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.pair .shot { margin-top: 0; }
@media (max-width: 880px) {
  .showcase-head { grid-template-columns: 1fr; }
  .bullets { grid-template-columns: 1fr; gap: var(--leading); }
  .pair { grid-template-columns: 1fr; }
}

/* — quote (hanging punctuation, the deck's measured Archivo advances) — */
.quote { padding: calc(2.5 * var(--leading)) 0 calc(3.5 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; max-width: 32ch; margin: 0;
  text-indent: -0.496em; /* hang the opening “ (the deck's measured advance in the 800) */
  text-box: trim-both cap alphabetic;
}
.quote figcaption { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* 5.8:1 — see .stat-label */
  margin: calc(2 * var(--leading) - 1cap) 0 0; /* two grid units below the quote's
     last baseline — one reads as part of the quote block; the attribution needs air */
  text-indent: -1.209em; /* hang the leading em-dash + space (measured in the Regular) */
  text-box: trim-both cap alphabetic; }

@media (max-width: 720px) {
  /* the phone gutter (--edge bottoms out at 20px) is narrower than the hung
     marks' measured advances, so a hung “ or em-dash would press into or past
     the viewport edge — seat the quote flush below this width; the hang
     returns with the wider gutter */
  .quote blockquote, .quote figcaption { text-indent: 0; }
}

/* — the red poster close (the deck's divider logic: the accent's one field
   moment, type reversed to the paper token). COPY on the red is
   display-grade only — paper display type measures 3.8:1, the deck
   dividers' own derivation. The one small element is the ghost button, a
   CONTROL: paper-on-red measures the same 3.8:1, which meets the system's
   documented interface-chrome bar (the readme tunes the accent pair to at
   least 3:1 — "enough for icons, large text and interface chrome, not for
   body copy") — the same bar the system's own accent-filled primary button
   label rides everywhere. */
.close { background: var(--color-accent); color: var(--color-bg); }
.close .wrap { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }
.close h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px); line-height: clamp(36px, 4.45vw, 59.4px); /* ≈1.06 —
     display-grade, so it carries the display-block lattice exemption (the
     rhythm probe excludes .display and .close h3 alike) */
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
  text-box: trim-both cap alphabetic; }
.close h3 .line { display: block; }
.close .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
.close .btn-ghost { color: var(--color-bg); border-color: var(--color-bg); } /* paper outline on the red field */
footer { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* 5.8:1 — see .stat-label */ }

/* — responsive collapse — */
/* the feature grid's fixed-max columns (160 + 420 + gaps) crush the copy
   column in the tablet band, so it collapses earlier than the page */
@media (max-width: 1120px) {
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
  .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
}

/* Review aid: the 28px rhythm drawn as hairlines — debug chrome, toggled by
   ?baselines or the B key, never part of the look. */
body[data-baselines] { position: relative; }
body[data-baselines]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--color-accent) 35%, transparent) 0 1px,
      transparent 1px var(--leading)),
    repeating-linear-gradient(to bottom,
      transparent 0 var(--half),
      color-mix(in srgb, var(--color-accent) 16%, transparent) var(--half) calc(var(--half) + 1px),
      transparent calc(var(--half) + 1px) var(--leading));
}
/* — pagina-extra's: kolomkoppen als link, en het demoformulier — */
.f-title a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--color-accent); }
.f-title a:hover { color: var(--color-accent); }
.hero .kicker { margin-bottom: var(--half); }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--leading) clamp(24px, 4vw, 56px); margin: calc(1.5 * var(--leading)) 0 0;
  max-width: 760px; }
.formgrid .field-wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .formgrid { grid-template-columns: 1fr; } }

/* — geanimeerde demo-fragmenten in het kader — */
.shot .demo { display:block; width:100%; aspect-ratio:16 / 10; }
.shot:has(> .demo) { background: transparent; } /* de demo schildert zijn eigen vlak */
.shot.tall .demo { aspect-ratio:4 / 3; }
@media (prefers-reduced-motion: reduce) { .shot .demo * { animation:none !important; } }

/* het weekrooster vult het kader precies — geen loze ruimte onder de grid */
.shot demo-planning.demo { aspect-ratio:1.67; }

.shot demo-oproepen.demo { aspect-ratio:2.95; }

/* — voettekst met kolommen — */
.sitefoot { display:grid; grid-template-columns:minmax(0,2fr) repeat(4, minmax(0,1fr));
  gap: var(--leading) clamp(24px,4vw,64px); padding: calc(2 * var(--leading)) 0 calc(1.5 * var(--leading));
  border-top: 2px solid var(--color-divider); }
.sitefoot img { display:block; height:20px; width:auto; }
.sitefoot p { font-size:14px; line-height:var(--leading); margin: var(--half) 0 0;
  max-width:34ch; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.sitefoot h4 { font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 var(--half);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.sitefoot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sitefoot a { font-size:15px; line-height:24px; color:var(--color-text); text-decoration:none;
  border-bottom:1px solid transparent; }
.sitefoot a:hover { color:var(--color-accent); border-bottom-color:var(--color-accent); }
.legal { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  border-top:2px solid var(--color-divider); padding: var(--leading) 0;
  font-size:13px; line-height:var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
@media (max-width: 1000px) { .sitefoot { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px) { .sitefoot { grid-template-columns:1fr 1fr; } }

/* vier voordelen passen ook naast elkaar */
.bullets.four { grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width: 1120px) { .bullets.four { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .bullets.four { grid-template-columns:1fr; } }
.bullets a { color:var(--color-accent); text-decoration:none; border-bottom:1px solid currentColor; }

.shot.tall demo-verzoeken.demo, .shot.tall demo-uren.demo { aspect-ratio:1.19; }
.shot.tall demo-deur.demo { aspect-ratio:1.58; }
.shot.tall demo-scanner.demo { aspect-ratio:0.53; }
.shot.tall demo-mijn.demo { aspect-ratio:0.96; }
.shot.tall demo-prikbord.demo { aspect-ratio:1.08; }
.shot.tall demo-deurverkoop.demo, .shot.tall demo-deurpin.demo,
.shot.tall demo-deurkas.demo { aspect-ratio:0.53; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.trio .shot { margin-top: 0; }
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px); justify-items: center; }
.quad .shot { margin-top: 0; width: 100%; max-width: 240px; }
.showcase-head + .quad { margin-top: calc(1.5 * var(--leading)); }
@media (max-width: 1000px) { .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .quad { grid-template-columns: 1fr; } }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 48px); justify-items: center; }
.duo .shot { margin-top: 0; width: 100%; max-width: 240px; }
.showcase-head + .duo { margin-top: calc(1.5 * var(--leading)); }
.shot.tall demo-terugverkoop.demo, .shot.tall demo-qrcode.demo { aspect-ratio:0.53; }
.showcase-head + .trio { margin-top: calc(1.5 * var(--leading)); }
@media (max-width: 880px) { .trio { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .trio .shot { max-width: 240px; margin-inline: auto; } }

/* ─────────── landingspagina: hoofdstukken ─────────── */
.hero-lead { padding: calc(3.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.hero-lead .display { font-size: clamp(46px, 7.4vw, 104px); line-height: clamp(48.8px, 7.84vw, 110px); }
.hero-lead .sub { font-size: 19px; max-width: 46ch; margin-top: calc(2 * var(--leading) - 1cap); }
.hero-lead .row { margin-top: calc(1.5 * var(--leading)); }
.stage { padding: 0 0 calc(2.5 * var(--leading)); }
.stage .shot { margin-top: 0; }
.chapter { border-top: 2px solid var(--color-divider); padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.chap-head { display: grid; grid-template-columns: 4ch minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--half) clamp(24px, 4vw, 72px); align-items: baseline; }
.chap-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: var(--leading); color: var(--color-accent);
  font-feature-settings: "tnum" 1; margin: 0; text-box: trim-both cap alphabetic; }
.chap-line { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.02em;
  margin: 0; margin-left: -0.045em; text-box: trim-both cap alphabetic; }
.chap-aside { display: flex; flex-direction: column; gap: var(--half); }
.chap-aside p { font-size: 16px; line-height: var(--leading); margin: 0; max-width: 40ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); text-box: trim-both cap alphabetic; }
.more { align-self: flex-start; font-family: var(--font-heading);
  font-weight: var(--font-heading-weight); font-size: 15px; line-height: var(--leading);
  color: var(--color-text); text-decoration: none;
  border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; }
.more:hover { color: var(--color-accent); }
.chap-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--leading) clamp(24px, 5vw, 88px); align-items: center;
  margin-top: calc(1.5 * var(--leading)); }
.chap-split .shot { margin-top: 0; }
@media (max-width: 880px) {
  .chap-head { grid-template-columns: 1fr; }
  .chap-split { grid-template-columns: 1fr; }
}

/* ─────────── landingspagina: één scherm, geen scroll ─────────── */
body.lp { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.lp .nav { flex: none; }
.lp-main { flex: 1; min-height: 0; display: grid; align-items: center;
  grid-template-columns: minmax(min-content, 0.86fr) minmax(0, 1.24fr);
  gap: clamp(24px, 3vw, 56px);
  max-width: 1360px; width: 100%; margin: 0 auto; padding: clamp(16px, 3vh, 44px) var(--edge); }
.lp-main .display { font-size: clamp(34px, 3.7vw, 54px); line-height: 1.06;
  letter-spacing: -0.02em; margin: 0; margin-left: -0.058em; text-box: trim-both cap alphabetic; }
.lp-main .display .line { white-space: nowrap; }
.lp-sub { font-size: clamp(16px, 1.35vw, 19px); line-height: var(--leading); max-width: 40ch;
  margin: clamp(14px, 2.4vh, 30px) 0 0; text-box: trim-both cap alphabetic; }
.lp-aud { font-size: clamp(15px, 1.25vw, 18px); line-height: var(--leading); max-width: 42ch;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: clamp(8px, 1.2vh, 14px) 0 0; text-wrap: pretty; }
.lp-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: clamp(16px, 2.8vh, 32px); }
.lp-stage figcaption { font-size: 12px; line-height: var(--half); letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent);
  padding-top: var(--half); }
.lp-stage { position: relative; align-self: stretch; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; }
.lp-slot { position: relative; width: 100%; }
.lp-slot .demo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: block; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.lp-slot .demo.on { opacity: 1; }
.lp-cap { display: flex; align-items: baseline; gap: 14px; padding-top: var(--half); }
.lp-cap .dots { display: flex; gap: 6px; margin-left: auto; }
.lp-cap .dots button { width: 22px; height: 4px; border: 0; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--color-text) 22%, transparent); }
.lp-cap .dots button[aria-current="true"] { background: var(--color-accent); }
.lp-cap .dots button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lp-nav { flex: none; border-top: 2px solid var(--color-divider); }
.lp-nav ul { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); }
.lp-nav li + li { border-left: 2px solid var(--color-divider); }
.lp-nav a { display: flex; align-items: baseline; gap: 12px; text-decoration: none;
  color: var(--color-text); padding: clamp(14px, 2.2vh, 26px) clamp(12px, 2vw, 28px); }
.lp-nav li:first-child a { padding-left: 0; }
.lp-nav a:hover { background: var(--color-accent); color: var(--color-bg); }
.lp-nav .n { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; color: var(--color-accent); font-feature-settings: "tnum" 1; }
.lp-nav a:hover .n { color: var(--color-bg); }
.lp-nav .l { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(15px, 1.3vw, 19px); line-height: 1.25; letter-spacing: -0.01em; }
.lp-nav .l span { display: block; font-family: var(--font-body); font-weight: 400;
  font-size: 13px; line-height: 20px; color: color-mix(in srgb, var(--color-text) 65%, transparent);
  margin-top: 2px; }
.lp-nav a:hover .l span { color: color-mix(in srgb, var(--color-bg) 80%, transparent); }
@media (max-width: 980px), (max-height: 620px) {
  body.lp { height: auto; overflow: visible; }
  .lp-main { grid-template-columns: 1fr; padding-top: calc(2 * var(--leading)); padding-bottom: var(--leading); }
  .lp-nav ul { grid-template-columns: 1fr 1fr; }
  .lp-nav li:nth-child(3) a, .lp-nav li:nth-child(4) a { border-top: 2px solid var(--color-divider); }
  .lp-nav li:nth-child(3) { border-left: 0; }
}

/* — terugkoppeling onder het demoformulier — */
.formstatus { font-size: 15.5px; line-height: var(--leading); margin: var(--half) 0 0;
  max-width: 52ch; color: color-mix(in srgb, var(--color-text) 80%, transparent);
  border-left: 2px solid var(--color-accent); padding-left: var(--half); }
.formstatus.is-fout { border-left-color: #c0392b; color: #c0392b; }
#demoknop[disabled] { opacity: .55; cursor: progress; }

/* — roterende reeks fragmenten (zelfde ritme als de landingspagina) — */
.rot-row { display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--leading) clamp(32px, 6vw, 88px); align-items: start;
  margin-top: calc(1.5 * var(--leading)); }
.rot-row .bullets { grid-template-columns: 1fr; border-top: 0; padding-top: 0; margin-top: 0; gap: var(--leading); }
@media (max-width: 720px) { .rot-row { grid-template-columns: 1fr; } }
.rot { margin: 0; width: 100%; max-width: 260px; }
.rot-row-wide { grid-template-columns: 340px minmax(0, 1fr); }
.rot-wide { max-width: 340px; }
.rot-wide .rot-slot { aspect-ratio: 0.56; }
.rot-slot { position: relative; width: 100%; aspect-ratio: 0.53; }
.rot-slot .demo { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.rot-slot .demo.on { opacity: 1; }
.rot-cap { display: flex; align-items: baseline; gap: 14px; padding-top: var(--half);
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.rot-cap .dots { display: flex; gap: 6px; margin-left: auto; flex: none; }
.rot-cap .dots button { width: 18px; height: 4px; border: 0; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--color-text) 22%, transparent); }
.rot-cap .dots button[aria-current="true"] { background: var(--color-accent); }
.rot-cap .dots button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — vorige / volgende onder aan elke pagina — */
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 64px);
  border-bottom: 2px solid var(--color-divider);
  padding: calc(1.5 * var(--leading)) 0; }
.pager .pg { display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  color: var(--color-text); }
.pager .pg-leeg { min-height: 1px; }
.pager .next { text-align: right; align-items: flex-end; }
.pager .pg-l { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.pager .pg-t { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.015em; line-height: 1.15; }
.pager .prev .pg-t::before { content: '\2190\00a0'; color: var(--color-accent); }
.pager .next .pg-t::after { content: '\00a0\2192'; color: var(--color-accent); }
.pager .pg:hover .pg-t { color: var(--color-accent); }


/* ─────────── veiligheidspagina + witte nav-knop ─────────── */
.btn.btn-white { background: #fff; color: var(--color-text); border: 2px solid var(--color-text); }
.btn.btn-white:hover { background: #fff; color: var(--color-accent); border-color: var(--color-accent); }
.btn.btn-white:active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ─────────── juridische pagina's (privacy, cookies) ─────────── */
.doc { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading));
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--half) clamp(24px, 5vw, 96px); align-items: start; }
.doc > h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em;
  margin: 0; text-box: trim-both cap alphabetic; }
.doc-body { max-width: 62ch; }
.doc-body > * + * { margin-top: var(--half); }
.doc-body p, .doc-body li { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.doc-body p { margin: 0; }
.doc-body h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
  padding-top: var(--half); }
.doc-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-body ul li { padding-left: 20px; position: relative; }
.doc-body ul li::before { content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; background: var(--color-accent); }
.doc-body a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.doc-body table { width: 100%; max-width: 100%; table-layout: fixed;
  border-collapse: collapse; font-size: 14.5px; }
.doc-body table th, .doc-body table td { text-align: left; vertical-align: top;
  padding: 10px 16px 10px 0; border-bottom: 1px solid var(--color-divider);
  line-height: var(--leading); overflow-wrap: anywhere; hyphens: auto; }
.doc-body table th { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 2px solid var(--color-divider); }
.doc-body table td { color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.invul { background: color-mix(in srgb, var(--color-accent) 14%, #fff);
  border-bottom: 2px solid var(--color-accent); font-style: normal; padding: 0 3px; }
@media (max-width: 860px) { .doc { grid-template-columns: 1fr; gap: var(--half); } }
.legal a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent); }
.legal a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.linkbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent); }
.linkbtn:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.linkbtn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: calc(1.5 * var(--leading)) 0 0; padding: 0; }
.chips li { font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; padding: 8px 12px; background: #fff;
  border: 2px solid var(--color-divider); }

.facts { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--leading) clamp(24px, 4vw, 64px); }
.facts li { border-top: 2px solid var(--color-divider); padding-top: var(--half); }
.facts .f-lbl { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); }
.facts .f-val { display: block; font-family: var(--font-heading);
  font-weight: var(--font-heading-weight); font-size: 30px; line-height: var(--leading);
  letter-spacing: -0.02em; margin-top: var(--half); font-variant-numeric: tabular-nums; }
.facts .f-val em { font-style: normal; font-size: 15px; letter-spacing: 0;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.facts p { font-size: 15px; line-height: var(--leading); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
@media (max-width: 1000px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }

.f-tag { display: inline-block; margin-left: 6px; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-accent); white-space: nowrap; }

/* legenda-regel onder de landingsnavigatie */
.lp-legal { flex: none; border-top: 2px solid var(--color-divider);
  max-width: 1200px; width: 100%; margin: 0 auto; padding: 10px var(--edge);
  display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between;
  font-size: 12.5px; line-height: 20px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.lp-legal a, .lp-legal .linkbtn { color: inherit; font-size: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 28%, transparent); }
.lp-legal a:hover, .lp-legal .linkbtn:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ─────────── kostenpagina: rekenvoorbeeld ─────────── */
.calc { margin-top: calc(1.5 * var(--leading)); padding-top: var(--leading);
  border-top: 2px solid var(--color-divider);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: start; }
.calc-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--leading) clamp(20px, 3vw, 40px); }
.calc-uit { border-left: 2px solid var(--color-divider); padding-left: clamp(20px, 3vw, 40px); }
.calc-som { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(38px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--color-accent); font-feature-settings: "tnum" 1; margin-top: 6px; }
.calc-split { font-size: 14.5px; line-height: var(--leading); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent); }
@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; }
  .calc-uit { border-left: 0; border-top: 2px solid var(--color-divider);
    padding-left: 0; padding-top: var(--half); }
}



/* ═══════════════════════════════════════════════════════════════════════
   KRISS-HUISSTIJL — donker, 2026-08
   De vormgeving van het e-ticket, doorgetrokken naar de website:
   donkere grond met accent-gloed, glaskaarten met ruime radius, hairlines
   in plaats van zwarte regels, pillen voor knoppen en navigatie, en de
   perforatierand als merkteken. Zie krisstickets-app/HUISSTIJL-PUBLIEK.md.
   Alleen opmaak — behalve het lichte woordmerk verandert er niets in de
   HTML van de pagina's.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* — palet uit HUISSTIJL-PUBLIEK.md — */
  --accent: #2b4be8;
  --accent-diep: #1d38c4;
  /* kleine tekst in het accent haalt op zwart geen 4.5:1; daarvoor één
     lichtere trap van dezelfde kleur (kickers, links, nummers) */
  --accent-licht: #93a6ff;
  --bg: #0e0e11;
  --bg-diep: #0a0a0c;
  --paneel: #17171c;
  --paneel-2: #131318;
  --ink: #f4f4f6;
  --ink-zacht: #c6c6cf;
  --ink-stil: #a0a0aa;
  --rand: rgba(255, 255, 255, .10);
  --rand-sterk: rgba(255, 255, 255, .22);

  --rond: 16px;
  --rond-groot: 22px;
  --schaduw-kaart: 0 10px 30px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .03) inset;
  --schaduw-diep: 0 24px 60px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04) inset;

  /* — de tokens van het ontwerpsysteem op het donkere palet — */
  --color-bg: var(--bg);
  --color-surface: var(--paneel);
  --color-text: var(--ink);
  --color-divider: var(--rand);
  --color-accent: var(--accent);
  --color-accent-2: var(--accent);
  --color-accent-600: var(--accent-diep);
  --color-accent-700: var(--accent-licht);   /* de kicker leest hierop */
  --color-accent-800: var(--accent-licht);
  --shadow-sm: var(--schaduw-kaart);
  --shadow-md: var(--schaduw-kaart);
  --shadow-lg: var(--schaduw-diep);
}

/* — de grond: accent-gloed boven-midden over een donker verloop — */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-diep) 100%);
  background-attachment: fixed;
  background-color: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: #fff; }
:focus-visible { outline-color: var(--accent-licht); }
a { color: var(--accent-licht); }

/* — typografie iets strakker: koppen dichter op elkaar — */
.display, .close h3, .chap-line, .split-title { letter-spacing: -.03em; }
.kicker {
  font-size: 11.5px; letter-spacing: .14em; font-weight: 800;
  color: var(--accent-licht);
}

/* — kopbalk: donkere glaspil die meeloopt bij het scrollen — */
.nav {
  position: sticky; top: 10px; z-index: 60;
  /* zelfde kolom als de rest van de pagina: .wrap is 1200px breed inclusief
     zijn gootjes, dus de pil is twee gootjes smaller */
  max-width: calc(1200px - 2 * var(--edge)); margin: 14px auto;
  width: calc(100% - 2 * var(--edge));
  padding: 9px 10px 9px 18px !important;
  /* volledig dekkend: er mag niets doorheen schuiven */
  background: var(--paneel);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
  border-radius: 999px; box-shadow: var(--schaduw-kaart);
  gap: 8px 10px; flex-wrap: wrap;
}
.nav a:not(.nav-brand):not(.btn) {
  font-size: 14px; font-weight: 600; color: var(--ink-stil);
  padding: 8px 13px; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.nav a:not(.nav-brand):not(.btn):hover {
  background: rgba(255, 255, 255, .06); color: var(--ink);
}
.nav a[aria-current='page']:not(.btn), .nav a[aria-current='location']:not(.btn) {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent) inset;
}
.nav-brand img { height: 20px; }
.nav .btn { margin-left: auto; }
.hero { padding-top: calc(2 * var(--leading)); }

/* — knoppen: pillen, accent gevuld of hairline — */
.btn {
  border-radius: 999px; padding: 12px 20px; font-size: 14.5px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-primary, .btn.btn-white {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn-primary:hover, .btn.btn-white:hover {
  background: var(--accent-diep); border-color: var(--accent-diep); color: #fff;
}
.btn-primary:active, .btn.btn-white:active { background: #16299a; border-color: #16299a; color: #fff; }
.btn-ghost {
  color: var(--ink-zacht); background: transparent;
  border: 1px solid var(--rand); padding-inline: 20px;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .05); color: var(--ink); border-color: var(--rand-sterk); }

/* — naden: hairlines in plaats van zwarte regels — */
.rule2 { height: 1px; background: var(--rand); }
.feature + .feature, .bullets, .sitefoot, .legal, .chapter, .calc, .facts li,
.lp-nav, .lp-legal, .pager { border-color: var(--rand); }
.feature + .feature, .chapter { border-top-width: 1px; }
.bullets { border-top: 0; padding-top: 0; }
.sitefoot, .legal, .calc { border-top-width: 1px; }
.f-num::before { background: var(--accent); border-radius: 2px; }
.f-num, .chap-num { color: var(--accent-licht); }
.f-copy, .split-copy .note, .showcase-head .note, .chap-aside p, .sub, .hero .sub,
.stat-label, .doc-body p, .doc-body li, .bullets > li p, .facts p { color: var(--ink-zacht); }

/* — schermvitrines: het lichte dashboard als scherm in een donkere lijst — */
.shot, .shot:has(> .demo) {
  background: linear-gradient(180deg, var(--paneel) 0%, var(--paneel-2) 100%);
  border: 1px solid var(--rand); border-radius: var(--rond-groot);
  padding: 8px; box-shadow: var(--schaduw-diep);
  max-width: 680px; margin-inline: auto;
}
.stage .shot { max-width: 760px; }
.shot > .demo, .shot image-slot { border-radius: 14px; overflow: hidden; }
.shot figcaption {
  font-size: 13px; line-height: 20px; letter-spacing: 0; text-transform: none;
  color: var(--ink-stil); padding: 10px 8px 2px;
}
.split-figure image-slot {
  max-width: 480px; margin-inline: auto;
  border-radius: var(--rond-groot); overflow: hidden;
  border: 1px solid var(--rand); filter: grayscale(1) contrast(1.05) brightness(.86);
}

/* — opsommingen als glaskaarten — */
.bullets > li {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .02) 100%);
  border: 1px solid var(--rand); border-radius: var(--rond);
  padding: 18px; box-shadow: var(--schaduw-kaart);
}
.rot-row .bullets > li { padding: 16px 18px; }
.bullets a { color: var(--accent-licht); border-bottom-color: color-mix(in srgb, var(--accent-licht) 45%, transparent); }

/* — chips en feiten — */
.chips li {
  border: 1px solid var(--rand); border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  padding: 8px 14px; font-size: 13px; letter-spacing: 0; text-transform: none;
  font-weight: 600; color: var(--ink-zacht);
}
.facts li {
  border-top: 0; background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rand); border-radius: var(--rond); padding: 16px 18px;
}
.facts .f-lbl { color: var(--ink-stil); }
.facts .f-val { color: var(--ink); }
.f-tag {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px; padding: 3px 10px; color: var(--ink);
}

/* — het slot: accentvlak met de perforatierand van het ticket — */
.close { background: transparent; color: var(--ink); padding: 0 var(--edge); }
.close .wrap {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(255, 255, 255, .18) 0%, transparent 60%),
    linear-gradient(180deg, var(--accent) 0%, var(--accent-diep) 100%);
  color: #fff; border-radius: var(--rond-groot);
  padding: clamp(30px, 4vw, 56px) clamp(22px, 3.5vw, 48px);
  /* .wrap is 1200px BREED inclusief zijn eigen gootjes; deze kaart heeft die
     gootjes al van .close gekregen, dus moet hij twee gootjes smaller zijn —
     anders steekt het blauwe vlak links en rechts buiten de tekstkolom */
  max-width: calc(1200px - 2 * var(--edge)); margin: 0 auto;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* het afscheurstrookje: stippellijn met twee uitgeknipte cirkels */
.close .wrap::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 22px;
  border-top: 2px dashed rgba(255, 255, 255, .35);
}
.close .wrap::after {
  content: ""; position: absolute; left: -13px; right: -13px; top: 9px; height: 26px;
  background:
    radial-gradient(13px 13px at 13px 13px, var(--bg) 98%, transparent 100%) left center / 26px 26px no-repeat,
    radial-gradient(13px 13px at 13px 13px, var(--bg) 98%, transparent 100%) right center / 26px 26px no-repeat;
}
.close h3 { padding-top: calc(.5 * var(--leading)); }
.close .btn-ghost { background: #fff; color: var(--accent-diep); border-color: #fff; }
.close .btn-ghost:hover { background: var(--ink); color: var(--accent-diep); border-color: var(--ink); }

/* — vorige / volgende — */
.pager { border-bottom: 0; gap: 12px; padding: var(--leading) 0; }
.pager .pg:not(.pg-leeg) {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--rand);
  border-radius: var(--rond); padding: 16px 20px;
  transition: border-color .18s ease, background .18s ease;
}
.pager .pg:not(.pg-leeg):hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.pager .pg-l { color: var(--ink-stil); }
.pager .pg-t { color: var(--ink); }

/* — voettekst — */
.sitefoot p, .legal, .lp-legal { color: var(--ink-stil); }
.sitefoot h4 { color: var(--ink-stil); }
.sitefoot a { color: var(--ink-zacht); font-weight: 500; }
.sitefoot a:hover { color: var(--accent-licht); border-bottom-color: transparent; }
.legal a, .legal .linkbtn, .lp-legal a, .lp-legal .linkbtn { color: var(--ink-stil); }
.legal a:hover, .legal .linkbtn:hover,
.lp-legal a:hover, .lp-legal .linkbtn:hover { color: var(--ink); border-bottom-color: transparent; }

/* — formulier: donkere velden, ruime radius — */
.field > label { color: var(--ink-stil); }
.input {
  background: #2a2a2c; border: 1px solid var(--rand); border-radius: 12px;
  min-height: 46px; padding: 11px 14px; font-size: 15px; color: var(--ink);
}
.input::placeholder { color: #7c7c86; }
.input:hover { border-color: var(--rand-sterk); }
.input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.formstatus {
  border-left: 0; border-radius: 14px; padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--ink);
}
.formstatus.is-fout {
  background: rgba(224, 76, 60, .16); border-color: rgba(224, 76, 60, .45); color: #ffb4a8;
}

/* — juridische pagina's — */
.doc-body ul li::before { border-radius: 50%; width: 6px; height: 6px; top: .66em; background: var(--accent); }
.doc-body a { color: var(--accent-licht); }
.doc-body table th, .doc-body table td { border-bottom-color: var(--rand); }
.doc-body table th { border-bottom-width: 1px; color: var(--ink-stil); }
.invul {
  border-radius: 6px; border-bottom: 0; padding: 0 6px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink);
}

/* — landingspagina — */
.lp-stage figcaption, .lp-cap {
  letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--ink-stil);
}
.lp-nav { border-top: 0; }
.lp-nav ul { display: grid; gap: 12px; padding-bottom: 4px; }
.lp-nav li + li { border-left: 0; }
.lp-nav a {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--rand);
  border-radius: var(--rond); padding: 16px 18px !important; color: var(--ink);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.lp-nav a:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-2px);
}
.lp-nav .n, .lp-nav a:hover .n { color: var(--accent-licht); }
.lp-nav .l span, .lp-nav a:hover .l span { color: var(--ink-stil); }
.lp-legal { border-top: 1px solid var(--rand); }
.lp-cap { color: var(--ink-stil); }
.lp-cap .dots button { border-radius: 999px; height: 5px; background: rgba(255, 255, 255, .18); }
.lp-cap .dots button[aria-current="true"] { background: var(--accent); }
.lp-aud { color: var(--ink-stil); }
/* het lichte dashboardfragment als scherm op de donkere grond */
.lp-slot .demo {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--rand); box-shadow: var(--schaduw-diep);
}

/* — roterende reeksen — */
.rot-slot .demo { border-radius: 14px; overflow: hidden; border: 1px solid var(--rand); box-shadow: var(--schaduw-kaart); }
.rot-cap { letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--ink-stil); }
.rot-cap .dots button { border-radius: 999px; height: 5px; background: rgba(255, 255, 255, .18); }
.rot-cap .dots button[aria-current="true"] { background: var(--accent); }

/* — kostenpagina — */
.calc-uit {
  border-left: 0; background: rgba(255, 255, 255, .04); border: 1px solid var(--rand);
  border-radius: var(--rond); padding: 20px 22px;
}
.calc-som { color: var(--ink); }
.calc-split { color: var(--ink-stil); }

/* — links in lopende tekst — */
.f-title a { border-bottom-color: var(--accent); }
.f-title a:hover { color: var(--accent-licht); }
.more { color: var(--ink); border-bottom-color: var(--accent); }
.more:hover { color: var(--accent-licht); }
.linkbtn:hover { color: var(--accent-licht); }


/* ═══════════════════════════════════════════════════════════════════════
   BEWEGING — 2026-08
   Koppen die inzetten, secties die opkomen, schermen die meekantelen en een
   gloed die de muis volgt. De JavaScript-kant staat in motion.js; die zet
   .beweegt op <html>. Zonder dat bestand — of met "verminder beweging" aan —
   is hieronder niets van kracht en staat de pagina er gewoon.
   ═══════════════════════════════════════════════════════════════════════ */

/* — 1. opkomen — */
.beweegt .op-komst {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.beweegt .op-komst.er-is { opacity: 1; transform: none; will-change: auto; }
/* schermen komen scherp in beeld in plaats van omhoog — hun transform is voor
   het kantelen gereserveerd */
.beweegt .shot.op-komst, .beweegt .lp-slot.op-komst {
  transform: none; filter: blur(10px) saturate(.8);
  transition: opacity .8s ease, filter .8s ease;
}
.beweegt .shot.op-komst.er-is, .beweegt .lp-slot.op-komst.er-is { filter: none; }

/* — 2. koppen: regel voor regel omhoog, met een korte onscherpte — */
.beweegt .regel-in {
  animation: kriss-regel .85s cubic-bezier(.2, .75, .2, 1) both;
}
@keyframes kriss-regel {
  from { opacity: 0; transform: translateY(22px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* — 3. de kopbalk verdicht zodra je scrollt — */
.nav { transition: padding .25s ease, background .25s ease, box-shadow .25s ease; }
.nav.is-vast {
  padding-top: 6px !important; padding-bottom: 6px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}

/* — 4. gloed die de muis volgt — */
.muisgloed {
  position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 620px; height: 620px; margin: -310px 0 0 -310px; opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%);
}

/* — 5. schermen kantelen mee met de muis — */
.kantelt {
  transform: perspective(1400px) rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  transform-style: preserve-3d;
}
/* het scherm op de landingspagina staat in een zacht ademende accentgloed —
   een los vlak erachter dat alleen z'n dekking animeert, zodat het de
   compositor niets kost */
.lp-slot::before {
  content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 70%);
  animation: kriss-adem 8s ease-in-out infinite;
}
@keyframes kriss-adem { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

/* — 6. knoppen en kaarten reageren — */
.btn-primary, .btn.btn-white { transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.btn-primary:hover, .btn.btn-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 52%, transparent);
}
.btn-primary:active, .btn.btn-white:active { transform: translateY(0); }
.bullets > li, .facts li, .chips li {
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.bullets > li:hover, .facts li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.shot { transition: box-shadow .35s ease; }
.shot:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }

/* — 7. het slot: drijvend licht en een perforatie die meeloopt — */
.close .wrap {
  background-size: 200% 140%, 100% 100%;
  animation: kriss-veeg 11s ease-in-out infinite alternate;
}
@keyframes kriss-veeg {
  from { background-position: 0% 0%, 0 0; }
  to   { background-position: 100% 0%, 0 0; }
}
.close .wrap::before {
  border-top: 0; height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .5) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  animation: kriss-perf 3.4s linear infinite;
}
@keyframes kriss-perf { to { background-position: 16px 0; } }

/* — 8. de wisselaar telt af in het accent, zoals de balk op het e-ticket — */
.lp-cap .dots button, .rot-cap .dots button {
  width: 26px; background: rgba(255, 255, 255, .18);
  transition: background .2s ease;
}
.lp-cap .dots button[aria-current="true"], .rot-cap .dots button[aria-current="true"] {
  /* standaard helemaal gevuld — de animatie laat hem aftellen, maar staat die
     uit (of is hij nog niet begonnen), dan is de stip gewoon accent */
  background:
    linear-gradient(90deg, var(--accent) 0 100%) left center / 100% 100% no-repeat,
    rgba(255, 255, 255, .18);
  animation: kriss-tel 7s linear forwards;
}
.rot-cap .dots button[aria-current="true"] { animation-duration: 6s; }
@keyframes kriss-tel {
  from { background-size: 0% 100%, 100% 100%; }
  to   { background-size: 100% 100%, 100% 100%; }
}

/* — alles uit bij "verminder beweging" — */
@media (prefers-reduced-motion: reduce) {
  .op-komst, .regel-in, .lp-slot, .close .wrap, .close .wrap::before,
  .lp-cap .dots button, .rot-cap .dots button, .kantelt {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .muisgloed { display: none; }
}

/* — 9. glasrand: een fijne lichtlijn over de bovenkant van kader en balk — */
.shot { position: relative; }   /* .nav is al sticky — niet overschrijven */
.nav::after, .shot::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
}

/* — 10. de kopbalk dekt de pagina af —
   De pil is dekkend, maar links, rechts en erboven blijft een reepje pagina
   over. Deze vaste band vult dat reepje: wat eronder door scrollt wordt
   onscherp, dooft uit en is verdwenen vóór het de balk raakt. De band komt
   pas op zodra je scrollt (motion.js zet .is-gescrold), zodat de gloed
   bovenaan de pagina in rust ongemoeid blijft. Zonder JavaScript staat de
   band altijd aan — dan dekt hij tenminste af. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  height: var(--balkhoogte, 92px); pointer-events: none;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 70%, transparent 100%);
  transition: opacity .25s ease;
}
/* met JavaScript: alleen zichtbaar zodra er gescrold is */
.beweegt body::before { opacity: 0; }
.beweegt.is-gescrold body::before { opacity: 1; }
/* de landingspagina scrollt niet — daar hoeft de band nooit in rust te staan */
body.lp::before { opacity: 0; }
.beweegt.is-gescrold body.lp::before { opacity: 1; }

/* — 11. op de telefoon past de balk op één regel —
   Alleen het merk en de ene actie staan er dan nog (de links vallen onder de
   480px-regel weg); met iets kleiner merk en een compactere knop hoeft de pil
   niet meer af te breken. */
@media (max-width: 520px) {
  .nav { padding: 8px 6px 8px 13px !important; gap: 8px; flex-wrap: nowrap; }
  .nav-brand img { height: 16px; }
  .nav .btn { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
}

/* — 12. de landingspagina in dezelfde kolom —
   .lp-main stond op 1360px terwijl de balk, de tegels en de voetregel de
   1200px-kolom aanhouden; daardoor stak de hero links en rechts uit. */
.lp-main { max-width: 1200px; }

/* ═══════════════════════════════════════════════════════════════════════
   PLANNING + PORTAAL — 2026-08
   Het portaal heeft geen eigen pagina meer: het is een hoofdstuk op de
   planningspagina (#portaal), want het is dezelfde module. Er is hier verder
   niets aparts voor nodig — het hoofdstuk gebruikt .showcase en .rot-row, net
   als de rest.
   ═══════════════════════════════════════════════════════════════════════ */

/* een anker (#portaal, #bezetting) moet onder de zwevende kopbalk uitkomen,
   niet erachter */
section[id] { scroll-margin-top: calc(var(--balkhoogte, 92px) + 16px); }

/* ═══════════════════════════════════════════════════════════════════════
   LANDINGSPAGINA MET TEKST — 2026-08
   De hero blijft het eerste scherm, maar de pagina scrollt nu door naar de
   uitleg, de sectoren, de tarieven en de veelgestelde vragen. Zonder die
   tekst had de homepagina 99 woorden en viel er voor Google weinig te lezen.
   ═══════════════════════════════════════════════════════════════════════ */
body.lp { height: auto; overflow: visible; display: block; }
.lp-main {
  /* één beeldscherm min de kopbalk en de vier tegels eronder */
  min-height: clamp(420px, calc(100dvh - 230px), 820px);
}
.lp-nav { padding-bottom: calc(.5 * var(--leading)); }
.lp-nav + .wrap { padding-top: 0; }
/* de eerste sectie onder de vouw krijgt lucht van de scheidingslijn */
.lp-nav + .wrap > .showcase:first-child { padding-top: calc(2 * var(--leading)); }