/* =========================================================================
   Bandhub — verkoopsite

   DE KLEUREN KOMEN UIT BACKSTAGE. Op 10 september 2026 heeft de eigenaar
   gevraagd de site dezelfde kleuren te geven als de applicatie — en verder
   niets aan het ontwerp te veranderen. Dat kon: elke kleur op deze site loopt
   via een token, dus alleen de waarden hieronder zijn om.

   Daarvóór had de site een eigen taal: warm papier in plaats van bijna zwart,
   warme inkt in plaats van grijs. Dat was een bewuste keuze van 9 september
   2026 en is één dag later weer teruggedraaid. De namen zijn gebleven --
   --papier, --inkt, --stift -- want die zeggen wat een kleur DOET op deze
   site; de waarden zeggen nu waar hij vandaan komt. Bij elke token staat welk
   token uit static/css/style.css hem levert.

   Eén waarde wijkt af, en dat staat bij --groen-tekst uitgelegd: die van
   backstage is berekend tegen wit en haalt op de grijzere paginakleur van deze
   site net geen 4,5:1.

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

:root {
  /* vlakken — uit backstage [data-theme="light"] */
  --papier:   #eef0f3;   /* paginavlak            (--bg) */
  --papier-2: #ffffff;   /* kaartvlak, notitie    (--panel) */

  /* tekst */
  --inkt:  #14161b;      /* koppen en lopende tekst (--text) */
  --zacht: #4b5563;      /* bijschrift, toelichting (--muted) */

  /* lijnen */
  --lijn: #dfe3e9;       /* (--line) */

  /* 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;

  /* De hand: markeerstift, potlood, rode pen.

     --stift is een GETROKKEN LIJN (een omcirkeling, een pijl).
     --stift-vlak is het VLAK ACHTER AANGESTREEPTE TEKST.

     Die twee waren eerst één token, en dat kan niet: op een bijna zwarte
     pagina moet een lijn fel zijn om te zien te zijn, terwijl een vlak waar
     bijna witte tekst overheen loopt juist donker moet zijn. Met een gedeelde
     waarde haalde tekst op de markeerstift in het donkere thema 2,2:1 en viel
     de onderste derde van het aangestreepte woord weg. */
  --stift:       #c9f24d;  /* (--accent) */
  --stift-vlak:  #c9f24d;  /* (--accent) — inkt hierop haalt 14,0:1 */

  /* Groen als TEKST. Backstage heeft daar --accent-text (#5c7a00) voor, maar
     die is berekend tegen wit: op de paginakleur van deze site (--papier,
     #eef0f3) haalt hij 4,34:1 en dat is net onder de 4,5:1 die kleine tekst
     nodig heeft. Eén stap donkerder in dezelfde tint haalt 4,65:1 op papier en
     5,30:1 op een kaart. Dat is de enige waarde op deze pagina die niet
     letterlijk uit backstage komt. */
  --groen-tekst: #587500;

  --potlood:     #587500;  /* een vinkje: ja — 4,3:1 op papier */
  --rood:        #c4402f;  /* een kruisje: nee (--no) — 4,5:1 op papier */

  /* De merkkleur, en sinds 10 september 2026 dezelfde als --stift hierboven:
     de site draagt nu het groen van de applicatie. Hij blijft een eigen token
     omdat hij één ding doet wat de andere niet doen -- hij wisselt NIET met
     het thema. Een merkkleur die meebeweegt is geen merkkleur. */
  --merk: #c9f24d;

  /* DE ACTIEKLEUR: amber, uit backstage (--wait-strong, #f0b429).
     Op verzoek van de eigenaar moest de aanmeldknop harder opvallen. Groen kon
     niet: dat ís op deze site de hand -- de markeerstift, de vinkjes, de
     omcirkeling -- dus een groene knop versmelt met die accenten in plaats van
     eruit te springen. Amber komt verder nergens voor en valt daardoor
     onmiddellijk op, en hij komt nog steeds uit het palet van de applicatie.

     In backstage betekent amber "optie, wacht op antwoord". Dat weegt hier
     licht: een bezoeker van de verkoopsite kent die taal nog niet, en een
     gevuld blok met kapitalen leest niemand als een statusbadge.

     Wat het verhaal sluitend maakt: amber is de wég naar aanmelden (de knop én
     de streep onder Aanmelden in het menu), groen blijft de hand. Daarom is dit
     een eigen token en niet zomaar --stift op een andere plek.

     Hij wisselt niet met het thema, net als --merk: in backstage staat
     --wait-strong in allebei de thema's op dezelfde waarde, juist omdat er
     donkere tekst op moet blijven passen. */
  --actie:     #f0b429;
  --actie-ink: #14161b;   /* inkt hierop haalt 10,4:1 */

  /* vorm */
  --radius:    4px;
  --radius-lg: 6px;

  /* typografie */
  --font: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  color-scheme: light;
}

[data-theme="dark"] {
  /* Uit backstage :root — daar is donker de hoofdmodus. */
  --papier:   #0b0c0f;     /* (--bg) */
  --papier-2: #14161b;     /* (--panel) */

  --inkt:  #f2f4f8;        /* (--text) */
  --zacht: #a2a9b8;        /* (--muted) */

  --lijn: #262a33;         /* (--line) */

  --stift:       #c9f24d;  /* fel: dit is een lijn op bijna zwart (--accent) */
  --stift-vlak:  #3d4a1f;  /* diep: hier loopt inkt overheen (--accent-line) — 8,7:1 */
  --groen-tekst: #c9f24d;  /* (--accent) */
  --potlood:     #c9f24d;  /* (--accent) */
  --rood:        #ff6b5e;  /* (--no) */

  /* --merk staat hier bewust NIET: een merkkleur die met het thema meewisselt
     is geen merkkleur. Hij erft de waarde van :root. */

  color-scheme: dark;
}

/* =========================================================
   Site-specifieke opmaak
   ========================================================= */

* { box-sizing: border-box; }

/* color-scheme staat sinds deelproject 8 in de tokenblokken zelf, bij de
   kleuren waar het bij hoort. Hier stond het los, met "dark" als standaard en
   [data-theme="light"] als variant — allebei omgedraaid ten opzichte van hoe
   de site er nu uitziet. */

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--font);
  /* Dezelfde 85% als static/css/style.css. Toen de lettertypen nog bij
     Google vandaan kwamen stond de breedte in de aanvraag (wdth,wght@85)
     en kwam er een vaste, smalle snede terug. Nu we het variabele bestand
     zelf serveren moet de breedte hier staan, anders valt de site terug op
     100% en wordt hij merkbaar breder dan de applicatie. */
  font-stretch: 85%;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* De papiervezel. Eén ruisvlak over de hele pagina; genoeg om papier te
   suggereren, te weinig om tekst te hinderen. Vast en niet meescrollend: een
   korrel die met de tekst meebeweegt leest als ruis op een scherm in plaats
   van als structuur in papier. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/></filter><rect width='120' height='120' filter='url(%23p)' opacity='.55'/></svg>");
  opacity: .06;
}
body > * { position: relative; z-index: 1; }

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

