/* De opmaak van de voorpagina. Hij stond in de pagina zelf, en dat kon zolang
   er een pagina was. Nu zijn het er twee -- Nederlands op / en Engels op /en/ --
   en twee kopieen van vierhonderd regels lopen uit elkaar zonder dat iemand het
   merkt. Beide pagina's halen hem hiervandaan. */
/* ---------------------------------------------------------------------------
   Troefmasters, de voorpagina.

   Eén bestand, geen build: dit gaat als statische map naar shared hosting en
   moet daar los kunnen staan van de app.

   Eén accent, en dat is het amber uit app/assets/css/main.css. Het rood van de
   kaarttekens hoort bij de kaarten zelf en niet bij de bediening: in de app is
   elke knop waar je op hoort te drukken amber, en een rode knop hier zou een
   tweede systeem zijn.

   Eén thema, en dat is donker. De app kent geen lichte stand (zie
   app/assets/css/main.css), en een voorpagina die wel omslaat laat je op een
   licht scherm in een andere app terechtkomen dan je verwacht.

   De pagina gaat over napraten. Een potje spelen kan overal; dat je de partij
   daarna terugkrijgt is wat deze app doet. Daarom staat dat in het midden en
   niet onderaan bij de overige functies.
--------------------------------------------------------------------------- */

/* De twee lettertypes staan in deze map en komen niet van Google. Een verzoek
   naar fonts.googleapis.com is het enige deel van deze pagina dat van een
   ander domein moet komen, en dat mislukte in de ene tab wel en in de andere
   niet -- dan zie je de pagina in een systeemletter. Beide families staan
   onder de SIL Open Font License, dus meeleveren mag.

   De unicode-bereiken komen van Google's eigen css2: zo haalt een browser het
   tweede bestand alleen op als er echt een teken uit dat bereik op de pagina
   staat. De kaartsymbolen zitten in geen van beide en vallen terug op de
   systeemletter; dat ziet er goed uit en scheelt een derde bestand. */
