:root {
  --korrel: url("beeld/korrel.png");
  --bg: #e2e2df;
  --ink: #141414;
  --ink-soft: #3d3d3a;
  --rule: #a9a9a5;
  --voet: 56px;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-soft); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
.merk .logo:focus-visible { outline-offset: 6px; }
img { display: block; }
@keyframes verschijn { from { opacity: 0; } to { opacity: 1; } }
.rechts, .voet { animation: verschijn 0.8s ease-out 0.15s both; }
@keyframes korrel-in { from { opacity: 0; } to { opacity: 0.75; } }
body::before { animation: korrel-in 0.8s ease-out 0.15s both; }
.links > a, .merk .logo { animation: verschijn 0.7s ease-out both; }
.links > a { animation-delay: 0.9s; }
.merk:nth-child(1) .logo { animation-delay: 1.12s; }
.merk:nth-child(2) .logo { animation-delay: 1.34s; }
.merk:nth-child(3) .logo { animation-delay: 1.56s; }
@media (prefers-reduced-motion: reduce) { .rechts, .voet, body::before, .links > a, .merk .logo { animation: none; } }
body::before { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; background: var(--korrel); background-size: 200px 200px; opacity: 0.75; mix-blend-mode: soft-light; }

/* twee panelen, footer onderaan */
.pagina {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  height: 100dvh;
  padding-bottom: var(--voet);
}
.links {
  border-right: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
}
.vloeistof { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; display: block; }
.vloeistof-logos .links img, .vloeistof-logos .merk .logo img { opacity: 0 !important; }
.vloeistof-logos .merk .logo .kleur { display: block; }
@media (prefers-reduced-motion: reduce) { .vloeistof { display: none; } }
.links img { width: 405px; max-width: 70%; height: auto; }
.rechts { overflow-y: auto; }

/* homepage: logolijst */
.merken {
  list-style: none; margin: auto 0; padding: 48px 40px 48px 80px;
  display: flex; flex-direction: column; gap: 96px;
}
.rechts--home { display: flex; flex-direction: column; }
.merk { display: flex; align-items: flex-start; gap: 40px; }
.merk .logo { position: relative; flex: 0 0 210px; height: 80px; display: flex; align-items: center; transition: transform 0.25s ease; transform-origin: left center; }
.merk .logo img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: auto; }
.merk .logo .kleur { opacity: 1; transition: opacity 0.15s ease; }
.merk .logo .grijs { opacity: 0; transition: opacity 0.15s ease; }
.merk--regelwerk .logo img { height: 46px; }
.merk--jscs .logo img { height: 80px; }
.merk--circle .logo img { height: 56px; }
.merk .info { max-width: 420px; padding-top: 2px; font-size: 15px; line-height: 1.5; }
.merk .info p { margin: 0 0 14px; text-wrap: pretty; }
.merk .info a { position: relative; z-index: 60; display: inline-block; padding: 7px 18px; border-radius: 999px; line-height: 1.3; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 1px 2px rgba(20,20,20,0.05), inset 0 1px 0 rgba(255,255,255,0.5); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); transition: box-shadow 0.15s ease, background-color 0.15s ease; }
.merk .info a:hover { background: rgba(255,255,255,0.32); border-color: rgba(255,255,255,0.95); color: var(--ink); box-shadow: 0 6px 20px rgba(20,20,20,0.10), inset 0 1px 0 rgba(255,255,255,0.8); }
.merk .info a:active { background: rgba(255,255,255,0.14); box-shadow: 0 2px 8px rgba(20,20,20,0.08), inset 0 1px 0 rgba(255,255,255,0.6); }
@media (hover: hover) and (min-width: 901px) {
  .merk .logo .kleur { opacity: 0; }
  .merk .logo .grijs { opacity: 1; }
  .merk:hover .logo .kleur { opacity: 1; }
  .merk:hover .logo .grijs { opacity: 0; }
  .merk:hover .logo { transform: scale(1.04); }
  .merk .info { visibility: hidden; }
  .merk:hover .info { visibility: visible; }
}