a { color: inherit; }

/* ── Koppen: smalle kapitalen ─────────────────────────────────────────────
   Elke kop op de site krijgt deze behandeling, niet alleen die op de
   startpagina: één keer is een trucje, overal is het een huisstijl. */

h1, h2, h3, .kop-groot {
  font-family: var(--font);
  color: var(--inkt);
  font-weight: 900;
  font-stretch: 66%;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.012em;
  /* Smalle kapitalen hebben een smalle spatie, en bij dit gewicht valt die
     weg: op 46px stond er vijf pixel tussen "zichzelf" en "niet", waardoor het
     op een telefoon één woord leek. Gemeten in de browser, niet geschat. */
  word-spacing: .09em;
  margin: 0 0 .4em;
  /* Alleen een vangnet, géén hyphens: auto hier.

     Die stond hier eerst wel, om "Verwerkersovereenkomst" (22 letters) op een
     telefoon te laten afbreken. Maar afbreken geldt bij élke regelovergang,
     niet alleen als een woord niet past: op de startpagina brak de kop
     daardoor af als "JE BAND RE-GELT", op een scherm van 1300 pixels, met
     ruimte zat. Gezien op de live site, niet in een test.

     overflow-wrap grijpt wél alleen in als een woord echt niet past, en is
     dus veilig om overal te laten staan. Het afbreken zelf staat nu op
     .site-juridisch h1, waar dat ene lange woord woont. */
  overflow-wrap: break-word;
}

/* De bovengrens stond eerst op 96px. Op een breed scherm werd dat, in
   kapitalen op 66% breedte en gewicht 900, schreeuwen -- de eigenaar wees er
   terecht op. Nu 78px: nog steeds een affichekop, maar hij praat weer tegen
   je in plaats van over je heen. De ondergrens is 40px: onder die maat
   verliezen smalle kapitalen hun karakter en worden ze gewoon klein en dik. */
h1 { font-size: clamp(40px, 6.2vw, 78px); }
h2 { font-size: clamp(26px, 3.1vw, 40px); }
h3 { font-size: clamp(20px, 2vw, 26px); }

/* Het regeltje boven een kop. Op de startpagina draagt het de positionering,
   op andere pagina's benoemt het waar je bent — zoals een affiche de naam van
   de organisator boven die van de artiest zet. */
.bovenregel {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--zacht);
  margin: 0 0 18px;
}

/* ── De markeerstift ──────────────────────────────────────────────────────
   Eén betekenis: hier heeft een mens iets aangestreept. Hij ligt áchter de
   letters en over de onderste derde ervan — een liniaal eronder is geen
   stift. Hij vult nooit een knop: zou hij dat wel doen, dan gaat
   "aangestreept" stilzwijgend "klikbaar" betekenen en is de betekenis weg. */

.stift { position: relative; display: inline-block; white-space: nowrap; }
.stift svg {
  position: absolute; left: -3%; top: 54%; width: 106%; height: .34em;
  overflow: visible; z-index: -1;
}

/* Cijfers en datums in mono, volgens DESIGN_GUIDELINES.md. Op de site komt
   dat nu alleen voor bij een prijs (taak 3); de klasse staat hier alvast
   klaar zodat latere pagina's hem meteen kunnen gebruiken. */
.site-cijfer { font-family: var(--mono); font-variant-numeric: tabular-nums; }

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

/* Geen balk: dit is papier, en een balk eroverheen zou het weer een venster
   maken. De kop staat gewoon boven aan het vel. */
/* De kop blijft staan bij het scrollen. Op de verhaalpagina's staat de bezoeker
   anders na drie schermen zonder menu en zonder weg terug; het huisje en
   "Aanmelden" horen bereikbaar te blijven.

   Wel een achtergrond, en dat moet: zonder --papier eronder scrollt de tekst
   van de pagina dwars door de menuregel heen. De doorzichtigheid met
   backdrop-filter is een verfijning voor browsers die het kennen; de regel
   erboven staat er als terugval, want een kop die half doorzichtig is zonder
   vervaging leest slecht.

   De schaduw komt er pas bij zodra er werkelijk gescrold is -- het scriptje in
   partials/voet.php zet dan data-gescrold op <html>. Een streep of schaduw
   onder een kop die bovenaan de pagina staat, snijdt de bladzijde doormidden
   zonder reden. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border: 0;
  background: var(--papier);
  transition: box-shadow .18s ease;
}

@supports (backdrop-filter: blur(8px)) {
  .site-header {
    background: color-mix(in srgb, var(--papier) 82%, transparent);
    backdrop-filter: blur(10px);
  }
}

[data-gescrold] .site-header {
  box-shadow: 0 1px 0 var(--lijn), 0 6px 18px rgba(0, 0, 0, .05);
}

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

.site-logo { display: inline-flex; }
.site-logo-accent { fill: var(--merk); }
.site-logo-ink { fill: var(--inkt); }

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

/* De links zaten eerst rechtstreeks in .site-nav. Ze staan nu in een eigen
   doosje omdat de menuknop hieronder ze als geheel moet kunnen wegklappen op
   een telefoon; op een breed scherm verandert er niets -- dit is dezelfde rij
   als altijd, alleen één niveau dieper. */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* De menuknop zelf blijft buiten beeld tot twee dingen kloppen: het scherm is
   smal (de @media verderop) en het scriptje in voet.php heeft hem aangezet.
   Zonder JavaScript blijft [hidden] staan en blijft de oude, afbrekende rij
   over -- bruikbaar, alleen niet mooi. */
.site-nav-menuknop { display: none; }
.site-nav-menuknop[hidden] { display: none; }

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

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

/* Het huisje naar de startpagina. Een link en geen knop -- hij gaat ergens
   heen. Even groot en even zwaar als de themaschakelaar aan de andere kant van
   het menu, zodat de twee pictogrammen bij elkaar horen. */
.site-nav-home {
  display: inline-flex; align-items: center;
  margin-right: -4px;
  /* Dezelfde lichte scheefstand als de kaarten en de markeerstift: papier ligt
     nooit helemaal recht, en een kaarsrecht huisje zou het enige zijn. */
  rotate: -3deg;
}
.site-nav-home svg { display: block; }

