/* Flxprintz — familie van MeetYves: zwart, gebroken wit, één accent (magenta). Anton draagt, Inter leest.
   Eén stempel per pagina, met de ruwe rand van het filter #inkt (feTurbulence), zoals op meetyve.nl.
   Contrast op zwart: wit 17,4:1, grijs 9,4:1, magenta 3,5:1 (alleen grote tekst, knoppen en randen),
   wit op magenta 4,8:1. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/anton-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  --zwart: #0B0B0C;
  --wit: #F2EEE6;
  --grijs: #B9B3A8;
  --vlak: #151517;
  --lijn: rgba(242, 238, 230, 0.22);
  --magenta: #E6007E;
  --fout: #FF6B5F;
  --rand: max(16px, 5vw);
  --breed: 1240px;
  --balk: 64px;
  --anton: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--balk) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--zwart);
  color: var(--wit);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.filters { position: absolute; width: 0; height: 0; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); }
.label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grijs); }

/* ---------- de balk: blijft bovenaan staan (regio-sites-standaard, 10 nov) ---------- */
.balk {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--zwart);
  border-bottom: 1px solid var(--lijn);
}
.balk-regel { display: flex; align-items: center; gap: 16px; min-height: var(--balk); }
.balk-merk { font-family: var(--anton); font-size: 1.6rem; line-height: 1; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap; }
.balk-menu { display: flex; gap: 4px; margin-left: auto; }
.balk-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--grijs); }
.balk-menu a:hover { color: var(--wit); }
.balk-actie { margin-left: 8px; }
.menu-mobiel { display: none; position: relative; }
.menu-mobiel summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--lijn); font-weight: 600; font-size: 0.95rem;
}
.menu-mobiel summary::-webkit-details-marker { display: none; }
.menu-mobiel ul {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 14rem; padding: 8px 0;
  background: var(--zwart); border: 1px solid var(--lijn);
}
.menu-mobiel a { display: flex; align-items: center; min-height: 48px; padding: 0 18px; text-decoration: none; font-weight: 600; }
.menu-mobiel a:hover { background: var(--vlak); }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  font: 700 1rem/1.1 var(--sans);
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--magenta);
  background: var(--magenta); color: var(--wit);
}
.knop:hover { background: #C8006D; border-color: #C8006D; }
.knop.licht { background: transparent; color: var(--wit); border-color: var(--wit); }
.knop.licht:hover { background: var(--wit); color: var(--zwart); }
.knop.klein { min-height: 44px; padding: 0 16px; font-size: 0.95rem; }
.knop[disabled] { opacity: 0.55; cursor: wait; }

/* ---------- held ---------- */
.held { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 7vw, 96px); }
.korrel {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
.held-binnen { container-type: inline-size; }
.woordmerk {
  font-family: var(--anton);
  font-weight: 400;
  /* altijd compleet: vult de breedte binnen de randen, nooit erbuiten. Deler 3,57 = breedte van "Flxprintz" in em
     (3,5585, gemeten in Chromium met letter-spacing -0,012em) + kleine marge; test/browser.test.mjs meet het na op 320 t/m 1440 px. */
  font-size: calc(100cqi / 3.57);
  /* 1,12: het kader omvat de inkt van Anton (stok van de l ca. 0,9em boven de basislijn, staart van de p ca. 0,12em
     eronder). Bij 0,84 liep de l door de afzenderregel erboven en raakte de p de kop eronder. */
  line-height: 1.12;
  letter-spacing: -0.012em;
  white-space: nowrap;
  width: max-content;
  max-width: none;
}
.held-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; margin-top: clamp(20px, 3vw, 40px); }
.held h1 {
  font-family: var(--anton); font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1; letter-spacing: 0.004em;
  text-wrap: balance;
}
.held h1::after { content: ''; display: block; width: 3.2rem; height: 5px; margin-top: 1rem; background: var(--magenta); }
.onderregel { margin-top: 1.1rem; max-width: 34rem; font-size: 1.2rem; color: var(--grijs); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem; }
.stempel-plek { display: flex; justify-content: center; align-items: center; padding-bottom: 1rem; }
/* hoofdbeeld als A/B (15-11): rechts naast de kop, onder het woordmerk (dat blijft op effen zwart, ook op 320 px).
   Het stempel staat op het beeld, rechtsonder (bij A op de papierstapel, bij B op de stellingen; niet over de mensen), met een zwarte ondergrond zodat het leesbaar blijft. */
