/* Kadeworks, huisstijl rond en recht. Bron van waarheid samen met tokens.json; tools/contrast.py controleert dat de kleuren gelijk zijn. */

@font-face { font-family: "Familjen Grotesk"; src: url("/fonts/familjen-grotesk-400.woff2?v=e2f353fc03") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("/fonts/familjen-grotesk-650.woff2?v=7feedde275") format("woff2"); font-weight: 650; font-style: normal; font-display: swap; }

:root {
  /* Kleur. Vijf merkkleuren en twee hulpkleuren. Amber is nooit tekst op licht. */
  --bes: #8A1538;
  --amber: #F0A530;
  --inkt: #2A1A1F;
  --steen: #6B5A5F;
  --kalk: #F6F1EE;
  --wit: #FFFFFF;
  --lijn: #E2D7D3;

  /* Letter. Eén familie; tabelcijfers zijn standaard. */
  --letter: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gewicht-tekst: 400;
  --gewicht-kop: 650;
  --cijfers-register: "tnum" 1;
  --cijfers-code: "tnum" 1, "zero" 1; /* btw-id, IBAN: letters en cijfers door elkaar */

  /* Typeschaal: zes groottes, meer niet. */
  --t-kop: clamp(32px, 20px + 3.4vw, 60px);
  --t-sectie: clamp(24px, 20px + 1vw, 32px);
  --t-lead: 20px;
  --t-tekst: 17px;
  --t-label: 15px;
  --t-klein: 13px;

  --r-kop: 1.06;
  --r-sectie: 1.15;
  --r-lead: 1.45;
  --r-tekst: 1.55;
  --r-label: 1.4;
  --r-klein: 1.45;

  --spatie-kop: -.025em;
  --spatie-sectie: -.015em;
  --spatie-lead: -.005em;

  /* Spatiëring, stappen van 4 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radius: rond is voor de cirkel, de rest blijft bijna recht. */
  --radius-klein: 4px;
  --radius-vlak: 12px;
  --radius-rond: 999px;

  /* Lijn */
  --haarlijn: 1px;
  --focus: 2px;
}

@media print {
  :root { --haarlijn: .25mm; }
}

/* ==================================================================
   kadeworks.nl. Staat onder brand/tokens.css; tools/build.py plakt ze samen tot site/style.css.
   Huisstijl "rond en recht": Kalk draagt, Inkt spreekt, Bes wijst de weg. Amber komt alleen
   voor in het beeldmerk en als blokje achter het KvK-nummer.
   Raster: vanaf 1024 px een kolom voor koppen links en een kolom voor de inhoud rechts, zoals
   in brand/brand-guide.html. Rijen met label en waarde hebben daarbinnen hun eigen labelkolom.
   ================================================================== */

:root {
  /* Basislijn van een tekstregel = lettergrootte × (regelhoogte / 2 + --bl).
     --bl is de helft van (ascent − descent) van Familjen Grotesk, gemeten in Chrome. */
  --bl: .395;
  --marge: 20px;
  --vel-max: 1440px;
  --kol-label: 0px;          /* koppenkolom, vanaf 1024 */
  --kol-tussen: 0px;
  --kol-rij: 176px;          /* labelkolom in rijen, vanaf 768 */
  --rij-tussen: 24px;
  --logo-h: 24px;            /* hoogte van het hele logo; het beeldmerk is 800/815 daarvan */
  --kop-y: 20px;             /* lucht boven en onder het logo: minstens de helft van het beeldmerk */
  --lucht: var(--s-7);       /* tussen delen */
  --paneel: 20px;            /* binnenrand van het register */
  --maat: 36em;              /* regellengte van lopende tekst */
}
@media (min-width: 768px) {
  :root { --marge: 32px; --logo-h: 28px; --kop-y: 24px; --lucht: var(--s-8); --paneel: 32px; --kol-rij: 200px; }
}
@media (min-width: 1024px) {
  :root { --marge: 48px; --logo-h: 32px; --kop-y: 28px; --lucht: var(--s-9); --paneel: 40px; --kol-label: 232px; --kol-tussen: 32px; --kol-rij: 192px; }
}
@media (min-width: 1280px) {
  :root { --kol-label: 288px; --kol-tussen: 48px; --kol-rij: 208px; }
}

