/* DataGrip · Concept A1.3 · Laat data werken
   De huisstijl van A1: vlakke kleur, lijnwerk, een afronding. Teal heeft een taak: actie en wat leeft.
   Vier kaders op de hele pagina: de twee dashboards en de twee panelen bij de kosten.
   Drie papieren voorwerpen (het Excel-blad en de twee kassabonnen) dragen als enige Geist Mono.
   Een bewuste vlakwissel: de herkomst en de vragen vooraf staan op warm wit.
   Nieuw in A1.3: de tagline als kop, twee slogan-banden tussen teal lijnen, een compleet dashboard
   met vier vragen, "Wat er op maandag verandert" onder de route en een sectie over ons zonder mensen. */

:root {
  --bg: #001620;
  --bg-raised: #06202c;
  --line: #182b37;          /* stille haarlijnen */
  --line-mid: #2c4755;      /* lijnen die iets ordenen */
  --line-strong: #527281;   /* randen van velden en de tweede knop (3:1 op beide donkere vlakken) */
  --line-teal: #42b0aa;     /* omlijning van wat leeft */
  --teal: #4ECDC4;
  --teal-soft: #ace4df;
  --stil: #2a7678;          /* gedempte datakleur */
  --licht: #5fa8a8;         /* tweede reeks in een gestapelde staaf */
  --bright: #f0ede6;
  --text: #d4d0c8;
  --muted: #9a9690;
  --radius: 6px;
  --marge: clamp(20px, 4.4vw, 56px);
  --wrap: 1280px;
  --sec: clamp(36px, 7.8vw, 120px);
  --kop-h: 64px;
}
@media (min-width: 960px) { :root { --kop-h: 72px; } }
@media (min-width: 1700px) { :root { --wrap: 1360px; } }

/* R8:B14 · Eén set bewegingsmaten voor de hele site. Dezelfde waarden staan in :root van style.css.
   Kies hieruit, verzin er geen bij. */
:root {
  --ease-uit: cubic-bezier(.23, 1, .32, 1);     /* alles wat verschijnt of reageert */
  --ease-teken: cubic-bezier(.45, .05, .35, 1); /* een lijn die zich tekent (bestond al, krijgt een naam) */
  --ease-lade: cubic-bezier(.32, .72, 0, 1);    /* iets wat van de rand komt: de cookiemelding */
  --t-druk: 160ms; --t-kort: 180ms; --t-paneel: 220ms; --t-blok: 500ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Ronde 7 · Een anker, of een onderdeel dat de focus krijgt, landt vrij onder de vaste kop: var(--anker).
   Die ruimte staat als scroll-margin op de doelen zelf en niet als scroll-padding op de pagina. Met
   scroll-padding verspringt de pagina een half scherm zodra iets in de vaste kop de focus krijgt (het menu
   openen en sluiten op een telefoon, of met Tab de kop in): de browser denkt dan dat de kop buiten beeld
   staat. De kop zelf hoort daarom niet in deze regel. De regel weegt niets (:where), dus elke eigen
   scroll-margin-top in een p-bestand gaat voor. Zo'n eigen regel telt var(--anker) er dan zelf bij op,
   en iets wat in een vaste balk staat (een zoekveld, een rij onderwerpen) krijgt 0. */
:root { --anker: calc(var(--kop-h) + 24px); }
:where(main, main *, .afsluiter, .afsluiter *, .voet, .voet *) { scroll-margin-top: var(--anker); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 479px) { body { font-size: 1rem; line-height: 1.6; } }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
svg { display: block; }
strong { font-weight: 600; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--bright); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - 2 * var(--marge), var(--wrap)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nb { white-space: nowrap; }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  background: var(--bright); color: #001620; font-weight: 600; text-decoration: none;
  padding: 10px 16px; border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:not(:focus) { opacity: 0; }
.skip-link:focus { transform: none; }

.ico { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Koppen en links ===== */
.h2 {
  font-size: clamp(1.8rem, 1.1rem + 2.7vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
  color: var(--bright); text-wrap: balance;
}
.h2 .regel { display: block; }
.teal { color: var(--teal); }
.h2 .dof { color: var(--muted); }

.link { color: var(--bright); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* R8:B02 hover alleen bij een muis */
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--teal); } }

/* ===== Knoppen ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
.btn-primair { background: #4ECDC4; color: #001620; }
/* R8:B02 */
@media (hover: hover) and (pointer: fine) { .btn-primair:hover { background: #7ddad3; } }
.btn-lijn { border-color: var(--line-strong); color: var(--bright); background: transparent; }
/* R8:B02 */
@media (hover: hover) and (pointer: fine) { .btn-lijn:hover { border-color: var(--bright); } }

/* ===== Vaste kop ===== */
.kop { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.kop-rij { display: flex; align-items: center; gap: 10px; height: var(--kop-h); }
.logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.014em; color: var(--bright); text-decoration: none; white-space: nowrap; line-height: 1; }
.brace { color: var(--teal); font-weight: 700; }
.menu { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 44px); }
.menu ul { display: flex; gap: clamp(18px, 2.3vw, 36px); }
.menu a:not(.btn) { display: block; padding: 8px 0; color: var(--text); font-size: .95rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
/* R8:B02 */
@media (hover: hover) and (pointer: fine) { .menu a:not(.btn):hover { color: var(--bright); } }
.menu-cta { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.menu-knop, .kop-cta { display: none; }
@media (min-width: 960px) and (max-width: 1099px) {
  /* net boven het omslagpunt is de kop krap: de links schuiven dichter op elkaar, zodat het logo lucht houdt */
  .menu { gap: 18px; }
  .menu ul { gap: 14px; }
}

@media (max-width: 959px) {
  /* compacte oproep in de kop: op elk scherm van de mobiele pagina bereikbaar */
  .js .kop-cta { display: inline-flex; min-height: 44px; padding: 0 14px; font-size: .875rem; }
  .kop-cta .lang { display: none; }
  .js.menu-open .kop-cta { visibility: hidden; }

  .js .menu-knop {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 44px; min-height: 44px; padding: 0 4px 0 10px; margin-right: -4px;
    background: none; border: 0; color: var(--bright);
    font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  }
  .menu-knop-streep { position: relative; width: 24px; height: 24px; }
  .menu-knop-streep i { position: absolute; left: 1px; right: 1px; top: 11px; height: 2px; background: var(--bright); transition: transform .2s ease-out; }
  .menu-knop-streep i:first-child { transform: translateY(-4px); }
  .menu-knop-streep i:last-child { transform: translateY(4px); }
  .menu-open .menu-knop-streep i:first-child { transform: rotate(45deg); }
  .menu-open .menu-knop-streep i:last-child { transform: rotate(-45deg); }

  .js .menu {
    position: fixed; left: 0; right: 0; top: var(--kop-h); bottom: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 4px var(--marge) 32px; overflow-y: auto;
    background: var(--bg);
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s;
  }
  .js.menu-open .menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js.menu-open { overflow: hidden; }
  .js .menu ul { flex-direction: column; gap: 0; }
  .js .menu li { border-bottom: 1px solid var(--line); }
  .js .menu a:not(.btn) { padding: 19px 0; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--bright); }
  .js .menu-cta { margin-top: 28px; min-height: 56px; font-size: 1.05rem; }

  /* zonder script: het menu staat gewoon onder het logo */
  html:not(.js) .kop { position: static; }
  html:not(.js) .kop-rij { height: auto; flex-wrap: wrap; padding-block: 14px; }
  html:not(.js) .menu, html:not(.js) .menu ul { flex-wrap: wrap; gap: 6px 18px; }
}
@media (min-width: 520px) and (max-width: 959px) {
  /* vanaf hier past het volle label naast logo en menu */
  .kop-cta .kort { display: none; }
  .kop-cta .lang { display: inline; }
}
@media (max-width: 399px) {
  .js .menu-knop-tekst { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .js .menu-knop { padding: 0 10px; margin-right: -10px; }
}
@media (max-width: 339px) {
  .logo { font-size: 1.3rem; }
  .js .kop-cta { padding: 0 11px; }
}

/* ===== Hero ===== */
.hero { padding-block: clamp(26px, 4.6vw, 68px) clamp(36px, 5.6vw, 84px); }
.hero h1 {
  font-size: calc((100vw - 2 * var(--marge)) / 9.3);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; color: var(--bright);
}
.hero h1 .regel { display: block; }
/* "jou." in Playfair cursief en teal, zoals op de visitekaartjes. De regelhoogte van het woord telt niet mee,
   zodat de twee regels even ver uit elkaar blijven; de staart van de j valt in de marge onder de kop. */
.hero h1 em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.1em; letter-spacing: -0.012em; line-height: 0; color: var(--teal); }
@media (min-width: 600px) {
  .hero h1 { font-size: min(calc((100vw - 2 * var(--marge)) / 9.3), 6.6rem); }
}
.hero-rij { margin-top: clamp(16px, 3.4vw, 52px); display: grid; gap: clamp(22px, 4vw, 40px); }
.lede { font-size: clamp(1.0625rem, .86rem + .85vw, 1.45rem); line-height: 1.5; max-width: 30em; letter-spacing: -0.005em; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.4vw, 32px); }
@media (max-width: 519px) { .knoppen .btn { flex: 1 1 100%; } }
@media (min-width: 1120px) {
  .hero-rij { grid-template-columns: minmax(440px, .66fr) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 72px); align-items: start; }
}

/* De stroom: bronnen, lijnen, overzicht. Mobiel van boven naar beneden.
   De streepjes lopen twee keer zodra de stroom in beeld komt en liggen dan stil. */
.stroom { min-width: 0; }
.hero-duiding { margin-top: 12px; font-size: .9375rem; line-height: 1.45; color: var(--text); text-wrap: pretty; }
.hero-duiding strong { color: var(--bright); }
.bronnen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bronnen li { display: flex; flex-direction: column; align-items: center; }
.bron { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }
.bron-naam { font-size: clamp(10px, 3.07vw, 11.5px); font-weight: 500; line-height: 1.2; color: var(--bright); white-space: nowrap; }
.bron-ico { display: grid; place-items: center; width: 44px; height: 40px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); color: var(--bright); font-size: 24px; background: var(--bg); }
.draad { position: relative; display: block; width: 0; height: 18px; border-left: 1.5px solid var(--line-teal); clip-path: inset(0 -4px); }
.draad i { position: absolute; left: -2.25px; top: 0; width: 3px; height: 100%; transform: translateY(-100%); }
.draad i::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 9px; background: var(--teal); }
.verzamel { position: relative; height: 20px; }
.verzamel::before { content: ''; position: absolute; left: 10%; right: 10%; top: 0; border-top: 1.5px solid var(--line-teal); }
.draad--stam { position: absolute; left: 50%; top: 0; height: 20px; margin-left: -.75px; }
.stroom.is-actief .draad i { animation: loop-y 2s linear 2 both; }
.stroom.is-actief .bronnen li:nth-child(2) .draad i { animation-delay: .3s; }
.stroom.is-actief .bronnen li:nth-child(3) .draad i { animation-delay: .1s; }
.stroom.is-actief .bronnen li:nth-child(4) .draad i { animation-delay: .5s; }
.stroom.is-actief .bronnen li:nth-child(5) .draad i { animation-delay: .2s; }
.stroom.is-actief .draad--stam i { animation-delay: .8s; }
@keyframes loop-y { 0% { transform: translateY(-100%); } 50%, 100% { transform: translateY(10px); } }
@keyframes loop-x { 0% { transform: translateX(-100%); } 50%, 100% { transform: translateX(14px); } }

