/* De voorpagina van stagekit.nl. Ontwerp: canvas "Stagekit voorpagina, nieuw" en DESIGN.md
   (Tweede kleur van stagekit.nl, Beweging). Kleuren en letters zijn die van het lichte thema
   van de app (src/ui/tokens.css); turkoois is de tweede kleur: wat je gekozen hebt. */

@font-face { font-family: 'Archivo Black'; font-weight: 400; font-display: swap; src: url(fonts/archivo-black-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --bg: #f4f4f1;
  --surface: #ffffff;
  --control: #e6e6e1;
  --line: rgba(0, 0, 0, 0.1);
  --text: #17171a;
  --muted: #55555c;
  --frame: #000000;
  --red: #d9291a;
  --turkoois: #00756b;
  --turkoois-tekst: #006b62;
  --turkoois-zacht: rgba(0, 117, 107, 0.1);
  --maat: rgba(0, 0, 0, 0.06);
  --maat-sterk: rgba(0, 0, 0, 0.16);
  /* De rand van een invulveld: 3,3 op 1 tegen #f4f4f1 en 3,7 op 1 tegen wit (WCAG 1.4.11). */
  --rand-veld: #85858b;
  /* De voet: iets donkerder dan de pagina, zodat de donkere oproep erboven het meest opvalt. */
  --voet: #ecece7;
  --voet-vlak: #e3e3dd;
  --fout: #a4190f;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 480ms;
  --display: 'Archivo Black', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; }
h1 { font-size: clamp(40px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
a { color: inherit; }
.gedempt { color: var(--muted); }
.groot { font-size: 20px; }
.klein { font-size: 16px; }

.rand { max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* Knoppen. Rood is "doe dit", grijs al het andere. Veren licht in onder de vinger. */
.k { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.k:active { transform: scale(0.97); }
.k:focus-visible { outline: 3px solid var(--turkoois); outline-offset: 3px; }
.knop {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.knop-grijs { background: var(--control); }
.knop-rood { min-height: 56px; padding: 0 28px; font-size: 18px; background: var(--red); color: #fff; }
.knop-groot { min-height: 58px; padding: 0 32px; }

/* Kop */
.kop-rechts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.kop-link { min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 16px; font-weight: 600; color: var(--muted); text-decoration: none; }
.kop-link:hover { color: var(--text); }
.kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; }
/* Eén kop voor de hele site (voorpagina, handleiding, voorwaarden): logo, menu links, Open je band
   rechts, overal even hoog, zodat er niets verspringt als je van pagina wisselt (Randy, 6 november). */
.hl-kop { justify-content: flex-start; gap: 12px 28px; }
.hl-menu { display: flex; gap: 4px 20px; }
.hl-menu a { min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--muted); text-decoration: none; }
.hl-menu a:hover, .hl-menu a[aria-current] { color: var(--text); }
.hl-menu a[aria-current] { font-weight: 600; }
.kop-eind { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hl-open { min-height: 44px; }
.hl-open-voor { white-space: pre; }
@media (max-width: 760px) { .hl-menu a:first-child { display: none; } .hl-kop { gap: 12px 16px; } }
@media (max-width: 520px) { .hl-menu { display: none; } .hl-kop { column-gap: 8px; } .hl-open { padding: 0 14px; } .hl-open-voor { display: none; } }
.logo { display: flex; align-items: center; min-height: 44px; line-height: 0; border-radius: 8px; }
/* Het woord is smaller dan 160 pixels, dus de kleine versie (DESIGN.md, Logo van Stagekit). */
.logo img { height: 40px; width: auto; }
@media (max-width: 520px) { .logo img { height: 32px; } }

/* De taalknop: een wereldbol die een klein menu opent met Nederlands en English (site.js). Zonder
   JavaScript een link naar de andere taal. Het menu komt uit de knop: vervagen 180, schuiven 320. */
.taalknop { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 14px; background: var(--control); color: var(--text); cursor: pointer; }
.taalknop:hover, .taalknop[aria-expanded='true'] { background: #dcdcd6; }
.taalmenu { position: absolute; z-index: 20; right: 0; top: 52px; width: 220px; padding: 6px; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.14); transform-origin: top right; opacity: 0; transform: translateY(-6px) scale(0.96); transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease); }
.taalmenu.is-open { opacity: 1; transform: none; }
.taalmenu[hidden] { display: none; }
.taal-optie { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--text); text-decoration: none; }
.taal-optie span { flex: 1; }
.taal-optie:hover, .taal-optie:focus-visible { background: var(--bg); }
.taal-optie:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .taalmenu { transform: none; transition: opacity var(--t-fast) linear; } }

/* Opening, met de maten van Highway Lights erachter */
.opening { position: relative; overflow: hidden; }
.maten {
  position: absolute;
  inset: 0;
  display: flex;
  border-right: 1px solid var(--maat-sterk);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}
.maten > div {
  flex: var(--n) 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  border-left: 1px solid var(--maat-sterk);
  background-image: linear-gradient(to right, var(--maat) 1px, transparent 1px);
  background-size: calc(100% / var(--n)) 100%;
  background-position: 1px 0;
  background-repeat: repeat-x;
}
.maten span { padding: 0 0 20px 10px; font-size: 15px; color: var(--muted); opacity: 0.7; white-space: nowrap; overflow: hidden; }

.held { position: relative; display: flex; flex-wrap: wrap; gap: 64px 56px; align-items: center; padding-top: 40px; padding-bottom: 120px; }
.held-tekst { flex: 1 1 420px; min-width: 0; max-width: 540px; display: flex; flex-direction: column; gap: 24px; }
.held-tekst .groot { line-height: 1.55; }
.rij { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.held-beeld { flex: 1.5 1 520px; min-width: 0; position: relative; aspect-ratio: 100 / 76; }
.held-monitor { position: absolute; bottom: 6%; right: 15%; width: 79%; }
/* Het grote scherm in de opening, op de maten van een Apple Studio Display (27 inch, 16:9):
   een smalle aluminium rand, daarbinnen rondom even veel zwart glas (2,1% van de breedte), en
   een voet van een schuin aluminium blad met een platte plaat eronder. Geen logo. */
.monitor-scherm { position: relative; background: #0b0b0d; border-radius: 1.6% / 2.8%; padding: 2.1%; box-shadow: 0 0 0 2px #c5c6ca, 0 0 0 3px #a9aaaf, 3px 5px 0 2px #9d9ea3, 0 18px 30px -22px rgba(8, 10, 14, 0.3); }
.monitor-scherm img { width: 100%; border-radius: 0.4%; }
.monitor-voet { position: relative; height: 0; padding-bottom: 15%; }
.monitor-hals { position: absolute; left: 39%; width: 22%; top: 0; height: 88%; background: linear-gradient(90deg, #b9babf, #d9dade 30%, #cfd0d4 70%, #b3b4b9); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.monitor-voet::after { content: ''; position: absolute; left: 28%; width: 46%; bottom: -9%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 10, 14, 0.42), rgba(8, 10, 14, 0.14) 60%, rgba(8, 10, 14, 0)); filter: blur(3px); }
.monitor-hals { z-index: 1; }
.monitor-plaat { z-index: 1; position: absolute; left: 34%; width: 32%; bottom: 0; height: 14%; border-radius: 3px 3px 40% 40% / 3px 3px 100% 100%; background: #d3d4d8; box-shadow: inset 0 1px 0 #eeeff1, 0 2px 3px rgba(8, 10, 14, 0.35); }
.tablet.held-tablet { position: absolute; right: 0; bottom: 0; width: 50%; }
/* De tablet, op de maten van een iPad Air 11 inch liggend (247,6 bij 178,5 mm, scherm 1180 bij
   820 punten). De rand is rondom even breed: 4,16% van de breedte. De hoek van het scherm is
   18 punten (1,5% van de breedte); de hoek van het apparaat loopt daar evenwijdig omheen
   (5,6% van de breedte). Marges in procenten rekenen hier vanaf de breedte van de tablet zelf,
   daarom zit de rand als marge om het scherm en niet als padding. */
.tablet { position: relative; background: var(--frame); border-radius: 5.6% / 7.7%; box-shadow: var(--rand-grijs), 0 30px 60px -30px rgba(8, 10, 14, 0.45); }
.tablet > img, .tablet > .wissel { margin: 4.16%; border-radius: 1.52% / 2.2%; }
.tablet > img { width: 91.68%; max-width: none; height: auto; }
.tablet .wissel img { border-radius: 0; }
/* De camera van de tablet, midden in de bovenrand. */
.tablet::before { content: ''; position: absolute; top: 2.9%; left: 50%; width: 0.9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #23252c; box-shadow: inset 0 0 0 1px #33363f; }
.held-telefoon { position: absolute; left: 0; bottom: 0; width: 21%; background: var(--frame); border-radius: 18% / 8.3%; padding: 0.74%; box-shadow: var(--rand-licht), 0 24px 48px -20px rgba(8, 10, 14, 0.5); }
.held-telefoon img { width: 100%; border-radius: 15.6% / 7.2%; }

/* Eén keer bij het openen: de tekst en de schermen komen zes pixels omhoog binnen. */
.binnen { animation: op var(--t-mid) var(--ease) both, omhoog var(--t-mid) var(--ease) both; }
.binnen-2 { animation-delay: calc(var(--t-mid) / 3); }

/* Secties */
.vlak { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.twee { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.omgekeerd { flex-wrap: wrap-reverse; }
.tekstkolom { flex: 1 1 380px; min-width: 0; max-width: 540px; display: flex; flex-direction: column; gap: 20px; }
.telefoon { position: relative; flex: 0 1 340px; min-width: 0; margin: 0 auto; background: var(--frame); border-radius: 61px; padding: 11px; box-shadow: var(--rand-licht), 0 30px 60px -30px rgba(8, 10, 14, 0.45); }
.telefoon .wissel { border-radius: 50px; }
.telefoon img { width: 100%; }
.tablet-los { flex: 1.4 1 520px; min-width: 0; margin: 0 auto; }
/* Wat speel jij? Zodra tekst en tablet onder elkaar staan (onder 1012 breed), staat de tablet
   boven de instrumentknoppen: wie Drums kiest, ziet de wissel meteen. */
@media (max-width: 1011px) {
  #spelen .twee { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; }
  #spelen .tekstkolom { display: contents; }
  #spelen .tablet-los { order: 1; flex: none; width: 100%; max-width: 640px; margin: 8px auto; }
  #spelen .schakel { order: 2; }
  #spelen .wissel-klein { order: 3; }
}

/* Echte apparaten. Eén lichtbron linksboven: de glans op elk scherm valt in dezelfde hoek, de
   dikte van elk apparaat en de schaduw liggen rechtsonder. */
:root {
  --rand-donker: 1px 1px 0 #2b2d33, 2px 2px 0 #24262b, 3px 3px 0 #1d1f23, 4px 4px 0 #16171a;
  --rand-grijs: 0 0 0 1.5px #6d6f75, 1px 1px 0 1.5px #55575c, 2px 3px 0 1.5px #44464b;
  --rand-licht: 0 0 0 1.5px #8a8b91, 1px 1px 0 1.5px #6b6c72, 2px 3px 0 1.5px #55565b;
}
.glans::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.07) 26%, rgba(255, 255, 255, 0) 40%); }
.eiland { position: absolute; z-index: 1; top: 2.8%; left: 50%; width: 30%; height: 4.1%; transform: translateX(-50%); border-radius: 999px; background: #000; }
/* De hoeken van de telefoon zoals Apple ze maakt: geen kwart cirkel, maar een bocht die
   geleidelijk begint (een superellips). De rand van het scherm loopt daar evenwijdig aan, met
   een smalle zwarte rand ertussen. Een browser zonder corner-shape krijgt gewone ronde hoeken
   van dezelfde maat. */
@supports (corner-shape: squircle) {
  .held-telefoon, .held-telefoon img, .telefoon, .telefoon .wissel, .tablet, .tablet > img, .tablet > .wissel { corner-shape: superellipse(1.6); }
  .tablet { border-radius: 7% / 9.6%; }
  .tablet > img, .tablet > .wissel { border-radius: 1.9% / 2.75%; }
  .held-telefoon { border-radius: 22% / 10.1%; }
  .held-telefoon img { border-radius: 19.2% / 8.9%; }
  .telefoon { border-radius: 75px; }
  .telefoon .wissel { border-radius: 62px; }
  .glans::after { corner-shape: inherit; }
}
.held-beeld { perspective: 2400px; }
.held-podium { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-17deg) rotateZ(1deg); transform-origin: 60% 60%; }
.held-podium > * { transform-style: preserve-3d; }
.held-monitor { transform: translateZ(-70px); }
.held-tablet { transform: translateZ(30px); }
.held-telefoon { transform: translateZ(90px); }
.held-schaduw { position: absolute; left: 2%; right: 0; bottom: 0; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 10, 14, 0.26), rgba(8, 10, 14, 0)); filter: blur(6px); }

/* De laptop, als een MacBook zonder merk: dunne zwarte rand met camera bovenin, een
   aluminium voet die iets breder is dan het scherm, met de duimuitsparing in het midden. */
.laptop-deel { padding-top: 96px; padding-bottom: 96px; }
/* Boven "Eén bandlid zet het klaar": Highway Lights zoals je het op de laptop intypt. De regel
   typt zichzelf rustig uit, akkoord voor akkoord, en begint daarna opnieuw. Los van de tekst
   eronder, zodat er nooit tekst over tekst staat. */
/* Eén bandlid zet het klaar: de laptop staat op een tafel. Het tafelblad begint onder de
   laptop en loopt over de hele breedte zacht over in de kleur van de volgende sectie. */
.bureau { position: relative; overflow: hidden; border-bottom: 0; }
.bureau > .rand { position: relative; z-index: 0; }
.bureau .laptop { position: relative; }
.bureau .laptop::before { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: calc(100% - 7px); bottom: -96px; background: linear-gradient(to bottom, #e4e4df 0%, #ecece8 30%, var(--bg) 100%); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05); }
@media (max-width: 600px) { .bureau .laptop::before { bottom: -72px; } }
.laptop-tekst { margin-bottom: 40px; }
/* De drie keuzes als rij direct boven de laptop die ze bedienen. */
.plekken.laptop-keuze { flex-direction: row; justify-content: center; gap: 8px; margin: 0 auto 28px; max-width: 1080px; }
.laptop-keuze button { flex: 1 1 0; min-width: 0; text-align: center; }
@media (max-width: 760px) { .plekken.laptop-keuze { flex-direction: column; } .laptop-keuze button { flex: none; text-align: left; } }
.laptop { max-width: 1080px; margin: 0 auto; padding: 0 5%; }
.macbook-scherm { position: relative; background: #0d0d0f; border-radius: 16px 16px 4px 4px; padding: 2.4% 2.4% 3.4%; box-shadow: 0 0 0 1px #8e8f94, 0 30px 60px -30px rgba(8, 10, 14, 0.45); }
.macbook-scherm::before { content: ''; position: absolute; z-index: 1; top: 0; left: 50%; width: 11%; height: 2.4%; min-height: 6px; transform: translateX(-50%); background: #0d0d0f; border-radius: 0 0 8px 8px; }
.macbook-scherm img, .macbook-scherm .wissel { border-radius: 4px; }
.macbook-voet { position: relative; height: 0; padding-bottom: 2.6%; margin: 0 -6.5%; background: #d3d4d8; border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%; box-shadow: inset 0 1px 0 #eeeff1, 0 16px 24px -14px rgba(8, 10, 14, 0.4); }
.macbook-voet::after { content: ''; position: absolute; top: 0; left: 50%; width: 13%; height: 45%; transform: translateX(-50%); background: #b3b4b9; border-radius: 0 0 10px 10px; }

/* Keuzeknoppen: zoals in de app, het gekozen vlak in turkoois. */
.schakel { display: grid; gap: 4px; padding: 4px; border-radius: 16px; background: var(--control); }
.schakel-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.schakel-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schakel button {
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 6px;
}
.schakel-2 button { min-height: 48px; font-size: 16px; }
.schakel button[aria-pressed='true'] { background: var(--turkoois); color: #fff; }

.plekken { display: flex; flex-direction: column; gap: 8px; }
.plekken button {
  /* Inhoud bovenaan: een knop zet hem anders verticaal in het midden, en dan staan de titels naast
     elkaar niet op een lijn als de ene uitleg korter is (Randy, 6 november). */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  padding: 14px 20px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--text);
  background: transparent;
}
.plekken b { display: block; font-size: 19px; font-weight: 600; transition: color var(--t-fast) var(--ease); }
.plekken span { display: block; font-size: 16px; color: var(--muted); margin-top: 2px; }
.plekken button[aria-pressed='true'] { background: var(--turkoois-zacht); }
.plekken button[aria-pressed='true'] b { color: var(--turkoois-tekst); }

/* Een wissel zoals in de app (src/ui/swap.css): het oude vervaagt en schuift weg, het nieuwe
   komt van de kant van de knop die je koos, pas als het oude bijna weg is. */
.wissel { display: grid; overflow: hidden; --op: var(--t-mid); --schuif: var(--t-slow); --afstand: 40px; }
.wissel > * { grid-area: 1 / 1; }
.wissel-klein { --op: var(--t-fast); --schuif: var(--t-mid); --afstand: 16px; }
.wissel .is-uit { opacity: 0; pointer-events: none; visibility: hidden; }
.wissel .is-nieuw { animation: op var(--op) var(--ease) calc(var(--op) / 3) both, in-x var(--schuif) var(--ease) calc(var(--op) / 3) both; }
.wissel .is-weg { pointer-events: none; animation: af calc(var(--op) / 2) var(--ease) both, uit-x calc(var(--schuif) * 0.75) var(--ease) both; }
.wissel-y .is-nieuw { animation-name: op, in-y; }
.wissel-y .is-weg { animation-name: af, uit-y; }
@keyframes op { from { opacity: 0; } }
@keyframes af { to { opacity: 0; } }
@keyframes omhoog { from { transform: translateY(6px); } }
@keyframes in-x { from { transform: translateX(calc(var(--kant, 1) * var(--afstand))); } }
@keyframes uit-x { to { transform: translateX(calc(var(--kant, 1) * var(--afstand) * -1)); } }
@keyframes in-y { from { transform: translateY(calc(var(--kant, 1) * var(--afstand))); } }
@keyframes uit-y { to { transform: translateY(calc(var(--kant, 1) * var(--afstand) * -1)); } }

/* De lampjes per tel van de drummer, op 118 per minuut (song.css, .beat). */
.tellen { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 16px; }
.lampjes { display: inline-flex; align-items: center; gap: 8px; }
.lampjes i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--control); }
.lampjes i.een { width: 18px; height: 18px; }
.lampjes b { position: absolute; inset: 0; border-radius: 50%; background: var(--text); opacity: 0; animation: tel calc(60s / 118 * 4) linear infinite; }
.lampjes i:nth-child(2) b { animation-delay: calc(60s / 118); }
.lampjes i:nth-child(3) b { animation-delay: calc(60s / 118 * 2); }
.lampjes i:nth-child(4) b { animation-delay: calc(60s / 118 * 3); }
@keyframes tel { 0% { opacity: 1; } 22%, 100% { opacity: 0; } }

/* Drie beloftes */
.drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; padding-top: 96px; padding-bottom: 0; }
/* De kop en de tekst staan in elk blok op dezelfde hoogte, ook als een kop over twee regels
   loopt: de blokken delen de rijen van het raster (subgrid). */
.blok { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px 24px 32px; }
/* Een klein stukje echte app bovenin elk blok, in de donkere kleuren van de app. */
.stukje { height: 88px; margin-bottom: 16px; padding: 10px; border-radius: 16px; background: #1b1f29; color: #fff; display: flex; align-items: center; }
.balk { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.balk span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 64px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.balk b { font-size: 17px; line-height: 18px; }
.balk .aan { background: #2e3543; }
.regel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.teken { flex: 0 0 40px; height: 40px; border-radius: 12px; background: #2e3543; display: flex; align-items: center; justify-content: center; }
.teken-groen { border-radius: 50%; background: rgba(52, 199, 123, 0.16); }
.regel-tekst { min-width: 0; flex: 1; }
.regel-tekst b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regel-tekst span { display: block; font-size: 14px; color: #9e9ea6; }
.regel-tekst em { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 8px; background: #2e3543; font-style: normal; font-size: 14px; font-weight: 600; color: #c4c4cc; }
.blok h3 { font-size: 24px; line-height: 1.25; margin: 0; }
.blok p { font-size: 17px; }

/* Notitie */

/* Winkelknoppen. Zolang de app niet openbaar in de winkels staat (beheer, Instellingen), staat er
   Binnenkort op en zijn het geen links. */
.winkels { display: flex; flex-wrap: wrap; gap: 10px; }
.winkel { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 18px 7px 14px; border-radius: 12px; background: #0d0d0f; color: #fff; text-decoration: none; border: 1px solid #0d0d0f; transition: transform var(--t-fast) var(--ease), background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease); }
.winkel span { display: flex; flex-direction: column; line-height: 1.1; }
.winkel small { font-size: 12px; opacity: 0.8; }
.winkel b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
a.winkel[href]:hover { background: #26262b; }
a.winkel[href]:active { transform: scale(0.97); }
/* Nog niet in de winkels: alleen omlijnd, in grijs, met Binnenkort. Geen zwarte pil die klikbaar
   lijkt. Staan ze er wel (winkelsOpen), dan worden het vanzelf de zwarte knoppen hierboven. */
.winkel[aria-disabled='true'] { cursor: default; background: transparent; color: var(--muted); border: 1px dashed var(--rand-veld); }
.winkel[aria-disabled='true']:active { transform: none; }
.winkel[aria-disabled='true'] small { opacity: 1; font-weight: 600; }
.winkels-donker .winkel { border-color: rgba(255, 255, 255, 0.24); }
.winkels-donker .winkel[aria-disabled='true'] { color: #9e9ea6; border-color: rgba(255, 255, 255, 0.32); }
/* In de opening alleen als ze werken; dan komen ze rustig binnen. */
.winkels-held[hidden] { display: none; }
.winkels-held { animation: op var(--t-mid) var(--ease) both, omhoog var(--t-mid) var(--ease) both; }
.winkels-klein .winkel { min-height: 44px; padding: 5px 14px 5px 12px; }
.winkels-klein .winkel b { font-size: 16px; }
.antwoord .winkels { margin-top: -6px; padding: 0 4px 24px; }
.winkels-kop { margin-top: 24px; margin-bottom: 8px; font-size: 15px; font-weight: 500; }

/* Zo werkt het: een genummerde rij van drie stappen met een lijn ertussen, geen kaarten. Elke
   stap springt naar zijn apparaat verderop. Op een telefoon onder elkaar, de lijn omlaag. */
.werkt { padding-top: 72px; padding-bottom: 96px; }
.werkt h2 { margin-bottom: 32px; }
.werkt-lijst { list-style: none; margin: 0 -12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.werkt-stap { position: relative; }
/* De lijn van het ene nummer naar het volgende, met 12 lucht aan beide kanten. */
.werkt-stap:not(:last-child)::after { content: ''; position: absolute; top: 31px; left: 64px; right: 0; height: 2px; border-radius: 1px; background: var(--maat-sterk); pointer-events: none; }
.werkt-stap a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 32px 12px 12px; border-radius: 16px; color: inherit; text-decoration: none; }
.werkt-nr { width: 40px; height: 40px; border-radius: 50%; background: var(--turkoois-zacht); color: var(--turkoois-tekst); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 17px; margin-bottom: 14px; }
.werkt-stap b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color var(--t-mid) var(--ease); }
.werkt-tekst { font-size: 17px; color: var(--muted); }
@media (hover: hover) {
  .werkt-stap a:hover b { text-decoration-color: currentColor; }
}
#spelen, #plannen, #klaarzetten { scroll-margin-top: 16px; }
@media (max-width: 760px) {
  .werkt-lijst { grid-template-columns: minmax(0, 1fr); }
  .werkt { padding-bottom: 72px; }
  /* Smal: nummer links, tekst ernaast, de lijn loopt omlaag naar het volgende nummer. */
  .werkt-stap a { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 12px 12px 28px; }
  .werkt-stap:last-child a { padding-bottom: 12px; }
  .werkt-stap:not(:last-child)::after { top: 64px; bottom: 0; left: 31px; right: auto; width: 2px; height: auto; }
  .werkt-nr { grid-row: span 2; margin-bottom: 0; }
  .werkt-stap b { font-size: 24px; align-self: center; min-height: 40px; display: flex; align-items: center; }
}

/* Aanvragen: een donker vlak in de kleuren van de app. */
#aanvragen { padding-top: 96px; padding-bottom: 96px; }
.aanvraag { background: #1b1f29; color: #fff; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 24px; padding: clamp(28px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: center; }
.aanvraag-tekst { flex: 1 1 400px; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.aanvraag-tekst img { height: 44px; width: auto; margin-bottom: 14px; }
.aanvraag-tekst h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; }
.aanvraag-tekst p { color: #9e9ea6; }
.aanvraag-tekst .knop { margin-top: 10px; }
.aanvraag .k:focus-visible { outline-color: #4fd1c5; }
/* Onderin het slotblok steekt een tablet omhoog, afgesneden door de rand van het vlak. */
.aanvraag { overflow: hidden; }
.aanvraag-beeld { flex: 1 1 100%; height: clamp(170px, 24vw, 300px); margin-bottom: calc(-1 * clamp(28px, 5vw, 64px)); display: flex; justify-content: center; overflow: hidden; }
.aanvraag-beeld .tablet { width: min(720px, 100%); align-self: flex-start; }
.stappen { flex: 1 1 340px; min-width: 0; margin: 0; padding: 8px; list-style: none; display: flex; flex-direction: column; gap: 4px; background: #0f1218; border-radius: 16px; }
.stappen[hidden] { display: none; }
.stappen li { display: flex; gap: 16px; align-items: flex-start; padding: 16px; }
.stappen li + li { border-top: 1px solid rgba(255, 255, 255, 0.09); }
.stappen li > span { flex: 0 0 36px; height: 36px; border-radius: 50%; background: rgba(79, 209, 197, 0.12); color: #4fd1c5; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; }
.stappen b { display: block; font-size: 18px; font-weight: 600; }
.stappen p { font-size: 16px; color: #9e9ea6; margin-top: 2px; }

/* Voet: overal dezelfde (scripts/site.mjs). Op de computer twee helften, links het logo met de
   rijtjes, rechts Al lid achter een dunne lijn; op de telefoon logo, Al lid, rijtjes onder elkaar. */
.voet { background: var(--voet); border-top: 1px solid rgba(0, 0, 0, 0.06); }
.voet-binnen { display: flex; flex-direction: column; gap: 48px; padding-top: 56px; padding-bottom: 28px; }
.voet-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; grid-template-areas: 'merk lid' 'rijtjes lid'; gap: 36px 56px; }
.voet-raster.zonder-lid { grid-template-rows: auto; grid-template-areas: 'merk rijtjes'; }
.voet-merk { grid-area: merk; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.voet-merk img { height: 48px; width: auto; }
.voet-merk p { max-width: 360px; font-size: 17px; line-height: 25px; color: var(--muted); }
.voet-rijtjes { grid-area: rijtjes; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 420px; align-content: start; }
.voet-kop2 { margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.voet-rijtjes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.voet-rijtjes a { font-size: 16px; color: #33333a; text-decoration: none; border-radius: 6px; }
.voet-rijtjes a:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.voet-rijtjes a:focus-visible { outline: 3px solid var(--turkoois); outline-offset: 3px; }
.voet-lid { grid-area: lid; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-left: 56px; border-left: 1px solid var(--line); }
.voet-lid-kop { display: flex; align-items: center; gap: 14px; }
.voet-ico { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--voet-vlak); }
.voet-lid h2 { font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.3; }
.voet-lid-kop p { font-size: 15px; line-height: 21px; }
.voet-lid .open-band { margin-top: 0; max-width: none; }
.voet-app { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-top: 4px; }
.voet-app > span { font-size: 15px; }
.voet-onder { padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.08); font-size: 14px; color: var(--muted); }
.voet-onder p { margin-top: 8px; }
.knop-zwart { background: var(--text); color: #fff; }
.open-band-rij .knop.knop-zwart { color: #fff; }
.knop.knop-zwart:hover { background: #000; }
@media (max-width: 760px) {
  .voet-binnen { gap: 32px; padding-top: 40px; padding-bottom: 24px; }
  .voet-raster, .voet-raster.zonder-lid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'merk' 'lid' 'rijtjes'; gap: 32px; }
  .voet-raster.zonder-lid { grid-template-areas: 'merk' 'rijtjes'; }
  .voet-merk { gap: 12px; }
  .voet-merk img { height: 40px; }
  .voet-merk p { font-size: 16px; line-height: 23px; }
  .voet-lid { padding-left: 0; border-left: 0; gap: 14px; }
  .voet-rijtjes { gap: 20px; max-width: none; }
  .voet-kop2 { margin-bottom: 4px; }
  .voet-rijtjes ul { gap: 0; }
  .voet-rijtjes a { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 520px) {
  .voet .open-band-rij { flex-direction: column; }
  .voet .open-band-rij .knop { justify-content: center; }
  .voet-app { flex-direction: column; align-items: stretch; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
  .voet-app .winkel { flex: 1; justify-content: center; }
}

/* Op een smal scherm passen de namen van de korte delen niet; de maatlijnen blijven. */
@media (max-width: 700px) {
  .maten span { display: none; }
}

@media (max-width: 600px) {
  .logo img { height: 32px; }
  /* Op een telefoon past de link naar de handleiding niet naast Open je band; hij staat onderaan. */
  .kop-link { display: none; }
  .held { padding-bottom: 88px; }
  /* Smal scherm: minder schuin, anders valt de telefoon links buiten beeld. */
  .held-podium { transform: rotateX(6deg) rotateY(-10deg); }
  .held-monitor { transform: translateZ(-30px); }
  .held-telefoon { left: 3%; transform: translateZ(40px); }
  /* Op de telefoon alleen tablet en telefoon, groter: het grote scherm zou te klein worden. */
  .held-beeld { aspect-ratio: 100 / 72; }
  .held-monitor { display: none; }
  .tablet.held-tablet { width: 76%; bottom: 4%; }
  .held-telefoon { width: 30%; }
  .twee, #aanvragen, .laptop-deel { padding-top: 72px; padding-bottom: 72px; }
  .drie { padding-top: 72px; }
  .schakel-4 button { font-size: 16px; }
  /* Twee lange keuzes passen niet naast elkaar; een knoptekst gaat nooit over twee regels. */
  .schakel-2 { grid-template-columns: minmax(0, 1fr); }
  }

/* Tekstpagina's: voorwaarden en privacy. Smal, rustig, gewone links. */
.tekst { max-width: 720px; padding-top: 24px; padding-bottom: 96px; }
.tekst h1 { margin-bottom: 8px; }
.tekst h2 { font-family: inherit; font-size: 22px; font-weight: 600; margin: 40px 0 10px; }
.tekst p, .tekst li { font-size: 18px; }
.tekst p + p { margin-top: 12px; }
.tekst ul { margin: 0; padding-left: 22px; }
.tekst li + li { margin-top: 6px; }
.tekst a { color: var(--turkoois-tekst); }
.tekst-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 40px !important; }
.tekst-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* Aanmelden (stagekit.nl/aanmelden) */
.aanmeld { max-width: 680px; padding-top: 24px; padding-bottom: 96px; }
.aanmeld-kop { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.aanmeld-stappen .is-uit { display: none; }
.aanmeld-vlak { display: flex; flex-direction: column; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 4vw, 36px); }
.aanmeld-vlak h2 { font-size: clamp(28px, 3vw, 36px); }
.aanmeld-vlak h2:focus { outline: none; }
.aanmeld fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.aanmeld fieldset + fieldset { padding-top: 8px; }
.aanmeld legend { padding: 0; margin-bottom: 4px; font-size: 22px; font-weight: 600; }
.veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.veld[hidden] { display: none; }
.veld label { font-size: 16px; font-weight: 500; }
.veld-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.aanmeld input[type='text'], .aanmeld input[type='email'], .aanmeld input[type='url'], .aanmeld input[type='number'], .aanmeld select {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--rand-veld);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 18px;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.aanmeld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.aanmeld input:focus-visible, .aanmeld select:focus-visible { outline: 3px solid var(--turkoois); outline-offset: 1px; border-color: transparent; background-color: var(--surface); }
.adres-veld { display: flex; align-items: center; border: 1px solid var(--rand-veld); border-radius: 16px; background: var(--bg); padding-left: 16px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
/* Een veld dat fout of leeg is: rode rand van twee dik, en de zin eronder (aanmelden.js). */
.aanmeld input[aria-invalid='true'], .aanmeld select[aria-invalid='true'], .adres-veld:has(input[aria-invalid='true']) { border-color: var(--fout); box-shadow: inset 0 0 0 1px var(--fout); }
.aanmeld .adres-veld input[aria-invalid='true'] { box-shadow: none; }
.veld-fout { display: grid; grid-template-rows: 0fr; margin-top: -6px; transition: grid-template-rows var(--t-mid) var(--ease); }
.veld-fout > p { overflow: hidden; min-height: 0; padding-top: 6px; color: var(--fout); font-size: 15px; font-weight: 500; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.veld-fout.is-zichtbaar { grid-template-rows: 1fr; }
.veld-fout.is-zichtbaar > p { opacity: 1; }
.akkoord + .veld-fout { margin-top: -20px; }
.adres-veld:focus-within { outline: 3px solid var(--turkoois); outline-offset: 1px; border-color: transparent; background: var(--surface); }
.adres-veld span { color: var(--muted); font-size: 18px; white-space: nowrap; }
.aanmeld .adres-veld input { border: 0; background: transparent; padding-left: 1px; outline: none; }
.aanmeld .adres-veld input:focus-visible { outline: none; }
.hint { font-size: 15px; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.hint.is-vrij { color: var(--turkoois-tekst); }
.hint.is-bezet { color: #a4190f; }
.codeveld { font-size: 28px !important; letter-spacing: 0.2em; max-width: 220px; }
/* Het hele label is het raakvlak, minstens 48 hoog; het vakje zelf 28. */
.akkoord { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 10px 0; font-size: 17px; cursor: pointer; }
.akkoord input { flex: none; width: 28px; height: 28px; margin: -1px 0 0; accent-color: var(--turkoois); cursor: pointer; }
.akkoord input[aria-invalid='true'] { outline: 2px solid var(--fout); outline-offset: 2px; }
.akkoord a, .aanmeld-vlak a:not(.knop) { color: var(--turkoois-tekst); }
.fout { color: #a4190f; font-size: 16px; min-height: 0; }
.fout:empty { display: none; }
.aanmeld-vlak .knop { align-self: flex-start; }
.aanmeld button.knop { border: 0; cursor: pointer; font-family: inherit; }
.aanmeld button.knop:disabled { opacity: 0.6; cursor: default; }
.tekstknop { border: 0; background: none; padding: 0; font: inherit; color: var(--turkoois-tekst); text-decoration: underline; cursor: pointer; min-height: 44px; }
.weg { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Rustig inkomen: alleen koppen en apparaten komen een keer zacht binnen als ze in beeld
   scrollen; tekst, vragen en blokken staan er gewoon (ontwerpreview 3 november, B3). Alleen met
   script, dus zonder script staat alles er. Elk apparaat komt als geheel, de achtergrond staat stil. */
.komt { opacity: 0; translate: 0 24px; transition: opacity 700ms var(--ease), translate 900ms var(--ease); }
.komt.is-in { opacity: 1; translate: 0 0; }
.tablet-los.komt, .telefoon.komt { translate: none; scale: 0.96; transition: opacity 700ms var(--ease), scale 1100ms var(--ease); }
.tablet-los.komt.is-in, .telefoon.komt.is-in { scale: 1; }

/* De podiumblokken tillen een klein beetje op onder de muis. */
.blok { transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
@media (hover: hover) {
  .blok:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(8, 10, 14, 0.35); }
}

/* Wie minder beweging wil, krijgt niets van dit alles. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
  .wissel .is-weg { opacity: 0; visibility: hidden; }
}

/* Een adres breekt nooit af op het streepje. */
.heel { white-space: nowrap; }

/* Al lid: meteen naar je band. */
.open-band { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
.open-band label { font-size: 15px; font-weight: 500; color: var(--muted); }
.open-band-rij { display: flex; gap: 8px; }
.open-band-rij .adres-veld { flex: 1; min-width: 0; }
.open-band .adres-veld { background: var(--surface); }
.open-band .adres-veld input { flex: 1; min-width: 0; min-height: 52px; border: 0; background: transparent; padding: 0 16px 0 1px; font: inherit; font-size: 18px; color: var(--text); outline: none; }
.open-band-rij .knop { min-height: 54px; }
.open-band-rij .knop { border: 0; font: inherit; font-weight: 600; font-size: 16px; color: var(--text); cursor: pointer; }

/* Wat bands ons vragen: een vraag klapt open met dezelfde beweging als in de app. */
.vragen { padding-top: 96px; padding-bottom: 0; display: flex; flex-direction: column; gap: 32px; }
.vragen-lijst { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.vraag { border-bottom: 1px solid var(--line); }
.vraag h3 { margin: 0; }
.vraag button { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 19px; font-weight: 600; text-align: left; cursor: pointer; border-radius: 8px; }
.vraag button svg { flex: none; color: var(--muted); transition: transform var(--t-mid) var(--ease); }
.vraag button[aria-expanded='true'] svg { transform: rotate(180deg); }
.antwoord { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid) var(--ease); }
.antwoord > div { overflow: hidden; }
.antwoord p { max-width: 720px; padding: 0 4px 20px; opacity: 0; transition: opacity var(--t-mid) var(--ease); }
.vraag.is-open .antwoord { grid-template-rows: 1fr; }
.vraag.is-open .antwoord p { opacity: 1; transition-delay: calc(var(--t-mid) / 3); }
@media (max-width: 600px) { .vragen { padding-top: 72px; } .vraag button { font-size: 18px; } }

/* Wat een bandlid zegt: één echte uitspraak, groot en rustig. */
.citaat { padding-top: 96px; }
.citaat figure { margin: 0 auto; max-width: 820px; display: flex; flex-direction: column; gap: 20px; }
.citaat blockquote { margin: 0; }
.citaat blockquote p { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; font-weight: 500; }
.citaat blockquote p::before { content: '\201C'; }
.citaat blockquote p::after { content: '\201D'; }
.citaat figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 17px; }
.citaat figcaption span { color: var(--muted); }
@media (max-width: 600px) { .citaat { padding-top: 72px; } }

/* Niet gevonden (404.html), canvas "Geen band" (Randy, 6 november): een donker vlak met de vraag en
   rechts de tablet en de telefoon met de naam van de band, eronder de drie redenen en Deel met je band. */
.geenband { padding-top: 8px; padding-bottom: 64px; }
.gb-vlak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding: 56px 56px 0; border-radius: 32px; background: #1b1f29; color: #fff; overflow: hidden; }
.gb-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 56px; min-width: 0; }
.gb-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 4px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-size: 15px; line-height: 1.35; color: #c9c9cf; overflow-wrap: anywhere; }
.gb-chip[hidden] { display: none; }
.gb-stip { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #f5a524; }
.gb-tekst h1 { font-size: clamp(34px, 4.1vw, 52px); line-height: 1.05; }
.gb-zin { max-width: 460px; font-size: 19px; line-height: 28px; color: #c9c9cf; }
.gb-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gb-knoppen .knop { min-height: 52px; padding: 0 22px; font-size: 17px; }
.gb-glas { background: rgba(255, 255, 255, 0.1); color: #fff; }
.gb-glas:hover { background: rgba(255, 255, 255, 0.16); }
.gb-vlak .k:focus-visible { outline-color: #4fd1c5; }
/* De tablet iets gedimd, de telefoon licht gekanteld ervoor met eigen rand en diepere schaduw; bovenin
   beide schermen groot de naam van de band, over de kop van het schermbeeld heen. */
.gb-podium { position: relative; min-height: 420px; }
.gb-tablet { position: absolute; left: 0; right: -40px; bottom: -30px; padding: 14px 14px 0; border-radius: 28px 28px 0 0; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.6); animation-delay: 120ms; }
.gb-tablet img { border-radius: 16px 16px 0 0; filter: brightness(0.82); }
.gb-telefoon { position: absolute; left: -48px; bottom: -64px; width: 172px; padding: 7px; border-radius: 32px; background: #0b0c10; box-shadow: 0 0 0 2px #3a3d46, 0 0 0 3px #0b0c10, 0 34px 60px -14px rgba(0, 0, 0, 0.85), 0 10px 22px -6px rgba(0, 0, 0, 0.6); transform: rotate(-4deg); animation-delay: 240ms; }
.gb-telefoon img { border-radius: 26px; }
.gb-scherm { position: relative; }
.gb-naam { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; height: clamp(40px, 18%, 76px); padding: 0 22px; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, rgba(8, 10, 14, 0.98) 0%, rgba(8, 10, 14, 0.95) 72%, rgba(8, 10, 14, 0) 100%); font: 400 26px/1.1 var(--display); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-telefoon .gb-naam { align-items: flex-end; height: clamp(36px, 14%, 56px); padding: 0 12px 10px; border-radius: 26px 26px 0 0; background: linear-gradient(180deg, rgba(8, 10, 14, 0.97) 0%, rgba(8, 10, 14, 0.88) 70%, rgba(8, 10, 14, 0) 100%); font-size: 14px; }
/* Inkomen 480 ms: tekst, dan de tablet, dan de telefoon. De telefoon houdt zijn kanteling. */
.gb-in { animation: gb-in var(--t-slow) var(--ease) both; }
.gb-telefoon.gb-in { animation-name: gb-in-schuin; }
@keyframes gb-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes gb-in-schuin { from { opacity: 0; transform: translateY(14px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .gb-in, .gb-telefoon.gb-in { animation: none; } }

.gb-redenen { padding-top: 56px; }
.gb-redenen > h2, .gb-deel h2 { font-family: inherit; font-weight: 600; }
.gb-redenen > h2 { margin: 0 0 20px 4px; font-size: 24px; line-height: 1.3; }
.gb-punten { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gb-punten li { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 24px; background: var(--surface); }
.gb-punten li > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.gb-punten b { font-size: 18px; line-height: 1.35; }
.gb-punten li > span:last-child > span { font-size: 16px; line-height: 23px; color: var(--muted); }
.gb-ico { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #e6f1ef; color: var(--turkoois); }
.gb-deel { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 20px; padding: 28px 32px; border-radius: 24px; background: #e6f1ef; }
.gb-deel h2 { font-size: 20px; line-height: 1.3; }
.gb-deel p { margin-top: 4px; font-size: 16px; line-height: 23px; color: #33433f; }
.gb-deel .knop { flex-shrink: 0; min-height: 52px; padding: 0 22px; border: 0; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.gb-deel .knop.is-gekopieerd { background: var(--surface); color: var(--turkoois-tekst); }

@media (max-width: 900px) {
  .gb-vlak { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 22px 0; border-radius: 28px; }
  .gb-tekst { gap: 14px; padding-bottom: 0; }
  .gb-zin { font-size: 17px; line-height: 25px; }
  .gb-podium { width: 100%; max-width: 560px; min-height: 0; height: 250px; margin-top: 24px; }
  .gb-tablet { left: 40px; right: -30px; bottom: auto; top: 0; padding: 10px 10px 0; border-radius: 22px 22px 0 0; }
  .gb-tablet img { border-radius: 12px 12px 0 0; }
  .gb-tablet .gb-naam { padding: 0 14px; border-radius: 12px 12px 0 0; font-size: clamp(16px, 3vw, 22px); }
  .gb-telefoon { left: -6px; bottom: auto; top: 44px; width: 120px; padding: 6px; border-radius: 24px; }
  .gb-telefoon img { border-radius: 18px; }
  .gb-telefoon .gb-naam { padding: 0 8px 7px; border-radius: 18px 18px 0 0; font-size: 10px; }
  .gb-redenen { padding-top: 32px; }
  .gb-redenen > h2 { margin: 0 0 6px 8px; font-size: 21px; }
  .gb-punten { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gb-punten li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 20px; }
  .gb-ico { width: 40px; height: 40px; border-radius: 12px; }
  .gb-punten b { font-size: 17px; }
  .gb-punten li > span:last-child > span { font-size: 15px; line-height: 21px; }
  .gb-deel { flex-direction: column; align-items: flex-start; margin-top: 16px; padding: 22px 20px; border-radius: 22px; }
  .gb-deel h2 { font-size: 19px; }
  .gb-deel p { font-size: 15px; line-height: 21px; }
  .gb-deel .knop { justify-content: center; }
}
@media (max-width: 520px) {
  .geenband > .rand { padding-left: 12px; padding-right: 12px; }
  .gb-knoppen { flex-direction: column; align-self: stretch; }
  .gb-knoppen .knop { justify-content: center; }
  .gb-deel { align-items: stretch; }
}

/* Al lid in de voet: staat er geen band op het adres, dan klapt de vraag eronder open (site.js).
   320 ms; met minder beweging alleen vervagen. */
.lid-vraag { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid) var(--ease); }
.lid-vraag[hidden] { display: none; }
.lid-vraag > div { overflow: hidden; }
.lid-vraag-binnen { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 20px; background: var(--surface); opacity: 0; transform: translateY(-6px); transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.lid-vraag.is-open { grid-template-rows: 1fr; }
.lid-vraag.is-open .lid-vraag-binnen { opacity: 1; transform: none; }
.lid-vraag-kop { font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; outline: none; }
.lid-vraag-binnen .gedempt { font-size: 15px; line-height: 21px; }
.lid-vraag-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lid-vraag-knoppen .knop { min-height: 52px; padding: 0 20px; font-size: 16px; }
.lid-vraag-knoppen button.knop { border: 0; font-family: inherit; color: var(--text); cursor: pointer; }
.lid-vraag-knoppen .knop-rood { color: #fff; }
@media (max-width: 520px) { .lid-vraag-knoppen .knop { flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .lid-vraag, .lid-vraag-binnen { transform: none; transition: opacity var(--t-fast) linear; } }
.open-band button[aria-busy='true'] { cursor: progress; }

/* De vlag in het taalmenu, zoals Taal in de app (DESIGN.md, Kleur: Vlag). */
.vlag { width: 24px; height: 16px; border-radius: 4px; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); display: block; }