/* freelyx.nl, publieke site. BESTUURSKAMER, 10 augustus 2026.
   Dit vervangt de lichte identiteit Inkt en stroom (26 juli) volledig, per het IA-besluit van
   10 augustus in ../DECISIONS.md. De site wordt de voorkant van het portaal: dezelfde kamer,
   dezelfde deur, dezelfde stem.

   GEZAGSVERDELING, vastgelegd bij de opdracht. Het PORTAAL bezit look en feel. Elke waarde
   hieronder komt uit ../../../freelyx-portal/public/assets/portal.css, dat op zijn beurt een op
   een uit de ontwerpoverdracht komt
   (../../../freelyx-portal-redesign/design_handoff_freelyx_opdrachten/README.md). De tokennamen
   zijn daarom de ENGELSE namen uit die overdracht en niet de Nederlandse van het oude
   freelyx.css: wie het ontwerp naast deze code legt moet elke waarde kunnen terugvinden zonder
   te vertalen. De toelichting blijft Nederlands.

   De bedoeling in een zin: een rustige, warme hotellobby op het Quilyx-palet, uitdrukkelijk NIET
   de felle oranje-op-marine SaaS-look.

   Zes dingen die de overdracht load-bearing noemt en die dus niet zomaar wijzigen:
   1. Merkmarine #0C0C4C is nooit een heel paginavlak, alleen een doorschijnende paneelvulling.
      De grond is een verdiepte afleiding, #08081C.
   2. Het brons IS het merkoranje, geschaduwd. Vol #FF6D24 op marine is het luidste sjabloonsignaal
      dat er is. Vol oranje leeft op deze site op precies EEN plek: de punt in het woordmerk.
      (Het portaal heeft er twee, omdat het bord daarnaast het label NIEUW draagt; dat label
      bestaat hier niet, want opdrachtinhoud staat nooit op een publieke URL.)
   3. Radius 2px op alles wat je aanraakt, 3px op paneel en beloftenband. Niets is een pil.
   4. Hairlines, geen dozen. Een rand per groep, niet een per item.
   5. Warme neutralen op een koele grond. Geen puur wit, geen koelgrijs, nergens.
   6. Geen schaduwen, geen kleurverloopknoppen, geen emoji.

   AFWIJKINGEN van de overdracht, bewust en hier genoteerd (identiek aan het portaal, zodat de
   twee kanten van de deur niet uit elkaar lopen):
   - Lettertypen zijn ZELF-GEHOST. Derde partijen zijn hier verboden en de CSP staat op
     font-src 'self' (zie ../deploy/security-headers-checklist.md).
   - text-muted #7C7568 haalde 4.34:1 op de grond en draagt echte tekst; opgetild naar #877F71,
     4.99:1. text-footer #6E6A62 haalde 3.62:1 en is opgetild naar #837D72, 4.85:1. Beide
     verschillen zijn met het oog niet te zien en zonder die correctie zakt de pagina onder AA.
   - LEESBAARHEIDSLIFT 30 augustus 2026 (oprichtersopdracht bij het doorlopen van de site): de
     drie gedempte tinten een stap lichter binnen dezelfde warme familie (text-meta #8C857A naar
     #9A9286, 6.4:1 op de grond; text-muted #877F71 naar #948C7E, 5.9:1; text-footer #837D72
     naar #908A7E, 5.8:1) en de kleine leesteksten een maat op (deur- en kaarttekst 14.5 naar
     15, kaartdatum 11 naar 12, kaartbron, voetregels, sna-onderschrift en credit 12.5 naar 13,
     feit en sectie-zij naar 14, registerlabel naar 15, registerkop naar 11). De heldmaten zijn
     bewust ongemoeid gelaten: de pin met /opdrachtgevers/ en de 631/710-lijn verdragen geen
     maatverschil, en kleur heeft geen geometrie.
   - Een echte focusring van 2px accent-soft; de overdracht vraagt daar zelf om.

   Geen em dashes en geen en dashes, ook niet in dit bestand. */

/* ================= lettertypen, zelf-gehost (SIL OFL, licentie naast de bestanden) ========= */
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway-vf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aleo';
  src: url('../fonts/aleo-vf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aleo';
  src: url('../fonts/aleo-italic-vf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ================= tokens ================= */
:root {
  --ground: #08081C;
  --ground-brand: #0C0C4C;
  --panel: rgba(12, 12, 76, .42);

  --hairline: rgba(227, 199, 154, .13);
  --hairline-soft: rgba(227, 199, 154, .10);
  --hairline-row: rgba(227, 199, 154, .11);
  --hairline-strong: rgba(227, 199, 154, .22);

  --accent: #B9803F;
  --accent-soft: #D8AE73;
  --accent-wash: rgba(185, 128, 63, .15);
  --brand-orange: #FF6D24;

  --text-hi: #F7F1E8;
  --text: #F3ECE1;
  --text-title: #F5EFE6;
  --text-body: #AEA79D;
  --text-desc: #A49D93;
  --text-meta: #9A9286;
  --text-muted: #948C7E;
  --text-chip: #BDB6AC;
  --text-nav: #A8A198;
  --text-footer: #908A7E;

  --op-knop: #0B0B22;          /* letterkleur op een bronzen vlak, 5.73:1 */
  --veldvulling: rgba(255, 255, 255, .028);
  --rij-hover: rgba(216, 174, 115, .045);

  --display: 'Aleo', Georgia, 'Times New Roman', serif;
  --sans: 'Raleway', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  --max: 1440px;
  --pad: clamp(22px, 3.4vw, 48px);
  --r: 2px;                    /* alles wat je aanraakt */
  --r-vlak: 3px;               /* paneel en beloftenband */
  --kop-h: 78px;
}

/* ================= basis ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { hyphens: manual; background: var(--ground); scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--ground);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
::selection { background: rgba(185, 128, 63, .34); color: var(--text-hi); }
strong, b { font-weight: 600; }
h1, h2, h3 { font-weight: 400; }

a { color: var(--accent-soft); text-decoration: none; }
a:hover { color: #EBD3AC; }
/* De overdracht kent geen focusring en vraagt er zelf expliciet om er een toe te voegen. */
/* [tabindex="0"] en niet [tabindex]: main draagt tabindex="-1" als doel van de sprongkoppeling,
   en met de brede selector kreeg de hele pagina een bronzen kader zodra je die koppeling
   gebruikte. Een programmatisch doel hoort geen focusring te tonen. */
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: var(--r);
}

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 99;
  background: var(--accent); color: var(--op-knop);
  padding: 10px 18px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 600;
}
.skip:focus { left: 12px; }
/* Labels die het ontwerp niet toont maar een schermlezer wel nodig heeft. Geen display:none:
   dat zou ze ook voor de schermlezer verbergen. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* de strook: de gedeelde bak van kop, held, secties en voet */
.strook, .head-row, .voet-rij {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  width: 100%;
}

/* De puntfamilie. Vol merkoranje ALLEEN in het woordmerk; elke andere punt is brons.
   Twee sterktes, precies als op het portaal: de kop draagt de lichte brons omdat hij groot en
   licht gezet is, elke andere punt draagt de volle brons. */
.punt { color: var(--brand-orange); }
.punt-accent { color: var(--accent); }
.held h1 .punt-accent { color: var(--accent-soft); }

/* ================= kop ================= */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8, 8, 28, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.head-row {
  min-height: var(--kop-h);
  display: flex; align-items: center;
  gap: clamp(22px, 3.2vw, 56px);
}
.wordmark {
  font-family: var(--display); font-weight: 400; font-size: 23px;
  letter-spacing: -.01em; line-height: 1; color: #F6F0E7; white-space: nowrap;
}
a.wordmark:hover { color: #F6F0E7; }

.nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(15px, 2.2vw, 34px); flex: 1; }
.nav a { font-size: 14px; font-weight: 400; color: var(--text-nav); white-space: nowrap; }
.nav a:hover { color: var(--text); }

.head-actie { flex: 0 0 auto; }
/* De inlogknop staat in de BRON boven het menu, want zo staat hij op de telefoon ook in beeld;
   alleen op het brede scherm schuift hij naar rechts. Zo loopt de toetsenbordvolgorde overal
   met het beeld mee. Zet dit nooit om naar order op de telefoon: dan springt de focus na het
   laatste menu-item terug omhoog. */
@media (min-width: 721px) {
  .head-actie { order: 3; }
}
.knop-omlijnd {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 1px solid var(--hairline-strong); border-radius: var(--r);
  padding: 11px 20px; font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  color: #E8E1D6; cursor: pointer;
}
.knop-omlijnd:hover { border-color: var(--accent-soft); color: #FFF; }
.knop-omlijnd svg { flex: 0 0 auto; }

main { flex: 1; }

/* ================= de held =================
   Een op een de heldstrook van het portaal, als gebouwde code hergebruikt (IA-besluit 10
   augustus). Verschil met het portaal, met opzet: hier staat GEEN knop en GEEN telling in de
   held. De drie deuren staan er direct onder en doen dat werk, en een telling van opdrachten
   hoort niet op een publieke URL. */
.held { position: relative; isolation: isolate; }
.held-wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 74% at 8% 26%, rgba(185, 128, 63, .13), transparent 68%);
}
.held-strook { position: relative; z-index: 1; }
/* De bovengrens is 631 en niet de 600 van de overdracht, en dat is GEMETEN, niet gekozen.
   Het bord van het portaal draagt in zijn held ook een knop en een telling, waardoor die held
   op 1440 uitkomt op 631px en het zoekpaneel dus op 709 begint. De publieke held draagt die
   twee bewust niet en zou op 600 blijven staan, waardoor de site 31px hoger zou eindigen dan
   het bord. Met deze grens beginnen op beide oppervlakken de heldfoto, de beloftenband en het
   blok eronder op dezelfde lijn, en dat is de hele reden dat de site op deze look is herbouwd.
   Gemeten op de bevroren bordkopie: held 79 tot 709, beloften 492 tot 666, zoekpaneel op 709.
   Onder ongeveer 1434px stuurt 44vw beide kanten en loopt het vanzelf gelijk. */
.held-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  min-height: clamp(520px, 44vw, 631px);
}
.held-tekst {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(62px, 7vw, 96px) clamp(26px, 4.6vw, 72px) clamp(58px, 6.6vw, 92px) 0;
}
.wenkbrauw {
  font-size: 11px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent-soft);
}
.held h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(33px, 3.6vw, 52px); line-height: 1.11; letter-spacing: -.015em;
  color: var(--text-hi); margin: 22px 0 0; text-wrap: pretty;
}
.held-liniaal { width: 58px; height: 1px; background: var(--accent); margin: 34px 0 30px; }
.held-lead { font-size: 16.5px; line-height: 1.68; color: var(--text-body); max-width: 452px; text-wrap: pretty; }
/* De bereikzin is de enige harde claim in de held en heeft daarom een eigen, stillere maat:
   hij hoort bij de lead, niet ernaast. Gedeelde zin 9 wijst deze zin aan als eigenaar van de
   woorden "ruim honderd" en het cadanswoord "dagelijks"; nergens anders op de site staat hij. */
.held-reach { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--text-meta); max-width: 452px; }
.held-cursief {
  margin-top: 20px; font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 16px; color: var(--accent-soft);
}

/* de beeldkolom loopt de viewport uit; drie lagen doen het echte werk */
.held-beeld {
  position: relative;
  margin-right: calc(-1 * var(--pad));
  background: linear-gradient(140deg, #2A1D12, #120C1F 62%, #08081C);
}
/* De foto is liggend 3:2 en de kolom is bijna vierkant, dus cover snijdt de zijkanten weg.
   Het uitsnedepunt ligt bewust rechts van het midden: daar zit de warme muur met de stolp, de
   boeken en de giraffe. Op het midden wordt de grote pot doormidden gesneden door de
   beloftenband, en dat leest als een halve cilinder in plaats van als een kamer. */
.held-beeld > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 42%;
}
.laag { position: absolute; inset: 0; pointer-events: none; }
.laag-gloed {
  background: radial-gradient(72% 62% at 62% 32%, rgba(219, 152, 71, .34), transparent 72%);
  mix-blend-mode: screen; opacity: .6;
}
.laag-scrim-links {
  background: linear-gradient(90deg, #08081C 0%, rgba(8, 8, 28, .82) 22%, rgba(8, 8, 28, .24) 58%, rgba(8, 8, 28, 0) 100%);
}
.laag-scrim-onder {
  inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, rgba(8, 8, 28, 0), rgba(8, 8, 28, .78));
}

.beloften {
  position: absolute; left: 5%; right: var(--pad); bottom: clamp(22px, 3vw, 44px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(9, 9, 30, .62);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(227, 199, 154, .16); border-radius: var(--r-vlak);
}
.beloften > div {
  padding: clamp(16px, 2vw, 26px) clamp(10px, 1.5vw, 22px);
  text-align: center;
  border-right: 1px solid rgba(227, 199, 154, .12);
}
.beloften > div:last-child { border-right: none; }
.beloften svg { color: var(--accent-soft); }
.beloften b {
  display: block; margin-top: 13px;
  font-size: clamp(8.5px, .85vw, 10.5px); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: #F0E9DE; line-height: 1.6;
}
.beloften span {
  display: block; margin-top: 9px;
  font-size: clamp(11px, 1vw, 12.5px); line-height: 1.55; color: #9C958B; text-wrap: pretty;
}

/* Boven de baanbreedte loopt de heldfoto DOOR tot de vensterrand, maar hij LOST OP voorbij de
   contentlijn. Dit is het portaalbesluit van 9 augustus, letterlijk overgenomen, inclusief de
   redenering: helemaal doorlopen las fout omdat al het andere netjes in een kolom staat en de
   foto dan het enige is dat het hele scherm pakt; helemaal stoppen bij de baan las als een
   afsnede. De max() in beide waarden is geen siersel: de mediavraag meet de VENSTERbreedte
   INCLUSIEF schuifbalk, terwijl 100% de breedte ZONDER schuifbalk is. In de smalle zone daartussen
   zou de berekening de kolom naar binnen trekken; max() houdt kop, band en secties op elke
   breedte op dezelfde lijn.
   De sterkte van het verloop is op DEZE foto afgesteld: daar zit een verlichte muur, en een
   zachter verloop laat dat licht tot de vensterrand doorschemeren. */
@media (min-width: 1441px) {
  .held-strook {
    max-width: none; padding-right: 0;
    padding-left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  }
  .held-raster { grid-template-columns: minmax(0, 766px) minmax(0, 1fr); }
  .held .held-beeld { margin-right: 0; }
  .held .beloften { right: max(var(--pad), calc(100% - (var(--max) - 766px - 2 * var(--pad)))); z-index: 2; }
  .held .held-beeld::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; pointer-events: none;
    width: max(0px, calc(100% - (var(--max) - 766px - 2 * var(--pad))));
    background: linear-gradient(90deg, rgba(8, 8, 28, 0), rgba(8, 8, 28, .95) 38%, var(--ground) 62%);
  }
}

/* ================= sectiegenre =================
   Een sectie opent met een wenkbrauw en een kop op de h2-maat van het portaal.
   RITME, en de reden erachter. De eerste opzet gaf elke sectie een eigen padding EN een
   scheidingslijn binnen de strook; gemeten leverde dat gaten van 255px tussen twee blokken en
   140px kale grond onder de heldfoto op. Dat is geen rust maar een dood veld. Nu draagt alleen
   de STROOK de ruimte, dus twee secties staan op twee keer die maat uit elkaar, en de
   scheidingslijn is vervallen: elke sectie heeft al een eigen omrande groep (de deuren, de
   kaarten, de truststrook), en een lijn erboven zou de tweede rand zijn binnen dezelfde
   afstand. Een rand per groep, precies zoals de overdracht voorschrijft. */
.sectie > .strook { padding-block: clamp(44px, 4.8vw, 66px); }
/* Onder de held staat de foto zelf al als afsluiting; die heeft iets meer lucht nodig dan een
   sectie die op tekst eindigt. */
/* NUL, en dat is een oprichtersbesluit van 10 augustus: het blok onder de held hoort op dezelfde
   hoogte te beginnen als het zoekpaneel op het bord. Daar volgt de sectie #zoeken direct op de
   held, zonder enige tussenruimte, en het paneel begint dus op 709. Met deze regel plus de
   heldhoogte hierboven begint het deurenblok op 710, en zie je bij de overstap van de site naar
   het bord niets verspringen.
   Dit DRAAIT een eerdere kritiekbevinding terug (de foto zou juist meer lucht moeten krijgen dan
   de 84px die er stond). Die bevinding keek naar de pagina op zichzelf; de oprichter kijkt naar
   de twee oppervlakken naast elkaar, en dat is de zwaardere eis. */