@media (min-width: 700px) {
  .stroom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
  .hero-duiding { grid-column: 2; }
  .stroom-in { display: grid; grid-template-columns: auto clamp(22px, 2.6vw, 40px); margin-block: 14px; }
  .bronnen { grid-template-columns: none; grid-auto-rows: 1fr; }
  .bronnen li { flex-direction: row; }
  .bron { flex-direction: row; gap: 10px; width: 156px; height: 40px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); }
  .bron-ico { width: auto; height: auto; border: 0; font-size: 22px; background: none; }
  .bron-naam { font-size: 14px; font-weight: 600; }
  .draad { flex: none; width: clamp(18px, 2.2vw, 34px); height: 0; border-left: 0; border-top: 1.5px solid var(--line-teal); clip-path: inset(-4px 0); }
  .draad i { left: 0; top: -2.25px; width: 100%; height: 3px; transform: translateX(-100%); }
  .stroom.is-actief .draad i { animation-name: loop-x; }
  .draad i::after { left: auto; right: 0; bottom: 0; width: 12px; height: 100%; }
  .verzamel { height: auto; }
  .verzamel::before { left: 0; right: auto; top: 10%; bottom: 10%; border-top: 0; border-left: 1.5px solid var(--line-teal); }
  .draad--stam { left: 0; right: 0; top: 50%; width: auto; height: 0; margin: 0; }
}

/* ===== Dashboard (het enige gevulde vlak met een rand) ===== */
.db {
  min-width: 0; overflow: hidden;
  background: var(--bg-raised); border: 1.5px solid var(--line-teal); border-radius: var(--radius);
  container-type: inline-size;
  font-size: 13px; line-height: 1.35; color: var(--text);
}
.db-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.live { color: var(--teal); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.merkje { font-size: 11.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-mid); border-radius: var(--radius); padding: 3px 8px; white-space: nowrap; }
.db-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }

.db--hero { display: flex; flex-direction: column; }
.db-hoofd { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px 20px 18px; }
.uitkomst-getal { display: block; margin-top: 6px; font-size: clamp(2.1rem, 9.4cqi, 3.3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--bright); white-space: nowrap; font-variant-numeric: tabular-nums; }
.uitkomst-zin { display: block; margin-top: 12px; font-size: 13.5px; white-space: nowrap; }
.op { color: var(--teal); font-weight: 700; }
.lijn { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.lijn-vlak { position: relative; flex: 1; min-height: 148px; }
.lijn-vlak svg { width: 100%; height: 100%; overflow: visible; }
.rooster { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vorig { fill: none; stroke: #5f7480; stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.nu { fill: none; stroke: var(--teal); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lijn-punt { position: absolute; right: -4.5px; top: 24.6%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--bg-raised); }
.lijn-as { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.lijn-leg i { display: inline-block; width: 14px; height: 0; margin: 0 5px 0 12px; vertical-align: middle; border-top: 2px solid var(--teal); }
.lijn-leg .l-vorig { border-top: 1.5px dashed #5f7480; }

@container (max-width: 470px) {
  .db-hoofd { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 16px 14px; }
  .lijn-vlak { flex: none; min-height: 0; height: 80px; }
  .db-balk { padding-inline: 16px; }
}
@container (max-width: 300px) {
  .db-balk { padding-inline: 12px; gap: 8px; }
  .live { font-size: 12px; }
  .merkje { font-size: 11px; padding-inline: 6px; }
}

/* ===== Systemenregel: sluit de route af, daar waar het koppelen wordt uitgelegd ===== */
.systemen { margin-top: clamp(30px, 4.6vw, 64px); padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid var(--line-mid); display: grid; gap: 4px 48px; }
.systemen-regel strong { color: var(--bright); }
.systemen-noot { color: var(--muted); }
@media (min-width: 1040px) {
  .systemen { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: baseline; }
}

/* ===== Secties ===== */
.sec { padding-block: var(--sec); }
.sec--vlak { background: var(--bg-raised); border-block: 1px solid var(--line); }

/* ===== De slogan-band: een zin tussen twee teal lijnen over de volle breedte, verder niets =====
   Hetzelfde motief als het ene cijfer in de route. Groter dan een sectiekop, kleiner dan de hero. */
.band { padding-block: clamp(28px, 5.6vw, 84px); border-block: 1.5px solid var(--line-teal); }
.sec--vlak + .band { margin-top: -1px; }
.band-zin { font-size: calc((100vw - 2 * var(--marge)) / 12.3); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--bright); }
.band-zin .regel { display: block; text-wrap: balance; }
@media (min-width: 700px) {
  .band-zin { font-size: min(calc((100vw - 2 * var(--marge)) / 14.6), 4.5rem); }
}

/* ===== De route: de reis van een cijfer =====
   Een dunne warm witte kronkel op het verhoogde vlak, de haltes als omlijnde cirkels.
   Hij eindigt in het Excel-blad: dof grijs papier, het eerste van de drie papieren voorwerpen.
   Daaronder de reis met DataGrip: een rechte teal lijn naar een helder cijfer.
   Tot 1240 pixels een staande tijdlijn, daarboven ligt de route over de volle breedte. */
.reis { overflow-x: clip; }
.reis-kop { display: grid; gap: 16px; }
.reis-kop p { max-width: 31em; }

.route { margin-top: clamp(28px, 4.6vw, 64px); }
.route-label { display: inline-block; padding-bottom: 8px; border-bottom: 1.5px solid var(--line-strong); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.route--dg .route-label { border-bottom-color: var(--teal); color: var(--teal); }

/* staand: de haltes onder elkaar, de lijn slingert van cirkel naar cirkel */
.route-band { margin-top: 20px; }
.veeg { display: none; }
.halte { position: relative; padding: 0 0 14px 52px; }
.halte::before { content: ''; position: absolute; left: 1px; top: 4px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-raised); border: 1.5px solid var(--bright); }
.halte:nth-child(even)::before { left: 25px; }
.halte::after {
  content: ''; position: absolute; left: 7px; top: 11px; width: 26px; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3.85 0 C3.85 60 96.15 40 96.15 100' fill='none' stroke='%23d4d0c8' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.halte:nth-child(even)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M96.15 0 C96.15 60 3.85 40 3.85 100' fill='none' stroke='%23d4d0c8' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.halte:last-child::after { left: 7.25px; width: 0; height: calc(100% - 11px); background: none; border-left: 1.5px solid var(--text); }
.halte-tekst { max-width: 27rem; }
.halte-tekst strong { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.halte-tekst span { display: block; margin-top: 1px; font-size: .9375rem; line-height: 1.42; color: var(--text); }

.route-eind { min-width: 0; max-width: 27rem; }
.route-bijschrift { margin-top: 12px; font-size: .9375rem; line-height: 1.45; }
.route-bijschrift strong { display: block; margin-bottom: 2px; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.022em; line-height: 1.25; color: var(--bright); }

/* het Excel-blad: dof grijs papier, tekst in Geist Mono */
.blad { background: #c3c8c5; color: #35414a; font: 400 11.5px/1.25 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.01em; }
.blad-balk { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: #abb1ae; color: #27323a; white-space: nowrap; }
.blad-balk span:first-child { overflow: hidden; text-overflow: ellipsis; }
.blad-rooster { display: grid; grid-template-columns: 24px minmax(0, 1.08fr) minmax(0, .8fr) minmax(0, 1.12fr); }
.blad-rooster span { padding: 6px 8px; border-right: 1px solid #a4aaa7; border-bottom: 1px solid #a4aaa7; white-space: nowrap; overflow: hidden; }
.blad-rooster .hk { padding-inline: 0; background: #b5bab7; color: #313c43; text-align: center; }
.blad-rooster .g { text-align: right; }
.blad-rooster .vet { font-weight: 600; color: #222d35; }
.blad-rooster .breed { grid-column: 2 / -1; }
.blad-rooster .is-fout { background: #b5bab7; color: #222d35; }
.blad-voet { display: flex; align-items: center; gap: 2px; padding: 5px 10px 5px 24px; background: #abb1ae; }
.blad-tab { padding: 3px 9px; color: #2c373e; }
.blad-tab--aan { background: #c3c8c5; color: #222d35; }
.blad-merk { margin-left: auto; color: #2c373e; }

/* de reis met DataGrip: staand een rechte teal lijn langs twee punten, uitkomend bij het cijfer */
.recht { position: relative; display: grid; gap: 14px; margin-top: 22px; padding: 0 0 34px 52px; }
.recht-punt { position: relative; }
.recht-punt::before { content: ''; position: absolute; left: -51px; top: 4px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-raised); border: 1.5px solid var(--teal); }
.recht-punt--dg::before { background: var(--teal); }
.recht-punt > strong { display: block; white-space: nowrap; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.recht-punt > span { display: block; margin-top: 1px; max-width: 24rem; font-size: .9375rem; line-height: 1.42; }
.recht-punt .merknaam { font-size: 1.2rem; line-height: 1.2; }
.recht-lijn { position: absolute; left: 6.5px; top: 11px; bottom: 13px; width: 3px; }
.recht-lijn i { position: absolute; inset: 0; background: var(--teal); transform-origin: 50% 0; }
.recht-lijn::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -8px; border-style: solid; border-width: 11px 8px 0; border-color: var(--teal) transparent transparent; }

/* het cijfer staat vrij op het vlak, tussen twee teal lijnen: geen kader */
.cijfer { display: flex; flex-direction: column; padding-block: 12px 18px; border-block: 1.5px solid var(--line-teal); }
.cijfer-balk { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cijfer-label { margin-top: 14px; font-size: .9375rem; color: var(--muted); }
.cijfer-getal { margin-top: 2px; font-size: clamp(3rem, 14vw, 3.5rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--bright); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cijfer-zin { margin-top: 10px; line-height: 1.4; }
.cijfer-zin .nb { display: inline-block; }

@media (min-width: 700px) {
  /* haltes links, het oude rapport en het nieuwe cijfer rechts */
  .route-rij { --gat: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: var(--gat); align-items: end; }
  .route-eind { max-width: none; }
  .route--nu .route-eind { display: flex; flex-direction: column-reverse; }
  .route--nu .route-bijschrift { margin: 0 0 14px; }
  .halte:last-child { padding-bottom: 46px; }
  .halte:last-child::after {          /* de lijn buigt af en loopt het rapport in */
    width: calc(100% - 7.25px + var(--gat)); height: calc(100% - 28px);
    border-bottom: 1.5px solid var(--text); border-radius: 0 0 0 20px;
  }

  .route--dg .route-rij { align-items: center; }
  .recht { margin: 0; padding: 0; gap: 0; grid-template-columns: minmax(7.5rem, .62fr) minmax(0, 1fr); grid-template-rows: 1fr auto 1fr; }
  .recht-punt--bron { grid-column: 1; grid-row: 1; align-self: end; padding: 0 28px 18px 0; }
  .recht-punt--dg { grid-column: 2; grid-row: 3; align-self: start; padding: 18px 28px 0 0; }
  .recht-punt::before { left: 0; }
  .recht-punt--bron::before { top: auto; bottom: -8.5px; }
  .recht-punt--dg::before { top: -8.5px; }
  .recht-lijn { position: relative; left: auto; top: auto; bottom: auto; grid-column: 1 / -1; grid-row: 2; width: auto; height: 3px; margin-right: calc(26px - var(--gat)); }
  .recht-lijn i { transform-origin: 0 50%; }
  .recht-lijn::after { left: auto; right: -10px; bottom: auto; top: 50%; margin: -8px 0 0; border-width: 8px 0 8px 11px; border-color: transparent transparent transparent var(--teal); }
}

@media (min-width: 1240px) {
  /* de route ligt: een kronkel over de volle breedte die het rapport in loopt */
  .route-rij { --gat: 0px; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; }
  .route--nu .route-eind { display: block; position: relative; }
  .route--nu .route-bijschrift { position: absolute; left: 0; right: 0; top: 100%; margin: 12px 0 0; }
  .route-band { position: relative; height: 15rem; margin: 5.25rem 0 6.25rem; }
  .veeg { display: block; position: absolute; inset: 0; overflow: hidden; }
  .veeg-in { position: absolute; inset: 0; }
  .route-svg { width: 100%; height: 100%; overflow: visible; }
  .route-svg path { fill: none; stroke: var(--text); stroke-width: 1.5; }
  .haltes { position: absolute; inset: 0; }
  .halte, .halte:last-child { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; padding: 0; }
  .halte::before, .halte:nth-child(even)::before { left: -7px; top: -7px; }
  .halte::after, .halte:last-child::after { content: none; }
  .halte-tekst { position: absolute; left: -7px; width: 10.25rem; }
  .halte--boven .halte-tekst { bottom: 18px; }
  .halte--onder .halte-tekst { top: 18px; }
  .recht-lijn { margin-right: 30px; }
  .route--dg .route-rij { margin-top: 8px; }
}
@media (min-width: 1400px) {
  .route-rij { grid-template-columns: minmax(0, 1fr) 340px; }
  .halte-tekst { width: 11.75rem; }
}

/* de route tekent zich: alleen als het script draait en alleen met beweging aan */
@media (prefers-reduced-motion: no-preference) {
  .route .veeg, .route .veeg-in { transition: transform 1.7s cubic-bezier(.45, .05, .35, 1); }
  .route .halte, .route .route-eind { transition: opacity .5s ease-out; transition-delay: calc(var(--i, 0) * .27s + .15s); }
  .route .recht-punt { transition: opacity .45s ease-out .1s; }
  .route .recht-punt--dg { transition-delay: .5s; }
  .route .recht-lijn i { transition: transform .9s cubic-bezier(.3, .7, .2, 1) .15s; }
  .route .recht-lijn::after { transition: opacity .2s ease-out 1s; }
  .route--dg .route-eind { transition-delay: 1.05s; }
  .js .route:not(.is-in-beeld) .veeg { transform: translateX(-101%); }
  .js .route:not(.is-in-beeld) .veeg-in { transform: translateX(101%); }
  .js .route:not(.is-in-beeld) .halte,
  .js .route:not(.is-in-beeld) .route-eind,
  .js .route:not(.is-in-beeld) .recht-punt,
  .js .route:not(.is-in-beeld) .recht-lijn::after { opacity: 0; }
  .js .route:not(.is-in-beeld) .recht-lijn i { transform: scaleY(0); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
  .js .route:not(.is-in-beeld) .recht-lijn i { transform: scaleX(0); }
}


/* ===== Wat er op maandag verandert =====
   Drie momenten uit een gewone week, elk met een regel nu en een regel met DataGrip.
   Geen kaarten: een tabel van haarlijnen onder de tweede route. Op smal staan de labels voor de regel. */
.week { margin-top: clamp(28px, 5vw, 76px); }
.week-kop { display: none; }
.week-rijen { margin-top: 12px; border-top: 1px solid var(--line-mid); }
.week-rijen li { display: grid; row-gap: 2px; padding: 9px 0 10px; border-bottom: 1px solid var(--line-mid); }
.week-moment, .week-nu, .week-dg { font-size: .9375rem; line-height: 1.42; }
.week-dag, .week-label { margin-right: 8px; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.week-moment strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.week-dg { color: var(--bright); }
.week-dg .week-label { color: var(--teal); }
.week-rijen li:last-child { border-bottom: 0; }
@media (min-width: 860px) {
  .week-kop, .week-rijen li { display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 3.6fr) minmax(0, 4.8fr); column-gap: clamp(24px, 3.4vw, 56px); align-items: baseline; }
  .week-kop { margin-top: 20px; padding-bottom: 9px; font-size: .8125rem; font-weight: 600; color: var(--muted); }
  .week-kop span:last-child { color: var(--teal); }
  .week-rijen { margin-top: 0; }
  .week-rijen li { row-gap: 0; padding: 15px 0 16px; }
  .week-moment { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
  .week-dag { margin-right: 0; }
  .week-nu, .week-dg { font-size: 1rem; line-height: 1.5; }
  .week-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}


/* ===== Wat je krijgt: een dashboard, vier vragen (beeld S3) =====
   Een compleet overzichtsdashboard in het kader van .db: een titelbalk, vier kerncijfers en vier tegels.
   Links de vier vragen als knoppen. Kies je er een, dan verschijnt het antwoord in gewone taal,
   krijgt de tegel die het bewijst een teal rand en dempt de rest. Zonder script staat alles open en helder.
   Tot 1200 pixels staan vragen en dashboard onder elkaar; op de telefoon schuift de gekozen tegel bovenaan. */
.krijgt-rij { margin-top: clamp(18px, 3.4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.krijgt-links { min-width: 0; }
.vragen-links { container-type: inline-size; }
.vragen-links .h2 { font-size: min(clamp(1.8rem, 1.1rem + 2.7vw, 3.2rem), 11cqi); }
.krijgt-intro { max-width: 30em; }

/* de vier vragen: op smal een rooster van twee bij twee, het antwoord eronder */
.kiezer { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.kies { min-width: 0; font: inherit; }
.kies button {
  position: relative; display: block; width: 100%; min-height: 52px; padding: 10px 14px;
  background: none; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
}
.kies-naam { display: block; font-size: .975rem; font-weight: 600; line-height: 1.25; color: var(--bright); }
.kies-zin { display: none; margin-top: 2px; font-size: .9375rem; font-weight: 400; line-height: 1.4; color: var(--muted); }
.kies button[aria-expanded="true"] { border-color: var(--teal); box-shadow: inset 4px 0 0 var(--teal); }
.besluit { grid-column: 1 / -1; grid-row: 3; padding-top: 10px; }
.js .besluit { animation: paneel-in .25s ease-out; }
@keyframes paneel-in { from { opacity: 0; } to { opacity: 1; } }
.besluit--alles { display: none; }   /* de beschrijving van het hele dashboard staat alleen in het vaste vak op breed */
.besluit-label { font-size: .875rem; font-weight: 600; color: var(--muted); }
.bl-vast { display: none; }
.antwoord { margin-top: 4px; max-width: 24em; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.6rem); font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; color: var(--bright); text-wrap: balance; }
.alles { grid-column: 1 / -1; grid-row: 4; justify-self: start; padding: 8px 0; background: none; border: 0; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }

/* zonder script: vraag, antwoord, vraag, antwoord, allemaal open */
html:not(.js) .kiezer { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-mid); }
html:not(.js) .kies button { padding: 14px 0 0; border: 0; border-radius: 0; box-shadow: none; cursor: default; }
html:not(.js) .kies-zin { display: block; }
html:not(.js) .besluit { grid-row: auto; padding: 4px 0 14px; border-bottom: 1px solid var(--line-mid); }
html:not(.js) .besluit-label, html:not(.js) .besluit--alles { display: none; }

.krijgt-actie { padding-top: clamp(18px, 2.4vw, 22px); border-top: 1px solid var(--line-mid); }
.krijgt-actie p { max-width: 32em; font-size: .9375rem; color: var(--muted); }
.krijgt-actie strong { display: block; margin-bottom: 4px; font-size: 1.2rem; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.actie-rij { margin-top: clamp(14px, 2vw, 18px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.actie-rij .link { padding-block: 10px; font-weight: 600; }

@media (min-width: 760px) and (max-width: 1199px) {
  /* tablet en kleine laptop: de vier vragen op een rij, het antwoord eronder, het dashboard over de volle breedte */
  .kiezer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .besluit { grid-row: 2; }
  .alles { grid-row: 3; }
  html:not(.js) .kiezer { grid-template-columns: minmax(0, 1fr); }
  .krijgt-actie { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; }
  .krijgt-actie .actie-rij { flex: none; margin-top: 0; }
}

@media (min-width: 1200px) {
  /* links de vier vragen, daaronder een vast vak voor het antwoord en onderaan de oproep; rechts het dashboard groot.
     Het vak staat altijd op dezelfde plek en is hoog genoeg voor het langste antwoord: bij wisselen verspringt er niets. */
  .krijgt-rij { grid-template-columns: minmax(290px, 3.3fr) minmax(0, 8.7fr); grid-template-rows: auto 1fr; column-gap: clamp(32px, 3.4vw, 52px); row-gap: 22px; align-items: start; }
  .krijgt-links { grid-column: 1; grid-row: 1; }
  .krijgt-actie { grid-column: 1; grid-row: 2; align-self: end; }
  .dash { grid-column: 2; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; }
  .dash-rooster { flex: 1; grid-template-rows: auto 1fr auto; }
  .krijgt-intro { font-size: 1.2rem; line-height: 1.45; letter-spacing: -0.008em; color: var(--bright); }

  .kiezer, html:not(.js) .kiezer { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 20px; border-top: 1px solid var(--line-mid); }
  .kies button, html:not(.js) .kies button { padding: 13px 44px 13px 22px; border: 0; border-bottom: 1px solid var(--line-mid); border-radius: 0; }
  .kies button::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 4px; background: var(--teal); opacity: 0; transition: opacity .2s ease-out; }
  .kies button::after { content: ''; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: rotate(45deg); }
  /* R8:B02 */
  @media (hover: hover) and (pointer: fine) { .js .kies button:hover { background: var(--bg-raised); } }
  .kies button[aria-expanded="true"] { box-shadow: none; background: var(--bg-raised); border-color: var(--line-mid); }
  .kies button[aria-expanded="true"]::before { opacity: 1; }
  .kies button[aria-expanded="true"]::after { border-color: var(--teal); }
  .kies-naam { font-size: 1.15rem; color: var(--text); }
  /* R8:B02 de hoverhelft van deze regel staat nu binnen de media query; was: ".kies button[aria-expanded="true"] .kies-naam, .kies button:hover .kies-naam" */
  .kies button[aria-expanded="true"] .kies-naam { color: var(--bright); }
  @media (hover: hover) and (pointer: fine) { .kies button:hover .kies-naam { color: var(--bright); } }
  .kies-zin { display: block; }

  .besluit { grid-row: 5; margin-top: 14px; min-height: 11.75rem; padding: 14px 22px 44px; background: var(--bg-raised); box-shadow: inset 4px 0 0 var(--teal); }
  .besluit--alles { display: block; box-shadow: inset 4px 0 0 var(--line-strong); }
  .bl-vraag { display: none; }
  .bl-vast { display: inline; }
  .antwoord { margin-top: 5px; font-size: clamp(1.14rem, 1.45vw, 1.3rem); line-height: 1.24; text-wrap: pretty; }
  .alles { grid-row: 5; align-self: end; margin: 0 0 6px 22px; z-index: 1; }

  html:not(.js) .kies button::after { content: none; }
  html:not(.js) .besluit { grid-row: auto; margin-top: 0; min-height: 0; padding: 0 22px 16px; border-bottom: 1px solid var(--line-mid); }
}

/* het dashboard zelf */
.dash { font-size: 13px; }
.dash-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dash-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.dash-titel { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.dash-periode { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dash-stand { display: flex; align-items: center; gap: 10px; }
.dash-rooster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kpi, .tegel { min-width: 0; background: var(--bg); border: 1px solid var(--line-mid); border-radius: var(--radius); transition: opacity .25s ease-out; }
.kpi { position: relative; padding: 8px 12px 9px; }
.kpi-label { display: block; font-size: 12px; color: var(--muted); }
.kpi-getal { display: block; margin-top: 2px; font-size: 1.2rem; font-weight: 750; letter-spacing: -0.025em; line-height: 1.2; color: var(--bright); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-sub { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--text); white-space: nowrap; }
.vonk { display: none; position: absolute; right: 12px; top: 13px; width: 52px; height: 18px; overflow: visible; }
.vonk polyline { fill: none; stroke: var(--line-teal); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.tegel { display: flex; flex-direction: column; padding: 10px 14px 11px; }
.tegel-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.tegel-titel { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--bright); }
.tegel-sub { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.tegel .lijn-leg { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tegel .lijn-leg i:first-child { margin-left: 0; }
.legenda { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11.5px; color: var(--muted); }
.legenda i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
.kl-teal { background: var(--teal); }
.kl-stil { background: var(--stil); }
.kl-licht { background: var(--licht); }
.kl-wit { background: var(--bright); }
.tegel-voet { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 6px 10px; }
.tegel-voet > div { min-width: 0; }
.tegel-voet > div:last-child { text-align: right; }
.tegel-voet dt { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tegel-voet dd { margin-top: 1px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* een vraag gekozen: de tegel met het antwoord blijft helder en krijgt de teal rand, de rest dempt */
.dash.is-gekozen .kpi, .dash.is-gekozen .tegel { opacity: .3; }
.dash.is-gekozen .tegel.is-aan { opacity: 1; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }

/* tegel: omzetontwikkeling */
.graf { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 10px; margin: 14px 0 10px; }
.graf-y { display: flex; flex-direction: column; justify-content: space-between; margin-block: -6px; font-size: 11px; line-height: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.graf-vlak { position: relative; min-height: 88px; margin-right: 10px; }
.graf-vlak svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.graf-punt { position: absolute; right: -4.5px; top: 25.08%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--bg); }
.graf-eind { position: absolute; right: -10px; top: 25.08%; margin-top: -28px; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--bright); white-space: nowrap; }
.graf-let { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bright); box-shadow: 0 0 0 2px var(--bg); opacity: 0; transition: opacity .25s ease-out; }
.is-aan .graf-let { opacity: 1; }
.graf-x { grid-column: 2; position: relative; height: 14px; margin: 7px 10px 0 0; font-size: 11px; line-height: 14px; color: var(--muted); }
.graf-x span { position: absolute; left: calc(var(--i) * 12.5%); transform: translateX(-50%); }
.is-aan .graf-x .let-op { color: var(--bright); font-weight: 650; }
.is-aan .tegel-voet .let-op dt, .is-aan .tegel-voet .let-op dd { color: var(--bright); }
.is-aan .tegel-voet .let-op dd { font-weight: 700; }

/* tegel: omzet per kanaal. De staaf is de omzet, het teal deel wat er na kosten overblijft. */
.k-kop, .k-rijen li { display: grid; grid-template-columns: minmax(0, 1fr) 6em 5em; column-gap: 10px; align-items: baseline; }
.k-kop { margin-top: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.k-kop span + span { text-align: right; }
.k-rijen li { padding: 6px 0 7px; border-bottom: 1px solid var(--line); }
.k-rijen li:last-child { border-bottom: 0; padding-bottom: 0; }
.k-naam { font-weight: 500; color: var(--text); white-space: nowrap; }
.k-bedrag { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-lijn { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 2.6em; column-gap: 10px; align-items: center; margin-top: 3px; }
.k-staaf { display: flex; height: 9px; width: calc(var(--tot) * 1%); }
.k-staaf i { flex: var(--p) 1 0; min-width: 0; }
.k-pct { text-align: right; font-size: 12px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.k-rijen { flex: 1; display: flex; flex-direction: column; }
.k-totaal { margin-top: auto; }
.k-totaal .k-naam, .k-totaal .k-bedrag { font-weight: 600; }
.is-aan .let-op .k-naam, .is-aan .let-op .k-bedrag, .is-aan .let-op .k-pct { color: var(--bright); font-weight: 650; }

/* tegel: marge per klant, een tabel met een staaf rond de nullijn */
.t-marge { width: 100%; margin: 8px 0 0; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.t-marge th, .t-marge td { padding: 4.5px 0 4.5px 10px; border-bottom: 1px solid var(--line); font-weight: 400; text-align: right; white-space: nowrap; color: var(--text); }
.t-marge th:first-child { padding-left: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.t-marge thead th { padding-block: 0 5px; font-size: 11.5px; color: var(--muted); }
.t-marge tbody tr:last-child th, .t-marge tbody tr:last-child td { border-bottom: 0; }
.t-marge .c-omzet { display: none; width: 78px; color: var(--muted); }
.t-marge .c-baan { width: 21%; }
.t-marge .c-pct { width: 50px; }
.t-marge .c-euro { width: 78px; }
.t-marge td:nth-last-child(2) { color: var(--muted); }
.m-baan { position: relative; display: block; height: 11px; }
.m-baan::before { content: ''; position: absolute; left: 22.2%; top: -7px; bottom: -7px; border-left: 1px solid var(--line-mid); }
.m-baan i { position: absolute; top: 0; bottom: 0; }
.m-baan .plus { left: 22.2%; width: calc(var(--w) * 2.222%); background: var(--stil); }
.m-baan .min { right: 77.8%; width: calc(var(--w) * 2.222%); background: var(--bright); }
.tegel--marge .tegel-voet { border-top-color: var(--line-mid); }
.is-aan .t-marge .let-op th, .is-aan .t-marge .let-op td { color: var(--bright); font-weight: 650; }

/* tegel: voorraad per productgroep, de staaf verdeeld naar hoe snel het loopt */
.tegel--voorraad .legenda { margin-top: 6px; }
.v-rijen { margin: 10px 0; display: grid; gap: 8px; }
.v-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.v-kop strong { font-weight: 500; color: var(--text); }
.v-kop span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-kop .v-stil { margin-left: auto; font-size: 12px; }
.v-staaf { display: flex; gap: 2px; height: 10px; margin-top: 4px; width: calc(var(--tot) * 1%); }
.v-staaf i { flex: var(--p) 1 0; min-width: 0; }
.is-aan .let-op .v-kop strong, .is-aan .let-op .v-stil { color: var(--bright); font-weight: 650; }

@container (max-width: 599px) {
  /* op de telefoon schuift de gekozen tegel bovenaan, direct onder het antwoord */
  .dash.is-gekozen .tegel.is-aan { order: -1; }
  .tegel--omzet .tegel-sub { display: none; }
  .dash-balk { padding-block: 8px; }
}
@container (max-width: 360px) {
  .dash-balk { padding-inline: 12px; }
  .dash-stand { gap: 8px; }
  .kpi { padding-inline: 10px; }
  .tegel { padding-inline: 12px; }
}
@container (max-width: 300px) {
  .kpi-getal { font-size: 1.0625rem; }
  .kpi-sub { white-space: normal; }
  .tegel-voet { gap: 4px 6px; }
  .tegel-voet dd { font-size: 12px; }
  .tegel-voet dt { font-size: 11px; white-space: normal; }
  .k-kop { display: none; }
  .k-rijen { margin-top: 6px; border-top: 1px solid var(--line); }
  .k-rijen li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .k-naam { grid-column: 1 / -1; }
  .k-bedrag { text-align: left; font-size: 12.5px; }
  .k-bedrag + .k-bedrag { text-align: right; }
  .k-bedrag .vh { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; color: var(--muted); }
  .t-marge .c-baan { display: none; }
}
@container (min-width: 600px) {
  .dash-balk { padding: 10px 18px; }
  .dash-rooster { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; padding: 10px; }
  .kpis { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding-inline: 10px; }
  .kpi-sub { letter-spacing: -0.012em; }
  .tegel { grid-column: span 6; }
}
@container (min-width: 780px) {
  .tegel--omzet, .tegel--marge { grid-column: span 7; }
  .tegel--kanaal, .tegel--voorraad { grid-column: span 5; }
  .kpi { padding: 10px 14px 11px; }
  .kpi-getal { font-size: 1.4rem; }
  .vonk { display: block; }
  .t-marge { font-size: 13px; }
  .t-marge .c-omzet { display: table-cell; }
  .t-marge .c-baan { width: 27%; }
  .t-marge .c-euro { width: 82px; }
  .t-marge .c-pct { width: 54px; }
  .graf-vlak { min-height: 120px; }
  .tegel { padding: 12px 14px 12px; }
}

/* ===== Gedeeld: de merknaam als tekst en de blokpijl van de flyer ===== */
.merknaam { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.014em; line-height: 1.05; }
.pijl { display: grid; place-items: center; height: 44px; }
.pijl svg { width: 23px; height: 28px; fill: var(--teal); transform: rotate(90deg); }
@media (min-width: 960px) {
  .pijl { height: auto; }
  .pijl svg { width: 28px; height: 34px; transform: none; }
}

/* ===== Waarom dit kan: de kassabonnen =====
   De compositie van het referentiebeeld: kop en tekst links, de twee bonnen groot rechts.
   Twee papieren voorwerpen op het donkere vlak. Links licht grijs en een fractie gedraaid,
   rechts wit en recht, allebei met een kartelrand. Geist Mono staat alleen op papier.
   Op de telefoon wisselen tekst en bon elkaar af. */
.bon-in { display: grid; row-gap: 14px; }
.waarom .h2 { margin-bottom: 8px; }
.bon-noot { max-width: 30em; font-size: 1rem; line-height: 1.5; }
.bon-noot strong { display: block; margin-bottom: 3px; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.4rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; color: var(--bright); }
.bon-noot--dg { margin-top: 12px; }
.kassabon {
  --tand: 7px;
  width: min(100%, 22rem); padding: 20px 18px 30px; background: #fff; color: #001620;
  font: 400 13px/1.45 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tand)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tand)) 100%;
}
.kassabon--zelf { background: #dcdfdb; color: #2a373e; transform: rotate(-1.4deg); }
.kassabon-kop { font-family: 'Inter', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; text-align: center; }
.kassabon-kop .merknaam { font-size: 1.3rem; color: #08080e; }
.kassabon-sub { padding-bottom: 11px; margin-bottom: 9px; border-bottom: 1px dashed currentColor; font-size: 12px; text-align: center; }
.kassabon-regels li, .kassabon-totaal { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.kassabon-regels i, .kassabon-totaal i { flex: 1; min-width: 12px; border-bottom: 1.5px dotted currentColor; transform: translateY(-.28em); opacity: .5; }
.kassabon-regels span, .kassabon-totaal span { white-space: nowrap; }
.kassabon--dg .kassabon-regels span:last-child { color: #0a6f69; font-weight: 600; }
.kassabon-totaal { margin-top: 9px; padding-top: 10px; border-top: 1px dashed currentColor; font-weight: 600; }
.kassabon-slot { margin-top: 12px; font-size: 12px; text-align: center; }
.kassabon-slot--groot { margin-top: 16px; font-family: 'Inter', system-ui, sans-serif; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.3; color: #08080e; }
.bon-actie { display: grid; gap: 14px; justify-items: start; margin-top: 16px; }
.bon-wie { font-size: 1rem; line-height: 1.5; }
.bon-wie .link { font-weight: 600; white-space: nowrap; }
@media (min-width: 700px) {
  /* twee kolommen: het bijschrift boven de bon */
  .bon-in { grid-template-columns: repeat(2, minmax(0, 22rem)); column-gap: clamp(28px, 5vw, 56px); row-gap: 18px; }
  .waarom .h2, .bon-actie { grid-column: 1 / -1; }
  .waarom .h2 { margin-bottom: 14px; }
  .bon-noot { align-self: start; }
  .bon-noot--zelf { grid-column: 1; grid-row: 2; }
  .bon-noot--dg { grid-column: 2; grid-row: 2; margin-top: 0; }
  .kassabon { width: auto; padding: 24px 20px 34px; line-height: 1.5; align-self: start; }
  .kassabon-sub { padding-bottom: 14px; margin-bottom: 12px; }
  .kassabon-regels li, .kassabon-totaal { padding: 3px 0; }
  .kassabon-totaal { margin-top: 12px; padding-top: 13px; }
  .kassabon-slot { margin-top: 16px; }
  .kassabon-slot--groot { margin-top: 18px; }
  .kassabon--zelf { grid-column: 1; grid-row: 3; margin-top: 26px; }
  .kassabon--dg { grid-column: 2; grid-row: 3; }
  .bon-actie { grid-row: 4; grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px 28px; margin-top: 22px; }
}
@media (min-width: 1200px) {
  /* kop en tekst links, de bonnen groot rechts, de witte iets hoger */
  .bon-in {
    --bon: clamp(330px, 26vw, 390px);
    grid-template-columns: minmax(0, 1fr) var(--bon) var(--bon);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 28px; row-gap: 0;
  }
  .waarom .h2, .bon-noot, .bon-actie { grid-column: 1; padding-right: 36px; }
  .waarom .h2 { grid-row: 2; margin-bottom: 28px; font-size: min(3.2rem, calc((min(100vw - 2 * var(--marge), var(--wrap)) - 2 * var(--bon) - 92px) * .096)); }
  .bon-noot { max-width: 27rem; align-self: auto; }
  .bon-noot--zelf { grid-row: 3; }
  .bon-noot--dg { grid-row: 4; margin-top: 18px; }
  .bon-actie { grid-row: 5; grid-auto-flow: row; margin-top: 30px; gap: 16px; }
  .kassabon { grid-row: 1 / -1; align-self: center; }
  .kassabon--zelf { grid-column: 2; margin: 48px 0 0; }
  .kassabon--dg { grid-column: 3; margin: 0 0 48px; }
}
@media (min-width: 1400px) {
  .kassabon { padding: 28px 24px 38px; font-size: 14px; }
  .kassabon-sub { font-size: 12.5px; }
  .kassabon-kop { font-size: 1.125rem; }
  .kassabon-kop .merknaam { font-size: 1.4rem; }
  .kassabon-slot { font-size: 12.5px; }
  .kassabon-slot--groot { font-size: 1.2rem; }
}

/* ===== Kosten, beeld K1: aansluiten en abonneren =====
   Twee omlijnde panelen met de blokpijl van de flyer ertussen. Onderin elk paneel een liniaal:
   links een enkel vak (een keer), rechts drie maanden en dan een open einde (en verder). */
.model { margin-top: clamp(26px, 4.4vw, 64px); display: grid; }
.model-paneel { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.4vw, 32px); border: 1.5px solid var(--line-mid); border-radius: var(--radius); }
.model-paneel--maand { border-color: var(--line-teal); }
.model-kop { padding-bottom: 18px; }
.model-merk { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-size: .8125rem; font-weight: 600; color: var(--bright); white-space: nowrap; }
.model-paneel--maand .model-merk { border-color: var(--teal); color: var(--teal); }
.model-kop h3 { margin-top: 12px; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.6rem); font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; color: var(--bright); }
.rol { padding: 12px 0 14px; border-top: 1px solid var(--line-mid); }
.rol-label { display: block; margin-bottom: 3px; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.rol--wij .rol-label { color: var(--teal); }
.rol p { max-width: 30em; font-size: 1rem; line-height: 1.5; }
.rol--wij p { color: var(--bright); }
.model-voet { padding-top: 14px; border-top: 1px solid var(--line-mid); font-size: .9375rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.erin { padding: 12px 0 14px; border-top: 1px solid var(--line-mid); }
.erin ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 4px; }
.erin li { position: relative; padding-left: 20px; font-size: 1rem; line-height: 1.5; color: var(--bright); }
.erin li::before { content: ''; position: absolute; left: 2px; top: .56em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* de liniaal staat onderin het paneel en blijft erbinnen: een streep per vak, het laatste vak loopt open door */
.liniaal { display: flex; margin-top: auto; padding-top: 24px; }
.liniaal span { position: relative; flex: 1 1 0; min-width: 0; padding: 9px 4px 0 9px; border-top: 1.5px solid var(--line-teal); font-size: .8125rem; font-weight: 500; line-height: 1.2; color: var(--text); white-space: nowrap; }
.liniaal span::before { content: ''; position: absolute; left: 0; top: -1.5px; width: 1.5px; height: 11px; background: var(--line-teal); }
.liniaal .verder { border-top-style: dashed; color: var(--muted); }
.liniaal .verder::after { content: ''; position: absolute; right: -1px; top: -6.75px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--line-teal); }
.liniaal--een span { border-top-color: var(--line-strong); }
.liniaal--een span::before, .liniaal--een span::after { background: var(--line-strong); }
.liniaal--een span::after { content: ''; position: absolute; right: 0; top: -1.5px; width: 1.5px; height: 11px; }
@media (max-width: 559px) {
  /* op de telefoon: label links, tekst rechts, zodat de panelen kort blijven */
  .model-paneel { padding: 18px 18px 20px; }
  .model-kop { padding-bottom: 14px; }
  .model-kop h3 { margin-top: 10px; }
  .model .rol { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); column-gap: 10px; padding: 10px 0 11px; }
  .model .rol-label { margin: 0; padding-top: 3px; }
  .model-voet { padding-top: 11px; font-size: .875rem; }
  .erin { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); column-gap: 10px; padding: 10px 0 12px; }
  .erin .rol-label { margin: 0; padding-top: 3px; }
  .erin ul { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 0; }
  .liniaal { padding-top: 18px; }
}
@media (min-width: 700px) {
  .model-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px); align-items: start; }
  .erin ul { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}
@media (min-width: 960px) {
  .model { grid-template-columns: minmax(0, 4.4fr) 60px minmax(0, 7.6fr); align-items: stretch; }
}

.prijs { margin-top: clamp(34px, 5.4vw, 80px); display: grid; gap: clamp(26px, 4vw, 32px); }
.bepaalt h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.factoren { margin-top: 14px; }
.factoren li { padding: 13px 0 14px; border-top: 1px solid var(--line-mid); font-weight: 500; line-height: 1.4; color: var(--bright); }
.factoren li:last-child { border-bottom: 1px solid var(--line-mid); }
.prijs-zin { max-width: 20em; margin-bottom: clamp(18px, 2.4vw, 24px); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); font-weight: 650; letter-spacing: -0.022em; line-height: 1.25; color: var(--bright); text-wrap: balance; }
@media (min-width: 960px) {
  .prijs { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
  .prijs-actie { padding-top: 44px; }
  .factoren li { padding: 15px 0 16px; }
}

/* ===== Het lichte vlak: waar het platform vandaan komt, en de vragen vooraf =====
   De tokens krijgen hier een lichte waarde, zodat koppen, lijnen, links en de focusring vanzelf meegaan. */
.licht {
  background: #f0ede6; color: #22343c;
  --bright: #001620; --text: #22343c; --muted: #4d5b62;
  --line: #d9d4c9; --line-mid: #c4bfb3; --line-strong: #6b7a80;
  --teal: #0a6f69;
}
.licht .vragen { padding-top: 0; }

/* Over ons, vorm O3: geen mensen, wel de herkomst. Een korte rechte lijn in de vorm van de DataGrip-route:
   twee open stippen, een gevulde stip voor nu, en een pijlpunt. Staand op smal, liggend vanaf 860 pixels. */
.over-kop { display: grid; gap: clamp(14px, 2vw, 22px); }
.over-lead { max-width: 30em; font-size: clamp(1.0625rem, .92rem + .8vw, 1.45rem); line-height: 1.5; letter-spacing: -0.008em; color: var(--bright); }

.herkomst { position: relative; margin-top: clamp(20px, 4.4vw, 60px); padding-left: 34px; display: grid; gap: 12px; }
.herkomst::before { content: ''; position: absolute; left: 5.5px; top: 12px; bottom: 6px; width: 3px; background: var(--teal); }
.herkomst::after { content: ''; position: absolute; left: -1px; bottom: -4px; border-style: solid; border-width: 11px 8px 0; border-color: var(--teal) transparent transparent; }
.stap { position: relative; padding-bottom: 2px; }
.stap::before { content: ''; position: absolute; left: -34px; top: 5px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: #f0ede6; border: 1.5px solid var(--teal); }
.stap--nu::before { background: var(--teal); }
.stap:last-child { padding-bottom: 18px; }
.stap-wanneer { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--teal); }
.stap strong { display: block; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.016em; line-height: 1.28; color: var(--bright); text-wrap: balance; }
.stap p { margin-top: 3px; max-width: 30em; font-size: .9375rem; line-height: 1.45; }
@media (min-width: 860px) {
  /* de derde stap begint op dezelfde lijn als de afsprakenlijst eronder */
  .herkomst { --gat: clamp(40px, 6vw, 96px); padding: 0; gap: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) var(--gat) minmax(0, 4.6fr); }
  .herkomst::before { left: 7px; right: 9px; top: 38.5px; bottom: auto; width: auto; height: 3px; }
  .herkomst::after { left: auto; right: 0; bottom: auto; top: 32px; border-width: 8px 0 8px 11px; border-color: transparent transparent transparent var(--teal); }
  .stap, .stap:last-child { padding: 62px 28px 0 0; }
  .stap--nu, .stap--nu:last-child { grid-column: 4; padding-right: 0; }
  .stap::before { left: 0; top: 33px; }
  .stap-wanneer { position: absolute; left: 0; top: 0; font-size: 1.0625rem; line-height: 1.3; }
  .stap strong { font-size: 1.25rem; }
  .stap--nu strong { font-size: 1.45rem; letter-spacing: -0.02em; }
  .stap p { font-size: 1rem; line-height: 1.5; }
}

.over-onder { margin-top: clamp(22px, 4.6vw, 68px); display: grid; gap: clamp(18px, 4vw, 36px); }
.over-onder h3 { padding-bottom: 8px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.waarden li, .afspraken li { padding: 10px 0 11px; border-top: 1px solid var(--line-mid); font-size: .9375rem; line-height: 1.42; }
.waarden li:last-child, .afspraken li:last-child { border-bottom: 1px solid var(--line-mid); }
.waarden strong { font-weight: 650; letter-spacing: -0.012em; color: var(--bright); }
.afspraken li { position: relative; padding-left: 30px; font-weight: 500; color: var(--bright); }
.afspraken li::before { content: ''; position: absolute; left: 5px; top: 13px; width: 7px; height: 12px; border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (min-width: 640px) {
  .waarden li, .afspraken li { font-size: 1rem; }
  .waarden li { display: grid; grid-template-columns: 14.6em minmax(0, 1fr); column-gap: 20px; align-items: baseline; }
}
@media (min-width: 860px) {
  .over-onder { --gat: clamp(40px, 6vw, 96px); grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr); column-gap: var(--gat); align-items: start; }
  .waarden li, .afspraken li { padding: 14px 0 15px; }
  .afspraken li { padding-left: 30px; }
  .afspraken li::before { top: 17px; }
}

.vragen-rij { display: grid; gap: 22px; }
.vragen-links p { margin-top: 20px; max-width: 26em; }
.uitklap { border-top: 1px solid var(--line-mid); }
.uitklap:last-child { border-bottom: 1px solid var(--line-mid); }
.uitklap button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: clamp(17px, 2.2vw, 22px) 0; background: none; border: 0; font: inherit; font-size: clamp(1.075rem, 1rem + .35vw, 1.2rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; text-align: left; color: var(--bright); cursor: pointer; }
.plusje { position: relative; flex: none; width: 18px; height: 18px; }
.plusje::before, .plusje::after { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--teal); transition: transform .2s ease-out; }
.plusje::after { transform: rotate(90deg); }
[aria-expanded="true"] .plusje::after { transform: none; }
.uitklap-in { max-width: 40em; padding: 0 44px 24px 0; }
@media (min-width: 960px) {
  .vragen-rij { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: clamp(48px, 7vw, 116px); align-items: start; }
  .vragen-links { position: sticky; top: calc(var(--kop-h) + 40px); }
}

/* ===== Slot en contact: de slogan boven het formulier, geen kader, de kolommen ordenen ===== */
.contact-rij { display: grid; gap: 24px; }
.contact .slot { margin-bottom: clamp(26px, 4.6vw, 64px); }
.contact-vraag { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem); font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; color: var(--bright); text-wrap: balance; }
.contact-intro { margin-top: 12px; max-width: 26em; }
.formulier { min-width: 0; }
.form-velden { display: grid; gap: clamp(16px, 2vw, 20px); }
.veld-rij { display: grid; gap: clamp(16px, 2vw, 20px); }
@media (min-width: 640px) { .veld-rij { grid-template-columns: 1fr 1fr; } }
.veld label { display: block; margin-bottom: 8px; font-size: .9375rem; font-weight: 600; color: var(--bright); }
.veld input, .veld textarea {
  display: block; width: 100%; min-height: 52px; padding: 13px 14px;
  background: var(--bg-raised); border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; color: var(--bright);
}
.veld textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
@media (max-width: 559px) { .veld textarea { height: 116px; } }
/* R8:B02 */
@media (hover: hover) and (pointer: fine) { .veld input:hover, .veld textarea:hover { border-color: var(--muted); } }
.veld input:focus-visible, .veld textarea:focus-visible { border-color: var(--teal); outline: 2px solid var(--bright); outline-offset: 2px; }
.veld [aria-invalid="true"] { border-color: var(--bright); border-width: 2px; }
.hint { margin: -4px 0 8px; font-size: .875rem; color: var(--muted); }
.fout { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .9rem; font-weight: 600; color: var(--bright); }
.fout svg { flex: none; width: 16px; height: 16px; }
.verstuur-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.verstuur-rij .btn { min-width: 148px; }
.belofte { font-size: .9375rem; }
/* het lege veld tegen robots: buiten beeld, niet te bereiken met het toetsenbord, verborgen voor een schermlezer */
.veld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* lukt het versturen niet, dan staat hier waarom, met het mailadres als uitweg */
.form-fout { flex: 1 0 100%; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--bright); }
.form-fout[hidden] { display: none; }
.formulier.is-verzonden .form-velden { display: none; }
.melding { display: grid; gap: 6px; padding: 20px 0; border-block: 1.5px solid var(--line-teal); line-height: 1.5; }
.melding strong { font-size: 1.15rem; letter-spacing: -0.012em; color: var(--bright); }
.melding-terug { justify-self: start; margin-top: 6px; padding: 8px 0; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
@media (min-width: 960px) {
  /* links de kop met "Liever direct?", rechts het formulier dat even hoog is: het berichtveld vult de ruimte,
     zodat beide kolommen op dezelfde lijn eindigen en er links noch rechts een leeg vlak overblijft */
  .contact-rij { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(48px, 7vw, 116px); row-gap: 36px; align-items: start; }
  .contact-kop { grid-column: 1; grid-row: 1; }
  .contact-direct { grid-column: 1; grid-row: 2; }
  .formulier { grid-column: 2; grid-row: 1 / 3; align-self: stretch; display: grid; padding-top: 6px; }
  .form-velden { grid-template-rows: auto minmax(0, 1fr) auto; }
  .form-velden > .veld { display: flex; flex-direction: column; }
  .form-velden > .veld textarea { flex: 1; }
  .melding { align-self: start; }
}

/* ===== Voet ===== */
.voet { padding: clamp(40px, 6vw, 84px) 0 28px; border-top: 1px solid var(--line); }
.voet-rij { display: grid; gap: 24px 24px; grid-template-columns: auto minmax(0, 1fr); }
.voet-merk { grid-column: 1 / -1; }
.logo--groot { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem); }
.tagline { margin-top: 8px; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--bright); }
.tagline em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.14em; color: var(--teal); }
.voet-kop { margin-bottom: 2px; font-size: .875rem; font-weight: 600; color: var(--bright); }
.voet-nav li { font-size: .9375rem; color: var(--text); }
@media (max-width: 479px) { .voet-nav li { font-size: .875rem; } .voet-rij { column-gap: 18px; } }
.voet-nav a, .voet-nav li > span { display: inline-block; padding-block: 9px; color: var(--text); text-decoration: none; }
/* R8:B02 */
@media (hover: hover) and (pointer: fine) { .voet-nav a:hover { color: var(--bright); text-decoration: underline; text-underline-offset: 4px; } }
.voet-onder { margin-top: clamp(24px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; font-size: .875rem; color: var(--muted); }
@media (min-width: 860px) {
  .voet-rij { grid-template-columns: minmax(0, 2.2fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
  .voet-merk { grid-column: auto; }
  .voet-kop { margin-bottom: 6px; }
  .voet-nav a, .voet-nav li > span { padding-block: 4px; }
}

/* ===== Melding voor niet-gekoppelde links ===== */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--radius);
  background: #f0ede6; color: #001620; border: 1.5px solid #001620; font-size: .9375rem; font-weight: 600; white-space: nowrap;
  visibility: hidden; opacity: 0; transform: translate(-50%, 10px);
  transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s;
}
.toast.is-zichtbaar { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }

/* ===== Inschuiven: alleen als het script draait en alleen wat nog onder de vouw staat ===== */
.js [data-reveal] { transition: opacity .6s ease-out, transform .6s ease-out; }
.js [data-reveal].is-wacht { opacity: 0; transform: translateY(14px); }

/* R8:B06 · Minder beweging betekent zachter, niet alles uit. Verschuivingen en schalen vallen weg,
   een korte fade van 150 ms blijft, en een animatie staat direct in haar eindstand.
   Was (terugdraaien = dit blok terugzetten en het nieuwe weghalen):
   @media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
     *, *::before, *::after { animation: none !important; transition: none !important; }
     .draad i { display: none; }
   } */
@media (prefers-reduced-motion: reduce) {
  html, html.glijdt { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 150ms !important; transition-delay: 0s !important;
  }
  .draad i { display: none; }
  .blog-leesbalk { animation-duration: auto !important; }
}

/* ══════════ Ronde 7 · de schil ══════════
   Alles hieronder is nieuw in het voorstel. De maten staan bovenaan pagina.css. */

/* ── Het mobiele menu: onder de knop de pagina's uit de voet, onderaan het scherm de twee directe wegen.
   Op een breed scherm staan ze in de voet en is dit blok er niet. ── */
.menu-meer { display: none; }
@media (max-width: 959px) {
  .js .menu-meer { display: flex; flex-direction: column; flex: 1 0 auto; margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--line); }
  .js .menu .menu-meer-links { flex-direction: row; flex-wrap: wrap; gap: 0 22px; }
  .js .menu .menu-meer li { border-bottom: 0; }
  /* elke link is 44 pixels hoog: 14 pixels letter, 22 regelhoogte en 11 lucht boven en onder */
  .js .menu .menu-meer a:not(.btn) { display: block; padding: 11px 0; font-size: .875rem; font-weight: 500; line-height: 22px; letter-spacing: 0; color: var(--text); white-space: normal; }
  /* R8:B02 */
  @media (hover: hover) and (pointer: fine) { .js .menu .menu-meer a:not(.btn):hover { color: var(--bright); } }
  /* mail en WhatsApp staan onderaan het scherm; is het scherm te laag, dan volgen ze gewoon op de links */
  .menu-meer-contact { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: auto; padding-top: 18px; }
  .js .menu .menu-meer-contact a:not(.btn) { color: var(--muted); }
}

/* ── De korte kop van een landingspagina (kop--kort): alleen het logo en de knop naar het formulier
   op de pagina zelf. De knop staat er op elke breedte: smal "Kennismaken", vanaf 520 het volle label.
   Even hoog als de gewone kop, en hij heeft geen script nodig. ── */
.kop--kort .kop-cta { display: inline-flex; min-height: 44px; padding: 0 18px; font-size: .95rem; }
.kop--kort .kop-cta .lang { display: none; }
@media (min-width: 520px) {
  .kop--kort .kop-cta .kort { display: none; }
  .kop--kort .kop-cta .lang { display: inline; }
}
@media (max-width: 959px) {
  .kop--kort .kop-cta { padding: 0 14px; font-size: .875rem; }
  html:not(.js) .kop--kort { position: sticky; }
  html:not(.js) .kop--kort .kop-rij { height: var(--kop-h); flex-wrap: nowrap; padding-block: 0; }
}
@media (max-width: 339px) { .kop--kort .kop-cta { padding: 0 11px; } }

/* ── De voet op het raster van de pagina.
   Het rechterdeel begint waar de rechterkolom van het contact begint (5 en 7 delen met dezelfde
   tussenruimte): x 672 op 1440. Daarin twee gelijke kolommen met 40 ertussen: "Contact" op x 1036.
   De tagline is groot genoeg om het cursieve "jou." te zien, en breekt altijd na "werken." ── */
.voet { --voet-gat: clamp(48px, 7vw, 116px); }
.tagline { margin-top: 12px; max-width: 9.9em; font-size: clamp(1.625rem, 1.4rem + .9vw, 2rem); font-weight: 500; letter-spacing: -0.022em; line-height: 1.16; }
.tagline em { font-size: 1.12em; letter-spacing: -0.01em; }
@media (min-width: 860px) {
  .voet { --voet-links: calc((100% - var(--voet-gat)) * 5 / 12 + var(--voet-gat) - 40px); }
  .voet-rij { grid-template-columns: var(--voet-links) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  /* de onderste regel staat op dezelfde lijnen: het jaar links, de cookie-instellingen op x 672, de noot rechts */
  .voet-onder { display: grid; grid-template-columns: var(--voet-links) minmax(0, 1fr) auto; column-gap: 40px; align-items: baseline; }
  .voet-onder > :last-child { text-align: right; }
}
@media (max-width: 859px) {
  /* op een telefoon is elke link in de voet een tikdoel van 44 pixels hoog */
  .voet-nav a, .voet-nav li > span { padding-block: 11px; }
  .voet-onder { align-items: center; }
  .voet-onder .voet-cookie { min-height: 44px; }
}

/* ══════════ Ronde 8 · de schil (team 4) ══════════
   Elk blok hieronder hoort bij één voorstel en draagt zijn merkteken (R8:<ID>). Terugdraaien is het blok
   weghalen. De hoverregels van R8:B02 en de nieuwe regel voor minder beweging (R8:B06) staan op hun eigen plek
   hierboven, omdat de volgorde daar telt. */

/* R8:A01 · Eén maatschaal voor koppen op de telefoon, op alle pagina's.
   Tot 760 breed dezelfde vier treden als op de homepage (style.css). De paginakop (.h1), de afsluiter en de
   tussenkoppen staan in pagina.css met dezelfde waarden. Op 390: H1 30,4 · band en afsluiter 26,5 ·
   sectiekop 24,2 · tussenkop 21. */
@media (max-width: 759px) {
  .h2, .vragen-links .h2 { font-size: clamp(1.45rem, 6.2vw, 2rem); }
  .band-zin { font-size: clamp(1.55rem, 6.8vw, 2.2rem); }
}

/* Na ronde 3 · "Liever direct?" als twee tegels, op elke pagina dezelfde vorm (homepage, vragen, MKB, partners).
   E-mail en WhatsApp naast elkaar, elk met een ikoon, het label, de waarde en een werkwoord; de hele tegel is
   de link. Past er geen twee keer 200 pixels naast elkaar, dan staan ze onder elkaar. Geen KVK: dat staat in de voet. */
.contact-direct h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--bright); }
.direct { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.direct li { display: flex; min-width: 0; }
.direct-tegel {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 18px;
  border: 1px solid var(--line-mid); border-radius: 12px; background: var(--bg-raised); color: var(--text); text-decoration: none;
  transition: transform var(--t-druk) var(--ease-uit), border-color var(--t-kort) var(--ease-uit);
}
.direct-ikoon { width: 26px; height: 26px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.direct-label { margin-top: 18px; font-size: .875rem; line-height: 1.3; color: var(--muted); }
.direct-waarde { margin-top: 2px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--bright); white-space: nowrap; }
.direct-actie { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--teal); }
.direct-actie svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-kort) var(--ease-uit); }
.direct-tegel:active { transform: scale(.98); transition-duration: 60ms; }
@media (hover: hover) and (pointer: fine) {
  .direct-tegel:hover { border-color: var(--line-teal); transform: translateY(-2px); }
  .direct-tegel:hover .direct-actie svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .direct-tegel:hover, .direct-tegel:active { transform: none; } }
/* op het lichte vlak (de vragenpagina): een tegel in een tint lichter dan het vlak, de tekst volgt de tokens van .licht */
.licht .direct-tegel { background: #fbfaf6; }
@media (forced-colors: active) { .direct-tegel { border-color: LinkText; } }

/* R8:A07 · Eén soort label boven een kop: 13 px, gewicht 600, gedempt, nooit teal. De labels zelf staan in
   de bestanden van de pagina's (venster.css, p-*.css); die kunnen deze klasse gebruiken of de maten
   overnemen. Een lijn alleen waar het label naar iets wijst: dat regelt het bestand van de pagina. */
:root { --label-maat: .8125rem; --label-gewicht: 600; }
.label { display: block; font-size: var(--label-maat); font-weight: var(--label-gewicht); line-height: 1.35; letter-spacing: 0; color: var(--muted); }

/* R8:A14 · Op de telefoon is elke hoofdknop buiten de vaste kop over de volle breedte, op alle pagina's.
   Een knop met lijn (.btn-lijn) houdt zijn eigen breedte. */
@media (max-width: 479px) {
  main .btn-primair, .afsluiter .btn-primair { display: flex; width: 100%; flex: 1 1 100%; }
}

/* R8:B04 · Drukfeedback op elke knop, en geen blauwe tikflits (ook D08). Indrukken direct, loslaten in 160 ms.
   Knoppen met een vaste breedte zakken een fractie in; knoppen over de volle breedte (een vraag) krijgen een
   vlak in de kleur net naast de ondergrond: --druk. Bij minder beweging blijft het vlak, de schaal vervalt.
   De knoppen van de cookiemelding staan in cookie.css, die van het venster in venster.css. */
html { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
:root { --druk: #06202c; }                                                   /* var(--bg-raised) */
.sec--vlak, .pagina-sectie--verhoogd, .vn--op-vlak { --druk: var(--bg); }  /* op een verhoogd vlak de basiskleur */
.licht { --druk: #e4e0d6; }                                                  /* op het lichte vlak een tint dieper */
.btn { transition: transform var(--t-druk) var(--ease-uit); }
.btn:active { transform: scale(.97); transition-duration: 60ms; }
.uitklap button { transition: background-color var(--t-druk) ease; }
.uitklap button:active { background-color: var(--druk); transition-duration: 0ms; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* R8:D08 · Een tik voelt als een tik (het algemene deel). Tikflits, drukvlak en schaal staan bij R8:B04;
   D08 voegt toe dat ook een tabblad direct op een tik reageert, zonder te wachten op een dubbeltik. */
[role="tab"] { touch-action: manipulation; }

/* R8:B05 · Wat uitklapt verschijnt in 180 ms: alleen opacity en 4 px verschuiving, de hoogte springt in een keer.
   Alleen onder html.beweegt (basis.js zet die een frame na het laden), anders speelt het ook bij het eerste
   tekenen. Bij het venster alleen de tegels die "Toon het hele dashboard" erbij haalt (.is-heel): zonder die
   voorwaarde faden bij elke tabwissel alle tegels vanaf 0 in, en juist dat lege flitsen wil R8:B01 voorkomen.
   Tijdens het zoeken op de vragenpagina gaan antwoorden bij elke toets open en dicht: daar geen overgang. */
@media (prefers-reduced-motion: no-preference) {
  .beweegt .uitklap-in, .beweegt .taken, .beweegt .stappen, .beweegt .bord .kpi, .beweegt .bord .tegel,
  .beweegt .vn-bord.is-heel .vn-kpi, .beweegt .vn-bord.is-heel .vn-tegel {
    transition: opacity var(--t-kort) var(--ease-uit), transform var(--t-kort) var(--ease-uit);
  }
  @starting-style {
    .beweegt .uitklap-in, .beweegt .taken, .beweegt .stappen, .beweegt .bord .kpi, .beweegt .bord .tegel,
    .beweegt .vn-bord.is-heel .vn-kpi, .beweegt .vn-bord.is-heel .vn-tegel { opacity: 0; transform: translateY(-4px); }
  }
  .faq-zoekt .uitklap-in { transition: none; }
}

/* R8:B13 · Het menu op een telefoon: open in 220 ms, dicht in 150 ms, en de pagina erachter scrolt niet mee.
   De knop "Kennismaken" in de kop faadt weg in plaats van in een frame te verdwijnen (en houdt zijn
   drukbeweging uit R8:B04). */
@media (max-width: 959px) {
  .js .menu {
    transform: translateY(-8px); overscroll-behavior: contain;
    transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms;
  }
  .js.menu-open .menu { transform: none; transition: opacity var(--t-paneel) var(--ease-uit), transform var(--t-paneel) var(--ease-uit), visibility 0s; }
  .js .kop-cta { transition: opacity 150ms ease-out, visibility 0s linear 150ms, transform var(--t-druk) var(--ease-uit); }
  .js.menu-open .kop-cta { opacity: 0; visibility: hidden; transition-delay: 0s; }
}

/* R8:B14 · De bewegingsmaten toegepast (de maten zelf staan in :root bovenaan dit bestand).
   Inschuiven 500 ms met 12 px, het plusje en het streepje bij een vraag 180 ms, de opbouw van een antwoord
   220 ms; de veeg van de route houdt haar curve (nu met een naam), de rechte lijn krijgt --ease-uit. */
.js [data-reveal] { transition: opacity var(--t-blok) var(--ease-uit), transform var(--t-blok) var(--ease-uit); }
.js [data-reveal].is-wacht { transform: translateY(12px); }
.plusje::before, .plusje::after { transition: transform var(--t-kort) var(--ease-uit); }
.js .besluit { animation: paneel-in var(--t-paneel) var(--ease-uit); }
@media (min-width: 1200px) { .kies button::before { transition: opacity var(--t-kort) var(--ease-uit); } }
@media (prefers-reduced-motion: no-preference) {
  .route .veeg, .route .veeg-in { transition: transform 1.7s var(--ease-teken); }
  .route .recht-lijn i { transition: transform .9s var(--ease-uit) .15s; }
}

/* R8:D07 · Tablet: de voet in drie kolommen vanaf 700 in plaats van 860, op hetzelfde raster als op een laptop
   (gelijk aan style.css). Tot 959 is de aanwijzer een vinger: de links blijven 44 pixels hoog. */
@media (min-width: 700px) and (max-width: 859px) {
  .voet { --voet-links: calc((100% - var(--voet-gat)) * 5 / 12 + var(--voet-gat) - 40px); }
  .voet-rij { grid-template-columns: var(--voet-links) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .voet-merk { grid-column: auto; }
  .voet-kop { margin-bottom: 6px; }
  /* de onderste regel: op een tablet is er geen ruimte voor de noot op één regel naast de knop. De knop houdt
     zijn breedte, de noot breekt rechts uitgelijnd over twee regels (met "auto" voor de noot schoof hij over de knop) */
  .voet-onder { display: grid; grid-template-columns: var(--voet-links) auto minmax(0, 1fr); column-gap: 40px; align-items: baseline; }
  .voet-onder > :last-child { text-align: right; }
  .voet-onder .voet-cookie { white-space: nowrap; }
}
@media (min-width: 700px) and (max-width: 959px) {
  .voet-nav a, .voet-nav li > span { padding-block: 11px; }
}

/* R8:D18 · Het label "Voorbeelddata" leesbaar: 12 px op elke breedte (deel basis.css; de schetsen zelf staan
   in p-projecten.css). */
.merkje { font-size: 12px; }

/* R8:E02 · Voorbereiding: de lettertypen staan ook hier, zodat fonts.css uit de kop kan (een verzoek minder).
   Zolang fonts.css nog geladen wordt, staan ze er dubbel; dat kost niets, de browser haalt elk bestand één
   keer op. De regel in de kop die weg kan, staat in reviews/ronde8-bouw-team4.md. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/inter-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/inter-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/playfairdisplay-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/playfairdisplay-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/playfairdisplay-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/playfairdisplay-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/geist-mono-latin-wght-normal.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/geist-mono-latin-ext-wght-normal.woff2") format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── De voet met "Blogs" (28-10-2026): vier blokken. Tussen 700 en 1199 staat het merk op een eigen
   regel en staan Meer, Blogs en Contact eronder, op de lijnen van de onderste regel. Vanaf 1200 staat
   alles naast elkaar, Contact zo breed als "WhatsApp 06 ..." (anders brak die regel op 1280). Gelijk in basis.css
   en style.css. ── */
@media (min-width: 700px) {
  .voet-rij { grid-template-columns: var(--voet-links) minmax(0, 1fr) minmax(0, 1fr); }
  .voet-merk { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .voet-rij { grid-template-columns: var(--voet-links) minmax(0, 1fr) minmax(0, 1fr) max-content; }
  .voet-merk { grid-column: auto; }
}