/* ------------------------------------------------------------------ basis */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s-5); color-scheme: light; background: var(--kalk); }
body {
  margin: 0;
  background: var(--kalk);
  color: var(--inkt);
  font: var(--gewicht-tekst) var(--t-tekst)/var(--r-tekst) var(--letter);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Korte pagina's: de voet staat onderaan het scherm, niet halverwege */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, p, dl, dd, ul, table, address { margin: 0; padding: 0; }
h1, h2, h3, b { font-weight: var(--gewicht-kop); }
address { font-style: normal; }
ul { list-style: none; }
svg { display: block; }
a { color: var(--bes); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus) solid var(--bes); outline-offset: 3px; }
main:focus { outline: none; }
::selection { background: var(--amber); color: var(--inkt); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nb { white-space: nowrap; }
.print { display: none; }

/* Skip-link: bij focus zichtbaar boven de kop */
.skip {
  position: absolute; z-index: 3; left: var(--marge); top: -200px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-klein);
  background: var(--bes); color: var(--kalk);
  font-size: var(--t-label); line-height: var(--r-label);
}
.skip:focus { top: var(--s-2); outline-color: var(--inkt); }

.vel { max-width: var(--vel-max); margin-inline: auto; padding-inline: var(--marge); }

/* De beeldmerkkleuren van het inline logo */
.c-bes { fill: var(--bes); }
.c-amber { fill: var(--amber); }
.c-inkt { fill: var(--inkt); }

/* ------------------------------------------------------------------ kop: logo en taalkeuze */

.kop-vel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; column-gap: var(--s-5); row-gap: var(--s-2); padding-block: var(--kop-y); }
.kop-logo { display: block; flex: 0 1 auto; min-width: 0; }
.kop-logo:focus-visible { outline-offset: 6px; }
.logo { width: calc(var(--logo-h) * 6840 / 815); max-width: 100%; height: auto; aspect-ratio: 6840 / 815; }
@media (max-width: 359.98px) {
  :root { --logo-h: 20px; }
  .kop-vel { column-gap: var(--s-4); }
}
@media (max-width: 299.98px) {
  /* Op zeer smalle schermen (horloge, opgevouwen telefoon) mogen vaste woordgroepen en adressen breken, anders loopt de pagina opzij. */
  .nb { white-space: normal; }
  a { overflow-wrap: anywhere; }
  h1, h2, h3, p, dt, dd, td, th { hyphens: auto; overflow-wrap: break-word; }
}

/* De taalkeuze staat op de basislijn van het woordmerk (800 van 815). 4 px boven en onder geeft een doel van 29 px. */
.taal {
  display: block;
  flex: none;
  padding-block: 4px;
  font-size: var(--t-label);
  line-height: var(--r-label);
  margin-top: calc(var(--logo-h) * 800 / 815 - 4px - var(--t-label) * (var(--r-label) / 2 + var(--bl)));
}

/* ------------------------------------------------------------------ opening */

.opening { padding-top: var(--s-4); }
h1 {
  max-width: 17em;
  font-size: var(--t-kop); line-height: var(--r-kop); letter-spacing: var(--spatie-kop);
  text-wrap: pretty;
}
/* Tussen 1024 en 1280 is de inhoudkolom smal: iets kleiner, dan breekt de kop in drie gelijke regels. */
@media (min-width: 1024px) and (max-width: 1279.98px) { h1 { font-size: 48px; } }
.sub { margin-top: var(--s-4); max-width: var(--maat); font-size: var(--t-lead); line-height: var(--r-lead); letter-spacing: var(--spatie-lead); text-wrap: pretty; }

@media (min-width: 768px) {
  .opening { padding-top: var(--s-6); }
  .sub { margin-top: var(--s-5); }
}

/* Vanaf 1024: koppen links, inhoud rechts. De opening staat in de inhoudkolom. */
@media (min-width: 1024px) {
  .opening, .deel, .slot-vel, .blok {
    display: grid; grid-template-columns: var(--kol-label) minmax(0, 1fr); column-gap: var(--kol-tussen);
  }
  .opening > * { grid-column: 2; }
  .opening { padding-top: var(--s-7); }
}

