/*
 * Bende — het gezicht van babybende.
 *
 * ## De richting, en waar ze vandaan komt
 *
 * Uit het concept dat Sven liet maken: twee personages op een witte grond, een
 * jongetje in kobaltblauw en een meisje in bubblegumroze, glanzend en rond.
 * Dat beeld is geen afgewerkt merk, maar de richting erin ligt vast en die is
 * hier doorgetrokken.
 *
 *   Wit is de grond.        Geen donkere schil, nergens. Wie hier om vier uur
 *                           's nachts iets opzoekt, mag licht krijgen.
 *   Twee volle kleuren.     Kobalt en roze dragen samen. Geen pastel, en geen
 *                           streepje roze in een verder grijze bladzijde.
 *   Rond en glanzend.       Grote radii, zachte glans op wat aan te duwen valt.
 *                           Dat is het onderscheid met elke andere Smidse-site.
 *
 * ## Waarom er geen donkere stand is
 *
 * Een site die haar hele merk op wit en twee felle kleuren bouwt, wordt in het
 * donker een andere site. Dit is het uithangbord van het platform, dus het
 * thema zet `color-scheme: light` en houdt het daarbij. Dat is een keuze en
 * geen vergetelheid.
 *
 * ## De letters
 *
 * Quicksand komt uit assets/letters en niet bij Google vandaan: de
 * veiligheidsregels laten geen stijlblad van een vreemde host toe. In het
 * manifest staat de stapel zonder naam, zodat er geen adres gebouwd wordt maar
 * de letter wel gebruikt. Quicksand staat onder de Open Font License.
 */

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('letters/quicksand-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('letters/quicksand-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── de grond ───────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    --grond: #FFFFFF;
    --grond-warm: #FFF4F8;
    --grond-diep: #EEF4FF;
    --paneel: #FFFFFF;

    --lijn: #E3EAF6;
    --lijn-zacht: #F0F4FC;
    --lijn-sterk: #C6D5F0;

    /* Schaduwen met een blauwe ondertoon. Grijs op wit met kobalt erin ziet er
       vuil uit; zacht blauw leest als lucht. */
    --schaduw-1: 0 1px 2px rgb(31 42 61 / 0.05);
    --schaduw-2: 0 8px 24px rgb(31 42 61 / 0.08);
    --schaduw-3: 0 20px 50px rgb(31 42 61 / 0.12);

    /*
     * Het palet komt uit de karakterbladen: de cape van het jongetje, het ijsje
     * van het meisje, de gesp en de kroon, en de kers.
     *
     * De twee lichte varianten zijn geen decoratie maar noodzaak. Vol kobalt
     * naast vol hotpink over een hele bladzijde vecht; met een lichte broer
     * ernaast valt het uit elkaar in een voorgrond en een achtergrond.
     *
     * Het goud staat op wat de moeite waard is en nergens anders — een derde
     * kleur die overal opduikt, is geen accent meer. Het kersenrood is
     * uitsluitend voor iets dringends: een termijn die verloopt, een fout in
     * een formulier. Nooit als vlak, nooit als sier.
     */
    --kobalt: var(--accent);
    --kobalt-licht: #5B8DEF;
    --roze: var(--steun);
    --roze-zacht: #FFA6C9;
    --goud: #F2B33D;
    --kers: #D62036;

    --kobalt-waas: color-mix(in oklab, var(--kobalt-licht) 26%, transparent);
    --roze-waas: color-mix(in oklab, var(--roze-zacht) 30%, transparent);

    --golf: 44px;
    --bnd-ruim: clamp(2.75rem, 7vw, 5.5rem);
}

/*
 * De donkere stand van de basis uitschakelen, en met dezelfde selector als
 * waarmee ze aangezet wordt.
 *
 * De tokens van de basis staan in `:root:not([data-thema="licht"])` binnen een
 * media-query. Een gewone `:root` in dit blad haalt dat niet, want die weegt
 * lichter. Het resultaat was een site die op een toestel in donkere stand
 * gewoon zwart werd, en dat is precies wat dit thema niet wil zijn.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]),
    :root[data-thema="donker"] {
        color-scheme: light;

        --grond: #FFFFFF;
        --grond-warm: #FFF4F8;
        --grond-diep: #EEF4FF;
        --paneel: #FFFFFF;

        --lijn: #E3EAF6;
        --lijn-zacht: #F0F4FC;
        --lijn-sterk: #C6D5F0;

        --inkt: #1F2A3D;

        --schaduw-1: 0 1px 2px rgb(31 42 61 / 0.05);
        --schaduw-2: 0 8px 24px rgb(31 42 61 / 0.08);
        --schaduw-3: 0 20px 50px rgb(31 42 61 / 0.12);
    }
}

:root[data-thema="donker"] {
    color-scheme: light;

    --grond: #FFFFFF;
    --grond-warm: #FFF4F8;
    --grond-diep: #EEF4FF;
    --paneel: #FFFFFF;

    --lijn: #E3EAF6;
    --lijn-zacht: #F0F4FC;
    --lijn-sterk: #C6D5F0;

    --inkt: #1F2A3D;
}

body {
    background: var(--grond);
    color: var(--inkt);
}

/* ── de letters ─────────────────────────────────────────────────────────── */

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 { line-height: 1.06; }
h2 { line-height: 1.12; }