.held-beeld { min-width: 0; }
.beeld.hero { position: relative; margin: 0; }
.beeld.hero img { display: block; width: 100%; height: auto; aspect-ratio: 1344 / 752; object-fit: cover; background: #1A1A1C; }
.held .stempel-plek { position: absolute; right: 0.9rem; bottom: 0.9rem; padding: 0; }
.held .stempel { background: var(--zwart); }
.held .stempel-groot { font-size: clamp(1.6rem, 6.5vw, 2.9rem); }
.held .stempel-klein { font-size: clamp(0.8rem, 2.6vw, 1rem); }
.held .stempel { padding: 0.35rem 0.7rem 0.45rem; border-width: 3px; }
.ai-melding { margin-top: 8px; font-size: 0.82rem; color: var(--grijs); }

/* ---------- het stempel (één per pagina) ---------- */
.stempel {
  display: inline-grid; justify-items: center; gap: 0.25rem;
  padding: 0.6rem 1.1rem 0.75rem;
  color: var(--magenta);
  border: 4px solid currentColor;
  outline: 2px solid currentColor; outline-offset: 4px;
  text-align: center;
  transform: rotate(-7deg); transform-origin: 30% 60%;
  filter: url(#inkt);
  animation: stempel 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.35s both;
}
.stempel-groot { font-family: var(--anton); font-size: clamp(3rem, 14vw, 5rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.stempel-klein { font-family: var(--sans); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
@keyframes stempel {
  0% { opacity: 0; transform: rotate(-2deg) scale(1.7); }
  70% { opacity: 1; transform: rotate(-7.5deg) scale(0.97); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .stempel { animation: none; } }

/* ---------- statementregel ---------- */
.statement { border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: clamp(36px, 6vw, 80px) 0; }
.statement p { font-family: var(--anton); font-size: clamp(2.2rem, 7.5vw, 5.6rem); line-height: 1.02; text-wrap: balance; }
.statement .accent { display: block; color: var(--magenta); }

/* ---------- blokken ---------- */
.blok { padding: clamp(48px, 8vw, 112px) 0; }
.blok + .blok { border-top: 1px solid var(--lijn); }
.blok h2 { margin-top: 0.6rem; font-family: var(--anton); font-weight: 400; font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.02; }
.blok-intro { margin-top: 1rem; max-width: 40rem; color: var(--grijs); font-size: 1.125rem; }
.punten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); margin-top: clamp(28px, 4vw, 48px); counter-reset: punt; }
.punt { position: relative; padding: 26px 0 0; border-top: 2px solid var(--wit); }
.punt h3 { font-family: var(--anton); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.05; }
.punt p { margin-top: 0.6rem; color: var(--grijs); max-width: 28rem; }
.punt::before {
  counter-increment: punt; content: '0' counter(punt);
  position: absolute; top: -2px; right: 0;
  padding: 6px 0 0 10px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; color: var(--grijs);
}
.blok-opdrachtgever .punt { border-top-color: var(--magenta); }

/* paskruis: het merkteken van de drukker, alleen als versiering */
.paskruis { position: relative; display: inline-block; width: 22px; height: 22px; border: 1.5px solid var(--grijs); border-radius: 50%; vertical-align: -4px; margin-right: 10px; }
.paskruis::before, .paskruis::after { content: ''; position: absolute; background: var(--grijs); }
.paskruis::before { left: 50%; top: -6px; bottom: -6px; width: 1.5px; transform: translateX(-50%); }
.paskruis::after { top: 50%; left: -6px; right: -6px; height: 1.5px; transform: translateY(-50%); }

/* ---------- hoe het werkt: vier stappen op één lijn ---------- */
.stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(28px, 4vw, 48px); counter-reset: stap; }
.stap { position: relative; padding: 0 clamp(28px, 3.5vw, 48px) 0 0; }
.stap::before {
  counter-increment: stap; content: counter(stap);
  display: grid; place-items: center; width: 56px; height: 56px;
  border: 2px solid var(--wit); border-radius: 50%;
  font-family: var(--anton); font-size: 1.6rem; line-height: 1;
}
.stap:last-child::before { background: var(--magenta); border-color: var(--magenta); }
.stap h3 { margin-top: 1rem; font-family: var(--anton); font-weight: 400; font-size: 1.6rem; line-height: 1.05; }
.pijl { position: absolute; top: 14px; right: 10px; width: clamp(16px, 2vw, 26px); height: 28px; color: var(--magenta); }
.stap:last-child .pijl { display: none; }

/* ---------- aanmelden ---------- */
.blok-aanmelden { background: var(--vlak); }
.aanmelden-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.formulier { display: grid; gap: 20px; }
.keuze { border: 0; padding: 0; margin: 0; min-width: 0; }
.keuze legend { padding: 0; font-weight: 600; margin-bottom: 10px; }
.keuze-opties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.keuze-optie { position: relative; }
.keuze-optie input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.keuze-optie span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 10px 14px;
  border: 2px solid var(--lijn); font-weight: 700;
}
.keuze-optie input:checked + span { border-color: var(--magenta); background: var(--magenta); color: var(--wit); }
.keuze-optie input:focus-visible + span { outline: 3px solid var(--wit); outline-offset: 3px; }
.veld { display: grid; gap: 6px; }
.veld label { font-weight: 600; }
.veld .hulp { font-weight: 400; color: var(--grijs); }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: 400 1rem/1.4 var(--sans); color: var(--wit);
  background: var(--zwart); border: 1.5px solid rgba(242, 238, 230, 0.45); border-radius: 0;
}
.veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--wit) 50%), linear-gradient(135deg, var(--wit) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.veld textarea { min-height: 120px; resize: vertical; }
.veld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vinkje { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.vinkje input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--magenta); }
.fout { color: var(--fout); font-size: 0.95rem; font-weight: 600; }
.fout:empty { display: none; }
.honing { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-plek { min-height: 65px; }
.klaar { padding: 24px; border: 2px solid var(--magenta); font-size: 1.15rem; font-weight: 600; }
.klaar:focus { outline: none; }

/* ---------- tekstpagina (privacy, 404) ---------- */
.tekstpagina { padding: clamp(40px, 7vw, 96px) 0; }
.tekstpagina h1 { font-family: var(--anton); font-weight: 400; font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1; }
.tekst { max-width: 44rem; }
.tekst h2 { margin-top: 2.4rem; font-family: var(--anton); font-weight: 400; font-size: 1.8rem; line-height: 1.1; }
.tekst p, .tekst ul { margin-top: 0.9rem; }
.tekst ul { padding-left: 1.2rem; list-style: square; }
.tekst li + li { margin-top: 0.35rem; }
.tekst a { text-underline-offset: 3px; }
.tekst .versie { margin-top: 2.4rem; color: var(--grijs); font-size: 0.95rem; }
.misdruk { display: grid; gap: 28px; justify-items: start; }
.misdruk .stempel-plek { justify-content: flex-start; padding: 1.5rem 0 0.5rem 0.5rem; }
/* /bevestig en /afmelden (aanvulling 1): één blok per staat, alleen het actuele zichtbaar; het stempel volgt de staat */
.optin-blok { display: grid; gap: 22px; justify-items: start; }
.optin-blok[hidden], .stempel[hidden] { display: none; }
.optin-blok h1:focus { outline: none; }
.optin-blok form { margin: 0; }

/* ---------- voet ---------- */
.voet { border-top: 1px solid var(--lijn); padding: 36px 0 48px; color: var(--grijs); font-size: 0.95rem; }
.voet-regel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; }
.voet-merk { font-family: var(--anton); font-size: 1.6rem; color: var(--wit); line-height: 1; }
.voet ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.voet a { display: inline-flex; align-items: center; min-height: 44px; }
.voet .afzender { margin-top: 14px; max-width: 46rem; }