.held + .sectie > .strook { padding-top: 0; }
/* De kop is sticky, dus een sprong naar #kennis zou de sectiekop eronder schuiven. Zelfde
   correctie als op het portaal bij #zoeken. Ook op main: de sprongkoppeling landde anders
   met de eerste regel achter de kop. */
.sectie[id], main#inhoud { scroll-margin-top: calc(var(--kop-h) + 12px); }
/* flex-end en niet baseline: bij baseline lijnt de zijlink uit op de EERSTE regel van het
   linkerblok, dus op de wenkbrauw, en dan hangt hij los boven de kop waar hij bij hoort. */
.sectie-kop { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; }
.wenkbrauw--sectie {
  font-size: 10.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-muted);
}
.sectie h2 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(26px, 2.5vw, 34px); line-height: 1.16; letter-spacing: -.012em;
  color: var(--text-hi); margin-top: 14px; text-wrap: pretty;
}
/* Leadmaat gelijkgetrokken met de openingslead op 30 augustus 2026 (punt 5, oprichter:
   twee leadstijlen op een pagina las als rommel): elke lead is 16.5, elke lopende alinea
   15.5, en het kleuronderscheid blijft (lead text-body, lopende tekst text-desc). */
.sectie-lead { margin-top: 16px; font-size: 16.5px; line-height: 1.68; color: var(--text-body); max-width: 560px; text-wrap: pretty; }
.sectie-zij { font-size: 14px; color: var(--text-meta); }
.sectie-zij a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sectie-zij a:hover { text-decoration-thickness: 2px; }

/* ================= de drie deuren =================
   Drie gelijkwaardige ingangen, want ze bedienen drie verschillende lezers: wie al toegang heeft,
   wie een opdracht heeft en wie zich wil aansluiten. Vandaar een rand om de GROEP en hairlines
   ertussen, precies zoals de beloftenband, en niet drie zwevende kaarten. De hele cel is
   klikbaar via een uitgerekte link, dezelfde techniek als de rijen op het bord: de leesbare
   tekst blijft de kop, dus een schermlezer hoort de deur en niet "hele cel". */
.poorten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--hairline); }
.poort {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: clamp(26px, 2.8vw, 38px) clamp(20px, 2.2vw, 34px);
  border-right: 1px solid var(--hairline-row); color: inherit;
}
.poort:last-child { border-right: none; }
/* focus-within naast hover, niet in plaats van: de muis kreeg een rijke terugkoppeling en het
   toetsenbord alleen een ringetje om de kop, waardoor de bronzen hoofdknop nooit liet zien dat
   hij het doel was. */
.poort:hover, .poort:focus-within { background: var(--rij-hover); color: inherit; }
.poort > svg { color: var(--accent-soft); }
.poort h3 {
  font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.25;
  color: var(--text-title); margin-top: 20px;
}
.poort:hover h3, .poort:focus-within h3 { color: var(--accent-soft); }
.poort h3 a { color: inherit; }
.poort h3 a::after { content: ''; position: absolute; inset: 0; }
.poort p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-desc); text-wrap: pretty; }
/* margin-top:auto zet de drie handelingen op EEN onderlijn. Zonder dat begonnen ze alle drie
   bovenaan hun eigen tekstblok en eindigde de bronzen knop 27px lager dan de twee tekstknoppen,
   wat de rij scheef zette. Gemeten voor en na. */
.poort-pijl {
  display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 24px;
  font-size: 14px; font-weight: 600; letter-spacing: .015em; color: var(--accent-soft);
  /* Klik-doorlatend (reparatie 31 augustus 2026, livegangavond): dit is versiering binnen
     een cel met uitgerekte link. De :active-transform verderop tilt dit element tijdens het
     indrukken boven de kliklaag uit, waardoor indrukken en loslaten op verschillende
     elementen landen en de browser de klik laat vervallen; met pointer-events none valt de
     klik altijd op de link. Nooit weghalen zolang de deur een uitgerekte link gebruikt. */
  pointer-events: none;
}
.poort-pijl svg { flex: 0 0 auto; transition: transform .22s ease; }
.poort:hover .poort-pijl svg, .poort:focus-within .poort-pijl svg { transform: translateX(4px); }
/* De twee nevendeuren dragen de secundaire knop van de overdracht: tekst met een onderrand, die
   bij hover naar het brons trekt. De onderrand hoort bij de KNOP, niet bij de cel, dus hij zit
   op een binnenlaag met de juiste hoogte. */
.poort-pijl > span {
  display: inline-flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--hairline-strong); padding: 8px 2px;
}
.poort:hover .poort-pijl > span, .poort:focus-within .poort-pijl > span { border-bottom-color: var(--accent-soft); }
/* De eerste deur is de hoofdroute en draagt daarom als enige het volle bronzen vlak. */
.poort--hoofd .poort-pijl > span {
  background: var(--accent); border-bottom: none; border-radius: var(--r);
  padding: 16px 26px; color: var(--op-knop);
}
.poort--hoofd:hover .poort-pijl > span, .poort--hoofd:focus-within .poort-pijl > span { filter: brightness(1.11); }

/* ================= kennis en inzichten =================
   Kaarten uit een gecureerde lijst Quilyx-blogposts, buildtime gelezen uit de quilyx-repo
   (../tools/kennis.py). Er wordt niets gedupliceerd: titel, datum en de eigen samenvatting van de
   post, en de klik gaat naar www.quilyx.nl. Dezelfde grammatica als de deuren: een rand om de
   groep, hairlines ertussen. */
.kennis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(28px, 3vw, 40px); border-block: 1px solid var(--hairline); }
.kaart {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 2.8vw, 38px) clamp(20px, 2.2vw, 34px);
  border-right: 1px solid var(--hairline-row);
}
.kaart:last-child { border-right: none; }
.kaart:hover, .kaart:focus-within { background: var(--rij-hover); }
.kaart-datum { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.kaart h3 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.3; margin-top: 16px; text-wrap: pretty; }
.kaart h3 a { color: var(--text-title); }
.kaart h3 a::after { content: ''; position: absolute; inset: 0; }
.kaart:hover h3 a, .kaart:focus-within h3 a { color: var(--accent-soft); }
/* :not() is hier niet cosmetisch. De datumregel is ook een p, en een kale `.kaart p` wint op
   specificiteit van `.kaart-datum`, waardoor de datum stilletjes op 14,5px in de tekstkleur
   stond MET de regelknip van vier regels eroverheen. Gemeten, niet gezien: uppercase en
   gespatieerd bleven wel staan, dus het zag er aannemelijk uit. */
/* Vijf regels, niet vier. Op vier knipte de tekst midden in een zin weg tussen ongeveer 980 en
   1160 pixels EN op een telefoon (gemeten: vijf regelvakken van 120px tegen een knip van 96px).
   Het subrooster hieronder maakt de rijen toch gelijk, dus een ruimere knip kost geen scheve
   kaarten; hij is er alleen nog als noodrem voor een uitzonderlijk lange regel. */
.kaart p:not(.kaart-datum) {
  margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--text-desc);
  text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5;
  overflow: hidden;
}
.kaart-bron { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 22px; font-size: 13px; color: var(--text-meta); }
/* De titels van drie echte artikelen zijn nooit even lang, dus de samenvattingen begonnen op
   drie verschillende hoogtes. Met subgrid delen de kaarten de vier regelhoogtes van de groep,
   waardoor datum, titel, tekst en bronregel over alle drie op dezelfde lijn liggen zonder dat
   er ook maar een titel wordt afgeknipt. Bewust achter @supports: waar subgrid ontbreekt blijft
   de flexopmaak hierboven staan, en die is precies de stand van voor deze regel. */