/* ------------------------------------------------------------------ delen */

.deel { margin-top: var(--lucht); padding-top: var(--s-5); border-top: var(--haarlijn) solid var(--lijn); }
.opening + .deel { margin-top: var(--s-7); }
.deel > h2, .slot h2 {
  font-size: var(--t-sectie); line-height: var(--r-sectie); letter-spacing: var(--spatie-sectie);
  text-wrap: balance;
}
.deel > h2 { margin-bottom: var(--s-4); }

@media (min-width: 768px) {
  .deel { padding-top: var(--s-6); }
  .deel > h2 { margin-bottom: var(--s-5); }
}
@media (min-width: 1024px) {
  .opening + .deel { margin-top: var(--s-8); }
  .deel { padding-top: var(--s-7); align-items: start; }
  .deel > h2 { margin-top: -4px; } /* bovenkant van de kapitalen gelijk met de bovenkant van het register en de eerste regel */
  .deel > h2 { margin-bottom: 0; }
}

/* ------------------------------------------------------------------ rijen: label en waarde */

.rij { border-top: var(--haarlijn) solid var(--lijn); padding-block: var(--s-3); }
.inhoud > .register > .rij:first-child, .inhoud > .rij:first-child { border-top: 0; padding-top: 0; }
dt, .label { font-size: var(--t-label); line-height: var(--r-label); font-weight: var(--gewicht-tekst); color: var(--steen); }
dt, .rij > .label { margin-bottom: var(--s-1); }
dd { min-width: 0; text-wrap: pretty; }

@media (min-width: 768px) {
  .rij { display: grid; grid-template-columns: var(--kol-rij) minmax(0, 1fr); column-gap: var(--rij-tussen); align-items: baseline; }
  dt, .rij > .label { margin-bottom: 0; }
}

/* ------------------------------------------------------------------ het register: bedrijfsgegevens op een wit vel */

/* De waardekolom in het paneel lijnt uit met de waardekolom van de andere delen. */
@media (min-width: 768px) { .paneel > .rij { grid-template-columns: calc(var(--kol-rij) - var(--paneel)) minmax(0, 1fr); } }
.paneel { padding: var(--paneel); border-radius: var(--radius-vlak); background: var(--wit); }
.register.paneel { padding-top: calc(var(--paneel) - 4px); }

/* KvK-nummer: grote cijfers in de merkletter, één tekstwaarde om te zoeken en te kopiëren.
   Het blok uit het beeldmerk staat erachter als punt; het is een pseudo-element en wordt niet mee gekopieerd. */
.rij-kvk { display: block; padding-bottom: var(--s-4); container-type: inline-size; }
.rij-kvk dt { margin-bottom: var(--s-2); }
.kvk {
  display: block;
  font-size: min(20cqi, 136px);
  font-weight: var(--gewicht-kop);
  line-height: .8;           /* basislijn op de onderkant van de regel: cijfers hebben geen staarten */
  letter-spacing: -.01em;
  white-space: nowrap;
}
.kvk::after {
  content: "";
  display: inline-block;
  width: .2em; height: .2em;
  margin-left: .01em;
  background: var(--amber);
  rotate: -8deg;
}
.register .waarde { display: block; }
@media (min-width: 768px) {
  .rij-kvk { display: block; padding-bottom: var(--s-5); }
}

/* ------------------------------------------------------------------ wat we maken */

.proza { max-width: var(--maat); }
.proza p { text-wrap: pretty; }
.proza p + p { margin-top: var(--s-3); }
.lead { font-size: var(--t-lead); line-height: var(--r-lead); letter-spacing: var(--spatie-lead); }
.proza .lead + p { margin-top: var(--s-4); }
.proza .uit { margin-top: var(--s-5); }

/* De enige knop: naar het product */
.knop {
  display: inline-block;
  padding: 10px 18px 11px;
  border-radius: var(--radius-klein);
  background: var(--bes);
  color: var(--kalk);
  font-weight: var(--gewicht-kop);
  text-decoration: none;
}
.knop:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* Stand per platform */
.rij-stand { margin-top: var(--s-6); padding-top: var(--s-4); }
.gecontroleerd { margin-top: 2px; font-size: var(--t-klein); line-height: var(--r-klein); color: var(--steen); text-wrap: pretty; }

