/* ---------------------------------------------------------------------------
 * informatie.css — het informatieblad (templates/informatie.php), baserules 8
 *
 * WAAROM DIT BLAD ZO IS
 * ---------------------
 * De algemene voorwaarden, de privacyverklaring, de retourvoorwaarden: lange
 * teksten die niemand van voor naar achter leest. Wie hier komt zoekt één ding
 * op — 'hoe lang mag ik retourneren' — en wil weten of wat er staat nog geldt.
 *
 * Dat is precies waar de tekening van deze site voor gemaakt is. Een
 * bouwtekening is ook een blad waar je iets op opzoekt: een stempel met de
 * datum en de versie, een register in de kantlijn, genummerde onderdelen,
 * haarlijnen in plaats van kaders. Er komt hier dus geen nieuwe vormtaal bij;
 * de bestaande valt hier alleen samen met wat de pagina nodig heeft.
 *
 * VAN LICHT NAAR DONKER, zoals op de homepage, het contactblad en de bon:
 *
 *   papier   de band met de kop en het stempel — dezelfde --kleurPapier als de
 *            header en het kruimelpad, zodat de bovenkant één oppervlak is
 *   wit      het register met de tekst ernaast, en de veelgestelde vragen
 *   papier   de andere documenten, als band tegen de footer aan
 *
 * VIER DINGEN DIE HIER GEEN ELEMENT ZIJN
 * --------------------------------------
 *   1. de haarlijn tussen kantlijn en tekst — een achtergrondlaag van één
 *      pixel op het raster zelf, zodat hij over de volle hoogte van het blad
 *      loopt en niet alleen langs de kortste kolom (zoals op de productpagina
 *      en het contactblad);
 *   2. de nummers 01, 02, 03 — voor de artikelen in de tekst, in het register,
 *      in de samenvatting en in de lijst met andere documenten. Allemaal een
 *      CSS-teller, dus er valt niets te hernummeren als er een artikel
 *      tussenuit gaat;
 *   3. de streepjes van het register: één pixel aan de lijn, twee pixels en
 *      langer op de regel waar je staat. Dezelfde aanwijzer als onder het
 *      actieve menu-item en op de kassa;
 *   4. de groene voortgang over die lijn — één laag, gevoed door
 *      --infoVoortgang uit informatie.js.
 *
 * AFDRUKKEN
 * ---------
 * Onderaan dit bestand staat een @media print. Voorwaarden worden bewaard, en
 * dan hoort er geen menu, geen register en geen footer op het papier te staan
 * — wel het stempel, want dat is precies waar het bij een uitdraai om gaat.
 *
 * DE KLEUREN komen uit main.css; er staat er geen nieuwe in. Het accentgroen
 * is de kleur van nummers, streepjes en voortgang, zwart is de kleur van de
 * tekst, en rood komt op dit blad niet voor.
 *
 * Klassenamen in camelCase (baserules 2).
 * --------------------------------------------------------------------------- */

.infoBlad {
    /* De haarlijn waar alles op staat. */
    --infoLijn: 1px solid var(--kleurRand);

    /* Waar de kantlijn en een aangeklikt artikel onder uit moeten komen: de
       hele plakkende header, en dat is meer dan de hoofdbalk — de navigatiebalk
       plakt mee. Rekenen met --hoogteHeaderVast laat een kop half achter het
       menu hangen. */
    --infoPlak: calc(var(--hoogteHeaderPlak) + var(--ruimte5));

    /* De kantlijn: breed genoeg voor een artikelnaam van twee regels. */
    --infoZijBreedte: 15rem;
    --infoGoot: var(--ruimte7);
}

/* De pictogrammen. main.css tekent de set alleen in de header, de footer en de
   USP-balk; hier moet het dus opnieuw, anders vult de browser het lijnwerk op
   tot een vlek. */
.infoBlad svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Het kruimelpad staat boven de band en hoort dus bij hetzelfde papier; anders
   zit er een witte streep tussen de header en het blad. */
.kruimels {
    background: var(--kleurPapier);
}

/* --------------------------------------------------------------------------
 * De band bovenaan
 * -------------------------------------------------------------------------- */

.infoBand {
    background: var(--kleurPapier);
    border-block-end: var(--infoLijn);
}

.infoBandBinnen {
    padding-block: var(--ruimte7) var(--ruimte6);
}

/* Klein kapitaal aan een accentstreepje — hetzelfde label als op de homepage,
   de winkelvloer, het contactblad en boven een artikel. */