.rijk p,
.prosa p,
.artikel p,
.inhoud p {
    line-height: 1.75;
    max-width: 34rem;
}

/* Het oogje boven een kop staat in het roze. Dat is de eerste plek waar de
   tweede kleur opduikt, en daardoor is ze meteen aanwezig zonder dat er een
   vlak voor nodig is. */
/* De specificiteit staat er met opzet: de basis zet .oog met een gedempte
   kleur in een regel die later in de keten komt, en een gewone .oog verliest
   dat. Dit is de plek waar de tweede kleur voor het eerst opduikt. */
:root .oog,
.hero .oog,
.sectiekop .oog {
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--roze);
}

/* ── de kop ─────────────────────────────────────────────────────────────── */

.siteKop {
    background: rgb(255 255 255 / 0.86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lijn-zacht);
}

/*
 * Het merk.
 *
 * Zolang er geen bestand in de webroot staat, is dit de naam gezet: "Baby" in
 * kobalt en "Bende" in roze, want het merk heet twee woorden. Het domein en de
 * sitenaam in de instellingen blijven één woord; dat zijn twee verschillende
 * dingen en ze mogen niet naar elkaar toe kruipen.
 *
 * Staat het kopbeeld er wel, dan is de regel: lucht eromheen, niets uitrekken,
 * en op een telefoon de badge in plaats van het brede beeld. Een breed beeld
 * met twee personages en een naam erin wordt op 390 pixels een vlek.
 */
.merk {
    gap: 0.3em;
    font-family: var(--letter-kop);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.merk__vonk,
.merk__logo {
    display: none;
}

.merk__woord--een { color: var(--kobalt); }
.merk__woord--twee { color: var(--roze); }

.merk--beeld {
    padding-block: 0.35rem;
}

/* Het brede beeld is er voor een breed scherm. Onder de zeshonderd pixels
   neemt de badge het over; staat die er niet, dan blijft het brede beeld
   staan met een bovengrens, want een vlek is nog altijd beter dan niets. */
.merk__breed {
    display: none;
    height: clamp(2.6rem, 5vw, 3.4rem);
    width: auto;
}

.merk__badge {
    height: 2.5rem;
    width: auto;
}

@media (min-width: 600px) {
    .merk__breed { display: block; }
    .merk--beeld .merk__badge { display: none; }
}

.hoofdnav__link {
    font-weight: 600;
}

.siteKop .knop--stil {
    color: color-mix(in oklab, var(--inkt) 74%, transparent);
}

.siteKop .knop--stil:hover {
    color: var(--kobalt);
}

/* ── de hero ────────────────────────────────────────────────────────────── */

/*
 * Twee wolken op wit: een kobaltblauwe links, een roze rechts. Zacht genoeg om
 * tekst op te dragen, vol genoeg om de twee kleuren meteen op tafel te leggen.
 * De onderrand loopt in een golf naar de sectie eronder.
 */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 8% 18%, var(--kobalt-waas), transparent 62%),
        radial-gradient(66% 72% at 92% 12%, var(--roze-waas), transparent 64%),
        var(--grond);
}

.hero::after {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: calc(var(--golf) * -1.2);
    height: calc(var(--golf) * 2.4);
    background: var(--grond-diep);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

.hero__inhoud {
    position: relative;
    z-index: 1;
    padding-block: clamp(2.5rem, 8vw, 5rem) calc(var(--golf) + 3rem);
}

.hero h1 {
    color: var(--inkt);
    font-size: clamp(2.4rem, 9.5vw, 4.4rem);
    text-wrap: balance;
}

/* Eén woord in de kop in het kobalt. Dat is wat een merk met twee kleuren
   doet: ze naast elkaar zetten in plaats van boven elkaar. */
.hero h1 em {
    font-style: normal;
    color: var(--kobalt);
}

.hero__tekst,
.hero p {
    color: color-mix(in oklab, var(--inkt) 78%, transparent);
    font-size: clamp(1.05rem, 3.6vw, 1.22rem);
    line-height: 1.65;
    max-width: 32rem;
}

.hero__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

/* ── knoppen: rond en met glans ─────────────────────────────────────────── */

/*
 * De glans is één lichte laag bovenaan de knop, niet een verloop over de hele
 * hoogte. Dat is wat licht doet op een geblazen vorm, en het is het detail dat
 * het geheel bij het merkbeeld houdt.
 */
.knop {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-inline: 1.5em;
    min-height: 3.1rem;
}

.knop--vol,
.knop--primair,
.knop--hoofd {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--roze) 86%, white),
        var(--roze));
    color: #fff;
    border: 0;
    box-shadow:
        0 8px 20px color-mix(in oklab, var(--roze) 34%, transparent),
        inset 0 -2px 0 color-mix(in oklab, var(--roze) 70%, black);
}

.knop--vol::before,
.knop--primair::before,
.knop--hoofd::before {
    content: '';
    position: absolute;
    inset: 2px 2px auto;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent);
    pointer-events: none;
}

.knop--vol:hover,
.knop--primair:hover,
.knop--hoofd:hover {
    filter: brightness(1.04);
}

.knop--rand {
    border: 2px solid color-mix(in oklab, var(--kobalt) 30%, transparent);
    color: var(--kobalt);
    background: var(--paneel);
}