/* Montserrat alleen voor het woordmerk, en alleen in de dikte die het merk
   heeft. Ook OFL. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/lettertype/montserrat-800-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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/lettertype/schibsted-grotesk-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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/lettertype/schibsted-grotesk-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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/lettertype/plex-mono-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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/lettertype/plex-mono-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;
}

:root {
  color-scheme: dark;

  --grond: #080c0b;
  --grond-hoog: #101917;
  --kleed: #0b1412;
  --lijn: #1d2b27;
  --lijn-hard: #2a3b35;
  --ink: #f4f8f6;
  --ink-zacht: #a3b3ad;
  /* Onder dit grijs haalt tekst op deze grond de 4,5:1 niet meer. */
  --ink-dof: #8d9d97;
  --ink-lijn: #6d7f79;
  /* Rechtstreeks uit het designsysteem van de app. */
  --accent: #e8b04b;
  --accent-zacht: #f2cd88;
  --accent-ink: #201704;

  --vlak: 20px;
  --breed: 1160px;
  --soepel: cubic-bezier(.16, 1, .3, 1);

  --letter: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cijfer: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grond);
  /* Eén lichtbron boven de kop, zoals de lamp boven een speeltafel. Verder
     blijft de pagina vlak: een tweede verloop maakt er een sjabloon van. */
  background-image: radial-gradient(70% 34% at 50% -6%, #16241f 0%, rgba(22,36,31,0) 62%);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 400 17px/1.6 var(--letter);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; text-wrap: pretty; }

.omslag { width: 100%; max-width: var(--breed); margin-inline: auto; padding-inline: 22px; }

/* Het opschrift boven een sectie. Mono en gesperd, want het is een label en
   geen zin: zo leest het niet als een tweede kop. */
.opschrift {
  margin: 0 0 14px;
  font-family: var(--cijfer);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* -------------------------------------------------------------- balk boven -- */

.balk {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--grond) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid #16211e;
}
@supports not (backdrop-filter: blur(1px)) { .balk { background: var(--grond); } }
.balk__rij { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.merk { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.merk img { width: 34px; height: 34px; border-radius: 9px; }

/* De naam naast het teken, zoals in de app (app/components/Woordmerk.vue):
   "Troef" wit, "masters" in een goudverloop van crème naar brons. */
.woordmerk { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.15em; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; color: #fff; }
.woordmerk span {
  color: #e6b55c;
  background: linear-gradient(180deg, #fbf0c4 0%, #f3d68a 30%, #e6b55c 68%, #b8862f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.balk__paden { display: none; gap: 30px; }
@media (min-width: 900px) { .balk__paden { display: flex; } }
.balk__paden a { font-size: 14.5px; color: var(--ink-zacht); text-decoration: none; }
.balk__paden a:hover { color: var(--ink); }

/* De taalknop. Eén vlag en geen lijstje: er zijn twee talen, dus één tik is
   genoeg -- je ziet de vlag van de taal waar je heen gaat.

   Hij staat in de kop en niet in de voet, en dat werkt op een telefoon net zo
   goed als op een scherm: onder 900px vallen de paden hierboven weg, dus daar
   is de kop juist leger. De naam van de taal staat in aria-label, want een
   vlag is een land en het gaat hier om een taal. */
.taal {
  flex: none; display: inline-flex; width: 28px; height: 20px;
  border-radius: 4px; overflow: hidden; border: 1px solid #23302c;
  transition: border-color .18s, transform .18s var(--soepel);
}
.taal:hover { border-color: #3d514b; transform: translateY(-1px); }
.taal svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .taal:hover { transform: none; } }

/* ------------------------------------------------------------------ knoppen -- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 16px/1 inherit;
  text-decoration: none;
  transition: transform .18s var(--soepel), background-color .18s, border-color .18s;
}
/* Geen gloed onder de pil. De vorm, de vulling en de donkere letter zeggen al
   dat dit de knop is; een schaduw in dezelfde kleur is het derde effect op
   hetzelfde ding. */
.knop--vol { background-image: linear-gradient(180deg, var(--accent-zacht), var(--accent)); color: var(--accent-ink); }
.knop--vol:hover { background-image: linear-gradient(180deg, #f7d79a, #efbb5f); }
.knop--rand { border-color: var(--lijn-hard); color: var(--ink); font-weight: 600; }
.knop--rand:hover { border-color: color-mix(in srgb, var(--ink) 34%, transparent); background: var(--grond-hoog); }
.knop--klein { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(1px) scale(.985); }
:where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
@media (max-width: 599px) { .knoppen { flex-direction: column; align-items: stretch; } }
.knoppen .kijk { margin-top: 0; }

/* De twee winkels staan als badge onder de knop. Ze waren eerst knoppen van
   deze pagina, omdat de badge een tweede vormtaal is naast de amberen pil. Met
   Google Play erbij werden dat drie knoppen op een rij, en dan weet je niet
   meer welke de bedoelde is. Een badge leest iedereen meteen als "hier haal je
   de app", en omdat hij er anders uitziet blijft er één knop over. */
.winkels__kop { margin: 30px 0 12px; font-family: var(--cijfer); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dof); }
.winkels { display: flex; flex-wrap: wrap; gap: 12px; }
.winkel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px 0 16px;
  border-radius: 12px;
  border: 1px solid #55655f;
  background: #000;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s var(--soepel), border-color .18s;
}
.winkel:hover { transform: translateY(-1px); border-color: var(--ink-zacht); }
.winkel:active { transform: translateY(1px) scale(.985); }
.winkel svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.winkel span { display: flex; flex-direction: column; }
.winkel small { font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: #d5ddd9; }
/* Op een telefoon delen ze de breedte, zodat ze naast elkaar blijven staan. */
@media (max-width: 599px) {
  .winkels { flex-wrap: nowrap; gap: 10px; }
  .winkel { flex: 1 1 0; min-width: 0; justify-content: center; gap: 9px; padding: 0 10px; font-size: 16.5px; }
  .winkel svg { width: 22px; height: 22px; }
  .winkel small { font-size: 10.5px; }
}

/* --------------------------------------------------------------------- kop -- */

.kop { padding: 64px 0 56px; }
@media (min-width: 900px) { .kop { padding: 92px 0 88px; } }
.kop__rij { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .kop__rij { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 56px; } }

.kop h1 {
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.kop h1 b { font-weight: inherit; color: var(--accent); }
/* Op een breed scherm staat de tweede regel op zijn eigen regel: twee regels is
   de bedoelde vorm van deze kop. Op een telefoon breekt hij toch al. */
@media (min-width: 900px) { .kop h1 b { display: block; } }
.kijk { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; min-height: 44px; font-size: 15.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.kijk:hover { text-decoration: underline; }
.kijk svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); fill: currentColor; flex: none; }
.kop__tekst { margin: 0 0 28px; max-width: 42ch; font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--ink-zacht); }

/* Twee toestellen: links waar je speelt, rechts wat je erna terugkrijgt. Ze
   overlappen alleen als er breedte voor is; daaronder staan ze onder elkaar,
   want twee telefoonbeelden over elkaar op een telefoon is één beeld. */
.podium { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.toestel {
  width: min(258px, 70vw);
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid #253630;
  box-shadow: 0 46px 84px -44px rgb(0 0 0 / .9);
}
.toestel img { width: 100%; height: auto; }
.toestel--terug { width: min(226px, 62vw); border-radius: 30px; }
@media (min-width: 900px) {
  .podium { display: block; height: 640px; }
  .toestel { position: absolute; right: 0; top: 0; width: 258px; }
  .toestel--terug { position: absolute; left: 0; top: 150px; right: auto; width: 214px; z-index: 2; }
}

/* Het napraatscherm op ware grootte. Geen nagetekende tafel: dit is een
   afdruk uit de app, en juist dáár gaat deze sectie over -- vier handen open.
   Hij komt uit design/appstore/iphone-6.9/napraten.png, zie docs/VOORPAGINA.md. */
.napraat-toestel { width: min(340px, 86vw); margin-inline: auto; border-radius: 40px; border: 1px solid #253630; overflow: hidden; box-shadow: 0 46px 84px -44px rgb(0 0 0 / .95); }
.napraat-toestel img { width: 100%; height: auto; }

.vlak {
  background: var(--grond-hoog);
  border: 1px solid var(--lijn);
  border-radius: 22px;
  padding: 22px;
}
.vlak h3 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 10px; }
.vlak p { margin: 0; font-size: 15.5px; color: var(--ink-zacht); }
.vlak__beeld { height: 315px; border-radius: 14px; overflow: hidden; background: #0a1210; margin-bottom: 16px; }
.vlak__beeld img { width: 100%; height: 100%; object-fit: cover; }
.vlak__door { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.vlak__door:hover { text-decoration: underline; }

.rooster3 { display: grid; gap: 20px; }
@media (min-width: 760px) { .rooster3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* De hand op de puzzelkaart. Vier kaarten in een waaier, getekend en niet
   gefotografeerd: van dit scherm bestaat geen afdruk waar één hand op staat. */
.hand { height: 315px; border-radius: 14px; background: #0c1513; border: 1px solid #1a2724; display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 16px; }
.kaart { width: 52px; height: 74px; border-radius: 8px; background: #f6f4ee; color: #1c1c1c; padding: 7px; font-weight: 700; font-size: 16px; line-height: 1; }
.kaart i { display: block; font-style: normal; font-size: 12px; margin-top: 2px; }
.kaart--rood { color: #c0392b; }

/* ----------------------------------------------------------------- napraten -- */

.napraten { background: var(--kleed); border-block: 1px solid #16211e; padding: 64px 0; margin-top: 64px; }
@media (min-width: 900px) { .napraten { padding: 96px 0; margin-top: 96px; } }
.napraten h2 { font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.04; }
.napraten__aanhef { margin: 18px 0 0; max-width: 58ch; font-size: clamp(1rem, 1.8vw, 1.18rem); color: var(--ink-zacht); }
.napraten__rij { display: grid; gap: 32px; margin-top: 44px; align-items: start; }
@media (min-width: 980px) { .napraten__rij { grid-template-columns: 360px minmax(0, 1fr); gap: 64px; } }
.napraten__punten { display: flex; flex-direction: column; gap: 18px; }
.napraten__punten h3 { font-size: 22px; letter-spacing: -0.025em; margin-bottom: 10px; }
.napraten__punten p { margin: 0; font-size: 16px; color: var(--ink-zacht); }
.napraten__voet { margin: 0; font-size: 14.5px; color: var(--ink-dof); }

/* ------------------------------------------------------------------- tafel -- */

.tafel { padding: 64px 0 0; }
@media (min-width: 900px) { .tafel { padding: 96px 0 0; } }
.tafel__rij { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .tafel__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.tafel h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.06; }
.tafel p { margin: 0 0 22px; font-size: clamp(1rem, 1.7vw, 1.12rem); color: var(--ink-zacht); }
.lijst { display: flex; flex-direction: column; gap: 12px; }
.lijst div { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; background: var(--grond-hoog); border: 1px solid var(--lijn); font-size: 15.5px; }
.lijst b { font-family: var(--cijfer); font-size: 13px; font-weight: 500; color: var(--accent); flex: none; }

/* ------------------------------------------------------------------- samen -- */

.samen { padding: 64px 0 0; }
@media (min-width: 900px) { .samen { padding: 96px 0 0; } }
.samen__rij { display: grid; gap: 20px; }
@media (min-width: 900px) { .samen__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.samen__kaart {
  background: var(--grond-hoog);
  background-image: radial-gradient(90% 70% at 10% 0%, rgba(232,176,75,.09) 0%, rgba(232,176,75,0) 65%);
  border: 1px solid #24352f;
  border-radius: 26px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 900px) { .samen__kaart { padding: 38px; } }
.samen__kaart h2 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); line-height: 1.06; }
.samen__kaart p { margin: 0; font-size: 16.5px; color: var(--ink-zacht); }
.code { display: flex; gap: 10px; }
.code span {
  flex: 1 1 0;
  max-width: 72px;
  height: 72px;
  border-radius: 15px;
  background: #0c1513;
  border: 1px solid var(--lijn-hard);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cijfer);
  font-size: 27px;
  font-weight: 500;
  color: var(--accent);
}
.samen__kaart .knop { align-self: flex-start; margin-top: auto; }
@media (max-width: 599px) { .samen__kaart .knop { align-self: stretch; } }

.fatsoen h2 { font-size: 21px; letter-spacing: -0.025em; }
.fatsoen > p { margin: 8px 0 18px; font-size: 15.5px; color: var(--ink-zacht); }
.fatsoen__rooster { display: grid; gap: 14px; }
@media (min-width: 520px) { .fatsoen__rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fatsoen__rooster div { background: var(--grond-hoog); border: 1px solid var(--lijn); border-radius: 18px; padding: 18px; }
.fatsoen__rooster h3 { font-size: 16.5px; letter-spacing: -0.02em; margin-bottom: 6px; }
.fatsoen__rooster p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-zacht); }

/* -------------------------------------------------------------------- slot -- */

.slot { margin-top: 64px; padding: 64px 0; background: var(--kleed); border-top: 1px solid #16211e; text-align: center; }
@media (min-width: 900px) { .slot { margin-top: 96px; padding: 88px 0; } }
.slot h2 { max-width: 20ch; margin-inline: auto; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.05; }
.slot p { margin: 18px auto 26px; max-width: 58ch; font-size: clamp(1rem, 1.8vw, 1.1rem); color: var(--ink-zacht); }
.slot .knoppen { justify-content: center; }
.slot .winkels { justify-content: center; margin-top: 16px; }
.slot p.slot__uitleg { margin: 22px auto 0; font-size: 15.5px; }
.slot__uitleg a { font-weight: 600; }

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

.voet { padding: 30px 0 38px; border-top: 1px solid #16211e; }
.voet__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.voet__merk { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-dof); }
.voet__merk img { width: 28px; height: 28px; border-radius: 8px; }
.voet nav { display: flex; flex-wrap: wrap; gap: 20px; }
.voet nav a, .voet nav span { font-size: 14px; color: var(--ink-zacht); text-decoration: none; }
.voet nav a:hover { color: var(--ink); text-decoration: underline; }

/* Wat verderop staat komt een klein stukje omhoog zodra het in beeld schuift.
   Eén beweging, en alleen als de bezoeker beweging wil. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .komop { animation: opkomen linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
    @keyframes opkomen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }
}

/* ------------------------------------------------------------------ uitleg -- */

/* De pagina /uitleg/: één video, rechtop, met zijn hoofdstukken ernaast. Op
   een telefoon staat de video bovenaan, want daarvoor kwam je. Op een breed
   scherm staat hij links, in dezelfde lijst als de toestellen op de voorpagina. */
.uitleg { padding: 40px 0 56px; }
@media (min-width: 900px) { .uitleg { padding: 72px 0 88px; } }
.uitleg__rij { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .uitleg__rij { grid-template-columns: 360px minmax(0, 1fr); gap: 72px; } }
.uitleg h1 { margin: 0 0 30px; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.03; letter-spacing: -0.035em; }
.uitleg h1 b { font-weight: inherit; color: var(--accent); }
@media (min-width: 900px) { .uitleg h1 b { display: block; } }

/* Zo hoog als het scherm toelaat en niet hoger: een staande video die onder de
   vouw doorloopt kun je niet bedienen zonder te scrollen. */
.uitleg__film {
  width: min(360px, 100%, calc((100svh - 120px) * 9 / 16));
  margin-inline: auto;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid #253630;
  background: #0a1210;
  box-shadow: 0 46px 84px -44px rgb(0 0 0 / .9);
}
.uitleg__film video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; }

.hoofdstukken { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 560px) { .hoofdstukken { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hoofdstukken button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--lijn);
  background: var(--grond-hoog);
  color: var(--ink);
  font: 600 15.5px/1.2 var(--letter);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.hoofdstukken button:hover { border-color: var(--lijn-hard); background: #14201d; }
.hoofdstukken b { font-family: var(--cijfer); font-size: 13px; font-weight: 500; color: var(--accent); flex: none; }
/* Het hoofdstuk dat nu speelt. */
.hoofdstukken button[aria-current="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 9%, var(--grond-hoog)); }

/* Het teken van het platform: in de kop van een vak voor de naam, in een
   hoofdstukknop rechts tegen de rand. Eén kleur, die van de tekst eromheen. */
.teken { width: 20px; height: 20px; fill: currentColor; flex: none; }
.halen h3 { display: flex; align-items: center; gap: 10px; }
.halen h3 .teken { color: var(--accent); margin-top: -2px; }
.hoofdstukken .teken { width: 17px; height: 17px; margin-left: auto; color: var(--ink-zacht); }

.balk__paden a[aria-current="page"] { color: var(--ink); }

.halen h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.06; margin-bottom: 28px; }
.halen__rij { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .halen__rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); } }
.stappen { margin: 14px 0 0; padding-left: 1.3em; font-size: 15.5px; color: var(--ink-zacht); display: grid; gap: 8px; }
.stappen li::marker { font-family: var(--cijfer); font-size: 13px; color: var(--accent); }
.stappen a { font-weight: 600; }
.vlak p.halen__let { margin-top: 14px; color: var(--ink); }
.voet--los { margin-top: 64px; }
@media (min-width: 900px) { .voet--los { margin-top: 96px; } }

/* --------------------------------------------------------------------- doc -- */

/* Privacy, huisregels en voorwaarden (scripts/site-documenten.ts): lopende
   tekst in een leesbare kolom, met dezelfde koppen als de rest van de site. */
.doc { max-width: calc(68ch + 44px); padding-top: 40px; }
@media (min-width: 900px) { .doc { padding-top: 72px; } }
.doc h1 { margin: 0 0 10px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.035em; }
.doc h2 { margin: 40px 0 12px; font-size: 1.3rem; line-height: 1.2; scroll-margin-top: 96px; }
.doc p, .doc ul { margin: 0 0 14px; color: var(--ink-zacht); }
.doc ul { padding-left: 1.2em; display: grid; gap: 10px; }
.doc li::marker { color: var(--accent); }
.doc b { color: var(--ink); font-weight: 600; }
.doc__stand { font-family: var(--cijfer); font-size: 13px; color: var(--ink-dof); }
.doc p.doc__lead { margin-top: 24px; font-size: clamp(1.02rem, 2vw, 1.15rem); color: var(--ink); }
.voet nav a[aria-current="page"] { color: var(--ink); }

/* ----------------------------------------------------------------- peiling -- */

/* De pagina /peiling/: één vraag, met links waar het over gaat en rechts het
   formulier. Op een telefoon staat de uitleg bovenaan en het formulier er
   meteen onder, want zonder die drie zinnen weet je niet wat je aanvinkt. */
.peiling { padding: 40px 0 0; }
@media (min-width: 900px) { .peiling { padding: 80px 0 0; } }
.peiling__rij { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .peiling__rij { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 72px; } }
.peiling h1 { margin: 0 0 20px; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
.peiling h1 b { font-weight: inherit; color: var(--accent); }
.peiling__aanhef { margin: 0 0 26px; max-width: 44ch; font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--ink-zacht); }

.deel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.deel__adres { font-family: var(--cijfer); font-size: 13px; color: var(--ink-dof); }
/* Een knop die een button is en geen link. De browser geeft hem zijn eigen
   letter en een grijs vlak mee; hier krijgt hij die van de pagina terug. */
button.knop { cursor: pointer; font: 700 16px/1 var(--letter); }
button.knop--klein { font-size: 14.5px; font-weight: 600; }
button.knop--rand { background: transparent; }
.knop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.stem { display: grid; gap: 20px; padding: 24px; }
@media (min-width: 900px) { .stem { padding: 32px; } }
.stem ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }

.veld { display: grid; gap: 8px; }
.veld label, .dagen legend { font-size: 15px; font-weight: 600; color: var(--ink); }
.veld label small { font-size: 13px; font-weight: 400; color: var(--ink-dof); margin-left: 6px; }
.veld input, .veld textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--lijn-hard);
  background: #0c1513;
  color: var(--ink);
  /* Zestien pixels of meer: daaronder zoomt Safari op een iPhone in zodra je
     het veld aantikt. */
  font: 400 17px/1.2 var(--letter);
  caret-color: var(--accent);
  transition: border-color .18s;
}
.veld textarea { display: block; min-height: 96px; padding: 14px 16px; line-height: 1.45; resize: vertical; }
.veld :is(input, textarea):hover { border-color: #3d514b; }
.veld :is(input, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.veld :is(input, textarea)[aria-invalid="true"] { border-color: #e8796b; }
.peiling__aanhef b { font-weight: 600; color: var(--ink); }

/* Het lokveld. Buiten beeld en niet display:none, want dat laatste slaat een
   script net zo goed over als een mens. */
.lok { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dagen { margin: 0; padding: 0; border: 0; min-width: 0; }
.dagen legend { padding: 0; margin-bottom: 10px; }
.dagen__rooster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* Een dag is een tegel en geen vinkje met een woord ernaast: op een telefoon
   tik je met je duim, en dan is de hele tegel het doel. Het echte vinkje
   blijft bestaan, onzichtbaar over de tegel heen, zodat toetsenbord en
   schermlezer het gewoon als vinkje vinden. */
.dag { position: relative; display: block; }
.dag input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dag span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 8px 14px 8px 46px;
  border-radius: 14px;
  border: 1px solid var(--lijn-hard);
  background: #0c1513;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color .18s, background-color .18s;
}
/* Het hokje, links in de tegel. */
.dag span::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 6px;
  border: 1.5px solid var(--ink-lijn);
  background: transparent center / 14px no-repeat;
  transition: background-color .18s, border-color .18s;
}
.dag small { font-size: 12.5px; font-weight: 400; color: var(--ink-zacht); }
.dag input:hover:not(:disabled) + span { border-color: #3d514b; }
.dag input:checked + span { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 10%, #0c1513); }
.dag input:checked + span::before {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201704' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.dag input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* De woensdag: aangevinkt en op slot. Hij houdt zijn kleur, want hij telt mee,
   maar de rand is gestreept zodat je ziet dat je er niets aan verandert. */
.dag--vast input { cursor: default; }
.dag--vast input:checked + span { border-style: dashed; }
/* Zeven dagen in twee kolommen laat er een over: de zondag krijgt de hele rij. */
.dag:last-child { grid-column: 1 / -1; }

.stem .knop { width: 100%; }
.stem .knop[disabled] { opacity: .6; cursor: progress; transform: none; }
.stem__fout { margin: 0; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(232,121,107,.5); background: rgba(232,121,107,.1); font-size: 15px; color: #f6c3bb; }
.stem__klein { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-dof); }

.stem--klaar { justify-items: start; gap: 14px; }
.stem--klaar:focus { outline: none; }
.stem--klaar h2 { font-size: 24px; letter-spacing: -0.025em; line-height: 1.15; }
.stem--klaar p { margin: 0 0 6px; }
.stem__vink { width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }