/* ---------------------------------------------------------------------------
 * home.css — alleen de homepage (front-page.php), baserules 8
 *
 * Wordt nergens anders ingeladen. De tokens, de header en de footer komen uit
 * main.css; hier staat alleen wat op deze ene pagina voorkomt.
 *
 * WAAR HET ONTWERP OP RUST
 * ------------------------
 * 1. De maatlijn. Een bed wordt in centimeters verkocht, dus de pagina is
 *    opgezet als een technische tekening: haarlijnen in plaats van kaders, een
 *    streepje waar iets begint, maten met een echt maalteken, en cijfers op
 *    tabelbreedte (font-variant-numeric) zodat een kolom getallen recht staat.
 *    Nergens een schaduw, nergens een afgeronde rechthoek om een foto.
 *
 * 2. Het verloop van licht naar donker. Papier (dezelfde kleur als de header)
 *    voor de hero en de maatbalk, wit voor de winkelvloer, bijna-zwart voor de
 *    twee verhaalblokken, wit voor het blog, en het groene vlak als afsluiting
 *    dat de footer inloopt. Vier keer een ander vlak, in die volgorde.
 *
 * 3. Uitsneden in plaats van kaders. De foto's van de doelsite zijn png's en
 *    webp's zonder achtergrond. Die staan hier dus los op het vlak: de vrouw in
 *    de hero loopt door tot over de onderrand, de bedden in de tegels staan op
 *    een lijn in plaats van in een vakje.
 *
 * De nummers 01, 02, 03 komen uit een CSS-teller op .homeNummer. Blijft een
 * blok leeg en valt het uit de pagina, dan schuift de nummering mee.
 *
 * HET RASTER
 * ----------
 * Elke sectie is een raster van twaalf kolommen met een goot links en rechts
 * die de rest opslokt. Zo kan een foto tot aan de rand van het venster lopen
 * terwijl de tekst ernaast precies op .omhulsel uitlijnt — zonder 100vw, dus
 * ook zonder de horizontale schuifbalk die daarbij hoort.
 *
 *   lijn 1  volStart      de rand van het venster
 *   lijn 2  inhoudStart   waar .omhulsel begint
 *   lijn 8                begin van kolom 7, het midden
 *   lijn 14 inhoudEnd     waar .omhulsel eindigt
 *   lijn 15 volEnd        de andere rand van het venster
 *
 * Kolom k begint op lijn k+1. Onder 56rem staat alles onder elkaar over de
 * volle inhoudsbreedte; de spans hieronder staan daarom in media queries.
 * --------------------------------------------------------------------------- */

.homeRaster {
    --goot: var(--ruimte4);
    --breedteBinnen: calc(var(--breedteMax) - var(--ruimte5) * 2);

    display: grid;
    grid-template-columns:
        [volStart] minmax(var(--goot), 1fr)
        [inhoudStart] repeat(12, minmax(0, calc(var(--breedteBinnen) / 12)))
        [inhoudEnd] minmax(var(--goot), 1fr)
        [volEnd];
    align-content: start;
}

@media (min-width: 48rem) {
    .homeRaster { --goot: var(--ruimte5); }
}

.homeRaster > * {
    grid-column: inhoudStart / inhoudEnd;
}

/* De pictogrammen. main.css tekent de set alleen in de header, de footer en de
   USP-balk; op deze pagina moet het hier. Zonder deze regel vult de browser de
   paden op en wordt een lijnicoon een vlek. */
.homeRaster svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
 * Labels, koppen en de teller
 * -------------------------------------------------------------------------- */

.homeLabel {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

/* De teller begint bij de hero en loopt door over de secties die erop volgen. */
.homeHero {
    counter-reset: homeSectie;
}

.homeNummer {
    counter-increment: homeSectie;
    color: var(--kleurAccent);
    font-variant-numeric: tabular-nums;
}

.homeNummer::before {
    content: counter(homeSectie, decimal-leading-zero);
}

/* Een label zonder nummer hangt aan een streepje, zodat ook dat aan een lijn
   begint in plaats van in de lucht. */
.homeLabelLijn::before {
    content: '';
    width: 2.25rem;
    height: 2px;
    background: var(--kleurAccent);
}

.homeKopTitel {
    margin-top: var(--ruimte4);
    font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.875rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.homeKopTekst {
    margin-top: var(--ruimte4);
    max-width: 54ch;
    color: var(--kleurTekstZacht);
}

.homeKop {
    max-width: 46rem;
}

.homeKopMetLink {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ruimte5);
    max-width: none;
}

/* De link die naar de volledige lijst wijst: maten, artikelen. */
.homeMeer {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding-bottom: var(--ruimte1);
    border-bottom: 1px solid var(--kleurRand);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang), border-color var(--overgang);
}

