/* ═══════════════════════════════════════════════════════════════════
   Legotheek Ulft — voorstel voor de inhoud van de homepage

   Komt bovenop css/styles.css, vervangt die niet. Kop, navigatie, voet
   en kleuren blijven precies zoals ze zijn.

   ───────────────────────────────────────────────────────────────────
   WAAROM DE VORIGE VERSIE ROMMELIG OOGDE

   Drie dingen gemeten op een scherm van 1400 pixels:

     1. De broodtekst stond op 14,7 pixels. Dat is de maat van een
        bijschrift, niet van tekst die gelezen moet worden.
     2. De kaarten waren 288 pixels breed. Met die letter passen er
        ongeveer 38 tekens op een regel — een krantenkolom. Korte
        regels met kleine letters hakken elke zin in stukken en dat
        leest als ruis.
     3. Er stonden acht secties onder elkaar met vier verschillende
        achtergronden: crème, wit, grijs, crème, grijs. Elke overgang
        vraagt aandacht, dus het oog blijft zoeken waar het moet kijken.

   Daar kwam nog een fout bij: de illustratie werd 240 bij 600 pixels
   getoond terwijl hij 599 bij 600 is. Vierkant, uitgerekt tot een
   toren. Dat is de klassieke val van max-width zonder height:auto.

   ───────────────────────────────────────────────────────────────────
   WAT ER NU ANDERS IS

     - Broodtekst op 17 pixels met regelafstand 1,75.
     - Bredere kolommen: de waarden staan in twee kolommen in plaats
       van vier, zodat een regel zestig tekens haalt. Dat is de maat
       waarop je leest zonder het te merken.
     - Nog maar twee achtergronden in het hele middenstuk: wit en één
       lichtgrijs. De crèmekleur komt één keer voor, bovenaan, en is
       daardoor een opening in plaats van ruis.
     - Ruimte tussen de secties (72 px) en minder ruimte erbinnen. Het
       oog leest groepen, niet regels.
     - Geen cursieve ondertitels meer onder elke kop.
   ═══════════════════════════════════════════════════════════════════ */

/* ── hidden moet ook echt verbergen ─────────────────────────────────────
   De browser verbergt een element met het hidden-kenmerk via zijn eigen
   stijlblad. Maar zodra wij ergens zelf een display opgeven — en dat doen
   we bij elke kaart, want die zijn flex — wint die eigen regel en staat
   het element er gewoon. Daar liep de verborgen publicatiekaart op stuk.

   Eén regel die dat rechtzet, voor alles op deze pagina's. */
[hidden] { display: none !important; }

:root {
    --lth-rood: #E31E24;
    --lth-blauw: #0057A6;
    --lth-geel: #FFD500;
    --lth-groen: #00873D;

    --lth-inkt: #1a2332;      /* koppen */
    --lth-tekst: #4a5568;     /* broodtekst */
    --lth-zacht: #94a3b8;     /* bijschriften */
    --lth-lijn: #e6e9ee;
    --lth-vlak: #f7f8fa;
}

/* ── Basis voor alles binnen dit voorstel ──────────────────────────── */
/* De ruimte tussen de secties.
   ─────────────────────────────────────────────────────────────────
   Stond op 72 pixels boven en onder, dus tussen twee blokken zat 144
   pixels wit. Dat is bijna een schermhoogte aan lucht op een laptop en
   maakt van een pagina met acht secties een pagina waar je lang voor
   moet scrollen. Nu 52. Het oog leest nog steeds waar een blok begint
   en waar het eindigt; dat werk doen de achtergrondkleur en de
   gekleurde lijn erboven al. */
.lth-blok {
    padding: 52px 40px;
    background: #fff;
}
.lth-blok.grijs { background: var(--lth-vlak); }
.lth-blok.smal { padding-top: 32px; padding-bottom: 32px; }

.lth-binnen { max-width: 1120px; margin: 0 auto; }

/* Eén tekststijl voor het hele middenstuk. */
.lth-blok p,
.lth-blok li {
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--lth-tekst);
}

/* ── Sectiekop ─────────────────────────────────────────────────────
   Kop en één regel eronder. De regel is niet cursief en niet grijs op
   grijs; hij is gewoon de tweede zin. */
.lth-titel { text-align: center; margin-bottom: 32px; }

.lth-titel h2 {
    font-size: clamp(1.55rem, 2.4vw, 1.95rem);
    line-height: 1.2;
    color: var(--lth-rood);
    font-weight: 800;
    letter-spacing: -.015em;
    margin-bottom: 10px;
}

.lth-titel p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--lth-tekst);
    font-size: 1.04rem;
}

/* ── 1. Opening ────────────────────────────────────────────────────── */
/* De hoogte van dit vlak.
   ─────────────────────────────────────────────────────────────────
   Stond op 64 pixels boven en onder. Samen met de marges van de kicker,
   de kop en de inleidende zin werd het gele vlak op een breed scherm
   ruim vierhonderd pixels hoog — een derde van het beeld, voordat er
   iets inhoudelijks te zien is. Nu 40, en de marges eronder ook krapper.
   De lucht ín het blok doet het werk; de lucht eromheen hoeft het niet
   over te doen. */
.lth-intro {
    background: linear-gradient(135deg, #fffdf6 0%, #fff6de 100%);
    border-bottom: 3px solid var(--lth-geel);
    padding: 30px 40px 32px;
}

.lth-intro-binnen {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 56px;
    align-items: center;
}

.lth-kicker {
    color: var(--lth-rood);
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.lth-intro h1 {
    font-size: clamp(1.8rem, 3.3vw, 2.45rem);
    line-height: 1.12;
    color: var(--lth-inkt);
    letter-spacing: -.02em;
    margin-bottom: 12px;
}

.lth-lead {
    font-size: 1.12rem !important;
    line-height: 1.6 !important;
    color: var(--lth-tekst);
    /* De breedte van deze zin.
       ─────────────────────────────────────────────────────────────
       Stond op 34em en daarna op 58 tekens, met het idee dat een korte
       regel prettiger leest. Maar het blok eromheen is 1120 pixels breed,
       dus die zin gebruikte niet eens de helft van de ruimte en liep
       daardoor over drie regels terwijl er rechts een halve pagina leeg
       bleef. Daar is toen tekst voor geschrapt die er niet uit hoefde.

       Nu helemaal geen eigen grens meer: het blok eromheen is al 1120
       pixels breed en dat is de enige begrenzing die hier nodig is. Elke
       waarde die ik er zelf bij verzon (34em, 58 tekens, 90 tekens) hield
       de zin smaller dan de kop erboven en kostte een regel. */
    max-width: none;
    margin-bottom: 20px;

    /* Hoeveel regels het worden hangt af van de schermbreedte; dat kun je
       niet vastleggen. Wat je wél kunt voorkomen is een laatste regel met
       één of twee woorden erop, zoals "per week." in zijn eentje. balance
       verdeelt de woorden gelijk over de regels die er zijn, zodat die
       losse staart verdwijnt.

       Kent een browser het niet, dan breekt hij af zoals altijd. Dit staat
       ná text-wrap: pretty verderop in dit bestand en wint daarvan. */
    text-wrap: balance;
}

/* Op een smaller scherm passen er minder tekens op een regel, en loopt
   dezelfde zin dus eerder over drie regels. Een fractie kleinere letter
   scheelt daar net genoeg. */
@media (max-width: 1150px) {
    .lth-lead { font-size: 1.05rem !important; }
}

.lth-knoprij { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.lth-tekstlink { color: var(--lth-blauw); font-weight: 700; text-decoration: none; font-size: 1.02rem; }
.lth-tekstlink:hover { text-decoration: underline; }

/* height:auto is hier het hele punt: zonder die regel houdt de browser
   het height-attribuut van 600 aan en wordt een vierkante illustratie
   een toren van 240 bij 600. */
.lth-intro-beeld img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 4px solid var(--lth-rood);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .09);
}

/* ── 2. Bewijsregel ────────────────────────────────────────────────── */
.lth-bewijs {
    background: #fff;
    border-bottom: 1px solid var(--lth-lijn);
    padding: 26px 40px;
}
.lth-bewijs-binnen {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    text-align: center;
}
.lth-bewijs strong {
    display: block;
    font-size: 2.1rem;
    line-height: 1.1;
    color: var(--lth-blauw);
    font-weight: 800;
    letter-spacing: -.02em;
}
.lth-bewijs span { font-size: .95rem; color: var(--lth-tekst); }

/* ── 3. Weekstrook ─────────────────────────────────────────────────── */
.lth-week {
    background: var(--lth-vlak);
    border-bottom: 1px solid var(--lth-lijn);
    padding: 22px 40px;
}
.lth-week-binnen { max-width: 1120px; margin: 0 auto; }

.lth-week h3 {
    font-size: 1rem;
    color: var(--lth-inkt);
    text-align: center;
    font-weight: 700;
    margin-bottom: 14px;
}

.lth-dagen { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.lth-dag {
    min-width: 116px;
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-radius: 10px;
    padding: 11px 12px;
    text-align: center;
}
.lth-dag.vandaag { border-color: var(--lth-blauw); box-shadow: 0 0 0 2px rgba(0, 87, 166, .09); }
.lth-dag .naam { font-weight: 700; color: var(--lth-inkt); font-size: .92rem; }
.lth-dag .datum { color: var(--lth-zacht); font-size: .82rem; }
.lth-dag .stand { margin-top: 6px; font-weight: 600; font-size: .92rem; }
.lth-dag .open { color: var(--lth-groen); }
.lth-dag .dicht { color: var(--lth-zacht); font-weight: 500; }

/* Bij uitzondering gesloten op een dag die normaal open is. Dat is iets
   anders dan een dinsdag, waarop we sowieso dicht zijn — dus niet het
   grijs van "gewoon dicht" maar de aandachtskleur, met een streep eronder
   die laat zien dat er een tooltip met de reden achter zit. */
.lth-dag .dicht.afwijkend {
    color: var(--lth-rood);
    font-weight: 600;
    text-decoration: underline dotted currentColor;
    text-underline-offset: 3px;
    cursor: help;
}
.lth-dag .feest { color: var(--lth-rood); font-size: .86rem; line-height: 1.35; }

/* ── De video van REGIO8 ───────────────────────────────────────────
   Hier stond ook de opmaak voor het blok "De uitleen is BEGONNEN" — het
   woord dat uit steentjes werd opgebouwd, met bijbehorende animatie. Dat
   blok is van de pagina af: de uitleen draait inmiddels, dus het is geen
   nieuws meer, en het vroeg meer aandacht dan de boodschap waard was.
   De opmaak is meeverwijderd; het scriptje in nieuw.js dat het woord
   bouwde vindt zijn element niet meer en doet vanzelf niets.

   De video wordt pas na een klik ingeladen, via youtube-nocookie.com. Een
   gewone iframe zou YouTube al laten meekijken zodra iemand de homepage
   opent, en volgens de cookiebanner op deze site is dat een keuze van de
   bezoeker. Het scheelt ook laadtijd. */
.video-kaart {
    max-width: 880px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0,0,0,.18);
    background: #0a1628;
}
.video-vlak {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    padding: 0;
    display: block;
}
.video-vlak iframe { width: 100%; height: 100%; border: 0; display: block; }

/* De versiering hoort alleen bij de knop. Op .video-vlak zelf zou het
   nopjespatroon ná de klik over de speler heen getekend worden. */
button.video-vlak {
    cursor: pointer;
    background:
        radial-gradient(circle at 20% 22%, rgba(255,213,0,.16), transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(0,135,61,.20), transparent 45%),
        linear-gradient(135deg, #0b2545 0%, #123a6b 100%);
}
button.video-vlak::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.09) 5px, transparent 6px);
    background-size: 34px 34px;
}

.video-knop {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: #fff;
}
.video-driehoek {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--lth-rood);
    box-shadow: 0 6px 0 #8e1418, 0 10px 22px rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease;
}
.video-driehoek::after {
    content: "";
    margin-left: 5px;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #fff;
}
.video-vlak:hover .video-driehoek { transform: scale(1.08); }
.video-titel { font-weight: 700; font-size: 1.05rem; max-width: 80%; text-align: center; }
.video-bron  { font-size: .88rem; opacity: .8; }

/* ── 4. Band met sets ──────────────────────────────────────────────── */
.lth-kop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.lth-kop h2 { font-size: 1.6rem; color: var(--lth-rood); font-weight: 800; letter-spacing: -.015em; }
.lth-kop p { margin-top: 4px; }
.lth-kop a { color: var(--lth-blauw); font-weight: 700; text-decoration: none; white-space: nowrap; }
.lth-kop a:hover { text-decoration: underline; }

/* De band loopt vanzelf mee (zie laatBandLopen in nieuw.js).
   scroll-snap staat er bewust niet op: dat zou de beweging elke paar
   honderd pixels aan een kaartje vastklikken en dat schokt.
   Het maskertje laat de randen wegvagen, zodat te zien is dat er links
   en rechts nog meer staat. */
.lth-band {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 0 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.lth-band::-webkit-scrollbar { display: none; }
.lth-set {
    flex: 0 0 196px;
    border: 1px solid var(--lth-lijn);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s;
}
.lth-set:hover { border-color: #c3c9d2; transform: translateY(-3px); }

.lth-set-beeld {
    aspect-ratio: 4 / 3;
    background: var(--lth-vlak);
    display: flex; align-items: center; justify-content: center;
    padding: 14px;
    border-bottom: 1px solid #f1f3f5;
}
.lth-set-beeld img { max-height: 100%; width: auto; object-fit: contain; }

.lth-set-tekst { padding: 12px 14px 15px; }
.lth-set-thema { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lth-zacht); font-weight: 700; }
.lth-set-naam {
    font-size: .98rem; font-weight: 700; color: var(--lth-inkt); line-height: 1.4;
    margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 5. Drie stappen ───────────────────────────────────────────────── */
.lth-stappen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.lth-stap { display: flex; gap: 16px; align-items: flex-start; }
.lth-nr {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: var(--lth-rood); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem;
}
.lth-stap h3 { font-size: 1.15rem; color: var(--lth-inkt); margin-bottom: 5px; }

/* ── 6. Waarden ────────────────────────────────────────────────────
   Twee kolommen, niet vier. Een kaart is nu ruim vijfhonderd pixels
   breed en haalt zestig tekens per regel. Dat is het verschil tussen
   lezen en scannen. */
.lth-waarden {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    align-items: stretch;          /* gelijke hoogtes per rij */
}

/* ── De kaart ──
   Hier stond een dikke gekleurde streep van 5 pixels langs de linkerrand,
   met de emoji ernaast. Twee gekleurde dingen naast elkaar aan dezelfde
   kant, allebei even hard. Nu draagt alleen het icoon de kleur en is de
   rand van de kaart een gewone lijn. Rustiger, en de kleur zegt nog
   steeds welk onderdeel je leest. */
.lth-waarde {
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-radius: 14px;
    padding: 22px 26px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    transition: border-color .15s, box-shadow .15s;
}
.lth-waarde:hover {
    border-color: #d5dbe4;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .07);
}

/* Het icoon in een zacht gekleurd vierkant. De vier huiskleuren in een
   vaste cyclus, ook als er acht kaarten staan: met nth-child(2), (3) en
   (4) kregen kaart vijf tot acht allemaal dezelfde kleur, en dat oogde
   willekeurig. */
.lth-waarde .teken {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(227, 30, 36, .09);
    color: var(--lth-k1);
}
.lth-waarde:nth-child(4n+2) .teken { background: rgba(0, 87, 166, .09);  color: var(--lth-k3); }
.lth-waarde:nth-child(4n+3) .teken { background: rgba(214, 168, 0, .14); color: #a37f00; }
.lth-waarde:nth-child(4n+4) .teken { background: rgba(0, 135, 61, .09);  color: var(--lth-k4); }

.lth-waarde h3 {
    font-size: 1.1rem;
    color: var(--lth-inkt);
    margin: 2px 0 6px;
    letter-spacing: -.01em;
}
.lth-waarde p { font-size: 1rem !important; line-height: 1.65 !important; }
.lth-waarde p + p { margin-top: 8px; }

/* ── Het icoon zelf ──
   Eén lijndikte voor alles. currentColor betekent: neem de kleur over van
   het vakje eromheen, zodat de cyclus hierboven het enige is dat de kleur
   bepaalt. */
.lth-ic {
    width: 23px;
    height: 23px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lth-slot {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.lth-slot p { color: var(--lth-tekst); }
.lth-slot b { color: var(--lth-inkt); }

/* ── Doorlopend verhaal ────────────────────────────────────────────
   Eerst was dit een kale tekstkolom midden in een wit vlak. Op een
   pagina waar verder alles in kaarten met een gekleurde rand staat, valt
   zo'n zwevend blok eruit — het lijkt vergeten in plaats van bedoeld.

   Nu dezelfde kaartvorm als de rest, maar dan één brede in plaats van
   een raster. De tekst binnenin blijft op leesbreedte: ongeveer
   vijfenzestig tekens per regel. Daaronder gaat lezen hakkelen,
   daarboven raakt het oog de volgende regel kwijt. */
.lth-verhaal {
    max-width: 46em;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-left: 5px solid var(--lth-geel);
    border-radius: 14px;
    padding: 34px 42px 38px;
}
.lth-verhaal p + p { margin-top: 1.05em; }

/* De eerste zin als aanhef. Geeft het blok een begin, zodat het oog
   weet waar het instapt. */
.lth-verhaal .uitgelicht {
    font-size: 1.28rem !important;
    line-height: 1.6 !important;
    color: var(--lth-inkt);
    font-weight: 600;
    margin-bottom: 1.1em;
    padding-bottom: 1.1em;
    border-bottom: 1px solid var(--lth-lijn);
}

/* Twee gelijkwaardige kaarten naast elkaar. Eerder stonden vrijwilligers
   en publicaties in twee aparte secties met elk een eigen kop, waarvan
   de tweede maar één regel bevatte. Dat leest als een restje. */
.lth-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
}
.lth-kaart {
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-top: 5px solid var(--lth-geel);
    border-radius: 14px;
    padding: 30px 32px 32px;
    display: flex;
    flex-direction: column;
}
.lth-kaart:last-child { border-top-color: var(--lth-blauw); }
.lth-kaart h3 {
    font-size: 1.25rem;
    color: var(--lth-inkt);
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -.01em;
}
.lth-kaart .onder { margin-top: auto; padding-top: 22px; }

/* ── 7. Wat we doen ────────────────────────────────────────────────── */
/* Twee kolommen en niet drie: met drie wordt elke omschrijving weer in
   een smal strookje geperst, en dat was nu juist het probleem. */
.lth-doen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 4px 56px;
}
.lth-doen-item {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--lth-lijn);
}
.lth-doen-item .teken {
    flex: none; width: 44px; height: 44px; border-radius: 11px;
    background: #fff; border: 1px solid var(--lth-lijn);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.lth-doen-item h3 { font-size: 1.08rem; color: var(--lth-inkt); margin-bottom: 3px; }
.lth-doen-item p { font-size: 1rem !important; line-height: 1.6 !important; }

.lth-midden { text-align: center; margin-top: 38px; }

/* ── 8. Locatie ────────────────────────────────────────────────────── */
.lth-locatie {
    background: linear-gradient(135deg, #0057A6 0%, #003d75 100%);
    color: #fff;
    border-radius: 14px;
    overflow: hidden;
}
.lth-locatie img { width: 100%; height: 260px; object-fit: cover; display: block; }
.lth-locatie-tekst {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 34px;
    padding: 30px 34px 34px;
}
.lth-locatie h3 { color: var(--lth-geel); font-size: 1.1rem; margin-bottom: 10px; }
.lth-locatie p { color: rgba(255, 255, 255, .92) !important; font-size: 1.02rem !important; }
.lth-locatie a { color: var(--lth-geel); }
.lth-locatie .knopgeel {
    display: inline-block; background: var(--lth-geel); color: var(--lth-blauw);
    padding: 10px 26px; border-radius: 8px; font-weight: 700; margin-top: 16px; text-decoration: none;
}
.lth-locatie .los { font-size: .92rem; font-style: italic; opacity: .85; }

/* ── Telefoon ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lth-blok { padding: 48px 18px; }
    .lth-blok.smal { padding-top: 32px; padding-bottom: 32px; }
    .lth-intro { padding: 40px 18px; }
    .lth-intro-binnen { grid-template-columns: 1fr; gap: 28px; }
    .lth-intro-beeld { order: -1; max-width: 190px; margin: 0 auto; }
    .lth-bewijs, .lth-week { padding-left: 18px; padding-right: 18px; }
    .lth-bewijs-binnen { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .lth-titel { margin-bottom: 30px; }
    .lth-waarden { grid-template-columns: 1fr; gap: 16px; }
    .lth-waarde { padding: 20px 22px; }
    .lth-set { flex-basis: 158px; }
    .video-driehoek { width: 60px; height: 60px; }
    .video-driehoek::after { border-width: 12px 0 12px 20px; }
    .lth-locatie img { height: 180px; }
    .lth-locatie-tekst { padding: 24px 22px 28px; gap: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   CATALOGUS  (nieuw/catalogus.php)

   De huidige catalogus toont per set een strookje beeld met daaronder zes
   regels met een emoji ervoor. Zes regels die allemaal even hard roepen,
   waardoor je niets ziet. Hier is de foto het onderwerp en staat er onder
   de foto alleen wat je nodig hebt om te kiezen: naam, thema, prijs.
   ══════════════════════════════════════════════════════════════════════ */

/* Een opening zonder illustratie ernaast. Zonder deze regel houdt het
   raster zijn tweede kolom van 260 pixels aan — leeg — en staat de tekst
   onnodig smal. */
.lth-intro-binnen.enkel { grid-template-columns: 1fr; }
/* Hier stond .lth-lead { max-width: 60ch }. Die regel is specifieker dan
   de regel bij .lth-lead zelf en won daar dus altijd van, waar die ook
   stond. Daarom veranderde er niets toen ik de grens daar weghaalde: ik
   verplaatste een deur terwijl het slot hier zat. */

.cat-intro { padding-bottom: 28px; }
.cat-intro-binnen { grid-template-columns: 1fr; }     /* geen illustratie hier */

/* ── Waarom balken wél blijven plakken ──
   css/styles.css zet overflow-x: hidden op de body. Dat lijkt onschuldig,
   maar het maakt van de body een eigen scrollvlak — en position:sticky
   plakt altijd aan het dichtstbijzijnde scrollvlak. De filterbalk in de
   catalogus en de balk met snelkoppelingen op de informatiepagina plakten
   daardoor keurig aan een vlak dat zelf niet scrolt, en dat is hetzelfde
   als niet plakken.

   overflow-x: clip doet wat er bedoeld was (uitstekende inhoud afsnijden)
   zonder een scrollvlak te maken. Deze regel staat in nieuw.css en geldt
   dus alleen voor de pagina's van dit voorstel; aan de live site verandert
   niets. */
body { overflow-x: clip; }

/* ── De filterbalk ──
   Blijft staan tijdens het scrollen. Bij driehonderd sets is terug naar
   boven moeten om je zoekterm aan te passen het grootste ongemak van de
   huidige pagina. */
.cat-balk {
    position: sticky;
    /* De kop van de site plakt zelf ook bovenaan en is 120 pixels hoog (op
       een telefoon minder, want daar klapt hij in). Met top:0 zou deze balk
       er precies achter schuiven — hij plakt dan wel, maar je ziet hem niet.
       De echte hoogte wordt gemeten en in --kop-hoogte gezet. */
    top: var(--kop-hoogte, 120px);
    z-index: 40;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--lth-lijn);
    padding: 12px 40px;
}

.cat-balk-binnen {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cat-zoek {
    flex: 1 1 260px;
    min-width: 200px;
    padding: 10px 14px;
    border: 1.5px solid var(--lth-lijn);
    border-radius: 9px;
    font-size: .95rem;
    font-family: inherit;
    background: white;
}
.cat-zoek:focus,
.cat-keuze:focus {
    outline: none;
    border-color: var(--lth-blauw);
    box-shadow: 0 0 0 3px rgba(0, 87, 166, .12);
}

.cat-keuze {
    padding: 10px 12px;
    border: 1.5px solid var(--lth-lijn);
    border-radius: 9px;
    font-size: .92rem;
    font-family: inherit;
    background: white;
    max-width: 210px;
}

.cat-vink {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    color: var(--lth-tekst);
    cursor: pointer;
    white-space: nowrap;
}
.cat-vink input { width: 16px; height: 16px; accent-color: var(--lth-blauw); }

.cat-weergave {
    display: flex;
    margin-left: auto;
    border: 1.5px solid var(--lth-lijn);
    border-radius: 9px;
    overflow: hidden;
}
.cat-weergave button {
    border: none;
    background: white;
    padding: 9px 14px;
    font: inherit;
    font-size: .88rem;
    color: var(--lth-tekst);
    cursor: pointer;
}
.cat-weergave button + button { border-left: 1.5px solid var(--lth-lijn); }
.cat-weergave button.aan { background: var(--lth-blauw); color: white; font-weight: 600; }

.cat-blok { padding-top: 28px; }

.cat-aantal {
    color: var(--lth-zacht);
    font-size: .92rem;
    margin: 0 0 18px;
}

/* ── Raster ── */
.cat-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
}

.cat-kaart {
    background: white;
    border: 1px solid var(--lth-lijn);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex;
    flex-direction: column;
}
.cat-kaart:hover,
.cat-kaart:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(16, 24, 40, .10);
    outline: none;
}

/* Vaste verhouding voor het beeldvlak, zodat de kaarten in een rij even
   hoog zijn ook al is de ene setfoto vierkant en de andere liggend. */
.cat-kaart-beeld {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--lth-vlak);
    overflow: hidden;
}
.cat-kaart-beeld img {
    width: 100%;
    height: 100%;
    object-fit: contain;       /* contain: een set mag niet worden bijgesneden */
    padding: 10px;
    display: block;
}

/* ── Te leen of uitgeleend ──
   Dit was een zacht groen vlakje tegenover een zacht grijs vlakje. Beide
   licht, beide met donkere tekst — je moest het lezen om het te weten,
   en bij dertig kaartjes naast elkaar doet niemand dat. Op de huidige
   catalogus is het een groene en een rode badge, en dat werkt.

   Nu dus volle kleur met witte tekst, een slag groter, en een vinkje of
   kruisje ervoor. Het verschil zit in de kleur én in de vorm, zodat het
   ook klopt voor wie kleuren slecht uit elkaar houdt. */
.cat-vlag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
    color: #fff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .22);
}