.knop--rand:hover {
    border-color: var(--kobalt);
}

/* ── kaarten ────────────────────────────────────────────────────────────── */

.kaart,
.blok,
.paneel,
.gadget {
    border-radius: var(--radius);
    background: var(--paneel);
    border: 1px solid var(--lijn-zacht);
    box-shadow: var(--schaduw-1);
}

.kaart:hover {
    box-shadow: var(--schaduw-2);
    transform: translateY(-2px);
}

/* ── secties ────────────────────────────────────────────────────────────── */

.sectie,
section.omhulsel {
    padding-block: var(--bnd-ruim);
}

.sectiekop h2 {
    font-size: clamp(1.6rem, 5.8vw, 2.3rem);
}

.band--lucht {
    background:
        radial-gradient(80% 60% at 85% 0%, var(--roze-waas), transparent 62%),
        var(--grond-diep);
}

/* ── de wegwijzer ───────────────────────────────────────────────────────── */

.wegwijzer {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}

.wegwijzer__tegel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--paneel);
    border: 1px solid var(--lijn-zacht);
    box-shadow: var(--schaduw-1);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wegwijzer__tegel:hover {
    transform: translateY(-3px);
    box-shadow: var(--schaduw-2);
}

.wegwijzer__kop {
    font-family: var(--letter-kop);
    font-weight: 700;
    font-size: 1.2rem;
}

.wegwijzer__bij {
    font-size: 0.97rem;
    line-height: 1.55;
    color: color-mix(in oklab, var(--inkt) 66%, transparent);
}

/* De bol voor een tegel: kobalt voor lezen, roze voor doen, allebei met een
   glansje zodat ze bij de knoppen horen. */
.wegwijzer__stip {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.45), transparent 45%), var(--kobalt);
}

.wegwijzer__tegel--doen .wegwijzer__stip {
    background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.45), transparent 45%), var(--roze);
}

/* ── de teller ──────────────────────────────────────────────────────────── */

.week {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.2rem 1.35rem;
    border-radius: var(--radius);
    background: linear-gradient(120deg, var(--kobalt-waas), var(--roze-waas));
    border: 1px solid var(--lijn-zacht);
}

.week__getal {
    font-family: var(--letter-kop);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--kobalt);
}

.week__woord {
    font-size: 0.97rem;
    line-height: 1.5;
    color: color-mix(in oklab, var(--inkt) 72%, transparent);
}

/* ── de lijsten om af te vinken ─────────────────────────────────────────── */

/*
 * Elke regel is een knop over de volle breedte: wie met één hand een kraamtas
 * afvinkt, mikt niet op een vakje van twintig pixels.
 */
.vinkregel {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    width: 100%;
    padding: 1.05rem 1.15rem;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 1px solid var(--lijn-zacht);
    background: var(--paneel);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-1);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.vinkregel:hover {
    border-color: color-mix(in oklab, var(--roze) 40%, var(--lijn));
}

.vinkregel__vak {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0.05rem;
    border-radius: 999px;
    border: 2px solid color-mix(in oklab, var(--kobalt) 32%, var(--lijn));
    display: grid;
    place-items: center;
    color: #fff;
}

.vinkregel--aan {
    background: color-mix(in oklab, var(--roze) 8%, var(--paneel));
    border-color: color-mix(in oklab, var(--roze) 42%, transparent);
}

.vinkregel--aan .vinkregel__vak {
    border-color: var(--roze);
    background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.45), transparent 45%), var(--roze);
}

.vinkregel--aan .vinkregel__tekst {
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--inkt) 30%, transparent);
    color: color-mix(in oklab, var(--inkt) 55%, transparent);
}

.vinkregel__tekst {
    display: block;
    line-height: 1.5;
}

.vinkregel__bij {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: color-mix(in oklab, var(--inkt) 58%, transparent);
}

.vinkregel--eigen {
    border-style: dashed;
    cursor: default;
    box-shadow: none;
}

.invoer {
    min-height: 3.1rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    border: 2px solid var(--lijn);
    background: var(--paneel);
    color: var(--inkt);
    font: inherit;
}

.invoer:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--kobalt) 60%, transparent);
    outline-offset: 2px;
    border-color: color-mix(in oklab, var(--kobalt) 45%, transparent);
}

/* ── de rekenhulpen ─────────────────────────────────────────────────────── */

.uitslag {
    display: grid;
    gap: 0.8rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--radius);
    background: linear-gradient(125deg, var(--kobalt-waas), var(--roze-waas));
    border: 1px solid var(--lijn-zacht);
}

.uitslag__regel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.uitslag__label {
    color: color-mix(in oklab, var(--inkt) 68%, transparent);
}

.uitslag__waarde {
    font-family: var(--letter-kop);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--kobalt);
}

.uitslag__eenheid {
    font-size: 0.95rem;
    font-weight: 700;
    color: color-mix(in oklab, var(--inkt) 55%, transparent);
}

.rekenform {
    display: grid;
    gap: 1.15rem;
    max-width: 26rem;
}

.rekenform__veld {
    display: grid;
    gap: 0.35rem;
}

.rekenform__veld label {
    font-weight: 600;
    font-size: 0.97rem;
    color: color-mix(in oklab, var(--inkt) 76%, transparent);
}

