/* =========================================================================
   Bandhub — verkoopsite, Hammond-stijl

   SINDS OKTOBER 2026 DE HAMMOND-STIJL. De eigenaar koos uit vijf rustige,
   zakelijke richtingen de kleuren van zijn eigen Hammondlessons.com:
   leisteen (#1b1f29), cyaan (#1ca5d2) als actiekleur, goud (#dcba46) als
   klein accent, en Inter als letter. De site en backstage dragen weer
   dezelfde huisstijl; het logo en de merkkleur zijn in beide huizen gelijk
   (zie --merk, en de toets in tests/test_verkoopsite.php).

   Daarvóór: tot 9 september de huid van backstage, één dag warm papier, en
   tot oktober weer de kleuren van backstage met een handgetekende laag
   (markeerstift, tape, schetsjes). Die laag is eruit: de doelgroep zijn
   georganiseerde mensen, en de eigenaar wilde het strak en rustig.

   De tokennamen zijn gebleven -- --papier, --inkt, --zacht -- want die zeggen
   wat een kleur DOET op deze site; de toetsen lezen ze zo. Eén naam is
   veranderd: --groen-tekst heet nu --accent-tekst, want groen is het niet
   meer.

   LET OP DE OMKERING: licht is hier de hoofdmodus, donker de variant. In de
   applicatie is dat andersom. Het scriptje in partials/kop.php zet daarom
   alleen iets als het donker moet worden.
   ========================================================================= */

:root {
  /* vlakken */
  --papier:   #eef1f4;   /* paginavlak */
  --papier-2: #ffffff;   /* kaart */

  /* tekst */
  --inkt:  #1b1f29;      /* koppen en lopende tekst — 15,3:1 op papier */
  --zacht: #4a4a5a;      /* bijschrift, toelichting — 7,7:1 op papier */

  /* Cyaan als TEKST. Het cyaan van de knoppen (#1ca5d2) haalt op wit maar
     2,9:1; backstage gebruikt #12799b, maar die haalt op het grijzere papier
     van deze site net geen 4,5:1. Eén stap donkerder in dezelfde tint haalt
     5,1:1 op papier en 5,9:1 op een kaart. */
  --accent-tekst: #0f6d8c;

  /* lijnen */
  --lijn: #dde2e8;

  /* Standaard voor de donkere schermafdruk. site_afdruk() overschrijft hem per
     <figure>; staat hij er onverhoopt niet, dan laat `content: none` de
     lichte opname gewoon staan in plaats van een leeg vlak achter te laten. */
  --afdruk-donker: none;

  /* --stift is een streepje of rand dat iets aanwijst (een opsomming, een
     open vraag). --stift-vlak is het vlak achter gemarkeerde tekst; daar
     loopt --inkt overheen, dus die moet in beide thema's 4,5:1 halen. */
  --stift:      #1ca5d2;
  --stift-vlak: #d8eff8;   /* inkt hierop haalt 13,9:1 */

  /* De pennen voor ja en nee: een vinkje en een kruisje. */
  --potlood: #1f7a4d;      /* ja — 4,6:1 op papier */
  --rood:    #b42318;      /* nee — 6,1:1 op papier */

  /* De merkkleur: de eerste staaf van het logo, goud zoals op
     Hammondlessons. Dezelfde waarde als --merk in static/css/style.css. Hij
     wisselt NIET met het thema -- een merkkleur die meebeweegt is geen
     merkkleur. */
  --merk: #dcba46;

  /* DE ACTIEKLEUR: een dieper cyaan met een witte letter erop. Tot oktober
     2026 was het het lichte cyaan van Hammondlessons (#1ca5d2) met donkere
     inkt; de eigenaar vond een witte letter mooier. Wit op dat lichte cyaan
     haalt maar 2,9:1, vandaar deze tint: wit haalt hierop 4,7:1. Het lichte
     cyaan blijft voor wat geen tekst draagt (--stift: streepjes, randen, de
     equalizer). Wisselt niet met het thema. */
  --actie:       #127da2;
  --actie-ink:   #ffffff;
  --actie-hover: #0f6d8c;   /* donkerder, niet lichter: wit haalt hierop 5,9:1 */

  /* De nacht: het donkere leisteen van de kop, de opening van de startpagina
     en de koppen van de verhaalpagina's. In beide thema's gelijk, zoals de
     kop van Hammondlessons. */
  --nacht:       #1b1f29;
  --nacht-inkt:  #ffffff;   /* 16,3:1 */
  --nacht-zacht: #c5cad3;   /* 10,0:1 */
  --nacht-lijn:  #3a4152;
  --goud:        #dcba46;   /* het regeltje boven een kop, op de nacht — 8,6:1 */
  --nacht-link:  #4cc3ea;   /* een link of accentwoord op de nacht — 8,0:1 */

  /* De opening van de startpagina en de koppen van de verhaalpagina's. In de
     lichte stand wit, op verzoek van de eigenaar: een groot donker vlak
     bovenaan maakte de hele lichte pagina donker. In de donkere stand is het
     de nacht. Alleen de kop (de menubalk) blijft in beide thema's donker. */
  --held-bg:    #ffffff;
  --held-inkt:  #1b1f29;   /* 16,3:1 */
  --held-zacht: #4a4a5a;   /* 9,0:1 */
  --held-lijn:  #dde2e8;
  --held-oog:   #0f6d8c;   /* het regeltje boven de kop — 5,9:1 */
  --held-titel: #1384ab;   /* het laatste woord van de kop — 4,3:1, grote tekst */
  --held-punt:  #e3e8ee;   /* het stippenraster op de achtergrond, zoals in backstage */

  /* vorm */
  --radius:    8px;
  --radius-lg: 12px;

  /* typografie — Inter, zoals Hammondlessons en backstage */
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  color-scheme: light;
}

[data-theme="dark"] {
  --papier:   #151821;
  --papier-2: #1f2430;

  --inkt:  #f2f4f7;        /* 16,1:1 op papier */
  --zacht: #a4abba;        /* 7,9:1 op papier */
  --accent-tekst: #4cc3ea; /* 8,6:1 op papier */

  --lijn: #2c3242;

  --stift-vlak: #163444;   /* hier loopt bijna witte inkt overheen — 11,2:1 */
  --potlood:    #7fd1a3;
  --rood:       #ff8f84;

  /* --merk, --actie en de nacht staan hier bewust NIET: die wisselen niet. */

  --held-bg:    #1b1f29;
  --held-inkt:  #ffffff;
  --held-zacht: #c5cad3;
  --held-lijn:  #3a4152;
  --held-oog:   #dcba46;   /* goud, zoals op Hammondlessons */
  --held-titel: #4cc3ea;
  --held-punt:  #262b38;

  color-scheme: dark;
}

/* =========================================================
   Basis
   ========================================================= */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* De opening van de startpagina loopt over de volle breedte (zie .held);
     clip voorkomt dat een schuifbalk van 100vw de pagina zijwaarts laat
     schuiven. */
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

/* ── Koppen ───────────────────────────────────────────────────────────── */

h1, h2, h3, .kop-groot {
  font-family: var(--font);
  color: var(--inkt);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0 0 .45em;
  /* Alleen een vangnet, géén hyphens: auto hier. Afbreken geldt bij élke
     regelovergang, niet alleen als een woord niet past. overflow-wrap
     grijpt alleen in als een woord echt niet past. Het afbreken zelf staat
     op .site-juridisch h1, waar "Verwerkersovereenkomst" woont. */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.05; letter-spacing: -.028em; }