.infoLabel {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.infoLabel::before {
    content: '';
    width: 2.25rem;
    height: 2px;
    flex: none;
    background: var(--kleurAccent);
}

.infoTitel {
    margin-block-start: var(--ruimte4);
    max-width: 22ch;
}

.infoInleiding {
    margin-block-start: var(--ruimte4);
    max-width: var(--breedteTekst);
    font-size: 1.0625rem;
    color: var(--kleurTekstZacht);
}

.infoInleiding p + p {
    margin-block-start: var(--ruimte3);
}

/* --- het titelblok -------------------------------------------------------
 * Dezelfde cellen als boven een artikel en rechtsonder in de footer: label,
 * waarde, een haarlijn ertussen, cijfers op tabelbreedte. Bovenaan en niet
 * onderaan, want 'geldt dit nog?' is de vraag die de bezoeker heeft vóórdat
 * hij begint te lezen.
 * ------------------------------------------------------------------------- */

.infoStempel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte4) 0;
    margin: var(--ruimte6) 0 0;
    padding-block-start: var(--ruimte5);
    border-block-start: var(--infoLijn);
    width: 100%;
}

.infoCel + .infoCel {
    padding-inline-start: var(--ruimte5);
    margin-inline-start: var(--ruimte5);
    border-inline-start: var(--infoLijn);
}

.infoCelLabel {
    font-family: var(--fontKop);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

/* De marge komt van de UA-stijl voor <dd> af; daarna pas de eigen ruimte. */
.infoCelWaarde {
    margin: var(--ruimte2) 0 0;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--kleurTekstSterk);
}

/* --------------------------------------------------------------------------
 * Het raster: de kantlijn links, de tekst rechts
 *
 * De linkerkolom heeft een vaste breedte, en daarom kan de haarlijn ertussen
 * een achtergrondlaag zijn: hij staat op een af te rekenen afstand van de
 * linkerrand (de kolom plus de halve goot) in plaats van op een percentage dat
 * met de inhoud meeschuift. background-origin op content-box, want de padding
 * van het omhulsel hoort er niet bij.
 * -------------------------------------------------------------------------- */

.infoRaster {
    display: grid;
    gap: var(--ruimte6);
    padding-block: var(--ruimte6) var(--ruimte8);
}

.infoZij,
.infoKolom {
    min-width: 0;
}

@media (min-width: 64rem) {
    .infoRaster:not(.infoRasterEen) {
        grid-template-columns: var(--infoZijBreedte) minmax(0, 1fr);
        column-gap: var(--infoGoot);
        padding-block-start: var(--ruimte7);
        background-image: linear-gradient(var(--kleurRand), var(--kleurRand));
        background-origin: content-box;
        background-position: left calc(var(--infoZijBreedte) + var(--infoGoot) / 2) top;
        background-size: 1px 100%;
        background-repeat: no-repeat;
    }

    /* De kantlijn plakt mee, en niet de tekst: het register is de kortste van
       de twee, en wie halverwege artikel 9 zit hoort niet terug te hoeven
       scrollen om te zien waar dat staat.

       De hoogtebegrenzing is er voor een document met twintig artikelen: dan
       past het register niet meer in het venster en moet het zelf kunnen
       schuiven, anders is de onderkant onbereikbaar. Bij een kort register
       gebeurt er niets — auto schuift alleen als het moet.

       Bewust géén overscroll-behavior: contain erbij. Dat klinkt netjes, maar
       een overflow-element is ook een schuifgebied als er niets te schuiven
       valt, en dan staat het aan beide kanten al op zijn grens — met contain
       doet het wiel boven de kantlijn van een kort document dus niets meer.
       Doorgeven aan de pagina is hier het goede gedrag. */
    .infoRaster:not(.infoRasterEen) .infoZij {
        position: sticky;
        top: var(--infoPlak);
        align-self: start;
        max-block-size: calc(100vh - var(--infoPlak) - var(--ruimte5));
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .infoKolom {
        max-width: var(--breedteTekst);
    }
}

/* --------------------------------------------------------------------------
 * Het register — smal: een blok boven de tekst
 *
 * Hetzelfde als de inhoudsopgave boven een artikel (single.css): een lijst met
 * de artikelen erin, genummerd met dezelfde teller als de secties in de tekst,
 * elk op een haarlijn en met een raakvlak van 44 pixels. Te lezen en aan te
 * tikken, en niet plakkend — hij staat één keer boven de tekst en gaat daarna
 * uit de weg.
 *
 * Geen streepjes en geen groene lijn: dat is een schaal, en die staat pas in de
 * kantlijn hieronder. Een schaal die je niet kunt lezen vertelt niets.
 * -------------------------------------------------------------------------- */

.infoRegister {
    /* Tot de rand van het venster, terug over de padding van .omhulsel heen.
       Geen 100vw, dus ook geen horizontale schuifbalk. */
    margin-inline: calc(var(--omhulselPad) * -1);
    padding-inline: var(--omhulselPad);
    border-block: var(--infoLijn);
    background: var(--kleurPapier);
}

.infoRegisterKop {
    padding-block: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.infoRegisterSchaal {
    position: relative;
}

/* Smal is dit een lijst en geen liniaal. */
.infoRegisterVoortgang {
    display: none;
}

.infoRegisterLijst {
    counter-reset: infoRegel;
    list-style: none;
}

.infoRegisterItem {
    position: relative;
    counter-increment: infoRegel;
    border-block-start: var(--infoLijn);
}

/* De hele regel is het raakvlak, niet een streepje erin. */
.infoRegisterLink {
    display: flex;
    align-items: baseline;
    gap: var(--ruimte3);
    min-height: 2.75rem;
    padding-block: var(--ruimte3);
    text-decoration: none;
}

/* Het nummer uit de teller, zoals 01, 02, 03 boven de artikelen in de tekst en
   01 t/m 04 in de footer. */
.infoRegisterLink::before {
    content: counter(infoRegel, decimal-leading-zero);
    flex: none;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurAccent);
    transition: color var(--overgang);
}

.infoRegisterTekst {
    font-family: var(--fontKop);
    font-size: var(--maatBasis);
    font-weight: 600;
    line-height: 1.35;
    color: var(--kleurTekstSterk);
    text-wrap: pretty;
    transition: color var(--overgang);
}

.infoRegisterLink:hover .infoRegisterTekst,
.infoRegisterLink:focus-visible .infoRegisterTekst {
    color: var(--kleurAccentDonker);
}

.infoRegisterLink:focus-visible {
    outline: 2px solid var(--kleurAccentDonker);
    outline-offset: 2px;
}

/* Waar je nu bent, en wat je gehad hebt. informatie.js zet de klassen; zonder
   dat script staat er gewoon een inhoudsopgave. */
.infoRegisterItem.isHier .infoRegisterLink::before,
.infoRegisterItem.isHier .infoRegisterTekst {
    color: var(--kleurAccentDonker);
}

.infoRegisterItem.isGehad .infoRegisterLink::before {
    color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * Een lid onder een artikel
 *
 * In de algemene voorwaarden van de doelsite staan twee <h2>'en en zijn de
 * tweeendertig artikelen waar de tekst naar verwijst <h3>'en. Die horen in het
 * register, maar niet als gelijke: ze springen in, ze krijgen geen nummer uit
 * de teller — hun eigen nummering staat al in de kop ('7. Bezorgkosten') — en
 * ze zijn een maat kleiner. Zo is de lijst een inhoudsopgave met twee niveaus
 * en geen rij van vierendertig gelijke regels.
 *
 * De teller loopt niet mee, dus 01, 02, 03 blijven de artikelen.
 * -------------------------------------------------------------------------- */

.infoRegisterItemLid {
    counter-increment: none;
}

.infoRegisterItemLid .infoRegisterLink {
    min-height: 2.25rem;
    padding-inline-start: var(--ruimte5);
}

/* Een streepje in plaats van een nummer: hetzelfde streepje als voor een punt
   in een opsomming in de tekst. */
.infoRegisterItemLid .infoRegisterLink::before {
    content: '';
    width: .5rem;
    height: 1px;
    margin-block-start: .55em;
    background: var(--kleurRand);
    transition: background-color var(--overgang);
}

.infoRegisterItemLid .infoRegisterTekst {
    font-size: var(--maatKlein);
    font-weight: 500;
    color: var(--kleurTekst);
}

.infoRegisterItemLid.isHier .infoRegisterLink::before,
.infoRegisterItemLid:hover .infoRegisterLink::before {
    background: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * Het register — breed: een liniaal in de kantlijn
 *
 * Vanaf hier is er ruimte voor een kolom naast de tekst, en dan wordt de lijst
 * wat hij op dit blad hoort te zijn: artikelen als streepjes aan één
 * doorlopende lijn, met de groene voortgang erover. De maatbalk van de
 * homepage, nu staand en als register.
 *
 * De regels zijn gelijk hoog: dit is een index, en 'artikel 9' is niet groter
 * dan 'artikel 8' omdat er meer tekst onder staat. Wat er wél gemeten wordt is
 * de voortgang — de groene lijn staat op de regel waar je bent, plus het stuk
 * van dat artikel dat je gelezen hebt.
 * -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
    .infoRaster:not(.infoRasterEen) .infoRegister {
        margin-inline: 0;
        padding-inline: 0;
        border: 0;
        background: transparent;
    }

    .infoRaster:not(.infoRasterEen) .infoRegisterKop {
        padding-block: 0 var(--ruimte4);
    }

    .infoRaster:not(.infoRasterEen) .infoRegisterSchaal {
        border-inline-start: var(--infoLijn);
    }

    /* Het afgelegde deel van de lijn, over de haarlijn heen. Het deel komt als
       --infoVoortgang uit informatie.js: het is een gegeven van het lezen en
       niet van deze stylesheet. Zonder script blijft hij op nul en is er dus
       niets te zien.

       Met scaleY en niet met een hoogte, net als de maatlijn naast een artikel
       (single.css): het script rekent per frame, dus er hoort geen overgang
       overheen die achter de scrollpositie aan blijft lopen. */
    .infoRaster:not(.infoRasterEen) .infoRegisterVoortgang {
        display: block;
        position: absolute;
        inset-block: 0;
        inset-inline-start: -1px;
        width: 2px;
        background: var(--kleurAccent);
        transform: scaleY(var(--infoVoortgang, 0));
        transform-origin: top center;
    }

    .infoRaster:not(.infoRasterEen) .infoRegisterItem {
        border-block-start: 0;
    }

    /* Het streepje aan de lijn, op de hoogte van de regel. Eén pixel, zoals
       alle scheiding op deze site. */
    .infoRaster:not(.infoRasterEen) .infoRegisterItem::before {
        content: '';
        position: absolute;
        inset-block-start: 1.15em;
        inset-inline-start: 0;
        width: .5rem;
        height: 1px;
        background: var(--kleurRand);
        transition: width var(--overgang), background-color var(--overgang);
    }

    .infoRaster:not(.infoRasterEen) .infoRegisterLink {
        min-height: 0;
        padding-block: var(--ruimte2);
        padding-inline-start: var(--ruimte4);
    }

    .infoRaster:not(.infoRasterEen) .infoRegisterLink::before {
        font-size: var(--maatMini);
    }

    .infoRaster:not(.infoRasterEen) .infoRegisterTekst {
        font-size: var(--maatKlein);
        font-weight: 600;
    }

    /* De aanwijzer van de site: twee pixels en langer op de regel waar je
       staat. Hetzelfde streepje als onder het actieve menu-item, op de kassa en
       in de maatlijn naast een artikel. */
    .infoRaster:not(.infoRasterEen) .infoRegisterItem.isHier::before,
    .infoRaster:not(.infoRasterEen) .infoRegisterItem:hover::before {
        width: var(--ruimte4);
        height: 2px;
        background: var(--kleurAccent);
    }

    .infoRaster:not(.infoRasterEen) .infoRegisterItem.isGehad::before {
        background: var(--kleurAccentLicht);
    }

    /* Een lid springt in en houdt zijn streepje aan de lijn; het nummer van de
       teller heeft het niet, dus valt de ruimte ervoor weg. */
    .infoRaster:not(.infoRasterEen) .infoRegisterItemLid .infoRegisterLink {
        padding-inline-start: var(--ruimte5);
    }

    .infoRaster:not(.infoRasterEen) .infoRegisterItemLid .infoRegisterLink::before {
        display: none;
    }

    .infoRaster:not(.infoRasterEen) .infoRegisterItemLid .infoRegisterTekst {
        font-size: var(--maatMini);
        line-height: 1.45;
    }
}

/* --------------------------------------------------------------------------
 * De hulpregel onder het register
 *
 * Geen kader: dat is het stempel op het contactblad, en dat vakje hoort daar
 * bij de contactgegevens te staan. Hier is het een notitie in de kantlijn — een
 * haarlijn met een groen streepje erop, zoals boven een genummerd blok.
 * -------------------------------------------------------------------------- */

.infoHulp {
    position: relative;
    margin-block-start: var(--ruimte6);
    padding-block-start: var(--ruimte5);
    border-block-start: var(--infoLijn);
}

.infoHulp::before {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: 0;
    width: 1.75rem;
    height: 2px;
    background: var(--kleurAccent);
}

.infoHulpKop {
    font-size: var(--maatH4);
    font-weight: 700;
    letter-spacing: -.01em;
}

.infoHulpTekst {
    margin-block-start: var(--ruimte3);
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

.infoHulpTekst p + p {
    margin-block-start: var(--ruimte2);
}

.infoHulpActie {
    margin-block-start: var(--ruimte4);
}

/* De knop 'Afdrukken', die informatie.js zelf aanmaakt: zonder script doet hij
   niets en hoort hij er dus niet te staan. Dezelfde afspraak als bij de
   prijsschuif in shopFilters.js. */
.infoActies {
    margin-block-start: var(--ruimte4);
    padding-block-start: var(--ruimte4);
    border-block-start: var(--infoLijn);
}

/* Een link of knop die geen gewicht hoort te hebben: een haarlijn eronder in
   plaats van een vlak. Dezelfde als .contactStil op het contactblad. */
.infoStil {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding: var(--ruimte2) 0;
    border: 0;
    border-block-end: 1px solid var(--kleurRand);
    background: none;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    line-height: 1.2;
    text-align: start;
    text-decoration: none;
    color: var(--kleurTekstSterk);
    cursor: pointer;
    transition: border-color var(--overgang), color var(--overgang);
}

.infoStil:hover {
    border-color: var(--kleurAccent);
    color: var(--kleurAccentDonker);
}

.infoStil svg {
    color: var(--kleurAccent);
    transition: transform var(--overgang);
}

.infoStil:hover svg {
    transform: translateX(.1875rem);
}

/* --------------------------------------------------------------------------
 * Kort samengevat
 *
 * Het vakje dat op een bouwtekening rechtsonder staat: een kader van
 * haarlijnen met een groen streepje in de hoek. Hetzelfde vakje als de totalen
 * op de kassa, het stempel op het contactblad en KVK en BTW onderin de footer
 * — en de enige plek op dit blad waar een kader mag, want het ís een stempel.
 * -------------------------------------------------------------------------- */

.infoKort {
    position: relative;
    margin-block-end: var(--ruimte7);
    padding: var(--ruimte5);
    border: var(--infoLijn);
    background: var(--kleurPapier);
}

.infoKort::before {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: -1px;
    width: 2.75rem;
    height: 2px;
    background: var(--kleurAccent);
}

.infoKortKop {
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.infoKortLijst {
    counter-reset: infoPunt;
    margin-block-start: var(--ruimte4);
}

.infoKortPunt {
    counter-increment: infoPunt;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--ruimte4);
    padding-block: var(--ruimte4);
    border-block-start: var(--infoLijn);
}

.infoKortPunt::before {
    content: counter(infoPunt, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.7;
    color: var(--kleurAccent);
}

.infoKortPunt:last-child {
    padding-block-end: 0;
}

.infoKortPuntKop {
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 700;
    line-height: 1.35;
    color: var(--kleurTekstSterk);
}

/* De marge komt van de UA-stijl voor <dd> af; daarna pas de eigen ruimte. */
.infoKortPuntTekst {
    margin: var(--ruimte1) 0 0;
    font-size: var(--maatKlein);
    line-height: 1.6;
    color: var(--kleurTekst);
}

/* --------------------------------------------------------------------------
 * De onderdelen van deze pagina
 *
 * De kindpagina's, als lijst in de tekstkolom. Dat is wat /faq/ is: de
 * achtendertig vragen staan daar niet als verwijzing onderaan maar zijn de
 * inhoud van de pagina. De regels zelf zijn die van de band onderaan
 * (.infoDocument), want dezelfde informatie hoort er hetzelfde uit te zien.
 * -------------------------------------------------------------------------- */

.infoOnderdelen {
    margin-block-start: var(--ruimte6);
}

/* Staat de lijst als eerste in de kolom — een indexpagina zonder eigen tekst,
   zoals /faq/ — dan hoort er geen marge boven: de kop staat al onder de band. */
.infoOnderdelen:first-child {
    margin-block-start: 0;
}

.infoOnderdelenKop {
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.infoOnderdelen .infoDocumentenLijst {
    margin-block-start: var(--ruimte4);
}

/* --------------------------------------------------------------------------
 * De tekst
 *
 * Eén kolom van 68ch, en verder de tekening: een haarlijn boven elk artikel met
 * het nummer eruit, een streepje voor een tussenkopje, een streepje in plaats
 * van een bolletje voor een opsomming. Dezelfde regels als de lopende tekst van
 * een artikel (single.css) — dezelfde soort tekst hoort er hetzelfde uit te
 * zien — met wat een document extra nodig heeft: een definitielijst, een tabel
 * met haarlijnen en een adres dat geen schuine letters krijgt.
 *
 * De redacteur typt hier gewoon <h2>'en; het nummer 'Artikel 07' komt uit een
 * CSS-teller. Zo valt er niets te hernummeren als er een artikel tussenuit gaat
 * (baserules 13).
 * -------------------------------------------------------------------------- */

.infoInhoud {
    counter-reset: infoArtikel;
    max-width: var(--breedteTekst);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.infoInhoud > * + * {
    margin-block-start: var(--ruimte4);
}

/* Een artikel begint op een lijn, met zijn nummer erboven. */
.infoInhoud h2 {
    counter-increment: infoArtikel;
    margin-block-start: var(--ruimte8);
    padding-block-start: var(--ruimte5);
    border-block-start: var(--infoLijn);
    font-size: var(--maatH3);
    font-weight: 700;
    letter-spacing: -.015em;
    scroll-margin-block-start: var(--infoPlak);
}

/* De eerste kop staat al onder de padding van het blad; nog een marge erbij
   zet de tekst onnodig laag. */
.infoInhoud > h2:first-child {
    margin-block-start: 0;
}

.infoInhoud h2::before {
    content: counter(infoArtikel, decimal-leading-zero);
    display: block;
    margin-block-end: var(--ruimte2);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
    color: var(--kleurAccent);
}

/* Een tussenkopje binnen een artikel krijgt het streepje en geen nummer. De
   leden waar in een voorwaardentekst naar verwezen wordt zijn de genummerde
   opsomming eronder (7.1, 7.2), en die telt hieronder zelf. */
.infoInhoud h3 {
    margin-block-start: var(--ruimte6);
    font-size: var(--maatH4);
    font-weight: 700;
    scroll-margin-block-start: var(--infoPlak);
}

.infoInhoud h3::before {
    content: '';
    display: block;
    width: 1.75rem;
    height: 2px;
    margin-block-end: var(--ruimte3);
    background: var(--kleurAccent);
}

.infoInhoud h4 {
    margin-block-start: var(--ruimte5);
    font-size: var(--maatBasis);
    font-weight: 700;
}

/* Koppen uit een gekopieerde tekst staan vaak vol <strong>; dat zou er twee
   keer vet van maken. Het gewicht komt van de kop, niet van de inhoud. */
.infoInhoud h2 strong,
.infoInhoud h3 strong,
.infoInhoud h4 strong {
    font-weight: inherit;
}

.infoInhoud p {
    text-wrap: pretty;
}

/* Een opsomming krijgt een streepje in plaats van een bolletje: één pixel, net
   als alle andere scheiding op deze site. */
.infoInhoud ul {
    padding-inline-start: 0;
    list-style: none;
}

.infoInhoud ul > li {
    position: relative;
    padding-inline-start: var(--ruimte5);
}

.infoInhoud ul > li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .85em;
    width: .625rem;
    height: 1px;
    background: var(--kleurAccent);
}

/* Een genummerde lijst houdt zijn cijfers, op tabelbreedte en met een nul
   ervoor, zodat 01 t/m 10 in één kolom recht onder elkaar staat. In een
   voorwaardentekst is dat de opsomming waar in de tekst naar verwezen wordt,
   dus die moet te lezen zijn zonder te tellen. */
.infoInhoud ol {
    counter-reset: infoPunt;
    padding-inline-start: 0;
    list-style: none;
}

.infoInhoud ol > li {
    counter-increment: infoPunt;
    position: relative;
    padding-inline-start: var(--ruimte6);
}

.infoInhoud ol > li::before {
    content: counter(infoPunt, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.9;
    color: var(--kleurAccent);
}

.infoInhoud li + li {
    margin-block-start: var(--ruimte2);
}

.infoInhoud li > ul,
.infoInhoud li > ol {
    margin-block-start: var(--ruimte2);
}

/* Een definitielijst: begrippen met hun betekenis. Dat is de vorm van
   'Artikel 1 — Definities' en van een privacyverklaring die per gegeven zegt
   waarom het bewaard wordt. Label links, uitleg eronder, haarlijn ertussen —
   dezelfde regel als de rest van het blad. */
.infoInhoud dl {
    border-block-start: var(--infoLijn);
}

.infoInhoud dt {
    padding-block-start: var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--kleurTekstSterk);
}

.infoInhoud dd {
    margin: var(--ruimte1) 0 0;
    padding-block-end: var(--ruimte4);
    border-block-end: var(--infoLijn);
    font-size: var(--maatBasis);
}

/* Een link in de tekst is altijd te zien: onderstreept met een haarlijn in het
   accent, ruim onder de letters door. Een link die je alleen bij hover ziet is
   geen link — en in een document waar naar een andere pagina verwezen wordt is
   dat het verschil tussen wel en niet gevonden worden. */
.infoInhoud a {
    color: var(--kleurTekstSterk);
    text-decoration: underline;
    text-decoration-color: var(--kleurAccent);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--overgang), text-decoration-color var(--overgang);
}

.infoInhoud a:hover {
    color: var(--kleurAccentDonker);
    text-decoration-color: var(--kleurAccentDonker);
}

/* Een aangehaalde bepaling staat tussen twee haarlijnen, met een streepje
   erboven. Geen dikke balk aan de zijkant: dat is een andere tekening. */
.infoInhoud blockquote {
    margin-block: var(--ruimte6);
    padding-block: var(--ruimte5);
    border-block: var(--infoLijn);
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 500;
    line-height: 1.55;
    color: var(--kleurTekstSterk);
}

.infoInhoud blockquote::before {
    content: '';
    display: block;
    width: 2.25rem;
    height: 2px;
    margin-block-end: var(--ruimte4);
    background: var(--kleurAccent);
}

.infoInhoud blockquote p + p {
    margin-block-start: var(--ruimte3);
}

/* Het adres van de verwerkingsverantwoordelijke, de post van een klacht: een
   adres is hier gegevens en geen citaat, dus rechtop en op tabelbreedte. */
.infoInhoud address {
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.infoInhoud hr {
    height: 1px;
    margin-block: var(--ruimte7);
    border: 0;
    background: var(--kleurRand);
}

.infoInhoud img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Een tabel is op dit blad geen uitzondering maar de vorm van 'bewaartermijn
   per gegeven' en 'verzendkosten per land'. Hij mag schuiven op een telefoon
   in plaats van de pagina breed te maken. */
.infoInhoudTabel {
    overflow-x: auto;
}

.infoInhoud table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--maatKlein);
    font-variant-numeric: tabular-nums;
}

.infoInhoud th,
.infoInhoud td {
    padding: var(--ruimte3) var(--ruimte4) var(--ruimte3) 0;
    border-block-end: var(--infoLijn);
    text-align: start;
    vertical-align: top;
}

.infoInhoud th {
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * Terug naar boven
 * -------------------------------------------------------------------------- */

.infoTerug {
    margin-block-start: var(--ruimte7);
    padding-block-start: var(--ruimte5);
    border-block-start: var(--infoLijn);
}

/* De pijl wijst hier terug naar het begin en niet vooruit. */
.infoTerug svg {
    transform: rotate(-90deg);
}

.infoTerug .infoStil:hover svg {
    transform: rotate(-90deg) translateX(.1875rem);
}

/* --------------------------------------------------------------------------
 * De veelgestelde vragen en het afsluitende blok
 *
 * bg_faq() schrijft zijn kop en zijn lijst apart uit, precies zodat een
 * template ze naast elkaar kan zetten. Op een breed scherm staat de kop dus in
 * de kantlijn — dezelfde kantlijn als het register erboven — en de lijst
 * ernaast.
 * -------------------------------------------------------------------------- */

.infoBlad .paginaFaq {
    padding-block: var(--ruimte7) var(--ruimte8);
    border-block-start: var(--infoLijn);
}

.infoBlad .paginaFaqTitel {
    font-size: var(--maatH3);
}

.infoBlad .paginaFaqLijst {
    margin-block-start: var(--ruimte5);
    border-block-end: var(--infoLijn);
    counter-reset: infoVraag;
}

.infoBlad .paginaFaqItem {
    border-block-start: var(--infoLijn);
    border-block-end: 0;
    counter-increment: infoVraag;
}

.infoBlad .paginaFaqItem summary {
    display: flex;
    align-items: baseline;
    gap: var(--ruimte4);
    padding-block: var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    cursor: pointer;
    list-style: none;
}

.infoBlad .paginaFaqItem summary::-webkit-details-marker {
    display: none;
}

.infoBlad .paginaFaqItem summary::before {
    content: counter(infoVraag, decimal-leading-zero);
    font-size: var(--maatMini);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--kleurAccent);
}

.infoBlad .paginaFaqItem summary::after {
    content: '';
    width: .5rem;
    height: .5rem;
    flex: none;
    margin-inline-start: auto;
    align-self: center;
    border-right: 2px solid var(--kleurAccent);
    border-bottom: 2px solid var(--kleurAccent);
    transform: rotate(45deg);
    transition: transform var(--overgang);
}

.infoBlad .paginaFaqItem[open] summary::after {
    transform: rotate(-135deg);
}

.infoBlad .paginaFaqAntwoord {
    max-width: 62ch;
    padding-block-end: var(--ruimte5);
    color: var(--kleurTekst);
}

.infoBlad .paginaFaqAntwoord p + p {
    margin-block-start: var(--ruimte3);
}

@media (min-width: 64rem) {
    .infoBlad .paginaFaq {
        display: grid;
        grid-template-columns: var(--infoZijBreedte) minmax(0, 1fr);
        column-gap: var(--infoGoot);
    }

    .infoBlad .paginaFaqLijst {
        margin-block-start: 0;
        max-width: var(--breedteTekst);
    }
}

/* bg_cta() zet hier de knop van main.css neer: groen met een radius. Op dit
   blad is de knop zwart en recht, net als op het bestelblad en het
   contactblad. */
.infoBlad .paginaCta {
    padding-block: var(--ruimte7) var(--ruimte8);
    border-block-start: var(--infoLijn);
}

.infoBlad .paginaCtaBinnen {
    max-width: 54ch;
}

.infoBlad .paginaCtaTitel {
    font-size: var(--maatH3);
}

.infoBlad .paginaCtaTekst {
    margin-block-start: var(--ruimte4);
    color: var(--kleurTekstZacht);
}

.infoBlad .paginaCtaActie {
    margin-block-start: var(--ruimte5);
}

.infoBlad .paginaCtaActie .knop {
    padding: var(--ruimte4) var(--ruimte6);
    border-radius: 0;
    background: var(--kleurZwart);
    font-weight: 700;
    color: var(--kleurWit);
}

.infoBlad .paginaCtaActie .knop:hover {
    background: var(--kleurZwartHover);
    color: var(--kleurWit);
}

/* --------------------------------------------------------------------------
 * De andere documenten
 *
 * Een band in papierkleur tegen de footer aan, zoals het winkelblok onder een
 * artikel: regels op een haarlijn met het nummer uit een CSS-teller, de titel,
 * één regel toelichting en de datum waarop dat document is bijgewerkt.
 *
 * Wie de retourvoorwaarden uitleest is meestal nog niet klaar — en welke
 * documenten er zijn volgt uit welke pagina's dit template gebruiken, dus deze
 * lijst hoeft nooit bijgewerkt te worden (inc/informatie.php).
 * -------------------------------------------------------------------------- */

.infoDocumenten {
    display: block;
    background: var(--kleurPapier);
    border-block-start: var(--infoLijn);
}

.infoDocumentenBinnen {
    padding-block: var(--ruimte7) var(--ruimte8);
}

/* De kop en de weg terug ernaast, zodra er ruimte voor twee kolommen is —
   dezelfde regel als boven het winkelblok onder een artikel. */
.infoDocumentenKop {
    display: grid;
    row-gap: var(--ruimte3);
    margin-block-start: var(--ruimte3);
}

.infoDocumentenTitel {
    font-size: var(--maatH2);
    font-weight: 700;
    letter-spacing: -.015em;
}

.infoDocumentenAlles {
    margin: 0;
}

@media (min-width: 48rem) {
    .infoDocumentenKop {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: var(--ruimte5);
    }
}

.infoDocumentenLijst {
    counter-reset: infoDoc;
    margin-block-start: var(--ruimte6);
    border-block-end: var(--infoLijn);
    list-style: none;
}

/* De hele regel is de klik: het lichte vlak bij hover belooft dat, dus is de
   link van de titel over de regel uitgerekt — dezelfde regel als in het
   register op /blog/ (inc/parts/lijst.php). De datum ernaast is geen link en
   hoeft er dus niet bovenuit te komen. */
.infoDocument {
    counter-increment: infoDoc;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--ruimte4);
    align-items: baseline;
    padding-block: var(--ruimte4);
    border-block-start: var(--infoLijn);
}

.infoDocument::before {
    content: counter(infoDoc, decimal-leading-zero);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--kleurAccent);
}

.infoDocumentLink {
    display: grid;
    row-gap: var(--ruimte1);
    text-decoration: none;
}

.infoDocumentLink::after {
    content: '';
    position: absolute;
    inset: 0;
}

.infoDocumentTitel {
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 700;
    line-height: 1.35;
    color: var(--kleurTekstSterk);
    transition: color var(--overgang);
}

.infoDocument:hover .infoDocumentTitel {
    color: var(--kleurAccentDonker);
}

.infoDocumentIntro {
    font-size: var(--maatKlein);
    line-height: 1.6;
    color: var(--kleurTekstZacht);
    text-wrap: pretty;
}

/* Rechts op de regel staat hoelang dat document duurt.
 *
 * Hier stond de datum waarop het was bijgewerkt, en dat was de verkeerde maat:
 * zes documenten die in dezelfde week zijn aangemaakt geven zes keer dezelfde
 * datum, en een kolom waarin elke regel hetzelfde zegt is ruis. Bovendien
 * staat de datum die er wél toe doet — die van het document dat je nu leest —
 * al in het stempel bovenaan.
 *
 * De leestijd verschilt wél per document, en het is het antwoord op de vraag
 * die je stelt voordat je erop klikt. Is er nog geen tekst, dan staat er niets;
 * '0 min' is geen maat (baserules 16). */
.infoDocumentMaat {
    grid-column: 2;
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--kleurTekstZacht);
}

