@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

/* De ledenpagina en de inlogpagina, in dezelfde huisstijl als canns.nl.
   Eén vaste look, geen donkere variant: de site is er bewust één wereld.
   Cijfers altijd tabulair, want daar wordt hier in gelezen. */

:root {
  --inkt: #2d1724;
  --papier: #fff8f5;
  --wit: #ffffff;
  --roze: #df527d;
  --lila: #d9c9ff;
  --lijn: rgba(45, 23, 36, 0.18);
  --lijn-zacht: rgba(45, 23, 36, 0.09);
  --zacht: #78666f;
  --op: #1f7a4d;
  --neer: #c0342f;
  --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.band { max-width: 940px; margin: 0 auto; padding: 0 16px; }

/* kop */
header.kop {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--inkt);
  padding: 26px 0 14px;
  margin-bottom: 34px;
}
.merk { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.08em; }
.merk a { color: inherit; text-decoration: none; }
.merk a::after { content: "°"; color: var(--roze); }
.ondertitel {
  margin: 0;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--roze);
}

h1 {
  font-size: clamp(30px, 6vw, 48px);
  line-height: 1.02; font-weight: 800; letter-spacing: -0.045em;
  margin: 0 0 18px; max-width: 20ch; text-wrap: balance;
}
h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 800; letter-spacing: -0.035em;
  margin: 46px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--inkt);
}
.lead { font-size: 19px; line-height: 1.55; max-width: 60ch; margin: 0 0 26px; }
p { max-width: 64ch; }

/* cijfers */
.cijfer, td.num, .groot {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.groot { font-size: 42px; line-height: 1; letter-spacing: -0.045em; font-weight: 800; }

/* tabellen */
table {
  width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: 15px;
  background: var(--wit);
}
thead th {
  text-align: left; font: 500 10px/1 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--papier);
  background: var(--inkt);
  padding: 12px 10px; white-space: nowrap;
}
tbody td { padding: 13px 10px; border-bottom: 1px solid var(--lijn-zacht); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fdf4f7; }
td.num { text-align: right; white-space: nowrap; }
.op { color: var(--op); font-weight: 700; }
.neer { color: var(--neer); font-weight: 700; }
.naam { font-weight: 600; letter-spacing: -0.01em; }
.naam a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--lijn); }
.naam a:hover { border-bottom-color: var(--roze); color: var(--roze); }
.cat {
  display: block; font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--zacht); margin-top: 4px;
}

/* knoppen, met de harde slagschaduw van de site */
.knop {
  display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 700;
  background: var(--inkt); color: var(--papier); padding: 14px 24px;
  text-decoration: none; border: 1px solid var(--inkt); cursor: pointer;
  box-shadow: 6px 6px 0 var(--roze);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.knop:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--roze); }
.knop:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--roze); }
.knop.licht { background: var(--wit); color: var(--inkt); box-shadow: 6px 6px 0 var(--lila); }

/* gegroepeerde stijgers: per niche een kop met hoeveel er in beweegt. Zonder
   die groepering vult één hoek die hard beweegt de hele lijst met varianten
   van hetzelfde product, en zie je de rest van de markt niet. */
.groep {
  margin: 0 0 22px; border: 1px solid var(--inkt); background: var(--wit);
  box-shadow: 8px 8px 0 var(--lijn-zacht);
}
.groep h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin: 0; padding: 16px 16px 12px;
  font-size: 19px; font-weight: 800; letter-spacing: -0.03em;
  border-bottom: 1px solid var(--lijn-zacht);
}
.groep .meta {
  font: 400 11px/1.4 var(--mono); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--zacht);
}
.groep table { margin: 0; }
/* De kolomkoppen blijven staan, anders weet je niet wat de getallen
   betekenen. Wel ingetogen, want ze herhalen zich per groep. */
.groep thead th {
  background: transparent; color: var(--zacht);
  border-bottom: 1px solid var(--lijn-zacht); padding: 9px 10px;
}
.groep tbody tr:first-child td { border-top: 0; }

.voet {
  margin: 60px 0 40px; padding-top: 16px; border-top: 1px solid var(--lijn);
  font-size: 12.5px; color: var(--zacht);
}
.voet a { color: var(--zacht); }
.voet a:hover { color: var(--roze); }

.noot { font-size: 13.5px; color: var(--zacht); max-width: 64ch; }

:focus-visible { outline: 2px solid var(--roze); outline-offset: 2px; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .verbergKlein { display: none; }
  table { font-size: 14.5px; }
  thead th, tbody td { padding-left: 12px; padding-right: 12px; }
  .groep { box-shadow: 5px 5px 0 var(--lijn-zacht); }
}

@media (prefers-reduced-motion: reduce) {
  .knop { transition: none; }
}