h2 { font-size: clamp(26px, 3vw, 34px); }
h3 { font-size: clamp(19px, 1.8vw, 22px); letter-spacing: -.012em; }

/* Het regeltje boven een kop: klein, in kapitalen, in de accentkleur. Op de
   nacht (de donkere opening) wordt het goud, zoals op Hammondlessons. */
.bovenregel {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-tekst);
}

.site-cijfer { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Kop ─────────────────────────────────────────────────────────────── */

/* De kop is de nacht: donker leisteen in beide thema's, zoals op
   Hammondlessons. Hij blijft staan bij het scrollen, zodat het menu en
   "Aanmelden" op de lange verhaalpagina's bereikbaar blijven. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--nacht);
  color: var(--nacht-inkt);
  border-bottom: 1px solid var(--nacht-lijn);
}

.site-header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-logo { display: inline-flex; }
/* Het woordmerk BANDHUB is Archivo op 85% breedte, net als in backstage. Dat
   stond vroeger op body en erfde de tekst in het logo vanzelf mee; sinds de
   letter Inter is, staat het hier. Zonder deze regel wordt het woord breder
   dan zijn viewBox en valt de B eraf. */
.site-logo-mark text { font-stretch: 85%; }
.site-logo-accent { fill: var(--merk); }
.site-logo-ink { fill: var(--inkt); }
.site-header .site-logo-ink { fill: var(--nacht-inkt); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* De links staan in een eigen doosje omdat de menuknop ze op een telefoon
   als geheel moet kunnen wegklappen; op een breed scherm is dit de rij. */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* De menuknop blijft buiten beeld tot het scherm smal is en het scriptje in
   voet.php hem heeft aangezet. Zonder JavaScript blijft de afbrekende rij. */
.site-nav-menuknop { display: none; }
.site-nav-menuknop[hidden] { display: none; }

.site-nav a {
  text-decoration: none;
  color: var(--nacht-zacht);
  font-weight: 500;
  font-size: 15px;
}

.site-nav a:hover { color: var(--nacht-inkt); }

/* De pagina waar je bent: wit, met een dunne streep eronder. */
.site-nav a[aria-current="page"] {
  color: var(--nacht-inkt);
  box-shadow: inset 0 -2px 0 var(--stift);
}

.site-nav-home { display: inline-flex; align-items: center; }
.site-nav-home svg { display: block; }

/* Aanmelden: de enige gevulde knop in de kop, in de actiekleur. Twee klassen
   zwaar, zodat de regel voor de huidige pagina hem niet overschildert. */
.site-nav a.site-nav-cta {
  background: var(--actie);
  color: var(--actie-ink);
  padding: 9px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  box-shadow: none;
}
.site-nav a.site-nav-cta:hover { background: var(--actie-hover); }

/* Inloggen: omlijnd. Gevuld is de weg naar binnen voor wie nog geen klant
   is, omlijnd de deur voor wie dat al wel is. */
.site-nav-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--nacht-lijn);
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--nacht-inkt) !important;
  font-weight: 500;
}
.site-nav-login:hover { border-color: var(--nacht-zacht); }
.site-nav-login svg { display: block; }

/* De themaschakelaar. Eerst de [hidden]-regel, anders wint de display
   hieronder van het hidden-attribuut. */
.site-nav-thema[hidden] { display: none; }

.site-nav-thema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--nacht-zacht);
  cursor: pointer;
}
.site-nav-thema:hover { color: var(--nacht-inkt); background: var(--nacht-lijn); }

.site-nav a:focus-visible,
.site-nav-thema:focus-visible,
.site-nav-menuknop:focus-visible {
  outline: 2px solid var(--actie);
  outline-offset: 3px;
}

/* ── Inhoud ──────────────────────────────────────────────────────────── */

.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

/* ── Voet ────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--lijn);
  margin-top: 88px;
}

.site-footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  flex-wrap: wrap;
  color: var(--zacht);
  font-size: 14px;
}

.site-footer-links { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.site-footer-links a { color: var(--zacht); text-decoration: none; }
.site-footer-links a:hover { color: var(--inkt); }

.site-footer-merk { font-weight: 700; color: var(--inkt); }

/* ── Knoppen en formulieren ──────────────────────────────────────────── */

/* .knop en .site-btn zijn hetzelfde: cyaan met een witte letter. */
.knop, .site-btn, .site-btn-primary {
  display: inline-block;
  background: var(--actie);
  color: var(--actie-ink);
  border: 0;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.knop:hover, .site-btn:hover { background: var(--actie-hover); }

.knop-2 {
  display: inline-block;
  text-align: center;
  padding: 12px 20px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  color: var(--inkt);
  font-weight: 500;
  text-decoration: none;
}
.knop-2:hover { border-color: var(--zacht); }

.knop:focus-visible, .site-btn:focus-visible, .knop-2:focus-visible {
  outline: 2px solid var(--accent-tekst);
  outline-offset: 2px;
}

.site-form-group { margin-bottom: 16px; }

.site-form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--inkt);
}

.site-form-control {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--papier-2);
  color: var(--inkt);
  font: inherit;
}

.site-form-control:focus {
  outline: none;
  border-color: var(--actie);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--actie) 25%, transparent);
}

/* ── Inlogpopup ──────────────────────────────────────────────────────── */

.site-login-dialog {
  border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);
  background: var(--papier-2);
  color: var(--inkt);
  padding: 28px;
  width: 100%;
  max-width: 380px;
}

.site-login-dialog::backdrop { background: rgba(11, 13, 18, .6); }

.site-login-form { position: relative; }

.site-login-title { margin: 0 0 20px; font-size: 24px; }

.site-login-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--papier-2);
  color: var(--zacht);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.site-login-close:hover { color: var(--inkt); }

.site-login-submit { width: 100%; margin-top: 4px; }
.site-login-hulp { margin: 14px 0 0; text-align: center; font-size: 14px; }

/* De melding boven de velden in het inlogvenster: wat er misging, in gewone
   woorden. --rood haalt 4,5:1 op papier. */
.site-login-melding {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--rood);
  border-radius: var(--radius);
  color: var(--rood);
  font-size: 14px;
  line-height: 1.45;
}
.site-login-hulp a { color: var(--accent-tekst); text-decoration: none; }
.site-login-hulp a:hover { text-decoration: underline; }

/* ── Het probleem ─────────────────────────────────────────────────────────
   Eén alinea op een kaart, op de startpagina. Hij heet nog .notitie: in de
   vorige stijl was het een scheef blaadje met tape. */

.notitie {
  max-width: 820px;
  margin: 64px auto;
  padding: 32px 36px;
  background: var(--papier-2);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);
  font-size: 20px;
  line-height: 1.55;
}
.notitie p { margin: 0; }
.notitie mark {
  background: var(--stift-vlak);
  color: var(--inkt);
  padding: 0 4px;
  border-radius: 4px;
}

/* ── De afdruk ────────────────────────────────────────────────────────────
   Een schermafbeelding uit Bandhub, op een witte kaart met een dunne rand.
   Recht, niet scheef: de vorige stijl legde hem neer als een foto op tafel. */