.cat-vlag.vrij  { background: var(--lth-k4); }
.cat-vlag.uit   { background: #b3261e; }
/* Gereserveerd is geen van beide: de set ligt hier, maar niet voor jou.
   Oranje, zoals op de bestaande catalogus. */
.cat-vlag.apart { background: #c2710c; }

.cat-vlag::before { font-size: .9em; }
.cat-vlag.vrij::before  { content: '\2713'; }   /* vinkje */
.cat-vlag.uit::before   { content: '\2715'; }   /* kruisje */
.cat-vlag.apart::before { content: '\25CF'; }   /* stip */

/* Een uitgeleende set mag wat naar de achtergrond. Niet onzichtbaar —
   hij staat er niet voor niets — maar de sets die je vandaag kunt
   meenemen horen eerst op te vallen. */
.cat-kaart.uit .cat-kaart-beeld img { opacity: .62; }
.cat-kaart.uit:hover .cat-kaart-beeld img { opacity: 1; }

/* ── De tekst onder de foto ──
   De vlag "Nu te leen" hing eerst in de hoek van de foto. Dat werkte bij
   één kaart, maar bij twintig naast elkaar vraagt een gekleurd vlakje
   bovenop elk beeld te veel aandacht — en bij een lange tekst
   ("Uitgeleend — terug 25 sep") dekte hij de halve set af.

   Nu staat hij in het tekstvlak eronder, onder de prijs, net als op de
   bestaande catalogus. Daarvoor is dat vlak een stukje hoger geworden.

   Elke regel heeft een vaste hoogte: twee regels voor de naam (langere
   namen worden afgekapt), één voor het setnummer, één voor thema en
   leeftijd, één voor de prijs, één voor de vlag. Zonder die vaste maten
   staat een set met een naam van twee regels overal een regel lager dan
   zijn buren, en dát maakte de lijst rommelig. Ook lege regels houden hun
   hoogte, zodat een set zonder setnummer niets verschuift. */
.cat-kaart-tekst {
    padding: 13px 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cat-kaart-tekst h3 {
    font-size: .98rem;
    line-height: 1.32;
    color: var(--lth-inkt);
    margin: 0;
    height: calc(2 * 1.32em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-nummer { font-size: .78rem; color: var(--lth-zacht); margin: 0; min-height: 1.1em; }
.cat-meta   { font-size: .85rem; color: var(--lth-tekst); margin: 0; min-height: 1.2em; }
.cat-prijs  { font-size: .92rem; font-weight: 700; color: var(--lth-blauw); margin: 0; }

/* De regel met de vlag. Staat los onder de prijs, met de retourdatum
   erachter als die er is. */
.cat-stand {
    margin: 5px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 26px;
}
.cat-retour {
    font-size: .78rem;
    color: #b3261e;
    font-weight: 600;
}

/* ── Lijst ── */
.cat-lijst { display: flex; flex-direction: column; gap: 1px; background: var(--lth-lijn);
             border: 1px solid var(--lth-lijn); border-radius: 12px; overflow: hidden; }

.cat-rij {
    display: grid;
    /* De prijskolom is breder geworden: daar staan nu ook de tekens
       voor maat en stukjes in. */
    grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1fr) 230px 190px;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: white;
    cursor: pointer;
}
.cat-rij:hover { background: var(--lth-vlak); }
.cat-rij img { width: 56px; height: 42px; object-fit: contain; }
.cat-rij-naam strong { display: block; font-size: .94rem; color: var(--lth-inkt); }
.cat-rij-naam span   { font-size: .78rem; color: var(--lth-zacht); }
.cat-rij-thema  { font-size: .88rem; color: var(--lth-tekst); }
.cat-rij-prijs  { font-size: .88rem; font-weight: 600; color: var(--lth-blauw); }
.cat-rij-status { text-align: right; }

.cat-leegvak { padding: 40px 0; text-align: center; }
.cat-leeg { color: var(--lth-zacht); line-height: 1.8; }

/* ── Het venster met de details ── */
.cat-venster {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10000;
}

.cat-venster-vak {
    background: white;
    border-radius: 16px;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    position: relative;
    display: grid;
    grid-template-columns: 300px 1fr;
}

.cat-sluit {
    position: absolute;
    top: 10px; right: 12px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--lth-lijn);
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--lth-tekst);
    cursor: pointer;
    z-index: 2;
}
.cat-sluit:hover { background: #fee2e2; color: #b91c1c; }

/* De foto in het venster is een knop: klikken opent het origineel. */
.cat-venster-beeldknop {
    position: relative;
    border: 0;
    padding: 0;
    background: var(--lth-vlak);
    cursor: zoom-in;
    display: block;
}
.cat-venster-beeld {
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: contain;
    padding: 16px;
    display: block;
}
.cat-vergroot {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(16, 24, 40, .72);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity .15s;
}
.cat-venster-beeldknop:hover .cat-vergroot,
.cat-venster-beeldknop:focus-visible .cat-vergroot { opacity: 1; }

/* Het origineel over het hele scherm. */
.cat-foto-groot {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 20, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    z-index: 10010;
    cursor: zoom-out;
}
.cat-foto-groot img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.cat-foto-groot .cat-sluit {
    top: 18px;
    right: 20px;
    background: rgba(255, 255, 255, .9);
}

.cat-venster-stand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}

/* ── De exemplaren ── */
.cat-exemplaren { margin: 0 0 18px; }
.cat-exemplaren h3 {
    font-size: .86rem;
    font-weight: 700;
    color: var(--lth-zacht);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 8px;
}
.cat-exemplaren ul { list-style: none; margin: 0; padding: 0; }
.cat-exemplaren li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--lth-lijn);
    font-size: .9em;
}
.cat-exemplaren li strong { min-width: 84px; color: var(--lth-inkt); }
.cat-exemplaren li span   { color: var(--lth-tekst); }
.cat-exemplaren li.vrij span { color: var(--lth-k4); font-weight: 600; }
.cat-exemplaren li.uit  span { color: var(--lth-zacht); }

/* ── Reserveren ── */
.cat-reserveren {
    background: var(--lth-vlak);
    border: 1px solid var(--lth-lijn);
    border-left: 4px solid var(--lth-k2);
    border-radius: var(--radius-sm, 9px);
    padding: 14px 16px 16px;
    margin: 0 0 18px;
}
.cat-reserveren h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lth-inkt);
    margin: 0 0 6px;
}
.cat-reserveren p {
    font-size: .88rem;
    color: var(--lth-tekst);
    margin: 0 0 12px;
    line-height: 1.5;
}
.cat-reserveer-vorm label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--lth-tekst);
    margin: 10px 0 4px;
}
.cat-reserveer-vorm input {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid var(--lth-lijn);
    border-radius: 8px;
    font-size: .95rem;
    font-family: inherit;
    background: #fff;
}
.cat-reserveer-vorm input:focus {
    outline: none;
    border-color: var(--lth-blauw);
    box-shadow: 0 0 0 3px rgba(0, 87, 166, .12);
}
.cat-reserveer-vorm .cta-button { margin-top: 14px; }

.cat-reserveer-melding { font-size: .88rem; margin: 10px 0 0; }
.cat-reserveer-melding.goed { color: var(--lth-k4); font-weight: 600; }
.cat-reserveer-melding.fout { color: #b3261e; font-weight: 600; }

.cat-venster-tekst { padding: 26px 28px 28px; }
.cat-venster-tekst h2 {
    font-size: 1.35rem;
    color: var(--lth-inkt);
    margin: 10px 0 16px;
    line-height: 1.3;
}
.cat-venster-tekst dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 18px;
    margin: 0 0 18px;
    font-size: .93rem;
}
.cat-venster-tekst dt { color: var(--lth-zacht); }
.cat-venster-tekst dd { margin: 0; color: var(--lth-inkt); font-weight: 600; }

.cat-venster-slot {
    border-top: 1px solid var(--lth-lijn);
    padding-top: 14px;
    font-size: .9rem;
    color: var(--lth-tekst);
    margin: 0;
}
.cat-venster-slot a { color: var(--lth-blauw); font-weight: 600; }

/* ── Telefoon ── */
@media (max-width: 900px) {
    .cat-balk { padding: 10px 14px; }
    .cat-weergave { margin-left: 0; }
    .cat-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .cat-kaart-tekst { padding: 11px 12px 13px; }
    .cat-kaart-tekst h3 { font-size: .9rem; }

    /* De lijst wordt op een telefoon te smal voor vijf kolommen; dan maar
       twee regels per set in plaats van een tabel die je opzij moet
       schuiven. */
    .cat-rij {
        grid-template-columns: 48px 1fr;
        grid-template-areas: "beeld naam" "beeld meta";
        row-gap: 3px;
    }
    .cat-rij img        { grid-area: beeld; }
    .cat-rij-naam       { grid-area: naam; }
    .cat-rij-thema      { display: none; }
    .cat-rij-prijs      { grid-area: meta; font-size: .82rem; }
    .cat-rij-status     { grid-area: meta; text-align: right; }

    .cat-venster-vak { grid-template-columns: 1fr; }
    .cat-venster-beeld { max-height: 210px; }
    .cat-venster-tekst { padding: 18px 20px 22px; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOTO'S

   Tot nu toe had het nieuwe ontwerp één illustratie en verder alleen
   setfoto's uit de catalogus. Die setfoto's zijn klein, staan op een witte
   achtergrond en zijn stuk voor stuk hetzelfde soort plaatje. Een paar
   grote foto's van handen die bouwen geven de pagina lucht en laten zien
   waar het over gaat, zonder dat er een woord bij hoeft.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Brede fotoband over de volle breedte ──
   Met een donkere waas eroverheen, want anders is witte tekst op een foto
   met lichte vlakken onleesbaar. De hoogte schaalt mee met het scherm maar
   blijft tussen de 220 en 420 pixels: hoger wordt een foto op een laptop
   een muur, lager wordt hij een streep. */
.lth-fotoband {
    position: relative;
    height: clamp(220px, 34vw, 420px);
    overflow: hidden;
}

.lth-fotoband img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;   /* de handen in beeld houden bij bijsnijden */
    display: block;
}

.lth-fotoband::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 32, 66, .74) 0%, rgba(0, 32, 66, .36) 52%, rgba(0, 32, 66, .08) 100%);
}