.homeMeer svg {
    transition: transform var(--overgang);
}

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

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

/* --------------------------------------------------------------------------
 * Knopvarianten die alleen hier voorkomen
 *
 * .knop zelf staat in main.css. knopStil is de tweede knop naast een gevulde:
 * geen vlak, geen kader, alleen tekst met een pijl die meegeeft. knopPapier is
 * de knop op het diepgroene afsluitende vlak.
 *
 * Die heette knopZwart en was zwart, want op het lichtere --kleurAccent van
 * toen haalde wit de 4,5:1 niet en zwart wel. Nu het vlak --kleurAccentDiep is
 * werkt dat andersom: een zwarte knop op diepgroen zakt in het vlak weg
 * (2,8:1 tussen knop en achtergrond), terwijl papier met inkt erop het meest
 * uitgesproken ding op het blad is — en dat hoort de enige actie daar ook te
 * zijn.
 * -------------------------------------------------------------------------- */

.knopStil {
    padding-inline: 0;
    background: transparent;
    color: var(--kleurZwart);
}

.knopStil svg {
    transition: transform var(--overgang);
}

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

.knopStil:hover svg {
    transform: translateX(.25rem);
}

.knopPapier {
    background: var(--kleurPapier);
    color: var(--kleurZwart);
}

.knopPapier:hover {
    background: var(--kleurWit);
    color: var(--kleurZwart);
}

/* --------------------------------------------------------------------------
 * Hero
 *
 * Geen tekst boven een banner en geen twee halve kolommen die elkaar in
 * evenwicht houden: de tekst staat links op zes kolommen, de vrouw staat rechts
 * en loopt tot aan de rand van het venster én tot over de onderrand van de
 * sectie. Achter haar staat een getekende cirkel — dun omlijnd, licht gevuld,
 * afgesneden door de maatbalk eronder. Dat is de cirkel van de doelsite, maar
 * getekend in plaats van als vlak, zodat hij bij de haarlijnen hoort.
 * -------------------------------------------------------------------------- */

.homeHero {
    position: relative;
    overflow: hidden;
    background: var(--kleurPapier);
    padding-top: var(--ruimte8);
    row-gap: var(--ruimte6);
}

.homeHeroTitel {
    margin-top: var(--ruimte5);
    font-size: clamp(2.5rem, 1.1rem + 6.2vw, 5.25rem);
    font-weight: 800;
    line-height: .94;
    letter-spacing: -.04em;
}

/* Het laatste woord van de kop in de accentkleur — dezelfde vorm als het
   woordmerk in de header, zodat de hero en het logo van elkaar weten. */
.titelAccent {
    color: var(--kleurAccent);
}

.homeHeroLead {
    margin-top: var(--ruimte5);
    max-width: 40ch;
    font-size: 1.125rem;
}

.homeHeroLead p + p {
    margin-top: var(--ruimte3);
}

.homeHeroActies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ruimte5);
    margin-top: var(--ruimte6);
}

.homeHeroBeeld {
    position: relative;
    align-self: end;
    justify-self: start;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
}

.homeHeroBeeld img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.homeHeroBeeld::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -8%;
    width: min(28rem, 124%);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border: 1px solid rgb(35 168 146 / .3);
    border-radius: 50%;
    background: rgb(35 168 146 / .07);
}

@media (min-width: 56rem) {
    .homeHero {
        padding-top: var(--ruimte9);
        align-items: end;
    }

    .homeHeroTekst {
        grid-column: inhoudStart / 8;
        align-self: center;
        padding-bottom: var(--ruimte9);
    }

    /* Vanaf kolom 8 naar rechts, maar niet breder dan 32rem: de vrouw hoort
       naast de kop te staan en niet ergens in de rechtermarge te zweven. */
    .homeHeroBeeld {
        grid-column: 9 / volEnd;
        max-width: 32rem;
        margin-inline: 0;
    }

    .homeHeroBeeld::before {
        width: min(38rem, 122%);
    }
}