.afdruk {
  margin: 0 0 32px;
  background: var(--papier-2);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.afdruk img {
  /* max-width, NIET width: 100%. Met width: 100% zakken beeld en omhulsel
     op elkaar in zodra de afdruk in een kolom staat die op inhoud meet
     (.site-verhaal-schermen heeft align-items: flex-start): de figure wacht
     op het beeld, het beeld op de figure, en het resultaat was 250 px op een
     scherm van 1280. Zo toont elke opname zijn eigen formaat tot aan de
     kolombreedte, en wordt hij nooit opgeblazen.

     height: auto overschrijft het height="..."-attribuut; zonder die regel
     krimpt alleen de breedte mee en wordt de afbeelding uitgerekt. */
  max-width: 100%; width: auto; height: auto; display: block; border-radius: var(--radius);
}
.afdruk figcaption { margin: 10px 4px 2px; font-size: 14px; color: var(--zacht); }

/* ── De afdruk wisselt mee met het thema ─────────────────────────────────
   De lichte opname staat in de src, de donkere komt hier via `content:`
   overheen -- site_afdruk() (site/partials/afdruk.php) zet hem als
   --afdruk-donker op de <figure>.

   Waarom zo en niet met <picture>: dat leest alleen prefers-color-scheme, en
   deze site kent die schakelaar in CSS niet. Het scriptje in partials/kop.php
   beslist en zet uitsluitend [data-theme="dark"]. Eén regel dus. (Een
   @media (prefers-color-scheme: dark) sloeg ooit aan op een lichte pagina op
   een donker apparaat, met een donkere opname op licht papier als gevolg.)

   Kan een browser `content:` op een <img> niet aan, dan blijft de lichte
   opname staan. */
[data-theme="dark"] .afdruk img,
[data-theme="dark"] .afdruk-tablet img { content: var(--afdruk-donker); }

/* ── Het telefoonscherm van het publieke portaal ─────────────────────────
   Een toestel en geen kaart. Getekend in CSS: deze site laadt niets van
   buiten, en een toestel van rechthoeken schaalt mee met het beeld erin. */
.afdruk-telefoon {
  /* 200 en niet meer: een telefoon is ruim twee keer zo hoog als breed, dus
     de enige knop die aan de hoogte draait zonder te liegen over de vorm, is
     de breedte. */
  max-width: 200px;
  margin: 0 0 32px;
  background: none;
  border: 0;
  padding: 0;
}

.telefoon {
  position: relative;
  padding: 6px;
  border-radius: 28px;
  background: var(--nacht);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Een strook boven het beeld, in de kleur van het portaal zelf: de opname
   begint bij de eerste regel van de pagina, waar een echte telefoon eerst
   nog een statusbalk heeft. */
.telefoon-scherm {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #0a0c10;
  padding-top: 18px;
}

.telefoon img { display: block; width: 100%; height: auto; }

.telefoon-eiland {
  position: absolute;
  top: 5px;
  left: 50%;
  translate: -50% 0;
  width: 31%;
  height: 10px;
  border-radius: 999px;
  background: #000;
}

/* ── Hetzelfde scherm op een tablet ──────────────────────────────────────
   Deze opname wisselt wél mee met het thema: het is een scherm uit backstage
   en geen publiek portaal. De regel die dat doet staat hierboven. */
.afdruk-tablet {
  max-width: 520px;
  align-self: center;
  margin: 0 0 32px;
  background: none;
  border: 0;
  padding: 0;
}

.tablet {
  position: relative;
  padding: 16px;
  border-radius: 26px;
  background: var(--nacht);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Concentrisch: de binnenste straal is de buitenste min de rand. */
.tablet-scherm { border-radius: 10px; overflow: hidden; }
.tablet-scherm img { display: block; width: 100%; height: auto; }

.tablet-lens {
  position: absolute;
  left: 6px;
  top: 50%;
  translate: 0 -50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0b0b0c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.afdruk-tablet figcaption { margin-top: 12px; font-size: 14px; color: var(--zacht); }

/* ── Gedeelde blokken ────────────────────────────────────────────────────
   .site-hero op prijs.php en aanmelden.php, .site-scheiding op
   programmeurs.php en overzicht.php, .site-nadruk op de verhaalpagina's. */

.site-hero { max-width: 720px; margin: 16px auto 40px; text-align: center; }
.site-hero-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--zacht); }

.site-nadruk { color: var(--inkt); font-weight: 600; }

/* Een blok dat een grens trekt of een kanttekening maakt: een kaart. */
.site-scheiding {
  max-width: 760px; margin: 72px auto;
  padding: 30px 34px;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2);
}
.site-scheiding h2 { margin-bottom: .35em; font-size: clamp(22px, 2.4vw, 28px); }
.site-scheiding p { color: var(--zacht); margin: 0; line-height: 1.65; }
.site-scheiding p + p { margin-top: 12px; }

/* ── Verhaalpagina's ──────────────────────────────────────────────────────
   bandleden.php, programmeurs.php en overzicht.php: een kop op de nacht met
   een groot pictogram ernaast, en daaronder afwisselend tekst en afdrukken. */

.pagina-kop {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 40px;
  align-items: center; margin: 0 0 64px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--held-lijn);
  border-radius: var(--radius-lg);
  background: var(--held-bg);
  color: var(--held-inkt);
}
.pagina-kop .site-paginakop { margin-bottom: 0; }
.pagina-kop .bovenregel { color: var(--held-oog); }
.pagina-kop h1 { color: var(--held-inkt); }
.pagina-kop .site-paginakop p { color: var(--held-zacht); }
.pagina-kop-beeld {
  justify-self: center;
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stift) 16%, transparent);
  color: var(--stift);
}
.pagina-kop-beeld svg { width: 76px; height: 76px; }

.site-paginakop { margin: 0 0 40px; max-width: 720px; }
.site-paginakop h1 { margin: 0 0 .35em; }
.site-paginakop p  { margin: 0; color: var(--zacht); font-size: 18px; line-height: 1.6; }

.site-verhaal { margin: 80px 0; }
.site-verhaal-tekst { max-width: 720px; margin: 0 0 32px; }
.site-verhaal-tekst h2 { margin-bottom: .35em; }
.site-verhaal-tekst p { color: var(--zacht); line-height: 1.7; }
.site-verhaal-tekst p + p { margin-top: 16px; }

/* Kolom, niet rij: twee afdrukken komen onder elkaar te staan. Naast elkaar
   steelt de tweede breedte van de eerste, en dan wordt een scherm van 1440px
   in ruim 500px geperst. */
.site-verhaal-schermen { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

/* Het telefoonscherm met tekst ernaast, samen gecentreerd: dit paar is zo'n
   680 breed en hing anders scheef in de kolom. */
.site-scherm-paar { display: flex; gap: 40px; align-items: center; align-self: center; }
.site-scherm-paar .afdruk { flex: 0 0 auto; margin-bottom: 0; }
/* flex-basis 46ch en niet 0: sinds de rij zich naar zijn inhoud voegt is er
   niets meer om in te groeien, en zakte de tekst anders in tot 368 px. */
.site-scherm-naast { flex: 0 1 46ch; min-width: 0; max-width: 46ch; }
.site-scherm-naast h3 { margin: 0 0 12px; }
.site-scherm-naast p { margin: 0 0 12px; color: var(--zacht); line-height: 1.65; }
.site-scherm-naast p:last-child { margin-bottom: 0; }

/* De doorverwijzing onderaan een pagina naar de volgende. */
.site-volgende {
  margin: 64px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--lijn);
}
.site-volgende a { color: var(--accent-tekst); font-weight: 600; text-decoration: none; font-size: 17px; }
.site-volgende a:hover { text-decoration: underline; }