@supports (grid-template-rows: subgrid) {
  .kennis { grid-template-rows: auto auto auto auto; }
  .kaart { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
}
.kaart-bron svg { flex: 0 0 auto; transition: transform .22s ease; }
.kaart:hover .kaart-bron, .kaart:focus-within .kaart-bron { color: var(--accent-soft); }
.kaart:hover .kaart-bron svg, .kaart:focus-within .kaart-bron svg { transform: translateX(4px); }

/* ================= vertrouwen =================
   Compact: het SNA-keurmerk, Waadi, KvK en het merk van Quilyx. Meer niet.
   Het keurmerk staat op een WITTE kaart omdat het reglement dat eist; dat is de enige plek op
   deze donkere site waar wit vlak legitiem is, en de toeschrijving zit er onlosmakelijk aan
   vast als bijschrift. */
/* Drie sporen naast elkaar: het keurmerk met zijn toeschrijving, de vier vaste bewoordingen, en
   het merk van Quilyx. Een raster en geen flexrij, want met flex groeide het keurmerkspoor over
   zijn eigen maat heen en viel de vierde bewoording naar een tweede regel; de vier horen op een
   lijn te staan, dat is het hele punt van een truststrook. */
.vertrouwen {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center; gap: clamp(24px, 3vw, 44px);
  border-top: 1px solid var(--hairline); padding-top: clamp(26px, 3vw, 38px);
}
/* 360 en niet 420: de vier bewoordingen vragen 562px en braken bij 420 al vanaf ongeveer 1340
   naar een tweede regel. Gemeten per breedte, niet geschat. */
.sna { display: flex; align-items: center; gap: 18px; max-width: 360px; }
.sna-chip {
  flex: 0 0 auto; display: block; background: #FFF; border-radius: var(--r-vlak);
  padding: 12px;
}
.sna-chip img { display: block; width: 74px; height: auto; }
.sna figcaption { font-size: 13px; line-height: 1.6; color: var(--text-meta); }
.feiten { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2vw, 30px); }
/* Op een documentpagina staat de kerngegevensregel onder de knoppen en heeft hij zijn eigen
   ademruimte nodig; in de truststrook van de homepage regelt het raster dat. */
main.doc .feiten { margin-top: 26px; }
.feit { font-size: 14px; color: var(--text-desc); white-space: nowrap; }
.feit b { font-weight: 600; color: var(--text); }
.vertrouwen .credit { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-meta); }
.vertrouwen .credit:hover { color: var(--accent-soft); }
.qlogo { width: 89px; height: 20px; display: block; opacity: .78; }
.credit:hover .qlogo { opacity: 1; }

/* ================= documentpagina's =================
   Over Freelyx, voor opdrachtgevers, privacyverklaring en voorwaarden. Geen held en geen
   register: een kolom op dezelfde grond, precies het DOC-genre van het portaal
   (main.doc in portal.css). De leesmaat is 680px, want dat houdt een regel op 65 tot 75 tekens
   in Raleway 16px, en dat is de maat waarop deze teksten geschreven zijn. */
main.doc { padding-block: clamp(44px, 5vw, 76px) clamp(64px, 7vw, 104px); }
main.doc > .strook { max-width: 1080px; }
/* .lees (de leesmaat van 680) is verhuisd naar de sectie VOOR OPDRACHTGEVERS achteraan:
   de klasse wordt alleen nog door de publieke secties gedragen, niet door het doc-genre. */

main.doc h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(30px, 3vw, 42px); line-height: 1.14; letter-spacing: -.015em;
  color: var(--text-hi); text-wrap: pretty;
}
main.doc .paginalead { margin-top: 22px; font-size: 16.5px; line-height: 1.68; color: var(--text-body); max-width: 620px; text-wrap: pretty; }
main.doc h2 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(24px, 2.3vw, 31px); line-height: 1.2; letter-spacing: -.012em;
  color: var(--text-hi); text-wrap: pretty;
}
main.doc h3 {
  font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.3;
  color: var(--text-title); text-wrap: pretty;
}
/* :not([class]) is hier NIET cosmetisch, het is de reparatie van een val die in deze bouw twee
   keer heeft toegeslagen. `main.doc p` telt als 0-1-2 en wint daarmee van elke enkele klasse
   (0-1-0), dus .uitspraak, .paginalead, .stroomnoot, .mailregel en zelfs de wenkbrauw kregen
   stilletjes de lopende-tekstmaat: de uitspraak stond op 15,5px in plaats van 36 en las daardoor
   als bijzin in plaats van als de toezegging waar de pagina om draait. Gemeten, niet gezien,
   want tekstkleur en cursief klopten wel.
   De basisregel geldt daarom alleen nog voor alinea's ZONDER klasse. Elke klasse-alinea zet
   hieronder zijn eigen maat, kleur en regelafstand voluit. Wie hier een klasse toevoegt, geeft
   hem dus ook zijn eigen regels; hij erft niets meer van de basis. */
main.doc p:not([class]) { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--text-desc); text-wrap: pretty; }
main.doc .lead { margin-top: 16px; font-size: 16.5px; line-height: 1.7; color: var(--text-body); text-wrap: pretty; }
main.doc a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
main.doc a:hover { text-decoration-thickness: 2px; }
main.doc a.knop-vol { text-decoration: none; }

/* Een blok is een sectie met EEN hairline erboven. Een rand per groep, geen dozen. */
.blok { border-top: 1px solid var(--hairline); margin-top: clamp(44px, 5vw, 72px); padding-top: clamp(32px, 3.6vw, 48px); }
.blok > .wenkbrauw--sectie + h2 { margin-top: 14px; }
.blok > h2 + p, .blok > h2 + .lees { margin-top: 18px; }

/* het register: label links, tekst rechts, hairlines ertussen */
.kv { margin-top: 30px; border-top: 1px solid var(--hairline-row); max-width: 860px; }
.kv > div {
  display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: 8px clamp(20px, 3vw, 42px);
  border-bottom: 1px solid var(--hairline-row); padding: 18px 0;
}
.kv dt {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); padding-top: 4px;
}
.kv dd { font-size: 15px; line-height: 1.65; color: var(--text-desc); text-wrap: pretty; }
.kv dd + dd { margin-top: 8px; }
.kv--vraag dd { color: var(--text); }

/* De uitspraakzetting (de belofte groot en cursief als middelpunt) is op 10 augustus door
   de oprichter AFGEWEZEN als te schreeuwerig en site-breed vervangen door de stille
   .cursiefregel (zie de sectie OVER FREELYX achteraan). Beloftes staan sindsdien altijd
   stil; zet nooit meer een uitspraakblok terug zonder zijn expliciete ask. */

/* het kader: een aanvulling naast de lopende tekst, met een bronzen zijrand */
.kader {
  margin-top: 28px; max-width: 680px;
  border: 1px solid var(--hairline); border-left: 2px solid var(--accent); border-radius: var(--r);
  background: rgba(12, 12, 76, .30); padding: 18px 22px;
}
/* De p-in-kaderregels van het doc-genre zijn verwijderd: geen documentpagina draagt nog
   een kader met alinea's erin (op de privacyverklaring is het kader zelf een p). De
   levende regels staan in de sectie OVER FREELYX achteraan. */

/* de lijst met vinkjes: het ene overgebleven tekentje van de oude site */
.lijst { list-style: none; margin-top: 24px; max-width: 760px; }
.lijst li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline-row);
  font-size: 15px; line-height: 1.65; color: var(--text-desc);
}
.lijst li:first-child { border-top: 1px solid var(--hairline-row); }
.lijst .teken { color: var(--accent-soft); font-size: 15px; line-height: 1.65; }
.lijst b { color: var(--text); }

/* twee gelijke blokken naast elkaar, gescheiden door een hairline; de alinea's erin dragen
   .tekstblok en zetten hun eigen maten, dus geen kale afstammelingsregels hier */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: 30px; }
.duo > div { border-top: 1px solid var(--hairline-row); padding-top: 22px; }
.duo h3 + p:not([class]) { margin-top: 12px; }

/* ================= zo werkt het: de werkstappen =================
   HERBOUWD 30 augustus 2026 (punt 3, oprichtersbesluit "geen illustratie",
   freelyx.nl/DECISIONS.md). Het complete stroomhoofdstuk van 26 juli (stroomvak, stroom,
   stroomsvg, veldstip, straal, stroompad, knoopring, stroomvak-onder, stroomstappen,
   stapnum, de vak-tokens spinex en kolom4, de getekende punt op stap 4 en de
   elleboogverankering van het kader) is VERWIJDERD: de tekening moest op de pixel
   aansluiten op CSS-lijnen en dat bleef op geschaalde schermen naden geven. De tekeningen
   zelf blijven bewaard in ../golive-2026-07-26d/ en komen nooit terug zonder
   oprichtersvraag; de nooit-hertekenen-regel van 10 augustus verviel met dit besluit.
   De stappen staan nu in het registerritme van de pagina (dezelfde hairlines als .lijst
   en de stand-lijst), met het cijfer in de serif als stille echo van de oude
   laddercijfers, en stap 4 draagt zijn punt als punt-accent in de tekst, zoals elke kop.
   Het kader staat als marginalia in het afspraken-raster, dezelfde grammatica als bij
   Wat je van ons mag verwachten: niets in deze sectie hoeft nog ergens op aan te
   sluiten. */