/* --------------------------------------------------------------------------
 * Verkoopargumenten
 *
 * Vier punten op één haarlijn. De lijn zit op de punten zelf en niet op de rij:
 * met een raster zonder kolomgoot lopen de randen in elkaar over tot één lijn,
 * en dan klopt hij ook als de rij op een smaller scherm in twee stukken breekt.
 * Boven elk punt een kort accentstreepje — dezelfde aanwijzer als onder het
 * actieve menu-item.
 * -------------------------------------------------------------------------- */

.homeUsp {
    background: var(--kleurPapier);
    padding-bottom: var(--ruimte7);
}

.homeUspLijst {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 34rem) {
    .homeUspLijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .homeUspLijst { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.homeUspItem {
    position: relative;
    padding: var(--ruimte5) var(--ruimte6) 0 0;
    border-top: 1px solid var(--kleurRand);
}

.homeUspItem::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 1.75rem;
    height: 2px;
    background: var(--kleurAccent);
}

.homeUspTitel {
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 700;
    color: var(--kleurTekstSterk);
}

.homeUspTekst {
    margin-top: var(--ruimte1);
    max-width: 28ch;
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * De maatbalk
 *
 * Een liniaal, geen rij knoppen: één doorlopende lijn, een streepje per maat
 * dat eronder hangt, en het getal daaronder. Bij hover wordt het streepje
 * langer en groen. Dit is het onderdeel waar het hele ontwerp op teruggrijpt.
 * -------------------------------------------------------------------------- */

.homeMaten {
    background: var(--kleurPapier);
    padding-block: var(--ruimte6) var(--ruimte8);
    row-gap: var(--ruimte6);
}

.homeMatenKop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ruimte4);
}

.homeMatenTitel {
    margin-top: var(--ruimte3);
    font-size: var(--maatH3);
    font-weight: 700;
    letter-spacing: -.01em;
}

.homeMatenLijst {
    /* Streepje en maat staan allebei op x=0 — dat is de liniaal: het getal
       staat onder zijn eigen streepje. De tekst begint dus onder het langste
       streepje. Met een vaste --ruimte6 (2rem) liep het groene streepje bij
       hover (3rem) dwars door het eerste cijfer. Dezelfde afspraak als in
       product.css, keuzehulp.css en shop.css. */
    --homeStreepRust: var(--ruimte4);
    --homeStreepHover: var(--ruimte7);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
}

.homeMaatItem {
    display: flex;
}

.homeMaat {
    position: relative;
    flex: 1;
    padding: calc(var(--homeStreepHover) + var(--ruimte2)) var(--ruimte2) var(--ruimte2) 0;
    border-top: 1px solid var(--kleurRand);
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang);
}

.homeMaatStreep {
    position: absolute;
    top: -1px;
    left: 0;
    width: 1px;
    height: var(--homeStreepRust);
    background: var(--kleurRand);
    /* motionInit.js tekent de streepjes uit met scaleY; ze horen dus uit de
       lijn te zakken en niet uit hun eigen midden te groeien. */
    transform-origin: top center;
    transition: height var(--overgangTraag), background-color var(--overgang);
}