.stand { width: 100%; margin-top: var(--s-3); border-collapse: collapse; }
.stand tbody, .stand tr, .stand th, .stand td { display: block; }
.stand tr { padding-block: var(--s-3); border-top: var(--haarlijn) solid var(--lijn); }
.stand th { font-weight: var(--gewicht-kop); text-align: left; }
.stand td { text-wrap: pretty; }

@media (min-width: 768px) {
  /* De tabel volgt het rijraster: platform in de labelkolom, stand in de waardekolom. Kop en datum erboven. */
  .rij-stand { display: block; margin-top: var(--s-7); }
  .stand-kop { padding: 0 0 var(--s-4); }
  .stand { display: table; margin-top: 0; }
  .stand tbody { display: table-row-group; }
  .stand tr { display: table-row; border: 0; }
  .stand th, .stand td { display: table-cell; vertical-align: baseline; padding-block: var(--s-3); border-top: var(--haarlijn) solid var(--lijn); }
  .stand tr:first-child th, .stand tr:first-child td { border-top: 0; padding-top: 0; }
  .stand th { width: calc(var(--kol-rij) + var(--rij-tussen)); padding-right: var(--rij-tussen); white-space: nowrap; }
}


/* ------------------------------------------------------------------ hoe we werken */

.register dd { max-width: var(--maat); }

/* ------------------------------------------------------------------ slot: contact, in Bes */

.slot { margin-top: var(--lucht); background: var(--bes); color: var(--kalk); }
.slot a { color: var(--kalk); }
.slot-vel { padding-block: var(--s-7) var(--s-8); }
.slot-tekst { margin-top: var(--s-4); }
.groot { font-size: clamp(28px, 16px + 2.6vw, 52px); font-weight: var(--gewicht-kop); line-height: var(--r-kop); letter-spacing: var(--spatie-kop); }
.groot > span { display: block; text-wrap: balance; }
.groot a { text-decoration-thickness: 2px; text-underline-offset: .12em; }
.groot a:hover { text-decoration-thickness: 3px; }
.klein { margin-top: var(--s-5); max-width: 40em; text-wrap: pretty; }
.slot :focus-visible { outline-color: var(--amber); }

@media (min-width: 768px) {
  .slot-vel { padding-block: var(--s-8) var(--s-9); }
  .slot-tekst { margin-top: var(--s-5); }
}
@media (min-width: 1024px) {
  .slot-vel { align-items: first baseline; }
  .slot-tekst { margin-top: 0; }
}

/* ------------------------------------------------------------------ voet */