.site-nav-cta {
  position: relative;
  color: var(--inkt) !important;
  padding: 3px 6px;
  font-weight: 700 !important;
}
/* Dezelfde amber als de knop: de streep en de knop wijzen naar hetzelfde, dus
   ze horen dezelfde kleur te dragen. De stijl -- een schuine veeg onder het
   woord -- blijft die van de markeerstift. */
.site-nav-cta::before {
  content: ""; position: absolute; inset: 58% -6px 2px -6px; z-index: -1;
  background: var(--actie); rotate: -1.5deg; border-radius: 2px;
}

/* Inloggen: gevuld, maar in inkt en niet in amber. Zo staan er twee knoppen in
   de kop met een duidelijke rangorde -- amber is de weg naar binnen voor wie
   nog geen klant is, inkt is de deur voor wie dat al wel is. Een omlijnde knop
   met vage tekst, zoals hier eerst stond, viel naast die amber helemaal weg. */
.site-nav-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--inkt);
  color: var(--papier) !important;
  border: 1px solid var(--inkt);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 600;
}

.site-nav-login:hover { background: var(--zacht); border-color: var(--zacht); }

/* Het inlogteken staat een graad of twee scheef, net als het huisje aan de
   andere kant van het menu: getekend, niet geconstrueerd. */
.site-nav-login svg { display: block; rotate: -2deg; }

/* De themaschakelaar. Geen rand en geen vlak: hij hoort niet te wedijveren
   met Aanmelden en Inloggen, want hij is een voorkeur en geen bestemming.
   Vandaar alleen een pictogram, dat oplicht als je erop staat. */
/* Eerst dit, anders wint de display hieronder van het hidden-attribuut.
   De browser geeft [hidden] display:none mee vanuit zijn eigen stijlblad,
   en elke klasseregel verslaat dat. Zonder deze regel staat de knop er dus
   juist wél als er geen JavaScript draait — precies andersom dan bedoeld,
   en met allebei de pictogrammen naast elkaar, want dan heeft niets er een
   verborgen. Gezien op een opname, niet bedacht. */
.site-nav-thema[hidden] { display: none; }

.site-nav-thema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--zacht);
  cursor: pointer;
  transition: color .12s, background-color .12s;
}

.site-nav-thema:hover { color: var(--inkt); background: var(--papier-2); }

.site-nav-thema:focus-visible {
  outline: 2px solid var(--groen-tekst);
  outline-offset: 2px;
}

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

.site-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 40px 0;
  min-height: 40vh;
}

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

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

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

.site-footer-links { display: flex; gap: 16px; 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: 900; font-stretch: 66%; text-transform: uppercase;
  letter-spacing: -.012em; word-spacing: .09em; color: var(--inkt);
}

/* ── Knoppen en formulieren (gedeeld door de popup en latere pagina's) ── */

.site-btn {
  display: inline-block;
  border: 1px solid var(--lijn);
  background: var(--papier-2);
  color: var(--inkt);
  padding: 10px 20px;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.site-btn:hover, .knop:hover { rotate: -.8deg; }

/* .knop is de nieuwe naam; .site-btn blijft bestaan omdat de pagina's hem nog
   gebruiken. Ze zijn hetzelfde: inkt op papier. Groen is op deze site de
   markeerstift en hoort niet op een knop. */
.knop, .site-btn, .site-btn-primary {
  display: inline-block;
  background: var(--actie);
  color: var(--actie-ink);
  border: 0;
  padding: 15px 28px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 800;
  font-stretch: 76%;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .045em;
  text-decoration: none;
  cursor: pointer;
}
.knop-2 { text-decoration: none; font-weight: 600; color: var(--zacht); }
.knop-2:hover { color: var(--inkt); }

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

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

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

.site-form-control:focus {
  outline: none;
  border-color: var(--inkt);
}

/* ── 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: 360px;
  /* Geen schaduw, geen verloop — zelfde regel als de rest van de site. */
}

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

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

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

.site-login-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  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 (12 september 2026): wat er
   misging, in gewone woorden. --rood is het "nee"-teken van deze huisstijl en
   haalt 4,5:1 op papier; zie de toelichting bij de kleuren bovenaan. */
.site-login-melding {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--rood);
  border-radius: 6px;
  color: var(--rood);
  font-size: 14px;
  line-height: 1.45;
}
.site-login-hulp a { color: var(--groen-tekst); text-decoration: none; }
.site-login-hulp a:hover { text-decoration: underline; }

/* ── De notitie ───────────────────────────────────────────────────────────
   Een blaadje dat op tafel ligt: papier, scheef, met een stuk tape op een
   hoek. De tape is doorschijnend grijs en niet in de accentkleur -- anders
   gaat hij concurreren met de markeerstift, die wél iets betekent. */

.notitie {
  position: relative; max-width: 720px; margin: 86px auto 70px;
  background: var(--papier-2); border: 1px solid var(--lijn); border-radius: 3px;
  padding: 32px 36px; rotate: -.7deg;
  font-size: 19px; line-height: 1.55;
  box-shadow: 0 12px 26px rgba(0,0,0,.05);
}
.notitie mark { background: var(--stift-vlak); color: var(--inkt); padding: 0 3px; }

.tape {
  position: absolute; top: -16px; left: -26px; rotate: -34deg;
  width: 116px; height: 30px;
  background: color-mix(in srgb, var(--inkt) 12%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--inkt) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--inkt) 8%, transparent);
}
/* De gerafelde uiteinden van een afgescheurd stuk tape. */
.tape::before, .tape::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7px;
  background: repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--inkt) 12%, transparent) 0 4px, transparent 4px 7px);
}
.tape::before { left: -6px; }
.tape::after  { right: -6px; }

/* ── De afdruk ────────────────────────────────────────────────────────────
   Een schermafbeelding is een opname van de applicatie in het donkere thema.
   Op warm papier zou dat een zwart gat zijn. Hem opnieuw maken in het lichte
   thema lost dat op voor licht en breekt het voor donker -- twee sets
   onderhouden voor een probleem dat we ook kunnen omdraaien.

   Hij wordt daarom gemonteerd als afdruk: een passe-partout van papier, een
   dunne rand, en iets scheef, zoals een foto die op tafel is neergelegd. Een
   donker beeld op papier is dan geen gat maar een afdruk -- precies wat het
   is. Eén set bestanden, werkt in beide thema's. */