/* Zodra er ruimte is staat de maat rechts op de regel in plaats van eronder:
   dan is het een kolom die je kunt aflezen. */
@media (min-width: 48rem) {
    .infoDocument {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .infoDocumentMaat {
        grid-column: 3;
        padding-inline-start: var(--ruimte5);
    }
}

/* De footer houdt zelf ruimte boven zich, en dat zet hier een witte streep
   tussen de band met de andere documenten en de donkere footer — twee vlakken
   die tegen elkaar aan horen te liggen. Dezelfde regel als bij het afsluitende
   blok op de homepage en de donkere band op het contactblad. Op de hele
   .infoBlad en niet alleen op die band: ook zonder andere documenten sluit dit
   blad onderaan af en hoort er geen strook wit onder te blijven staan. */
body:has(.infoBlad) .siteFooter {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
 * Afdrukken
 *
 * Voorwaarden worden bewaard. Wat er op papier hoort te staan is de tekst en
 * het stempel — sinds wanneer geldt dit, welke versie is het — en verder niets:
 * geen menu, geen register (je kunt er niet op klikken), geen footer en geen
 * andere documenten. De links krijgen hun adres erachter, want een onderstreept
 * woord op papier is geen link.
 * -------------------------------------------------------------------------- */

@media print {
    .siteHeader,
    .siteFooter,
    .kruimels,
    .infoZij,
    .infoTerug,
    .infoDocumenten,
    .infoBlad .paginaFaq,
    .infoBlad .paginaCta {
        display: none;
    }

    .infoBand,
    .infoKort {
        background: none;
    }

    .infoBand {
        border-block-end: 1px solid #000;
    }

    .infoRaster {
        display: block;
        padding-block: 0;
    }

    .infoBandBinnen,
    .infoRaster,
    .infoKolom,
    .infoInhoud {
        max-width: none;
        padding-inline: 0;
    }

    .infoTitel {
        font-size: 22pt;
    }

    .infoInhoud {
        font-size: 10pt;
        line-height: 1.5;
    }

    /* Een artikel hoort niet op de laatste regel van een blad te beginnen. */
    .infoInhoud h2,
    .infoInhoud h3 {
        break-after: avoid;
        break-inside: avoid;
    }

    .infoInhoud li,
    .infoInhoud tr,
    .infoKortPunt {
        break-inside: avoid;
    }

    .infoInhoud a::after {
        content: ' (' attr(href) ')';
        font-size: 9pt;
        word-break: break-all;
    }

    /* Een anker binnen dezelfde pagina zegt op papier niets. */
    .infoInhoud a[href^="#"]::after {
        content: '';
    }
}