/* ---------- smal ---------- */
@media (max-width: 900px) {
  .held-raster, .aanmelden-raster { grid-template-columns: minmax(0, 1fr); }
  .stempel-plek { justify-content: flex-start; padding: 1rem 0 0 0.5rem; }
  .held .stempel-plek { padding: 0; right: 0.6rem; bottom: 0.6rem; }
  .punten { grid-template-columns: minmax(0, 1fr); }
  .stappen { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stap { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 0 0 44px; }
  .stap h3 { margin-top: 0; }
  .pijl { top: auto; right: auto; left: 15px; bottom: 6px; width: 26px; height: 28px; transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .balk-menu { display: none; }
  .menu-mobiel { display: block; }
  .balk-actie { margin-left: auto; }
  .veld-paar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .balk-regel { gap: 10px; }
  .balk-merk { font-size: 1.35rem; }
  .knop.klein { padding: 0 12px; }
  .menu-mobiel summary { padding: 0 10px; }
  .keuze-opties { grid-template-columns: minmax(0, 1fr); }
}
.privacy-stempel { justify-content: flex-start; padding: 2rem 0 0.5rem 0.5rem; }
.privacy-stempel .stempel-groot { font-size: clamp(2.6rem, 10vw, 3.6rem); }
/* afzender (aanvulling 14-11): klein boven het woordmerk, goed zichtbaar in de voet */
.afzender-held { margin-bottom: 14px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; color: var(--grijs); }
.afzender-held a, .voet .afzender a { color: var(--wit); text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.voet .afzender { margin-top: 18px; font-size: 1.05rem; font-weight: 600; color: var(--wit); }
.voet .afzender a { display: inline; min-height: 0; }
.stap p { margin-top: 0.4rem; color: var(--grijs); max-width: 16rem; }
@media (max-width: 900px) { .stap p { grid-column: 2; margin-top: 0.2rem; } }