.lth-fotoband-tekst {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    z-index: 2;
    color: white;
}
.lth-fotoband-tekst p {
    font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    max-width: 16ch;
    margin: 0;
    color: white !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.lth-fotoband-tekst span {
    display: block;
    font-size: .95rem;
    font-weight: 500;
    margin-top: 10px;
    max-width: 34ch;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

/* ── Foto naast een tekstkolom ── */
.lth-fotoduo {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 40px;
    align-items: start;
}
.lth-fotoduo img {
    width: 100%;
    height: auto;              /* zonder dit rekt de browser de foto uit naar
                                  het height-attribuut in de HTML */
    border-radius: 14px;
    display: block;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
}

/* ── Losse foto als accent, met onderschrift ── */
.lth-foto {
    margin: 0;
}
.lth-foto img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
}
.lth-foto figcaption {
    font-size: .86rem;
    color: var(--lth-zacht);
    margin-top: 9px;
    font-style: italic;
}

@media (max-width: 900px) {
    .lth-fotoband { height: 200px; }
    .lth-fotoband-tekst { padding: 0 18px; }
    .lth-fotoband::after {
        background: linear-gradient(90deg, rgba(0, 32, 66, .80) 0%, rgba(0, 32, 66, .50) 100%);
    }
    .lth-fotoduo { grid-template-columns: 1fr; gap: 22px; }
    .lth-fotoduo img { max-width: 300px; margin: 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   DE MENUBALK

   Alleen binnen dit voorstel; de echte site verandert er niet van. De
   knoppen in de kop zijn nu HOOFDLETTERS met een halve pixel letterruimte,
   16 pixels binnenmarge en een achtergrondvlak per item. Dat kost zoveel
   breedte dat "Contact" op een scherm van 1360 pixels naar een tweede
   regel valt en de kop negenenzeventig pixels hoog wordt — bijna net zo
   hoog als het logo ernaast.

   Drie ingrepen, die samen ongeveer een kwart breedte schelen:

     1. Geen hoofdletters en geen letterruimte. Een woord in kleine letters
        is smaller én sneller te lezen; hoofdletters dwingen het oog om
        letter voor letter te kijken.
     2. Minder binnenmarge, iets meer ruimte tússen de items. Dat leest als
        een menu in plaats van als zeven losse knoppen.
     3. De actieve pagina krijgt een streepje eronder in plaats van een
        gevuld vlak. Een vlak trekt evenveel aandacht als de knop
        "Bekijk de catalogus" eronder, en dat is niet de bedoeling.
   ══════════════════════════════════════════════════════════════════════ */

header nav {
    flex-wrap: nowrap;        /* liever een smaller menu dan een tweede regel */
    gap: 2px;
    align-items: center;
}

header nav > a,
header nav .nav-dropdown-toggle {
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 7px;
    white-space: nowrap;
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}

header nav > a:hover,
header nav .nav-dropdown-toggle:hover {
    background: rgba(0, 87, 166, .07);
}

/* De actieve pagina: een streepje in de huisstijlrood, geen gevuld vlak.
   Een vlak trekt evenveel aandacht als de knop "Bekijk de catalogus"
   eronder, en dat is niet de bedoeling.

   Belangrijk: styles.css heeft al een streepje op nav a::after — bodem 0,
   links 50% met translateX(-50%), breedte 0 die bij hover en op de
   actieve pagina naar 80% groeit. Ik had daar een eigen ::after
   overheen gezet met left en right, maar die erfde hun
   transform: translateX(-50%) en breedte van 80%. Het streepje schoof
   daardoor veertig procent van zijn eigen breedte naar links — precies
   wat er misging.

   Dus: hun streepje blijft staan zoals het is, wij maken het alleen wat
   dunner. En de achtergrond en de schaduw van de actieve knop gaan eraf;
   zonder die twee blijft er een witte pil met slagschaduw staan. */
header nav > a.active {
    background: none;
    box-shadow: none;
    color: var(--lth-blauw);
}
header nav > a.active::after,
header nav > a:hover::after {
    height: 2.5px;
    border-radius: 2px;
}

/* Het uitklapmenu erft de hoofdletters van de balk; hier ook uitzetten. */
header nav .nav-dropdown-menu a {
    text-transform: none;
    letter-spacing: 0;
    font-size: .92rem;
}

@media (max-width: 1100px) {
    header nav > a,
    header nav .nav-dropdown-toggle { padding: 8px 9px; font-size: .9rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   DE KLEUREN VAN HET LOGO

   Het logo heeft vijf kleuren — rood, geel, blauw, groen en donkergrijs —
   maar op de pagina zelf kwamen alleen blauw en een enkel rood accent
   terug. Daardoor oogt de site strak maar bloedeloos, terwijl de
   legotheek nu juist over kleur gaat.

   Terughoudend toegepast: kleur op lijnen en accenten, nooit op vlakken
   waar tekst overheen moet. Grote gekleurde vlakken zouden de setfoto's
   overstemmen, en díe zijn het onderwerp.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --lth-k1: #E31E24;   /* rood      */
    --lth-k2: #FFD500;   /* geel      */
    --lth-k3: #0057A6;   /* blauw     */
    --lth-k4: #00873D;   /* groen     */
    --lth-k5: #1f2937;   /* antraciet */
}

/* ── Eén lijn, overal hetzelfde ──
   Hier stond een balk in vijf kleursegmenten onder de kop. Die trok de
   aandacht naar zichzelf in plaats van naar wat eronder staat, en hij
   botste met dezelfde streep boven de voet en onder de fotoband: drie
   regenboogjes op één pagina.

   Nu: één lijn, altijd geel, altijd 4 pixels. Die maakt de bouw van de
   pagina zichtbaar zonder mee te praten. De kleur zit in de accénten —
   de streepjes onder de sectiekoppen, de getallen, de randjes van de
   setkaartjes — en dáár mag hij wel per onderdeel verschillen. Zo is er
   één lijn en veel kleur, in plaats van andersom. */
header      { border-bottom: 4px solid var(--lth-k2); }
footer      { border-top: 4px solid var(--lth-k2); }

/* ── Een streepje onder elke sectiekop ──
   Per sectie een andere kleur, in de volgorde van het logo. Niet omdat
   de kleur iets betekent, maar omdat het oog dan ziet dat er een nieuw
   onderwerp begint zonder dat er een lijn over de hele breedte hoeft. */
.lth-titel h2,
.lth-kop h2 { position: relative; padding-bottom: 14px; }

.lth-titel h2::after,
.lth-kop h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 54px;
    height: 4px;
    border-radius: 3px;
    background: var(--lth-k3);
}

/* De koppen in de linkerkolom (.lth-kop) staan links uitgelijnd, dus het
   streepje ook. */
.lth-kop h2::after { left: 0; transform: none; }

.lth-blok:nth-of-type(odd)  .lth-titel h2::after { background: var(--lth-k1); }
.lth-blok:nth-of-type(even) .lth-titel h2::after { background: var(--lth-k3); }
.lth-blok.grijs .lth-titel h2::after             { background: var(--lth-k4); }
.lth-kop h2::after                               { background: var(--lth-k2); }

/* ── De vier getallen elk in een eigen kleur ──
   Ze staan naast elkaar en zeggen vier verschillende dingen; vier keer
   hetzelfde blauw maakte er één blok van. */
.lth-bewijs-binnen > div:nth-child(1) strong { color: var(--lth-k1); }
.lth-bewijs-binnen > div:nth-child(2) strong { color: var(--lth-k4); }
.lth-bewijs-binnen > div:nth-child(3) strong { color: var(--lth-k3); }
.lth-bewijs-binnen > div:nth-child(4) strong { color: var(--lth-k5); }

/* ── De stappen 1, 2, 3 ── */
.lth-stap:nth-child(1) .lth-nr { background: var(--lth-k1); }
.lth-stap:nth-child(2) .lth-nr { background: var(--lth-k2); color: var(--lth-k5); }
.lth-stap:nth-child(3) .lth-nr { background: var(--lth-k4); }

/* ── De setkaartjes in de band ──
   Een gekleurde lijn tussen de foto en de tekst, aflopend door de vijf
   kleuren. Bij veertien sets herhaalt de reeks bijna drie keer; dat
   leest als een rij steentjes in plaats van als veertien losse vakjes.

   De lijn stond eerst langs de bovenrand van de kaart. Daar liep hij mee
   met de afgeronde hoeken en boog hij aan weerszijden naar beneden weg —
   dat leest als een lichtje langs de rand, niet als een lijn. Hier, op
   de scheiding tussen beeld en tekst, loopt hij kaarsrecht van links
   naar rechts. */
.lth-set-beeld { border-bottom: 3px solid var(--lth-k3); }
.lth-set:nth-child(5n+1) .lth-set-beeld { border-bottom-color: var(--lth-k1); }
.lth-set:nth-child(5n+2) .lth-set-beeld { border-bottom-color: var(--lth-k2); }
.lth-set:nth-child(5n+3) .lth-set-beeld { border-bottom-color: var(--lth-k3); }
.lth-set:nth-child(5n+4) .lth-set-beeld { border-bottom-color: var(--lth-k4); }
.lth-set:nth-child(5n+5) .lth-set-beeld { border-bottom-color: var(--lth-k5); }

/* ── Onder de fotoband dezelfde gele lijn ──
   De band eindigde met een harde rand tegen het wit eronder. Deze lijn
   maakt daar een afsluiting van, en het is dezelfde lijn als onder de
   kop en boven de voet — dat is precies de bedoeling. */
.lth-fotoband::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    z-index: 3;
    background: var(--lth-k2);
}

/* ── De kaartjes bij "Meedoen en meekijken" ──
   Deze hebben geen beeld, dus hier loopt de lijn onder de kop. */
.lth-kaart h3 {
    padding-bottom: 10px;
    border-bottom: 3px solid var(--lth-k3);
    margin-bottom: 12px;
}
.lth-kaart:nth-child(2) h3 { border-bottom-color: var(--lth-k1); }

/* De dag waarop we open zijn krijgt een groene rand; vandaag houdt zijn
   blauwe. Nu is elk dagkaartje even grijs en moet je de tijden lezen om
   te zien waar je terecht kunt.

   De klasse "open" staat niet op het kaartje maar op het regeltje met de
   tijd erin, vandaar :has(). Browsers die dat niet kennen negeren de
   regel en houden de grijze rand — dan is er niets kapot, alleen minder
   kleur. */
.lth-dag:has(.open) { border-color: var(--lth-k4); }

/* ── Catalogus: dezelfde lijn, op dezelfde plek ── */
.cat-kaart-beeld { border-bottom: 3px solid var(--lth-k3); }
.cat-kaart:nth-child(5n+1) .cat-kaart-beeld { border-bottom-color: var(--lth-k1); }
.cat-kaart:nth-child(5n+2) .cat-kaart-beeld { border-bottom-color: var(--lth-k2); }
.cat-kaart:nth-child(5n+3) .cat-kaart-beeld { border-bottom-color: var(--lth-k3); }
.cat-kaart:nth-child(5n+4) .cat-kaart-beeld { border-bottom-color: var(--lth-k4); }
.cat-kaart:nth-child(5n+5) .cat-kaart-beeld { border-bottom-color: var(--lth-k5); }

/* In de lijstweergave staat het beeld links van de tekst; daar zou een
   lijn eronder niets scheiden. Die krijgt hem dus niet. */
.cat-lijst .cat-kaart-beeld { border-bottom: 0; }

/* ── Over ons: de acht waarden ── */
.lth-waarde { border-left: 4px solid var(--lth-k3); }
.lth-waarde:nth-child(4n+1) { border-left-color: var(--lth-k1); }
.lth-waarde:nth-child(4n+2) { border-left-color: var(--lth-k2); }
.lth-waarde:nth-child(4n+3) { border-left-color: var(--lth-k3); }
.lth-waarde:nth-child(4n+4) { border-left-color: var(--lth-k4); }

/* ── De overgang tussen twee secties ──────────────────────────────────
   Waar een wit vlak op een lichtgrijs vlak stuit, is het verschil zo
   klein dat je het eerder vermoedt dan ziet. De pagina valt daardoor
   niet uiteen in onderdelen maar in vage stroken.

   Elke sectie krijgt daarom een lijn aan zijn bovenkant, in dezelfde
   maat als de gele lijn onder de kop, maar per sectie in een andere
   kleur van het logo. Zo is er één soort lijn met vijf kleuren, in
   plaats van vijf soorten lijnen.

   Twee uitzonderingen: de eerste sectie (daar staat de gele lijn van de
   kop al bovenop) en de fotoband (die heeft zijn eigen gele afsluiting
   aan de onderkant). */
body > section { border-top: 3px solid var(--lth-k3); }

body > section:first-of-type,
body > section.lth-fotoband { border-top: 0; }

/* En de sectie ná de fotoband ook niet: die band sluit zichzelf al af met
   een gele lijn aan zijn onderkant, dus daar stonden er twee onder elkaar
   — geel met daaronder de kleur van de volgende sectie. */
body > section.lth-fotoband + section { border-top: 0; }

body > section:nth-of-type(5n+1) { border-top-color: var(--lth-k1); }
body > section:nth-of-type(5n+2) { border-top-color: var(--lth-k2); }
body > section:nth-of-type(5n+3) { border-top-color: var(--lth-k3); }
body > section:nth-of-type(5n+4) { border-top-color: var(--lth-k4); }
body > section:nth-of-type(5n+5) { border-top-color: var(--lth-k5); }

/* De voet sluit de reeks af met dezelfde lijn. Geel, want dat is de
   kleur die de pagina ook opent. */
footer { border-top: 3px solid var(--lth-k2); }



.cat-rij-retour {
    display: block;
    font-size: .78rem;
    color: #b3261e;
    margin-top: 3px;
}
.cat-venster-retour {
    display: inline-block;
    margin-left: 10px;
    font-size: .85rem;
    color: #b3261e;
    font-weight: 600;
}

/* ── Het maatteken ──
   Een doosje met de letter ernaast, op de prijsregel. Het doosje groeit
   mee met de maat: XS is een streepje, XL een blokje. Zo zie je de
   volgorde zonder de letters te hoeven vergelijken — en het kost geen
   eigen regel, wat bij een kaart van 230 pixels breed uitmaakt. */
.cat-maat {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--lth-zacht);
    background: var(--lth-vlak);
    border: 1px solid var(--lth-lijn);
    border-radius: 6px;
    padding: 2px 7px 2px 5px;
    line-height: 1.5;
    white-space: nowrap;
}
.cat-maat i {
    display: block;
    width: 9px;
    background: var(--lth-blauw);
    border-radius: 2px 2px 1px 1px;
    opacity: .8;
    margin-bottom: 2px;
}

/* De prijsregel op de kaart: bedrag links, maat rechts. */
.cat-prijs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ── De tekens op de prijsregel ──
   Maat en stukjes staan naast elkaar rechts van de prijs. Op de bestaande
   catalogus zijn dat twee van de zes regels met een emoji ervoor; hier
   samen één hoekje van de kaart. */
.cat-tekens {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
}

.cat-stukjes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--lth-zacht);
    background: var(--lth-vlak);
    border: 1px solid var(--lth-lijn);
    border-radius: 6px;
    padding: 2px 7px 2px 5px;
    line-height: 1.5;
    white-space: nowrap;
}