.werkstappen { list-style: none; margin-top: 26px; }
.werkstappen li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 18px 0 20px; border-top: 1px solid var(--hairline-row); max-width: 720px;
}
.werkstappen li:first-child { border-top: 0; padding-top: 8px; }
.werkstappen li p { margin: 0; font-size: 15px; line-height: 1.68; color: var(--text-desc); text-wrap: pretty; }
.werkstappen strong { color: var(--text); }
.stapcijfer {
  font-family: var(--display); font-weight: 300; font-size: 38px; line-height: 1;
  color: var(--accent-soft); opacity: .5; font-variant-numeric: tabular-nums;
}

/* ================= de oprichters =================
   Twee portretten uit dezelfde serie, op gelijke gezichtsgrootte bijgesneden zodat het paar als
   een moment leest. Alleen hier en op /opdrachtgevers/ staan mensen; de homepage is mensvrij. */
/* De oprichtersrasters (.oprichters, .oprichter) en het kale .portret zijn op 10 augustus
   vervallen: beide publiekspagina's dragen sindsdien het ene WANDPORTRET (zie de sectie
   OVER FREELYX achteraan), op de oprichterskeuze voor de warme duofoto met lijstwerk. */

/* ================= tekstpagina's: artikelen en wegwijzer ================= */
/* Bewust GEEN kapitalen: dit is een hele zin en niet een label van twee woorden, en gespatieerde
   kapitalen over een volle regel lezen als geschreeuw. */
main.doc .versiedatum { margin-top: 20px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.wegwijzer { margin-top: 30px; border-top: 1px solid var(--hairline-row); padding-top: 22px; }
.wegwijzer ul, .wegwijzer ol { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px 28px; counter-reset: weg; }
.wegwijzer > p { margin-bottom: 20px; font-size: 15px; line-height: 1.7; color: var(--text-desc); max-width: 680px; }
.wegwijzer li { counter-increment: weg; font-size: 14px; line-height: 1.5; }
.wegwijzer li::before { content: counter(weg, decimal-leading-zero) "  "; color: var(--accent-soft); opacity: .55; font-family: var(--display); font-variant-numeric: tabular-nums; }
.wegwijzer a { color: var(--text-desc); text-decoration: none; }
.wegwijzer a:hover { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }

.artikelen { list-style: none; margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--hairline); counter-reset: art; }
.artikelen > li {
  counter-increment: art;
  display: grid; grid-template-columns: clamp(48px, 5vw, 74px) minmax(0, 1fr); gap: clamp(14px, 2vw, 26px);
  border-bottom: 1px solid var(--hairline-row); padding: clamp(24px, 2.6vw, 34px) 0;
  scroll-margin-top: calc(var(--kop-h) + 16px);
}
.artikelen > li::before {
  content: counter(art, decimal-leading-zero);
  font-family: var(--display); font-weight: 300; font-size: 34px; line-height: 1.1;
  color: var(--accent-soft); opacity: .5; font-variant-numeric: tabular-nums;
}
.artikelen > li > * { grid-column: 2; }
.artikelen h2 { font-size: clamp(20px, 1.9vw, 24px); font-weight: 400; }
.artikelen h3 { margin-top: 22px; font-size: 17px; }
.artikelen p:first-of-type { margin-top: 14px; }
.artikelen .lijst { margin-top: 18px; }
.artikellabel { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }

/* ================= overgenomen pagina's =================
   De drie pagina's van 26 juli zijn gerestyled, niet herschreven: elke Nederlandse zin staat er
   woordelijk zoals hij stond, mechanisch nagemeten. Om dat waar te kunnen maken is de OPMAAK
   zoveel mogelijk blijven staan en zijn alleen de klassen omgezet. Daardoor staat er nog een
   .wrap-laag in die pagina's; die is hier onschadelijk gemaakt in plaats van uit de opmaak
   gesloopt, want elke schaar in die bestanden is een risico op de tekst. */
main.doc .wrap { max-width: none; margin-inline: 0; padding-inline: 0; width: auto; }

/* De kop van een tekstpagina: dezelfde bouw als de kop van Over Freelyx. Hij draagt in de
   overgenomen opmaak ook .blok, want daar was hij een akte, maar een pagina begint niet met een
   scheidingslijn boven zijn eigen titel. */
.paginakop { display: block; }
.blok.paginakop { border-top: none; margin-top: 0; padding-top: 0; }
.paginakop h1 { margin-top: 6px; }
.paginanoot { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--text-meta); max-width: 620px; }

main.doc .kolomkop { margin-top: 30px; }
/* het principe: een toezegging in de lopende tekst, met de bronzen zijrand van het kader */
main.doc .principe {
  margin-top: 20px; border-left: 2px solid var(--accent); padding: 4px 0 4px 18px;
  font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.55;
  color: var(--text-hi); max-width: 620px; text-wrap: pretty;
}
main.doc .noot { margin-top: 18px; font-size: 13.5px; line-height: 1.65; color: var(--text-meta); max-width: 620px; }
.lijst--stil li { grid-template-columns: minmax(0, 1fr); }

/* de genummerde onderdelen van een tekstpagina (de dertien artikelen van de privacyverklaring):
   hetzelfde hangende laddercijfer als de opdrachtenlijst op het bord */
.blok { counter-reset: artikel; }
.artikel { max-width: 860px; }
.artikel--nr {
  counter-increment: artikel;
  display: grid; grid-template-columns: clamp(48px, 5vw, 74px) minmax(0, 1fr); gap: clamp(14px, 2vw, 26px);
  border-top: 1px solid var(--hairline-row); padding: clamp(24px, 2.6vw, 34px) 0 0;
  margin-top: clamp(24px, 2.6vw, 34px);
  scroll-margin-top: calc(var(--kop-h) + 16px);
}
.artikel--nr::before {
  content: counter(artikel, decimal-leading-zero);
  font-family: var(--display); font-weight: 300; font-size: 34px; line-height: 1.1;
  color: var(--accent-soft); opacity: .5; font-variant-numeric: tabular-nums;
}
.artikel--nr > * { grid-column: 2; }
main.doc .artikel h2 { font-size: clamp(20px, 1.9vw, 25px); font-weight: 400; margin-top: 4px; }
main.doc .artikellabel { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }

@media (max-width: 720px) {
  .artikel--nr { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .artikel--nr::before { font-size: 24px; }
  .artikel--nr > * { grid-column: 1; }
}

/* de aanmeldregel onder de knop: kleine letter, maar wel echte tekst */
.mailregel { margin-top: 22px; font-size: 13.5px; line-height: 1.65; color: var(--text-meta); max-width: 620px; }
.mailregel a { color: var(--accent-soft); }
/* De twee knopvormen van de overdracht, een op een uit portal.css. Ze stonden hier eerst NIET,
   omdat de homepage zijn hoofdknop in de deur draagt en deze vormen dus nergens gebruikte; de
   documentpagina's gebruiken ze wel. Gevonden met de sweep die controleert of elke klasse in de
   opmaak ook echt een regel heeft. */
.knop-vol {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--accent); border: none; border-radius: var(--r);
  padding: 16px 26px; font-size: 14px; font-weight: 600; letter-spacing: .015em;
  color: var(--op-knop); white-space: nowrap; cursor: pointer;
}
.knop-vol:hover { filter: brightness(1.11); color: var(--op-knop); }
/* .knop-onderstreept en .doc-actie zijn verwijderd: sinds de herbouw van 10 augustus
   gebruikt geen pagina ze nog (de tekstknop leeft als .poort-pijl in de deuren, de
   handeling als .sluitstuk-actie in het paneel). */

/* de SNA-figuur binnen een documentpagina */
main.doc .sna { margin-top: 30px; max-width: 460px; }