.homeMaatTekst {
    display: block;
    font-family: var(--fontKop);
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

a.homeMaat:hover {
    color: var(--kleurAccentDonker);
}

a.homeMaat:hover .homeMaatStreep {
    height: var(--homeStreepHover);
    background: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * Assortiment
 *
 * De afbeeldingen van de doelsite zijn rond uitgesneden. Die respecteren we:
 * geen vierkante kaart met een cirkel erin geperst, maar zes bedden die op één
 * lijn staan, met de naam en het nummer eronder.
 *
 * Hier stonden de even tegels een maat kleiner (8,75rem tegen 11rem), zodat ze
 * iets zakten en de rij een golf werd. Bedoeld als compositie, gelezen als
 * fout: zes even grote cirkels naast elkaar waarvan er drie kleiner zijn, ziet
 * eruit als drie plaatjes die niet goed geladen zijn. Het zijn zes
 * gelijkwaardige categorieën en ze hebben nu dus alle zes dezelfde maat.
 * -------------------------------------------------------------------------- */

.homeAssortiment {
    background: var(--kleurWit);
    padding-block: var(--ruimte9);
    row-gap: var(--ruimte8);
}

.homeTegels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    counter-reset: homeTegel;
}

@media (min-width: 40rem) {
    .homeTegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
    .homeTegels { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.homeTegel {
    counter-increment: homeTegel;
}

.homeTegelLink {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.homeTegelBeeld {
    display: block;
    align-self: end;
    padding: var(--ruimte4) var(--ruimte2) var(--ruimte5);
}

.homeTegelBeeld img {
    display: block;
    width: min(100%, 11rem);
    height: auto;
    margin-inline: auto;
    transition: transform var(--overgangTraag);
}

.homeTegelVoet {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--ruimte3);
    padding: var(--ruimte4) var(--ruimte3) 0 0;
    border-top: 1px solid var(--kleurRand);
}

.homeTegelVoet::before {
    content: counter(homeTegel, decimal-leading-zero);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    color: var(--kleurAccent);
}

/* De accentlijn schuift over de haarlijn heen: de aanwijzer, weer. */
.homeTegelVoet::after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--kleurAccent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--overgangTraag);
}

.homeTegelNaam {
    font-family: var(--fontKop);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--kleurTekstSterk);
}

.homeTegelLink:hover .homeTegelVoet::after {
    transform: scaleX(1);
}

.homeTegelLink:hover .homeTegelBeeld img {
    transform: translateY(-.375rem);
}

/* --------------------------------------------------------------------------
 * De twee verhaalblokken, op bijna-zwart
 *
 * Hier gaat het licht uit. Twee blokken, gespiegeld, met de foto tot aan de
 * rand van het venster en zonder afgeronde hoek: een foto die de pagina
 * uitloopt oogt groter dan dezelfde foto in een kader. Onderaan de band staat
 * het merkwoord nog één keer, groot en bijna onzichtbaar half over de rand —
 * hetzelfde als .footerSchim in main.css doet.
 * -------------------------------------------------------------------------- */

.homeVerhaalBand {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--kleurZwart);
    color: rgb(255 255 255 / .72);
    padding-block: var(--ruimte9);
}

.homeVerhaal {
    position: relative;
    z-index: 1;
    row-gap: var(--ruimte6);
}

.homeVerhaal + .homeVerhaal {
    margin-top: var(--ruimte9);
}

.homeVerhaalBeeld img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.homeVerhaalTekst .homeLabel {
    color: rgb(255 255 255 / .5);
}

.homeVerhaalTitel {
    margin-top: var(--ruimte4);
    font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.875rem);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--kleurWit);
}

.homeVerhaalLead {
    margin-top: var(--ruimte4);
    max-width: 46ch;
}

.homeVerhaalLead p + p {
    margin-top: var(--ruimte3);
}

.homeVerhaalPunten {
    display: grid;
    counter-reset: homePunt;
}

.homeVerhaalPunt {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--ruimte4);
    padding-block: var(--ruimte4);
    border-top: 1px solid var(--kleurFooterRand);
    counter-increment: homePunt;
}

.homeVerhaalPunt::before {
    content: counter(homePunt, decimal-leading-zero);
    grid-column: 1;
    grid-row: 1;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurAccentLicht);
}

.homeVerhaalPuntKop {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 600;
    color: var(--kleurWit);
}

.homeVerhaalPuntTekst {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--ruimte1);
    font-size: var(--maatKlein);
    color: rgb(255 255 255 / .6);
}

.homeVerhaalActie {
    margin-top: var(--ruimte6);
}

.homeVerhaalGespiegeld .knopStil {
    color: var(--kleurWit);
}

.homeVerhaalGespiegeld .knopStil:hover {
    color: var(--kleurAccentLicht);
}