/* Een steentje van twee bij één, met de noppen erop. Getekend met randen
   in plaats van met een plaatje: schaalt mee met de tekst en kost geen
   extra bestand. */
.cat-stukjes i {
    position: relative;
    display: block;
    width: 11px;
    height: 7px;
    background: var(--lth-rood);
    border-radius: 1px;
    opacity: .85;
    margin-top: 2px;
}
.cat-stukjes i::before,
.cat-stukjes i::after {
    content: '';
    position: absolute;
    top: -2px;
    width: 3px;
    height: 2px;
    background: inherit;
    border-radius: 1px 1px 0 0;
}
.cat-stukjes i::before { left: 1px; }
.cat-stukjes i::after  { right: 1px; }

/* In de lijstweergave staan prijs en tekens onder elkaar in één cel. */
.cat-rij-prijs .cat-tekens { margin-left: 6px; }

/* De exemplarenlijst is ook een keuzelijst: je reserveert een specifieke
   doos, net als op de bestaande catalogus. Er staat er alvast een aan, dus
   wie geen voorkeur heeft hoeft niets te doen. */
.cat-exemplaren li label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
    margin: 0;
}
.cat-exemplaren li input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--lth-blauw);
    flex: none;
    margin: 0;
}
.cat-exemplaren li:hover { background: var(--lth-vlak); }
.cat-exemplaren li:has(input:checked) strong { color: var(--lth-blauw); }

.cat-exemplaren-uitleg {
    font-size: .8rem;
    color: var(--lth-zacht);
    margin: 9px 0 0;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
   AGENDA  (/nieuw/agenda)

   De opbouw en het gedrag komen ongewijzigd uit de bestaande agenda:
   kalender links, activiteiten rechts, klikken op een dag wisselt de
   rechterkolom. Dat werkt en daar blijven we vanaf. Wat hieronder staat
   is alleen de jas.

   Drie dingen die anders zijn:

     1. De openingstijden staan er los bovenaan. Ze stonden alleen in de
        kalender, als kleur, met een legenda eronder die uitlegt wat die
        kleur betekent. Dat is een omweg voor de vraag waarmee de meeste
        mensen deze pagina openen.

     2. Open is groen in plaats van blauw. Blauw is op deze site de kleur
        van links en knoppen; een blauw vlak leest als "hier kun je iets".
        Bovendien wás de dagkop rechts al groen bij een open dag — de
        kalender zei dus iets anders dan de kaart ernaast.

     3. Eén gele lijn boven elke kaart, net als elders in dit voorstel.
        De kleur zit in de accenten: het dagnummer, de stippen, de
        randjes.

   Alles is gescoped onder .ag-vlak, zodat de live agenda hier niets van
   merkt als beide stylesheets ooit naast elkaar staan.
   ══════════════════════════════════════════════════════════════════════ */

/* ── De openingstijden bovenaan ──
   Vier blokjes naast elkaar. Geen tabel: een tabel met twee kolommen en
   vier rijen leest langzamer dan vier los leesbare eenheden. */
.ag-tijden {
    background: #fff;
    border-bottom: 1px solid var(--lth-lijn);
    padding: 26px 40px 28px;
}
.ag-tijden-binnen { max-width: 1120px; margin: 0 auto; }

.ag-tijden-kop {
    margin: 0 0 16px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lth-zacht);
}

.ag-tijden-rij {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.ag-tijden-rij li {
    border-left: 4px solid var(--lth-k4);
    padding: 4px 0 4px 14px;
}
.ag-tijden-rij li:nth-child(2) { border-left-color: var(--lth-k3); }
.ag-tijden-rij li:nth-child(3) { border-left-color: var(--lth-k1); }
.ag-tijden-rij li:nth-child(4) { border-left-color: var(--lth-k2); }

.ag-tijden-rij strong {
    display: block;
    font-size: 1.02rem;
    color: var(--lth-inkt);
    font-weight: 700;
}
.ag-tijden-rij span {
    display: block;
    font-size: 1.02rem;
    color: var(--lth-tekst);
    font-variant-numeric: tabular-nums;
}
.ag-tijden-rij em {
    display: block;
    font-style: normal;
    font-size: .82rem;
    color: var(--lth-zacht);
    margin-top: 2px;
}

.ag-tijden-voet {
    margin: 18px 0 0;
    font-size: .92rem;
    color: var(--lth-zacht);
}

/* ── Het vlak met kalender en lijst ── */
.ag-blok { padding-top: 48px; padding-bottom: 56px; }
.ag-vlak { max-width: 1160px; }

/* De kopbalk boven beide kolommen. Zelfde regel, nieuwe letter. */
.ag-vlak .agenda-kop {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lth-zacht);
}

.ag-vlak .agenda-terug {
    border-radius: 999px;
    border-color: var(--lth-lijn);
    color: var(--lth-blauw);
    font-weight: 700;
}

/* ── De kalender als kaart ── */
.ag-vlak .calendar-container {
    border-radius: 16px;
    border-top: 4px solid var(--lth-k2);
    padding: 18px 18px 20px;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .07);
}

.ag-vlak .calendar-header {
    border-bottom: 1px solid var(--lth-lijn);
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.ag-vlak .calendar-header h3 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--lth-inkt);
}
.ag-vlak .calendar-header button {
    border-radius: 999px;
    border-color: var(--lth-lijn);
    padding: 5px 12px;
}
.ag-vlak .calendar-header button:hover {
    background: var(--lth-vlak);
    border-color: #c8d4e2;
}

.ag-vlak .day-name { color: var(--lth-zacht); }

/* Iets hogere cellen: met 44 pixels stonden het getal en de stippen op
   elkaar geperst. */
.ag-vlak .calendar-dates { grid-auto-rows: 48px; }
.ag-vlak .calendar-date {
    border-radius: 9px;
    min-height: 48px;
    border-color: #eef0f3;
}
.ag-vlak .calendar-date .date-number { font-size: .95rem; }

/* Open is groen. Zie de toelichting bovenaan dit blok. */
.ag-vlak .calendar-date.opening-day {
    background: #f1faf4;
    border-color: #c9e9d6;
}
.ag-vlak .calendar-date.opening-day:hover {
    background: #e6f6ec;
    border-color: #9fd8b6;
}
.ag-vlak .calendar-date.opening-day .date-number {
    color: #146c38;
    font-weight: 700;
}
.ag-vlak .calendar-date.has-event.opening-day { background: #f1faf4; }

.ag-vlak .calendar-date.closed-day {
    background: #fdf3f3;
    border-color: #f2cccc;
}

/* Een dag die normaal open is maar bij uitzondering dicht. Zonder eigen
   markering staat die in dezelfde zachtrode tint als elke dinsdag, en dan
   valt juist het bijzondere niet op. Vandaar een duidelijke rand en een
   schuine arcering; de reden staat in de tooltip en in de dagkaart. */
.ag-vlak .calendar-date.afwijkend-dicht {
    border-color: var(--lth-rood);
    border-width: 2px;
    cursor: help;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(227, 0, 11, .07) 0 5px,
        transparent 5px 10px
    );
}
.ag-vlak .calendar-date.afwijkend-dicht .date-number { font-weight: 700; }

/* Vandaag: gele ring, geen geel vlak. Die staat al in styles.css; hier
   alleen de hoek meebuigen met de nieuwe radius. */
.ag-vlak .calendar-date.today { border-radius: 9px; }

.ag-vlak .calendar-date.gekozen {
    border-color: var(--lth-k3);
    box-shadow: 0 0 0 2px rgba(0, 87, 166, .2);
}

.ag-vlak .dag-stippen i { background: var(--lth-k1); }

/* De legenda moet hetzelfde zeggen als de kalender, dus het vakje voor
   "open" wordt hier ook groen. */
.ag-vlak .kalender-legenda {
    border-top-color: var(--lth-lijn);
    color: var(--lth-zacht);
}
.ag-vlak .kalender-legenda .vak.open  { background: #f1faf4; border-color: #c9e9d6; }
.ag-vlak .kalender-legenda .vak.dicht { background: #fdf3f3; border-color: #f2cccc; }
.ag-vlak .kalender-hint { color: var(--lth-zacht); }

/* ── De activiteiten rechts ── */
.ag-vlak .agenda-dag {
    border-radius: 16px;
    border-top: 4px solid var(--lth-k2);
    box-shadow: 0 6px 22px rgba(16, 24, 40, .07);
    margin-bottom: 14px;
}

.ag-vlak .agenda-dagkop {
    padding: 13px 16px;
    border-bottom-color: var(--lth-lijn);
}
.ag-vlak .agenda-dagkop strong { font-size: 1rem; color: var(--lth-inkt); }
.ag-vlak .agenda-dagkop em { color: var(--lth-zacht); }
.ag-vlak .agenda-dagnr { border-radius: 10px; background: var(--lth-k3); }

.ag-vlak .agenda-titel { color: var(--lth-inkt); }
.ag-vlak .agenda-rij { padding: 13px 16px; }
.ag-vlak .agenda-rij:hover:not([disabled]) { background: var(--lth-vlak); }
.ag-vlak .agenda-item { border-top-color: var(--lth-lijn); }
.ag-vlak .agenda-regels { color: var(--lth-zacht); }

.ag-vlak .agenda-knop {
    border-radius: 999px;
    background: var(--lth-k3);
}
.ag-vlak .agenda-knop:hover { background: var(--lth-k1); }

.ag-vlak .agenda-leeg,
.ag-vlak .agenda-laden {
    background: #fff;
    border-radius: 16px;
    border-top: 4px solid var(--lth-k2);
    box-shadow: 0 6px 22px rgba(16, 24, 40, .07);
    padding: 22px 20px;
    text-align: left;
}

.ag-vlak .agenda-meer {
    font-size: .9rem;
    color: var(--lth-zacht);
    margin: 4px 2px 0;
}

/* ── Telefoon ── */
@media (max-width: 900px) {
    .ag-tijden { padding: 22px 18px 24px; }
    .ag-blok { padding-left: 18px; padding-right: 18px; }
    .ag-tijden-rij { gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   INFORMATIE  (/nieuw/informatie)

   Met de huidige pagina is inhoudelijk niets mis; de vorm is het
   probleem. Zevenentwintig kaartjes van gelijke grootte onder elkaar,
   elk met een emoji als kop. Alles roept even hard, dus er valt niets
   op, en de belangrijkste vraag — "hoe gaat dat hier eigenlijk?" —
   staat tussen de regel over treinwissels en die over dekselklemmen in.

   Drie ingrepen:

     1. Bovenaan drie stappen. Dat is het antwoord voor negen van de
        tien bezoekers; de rest van de pagina is de uitleg erbij.

     2. De tien huishoudelijke regels zitten in uitklappers. Wie de
        regel over batterijen zoekt vindt hem in één regel tekst in
        plaats van na tien alinea's scrollen — en wie hem niet zoekt
        heeft er geen last van. <details> regelt dat zelf, dus het
        werkt ook zonder javascript.

     3. De tarieventabel gebruikt hetzelfde maatteken als de catalogus.
        Zo staat in de tabel hetzelfde blokje als op de setkaart, en
        hoef je de twee niet met elkaar te rijmen.
   ══════════════════════════════════════════════════════════════════════ */

/* ── De balk met snelkoppelingen ──
   Zelfde principe als de filterbalk in de catalogus: blijft staan, want
   dit is een lange pagina. */
.inf-balk {
    position: sticky;
    top: var(--kop-hoogte, 120px);     /* zie de toelichting bij .cat-balk */
    z-index: 40;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--lth-lijn);
    padding: 10px 40px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.inf-balk::-webkit-scrollbar { display: none; }

.inf-balk-binnen {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.inf-balk-binnen a {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--lth-tekst);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.inf-balk-binnen a:hover {
    background: var(--lth-vlak);
    border-color: var(--lth-lijn);
}

/* Waar je nu bent. Geel, want dat is op deze site de kleur die "hier"
   zegt zonder dat het een knop lijkt. */
.inf-balk-binnen a.hier {
    background: var(--lth-k2);
    color: #4a3b00;
    border-color: #e8c200;
}

/* Springen naar een onderwerp: de kop moet niet onder de balk verdwijnen. */
/* Springen naar een onderwerp: de kop en de balk mogen er niet overheen vallen. */
.lth-blok[id] { scroll-margin-top: calc(var(--kop-hoogte, 120px) + 58px); }

/* ── De tarieventabel ── */
.inf-tarief {
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-top: 4px solid var(--lth-k2);
    border-radius: 14px;
    padding: 10px 24px 20px;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .06);
}

.inf-tarief table {
    width: 100%;
    border-collapse: collapse;
}

.inf-tarief th {
    text-align: left;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lth-zacht);
    padding: 12px 8px 10px;
    border-bottom: 1px solid var(--lth-lijn);
}

.inf-tarief td {
    padding: 11px 8px;
    border-bottom: 1px solid var(--lth-lijn);
    color: var(--lth-tekst);
    font-size: 1rem;
    vertical-align: middle;
}
.inf-tarief tr:last-child td { border-bottom: 0; }

.inf-tarief .rechts {
    text-align: right;
    font-weight: 700;
    color: var(--lth-inkt);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Het maatteken uit de catalogus is hier iets groter: in een tabel heb
   je de ruimte, en dan is het verschil tussen XS en XXL ook echt te
   zien. */
.inf-tarief .cat-maat {
    font-size: .84rem;
    padding: 3px 9px 3px 6px;
    color: var(--lth-inkt);
}
.inf-tarief .cat-maat i { width: 11px; }

.inf-tarief-voet {
    font-size: .9rem !important;
    color: var(--lth-zacht) !important;
    margin: 16px 0 0;
    line-height: 1.6 !important;
}

/* ── Openingstijden en reserveren naast elkaar ── */
.inf-duo {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.inf-kaart {
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-top: 4px solid var(--lth-k2);
    border-radius: 14px;
    padding: 22px 24px 24px;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .06);
}
.inf-kaart h3 {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lth-zacht);
    margin: 0 0 16px;
}

/* De openingstijden staan hier onder elkaar in plaats van naast elkaar:
   in een kolom van 360 pixels passen vier blokken niet naast elkaar. */
.inf-tijden { grid-template-columns: 1fr; gap: 12px; }

.inf-kaart-voet {
    margin: 18px 0 0 !important;
    font-size: .9rem !important;
    color: var(--lth-zacht) !important;
    line-height: 1.6 !important;
}

@media (max-width: 900px) {
    .inf-duo { grid-template-columns: 1fr; }
}

/* ── De uitklappers met de regels ── */
.inf-vouwlijst {
    max-width: 840px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-top: 4px solid var(--lth-k2);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .06);
}

.inf-vouw + .inf-vouw { border-top: 1px solid var(--lth-lijn); }

.inf-vouw summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 22px 15px 46px;
    position: relative;
    font-weight: 700;
    color: var(--lth-inkt);
    font-size: 1.02rem;
    transition: background .12s;
}
.inf-vouw summary::-webkit-details-marker { display: none; }
.inf-vouw summary:hover { background: var(--lth-vlak); }
.inf-vouw summary:focus-visible {
    outline: 2px solid rgba(0, 87, 166, .4);
    outline-offset: -2px;
}

/* Een eigen plusje, want het driehoekje van de browser verschilt per
   browser en staat te dicht op de tekst. */
.inf-vouw summary::before,
.inf-vouw summary::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    background: var(--lth-k3);
    border-radius: 1px;
    transition: transform .2s;
}
.inf-vouw summary::before {
    width: 13px; height: 2px;
    margin-top: -1px;
}
.inf-vouw summary::after {
    width: 2px; height: 13px;
    margin: -6px 0 0 5.5px;
}
.inf-vouw[open] summary::after { transform: rotate(90deg); }
.inf-vouw[open] summary { color: var(--lth-k3); }

.inf-vouw-tekst { padding: 0 22px 20px 46px; }
.inf-vouw-tekst p {
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--lth-tekst);
}
.inf-vouw-tekst p:last-child,
.inf-vouw-tekst ul:last-child { margin-bottom: 0; }
.inf-vouw-tekst ul {
    margin: 0 0 10px;
    padding-left: 20px;
    color: var(--lth-tekst);
}
.inf-vouw-tekst li { line-height: 1.7; margin-bottom: 3px; }

/* ── De waarschuwing ──
   Bewust géén uitklapper: deze moet gelezen worden zonder dat iemand
   ernaar zoekt. */
.inf-let-op {
    max-width: 840px;
    margin: 22px auto 0;
    background: #fff5f5;
    border: 1px solid #f3cccc;
    border-left: 5px solid var(--lth-k1);
    border-radius: 12px;
    padding: 16px 20px;
    font-size: .98rem;
    line-height: 1.65;
    color: var(--lth-tekst);
}
.inf-let-op strong { color: #a02020; }

/* ── Aanmelden online ──
   Staat standaard uit en gaat alleen aan als de schakelaar in het CMS
   aanstaat; het script onderaan de pagina regelt dat. Zonder deze twee
   regels zouden de links altijd zichtbaar zijn. */
.alleen-bij-online-aanmelden { display: none; }
.alleen-bij-online-aanmelden.zichtbaar { display: block; }

/* ── Telefoon ── */
@media (max-width: 900px) {
    .inf-balk { padding: 8px 14px; }
    .inf-tarief { padding: 6px 14px 16px; }
    .inf-tarief td:nth-child(2),
    .inf-tarief th:nth-child(2) { display: none; }   /* de omschrijving mag weg */
    .inf-vouw summary { padding: 14px 16px 14px 42px; }
    .inf-vouw-tekst { padding: 0 16px 18px 42px; }
}

/* ── Een foto als volle kolom naast een lang blok ──────────────────────
   De tarieventabel en de uitleenregels zijn allebei smal; daarnaast
   blijft een halve pagina wit over. Daar staat een foto.

   Eerst was dat een foto die meeliep tijdens het scrollen (position:
   sticky). Dat werkte technisch, maar niet in de praktijk: met alle
   uitklappers dicht is het blok ernaast maar zeshonderd pixels hoog en
   de foto vierhonderdvijftig. Er bleef dus anderhalve regel speling
   over voordat de foto alsnog meeschoof — precies het geschuif dat
   sticky had moeten voorkomen.

   Nu is de foto de kolom: hij is exact even hoog als het blok ernaast
   en beweegt dus nergens ten opzichte daarvan. object-fit: cover snijdt
   bij in plaats van uit te rekken, dus hij past bij elke hoogte. Klap
   je de regels open, dan groeit de foto gewoon mee. */
.inf-naast {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 36px;
    align-items: stretch;
}
.inf-naast > figure { margin: 0; }

.inf-naast img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
}

/* Binnen deze indeling hoeven de blokken zichzelf niet meer te
   centreren; de kolom bepaalt waar ze staan. */
.inf-naast .inf-tarief,
.inf-naast .inf-vouwlijst,
.inf-naast .inf-let-op { max-width: none; margin-left: 0; margin-right: 0; }

@media (max-width: 900px) {
    .inf-naast { grid-template-columns: 1fr; gap: 24px; }
    /* Onder elkaar is "even hoog als de buurman" betekenisloos; dan weer
       gewoon de eigen verhouding van de foto. */
    .inf-naast > figure { max-width: 320px; margin: 0 auto; }
    .inf-naast img { height: auto; }
}

/* ── De twee kaarten onderaan Over ons ──
   Zelfde behandeling als de waardenkaarten: gewone rand, geen dikke
   gekleurde streep meer, en de kop met een streepje in plaats van een
   kleurvlak. */
.lth-kaart {
    border-radius: 14px;
    border-color: var(--lth-lijn);
}

/* ══════════════════════════════════════════════════════════════════════
   DE SPONSOREN OP DE HOMEPAGE

   Elf logo's naast elkaar zijn elf lettertypes, elf kleurstellingen en
   elf verhoudingen. Op een rij zonder verdere opmaak wordt dat een
   allegaartje dat harder roept dan de rest van de pagina — precies het
   omgekeerde van wat een rustige bedankregel hoort te doen.

   Daarom: witte tegels van gelijke hoogte, het logo gecentreerd en op
   hoogte begrensd in plaats van op breedte. Een breed logo mag breder
   zijn dan een vierkant, maar geen enkel logo wordt hoger dan de rest.
   Dat is wat de rij rustig maakt: één gedeelde hoogte.

   Geen grijstinten. Dat is een bekende truc om zo'n rij rustig te
   krijgen, maar het maakt van een huisstijl waar iemand voor betaald
   heeft een grijze vlek.
   ══════════════════════════════════════════════════════════════════════ */