/* voorwaarden */
.tekst { padding: 56px 40px 80px 80px; max-width: 760px; }
.tekst h1 { font-size: 34px; line-height: 1.25; font-weight: 400; margin: 0 0 32px; }
.tekst .gegevens { margin: 0 0 48px; line-height: 1.7; }
.tekst h2 { font-size: 16px; font-weight: 500; margin: 36px 0 6px; }
.tekst p { margin: 0 0 16px; text-wrap: pretty; }
.tekst a { text-decoration: underline; text-underline-offset: 3px; }
.tekst .terug { display: inline-block; margin-top: 32px; text-decoration: none; }
.pagina--tekst .rechts { margin-bottom: calc(-1 * var(--voet)); }
.pagina--tekst .tekst { padding-bottom: calc(var(--voet) + 48px); }
.printknop { position: fixed; right: 24px; bottom: calc(var(--voet) + 20px); z-index: 60; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; padding: 8px 18px; border-radius: 999px; line-height: 1.3; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 1px 2px rgba(20,20,20,0.05), inset 0 1px 0 rgba(255,255,255,0.5); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); transition: box-shadow 0.15s ease, background-color 0.15s ease; }
.printknop:hover { background: rgba(255,255,255,0.32); box-shadow: 0 6px 20px rgba(20,20,20,0.10), inset 0 1px 0 rgba(255,255,255,0.8); }
.printknop:active { background: rgba(255,255,255,0.14); }
.printknop:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* footer */
.voet {
  position: fixed; left: 0; right: 0; bottom: 0; min-height: var(--voet); z-index: 60;
  border-top: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 -1px 0 rgba(20,20,20,0.06);
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px; font-size: 16px; color: var(--ink);
}
.voet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.voet li + li::before { content: "•"; margin-right: 12px; font-size: 11px; vertical-align: 2px; color: var(--ink-soft); }
@media (max-width: 1280px) { .voet .adres { display: none; } }
.voet a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1280px) and (min-width: 901px) {
  .merken { padding: 40px 28px 40px 44px; gap: 96px; }
  .merk { gap: 24px; }
  .merk .logo { flex: 0 0 140px; height: 56px; transform-origin: left center; }
  .merk--regelwerk .logo img { height: 32px; }
  .merk--jscs .logo img { height: 56px; }
  .merk--circle .logo img { height: 40px; }
  .merk .info { max-width: none; font-size: 14px; padding-top: 0; }
}
@media (max-width: 1280px) and (min-width: 901px) and (max-height: 720px) {
  .merken { gap: 48px; }
}
@media (min-width: 901px) and (max-height: 640px) {
  .merken { gap: 48px; }
}
@media (max-width: 900px) {
  .pagina { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; min-height: 100dvh; padding-bottom: 0; }
  .links { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.6); padding: 28px 24px; position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.18); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 1px 0 rgba(20,20,20,0.06); }
  .links img { width: 170px; max-width: none; }
  .rechts { overflow: visible; }
  .merken { margin: 0; padding: 0 24px; gap: 0; }
  .merk { flex-direction: column; gap: 24px; padding: 64px 0; border-bottom: 1px solid var(--rule); align-items: center; text-align: center; }
  .merk:last-child { border-bottom: 0; padding-bottom: 88px; }
  .merk .logo { flex-basis: auto; height: auto; min-height: 44px; width: 100%; justify-content: center; }
  .merk .logo img { position: static; transform: none; }
  .merk .logo .grijs { display: none; }
  .merk--regelwerk .logo img { height: 32px; }
  .merk--jscs .logo img { height: 56px; }
  .merk--circle .logo img { height: 40px; }
  .merk .info { max-width: none; font-size: 16px; line-height: 1.6; }
  .merk .info p { margin-bottom: 24px; text-align: left; }
  .merk .info a { padding: 9px 18px; }
  .tekst { padding: 32px 24px 56px; }
  .tekst h1 { font-size: 28px; margin-bottom: 24px; }
  .tekst .gegevens { margin-bottom: 36px; }
  .tekst .terug { display: block; text-align: center; }
  .printknop { position: static; display: block; margin: 24px auto 0; }
  .voet { position: static; z-index: auto; padding: 32px 24px 40px; font-size: 14px; line-height: 1.7; }
  .voet ul { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .voet li + li::before { content: none; margin: 0; }
  .voet .adres { display: block; }
  .voet a { text-decoration: underline; text-underline-offset: 3px; }
}

@page { size: A4 portrait; margin: 18mm 20mm; }
@media print {
  html, body { height: auto; }
  body { background: #fff; color: #111; font-size: 10.5pt; line-height: 1.45; }
  .rechts, .voet, .links > a, .merk .logo { animation: none; }
  body::before { display: none; }
  .pagina { display: block; height: auto; padding: 0; }
  .links { border: 0; justify-content: flex-start; padding: 0 0 24pt; background: none; backdrop-filter: none; box-shadow: none; }
  .vloeistof { display: none; }
  .links img { width: 90px; }
  .rechts { overflow: visible; height: auto; margin: 0; }
  .tekst { padding: 0; max-width: none; }
  .tekst h1 { font-size: 18pt; margin-bottom: 10pt; }
  .tekst .gegevens { margin-bottom: 16pt; font-size: 9.5pt; line-height: 1.4; }
  .tekst h2 { font-size: 10.5pt; margin: 10pt 0 2pt; break-after: avoid; }
  .tekst p { orphans: 3; widows: 3; margin-bottom: 6pt; }
  .tekst .terug { display: none; }
  .printknop { display: none; }
  .voet { position: static; min-height: 0; padding: 16pt 0 0; margin-top: 16pt; border-top: 1px solid #000; background: none; backdrop-filter: none; box-shadow: none; justify-content: flex-start; font-size: 8.5pt; }
  .voet ul { justify-content: flex-start; }
  .voet .adres { display: block; }
  a { color: #000; text-decoration: none; }
}