.voet { color: var(--steen); font-size: var(--t-label); line-height: var(--r-label); }
.voet-rij { display: grid; row-gap: var(--s-2); padding-block: var(--s-5) var(--s-6); border-top: var(--haarlijn) solid var(--lijn); }
.home .voet-rij { border-top: 0; }
.tekstpagina .voet, .niet-gevonden .voet { margin-top: var(--lucht); }
.voet-merk { display: flex; align-items: center; gap: var(--s-2); color: var(--inkt); }
.merk { width: 18px; height: 18px; flex: none; }
.voet-links { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
.voet-links a { display: inline-block; padding-block: 2px; } /* 25 px hoog */

@media (max-width: 767.98px) {
  .voet-links { margin-top: var(--s-1); }
}
@media (min-width: 768px) {
  .voet-rij { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-5); align-items: center; }
  .voet-merk { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .voet-rij { grid-template-columns: var(--kol-label) minmax(0, 1fr) auto; column-gap: var(--kol-tussen); }
  .voet-merk { grid-column: auto; }
}

/* ------------------------------------------------------------------ tekstpagina's: privacy en 404 */

.bijgewerkt { margin-top: var(--s-3); font-size: var(--t-label); line-height: var(--r-label); color: var(--steen); }
.tekstpagina .sub { margin-top: var(--s-5); }
.tekstdeel { margin-top: var(--s-7); border-top: var(--haarlijn) solid var(--lijn); }
.blok { padding-block: var(--s-4); }
.blok:first-child { border-top: 0; padding-top: var(--s-5); }
.blok h2 { margin-bottom: var(--s-2); font-size: var(--t-tekst); line-height: var(--r-tekst); text-wrap: balance; }

@media (min-width: 768px) {
  .blok h2 { margin-bottom: 0; padding-right: var(--s-2); }
  .blok:first-child { padding-top: var(--s-6); }
}
@media (min-width: 1024px) {
  .tekstdeel { margin-top: var(--s-8); }
  .blok { grid-template-columns: var(--kol-label) minmax(0, 1fr); column-gap: var(--kol-tussen); padding-block: var(--s-4) var(--s-5); }
  .blok:first-child { padding-top: var(--s-7); }
}

.verder { margin-top: var(--s-5); display: grid; row-gap: var(--s-2); font-weight: var(--gewicht-kop); }
.pk { margin-top: var(--s-6); max-width: var(--maat); }

/* ------------------------------------------------------------------ minder beweging */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ afdrukken: één A4 met logo, gegevens en datum */

@page { size: A4 portrait; margin: 18mm 18mm 16mm; }
@media print {
  :root {
    --marge: 0px; --kol-rij: 44mm; --rij-tussen: 4mm; --paneel: 0px;
    --t-kop: 15pt; --t-sectie: 12pt; --t-lead: 10pt; --t-tekst: 9.5pt; --t-label: 9pt; --t-klein: 8pt; --logo-h: 7mm;
    --lucht: 7mm;
  }
  html, body { background: #fff; }
  body { display: block; min-height: 0; }
  .skip, .taal, .home .sub, #peppolkit, #hoe-we-werken, .slot, .voet-links, .verder, .pk { display: none !important; }
  .vel { max-width: none; padding: 0; }
  .kop-vel { display: block; padding: 0; }
  .opening, .deel, .blok { display: block; }
  .opening { padding-top: 7mm; }
  .tekstpagina .opening { padding-top: 5mm; }
  h1 { max-width: none; }
  .opening + .deel { margin-top: 6mm; padding-top: 3mm; border-top-color: var(--lijn); }
  .deel > h2 { margin-bottom: 2mm; }
  .paneel { border-radius: 0; background: none; }
  .register.paneel { padding: 0; }
  .rij { display: grid; grid-template-columns: var(--kol-rij) minmax(0, 1fr); column-gap: var(--rij-tussen); align-items: baseline; padding-block: 2mm; break-inside: avoid; }
  dt, .rij > .label { margin: 0; }
  .rij-kvk { display: block; padding-block: 1mm 3mm; }
  .rij-kvk dt { margin-bottom: 1mm; }
  .kvk { font-size: 34pt; }
  .kvk::after, .c-bes, .c-amber { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; }
  a.waarde { text-decoration: none; }
  .print { display: block; margin-top: 6mm; padding-top: 2.5mm; border-top: var(--haarlijn) solid var(--lijn); font-size: 8pt; color: var(--steen); }
  .voet { margin-top: 8mm; }
  .home .voet { display: none; }
  .voet-rij { display: block; padding: 2.5mm 0 0; }
  .merk { width: 3.6mm; height: 3.6mm; }
  .tekstpagina .voet, .niet-gevonden .voet { margin-top: 8mm; }
  .tekstpagina { --t-tekst: 9pt; --r-tekst: 1.45; }
  .tekstpagina .sub { margin-top: 3mm; max-width: none; font-size: 9.5pt; }
  .tekstdeel { margin-top: 5mm; }
  .blok { padding-block: 2mm; border-top: var(--haarlijn) solid var(--lijn); break-inside: avoid; }
  .blok:first-child { border-top: 0; padding-top: 2mm; }
  .blok h2 { margin-bottom: 1mm; }
  .blok .proza { padding: 0; border: 0; }
  .proza { max-width: none; }
  .tekstpagina .proza p + p { margin-top: 1.6mm; }
}

/* Voet: de link naar de huidige pagina */
.voet-links [aria-current] { color: var(--inkt); text-decoration: none; }