.homeVerhaalWoord {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 0;
    transform: translate(-50%, 34%);
    font-family: var(--fontKop);
    font-size: clamp(4.5rem, 17vw, 14rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: .8;
    white-space: nowrap;
    color: rgb(255 255 255 / .045);
    pointer-events: none;
    user-select: none;
}

@media (min-width: 56rem) {
    .homeVerhaal {
        align-items: center;
        column-gap: 0;
    }

    /* De foto loopt links van de pagina af over vijf kolommen, de tekst staat
       op zes kolommen aan de andere kant. Kolom 6 blijft leeg en is de goot
       ertussen.

       Vijf en geen zes: het bestand is 948 pixels breed, en bij zes kolommen
       is de foto op een breed scherm breder dan dat. Dan gaat de browser
       opschalen en wordt een scherpe foto een zachte. Bij vijf blijft hij tot
       een venster van 2160 pixels binnen zijn eigen resolutie. */
    .homeVerhaalBeeld { grid-column: volStart / 7; }
    .homeVerhaalTekst { grid-column: 8 / inhoudEnd; }

    /* Gespiegeld: tekst op kolom 1 tot 6, foto vanaf kolom 8 tot de rand. */
    .homeVerhaalGespiegeld .homeVerhaalTekst { grid-column: inhoudStart / 8; }
    .homeVerhaalGespiegeld .homeVerhaalBeeld { grid-column: 9 / volEnd; }

    /* Drie streepjes naast elkaar onder het blok. De goot ertussen knipt de
       lijn in drieën, en dat is precies de bedoeling: elk punt begint aan een
       eigen streepje. */
    .homeVerhaalPunten {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--ruimte6);
    }
}

/* --------------------------------------------------------------------------
 * Nieuws en trends
 *
 * Een voorpagina van een tijdschrift: één artikel groot met foto, de rest als
 * genummerde lijst ernaast. Geen vijf gelijke kaarten — dan is er niets meer
 * belangrijk. De teller begint op 1 zodat het grote artikel 01 is en de lijst
 * bij 02 verdergaat.
 * -------------------------------------------------------------------------- */

.homeBlog {
    background: var(--kleurWit);
    padding-block: var(--ruimte9);
    row-gap: var(--ruimte8);
}

.homeBlogRooster {
    display: grid;
    gap: var(--ruimte7);
}

.homeBlogBeeld {
    display: block;
    overflow: hidden;
}

.homeBlogBeeld img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--overgangTraag);
}

.homeBlogUitgelicht:hover .homeBlogBeeld img {
    transform: scale(1.03);
}

.homeBlogMeta {
    margin-top: var(--ruimte4);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
}

.homeBlogTitel {
    margin-top: var(--ruimte3);
    font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -.015em;
}

.homeBlogSamenvatting {
    margin-top: var(--ruimte3);
    max-width: 54ch;
    color: var(--kleurTekstZacht);
}

.homeBlogLijst {
    counter-reset: homeBericht 1;
}

.homeBlogItem {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--ruimte4);
    align-items: baseline;
    padding-block: var(--ruimte5);
    border-top: 1px solid var(--kleurRand);
    counter-increment: homeBericht;
}

.homeBlogItem:last-child {
    border-bottom: 1px solid var(--kleurRand);
}

.homeBlogItem::before {
    content: counter(homeBericht, decimal-leading-zero);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    color: var(--kleurAccent);
}

.homeBlogItem .homeBlogMeta {
    margin-top: 0;
}

.homeBlogItemTitel {
    margin-top: var(--ruimte2);
    font-size: var(--maatH4);
    font-weight: 600;
    letter-spacing: -.005em;
}

.homeBlogTitel a,
.homeBlogItemTitel a {
    color: var(--kleurTekstSterk);
    text-decoration: none;
}

.homeBlogTitel a:hover,
.homeBlogItemTitel a:hover {
    color: var(--kleurAccentDonker);
}

@media (min-width: 56rem) {
    .homeBlogRooster {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--ruimte8);
        align-items: start;
    }
}

/* --------------------------------------------------------------------------
 * Veelgestelde vragen
 *
 * bg_faq() schrijft dezelfde HTML als op een gewone pagina, maar page.css laadt
 * hier niet (baserules 8), dus de vragen krijgen hun opmaak van dit bestand —
 * en meteen een eigen indeling: de kop blijft links staan terwijl de vragen
 * ernaast langs scrollen. Dat kan doordat de vragen in een eigen
 * .paginaFaqLijst zitten en niet elk een rasterregel zijn.
 * -------------------------------------------------------------------------- */

.paginaFaq {
    padding-bottom: var(--ruimte9);
}

.paginaFaqTitel {
    font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.875rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.paginaFaqLijst {
    margin-top: var(--ruimte6);
    border-top: 1px solid var(--kleurRand);
}

.paginaFaqItem {
    border-bottom: 1px solid var(--kleurRand);
}

.paginaFaqItem summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte5);
    padding-block: var(--ruimte5);
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    cursor: pointer;
    list-style: none;
    transition: color var(--overgang);
}

/* Het standaard driehoekje weg, in beide smaken. */
.paginaFaqItem summary::-webkit-details-marker {
    display: none;
}

.paginaFaqItem summary:hover {
    color: var(--kleurAccentDonker);
}

/* Een plus van twee haarlijnen. Bij het openklappen krimpt de verticale lijn
   naar nul en blijft de min over — geen pijltje dat kantelt maar een teken dat
   verandert, en getekend met dezelfde 1 pixel als de rest van de pagina. */
.paginaFaqItem summary::after {
    content: '';
    width: .875rem;
    height: .875rem;
    flex: none;
    background:
        linear-gradient(var(--kleurAccent), var(--kleurAccent)) center center / 100% 1px no-repeat,
        linear-gradient(var(--kleurAccent), var(--kleurAccent)) center center / 1px 100% no-repeat;
    transition: background-size var(--overgangTraag);
}

.paginaFaqItem[open] summary::after {
    background-size: 100% 1px, 1px 0;
}

.paginaFaqAntwoord {
    max-width: 64ch;
    padding-bottom: var(--ruimte5);
    color: var(--kleurTekst);
}

.paginaFaqAntwoord p + p {
    margin-top: var(--ruimte3);
}