.lth-sponsors { padding-top: 44px; padding-bottom: 46px; }

.lth-sponsors-kop {
    text-align: center;
    font-size: .8rem !important;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lth-zacht) !important;
    margin: 0 0 26px;
}

.lth-sponsors-rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.lth-sponsor {
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-radius: 12px;
    height: 92px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.lth-sponsor:hover {
    border-color: #d5dbe4;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
}

.lth-sponsor img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Valt het logo weg, dan de naam. Een gebroken plaatje op de plek van je
   eigen sponsor is erger dan geen plaatje. */
.lth-sponsor-naam {
    font-size: .95rem;
    font-weight: 700;
    color: var(--lth-tekst);
    text-align: center;
    line-height: 1.3;
}

.lth-sponsors-voet {
    text-align: center;
    margin: 26px 0 0;
    font-size: .95rem !important;
    color: var(--lth-zacht) !important;
}
.lth-sponsors-voet a { color: var(--lth-blauw); font-weight: 700; text-decoration: none; }
.lth-sponsors-voet a:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .lth-sponsors-rij { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .lth-sponsor { height: 78px; padding: 12px 14px; }
}

/* ── De afsluiting van de informatiepagina ─────────────────────────────
   Hier stond een foto naast de tekst. Die is eruit: drie foto's op één
   pagina is genoeg, en een vierde vlak boven de voet voegde niets toe.

   Zonder foto hoort de tekst niet over de volle breedte uit te lopen —
   dan haalt een regel honderdveertig tekens. En zonder iets ernaast is
   er ook geen reden meer om links te blijven staan: als laatste blok
   van de pagina staat hij gecentreerd, net als de sectiekoppen. */
.inf-slot {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.inf-slot .lth-knoprij { justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════
   DE ZWEVENDE KNOPPEN RECHTS

   Overgenomen uit index.php van de live site. Daar stonden ze in een
   <style>-blok op elke pagina apart; hier één keer, zodat de knoppen op
   alle pagina's van het voorstel hetzelfde zijn.

   De markup zit in zweefknoppen.php.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Ledenportaal ── */
.floating-portal-btn {
    position: fixed;
    right: 20px;
    top: 130px;
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: #fff;
    padding: 12px;
    border-radius: 50px 0 0 50px;
    box-shadow: -3px 3px 12px rgba(0, 102, 204, .32);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all .35s cubic-bezier(.22, .8, .3, 1);
    z-index: 9999;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid #fff;
    overflow: hidden;
    max-width: 48px;
}
.floating-portal-btn:hover {
    max-width: 200px;
    padding-right: 18px;
    transform: translateX(-4px);
    box-shadow: -6px 6px 20px rgba(0, 102, 204, .42);
}

/* ── Word lid ──
   Zelfde vorm, in het rood van de huisstijl en een stukje lager zodat de
   twee elkaar niet raken.

   Staat standaard op display:none en gaat pas aan als de schakelaar in
   het CMS aanstaat. Zo flitst hij niet even in beeld voordat die
   instelling binnen is. */
.floating-lid-btn {
    display: none;
    position: fixed;
    right: 20px;
    top: 190px;
    background: linear-gradient(135deg, #e3000b 0%, #b8000a 100%);
    color: #fff;
    padding: 12px;
    border-radius: 50px 0 0 50px;
    box-shadow: -3px 3px 12px rgba(227, 0, 11, .32);
    text-decoration: none;
    align-items: center;
    gap: 10px;
    transition: all .35s cubic-bezier(.22, .8, .3, 1);
    z-index: 9999;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    border: 2px solid #fff;
    overflow: hidden;
    max-width: 48px;
}
.floating-lid-btn.zichtbaar { display: flex; }
.floating-lid-btn:hover {
    max-width: 200px;
    padding-right: 18px;
    transform: translateX(-4px);
    box-shadow: -6px 6px 20px rgba(227, 0, 11, .42);
    background: linear-gradient(135deg, #ff1a26 0%, #e3000b 100%);
}

.portal-icon,
.lid-icon { width: 20px; height: 20px; flex: none; display: block; }

.portal-text,
.lid-text { white-space: nowrap; opacity: 0; transition: opacity .3s ease .1s; }

.floating-portal-btn:hover .portal-text,
.floating-lid-btn:hover .lid-text { opacity: 1; }

/* ── Telefoon ──
   Onderin in plaats van rechtsboven, want daar zit op een telefoon de
   duim en niet het menu. */
@media (max-width: 800px) {
    .floating-portal-btn,
    .floating-lid-btn {
        right: 15px;
        top: auto;
        border-radius: 36px;
        padding: 4px 13px;
        max-width: none;
        font-size: 10px;
    }
    .floating-portal-btn { bottom: 80px; }
    .floating-lid-btn    { bottom: 120px; }

    .floating-portal-btn:hover,
    .floating-lid-btn:hover { transform: translateY(-5px); padding: 4px 13px; }

    .portal-icon, .lid-icon { width: 15px; height: 15px; }
    .portal-text, .lid-text { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   DONATIES, SPONSORING EN VRIJWILLIGERS

   Drie pagina's die hetzelfde vragen: doe mee. Ze delen daarom dezelfde
   onderdelen — een melding bovenaan, kaarten met iconen, en onderaan een
   formulier.
   ══════════════════════════════════════════════════════════════════════ */

/* ── De melding bovenaan ──
   Eén zin die de belangrijkste drempel wegneemt: "je hoeft niets te
   regelen", "je hoeft geen expert te zijn". Stond op beide pagina's
   halverwege, in een gekleurd vlak met witte tekst. Hier bovenaan, op
   een lichte ondergrond, want deze zin moet gelezen worden en niet
   opvallen. */
.lth-melding {
    background: #fffdf6;
    border-bottom: 1px solid var(--lth-lijn);
    padding: 22px 40px;
}
.lth-melding-binnen {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-size: 1.04rem;
    line-height: 1.65;
    color: var(--lth-tekst);
}
.lth-melding-binnen strong { color: var(--lth-inkt); }
.lth-melding .teken {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(214, 168, 0, .16);
    color: #a37f00;
}

/* ── Vier stappen in plaats van drie ──
   .lth-stappen kleurt de bolletjes 1, 2 en 3. Bij vier stappen blijft de
   vierde anders grijs. */
.lth-stappen.vier { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }
.lth-stappen.vier .lth-stap:nth-child(4) .lth-nr { background: var(--lth-k3); }

/* ══════════════════════════════════════════════════════════════════════
   FORMULIEREN

   De klassen (.form-section, .form-row, .form-group, .submit-btn) komen
   uit css/styles.css en blijven staan: de afhandeling in js/main.js leest
   het formulier via FormData, dus aan de namen en de opbouw verandert
   niets. Alleen het uiterlijk is hier bijgewerkt, zodat een invoerveld
   dezelfde rand en dezelfde hoeken heeft als de rest van het voorstel.
   ══════════════════════════════════════════════════════════════════════ */
.lth-formulier {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-top: 4px solid var(--lth-k2);
    border-radius: 14px;
    padding: 28px 30px 30px;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .06);
}

.lth-formulier .form-section {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
}

.lth-formulier .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 18px;
}

.lth-formulier .form-group { margin-bottom: 18px; }

.lth-formulier label {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--lth-inkt);
    margin-bottom: 6px;
}

.lth-formulier input[type="text"],
.lth-formulier input[type="email"],
.lth-formulier input[type="tel"],
.lth-formulier input[type="number"],
.lth-formulier select,
.lth-formulier textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--lth-lijn);
    border-radius: 9px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--lth-inkt);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.lth-formulier textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.lth-formulier input:focus,
.lth-formulier select:focus,
.lth-formulier textarea:focus {
    outline: none;
    border-color: var(--lth-k3);
    box-shadow: 0 0 0 3px rgba(0, 87, 166, .12);
}

/* ── Aankruisvakjes en keuzerondjes ──
   Op de live pagina's stonden hier !important-regels achteraan elke
   stijl, omdat een globale regel alle labels op display:block zette en
   het vakje dan boven de tekst belandde. Met een eigen klasse is dat
   niet meer nodig. */
.lth-vink {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500 !important;
    font-size: .98rem !important;
    line-height: 1.55;
    color: var(--lth-tekst) !important;
    cursor: pointer;
    margin-bottom: 0 !important;
}
.lth-vink input {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--lth-k3);
    cursor: pointer;
}
.lth-vink span { display: block; }

.lth-formulier .checkbox-group,
.lth-formulier .radio-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Het uitklapblok bij Brick Friend. */
.lth-uitklap {
    background: var(--lth-vlak);
    border: 1px solid var(--lth-lijn);
    border-left: 4px solid var(--lth-k2);
    border-radius: 11px;
    padding: 16px 18px;
}
.lth-uitklap h4 { font-size: 1rem; color: var(--lth-inkt); margin: 0 0 4px; }
.lth-uitklap > p { font-size: .94rem; color: var(--lth-tekst); margin: 0 0 11px; }

.lth-formulier .submit-btn {
    width: 100%;
    margin-top: 6px;
    padding: 14px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--lth-k3);
    color: #fff;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.lth-formulier .submit-btn:hover { background: var(--lth-k1); transform: translateY(-1px); }

@media (max-width: 700px) {
    .lth-melding { padding: 18px 18px; }
    .lth-formulier { padding: 20px 18px 22px; }
}

/* ══════════════════════════════════════════════════════════════════════
   DE SPONSORPAKKETTEN

   Eerst vijf kaarten naast elkaar. Dat ging op twee manieren mis: bij de
   meeste schermbreedtes passen er vier naast elkaar en staat de vijfde
   alleen op een tweede rij, en omdat elk pakket alles van het vorige
   bevat liepen de hoogtes van vier naar elf regels op. Een rij kaarten
   van 400 tot 1100 pixels hoog leest niet als een reeks.

   Nu een tabel: de pakketten bovenaan, de onderdelen ernaast. Daarmee
   verdwijnt het hoogteverschil (elke rij is één regel) én zie je per
   onderdeel meteen vanaf welk pakket je het krijgt. Dat is precies de
   vraag die iemand hier heeft.
   ══════════════════════════════════════════════════════════════════════ */
.spo-tabel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .06);
}

.spo-tabel table {
    width: 100%;
    min-width: 760px;              /* smaller wordt het onleesbaar; dan schuiven */
    border-collapse: collapse;
}

/* ── De kop met de pakketten ── */
.spo-tabel thead th {
    vertical-align: bottom;
    text-align: center;
    padding: 20px 14px 16px;
    border-bottom: 2px solid var(--lth-lijn);
    font-weight: 700;
}
.spo-hoek { border-bottom: 2px solid var(--lth-lijn); }

.spo-naam {
    display: block;
    font-size: .95rem;
    color: var(--lth-inkt);
    line-height: 1.25;
    margin-bottom: 7px;
}
.spo-prijs {
    display: block;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--lth-k3);
    white-space: nowrap;
}

/* Het duurste pakket krijgt een gele kolom. Eén accent is genoeg om te
   zien welke het is; een schuin lint of een tweede kleur zou met de
   vinkjes gaan concurreren. */