.rekenform__eenheid {
    font-size: 0.85rem;
    color: color-mix(in oklab, var(--inkt) 55%, transparent);
}

.rekenform__fout {
    font-size: 0.9rem;
    color: var(--kers);
    font-weight: 600;
}

/* ── de voet ────────────────────────────────────────────────────────────── */

.siteVoet {
    background: var(--grond-diep);
    border-top: 0;
    border-radius: var(--golf) var(--golf) 0 0;
}

.siteVoet__band {
    background: transparent;
}

/* ── beweging ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .kaart:hover,
    .wegwijzer__tegel:hover {
        transform: none;
    }
}

/* ── week per week ──────────────────────────────────────────────────────── */

.weekzoek {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.7rem;
    margin-top: 1.75rem;
}

.weekzoek label {
    flex: 1 0 100%;
    font-weight: 600;
    font-size: 0.95rem;
    color: color-mix(in oklab, var(--inkt) 76%, transparent);
}

/* Het raster met de weeknummers. Kaal met opzet: wie hier komt zoekt een
   nummer, en veertig kaarten met tekst maken van een wegwijzer een leeslijst. */
.weekraster {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.weekraster__tegel {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    background: var(--paneel);
    border: 1px solid var(--lijn-zacht);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.weekraster__tegel:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--kobalt) 35%, transparent);
}

/* De eigen week krijgt de roze rand: dat is de enige tegel die van u is. */
.weekraster__tegel--eigen {
    border-color: var(--roze);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--roze) 18%, transparent);
}

.weekraster__nummer {
    font-family: var(--letter-kop);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--kobalt);
}

.weekraster__bij {
    font-size: 0.85rem;
    line-height: 1.35;
    color: color-mix(in oklab, var(--inkt) 60%, transparent);
}

.week--link {
    text-decoration: none;
    color: inherit;
}

.weekblok {
    max-width: 38rem;
    margin-bottom: 1.75rem;
}

.weekblok h2 {
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
}

.weekblok p {
    line-height: 1.72;
}

/* Het blok met wat er te doen valt staat in het roze kader: dat is het enige
   blok op de bladzijde waar iets van de lezer verwacht wordt. */
.weekblok--doen {
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--roze) 7%, var(--paneel));
    border: 1px solid color-mix(in oklab, var(--roze) 28%, transparent);
}

.weekblader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lijn-zacht);
}

/* De kop boven een stapel in een lijst. Hij staat in de lijst zelf en niet
   erbuiten, want anders klopt de opsomming voor een schermlezer niet meer. */
.lijstjes__kop {
    list-style: none;
    margin-top: 1.25rem;
}

.lijstjes__kop:first-child {
    margin-top: 0;
}

.lijstjes__kop h2 {
    font-size: 1.1rem;
    color: var(--kobalt);
}

/* Het merkje naast een punt: tweedehands kan, nieuw kopen, opletten. Het staat
   in de regel zelf en niet in een kolom ernaast, want op een telefoon bestaat
   die kolom niet. */
.vinkregel__merk {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    background: color-mix(in oklab, var(--kobalt) 10%, transparent);
    color: var(--kobalt);
}

/* ── de wenslijst ────────────────────────────────────────────────────────────

   Eén regel per wens, met de tekst links en wat ge ermee kunt rechts. Onder de
   veertig em valt dat onder elkaar, want op een telefoon is een knop naast een
   zin van drie regels niet te raken.

   De regels die al genomen zijn blijven staan en worden gedempt in plaats van
   verborgen. Wie de lijst opent wil zien dat er iets geregeld is; een rij die
   verdwijnt leest als een fout. */

.wns-lijst {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.7rem;
}

.wensregel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 2px 10px rgb(27 95 217 / 8%);
}