.afdruk {
  margin: 0 0 32px;
  background: var(--papier-2);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 14px;
  rotate: -.6deg;
  transition: rotate .2s;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.afdruk:nth-of-type(even) { rotate: .5deg; }
.afdruk:hover { rotate: 0deg; }
.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 dan op de breedte van het
     beeld, het beeld wacht op die van de figure, en het resultaat was 250 px
     op een scherm van 1280 -- exact de fout uit deelproject 7, waar het
     beschikbaarheidsraster op een bureauscherm kleiner uitkwam dan op een
     telefoon. Gemeten, niet vermoed.

     Zo toont elke opname zijn eigen formaat tot aan de kolombreedte, en
     wordt hij nooit opgeblazen tot voorbij zijn eigen resolutie.

     height: auto overschrijft het height="..."-attribuut (een CSS-hint met
     lage prioriteit). Zonder die regel krimpt alleen de breedte mee en wordt
     de afbeelding uitgerekt. */
  max-width: 100%; width: auto; height: auto; display: block; border-radius: 2px;
}
.afdruk figcaption { margin-top: 12px; font-size: 14px; color: var(--zacht); }

/* ── De afdruk wisselt mee met het thema ─────────────────────────────────
   Van elk scherm bestaat een lichte en een donkere opname. De lichte 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 helemaal niet. Het scriptje in
   partials/kop.php beslist -- opgeslagen keuze, anders wat het apparaat wil --
   en zet uitsluitend [data-theme="dark"]. Licht is de afwezigheid daarvan.
   Eén regel dus, precies zoals het kleurenblok op regel 70.

   (Hier stond eerst óók een @media (prefers-color-scheme: dark) met
   :root:not([data-theme="light"]). Dat sloeg aan op een lichte pagina op een
   donker apparaat: er stáát dan geen data-theme, dus de uitzondering greep
   niet. Een donkere opname op licht papier -- precies de fout die deze regels
   moesten oplossen.)

   Twee winstpunten boven twee <img>'s onder elkaar: er wordt maar één
   afbeelding gedownload, en de alt-tekst staat op één plek. Twee <img>'s
   waarvan er één op display:none staat, zijn voor een schermlezer geen twee
   beschrijvingen maar één die verdwijnt zodra het andere thema aan staat.

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

/* ── Het telefoonscherm van het publieke portaal ─────────────────────────
   Geen papieren kaart maar een toestel. Het portaal zet geen data-theme en
   staat dus altijd donker; naakt op een lichte pagina las dat als een gat, in
   een telefoon leest hetzelfde donker als "dit is een telefoon".

   Getekend in CSS en niet als afbeelding: deze site laadt niets van buiten, en
   een toestel van rechthoeken schaalt mee met het beeld erin. De schuine stand
   is dezelfde als bij de afdrukken -- alleen de andere kant op, zodat een
   telefoon naast een schermafdruk niet parallel gaat liggen. */
.afdruk-telefoon {
  /* 200 en niet meer. Een telefoon is nu eenmaal ruim twee keer zo hoog als
     breed (19,5:9 is 2,17), dus de enige knop die aan de hoogte draait zonder
     te liegen over de vorm, is de breedte. Korter maken zou betekenen: het
     scherm afsnijden, en dan is het geen telefoon meer maar een tegel. */
  max-width: 200px;
  margin: 0 0 32px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  rotate: 1.4deg;
  transition: rotate .2s;
}
.afdruk-telefoon:hover { rotate: 0deg; }

.telefoon {
  position: relative;
  padding: 6px;
  border-radius: 28px;
  /* Aluminium: licht van boven, donker naar onderen. Geen zwart vlak -- dat
     zou tegen het scherm zelf wegvallen en de rand onzichtbaar maken. */
  background: linear-gradient(155deg, #4a4a4d 0%, #202023 38%, #303033 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(255, 255, 255, .09);
}

/* Een strook boven het beeld, in de kleur van het portaal zelf (#0a0c10, uit
   de opname gemeten). Zonder die strook zou het eilandje over de koptekst
   liggen: 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;
}

/* Het eilandje, in die strook. */
.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 ──────────────────────────────────────
   Naast de telefoon hiernaast: twee apparaten vertellen zonder woorden dat
   hetzelfde werk op allebei gaat. Zelfde bouw als de telefoon -- een romp van
   aluminium, een scherm met ronde hoeken -- maar breder, met een dunnere rand
   en een lens in plaats van een eilandje.

   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 bij .afdruk. */
.afdruk-tablet {
  max-width: 520px;
  /* Midden in de kolom, om dezelfde reden als het paar met de telefoon
     hierboven: een tablet van 520 in een kolom van 1000 hangt scheef, met alle
     lege ruimte aan één kant. De brede afdrukken blijven links -- die vullen de
     kolom toch. Het bijschrift blijft links uitgelijnd, tegen de linkerrand van
     het toestel; gecentreerd onder een gecentreerd apparaat wordt het een
     onderschrift bij een foto, en dat is het niet. */
  align-self: center;
  margin: 0 0 32px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  rotate: -.8deg;
  transition: rotate .2s;
}
.afdruk-tablet:hover { rotate: 0deg; }

.tablet {
  position: relative;
  /* Rondom even breed. Hier stond een extra marge aan de linkerkant om ruimte
     voor de lens te maken, en dat gaf een rand die links dubbel zo dik was als
     rechts -- precies wat een echt toestel niet doet. De lens past gewoon in
     deze rand. */
  padding: 16px;
  border-radius: 26px;
  background: linear-gradient(155deg, #4a4a4d 0%, #202023 38%, #303033 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 255, 255, .09);
}

/* Concentrisch: de binnenste straal is de buitenste min de rand (26 - 16), zodat
   de hoeken van het scherm die van de romp volgen in plaats van ze te snijden. */
.tablet-scherm {
  border-radius: 10px;
  overflow: hidden;
}

.tablet-scherm img {
  display: block;
  width: 100%;
  height: auto;
}

/* De lens: midden in de linkerrand, want een tablet in liggende stand heeft
   zijn camera op de lange zijde. */
.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); }

/* ── Onderdelen die van de oude startpagina zijn overgebleven ─────────────
   Deze vier klassen leken bij de startpagina te horen, maar drie andere
   pagina's gebruiken ze ook: .site-hero op prijs.php en aanmelden.php,
   .site-scheiding op programmeurs.php en overzicht.php, en .site-nadruk op
   alle drie de functiepagina's. Ze zijn dus niet vervallen met de nieuwe
   startpagina — alleen hun opmaak is meegegaan met de huisstijl.

   (Wat wél is vervallen: .site-probleem, .site-richting*, .site-cta en
   .site-hero-acties. Die gebruikt geen enkele pagina meer.) */

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

/* Nadruk in lopende tekst. Bewust NIET de markeerstift: die staat voor "hier
   heeft een mens iets aangestreept" en mag daarom hooguit één keer per
   tekstblok voorkomen, terwijl .site-nadruk op bandleden.php vijf keer staat.
   Vijf aangestreepte woorden is geen nadruk meer, dat is een kleurtje. */
.site-nadruk { color: var(--inkt); font-weight: 600; }

/* Een blok dat een grens trekt ("dit doet Bandhub niet"). Papier met een
   rand, zoals de notitie, maar recht: dit is geen kattebelletje. */
.site-scheiding {
  max-width: 720px; margin: 80px auto;
  padding: 30px 34px;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2);
}
.site-scheiding h2 { margin-bottom: .35em; }
.site-scheiding p { color: var(--zacht); margin: 0; line-height: 1.6; }

/* ── Functiepagina's ──────────────────────────────────────────────────────
   bandleden.php, programmeurs.php en overzicht.php: een tekening naast de
   paginakop, en daaronder afwisselend tekst en afdrukken.

   De tekening bovenaan is dezelfde als de kaart op de startpagina die
   hierheen wijst -- één tekening, twee formaten. Dat scheelt onderhoud en het
   maakt het verband tussen de twee pagina's zichtbaar. */

.pagina-kop {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px;
  align-items: center; margin-bottom: 64px;
}
.pagina-kop .site-paginakop { margin-bottom: 0; }
.pagina-kop-beeld {
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--papier-2); padding: 22px; rotate: -.8deg;
}

/* De tekstblokken tussen de afdrukken houden hun bestaande klassen. Een
   leesregel blijft een leesregel, ook als er ruimte over is -- vandaar 720px,
   ook al is de kolom 1080px breed. */
.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.6; }
.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 -- precies de fout uit deelproject 7, waar het
   beschikbaarheidsraster op een bureauscherm kleiner uitkwam dan op een
   telefoon. */
.site-verhaal-schermen { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

/* Het telefoonscherm van het publieke portaal met tekst ernaast. Alleen
   staand in een kolom van ruim duizend pixels hing dat smalle beeld erbij als
   een losse bijlage; nu vult de uitleg die ruimte. align-items: center houdt
   de tekst op ooghoogte met het midden van het toestel. */
/* Het paar telefoon-plus-tekst staat gecentreerd, terwijl de losse afdrukken
   in dezelfde kolom links blijven hangen (.site-verhaal-schermen heeft
   align-items: flex-start). Dat is met opzet: een afdruk van 1224 breed vult de
   kolom toch, maar dit paar is samen zo'n 680 breed en hing daardoor scheef in
   een kolom van 1080 -- met alle lege ruimte aan één kant. */
.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. Zolang de rij de volle kolom vulde, kon de basis 0
   zijn: het tekstblok groeide dan vanzelf tot zijn max-width. Sinds de rij zich
   naar zijn inhoud voegt (align-self: center hierboven) is er niets meer om in
   te groeien, en zakte de tekst in tot 368 px. Met de leesbreedte als basis
   houdt hij zijn maat, en mag hij op een smal scherm nog steeds krimpen. */
.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.6; }
.site-scherm-naast p:last-child { margin-bottom: 0; }

/* ── Prijspagina ────────────────────────────────────────────────────────── */

.site-prijs { margin: 56px 0 80px; }

/* Eén kaart, geen raster. Er is ook maar één pakket: twee kaarten naast elkaar
   die alleen in betaaltermijn verschillen, zetten een keuze neer waar er geen
   is -- en de bezoeker die twijfelt tussen maand en jaar kiest maand, want dat
   kan hij altijd nog herzien. De jaartermijn staat er als tweede, stillere weg
   onder de knop.

   Tot 9 september 2026 stonden hier twee gelijkwaardige kaarten met elk een
   eigen knop. Dit is dezelfde inhoud, minder werk voor de lezer. */
.site-prijs-kaart {
  max-width: 460px; margin: 0 auto;
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2); padding: 34px 30px 30px; text-align: center;
  /* Papier ligt nooit helemaal recht. Dezelfde slag als de andere kaarten. */
  rotate: -.4deg;
}

/* ── 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: 6px;
  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;
  transition: background .12s ease, color .12s ease;
}
.site-prijs-tabs label:hover { color: var(--inkt); }

/* Het gekozen tabblad: inkt op papier, zoals een 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(--inkt); color: var(--papier);
}
#prijs-maand:checked ~ .site-prijs-tabs label[for="prijs-maand"] .site-prijs-wenk,
#prijs-jaar:checked  ~ .site-prijs-tabs label[for="prijs-jaar"]  .site-prijs-wenk {
  color: var(--stift);
}

/* Zichtbare focus, want met het toetsenbord is de radioknop zelf onzichtbaar:
   zonder deze regel springt de aandacht naar iets wat je niet ziet. */
.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(--potlood); outline-offset: 2px;
}

.site-prijs-wenk {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--groen-tekst);
}

/* 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; }

/* Een bedrag is een cijfer en hoort dus in de monoletter, volgens
   DESIGN_GUIDELINES.md. Uitgeschreven getallen elders op de site niet: "tien
   euro per maand" in de monoletter leest als broncode. */
.site-prijs-getal {
  display: block;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 5vw, 52px); font-weight: 600; line-height: 1.1;
  color: var(--inkt);
  /* De spatie in "€ 10" is in een monoletter net zo breed als een cijfer, en
     dat gaapt op 52 pixels. Hier smaller, en alleen hier: word-spacing raakt
     de cijfers zelf niet, een negatieve letter-spacing wel. De spatie blijft
     in de HTML staan -- tests/test_verkoopsite.php leest het bedrag met een
     patroon dat geen tussenliggende opmaak verdraagt. */
  word-spacing: -.28em;
}
.site-prijs-per  { display: block; margin-top: 8px; font-size: 14px; color: var(--zacht); }
.site-prijs-jaar { margin: 10px 0 0; font-size: 14px; color: var(--zacht); }

/* Wat je krijgt. Vinkjes met de groene pen ervoor -- op deze site betekent dat
   "afgevinkt door een mens". Links uitgelijnd terwijl de kaart gecentreerd is:
   een opsomming van vijf regels leest niet gecentreerd. */
.site-prijs-lijst {
  margin: 26px 0 0; padding: 0; list-style: none;
  text-align: left; font-size: 15px; line-height: 1.55;
}
.site-prijs-lijst li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
}
.site-prijs-lijst li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--potlood); font-weight: 700;
}

/* De streep boven de slotregel: waar de opsomming ophoudt en de toelichting
   begint. Een rand en geen <hr>, zodat er geen leeg element in de opsomming
   staat voor wie de pagina voorleest. */