@media (max-width: 720px) {
  .kv > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kv dt { padding-top: 0; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .artikelen > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .artikelen > li::before { font-size: 24px; }
  .artikelen > li > * { grid-column: 1; }
}

/* ================= voet ================= */
/* Geen eigen buitenruimte: de laatste sectie draagt zijn onderruimte al. */
.site-foot { border-top: 1px solid var(--hairline-soft); }
.voet-rij {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px;
  padding-block: 34px;
}
.voet-merk { font-family: var(--display); font-size: 18px; color: var(--text-meta); }
.voet-links { display: flex; flex-wrap: wrap; gap: 26px; font-size: 13px; }
.voet-links a { color: var(--text-meta); }
.voet-links a:hover { color: var(--accent-soft); }
.voet-fijn {
  max-width: var(--max); margin-inline: auto; padding: 0 var(--pad) 34px;
  font-size: 13px; line-height: 1.7; color: var(--text-footer);
}
.voet-fijn a { color: var(--text-meta); }
.voet-fijn a:hover { color: var(--accent-soft); }

/* ================= voorvertoning =================
   Wordt in de go-live bouw gestript, net als op de oude site. */
.badge {
  position: fixed; right: 12px; bottom: 12px; z-index: 60;
  background: rgba(8, 8, 28, .92); border: 1px solid var(--hairline-strong); border-radius: var(--r);
  padding: 6px 11px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-chip);
}

/* =====================================================================
   RESPONSIEF. De overdracht regelt alles boven ongeveer 900px met clamp() en laat daaronder
   bewust open; dit is die laag. Twee kantelpunten, dezelfde als op het portaal: 980px haalt de
   held uit twee kolommen, 720px vouwt de drieluiken open.
   ===================================================================== */
@media (max-width: 980px) {
  .held-raster { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .held-tekst { padding: clamp(44px, 8vw, 72px) 0 clamp(34px, 5vw, 48px); }
  .held-beeld { margin-inline: calc(-1 * var(--pad)); order: 2; background: none; }
  /* De foto wordt hier een echte band in de stroom in plaats van een vulling achter de tekst.
     De drie schermen bestaan alleen om de kop leesbaar te houden BOVEN de foto; hier staat de
     kop erboven, dus ze zouden de foto alleen zwart maken. */
  .held-beeld > img { position: relative; inset: auto; height: clamp(200px, 46vw, 320px); }
  .held-beeld .laag { display: none; }
  .beloften {
    position: static; border-radius: 0; border-inline: none;
    background: rgba(9, 9, 30, .82);
  }
  .poorten, .kennis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poort:nth-child(2), .kaart:nth-child(2) { border-right: none; }
  .poort:nth-child(1), .poort:nth-child(2), .kaart:nth-child(1), .kaart:nth-child(2) {
    border-bottom: 1px solid var(--hairline-row);
  }
  /* Het keurmerk en de vier bewoordingen boven elkaar; het merk sluit de strook af. */
  .vertrouwen { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 26px; }
}
@media (max-width: 720px) {
  /* De beloftenband is op telefoonbreedte WEG (oprichtersorder 31 augustus 2026,
     livegangavond): drie gestapelde blokken onder de foto namen het scherm over.
     Boven 720px blijft de band gewoon staan. */
  .beloften { display: none; }
  .poorten, .kennis { grid-template-columns: minmax(0, 1fr); }
  .poort, .kaart { border-right: none; border-bottom: 1px solid var(--hairline-row); }
  .poort:last-child, .kaart:last-child { border-bottom: none; }
  .poort--hoofd .poort-pijl { width: 100%; justify-content: space-between; }
  .sectie-kop { flex-direction: column; align-items: flex-start; }
  .voet-rij { flex-direction: column; align-items: flex-start; }
  /* De kop breekt in twee regels: woordmerk en knop boven, het menu daaronder. De nav moet
     daarvoor een EIGEN flexregel krijgen; met flex:1 blijft hij op de eerste regel staan en
     wordt hij tot een kolommetje geknepen. Op de telefoon is de pagina lang genoeg dat een
     plakkende kop te veel scherm kost. */
  .site-head { position: static; }
  /* De kop is hier niet meer sticky, dus de extra ruimte boven het sprongdoel moet ook weg.
     Zonder deze regel schiet de sprong naar Kennis en inzichten 90px over het doel heen. */
  .sectie[id], main#inhoud { scroll-margin-top: 0; }
  .head-row { flex-wrap: wrap; gap: 14px 20px; padding-block: 16px; }
  .wordmark { margin-right: auto; }
  .nav { flex: 1 0 100%; gap: 10px 18px; }
  /* padding-block maakt de aanraakdoelen hoger zonder de regels te laten overlappen: 20px tekst
     plus 10 is 30, en de regelafstand is 40. */
  .nav a { font-size: 13.5px; white-space: normal; padding-block: 5px; }
  .held h1 { font-size: clamp(28px, 7.4vw, 36px); }
  /* Op de kleinste maat zakte dit label naar 8,5px, wat voor gespatieerde kapitalen onleesbaar
     is. 10,5 is het eigen maximum van de clamp, dus er komt geen nieuwe waarde bij. */
  .beloften b { font-size: 10.5px; }
  .badge { right: 8px; bottom: 8px; }
}

/* =====================================================================
   BEWEGING. Alleen terugkoppeling op aanraken; verder staat de pagina stil.
   ===================================================================== */
/* De afstammelingen staan er bewust bij. Een overgang op de container doet niets voor een
   eigenschap die op een kind verandert, en zonder deze namen sprongen de knopvulling, de
   koptekst, de onderrand en de bronregel hard om bij hover. */
a, button, .poort, .kaart, .poort h3, .poort-pijl > span, .kaart-bron, .qlogo {
  transition: color .2s ease, background-color .2s ease, border-color .22s ease, filter .22s ease, opacity .2s ease;
}
button:active, .poort--hoofd:active .poort-pijl { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  /* De held-beeld-kolom valt weg en daarmee BEWUST ook de beloftenband die erin zit:
     op papier zijn de drie beloften versiering bij een foto die niet meedrukt, en de
     inhoud van de pagina staat in de tekstkolommen. Geen bug, niet repareren. */
  .site-head, .badge, .held-beeld, .skip { display: none; }
  /* Tokens omzetten in plaats van losse selectoren: zo drukt ELKE pagina leesbaar af,
     ook wat er later nog bijkomt. De oude vier-selectorenlijst liet op de nieuwe pagina's
     de titel, de belofte en de aanmeldgegevens vrijwel wit op wit achter. Achtergronden
     drukken browsers standaard niet af, dus de paneelvulling regelt zichzelf. */
  :root {
    --ground: #FFF;
    --text-hi: #111; --text: #111; --text-title: #111;
    --text-body: #333; --text-desc: #333;
    --text-meta: #444; --text-muted: #444; --text-nav: #444; --text-footer: #444; --text-chip: #444;
    --accent: #7A5320; --accent-soft: #7A5320;
    --hairline: rgba(17, 17, 17, .3); --hairline-soft: rgba(17, 17, 17, .2);
    --hairline-row: rgba(17, 17, 17, .25); --hairline-strong: rgba(17, 17, 17, .45);
    --panel: transparent; --veldvulling: transparent; --rij-hover: transparent;
  }
  html, body { background: #FFF; color: #111; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   OVER FREELYX, de ontwerpronde van 10 augustus (tweede poging).
   De afgekeurde versie stond in het doc-genre: een lange kolom blokken van gelijk gewicht.
   Deze pagina staat daarom in de SECTIEGRAMMATICA van de homepage: de strook draagt de
   ruimte, elke sectie heeft een eigen omrande of gevulde groep, en de compositie wisselt
   per sectie zodat het oog iets te volgen heeft. Het doc-genre blijft van de juridische
   pagina's. Alles hieronder gebruikt uitsluitend bestaande tokens.
   ===================================================================== */

/* De opening: mensen eerst. Tekstkolom links, de twee portretten rechts, en de
   toestemmingsbelofte sluit de sectie als typografisch middelpunt. */
.opening-raster {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
}
.opening h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(32px, 3.3vw, 48px); line-height: 1.12; letter-spacing: -.015em;
  color: var(--text-hi); margin-top: 20px; text-wrap: pretty;
}
/* dezelfde regel als in de held: een grote, licht gezette kop draagt de lichte brons */
.opening h1 .punt-accent { color: var(--accent-soft); }
/* dezelfde bronzen liniaal als in de held, zodat de opening familie blijft van de homepage */
.liniaal { width: 58px; height: 1px; background: var(--accent); margin: 30px 0 26px; }
/* 452 is de leadmaat van de held; de opening deelt hem zodat er geen derde maat ontstaat */
/* Maat 452 naar 560 op 30 augustus 2026 (punt 5, oprichter: de opening las "langwerpig"
   met de vollere missietekst): de kolom is ruim 650 breed, dus de zinnen mogen doorlopen. */
.opening-lead { font-size: 16.5px; line-height: 1.68; color: var(--text-body); max-width: 560px; text-wrap: pretty; }
/* Alinea's krijgen hier hun maat via de omliggende klasse, nooit via een kale p-regel:
   de val van main.doc p (0-1-2 wint van elke klasse) wordt niet nog eens gegraven. */
.opening-tekst > p:not([class]) { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--text-desc); max-width: 560px; text-wrap: pretty; }
/* De belofte als STILLE cursiefregel, dezelfde stem als de brugzin in de held: de grote
   uitspraakzetting wees de oprichter af als te schreeuwerig (10 augustus, tweede ronde).
   Gedeelde zin 1 blijft woordelijk, alleen de zetting is stil. */
.cursiefregel {
  margin-top: 22px; font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1.6; color: var(--accent-soft); max-width: 452px; text-wrap: pretty;
}

/* Het portretpaar (.oprichters met naam en rol per figuur) is op 10 augustus vervangen
   door het ene WANDPORTRET hieronder, op de oprichterskeuze voor de warme duofoto van de
   opdrachtgeverspagina. De losse portretbestanden blijven in assets/img in reserve. */

/* Het wandportret: het duoportret als ingelijst stuk aan de wand van de kamer. Een
   passe-partout van een hairline-lijst met de doorschijnende merkmarine als mat, en
   eronder het naambordje. Oprichtersask 10 augustus: dezelfde foto op beide
   publiekspagina's, met iets slims erbij; dit is dat lijstwerk, op allebei identiek. */
.wandportret { margin: 0; max-width: 440px; }
.wandportret .mat {
  display: block; padding: clamp(12px, 1.5vw, 20px);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-vlak);
  background: var(--panel);
}
.wandportret img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.wandportret figcaption { margin-top: 14px; }
.wandportret .naam { display: block; font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.35; color: var(--text-title); }
/* gewone zinsvorm, geen gespatieerde kapitalen: dit is een zinnetje, geen label */
.wandportret .rol { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-desc); }
/* in de opening staat de lijst op de rechterlijn van de pagina, als aan de wand */
.opening-raster > .wandportret { justify-self: end; }