/* ── Prijs ──────────────────────────────────────────────────────────────── */

.site-prijs { margin: 48px 0 24px; }

/* Eén kaart, geen raster: er is maar één pakket. Twee kaarten naast elkaar
   die alleen in betaaltermijn verschillen, zetten een keuze neer waar er
   geen is. */
.site-prijs-kaart {
  max-width: 460px; margin: 0 auto;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2); padding: 32px 30px 30px; text-align: center;
}

/* ── De twee tabbladen, zonder JavaScript ────────────────────────────────
   De radioknoppen staan bovenin de kaart en zijn onzichtbaar maar bereikbaar:
   niet display:none, want dan verdwijnen ze ook voor het toetsenbord en voor
   wie de pagina laat voorlezen. De labels zijn wat je ziet en aanklikt. */
.site-prijs-keuze {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.site-prijs-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 0 0 24px; padding: 4px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--papier);
}
.site-prijs-tabs label {
  padding: 9px 6px; border-radius: calc(var(--radius) - 3px);
  font-size: 14px; font-weight: 600; color: var(--zacht);
  cursor: pointer; user-select: none;
}
.site-prijs-tabs label:hover { color: var(--inkt); }

/* Het gekozen tabblad: een witte tab die vooraan ligt. */
#prijs-maand:checked ~ .site-prijs-tabs label[for="prijs-maand"],
#prijs-jaar:checked  ~ .site-prijs-tabs label[for="prijs-jaar"] {
  background: var(--papier-2); color: var(--inkt);
  box-shadow: 0 0 0 1px var(--lijn);
}

/* Zichtbare focus, want met het toetsenbord is de radioknop zelf
   onzichtbaar. */
.site-prijs-keuze:focus-visible ~ .site-prijs-tabs label[for="prijs-maand"],
.site-prijs-keuze:focus-visible ~ .site-prijs-tabs label[for="prijs-jaar"] {
  outline: 2px solid var(--actie); outline-offset: 2px;
}

.site-prijs-wenk {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 600;
  color: var(--potlood);
}

/* Allebei de vlakken staan in de HTML; er is er één zichtbaar. Zo blijft elke
   aanmeldknop met zijn termijn vindbaar voor wie geen CSS krijgt. */
.site-prijs-vlak { display: none; }
#prijs-maand:checked ~ .site-prijs-vlak-maand,
#prijs-jaar:checked  ~ .site-prijs-vlak-jaar { display: block; }

.site-prijs-bedrag { margin: 0; }

.site-prijs-getal {
  display: block;
  font-size: clamp(44px, 5vw, 54px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--inkt);
}
.site-prijs-per  { display: block; margin-top: 6px; font-size: 14px; color: var(--zacht); }
.site-prijs-jaar { margin: 10px 0 0; font-size: 14px; color: var(--zacht); }

/* Wat je krijgt: een vinkje in de accentkleur. Links uitgelijnd terwijl de
   kaart gecentreerd is: een opsomming leest niet gecentreerd. */
.site-prijs-lijst {
  margin: 24px 0 0; padding: 0; list-style: none;
  text-align: left; font-size: 15px; line-height: 1.5;
}
.site-prijs-lijst li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.site-prijs-lijst li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent-tekst); font-weight: 700;
}

/* De streep boven de slotregel. Een rand en geen <hr>, zodat er geen leeg
   element in de opsomming staat voor wie de pagina voorleest. */
.site-prijs-voorwie {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--lijn);
  font-size: 14px; color: var(--zacht); text-align: left;
}

/* De uitnodiging om te mailen bij meer dan twee bands: een uitzondering voor
   een enkeling, geen belofte aan iedereen. */
.site-prijs-meer {
  margin: 10px 0 0;
  font-size: 13.5px; line-height: 1.55; color: var(--zacht); text-align: left;
}
.site-prijs-meer a { color: var(--accent-tekst); }

.site-prijs-knop { width: 100%; margin-top: 22px; }

.site-prijs-anders { margin: 14px 0 0; font-size: 14px; }
.site-prijs-anders a { color: var(--zacht); }
.site-prijs-anders a:hover { color: var(--inkt); }

/* ── Routekaart ─────────────────────────────────────────────────────────── */

/* Twee kolommen: links wat er nu is, rechts waar aan gewerkt wordt.
   min-width: 0 op het blok: zonder dat blijft een rasterkolom minstens zo
   breed als zijn inhoud en duwt de tabel de pagina breder dan het scherm. */
.site-routekaart {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.site-routekaart-blok {
  min-width: 0; margin: 0;
  padding: 26px 28px;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2);
}
.site-routekaart-blok h2 { margin: 0 0 16px; font-size: 20px; }
.site-routekaart-blok > p { color: var(--zacht); line-height: 1.6; }

.site-routekaart-lijst {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.site-routekaart-lijst li {
  position: relative; padding-left: 22px;
  color: var(--zacht); line-height: 1.6;
}
.site-routekaart-lijst li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--stift);
}
.site-routekaart-lijst a { color: var(--accent-tekst); font-weight: 600; text-decoration: none; }
.site-routekaart-lijst a:hover { text-decoration: underline; }

/* De tabel mag op een smal scherm breder zijn dan de kolom: liever zijwaarts
   schuiven dan elke toelichting tot op het woord afbreken. De pagina zelf
   schuift nooit horizontaal. */
.site-routekaart-tabel-wrap { overflow-x: auto; }
.site-routekaart-tabel { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; }
.site-routekaart-tabel th {
  text-align: left; padding: 0 12px 10px 0;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht);
  border-bottom: 1px solid var(--lijn);
}
.site-routekaart-tabel td {
  padding: 12px 12px 12px 0; color: var(--inkt); line-height: 1.55;
  border-bottom: 1px solid var(--lijn); vertical-align: top;
}
.site-routekaart-tabel td:first-child { font-weight: 600; white-space: nowrap; }
.site-routekaart-tabel tr:last-child td { border-bottom: none; }

/* ── Aanmelden ──────────────────────────────────────────────────────────── */

.site-aanmeld { max-width: 480px; margin: 0 auto 80px; }
.site-aanmeld-kaart {
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2); padding: 32px 30px;
}
.site-aanmeld-submit { width: 100%; margin-top: 4px; }

/* De termijnkeuze in het aanmeldformulier: dezelfde tabbladen als op de
   prijskaart, uit hetzelfde bestand (partials/prijskaart.php), maar hier zijn
   de radioknoppen het echte veld. */
.site-aanmeld-kop {
  margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--inkt);
}

/* Het pakketvlak: naam links, bedrag rechts, en het geheel wisselt mee met
   het tabblad. De regel hierboven zet een zichtbaar vlak op display:block;
   dit vlak wil flex, dus staat het er met één klasse meer specificiteit. */
.site-aanmeld-plan {
  align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 22px; padding: 14px 16px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--papier);
}
#prijs-maand:checked ~ .site-prijs-vlak-maand.site-aanmeld-plan,
#prijs-jaar:checked  ~ .site-prijs-vlak-jaar.site-aanmeld-plan { display: flex; }

.site-aanmeld-plan-naam { font-weight: 600; color: var(--inkt); }
.site-aanmeld-plan-bedrag {
  font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--zacht); text-align: right;
}

.site-aanmeld-klein { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--zacht); }
.site-aanmeld-klein a { color: var(--zacht); }
.site-aanmeld-klein a:hover { color: var(--inkt); }

.site-aanmeld-onder { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--zacht); }
.site-aanmeld-onder a { color: var(--accent-tekst); }

.site-form-wenk { margin: 6px 0 0; font-size: 13px; color: var(--zacht); }

/* ── De betaalmethode ────────────────────────────────────────────────────
   Vijf regels, één aangevinkt, en de hele regel is aanklikbaar -- niet alleen
   het bolletje. Zie prijskaart_betaalwijze() in site/partials/prijskaart.php. */
.site-betaalwijze {
  margin: 0 0 22px; padding: 0; list-style: none;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--papier); overflow: hidden;
}
.site-betaalwijze li + li { border-top: 1px solid var(--lijn); }
.site-betaalwijze label {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  font-size: 15px; line-height: 1.3;
}
.site-betaalwijze input { margin: 0; accent-color: var(--actie); align-self: center; }
.site-betaalwijze li:has(input:checked) { background: var(--papier-2); }
.site-betaalwijze li:has(input:focus-visible) { outline: 2px solid var(--actie); outline-offset: -2px; }
.site-betaalwijze-naam { font-weight: 600; color: var(--inkt); }
.site-betaalwijze-wenk { font-size: 13px; color: var(--zacht); }

/* ── Juridische pagina's ─────────────────────────────────────────────────
   Voorwaarden, privacy en verwerkersovereenkomst: lange lopende tekst. Een
   smallere leeskolom en duidelijke tussenkopjes houden dat leesbaar. */

.site-juridisch { max-width: 680px; margin: 0 auto; }

/* Kleiner dan elders: de kop moet de pagina benoemen en dan uit de weg gaan.
   Hier wél afbreken: "Verwerkersovereenkomst" is één woord van 22 letters.
   De pagina staat op lang="nl", dus de browser breekt op de Nederlandse
   regels af. */
.site-juridisch h1 {
  font-size: clamp(30px, 3.6vw, 44px); margin-bottom: .4em;
  -webkit-hyphens: auto; hyphens: auto;
}

.site-juridisch-inleiding { color: var(--zacht); margin-bottom: 32px; line-height: 1.65; }

/* De melding dat de pagina nog niet is vastgesteld — bovenaan en zichtbaar,
   niet in klein grijs onderaan. */
.site-juridisch-melding {
  margin: 0 0 40px;
  padding: 16px 20px;
  border: 1px solid var(--lijn);
  background: var(--papier-2);
  border-radius: var(--radius-lg);
}
.site-juridisch-melding p { margin: 0; color: var(--inkt); line-height: 1.6; }
.site-juridisch-melding p + p { margin-top: 8px; }
.site-juridisch-melding strong { color: var(--inkt); }

.site-juridisch-kop {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--lijn);
}
.site-juridisch-kop:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.site-juridisch-kop h2 { font-size: clamp(20px, 2.2vw, 24px); }
.site-juridisch-kop > p { color: var(--inkt); line-height: 1.65; }

/* De vraag die de eigenaar of zijn jurist per kopje moet beantwoorden — de
   kern van deze steigerpagina's. Een rand in de accentkleur: dit staat open. */
.site-juridisch-vraag {
  margin: 14px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--stift);
  background: var(--papier-2);
  color: var(--zacht);
  font-size: 15px;
  line-height: 1.6;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.site-juridisch-vraag strong { color: var(--inkt); }

/* Wat de software feitelijk doet — vastgesteld in de code, geen vraag meer.
   De groene pen van een vinkje. */
.site-juridisch-feit {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--potlood);
  background: var(--papier-2);
  color: var(--inkt);
  font-size: 15px;
  line-height: 1.6;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.site-juridisch-feit strong { color: var(--inkt); }

/* Een technisch punt dat de code zelf niet vastlegt. Zelfde vorm als het
   feit, maar met de rode pen, zodat het niet voor een afgeronde vaststelling
   wordt aangezien. */
.site-juridisch-feit-open { border-left-color: var(--rood); }
.site-juridisch-feit-open strong { color: var(--inkt); }

@media (max-width: 480px) {
  .site-juridisch h1 { font-size: 30px; }
  .site-juridisch-melding { padding: 14px 16px; }
  .site-juridisch-vraag, .site-juridisch-feit { padding: 10px 14px; font-size: 14px; }
}

/* ── Startpagina ──────────────────────────────────────────────────────── */

/* De opening over de volle breedte: wit in de lichte stand, de nacht in de
   donkere (zie --held-*). De negatieve marge trekt hem tegen de kop aan; de
   padding van 50vw - 50% houdt de inhoud precies in de kolom van de rest van
   de pagina. */