.wensregel--weg {
    background: color-mix(in oklab, var(--kobalt) 4%, #fff);
    opacity: 0.72;
}

.wensregel__tekst {
    flex: 1 1 14rem;
    display: grid;
    gap: 0.2rem;
}

.wensregel__titel {
    font-weight: 700;
    color: var(--inkt);
}

.wensregel__titel a {
    color: inherit;
}

/* Het merkje zit in een grid, en een grid rekt zijn kind uit tot de volle
   rijhoogte. Zonder deze twee regels wordt de pil een roze bal van zeventig
   pixels hoog met vier woorden erin. */
.wensregel__merk {
    justify-self: start;
    align-self: start;
    display: inline-block;
    line-height: 1.45;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    background: color-mix(in oklab, var(--roze, #FF4FA3) 14%, transparent);
    color: color-mix(in oklab, var(--roze, #FF4FA3) 80%, #000);
}

.wensregel__bij {
    font-size: 0.88rem;
    color: color-mix(in oklab, var(--inkt) 62%, #fff);
}

.wensregel__doen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.wensregel__nemen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* ── het formulier ───────────────────────────────────────────────────────── */

/* Een kop binnen een kaart is geen titel van de bladzijde. Op de maat van het
   thema wordt hij anderhalve regel breed en duwt hij het formulier eronder uit
   beeld. */
.wns-form h2,
.wns-deel h2 {
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
}

.wns-form {
    display: grid;
    gap: 0.9rem;
}

.wns-veld {
    display: grid;
    gap: 0.3rem;
}

.wns-veld__naam {
    font-size: 0.88rem;
    font-weight: 700;
    color: color-mix(in oklab, var(--inkt) 72%, #fff);
}

.wns-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.wns-rij .wns-veld {
    flex: 1 1 12rem;
}

.wns-rij .wns-veld--smal {
    flex: 0 1 7rem;
}

.wns-link {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0.35rem 0.6rem;
    border-radius: 0.6rem;
    background: color-mix(in oklab, var(--kobalt) 8%, transparent);
    color: var(--kobalt);
}

/* Het lokveld tegen bots. Het moet in de bladzijde staan en mag niet zichtbaar
   zijn; `display:none` slaan sommige bots juist over, dus het wordt weggezet. */
.wns-lok {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── kleingoed dat de sjablonen nodig hebben ─────────────────────────────── */

.knop--klein {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.knop--kaal {
    background: none;
    border: 0;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    color: color-mix(in oklab, var(--inkt) 50%, #fff);
    cursor: pointer;
}

.knop--kaal:hover {
    color: var(--kers, #D62036);
}

.invoer--klein {
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
    max-width: 11rem;
}

.enkel-lezers {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.klein {
    font-size: 0.85rem;
}

.gedempt {
    color: color-mix(in oklab, var(--inkt) 55%, #fff);
    font-weight: 400;
}

/* Een klacht is geen ramp: ze staat bij het veld, in gewone woorden, en ze
   duwt de rest van de bladzijde niet opzij. */
.klacht {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    border-radius: 0.8rem;
    background: color-mix(in oklab, var(--kers, #D62036) 10%, #fff);
    color: color-mix(in oklab, var(--kers, #D62036) 85%, #000);
    font-weight: 600;
}

@media (max-width: 32rem) {
    .wensregel {
        flex-direction: column;
    }

    .wensregel__doen {
        width: 100%;
    }

    .wensregel__nemen {
        flex: 1 1 100%;
    }

    .invoer--klein {
        flex: 1 1 8rem;
        max-width: none;
    }
}

/* ═══════════════════════════════════════════ het tekenwerk in de bladzijde ══

   Het merk van deze site is geen woordmerk maar twee getekende figuren. Ze
   staan hieronder als personages in de bladzijde en niet als illustratie in
   een kaartje: op ware grootte, met hun voeten op de golf, en met de tekst
   ernaast in plaats van eronder.

   Alle maten hieronder zijn gekozen voor iemand die dit met een duim bedient.
   Elk raakvlak is minstens 48 pixels hoog, ook de nummers op de weekrail. */

/* ── de kop ─────────────────────────────────────────────────────────────── */

.merk--beeld { gap: .55rem; }

.merk__teken {
    height: 2.6rem;
    width: auto;
    display: block;
}

.merk__breed { display: none; }

.merk__naam {
    display: inline-flex;
    gap: .28em;
    font-weight: 700;
    font-size: 1.28rem;
    letter-spacing: -.01em;
}

@media (min-width: 720px) {
    .merk__teken,
    .merk__naam { display: none; }

    .merk__breed {
        display: block;
        height: clamp(2.7rem, 4.4vw, 3.5rem);
        width: auto;
    }
}

/* ── de hero met de twee figuren ────────────────────────────────────────── */

.hero--duo .hero__lijf {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: end;
}

.hero--duo .hero__figuren {
    justify-self: center;
    max-width: 30rem;
    margin-bottom: calc(var(--golf) * -0.35);
}

.hero--duo .hero__figuren img {
    display: block;
    width: 100%;
    height: auto;
    /* Een zachte grondschaduw, zodat de figuren op de bladzijde staan in
       plaats van erboven te zweven. */
    filter: drop-shadow(0 18px 14px rgb(31 42 61 / .16));
}

@media (min-width: 900px) {
    .hero--duo .hero__lijf {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: clamp(2rem, 4vw, 4rem);
    }
    .hero--duo .hero__inhoud { padding-bottom: clamp(1rem, 3vw, 3rem); }
    .hero--duo .hero__figuren { max-width: none; }
}

/* ── de weekrail ────────────────────────────────────────────────────────────

   Veertig weken op een rail. Op een telefoon schuift ze; op een breed scherm
   staat ze er in een keer. De trimesters hebben niet elk een derde van de
   breedte maar hun eigen lengte: dertien, veertien en dertien weken. Dat is
   het hele punt, want drie gelijke blokken zouden liegen over hoe lang het
   derde trimester aanvoelt. */

.weekbalk {
    margin-block: clamp(2.5rem, 6vw, 4.5rem);
}

.weekbalk__kop h2 {
    margin: 0 0 .35rem;
    font-size: clamp(1.4rem, 3.4vw, 2rem);
}

.weekbalk__bij {
    margin: 0 0 1.1rem;
    color: var(--inkt-flauw, #5C6B85);
}

/* Een rij die schuift, en niet een raster.

   Met `grid-auto-flow: column` en veertig sporen rekent de browser de
   breedte van het raster uit op zijn inhoud, en die breedte lekt door naar
   de bladzijde: op een telefoon werd het document 2069 pixels breed terwijl
   het venster er 390 was, en stond elke tekst rechts afgesneden. Een rij met
   vaste onderdelen in een schuifkader doet wat er bedoeld is en houdt de
   bladzijde op haar breedte. */
.rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 0 0 .5rem;
    list-style: none;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

.rail__stap { flex: 0 0 3rem; }

.rail__stap { scroll-snap-align: start; }

.rail__knop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: var(--inkt);
    background: var(--grond-diep);
    border: 2px solid transparent;
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.rail__stap--t1 .rail__knop { background: color-mix(in oklab, var(--kobalt-licht) 16%, #fff); }
.rail__stap--t2 .rail__knop { background: color-mix(in oklab, var(--goud) 20%, #fff); }
.rail__stap--t3 .rail__knop { background: color-mix(in oklab, var(--roze-zacht) 30%, #fff); }

.rail__knop:hover,
.rail__knop:focus-visible {
    border-color: var(--kobalt);
    transform: translateY(-2px);
}

.rail__legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.1rem;
    margin: .85rem 0 0;
    font-size: .875rem;
    color: var(--inkt-flauw, #5C6B85);
}

.rail__merk {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 6px;
    vertical-align: -.2rem;
}

.rail__merk--t1 { background: color-mix(in oklab, var(--kobalt-licht) 40%, #fff); }
.rail__merk--t2 { background: color-mix(in oklab, var(--goud) 45%, #fff); }
.rail__merk--t3 { background: color-mix(in oklab, var(--roze-zacht) 60%, #fff); }

/* ── de sectiekop met het schild ────────────────────────────────────────── */

.sectiekop--schild {
    display: grid;
    gap: 1rem;
    justify-items: start;
    align-items: center;
}

.sectiekop__schild {
    width: min(20rem, 70%);
    height: auto;
    justify-self: center;
}

@media (min-width: 820px) {
    .sectiekop--schild {
        grid-template-columns: 16rem minmax(0, 1fr);
        gap: 2rem;
    }
    .sectiekop__schild { width: 100%; justify-self: start; }
}

/* ── de drie dingen die ge hier kunt doen ───────────────────────────────────

   Niet drie gelijke kaarten. Een brede band met het figuur erin, en twee
   regels eronder. Zo staat er een volgorde in, en die is er ook: het
   afvinken is wat mensen hier het vaakst komen doen. */

.doen__groot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: end;
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
    border-radius: var(--radius-xl, 26px);
    background: linear-gradient(135deg, #fff, var(--grond-warm));
    border: 2px solid var(--roze-waas);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.doen__groot:hover { transform: translateY(-3px); box-shadow: var(--schaduw-2); }

.doen__figuur {
    width: min(11rem, 45%);
    height: auto;
    justify-self: center;
    filter: drop-shadow(0 12px 10px rgb(31 42 61 / .14));
}

@media (min-width: 760px) {
    .doen__groot { grid-template-columns: minmax(0, 1fr) 13rem; gap: 2rem; }
    .doen__figuur { width: 100%; justify-self: end; }
}

.doen__oog {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--roze);
    margin-bottom: .4rem;
}

.doen__kop {
    display: block;
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    line-height: 1.2;
    margin-bottom: .6rem;
}

.doen__bij {
    display: block;
    color: var(--inkt-flauw, #5C6B85);
    max-width: 46ch;
}

.doen__gaan {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    min-height: 2.75rem;
    font-weight: 700;
    color: var(--kobalt);
}

.doen__paar {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 760px) {
    .doen__paar { grid-template-columns: 1fr 1fr; }
}

.doen__regel {
    display: block;
    padding: clamp(1.1rem, 2.6vw, 1.6rem);
    border-radius: var(--radius-l, 20px);
    background: #fff;
    border: 1px solid var(--lijn);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease, transform .16s ease;
}

.doen__regel:hover { border-color: var(--kobalt); transform: translateY(-2px); }
.doen__regel .doen__oog { color: var(--kobalt); }
.doen__regel .doen__kop { font-size: 1.1rem; }

/* ── de rubrieken ───────────────────────────────────────────────────────── */

.rubrieken {
    display: grid;
    gap: .75rem;
}

.rubriek {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.1rem;
    align-items: center;
    min-height: 4.5rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-l, 20px);
    background: #fff;
    border: 1px solid var(--lijn);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease, background .16s ease;
}

.rubriek:hover { border-color: var(--roze); background: var(--grond-warm); }

.rubriek__cijfer {
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--roze-zacht);
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    text-align: center;
}

.rubriek__kop { display: block; font-size: 1.12rem; }
.rubriek__bij { display: block; color: var(--inkt-flauw, #5C6B85); margin-top: .15rem; }

.rubriek__telling {
    display: block;
    margin-top: .3rem;
    font-size: .8125rem;
    color: var(--kobalt);
    font-weight: 600;
}

.rubriek__pijl { color: var(--kobalt); display: flex; }

/* ── de leeslijst ───────────────────────────────────────────────────────── */

.leeslijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

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

.leeslijst__regel a {
    display: block;
    padding: 1.1rem .25rem;
    min-height: 3.5rem;
    text-decoration: none;
    color: inherit;
}

.leeslijst__regel a:hover strong { color: var(--kobalt); }

.leeslijst__regel strong {
    display: block;
    font-size: 1.08rem;
    line-height: 1.35;
}

.leeslijst__regel span {
    display: block;
    color: var(--inkt-flauw, #5C6B85);
    margin-top: .2rem;
    max-width: 62ch;
}

.leeslijst--groot .leeslijst__regel strong { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }

/* ── de kop van een rubriekbladzijde ────────────────────────────────────── */

.rubriekkop {
    padding-block: clamp(1.75rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(var(--grond-diep), #fff);
}

.rubriekkop h1 {
    margin: .15rem 0 .6rem;
    font-size: clamp(1.8rem, 5vw, 3rem);
}

.rubriekkop__bij {
    margin: 0;
    max-width: 58ch;
    font-size: 1.06rem;
    color: var(--inkt-flauw, #5C6B85);
}

.rubriekkop__telling {
    margin: .9rem 0 0;
    font-weight: 700;
    color: var(--kobalt);
}

.leegte {
    padding: 2rem 0;
    font-size: 1.05rem;
    color: var(--inkt-flauw, #5C6B85);
}

/* ══════════════════════════════════════════════════════ ronde 3: nagekeken ══

   Wat er op de schermafdrukken te zien was en wat eruit volgt.

   · Op 390 breed liep de hele bladzijde over: de documentbreedte was 2073 in
     plaats van 390, en dus stond elke tekst rechts afgesneden. De oorzaak is
     de weekrail: ze staat in een raster, en een rasteronderdeel is standaard
     zo breed als zijn inhoud. Veertig knoppen van drie rem duwen de bladzijde
     dan ruim vijf schermen breed. `min-width: 0` zet dat terug en pas dan doet
     `overflow-x: auto` waarvoor ze er staat.
   · Op 1280 stopte de rail bij week 23 en was er van de laatste zeventien
     weken niets te zien zonder te schuiven. Op een breed scherm horen ze er
     alle veertig te staan, en dat kan in twee rijen van twintig.
   · De kopbalk stond op 56 pixels hoog. De namen in de badge werden daardoor
     acht pixels en dat leest niemand. Ze mag hoger, en de kop mag meer lucht.
   · Raakvlakken onder de 44 pixels: de links in de voet stonden op 29 en het
     invulveld van de nieuwsbrief op 30. Beide zijn nu 44 of meer.
*/

.weekbalk { min-width: 0; }

.rail {
    min-width: 0;
    width: 100%;
}

@media (min-width: 860px) {
    /* Veertig weken in twee rijen van twintig: alles staat er, niets schuift,
       en de twee rijen lezen als de twee helften van een zwangerschap. */
    .rail {
        display: grid;
        grid-template-columns: repeat(20, minmax(0, 1fr));
        overflow-x: visible;
        gap: 5px;
    }
    .rail__stap { flex: none; }
}

/* ── de kop krijgt lucht en het merk wordt leesbaar ─────────────────────── */

.siteKop__balk {
    padding-block: .55rem;
    gap: 1rem;
}

@media (min-width: 720px) {
    .merk__breed { height: clamp(3.2rem, 5vw, 4.4rem); }
    .siteKop__balk { padding-block: .7rem; }
}

/* De navigatie stond in een grijs dat op wit net 3,4:1 haalt. Op de inkt van
   de site komt ze op 12:1, en de actieve staat is het roze eronder. */
.hoofdnav__link {
    color: var(--inkt);
    font-weight: 600;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}

.hoofdnav__link[aria-current] { color: var(--kobalt); }

/* ── het schild blijft binnen zijn kader ───────────────────────────────── */

.sectiekop--schild { overflow: hidden; }
.sectiekop__schild { max-width: 100%; }

/* ── ruimte: de gaten tussen de banden waren te groot ───────────────────── */

.weekbalk { margin-block: clamp(2rem, 4.5vw, 3.25rem); }
.hero--duo + .weekbalk { margin-top: clamp(1.25rem, 3vw, 2rem); }

/* ── raakvlakken van 44 pixels, overal ─────────────────────────────────── */

.sitevoet a,
.voet a,
.voetlijst a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.voet input[type="email"],
.nieuwsbrief input,
input.invoer {
    min-height: 2.9rem;
}

/* De voet stond in een grijs dat op de lichte lucht onder de 4,5:1 zakt. */
.sitevoet,
.voet {
    color: var(--inkt);
}

.sitevoet a,
.voet a {
    color: var(--inkt);
    text-decoration-color: color-mix(in oklab, var(--kobalt) 40%, transparent);
}

.sitevoet a:hover,
.voet a:hover { color: var(--kobalt); }

/* ══════════════════════════════════════════════════════ ronde 4: nagemeten ══

   Gemeten in plaats van ingeschat. Wat de meting op 390 opleverde en wat
   eruit volgt:

   · De zin in de lege advertentieplek liep 208 pixels buiten het scherm. Een
     regel tussen twee streepjes in een flexrij krimpt niet vanzelf.
   · De links in de voet waren 29 pixels hoog, het invulveld van de
     nieuwsbrief 30, en het merk 43. Onder de 44 mist een duim.
   · De klasse van de voet heet siteVoet en niet sitevoet, dus de vorige
     ronde raakte er niets van. Dat is het soort fout dat ge alleen ziet door
     na te meten.
*/

.advies__woord {
    min-width: 0;
    flex: 0 1 auto;
    text-wrap: balance;
}

@media (max-width: 520px) {
    /* Op een smal scherm passen de twee streepjes en de zin niet naast
       elkaar. Dan valt het linkse streepje weg en staat de zin links. */
    .advies__leeg { gap: .6rem; }
    .advies__leeg .advies__streep:first-child { display: none; }
    .advies__woord { text-align: left; }
}

.siteVoet a,
.siteVoet__raster a,
.siteVoet__onder a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--inkt);
}

.siteVoet a:hover { color: var(--kobalt); }

/* De voet stond in een grijs dat op de lichte lucht 3,1 tegen 1 haalde. De
   inkt haalt er 12 tegen 1. */
.siteVoet,
.siteVoet .klein,
.siteVoet .gedempt,
.siteVoet__over {
    color: var(--inkt);
}

.siteVoet .bouwvermelding { color: var(--inkt-flauw, #5C6B85); }

.invoer,
input.invoer,
input[type="email"],
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
    min-height: 2.9rem;
}

.merk {
    min-height: 2.9rem;
}

/* De links in de voet stonden in een stapel, en inline-flex uit de vorige
   ronde zette ze naast elkaar. Block-flex houdt de stapel en houdt het
   raakvlak op 44 pixels. */
.siteVoet__raster a,
.siteVoet__onder a { display: flex; width: fit-content; }

/* De tekst in de brede band stopte op 46 tekens terwijl er ruim 70 pasten, en
   dan staat er rechts van de zin een halve kolom niets. */
.doen__groot .doen__bij { max-width: 62ch; }
.doen__regel .doen__bij { max-width: 48ch; }

/* De hero had onder de knoppen bijna driehonderd pixels lucht staan die
   niemand gevraagd had. */
.hero--duo .hero__lijf { padding-block: clamp(1.5rem, 4vw, 3rem); }

/* Het kruimelpad. De links stonden op 21 pixels hoog en dat raakt een duim
   niet; op een telefoon is dit bovendien de enige weg terug. */
.kruimels a,
.kruimels span { display: inline-flex; align-items: center; min-height: 2.75rem; }
.kruimels { flex-wrap: wrap; }

/* ══════════════════════════════════════════════════ de weekbladzijden ══

   Wat er op de afdruk van week 23 te zien was: een kop van negenhonderd pixels
   hoog waarvan er zeshonderd leeg stonden, en daaronder twee alinea's in een
   smalle kolom met driekwart van het scherm ernaast. De kop was gebouwd voor
   de voorpagina, waar een beeld naast de tekst staat; hier staat er niets.
*/

.hero--kort .hero__lijf {
    padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.75rem, 4vw, 3rem);
    min-height: 0;
}

.hero--kort { min-height: 0; }

.hero--kort h1 {
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    margin: .2rem 0 .5rem;
}

.hero--kort .hero__tekst { margin-bottom: 0; max-width: 40ch; }

/* De vorderingsbalk. Eén maat, geen sier: hoever ge staat in de veertig. */
.vorderning {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1.35rem 0 0;
    max-width: 30rem;
}

.vorderning__balk {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--kobalt-licht) 22%, #fff);
    overflow: hidden;
}

.vorderning__deel {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--kobalt-licht), var(--roze));
}

.vorderning__woord {
    flex: 0 0 auto;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--inkt-flauw, #5C6B85);
    font-variant-numeric: tabular-nums;
}

/* De twee blokken naast elkaar op een breed scherm. Twee alinea's onder elkaar
   in een kolom van vierendertig rem, met zevenhonderd pixels wit ernaast, is
   geen bladzijde maar een kladblok. */
.weekblok {
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.75rem);
    border-radius: var(--radius-l, 20px);
    background: #fff;
    border: 1px solid var(--lijn);
}

.weekblok h2 {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
}

.weekblok p {
    margin: 0;
    max-width: 62ch;
    line-height: 1.7;
}

.weekblok--doen {
    background: var(--grond-warm);
    border-color: var(--roze-waas);
}

@media (min-width: 900px) {
    /* De twee vaste blokken naast elkaar, het derde eronder over de volle
       breedte: dat derde is wat er te dóen valt, en dat mag zwaarder wegen. */
    .sectie:has(> .weekblok) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 clamp(1rem, 2.5vw, 2rem);
        align-items: start;
    }
    .weekblok--doen,
    .sectie > .klein,
    .weekblader,
    .sprongrij,
    .sectie:has(> .weekblok) > p:last-of-type { grid-column: 1 / -1; }
}

/* De sprongrij: elf weken rond de huidige. */
.sprongrij {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 1.5rem;
}

.sprongrij__knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 2.75rem;
    border-radius: 12px;
    background: var(--grond-diep);
    color: var(--inkt);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    border: 2px solid transparent;
}

.sprongrij__knop:hover { border-color: var(--kobalt); }

.sprongrij__knop--hier {
    background: var(--kobalt);
    color: #fff;
}

/* "Alle weken" stond in een grijs dat op wit onder de 4,5 tegen 1 zakt. */
.weekblader .knop--stil {
    color: var(--kobalt);
    font-weight: 600;
    min-height: 2.75rem;
}

.weekblader { align-items: center; }