/* Het stroomhoofdstuk zelf is op 30 augustus 2026 verwijderd (punt 3, geen illustratie);
   zie de sectie zo werkt het: de werkstappen hierboven voor het volledige grafschrift. */

/* het kader buiten een documentpagina; .warm zet alles zelf en erft niets */
.kader p:not([class]) { margin: 0; font-size: 15px; line-height: 1.68; color: var(--text-desc); text-wrap: pretty; }
/* het kader in Zo werkt het telt sinds 30 augustus 2026 (punt 3) twee alinea's */
.kader p:not([class]) + p:not([class]) { margin-top: 12px; }
.kader .warm { margin: 0; font-size: 15px; line-height: 1.68; color: var(--text-body); text-wrap: pretty; }

/* Het afsprakenregister met het warme kader als marginalia ernaast, in plaats van eronder:
   op 1440 bleef er anders een leeg veld rechts van het register staan. */
.afspraken-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(28px, 4vw, 72px); align-items: start;
  margin-top: clamp(10px, 1.4vw, 18px);
}
/* 890 en niet none: de dd-kolom komt dan op de leesmaat van ongeveer 680 uit */
.afspraken-raster .kv { margin-top: 20px; max-width: 890px; }
/* gecentreerd, zodat de restruimte zich boven en onder verdeelt in plaats van als gat
   onder het kader te staan */
.afspraken-raster .kader { margin-top: 0; align-self: center; }
/* de stille cursiefregel als marginalia in dezelfde rechterkolom (Wat Freelyx voor u
   betekent op de opdrachtgeverspagina): zelfde plek als het kader, zelfde centrering */
.afspraken-raster > .cursiefregel { margin-top: 0; align-self: center; max-width: none; }
/* binnen dit raster begint de linkerkolom bovenaan de kop, niet op een eigen alineamarge */
.afspraken-raster .lees > .tekstblok:first-child { margin-top: 20px; }
@media (max-width: 980px) {
  .afspraken-raster { grid-template-columns: minmax(0, 1fr); }
  .afspraken-raster .kader { margin-top: 4px; }
  .afspraken-raster > .cursiefregel { margin-top: 20px; }
}

/* Toetsbaar: de lichte tel van de pagina. Een omrande band in de grammatica van de
   truststrook op de homepage: het keurmerk op zijn witte kaart met de vastgeplakte
   toeschrijving, en de drie andere feiten als cellen met hairlines ertussen. */
.controleband {
  display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  align-items: stretch;
  border-block: 1px solid var(--hairline);
  margin-top: clamp(20px, 2.4vw, 30px);
}
.controleband .sna {
  display: flex; align-items: center; gap: 18px; max-width: 430px;
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 30px) 0;
}
.controlefeit {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 28px);
  border-left: 1px solid var(--hairline-row);
}
.controlefeit b { font-size: 14px; font-weight: 600; color: var(--text); }
.controlefeit span { font-size: 13.5px; line-height: 1.6; color: var(--text-desc); text-wrap: pretty; }
.controlefeit a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.controlefeit a:hover { text-decoration-thickness: 2px; }
/* de waarborgenvariant: vijf gelijkwaardige cellen zonder keurmerkspoor (het keurmerk
   staat op die pagina in de truststrook onderaan, met de toeschrijving eraan vast) */
.controleband--waarborgen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.controleband--waarborgen .controlefeit:first-child { border-left: none; padding-left: 0; }
.controle-noot { margin-top: 22px; font-size: 13.5px; line-height: 1.65; color: var(--text-meta); max-width: 620px; }
.controle-noot a { color: var(--accent-soft); }

/* Aanmelden: het sluitstuk, het ene gevulde paneel van de pagina. De doorschijnende
   merkmarine is per de overdracht een paneelvulling en nooit een heel paginavlak;
   precies daarom mag hij hier de bestemming markeren waar de derde deur heen wijst. */
.sluitstuk {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-vlak);
  padding: clamp(26px, 3.4vw, 52px) clamp(22px, 3.2vw, 52px) clamp(28px, 3.6vw, 56px);
  margin-top: clamp(26px, 3vw, 38px);
}
.sluitstuk-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 3.4vw, 64px); align-items: start;
}
/* gecentreerd in de kolom, zodat de kortere kant geen gat onder in het gevulde paneel laat */
.sluitstuk-raster .kv { margin-top: 26px; align-self: center; }
/* Meerdere dd's in een kv-rij: zonder kolomtoewijzing plaatst het raster ze om en om in
   BEIDE kolommen (dt kolom 1, elke dd de eerstvolgende vrije cel). Op de brede weergave
   horen ze allemaal rechts; op de telefoon stapelt de rij al naar een kolom. */
.kv > div > dd { grid-column: 2; }
@media (max-width: 720px) { .kv > div > dd { grid-column: 1; } }
/* In het sluitstuk stapelt het vraagregister op elke breedte: het label erboven, de vier
   regels eronder. In een halve paneelkolom is de tweekolomsrij te krap. */