.site-prijs-voorwie {
  margin: 24px 0 0; padding-top: 20px;
  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. Kleiner en zachter dan
   de regel erboven: het is een uitzondering voor een enkeling, geen belofte
   aan iedereen die de kaart leest. */
.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(--groen-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. Geen
   max-width van 720px zoals de andere leespagina's -- die kneep de tabel
   rechts samen tot een kolom waar hij niet in past, en dan schuift hij in
   zijn eigen omhulsel terwijl er ruimte zat naast staat. Gezien op een
   opname, niet bedacht.

   min-width: 0 op het blok: zonder dat blijft een rasterkolom minstens zo
   breed als zijn inhoud (de standaard min-width: auto van een grid-item), en
   duwt de tabel de hele pagina breder dan het scherm -- ook al staat hij zelf
   al in een schuifbaar omhulsel. */
.site-routekaart {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.site-routekaart-blok { margin-bottom: 0; min-width: 0; }
.site-routekaart-blok h2 { margin-bottom: .4em; }
.site-routekaart-blok > p { color: var(--zacht); line-height: 1.6; }

.site-routekaart-lijst { list-style: none; padding: 0; margin: 18px 0 0; }
.site-routekaart-lijst li {
  position: relative; padding-left: 30px; margin-bottom: 14px;
  color: var(--zacht); line-height: 1.6;
}
/* Een met de hand gezet streepje in plaats van een bolletje, licht scheef --
   zoals de rest van de hand op deze site. */
.site-routekaart-lijst li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--stift); rotate: -2deg;
}
.site-routekaart-lijst a { color: var(--groen-tekst); font-weight: 600; text-decoration: none; }
.site-routekaart-lijst a:hover { text-decoration: underline; }

/* Een tabel die breder is dan de kolom schuift in zijn eigen omhulsel; de
   pagina zelf mag nooit horizontaal schuiven. */
.site-routekaart-tabel-wrap { overflow-x: auto; margin: 18px 0 0; }
.site-routekaart-tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.site-routekaart-tabel th {
  text-align: left; padding: 0 12px 10px 0;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--zacht);
  border-bottom: 2px solid var(--lijn);
}
.site-routekaart-tabel td {
  padding: 12px 12px 12px 0; color: var(--zacht); line-height: 1.55;
  border-bottom: 1px solid var(--lijn); vertical-align: top;
}
.site-routekaart-tabel td:first-child { color: var(--inkt); font-weight: 600; white-space: nowrap; }
.site-routekaart-tabel tr:last-child td { border-bottom: none; }

.site-volgende {
  max-width: 720px; margin: 64px auto 0; padding: 28px 30px;
  background: var(--papier-2); border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);
}
.site-volgende p { margin: 0; color: var(--zacht); line-height: 1.6; }
.site-volgende a { color: var(--groen-tekst); font-weight: 600; text-decoration: none; }
.site-volgende a:hover { text-decoration: underline; }

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

.site-aanmeld { max-width: 460px; margin: 0 auto 80px; }
.site-aanmeld-kaart {
  border: 1px solid var(--lijn); border-radius: var(--radius-lg);
  background: var(--papier-2); padding: 34px 30px; rotate: -.4deg;
}
.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:
   ze heten termijn en gaan mee in de POST. De opmaak erven ze van
   .site-prijs-tabs hierboven; wat hier staat is alleen wat op deze kaart
   anders moet. */

.site-aanmeld-kop {
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--zacht);
}

/* 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-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--zacht); text-align: right;
  /* Zelfde reden als bij .site-prijs-getal: de spatie in "EUR 10" is in een
     monoletter net zo breed als een cijfer. */
  word-spacing: -.2em;
}

/* De knop met het bedrag erop, en de kleine letters eronder. Het bedrag is
   het laatste wat iemand leest voordat hij bij Stripe uitkomt. */
.site-aanmeld-klein {
  margin: 16px 0 0; font-size: 12px; 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(--groen-tekst); }

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

/* ── De betaalmethode ────────────────────────────────────────────────────
   Vijf regels, één aangevinkt, en de hele regel is aanklikbaar -- niet alleen
   het bolletje. Hier stond eerst een tweede knop voor PayPal naast de gewone;
   dat las alsof PayPal iets anders was dan betalen. 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(--inkt); align-self: center; }
.site-betaalwijze li:has(input:checked) { background: var(--papier-2); }
.site-betaalwijze li:has(input:focus-visible) { outline: 2px solid var(--potlood); outline-offset: -2px; }
.site-betaalwijze-naam { font-weight: 600; color: var(--inkt); }
.site-betaalwijze-wenk { font-size: 13px; color: var(--zacht); }

/* ── Juridische pagina's (taak 6) ──────────────────────────────────────
   Voorwaarden, privacy en verwerkersovereenkomst: lange lopende tekst is
   de valkuil van deze drie pagina's. Een smallere leeskolom dan de rest
   van de site (640px, zo'n 65-70 tekens bij de body-tekst op 16px) en
   duidelijke tussenkopjes houden dat leesbaar. Eigen klassen, geen
   hergebruik van .site-verhaal-tekst — die is ontworpen rond een
   tekst+scherm-grid dat deze pagina's niet hebben. */

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

/* Kleiner dan elders op de site: dit zijn leespagina's, geen affiches. De
   kop moet de pagina benoemen en dan uit de weg gaan.

   Hier wél afbreken: "Verwerkersovereenkomst" is één woord van 22 letters en
   liep in smalle kapitalen 32 pixels uit de kolom, waardoor die pagina als
   enige horizontaal schoof. De pagina staat op lang="nl", dus de browser
   breekt op de Nederlandse regels af. */
.site-juridisch h1 {
  font-size: clamp(30px, 3.6vw, 46px); margin-bottom: .4em;
  -webkit-hyphens: auto; hyphens: auto;
}

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

/* De melding dat de pagina nog niet is vastgesteld — bovenaan en zichtbaar,
   niet in klein grijs onderaan (zie Bandhub-plan-6-verkoopsite.md, taak 6).

   Dit blok gebruikte de amberkleur van de applicatie ("in afwachting"). Die
   tokens bestaan hier niet meer: de site heeft sinds deelproject 8 een eigen
   palet met twee pennen in plaats van een statuspalet. Vandaar gewoon papier
   met een rand — de tekst zegt zelf al genoeg. */
.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, 26px); }

.site-juridisch-kop > p {
  color: var(--inkt);
  line-height: 1.6;
}

/* De vraag die de eigenaar of zijn jurist per kopje moet beantwoorden — de
   kern van deze steigerpagina's. De markeerstift als linkerrand: iemand heeft
   dit aangestreept om te beantwoorden. Dat is precies wat de stift op deze
   site betekent, en het onderscheidt de vraag van het feit eronder, dat de
   groene pen van een vinkje krijgt. */