.held {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px;
  align-items: center;
  margin: -40px calc(50% - 50vw) 0;
  padding: 72px calc(50vw - 50%) 80px;
  background-color: var(--held-bg);
  /* Hetzelfde stippenraster als de werkvlakte van backstage: een rustig
     teken dat dit een werkplek is, en het vlak is niet meer kaal. */
  background-image: radial-gradient(var(--held-punt) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  color: var(--held-inkt);
  border-bottom: 1px solid var(--held-lijn);
}
.held h1 { color: var(--held-inkt); }
.held-accent { color: var(--held-titel); }

/* De datumcheck en dezelfde check op een telefoon. De telefoon staat
   ernaast en net iets lager, en schuift alleen over de rechterrand van de
   kaart: een overlap verborg ooit de regel "Kort gezegd", en juist die
   vertelt de uitkomst. */
.held-beeld { position: relative; min-width: 0; display: flex; align-items: flex-start; }
.held-beeld .voorproef { flex: 1 1 auto; min-width: 0; }

.held-telefoon {
  position: relative; z-index: 1;
  flex: 0 0 230px;
  margin: 72px 0 0 -14px;
  padding: 9px;
  border-radius: 40px;
  background: #0b0d12;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3), inset 0 0 0 1.5px #2d3240;
}
.tel-scherm {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 42px 10px 14px;
  border-radius: 31px;
  overflow: hidden;
  background: var(--papier);
  color: var(--inkt);
  font-size: 12px;
}
.tel-eiland {
  position: absolute; top: 9px; left: 50%; translate: -50% 0;
  width: 74px; height: 22px; border-radius: 999px; background: #000;
}
.tel-titel { margin: 0 4px; font-weight: 700; font-size: 16px; line-height: 1.2; }
.tel-wie { margin: 0 4px 2px; color: var(--zacht); }
.tel-data { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tel-data li {
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 6px;
  border: 1px solid var(--lijn); border-radius: 11px;
  background: var(--papier-2);
}
.tel-data strong { padding-left: 2px; font-size: 12.5px; }
.tel-keus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; text-align: center; }
.tel-keus span {
  padding: 6px 0; border-radius: 7px;
  background: var(--papier); color: var(--zacht); font-size: 10.5px;
}
.tel-keus .is-ja  { background: color-mix(in srgb, var(--potlood) 14%, transparent); color: var(--potlood); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--potlood); }
.tel-keus .is-mis { background: color-mix(in srgb, #b7791f 16%, transparent); color: #8a5a00; font-weight: 600; box-shadow: inset 0 0 0 1.5px #b7791f; }
[data-theme="dark"] .tel-keus .is-mis { color: #f0c36b; }
.tel-klaar {
  margin-top: 2px; padding: 10px; border-radius: 10px;
  background: var(--actie); color: var(--actie-ink);
  text-align: center; font-weight: 700; font-size: 13px;
}

/* De datumtegel van backstage, in het klein (bij de derde stap). */
.agenda-tegel {
  display: flex; flex-direction: column; align-items: center;
  padding: 5px 0; border-radius: 6px;
  background: #e94560; color: #ffffff; line-height: 1.05;
}
.agenda-tegel span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.agenda-tegel b { font-size: 19px; }
.agenda-wat { display: flex; flex-direction: column; min-width: 0; }
.agenda-wat span { font-size: 13px; color: var(--zacht); }
.agenda-status {
  font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  color: var(--potlood); background: color-mix(in srgb, var(--potlood) 14%, transparent);
}
.held .bovenregel { color: var(--held-oog); }
.held-lead { margin: 0 0 30px; font-size: 19px; line-height: 1.6; color: var(--held-zacht); max-width: 40ch; }
.acties { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.held .knop-2 { color: var(--held-inkt); border-color: var(--held-lijn); }
.held .knop-2:hover { border-color: var(--held-zacht); }

/* De voorvertoning van een datumcheck, naast de titel. Een kaart in de
   kleuren van de pagina (licht of donker), op de nacht. */
.voorproef {
  margin: 0;
  background: var(--papier-2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .08);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 14px;
}
.voorproef-kop {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--lijn);
}
.voorproef-kop span { color: var(--zacht); }
.voorproef-raster { width: 100%; border-collapse: collapse; }
.voorproef-raster th, .voorproef-raster td { padding: 8px 10px; text-align: center; }
.voorproef-raster thead th { font-size: 12px; font-weight: 500; color: var(--zacht); }
.voorproef-raster thead th.is-beste { color: var(--accent-tekst); font-weight: 700; }
.voorproef-raster tbody th { text-align: left; font-weight: 500; padding-left: 18px; }
.voorproef-raster td:last-child { padding-right: 18px; }
.antw {
  display: block; padding: 5px 0; border-radius: 6px;
  font-size: 13px; font-weight: 600;
}
.antw-ja    { background: color-mix(in srgb, var(--potlood) 14%, transparent); color: var(--potlood); }
.antw-nee   { background: color-mix(in srgb, var(--rood) 12%, transparent); color: var(--rood); }
.antw-mis   { background: color-mix(in srgb, #b7791f 16%, transparent); color: #8a5a00; }
[data-theme="dark"] .antw-mis { color: #f0c36b; }
.antw-niets { border: 1px dashed var(--lijn); color: var(--zacht); font-weight: 400; }
.voorproef-voet {
  margin: 0; padding: 12px 18px;
  border-top: 1px solid var(--lijn);
  background: var(--papier);
  font-size: 13px; color: var(--zacht);
}
.voorproef-voet strong { color: var(--inkt); }

/* De drie richtingen: kaarten met een klein pictogram. De hele kaart is de
   link. */
.richtingen-kop { margin: 8px 0 24px; }
.stappen + .richtingen-kop { margin-top: 80px; }
.richtingen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.richting {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2);
  text-decoration: none;
  transition: border-color .15s;
}
.richting:hover { border-color: var(--actie); }
.richting-icoon {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--actie) 14%, transparent);
  color: var(--accent-tekst);
}
.richting-icoon svg { width: 20px; height: 20px; }
.richting h3 { margin: 4px 0 0; }
.richting p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--zacht); }
.verder { margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 600; color: var(--accent-tekst); }

/* Het bewijs: één echte opname, op de volle breedte van de inhoudskolom. Een
   scherm van 1440 px in een gedeelde kolom van 500 werd ooit kleiner dan op
   een telefoon; vandaar de volle breedte. */
.bewijs { margin: 80px 0 0; }
.bewijs .bovenregel { text-align: center; margin-bottom: 20px; }

.rest { margin: 80px 0 0; }
.rest h2 { margin-bottom: 20px; }
/* Twee kolommen, en op een smal scherm vanzelf één. Bewust GEEN
   column-count: die breekt een regel halverwege over de kolomrand af.
   minmax(0, …): zonder die nul kan een lange regel de kolom breder duwen en
   gaat de pagina horizontaal schuiven. */
.rest-lijst {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 42ch), 1fr));
  gap: 0 40px;
}
.rest-lijst li {
  position: relative; padding: 12px 0 12px 26px; margin: 0;
  border-top: 1px solid var(--lijn);
  color: var(--inkt); line-height: 1.55;
}
.rest-lijst li::before {
  content: "✓"; position: absolute; left: 0; top: 12px;
  color: var(--accent-tekst); font-weight: 700;
}
.rest-lijst kbd {
  font-family: var(--mono); font-size: .86em;
  border: 1px solid var(--lijn); border-radius: 4px;
  padding: 1px 5px; background: var(--papier-2); color: var(--inkt);
}

.afbakening {
  max-width: 760px; margin: 72px auto 0;
  padding: 24px 28px;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2);
}
.afbakening p { margin: 0; color: var(--zacht); line-height: 1.65; }
.afbakening-wel strong { color: var(--inkt); }

/* ── Zo werkt het: drie stappen ──────────────────────────────────────── */

.stappen { margin: 80px 0 0; }
.stappen h2 { margin: 0 0 40px; }
.stappen-lijst {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
/* De stippellijn die de drie cijfers verbindt, van het eerste naar het
   laatste. Het cijfer heeft een rand in de kleur van het papier, zodat de
   lijn er netjes achter verdwijnt. */
.stappen-lijst::before {
  content: ""; position: absolute; top: 21px;
  left: 22px; right: calc((100% - 48px) / 3 - 22px);
  border-top: 2px dashed var(--lijn);
}
.stap { position: relative; display: flex; flex-direction: column; gap: 12px; }
.stap-nr {
  width: 44px; height: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--actie); color: var(--actie-ink);
  font-weight: 700; font-size: 18px;
  box-shadow: 0 0 0 6px var(--papier);
}
.stap h3 { margin: 4px 0 0; }
.stap p { margin: 0; color: var(--zacht); line-height: 1.6; }
.stap-beeld {
  margin-top: 4px; padding: 16px;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2);
  font-size: 13px;
}
.stap-app { display: flex; flex-direction: column; gap: 8px; }
.bubbel {
  align-self: flex-start; max-width: 75%;
  padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--papier); color: var(--inkt);
}
.bubbel-ik {
  align-self: flex-end; max-width: 88%;
  border-radius: 14px 14px 4px 14px;
  background: color-mix(in srgb, var(--actie) 22%, var(--papier-2));
  line-height: 1.45;
}
.stap-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 12px; }
.stap-raster > span { padding: 10px 4px; border-radius: var(--radius); background: var(--papier); color: var(--zacht); }
.stap-raster strong { display: block; font-size: 14px; color: var(--inkt); }
.stap-raster .is-nee { color: var(--rood); }
.stap-raster .is-ja {
  color: var(--potlood); font-weight: 600;
  background: color-mix(in srgb, var(--potlood) 10%, var(--papier-2));
  box-shadow: inset 0 0 0 1.5px var(--potlood);
}
.stap-boeking { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; }

/* ── De strook met optredens ─────────────────────────────────────────────
   Over de volle breedte, net als de opening: wit bij dag, de nacht bij
   nacht. Kaartjes die vanzelf afbreken -- zes naast elkaar op een breed
   scherm, twee op een telefoon -- zodat er nooit iets opzij hoeft te
   schuiven. */