.sluitstuk .kv > div { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sluitstuk .kv > div > dd { grid-column: 1; }
.sluitstuk .kv dt { padding-top: 0; }
/* Het Wat wij vragen-lijstje van punt 5 (30 augustus 2026) is dezelfde nacht op het woord
   van de oprichter weer VERWIJDERD (eerst kv, toen lijstregister, beide lelijk bevonden):
   het formulier op aanmelden.freelyx.nl laat zelf zien wat wij vragen, en het sluitstuk op
   /over-freelyx/ is sindsdien een kolom sluitstuk-tekst op de leesmaat (.lees), zonder
   raster. Zet er geen lijst terug zonder zijn expliciete vraag. */
.sluitstuk-tekst > p:not([class]) { margin-top: 26px; font-size: 15px; line-height: 1.7; color: var(--text-desc); text-wrap: pretty; }
.sluitstuk-tekst > p:not([class]) + p:not([class]) { margin-top: 14px; }
/* De knop staat IN de rechterkolom, aan het einde van de leesroute, en niet als los
   element linksonder in het paneel; dat was een bevestigde kritiekbevinding. */
.sluitstuk-actie { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: clamp(24px, 2.8vw, 36px); }

/* Links in de lopende tekst dragen het huisonderscheid, onderstrepen: de regel van de
   documentpagina's (main.doc a) vuurt hier niet, want deze pagina is geen doc. */
.kv dd a, .controle-noot a, .mailregel a, .tekstblok a, .lijst a {
  color: var(--accent-soft);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.kv dd a:hover, .controle-noot a:hover, .mailregel a:hover, .tekstblok a:hover, .lijst a:hover { text-decoration-thickness: 2px; }

/* ================= voor opdrachtgevers: de sectieklassen =================
   Dezelfde grammatica als Over Freelyx; de lopende alinea draagt zijn maat via een eigen
   klasse (.tekstblok), nooit via een kale p-regel, om de main.doc p-val niet te hergraven. */
/* de leesmaat van de publieke secties: 680 houdt een regel op 65 tot 75 tekens */
.lees { max-width: 680px; }
.tekstblok { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--text-desc); text-wrap: pretty; }
/* de kolomkop buiten een documentpagina (het tweeluik van de samenwerkingsvormen) */
.kolomkop { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--text-title); text-wrap: pretty; }
/* De vakgenoten: tekst links, het duoportret rechts als handtekening onder de akte.
   Gecentreerd en op de kolombreedte, zodat de foto de rechterlijn van de andere groepen
   raakt en de restruimte zich boven en onder verdeelt. */
.vakgenoten-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
.vakgenoten-raster .wandportret { margin-top: 0; max-width: 340px; }

@media (max-width: 980px) {
  .opening-raster { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* gestapeld staat de lijst niet meer aan een rechterwand; hij volgt de tekstkolom */
  .opening-raster > .wandportret { justify-self: start; }
  .controleband { grid-template-columns: minmax(0, 1fr); }
  .controleband .sna { padding-right: clamp(18px, 2vw, 28px); }
  .controlefeit { border-left: none; border-top: 1px solid var(--hairline-row); }
  /* gestapeld draagt de band zelf al de bovenlijn, en elke cel dezelfde inspringing */
  .controleband--waarborgen .controlefeit:first-child { border-top: none; padding-left: clamp(18px, 2vw, 28px); }
  .sluitstuk-raster { grid-template-columns: minmax(0, 1fr); }
  .sluitstuk-raster .kv { margin-top: 22px; }
  /* het tweeluik van de samenwerkingsvormen kantelt met de andere rasters mee; op 720
     werd de kolom 328px en zakte de regel naar 42 tekens */
  .duo { grid-template-columns: minmax(0, 1fr); }
  .vakgenoten-raster { grid-template-columns: minmax(0, 1fr); }
  /* de credit-link rekte als rasteritem tot de volle strookbreedte; doel en focusring
     horen samen te vallen met wat er te zien is */
  .vertrouwen .credit { justify-self: start; }
}

/* =====================================================================
   DE STAND VAN HET BORD, 30 augustus 2026. VAST blok op de homepage, tussen het
   aankondigingsblok en Kennis en inzichten; het blijft na de opening staan.
   Geaggregeerde aantallen per vakgebied en rol mogen sinds het oprichtersbesluit
   van 30 augustus 2026 op de site (versoepeling van siteregel 9, ../DECISIONS.md);
   de inhoud wordt door tools/bordstand.py geschreven en de peildatum staat er
   zichtbaar bij. Dezelfde registertaal als het agendaregister hieronder:
   hairline-rijen, het cijfer in de serif en in de lichte brons, want het cijfer is
   hier de inhoud en geen veldnaam. Geen nieuw kleur- of vormvocabulaire: alles
   staat op bestaande tokens. De rolkolom draagt de twee bordgroepen met hun
   subtotalen; de labels zijn woordelijk die van het bord.
   ===================================================================== */
.bordstand {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 72px);
  margin-top: clamp(26px, 3.4vw, 40px);
}
.stand-kop {
  font-size: 11px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-muted);
}
.stand-lijst { border-top: 1px solid var(--hairline-row); margin-top: 14px; }
.stand-lijst > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  border-bottom: 1px solid var(--hairline-row); padding: 13px 0;
}
.stand-lijst dt { font-size: 15px; line-height: 1.5; color: var(--text-desc); text-wrap: pretty; }
.stand-lijst dd {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: 19px; line-height: 1.2; color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}
/* De groepsrij is de kop van zijn halve register: het label in de gewone tekstkleur en
   halfvet, het subtotaal een maat groter. De tweede groep krijgt lucht boven zich; de
   doorlopende hairlines maken de scheiding, dus geen extra lijn. */
.stand-groep dt { font-size: 15px; font-weight: 600; color: var(--text); }
.stand-groep dd { font-size: 22px; }
.stand-groep + .stand-sub, .stand-sub + .stand-groep { margin-top: 0; }
.stand-lijst > .stand-groep:not(:first-child) { margin-top: 30px; border-top: 1px solid var(--hairline-row); }

@media (max-width: 760px) {
  .bordstand { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* =====================================================================
   AANKONDIGING, 18 augustus 2026. TIJDELIJK BLOK, gebouwd om weer te verdwijnen.
   Het staat op de homepage onder de deuren en zegt twee data: de pre-aanmelding opent op
   1 september, de opening is op 15 september.

   Waarom een GEVULD paneel en geen omrande groep zoals de deuren en de kaarten: op deze
   pagina staat alles al op hairlines, dus een derde omrande groep zou in het ritme
   verdwijnen en het bericht zou als gewone sectie lezen. De doorschijnende merkmarine is
   per de overdracht een PANEELvulling en nooit een heel paginavlak, en markeert hier dus
   het bericht, zoals hij op /over-freelyx/ de bestemming markeert. Er komt geen enkele
   nieuwe kleur, maat of vorm bij: alles hieronder staat op bestaande tokens.

   WEGHALEN NA DE OPENING: verwijder deze hele sectie plus de sectie met dezelfde naam in
   index.html. Niets anders hangt eraan.
   ===================================================================== */
.aankondiging {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-vlak);
  padding: clamp(26px, 3.4vw, 48px) clamp(22px, 3.2vw, 48px);
}
.aankondiging-raster {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(26px, 3.6vw, 64px); align-items: center;
}
/* Dezelfde regel als in de held en in de opening van Over Freelyx: een groot, licht gezet
   kopje draagt de LICHTE brons, niet het volle accent. */
.aankondiging h2 .punt-accent { color: var(--accent-soft); }
/* Een leesmaat voor de HELE tekstkolom en niet alleen voor de lead: 480 houdt de regel op de
   65 tot 75 tekens waar de rest van de site ook op staat, en kop, lead en handeling delen dan
   een linkermarge en een rechtergrens. De gewone .sectie-lead staat op 560 en zou in een halve
   paneelkolom te lang worden. */
.aankondiging-tekst { max-width: 480px; }
/* De handeling is een STILLE tekstlink met pijl en geen gevulde knop, om de reden die in de
   commentaarkop van index.html staat. Onderstreept, want op deze site draagt kleur alleen
   nooit een link. De focusring komt van de algemene a:focus-visible regel bovenaan. */
.aankondiging-actie { margin-top: clamp(22px, 2.6vw, 30px); font-size: 14px; }
.aankondiging-actie a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent-soft);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.aankondiging-actie a:hover { text-decoration-thickness: 2px; }
/* transform staat bewust niet in de algemene overgangsregel achteraan; de pijlen van de
   deuren en de kaarten zetten hem ook zelf. */
.aankondiging-actie svg { flex: 0 0 auto; transition: transform .22s ease; }
.aankondiging-actie a:hover svg, .aankondiging-actie a:focus-visible svg { transform: translateX(4px); }
/* Het agendaregister: de structuur van .kv (een dl met een div per rij, hairlines ertussen),
   maar de datum staat in de serif en in brons in plaats van als gespatieerd kapitaallabel.
   Een datum is hier de inhoud van het blok en geen veldnaam, en hoort dus ook zo te staan. */
.agenda { border-top: 1px solid var(--hairline-row); }
.agenda > div { border-bottom: 1px solid var(--hairline-row); padding: 20px 0; }
.agenda dt {
  font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.3;
  color: var(--accent-soft);
}
.agenda dd { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--text-desc); text-wrap: pretty; }

/* Gestapeld staat het register onder de tekst; align-items keert terug naar start, want
   gecentreerd zou de kortere kolom in een gestapelde weergave niets meer betekenen. */
@media (max-width: 980px) {
  .aankondiging-raster { grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
}