.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, tegenover de markeerstift van de vraag
   hierboven en het rood van een open punt hieronder. */
.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 — bijvoorbeeld het land
   waar een server fysiek staat. Zelfde vorm als het feit hierboven, maar met
   de rode pen, zodat het niet per ongeluk voor een afgeronde vaststelling
   wordt aangezien: dit is een open technische vraag, geen juridische. */
.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; }
}

/* ── Functiepagina's (taak 2) ────────────────────────────────────────── */

/* De drie richtingen op de startpagina. Naast elkaar zolang het past, en
   op een telefoon onder elkaar. Geen "order": de volgorde in de HTML is
   de bedoelde volgorde, en die hoort op elke breedte gelijk te zijn. */
/* De drie richtingen: elk een eigen rij met tekst naast het beeld, om en
   om links en rechts.

   Ze stonden eerst als drie kaarten naast elkaar. Dat leek compacter, maar
   het gaf elk beeld maar 380 px breedte, en een beschikbaarheidsraster
   overleeft dat niet -- het werd een grijze waas. In twee kolommen krijgt
   hetzelfde beeld ruim 500 px en is het weer te lezen. De pagina wordt er
   langer van; dat is hier de goede ruil. */
.site-richtingen {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin: 40px 0;
}

/* Sinds taak 3 is .site-richting zelf de link (een <a> in plaats van
   een <div>): de hele kaart is klikbaar, niet alleen het beeld of de
   kop. text-decoration: none voorkomt dat de hele kaart onderstreept
   oogt; de kop krijgt bij hover de accentkleur als enige aanwijzing
   dat het om een link gaat. */
.site-richting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Om en om: bij de tweede rij schuift de tekst naar links en het beeld
   naar rechts. Dat geeft ritme en voorkomt dat drie rijen onder elkaar als
   een formulier lezen. De HTML-volgorde blijft beeld-dan-tekst, zodat er
   op een telefoon niets omgekeerd hoeft te worden. */
.site-richting:nth-child(even) img { order: 2; }

.site-richting h3 { margin: 0 0 12px; font-size: 1.35rem; font-weight: 700; color: var(--inkt); }
.site-richting p  { margin: 0; color: var(--zacht); line-height: 1.6; font-size: 1.02rem; }
.site-richting:hover h3 { color: var(--groen-tekst); }

.site-richting img {
  width: 100%;
  height: auto;
  /* Alle drie de beelden hebben dezelfde verhouding (1040x554), zodat de
     rijen even hoog ogen en de tekst ernaast op dezelfde hoogte begint.

     Die verhouding is die van het volledige beschikbaarheidsraster. In de
     eerste opzet stonden de richtingen als drie kaarten naast elkaar, kreeg
     elk beeld 380 px, en paste alleen een uitsnede -- met een datumkolom die
     halverwege werd afgesneden en er niet uitzag als een uitsnede maar als
     een fout. Met twee kolommen krijgt hetzelfde beeld ruim 500 px en past
     het geheel. Zie tools/richtingbeelden.py voor de uitsnedes. */
  aspect-ratio: 1040 / 554;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--radius);
  border: 1px solid var(--lijn);
}

/* Op een telefoon één kolom.
   LET OP DE PLEK: deze regel moet ná .site-richting hierboven staan, niet in
   het mediablok bovenaan dit bestand. Daar stond hij eerst, en daar deed hij
   niets -- de tweekolomsregel komt verderop in het bestand en heeft dezelfde
   zwaarte, dus die won gewoon. Op 375 px liep de tekst daardoor van het
   scherm af. Gezien op een opname, niet gevangen door een test.

   De HTML-volgorde is beeld-dan-tekst en dat is hier de goede: eerst zien
   wat het is, dan lezen wat het doet. Daarom moet de order-regel van de even
   rijen terug naar de standaard, anders staat bij de tweede richting de
   tekst ineens bovenaan. */
@media (max-width: 768px) {
  .site-richtingen { gap: 44px; }
  .site-richting { grid-template-columns: 1fr; gap: 20px; }
  .site-richting:nth-child(even) img { order: 0; }
}

/* De kop van een functiepagina: één regel die de richting benoemt, en
   eronder een lead die zegt waarover de pagina gaat. */
.site-paginakop { margin: 0 0 48px; 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; }

/* De doorverwijzing onderaan een functiepagina naar de volgende richting.
   Zonder dit eindigt elke pagina doodlopend en moet de bezoeker terug
   naar het menu. */
.site-volgende {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--lijn);
}

.site-volgende a { color: var(--groen-tekst); font-weight: 600; text-decoration: none; }
.site-volgende a:hover { text-decoration: underline; }

/* ── Routekaart (taak 7) ─────────────────────────────────────────────── */

/* "Wat er nu is" en "Waar aan gewerkt wordt" naast elkaar zolang het
   past, op een telefoon onder elkaar — zelfde opzet als .site-richtingen
   hierboven. De linkerkolom krijgt een vaste, smalle breedte (het is een
   korte lijst met drie links); de tabel rechts krijgt de rest van de
   ruimte, want die heeft het nodig. */

.site-routekaart-blok h2 { margin: 0 0 16px; font-size: 1.15rem; }

.site-routekaart-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-routekaart-lijst a { color: var(--groen-tekst); font-weight: 600; text-decoration: none; }
.site-routekaart-lijst a:hover { text-decoration: underline; }
.site-routekaart-lijst li { color: var(--zacht); line-height: 1.6; }

/* De tabel mag op een smal scherm best breder zijn dan de kolom: liever
   zijwaarts scrollen dan elke toelichting tot op het woord afbreken. */
.site-routekaart-tabel-wrap { overflow-x: auto; }

.site-routekaart-tabel {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.site-routekaart-tabel th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zacht);
  border-bottom: 2px solid var(--lijn);
  padding: 0 12px 8px 0;
}

.site-routekaart-tabel td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--lijn);
  color: var(--inkt);
  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; }


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

.held {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 46px;
  align-items: center; margin-bottom: 10px;
}
.held-lead { margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: var(--zacht); max-width: 40ch; }
.acties { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.richtingen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.richting { display: block; text-decoration: none; }
.richting-beeld {
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--papier-2); padding: 16px; transition: rotate .2s;
}
/* Licht scheef, elk een andere kant op, en recht zodra je erover gaat. Meer
   dan anderhalve graad wordt slordig, minder merk je niet. */
.richting:nth-child(1) .richting-beeld { rotate: -1.1deg; }
.richting:nth-child(2) .richting-beeld { rotate: .8deg; }
.richting:nth-child(3) .richting-beeld { rotate: -.5deg; }
.richting:hover .richting-beeld { rotate: 0deg; }
.richting h3 { margin: 20px 0 9px; }
.richting p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--zacht); }
.verder {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--groen-tekst); font-weight: 700;
}

/* Het bewijs: één echte opname, op de volle breedte van de inhoudskolom.
   In deelproject 7 kwam een scherm van 1440 px terecht in een gedeelde kolom
   van ruim 500 px en werd het raster kleiner dan op een telefoon. Vandaar de
   volle breedte, en vandaar dat het bestand zelf niet verkleind is. */
.bewijs { margin: 88px 0 0; }
.bewijs .bovenregel { text-align: center; margin-bottom: 20px; }

.rest { margin: 88px 0 0; }
.rest .bovenregel { text-align: center; margin-bottom: 22px; }
/* Twee kolommen, en op een smal scherm vanzelf één -- geen tweede mediablok
   nodig. Bewust GEEN column-count: die verdeelt op regelhoogte en breekt een
   regel dan halverwege over de kolomrand af. Een raster houdt elke regel heel.

   minmax(0, …) en niet minmax(30ch, …): zonder die nul kan een lange regel de
   kolom breder duwen dan de helft 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: 14px 40px;
}
.rest-lijst li {
  position: relative; padding-left: 30px; margin: 0;
  color: var(--zacht); line-height: 1.55;
}
/* Hetzelfde met de hand gezette streepje als op de routekaart: een geveegd
   lijntje in de stiftkleur, licht scheef. Eén idioom voor alle opsommingen op
   deze site -- een bolletje hier zou als een andere site aanvoelen. */
.rest-lijst li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--stift); rotate: -2deg;
}
.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);
}

/* Sinds 26 september 2026 zonder de kop "Niet voor boekingsbureaus" en zonder
   het verbodsteken ernaast: één alinea, dus één kolom. */
.afbakening {
  max-width: 760px; margin: 88px auto 0;
}
.afbakening p { margin: 0; color: var(--zacht); line-height: 1.6; }
/* De vetgezette aanhef ("ook voor wie meerdere projecten draait") doet het
   werk; géén eigen kleur. */
.afbakening-wel strong { color: var(--inkt); }

.slot { max-width: 640px; margin: 90px auto 0; text-align: center; }
.slot p { margin: 0 0 26px; color: var(--zacht); font-size: 17px; }
.slot a:not(.knop) { color: var(--groen-tekst); }


/* ═════════════════════════════════════════════════════════════════════════
   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. Dat is in deelproject 7 al
   een keer misgegaan met het blok voor 375 px, en het kost een middag voordat
   je doorhebt dat je naar de goede regel kijkt die alleen te vroeg staat.

   De pagina-eigen blokken hierboven blijven waar ze staan: die raken andere
   selectors, dus ze vechten hier niet mee.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .site-header-inner, .site-main { padding-left: 22px; padding-right: 22px; }
  .held, .richtingen { grid-template-columns: 1fr; }
  .pagina-kop { grid-template-columns: 1fr; gap: 28px; }
  .site-routekaart { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Naast elkaar zou het toestel op 375px de halve regel opeten en de tekst
     tot een kolom van twintig tekens persen. Beeld eerst, dan de uitleg. */
  .site-scherm-paar { flex-direction: column; align-items: flex-start; gap: 20px; }
  .site-scherm-naast { max-width: 100%; }
  .held { gap: 34px; }
  .site-footer-inner { padding: 22px; flex-direction: column; align-items: flex-start; }
  .notitie { margin-left: 22px; margin-right: 22px; padding: 26px 24px; font-size: 17px; }
}

/* ── De menuknop op smalle schermen ────────────────────────────────────────
   De menubalk besloeg op 375px drie regels en daarmee bijna de halve eerste
   schermvulling: je zag het menu en nog geen woord van de pagina. 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;
    padding: 7px;
    margin: -7px;            /* raakvlak van 36px zonder de kop hoger te maken */
    border: 0;
    background: none;
    color: var(--zacht);
    cursor: pointer;
    border-radius: var(--radius);
  }
  [data-menu="aan"] .site-nav-menuknop:hover { color: var(--inkt); }
  [data-menu="aan"] .site-nav-menuknop:focus-visible {
    outline: 2px solid var(--merk);
    outline-offset: 2px;
  }
  [data-menu="aan"] .site-nav-menuknop svg { display: block; }

  /* De kop wordt één regel: het logo links, de knop rechts. */
  [data-menu="aan"] .site-header-inner { flex-wrap: nowrap; }

  /* Het paneel. position:absolute en niet fixed: hij hoort bij de kop en moet
     meeschuiven als de pagina achter hem wegrolt. */
  [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: 6px 22px 18px;
    background: var(--papier);
    border-bottom: 1px solid var(--lijn);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
  }
  [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: 12px 0;
    font-size: 17px;
  }
  [data-menu="aan"] .site-nav-links > a + a { border-top: 1px solid var(--lijn); }

  /* Het huisje is hier overbodig: het logo ernaast doet al hetzelfde, en in
     een lijst met woorden is één los pictogram een raadsel. */
  [data-menu="aan"] .site-nav-home { display: none; }

  /* Aanmelden is waar deze site voor bestaat, dus in het paneel is het een
     knop en geen regel tekst. De aangestreepte markering eronder werkt alleen
     in een lopende regel; hier zou hij als een streep door de tekst lezen. */
  [data-menu="aan"] .site-nav-cta {
    margin-top: 14px;
    padding: 13px 18px;
    text-align: center;
    background: var(--actie);
    /* !important omdat de regel hierboven (.site-nav-cta) dat ook is: daar
       moet de kleur --inkt winnen van .site-nav a. In een lópende regel klopt
       dat -- het woord staat op de paginakleur met alleen een veeg eronder --
       maar hier ligt het op een amber vlak, en --inkt is in de donkere modus
       bijna wit: 1,9:1, onleesbaar. --actie-ink haalt 10,4:1. */
    color: var(--actie-ink) !important;
    border-radius: var(--radius);
    font-weight: 700;
  }
  [data-menu="aan"] .site-nav-cta::before { content: none; }
  [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: 13px 18px;
  }

  /* De themaschakelaar onderaan, los van de links: hij gaat niet ergens
     heen. */
  [data-menu="aan"] .site-nav-thema:not([hidden]) {
    margin-top: 14px;
    align-self: flex-start;
  }
}

@media (max-width: 520px) {
  .site-nav { gap: 14px; font-size: 14px; }
  .notitie { margin-top: 56px; margin-bottom: 48px; }
  .site-footer { margin-top: 60px; }
  .knop, .site-btn, .site-btn-primary { padding: 14px 22px; font-size: 15px; }
}