.tourdata {
  margin: 80px calc(50% - 50vw) 0;
  padding: 64px calc(50vw - 50%);
  background: var(--held-bg);
  border-top: 1px solid var(--held-lijn);
  border-bottom: 1px solid var(--held-lijn);
  color: var(--held-inkt);
}
.tourdata-kop {
  display: flex; flex-wrap: wrap; gap: 16px 40px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px;
}
.tourdata .bovenregel { color: var(--held-oog); }
.tourdata h2 { margin: 0 0 10px; color: var(--held-inkt); }
.tourdata-kop p:not(.bovenregel) { margin: 0; max-width: 46ch; color: var(--held-zacht); line-height: 1.6; }
.tourdata-meer { color: var(--accent-tekst); font-weight: 600; text-decoration: none; }
.tourdata-meer:hover { text-decoration: underline; }
.tourdata-lijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.tourdata-lijst li {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2); color: var(--inkt);
}
.tourdata-lijst li > span:last-child { display: flex; flex-direction: column; font-size: 13px; color: var(--zacht); }
.tourdata-lijst strong { font-size: 15px; color: var(--inkt); }
.tourdata-lijst .is-optie { border-style: dashed; border-color: #e0b24a; }
[data-theme="dark"] .tourdata-lijst .is-optie { border-color: #7a6326; }
/* De datumtegel van backstage, groot: rood met wit is vast, geel met
   donkere inkt is een optie. */
.tegel {
  align-self: flex-start;
  display: flex; flex-direction: column; align-items: center;
  width: 54px; padding: 7px 0; border-radius: 6px;
  background: #e94560; color: #ffffff; line-height: 1.1;
}
.tegel span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tegel b { font-size: 22px; }
.is-optie .tegel { background: #f0b429; color: #1b1f29; }

/* ── Het slot: het logo als beeld ────────────────────────────────────────
   Een donker vlak in beide thema's, met het merkteken groot ernaast. De
   staven staan in dezelfde verhouding als in het logo (staaf 10, ruimte 8,
   hoogtes 82 · 82 · 42 · 66) en staan net als daar in het midden. */
.slot {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px;
  align-items: center;
  margin: 88px 0 0;
  padding: 56px;
  border-radius: 18px;
  background-color: var(--nacht);
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--nacht-inkt);
}
.slot .bovenregel { color: var(--goud); }
.slot h2 { margin: 0 0 14px; color: var(--nacht-inkt); font-size: clamp(30px, 4vw, 42px); line-height: 1.08; }
.slot-accent { color: var(--nacht-link); }
.slot p:not(.bovenregel) { margin: 0 0 26px; max-width: 46ch; color: var(--nacht-zacht); font-size: 17px; line-height: 1.65; }
.slot a:not(.knop):not(.knop-2) { color: var(--nacht-link); }
.slot .knop-2 { color: var(--nacht-inkt); border-color: var(--nacht-lijn); }
.slot .knop-2:hover { border-color: var(--nacht-zacht); }
.slot-staven {
  height: 240px;
  display: flex; gap: 26px; align-items: center; justify-content: center;
}
.staaf { flex: 0 0 34px; height: 100%; }   /* de hoogte per staaf staat in index.php */
.staaf-merk     { background: var(--merk); }
.staaf-inkt     { background: var(--nacht-inkt); }
.staaf-cyaan    { background: var(--stift); }
.staaf-leisteen { background: var(--nacht-lijn); }
/* Alleen de equalizer beweegt, het logo zelf staat stil. En alleen als de
   bezoeker beweging niet heeft uitgezet. */
@media (prefers-reduced-motion: no-preference) {
  .staaf-cyaan, .staaf-leisteen { animation: equalizer 2.6s ease-in-out infinite alternate; }
  .staaf-leisteen { animation-delay: -.9s; }
  .staaf-leisteen:last-child { animation-delay: -1.7s; animation-duration: 2.1s; }
}
@keyframes equalizer {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(.55); }
  100% { transform: scaleY(1.3); }
}


/* ── Verhaalpagina's: de getekende beelden ─────────────────────────────
   Opgebouwd in HTML, net als de voorvertoning op de startpagina: scherp op
   elk scherm, en een schermlezer leest ze gewoon voor. */

/* De gagebon naast het tablet (bandleden.php, "Wat iedereen verdient"). */
.bon-en-scherm {
  display: flex; flex-wrap: wrap; gap: 40px;
  align-items: center; justify-content: center;
  align-self: stretch;
}
.bon-en-scherm .afdruk-tablet { flex: 1 1 420px; margin: 0; }
/* Papier is papier: de bon is in beide thema's licht, met donkere inkt. */
.bon {
  flex: 0 1 330px; min-width: 0; margin: 0;
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .22));
}
.bon-papier {
  padding: 22px 22px 14px;
  border-radius: 10px 10px 0 0;
  background: #f7f5ef; color: #1b1f29;
  font-family: var(--mono); font-size: 13px;
}
.bon-kop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-bottom: 14px; text-align: center; font-family: var(--font);
}
.bon-kop svg { margin-bottom: 4px; }
.bon-kop strong { font-size: 15px; }
.bon-kop span { font-size: 11.5px; color: #5f6675; }
.bon-blok {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed #b9b4a6;
}
.bon-regel { display: flex; justify-content: space-between; gap: 12px; }
.bon-af { color: #5f6675; }
.bon-totaal { font-weight: 600; font-size: 15px; }
.bon-voet { font-size: 11px; color: #5f6675; }
/* De afgescheurde onderrand: tandjes van 16 px, in de kleur van het papier. */
.bon-rand {
  display: block; height: 16px;
  background:
    linear-gradient(135deg, #f7f5ef 50%, transparent 50%) 0 0 / 16px 16px repeat-x,
    linear-gradient(225deg, #f7f5ef 50%, transparent 50%) 0 0 / 16px 16px repeat-x;
}

/* Twee lineupmails naast elkaar (bandleden.php, "En dan"), elk net iets
   scheef, zoals twee briefjes op tafel. */
.mails {
  margin: 0; width: min(100%, 780px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px;
}
.mail {
  padding: 16px 18px;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2); color: var(--inkt);
  box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
  font-size: 14px; line-height: 1.5;
  transform: rotate(-1.2deg);
}
.mail + .mail { transform: rotate(1deg); }
.mail p { margin: 0 0 10px; }
.mail-aan { font-size: 12.5px; color: var(--zacht); }
.mail .mail-gage { margin-bottom: 0; padding: 9px 12px; border-radius: var(--radius); background: var(--papier); }
.mail-gage strong { font-family: var(--mono); }
.mail .mail-gage-uit { border: 1px dashed var(--lijn); background: none; color: var(--zacht); font-size: 13px; }
.mails figcaption { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: var(--zacht); }

/* Het bandportaal in een browservenster (programmeurs.php). */
.browser { position: relative; width: 100%; max-width: 960px; margin: 0 0 32px; padding-bottom: 30px; }
.browser-raam {
  overflow: hidden;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 18px 44px rgba(16, 24, 40, .12);
}
.browser-balk {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lijn);
  background: var(--papier);
}
.browser-stip { width: 11px; height: 11px; border-radius: 50%; background: var(--lijn); }
.browser-stip:nth-child(1) { background: #ff5f57; }
.browser-stip:nth-child(2) { background: #febc2e; }
.browser-stip:nth-child(3) { background: #28c840; }
.browser-adres {
  flex: 0 1 340px; min-width: 0; margin-left: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 12px; border-radius: 6px;
  background: var(--papier-2); color: var(--zacht); font-size: 12px;
}
.browser img { display: block; width: 100%; height: auto; }
.browser-geopend {
  position: absolute; left: 24px; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 48px);
  margin: 0; padding: 11px 16px;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2); color: var(--inkt);
  box-shadow: 0 14px 34px rgba(16, 24, 40, .18);
  font-size: 14px;
}
.browser-oog {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--actie) 16%, transparent);
  color: var(--accent-tekst);
}
.browser-oog svg { width: 17px; height: 17px; }
.browser-keer { margin-left: 4px; font-weight: 600; color: var(--potlood); white-space: nowrap; }
.browser figcaption { margin: 14px 4px 0; font-size: 14px; color: var(--zacht); }

/* De voortgangsbalk (overzicht.php). Zes stappen naast elkaar; op een
   telefoon rechtop, met de lijn aan de linkerkant. */
.voortgang {
  list-style: none; margin: 28px 0 24px; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.voortgang li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 4px; text-align: center;
}
.voortgang li:not(:last-child)::after {
  content: ""; position: absolute; top: 15px;
  left: calc(50% + 20px); right: calc(-50% + 20px);
  height: 3px; border-radius: 2px; background: var(--lijn);
}
.voortgang li.is-klaar:has(+ .is-klaar)::after { background: var(--potlood); }
.vg-bol {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--lijn); background: var(--papier-2);
  font-weight: 700;
}
.is-klaar .vg-bol { border: 0; background: var(--potlood); color: var(--papier-2); }
.is-nu .vg-bol { border: 3px solid var(--stift); box-shadow: 0 0 0 5px color-mix(in srgb, var(--stift) 22%, transparent); }
.vg-naam { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--inkt); }
.voortgang li:not(.is-klaar):not(.is-nu) .vg-naam { color: var(--zacht); }
.vg-datum { font-size: 12px; color: var(--zacht); }
.is-nu .vg-datum { color: var(--accent-tekst); font-weight: 600; }


/* ═════════════════════════════════════════════════════════════════════════
   Smalle schermen — de gedeelde onderdelen

   DEZE STAAN HELEMAAL ONDERAAN, EN DAT IS GEEN TOEVAL. Een mediablok dat
   boven het onderdeel staat dat het aanpast, verliest op bronvolgorde: even
   zwaar wegende regels, en dan wint de laatste.
   ═════════════════════════════════════════════════════════════════════════ */

/* De opening gaat al eerder onder elkaar dan de rest: naast de tekst is er
   onder deze breedte geen plaats meer voor de tabel én de telefoon. */
@media (max-width: 1080px) {
  .held { grid-template-columns: minmax(0, 1fr); }
  .held-beeld { max-width: 640px; }
}

/* Op een telefoon onder elkaar: eerst de tabel, dan het toestel. */
@media (max-width: 560px) {
  .held-beeld { flex-direction: column; align-items: center; }
  .held-beeld .voorproef { width: 100%; }
  .held-telefoon { flex-basis: auto; width: 230px; margin: 24px 0 0; }
}

@media (max-width: 900px) {
  .site-header-inner, .site-main { padding-left: 16px; padding-right: 16px; }
  .richtingen, .stappen-lijst { grid-template-columns: minmax(0, 1fr); }
  .stappen-lijst::before { display: none; }
  .held { gap: 32px; padding-top: 48px; padding-bottom: 56px; }
  .slot { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 24px; }
  .slot-staven { order: -1; height: 120px; gap: 17px; justify-content: flex-start; }
  .staaf { flex-basis: 22px; }
  .pagina-kop { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pagina-kop-beeld { display: none; }
  .site-routekaart { grid-template-columns: minmax(0, 1fr); }
  /* Naast elkaar zou het toestel op 375px de halve regel opeten. Beeld
     eerst, dan de uitleg. */
  .site-scherm-paar { flex-direction: column; align-items: flex-start; gap: 20px; }
  .site-scherm-naast { max-width: 100%; }
  .site-footer-inner { padding: 22px 16px 32px; flex-direction: column; align-items: flex-start; }
  .notitie { margin: 48px 0; padding: 24px 22px; font-size: 18px; }
}

/* ── De menuknop op smalle schermen ────────────────────────────────────────
   De menubalk besloeg op 375px drie regels. Hieronder klapt hij samen tot
   één regel -- logo links, knop rechts -- en opent hij als een paneel onder
   de kop.

   Alles hangt aan [data-menu="aan"] op <html>, dat het scriptje in voet.php
   zet. Staat dat er niet (geen JavaScript), dan geldt geen enkele regel
   hieronder en blijft de afbrekende rij staan. Een menu dat verdwijnt achter
   een knop die niet werkt, is erger dan een lelijk menu.
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  [data-menu="aan"] .site-nav-menuknop:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--nacht-lijn);
    border-radius: var(--radius);
    background: none;
    color: var(--nacht-inkt);
    cursor: pointer;
  }
  [data-menu="aan"] .site-nav-menuknop svg { display: block; }

  [data-menu="aan"] .site-header-inner { flex-wrap: nowrap; }

  /* Het paneel. position:absolute en niet fixed: hij hoort bij de kop. */
  [data-menu="aan"] .site-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 16px 18px;
    background: var(--nacht);
    border-bottom: 1px solid var(--nacht-lijn);
  }
  [data-menu="aan"] .site-nav-links[data-open] { display: flex; }
  [data-menu="aan"] .site-header { position: relative; }

  /* Regels onder elkaar, met een raakvlak dat een duim aankan (44px). */
  [data-menu="aan"] .site-nav-links > a {
    padding: 13px 0;
    font-size: 17px;
    box-shadow: none;
  }
  [data-menu="aan"] .site-nav-links > a + a { border-top: 1px solid var(--nacht-lijn); }
  [data-menu="aan"] .site-nav-links > a[aria-current="page"] { color: var(--nacht-link); }

  /* Het huisje is hier overbodig: het logo ernaast doet al hetzelfde. */
  [data-menu="aan"] .site-nav-home { display: none; }

  [data-menu="aan"] .site-nav-links > a.site-nav-cta {
    margin-top: 14px;
    padding: 13px 18px;
    text-align: center;
  }
  [data-menu="aan"] .site-nav-links > .site-nav-cta + a { border-top: 0; }

  [data-menu="aan"] .site-nav-login {
    margin-top: 10px;
    justify-content: center;
    padding: 12px 18px;
  }

  [data-menu="aan"] .site-nav-thema:not([hidden]) {
    margin-top: 14px;
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  .voortgang { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .voortgang li { flex-direction: row; gap: 14px; padding: 0; text-align: left; }
  .voortgang li:not(:last-child)::after { top: 34px; bottom: -14px; left: 15px; right: auto; width: 3px; height: auto; }
  .vg-bol { flex: 0 0 34px; }
  .vg-naam { flex: 1 1 auto; }
  .vg-datum { white-space: nowrap; }
  .browser-geopend { position: relative; left: auto; bottom: auto; z-index: 1; margin-top: -18px; margin-left: 12px; max-width: calc(100% - 24px); }
  .browser { padding-bottom: 0; }
}

@media (max-width: 520px) {
  .acties .knop, .acties .knop-2 { flex: 1 1 100%; }
  .site-footer { margin-top: 60px; }
}