@media (min-width: 56rem) {
    .paginaFaq {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
        column-gap: var(--ruimte8);
        align-items: start;
    }

    /* Onder de hele plakkende header door, niet alleen onder de hoofdbalk:
       met --hoogteHeaderVast schoof de kop de navigatiebalk in en bleef hij
       daar half achter hangen. */
    .paginaFaqTitel {
        position: sticky;
        top: calc(var(--hoogteHeaderPlak) + var(--ruimte5));
    }

    .paginaFaqLijst {
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
 * Het afsluitende blok
 *
 * Het groen van het merk, één keer als heel vlak — en meteen tegen de footer
 * aan, zonder wit ertussen. De maatlijn onder het bed is de tekening die de
 * pagina de hele tijd al aan het maken was: twee eindstreepjes, een lijn en de
 * maat ertussen, precies zoals op een bouwtekening.
 *
 * WAAROM HET VLAK DIEPER IS DAN HET ACCENTGROEN
 * ---------------------------------------------
 * Hier stond --kleurAccent met zwarte letters erop. Dat haalde de contrasteis
 * (5,5:1) maar het zag eruit als een vergissing: zwart op een verzadigd groen
 * vlak leest als tekst die per ongeluk niet is meegekleurd, en de knop, de
 * maatlijn en het label moesten allemaal mee in datzelfde zwart. Wit erop kon
 * niet — dat haalt op --kleurAccent maar 2,6:1.
 *
 * Het vlak is nu --kleurAccentDiep (#14675a): hetzelfde merkgroen, dieper, en
 * daar staat wit op 6,4:1. Dat maakt het meteen de laatste stap van 'licht naar
 * donker' die de pagina al maakte — papier, wit, inkt, groen — en het loopt
 * netter over in de footer (#212121) dan het lichte groen deed.
 *
 * DE FOTO IS EEN SPECIMEN
 * -----------------------
 * Hier stond een kleine uitsnede van een bed (571 × 285) los op het vlak. Die
 * uitsnede was bleek, warmgrijs en half zo breed als de kolom, en op groen werd
 * dat een vlek in plaats van een bed. Er staat nu een echte productfoto in het
 * vakje van de productpagina: papierkleur eronder en vier hoekstreepjes
 * eromheen, zoals de snijtekens op een drukproef. Dat is waarom een rechthoek
 * hier mag — hij ligt op een blad, hij is geen kader.
 * -------------------------------------------------------------------------- */

.homeSluit {
    /* De lijnen op dit vlak zijn licht in plaats van inkt; één plek om ze te
       verzetten, want de maatlijn en de hoekstreepjes delen ze. */
    --sluitLijn: rgb(255 255 255 / .55);

    background: var(--kleurAccentDiep);
    color: rgb(255 255 255 / .82);
    padding-block: var(--ruimte9);
    row-gap: var(--ruimte7);
}

.homeSluit .homeLabel {
    color: rgb(255 255 255 / .68);
}

.homeSluit .homeLabelLijn::before {
    background: var(--kleurWit);
}

.homeSluitTitel {
    margin-top: var(--ruimte4);
    font-size: clamp(1.875rem, 1.15rem + 2.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--kleurWit);
}

.homeSluitLead {
    margin-top: var(--ruimte4);
    max-width: 44ch;
}

.homeSluitLead p + p {
    margin-top: var(--ruimte3);
}

.homeSluitActie {
    margin-top: var(--ruimte6);
}

/**
 * Het blad met de vier hoekstreepjes — dezelfde acht achtergrondlagen als
 * .productSpecimenVlak op de productpagina, hier met lichte lijnen omdat het
 * vlak eronder donker is. Geen elementen in de HTML, en geen kader: een kader
 * zet de foto in een doosje, hoekstreepjes wijzen alleen de hoeken aan.
 */
.homeSluitBeeld {
    --hoek: .875rem;

    position: relative;
    max-width: 34rem;
    margin-inline: auto;
    padding: clamp(var(--ruimte3), 2.5vw, var(--ruimte5));
    background-color: var(--kleurPapier);
    background-image:
        linear-gradient(var(--sluitLijn), var(--sluitLijn)),
        linear-gradient(var(--sluitLijn), var(--sluitLijn)),
        linear-gradient(var(--sluitLijn), var(--sluitLijn)),
        linear-gradient(var(--sluitLijn), var(--sluitLijn)),
        linear-gradient(var(--sluitLijn), var(--sluitLijn)),
        linear-gradient(var(--sluitLijn), var(--sluitLijn)),
        linear-gradient(var(--sluitLijn), var(--sluitLijn)),
        linear-gradient(var(--sluitLijn), var(--sluitLijn));
    background-repeat: no-repeat;
    background-size:
        var(--hoek) 1px, 1px var(--hoek),
        var(--hoek) 1px, 1px var(--hoek),
        var(--hoek) 1px, 1px var(--hoek),
        var(--hoek) 1px, 1px var(--hoek);
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom,
        right bottom, right bottom;
}

/**
 * 4:3 met object-fit: cover. De hoogte staat daarmee vast vóórdat de foto
 * binnen is, dus er verschuift niets tijdens het laden — dezelfde afweging als
 * bij de bandfoto boven een artikel (zie de kop van single.css). Géén
 * max-height op een <img>: bij een replaced element rekent de browser die
 * terug naar de breedte en staat de foto ineens smal in het vakje.
 */
.homeSluitBeeld img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.homeMaatlijn {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    max-width: 34rem;
    margin: var(--ruimte5) auto 0;
}

/* Een eindstreepje van 9 pixels hoog met de maatlijn er middendoor. De lijn is
   een achtergrond van 1 pixel hoog, het streepje is de rand ernaast. */
.homeMaatlijn::before,
.homeMaatlijn::after {
    content: '';
    flex: 1;
    height: .5625rem;
    background: linear-gradient(var(--sluitLijn), var(--sluitLijn)) left center / 100% 1px no-repeat;
}

.homeMaatlijn::before {
    border-left: 1px solid var(--sluitLijn);
}

.homeMaatlijn::after {
    border-right: 1px solid var(--sluitLijn);
}

.homeMaatlijnMaat {
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: var(--kleurWit);
}

@media (min-width: 56rem) {
    .homeSluit {
        align-items: center;
    }

    .homeSluitTekst { grid-column: inhoudStart / 7; }
    .homeSluitBeeld { grid-column: 8 / inhoudEnd; }
}

/* De footer houdt zelf ruimte boven zich, en dat zou hier een witte streep
   tussen twee vlakken zetten. Alleen als het afsluitende blok er staat. */
.home:has(.homeSluit) .siteFooter {
    margin-top: 0;
}