.spo-tabel thead th.uitgelicht {
    background: #fffdf0;
    border-bottom-color: var(--lth-k2);
    border-radius: 10px 10px 0 0;
}
.spo-tabel thead th.uitgelicht .spo-prijs { color: #a37f00; }
.spo-tabel td.uitgelicht { background: #fffdf0; }
.spo-tabel tbody tr:last-child td.uitgelicht { border-radius: 0 0 10px 10px; }

/* ── De regels ── */
.spo-tabel tbody th {
    text-align: left;
    font-weight: 600;
    font-size: .95rem;
    color: var(--lth-inkt);
    padding: 12px 18px 12px 22px;
    border-top: 1px solid var(--lth-lijn);
    line-height: 1.45;
    min-width: 230px;
}
.spo-tabel tbody td {
    text-align: center;
    padding: 12px 14px;
    border-top: 1px solid var(--lth-lijn);
    font-size: .9rem;
    color: var(--lth-tekst);
    line-height: 1.4;
}
.spo-tabel tbody tr:hover th,
.spo-tabel tbody tr:hover td { background: var(--lth-vlak); }
.spo-tabel tbody tr:hover td.uitgelicht { background: #fffaea; }

/* Het vinkje getekend met twee lijntjes: geen emoji, en geen extra
   icoon dat ingeladen moet worden. */
.spo-ja {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
}
.spo-ja::before,
.spo-ja::after {
    content: '';
    position: absolute;
    background: var(--lth-k4);
    border-radius: 1px;
}
.spo-ja::before { left: 0; top: 8px;  width: 6px;  height: 2px; transform: rotate(45deg); }
.spo-ja::after  { left: 3px; top: 7px; width: 12px; height: 2px; transform: rotate(-50deg); }

.spo-nee { color: #cbd2dc; }

.spo-schuif {
    display: none;
    text-align: center;
    font-size: .86rem !important;
    color: var(--lth-zacht) !important;
    margin: 11px 0 0 !important;
}

.spo-maatwerk {
    max-width: 640px;
    margin: 28px auto 0 !important;
    text-align: center;
    color: var(--lth-zacht) !important;
    font-size: .96rem !important;
}

@media (max-width: 860px) {
    /* Onder deze breedte past de tabel niet meer; dan schuift hij opzij
       en zegt een regeltje eronder dat dat kan. */
    .spo-schuif { display: block; }
    .spo-tabel tbody th { min-width: 190px; padding-left: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   DE VRIJWILLIGERSROLLEN

   Zes kaarten met dezelfde indeling: wat je doet, hoeveel tijd het kost,
   en voor wie het past. Op de huidige pagina staan die drie dingen als
   drie alinea's met een vetgedrukte aanhef, en dan moet je per kaart
   opnieuw zoeken waar de tijdsinvestering staat.
   ══════════════════════════════════════════════════════════════════════ */
.vrw-rollen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.vrw-rol {
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-radius: 14px;
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
}
.vrw-rol .teken {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(227, 30, 36, .09);
    color: var(--lth-k1);
    margin-bottom: 13px;
}
.vrw-rol:nth-child(4n+2) .teken { background: rgba(0, 87, 166, .09);  color: var(--lth-k3); }
.vrw-rol:nth-child(4n+3) .teken { background: rgba(214, 168, 0, .16); color: #a37f00; }
.vrw-rol:nth-child(4n+4) .teken { background: rgba(0, 135, 61, .09);  color: var(--lth-k4); }

.vrw-rol h3 { font-size: 1.1rem; color: var(--lth-inkt); margin: 0 0 7px; }
.vrw-rol > p { font-size: 1rem !important; line-height: 1.6 !important; margin: 0 0 16px; }

/* De twee vaste regels onderaan elke kaart, op dezelfde hoogte door
   margin-top:auto. Zo staan ze ook gelijk als de omschrijving erboven
   één regel langer is. */
.vrw-rol dl {
    margin: auto 0 0;
    padding-top: 15px;
    border-top: 1px solid var(--lth-lijn);
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    gap: 5px 12px;
    font-size: .92rem;
    line-height: 1.5;
}
.vrw-rol dt { color: var(--lth-zacht); font-weight: 700; }
.vrw-rol dd { margin: 0; color: var(--lth-tekst); }

/* ── Wat we zoeken ── */
.vrw-zoeken {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
.vrw-lijst {
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-radius: 14px;
    padding: 22px 26px 24px;
}
/* Het linkerrijtje telt echt; het rechter is meegenomen. Dat verschil
   staat in de tekst boven het blok, en hier in één gekleurde rand. */
.vrw-lijst.belangrijk { border-top: 4px solid var(--lth-k4); }

.vrw-lijst h3 {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lth-zacht);
    margin: 0 0 14px;
}
.vrw-lijst ul { list-style: none; margin: 0; padding: 0; }
.vrw-lijst li {
    padding: 8px 0;
    border-top: 1px solid var(--lth-lijn);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--lth-tekst);
}
.vrw-lijst li:first-child { border-top: 0; padding-top: 0; }

/* ══════════════════════════════════════════════════════════════════════
   CONTACT

   Adres en openingstijden links, de kaart rechts. Het blauwe verloopblok
   met witte tekst is een gewone kaart geworden: wit op blauw leest
   slechter, en een adres hoort geen aandacht te vragen — je zoekt het op
   en dan is het klaar.
   ══════════════════════════════════════════════════════════════════════ */
.con-duo {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.con-kaart {
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-top: 4px solid var(--lth-k2);
    border-radius: 14px;
    padding: 24px 26px 26px;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .06);
}
.con-kaart h3 {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lth-zacht);
    margin: 26px 0 12px;
}
.con-kaart h3:first-child { margin-top: 0; }
.con-kaart p {
    margin: 0;
    font-size: 1.04rem !important;
    line-height: 1.65 !important;
    color: var(--lth-tekst);
}
.con-los { margin-top: 10px !important; font-size: .95rem !important; }
.con-los a { color: var(--lth-blauw); font-weight: 600; text-decoration: none; }
.con-los a:hover { text-decoration: underline; }

.con-sociaal { display: flex; flex-wrap: wrap; gap: 8px; }
.con-sociaal a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--lth-lijn);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--lth-tekst);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.con-sociaal a:hover { border-color: var(--lth-k3); color: var(--lth-k3); }

/* Het vlak voor de kaart van Google. De inhoud ervan komt uit
   js/cookie-consent.js en blijft precies zoals hij is: de kaart wordt
   pas geladen als de bezoeker daarom vraagt. */
.con-kaartvlak {
    background: var(--lth-vlak);
    border: 1px solid var(--lth-lijn);
    border-radius: 14px;
    overflow: hidden;
    min-height: 420px;
    display: flex;
}
.con-kaartvlak .extern-vak,
.con-kaartvlak iframe { width: 100%; height: 100%; min-height: 420px; border: 0; }
.con-kaartvlak .extern-vak {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 32px;
    text-align: center;
}

.con-anders {
    max-width: 680px;
    margin: 24px auto 0 !important;
    text-align: center;
    font-size: .96rem !important;
    color: var(--lth-zacht) !important;
}
.con-anders a { color: var(--lth-blauw); font-weight: 600; text-decoration: none; }
.con-anders a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .con-duo { grid-template-columns: 1fr; }
    .con-kaartvlak { min-height: 320px; }
    .con-kaartvlak .extern-vak,
    .con-kaartvlak iframe { min-height: 320px; }
}

/* ══════════════════════════════════════════════════════════════════════
   FUN

   Vijf spelletjes achter vijf knoppen. De knoppen waren grijze blokjes
   met een verloop en een emoji ervoor, en het actieve spel was blauw.
   Hier pillen in de kleuren van het logo: welk spel aanstaat zie je aan
   de kleur, en de rest staat rustig.
   ══════════════════════════════════════════════════════════════════════ */
.fun-kiezer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.fun-knop {
    padding: 9px 20px;
    border: 1.5px solid var(--lth-lijn);
    border-radius: 999px;
    background: #fff;
    color: var(--lth-tekst);
    font-family: inherit;
    font-size: .96rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.fun-knop:hover { border-color: #c8d4e2; transform: translateY(-1px); }

/* Elk spel zijn eigen kleur zodra hij aanstaat, in de volgorde van het
   logo. Niet omdat de kleur iets betekent, maar omdat vijf keer hetzelfde
   blauw er één blok van maakt. */
.fun-knop.aan { color: #fff; border-color: transparent; }
.fun-knop:nth-child(1).aan { background: var(--lth-k1); }
.fun-knop:nth-child(2).aan { background: var(--lth-k3); }
.fun-knop:nth-child(3).aan { background: var(--lth-k4); }
.fun-knop:nth-child(4).aan { background: var(--lth-k5); }
.fun-knop:nth-child(5).aan { background: var(--lth-k2); color: #4a3b00; }

.fun-uitleg {
    text-align: center;
    margin: 16px 0 22px !important;
    font-size: .95rem !important;
    color: var(--lth-zacht) !important;
}

.fun-venster {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .07);
}
.fun-venster iframe {
    width: 100%;
    height: 640px;
    border: 0;
    border-radius: 9px;
    display: block;
}

@media (max-width: 768px) {
    .fun-venster iframe { height: 380px; }
    .fun-knop { padding: 8px 15px; font-size: .9rem; }
}

/* ── De publicaties op Over ons ────────────────────────────────────────
   Komen uit het CMS. Op de live pagina staat elk document in een kaart
   met een rode streep links en drie regeltjes met een emoji ervoor; hier
   is het een rij met de titel links en de knop rechts. Een documentenlijst
   is een lijst, geen verzameling kaarten. */
.ovo-documenten h3 {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lth-zacht);
    margin: 30px 0 12px;
}
.ovo-documenten h3:first-child { margin-top: 0; }

.ovo-rij { display: flex; flex-direction: column; gap: 10px; }

.ovo-doc {
    background: #fff;
    border: 1px solid var(--lth-lijn);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.ovo-doc strong { display: block; color: var(--lth-inkt); font-size: 1.02rem; }
.ovo-doc p {
    margin: 4px 0 0;
    font-size: .95rem !important;
    line-height: 1.5 !important;
    color: var(--lth-tekst);
}
.ovo-bij {
    display: block;
    margin-top: 5px;
    font-size: .85rem;
    color: var(--lth-zacht);
}

.ovo-knop {
    flex: none;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--lth-k3);
    color: #fff;
    font-size: .93rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}
.ovo-knop:hover { background: var(--lth-k1); color: #fff; }

.ovo-laden { color: var(--lth-zacht) !important; }

@media (max-width: 600px) {
    .ovo-doc { flex-direction: column; align-items: flex-start; }
}

/* ── De proefbalk ──────────────────────────────────────────────────────
   Gaat weg bij oplevering. Stond als losse stijl in elk bestand, met een
   lettergrootte die meeschaalde met de basisletter van de browser — op
   een scherm met een grotere basisinstelling werd die balk dus een stuk
   hoger dan bedoeld. Nu een vaste maat, en smal. */
.proefbalk {
    background: #FFD500;
    color: #4a3b00;
    text-align: center;
    padding: 3px 16px;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 600;
    white-space: nowrap;          /* nooit een tweede regel */
    overflow: hidden;
    text-overflow: ellipsis;
}
.proefbalk a { color: #4a3b00; }


/* ── Woorden die alleen aan het einde van een regel blijven hangen ─────
   Esther wees erop dat het eerste woord van een nieuwe zin soms in zijn
   eentje aan het einde van een regel staat ("... voor alle gezinnen. Een"
   en dan pas op de volgende regel verder). Dat leest als een hapering.

   text-wrap: pretty laat de browser de laatste regels van een alinea
   opnieuw verdelen om dat soort losse woorden te voorkomen. Kent een
   browser het niet, dan breekt hij af zoals hij altijd deed: er gaat
   niets stuk, het wordt alleen niet mooier.

   Voor de hardnekkige gevallen staat er in de tekst zelf een vaste
   spatie tussen de eerste twee woorden van de zin, zodat die twee altijd
   samen opschuiven. */
.lth-waarde p,
.lth-blok p,
.vrw-rol > p,
.inf-vouw-tekst p,
.lth-verhaal p {
    text-wrap: pretty;
}
/* .lth-lead staat hier bewust niet bij: die heeft hierboven al
   text-wrap: balance, en deze regel zou daar overheen gaan omdat hij
   later in het bestand staat. */

/* ── De melding onder het aanmeldformulier ────────────────────────────
   Stond in de opmaak zelf, met inline kleuren die per geval door het
   script werden gezet. Hier twee klassen: goed of fout. */
.aan-melding {
    margin-top: 18px;
    padding: 15px 18px;
    border-radius: 11px;
    line-height: 1.65;
    font-size: 1rem;
}
.aan-melding.goed { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.aan-melding.fout { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }