/*
 * De blokken.
 *
 * Zestien onderdelen voor een verkooppagina, in de kleur van het thema dat de
 * klant koos. Dat laatste is het hele punt van dit bestand: de onderdelen
 * komen uit een bank waar ze hun eigen palet hadden, en hier is dat palet
 * vertaald naar de tokens van Aambeeld. Er staat dus geen enkele kleur vast.
 * Zet de klant morgen een ander accent in het beheer, dan verschuiven deze
 * zestien mee.
 *
 * De vertaling staat één keer, hieronder op de wortel. Verder in dit bestand
 * wijst alles naar --blok-*, en niets naar het thema rechtstreeks. Wie dit
 * meeneemt naar een andere basis, wijzigt één blok in plaats van
 * driehonderd regels na te lopen. Ze hoort op de wortel en niet op het blok
 * zelf: wat op het element staat, wint van wat het erft, en dan kan een
 * donkere band haar eigen inkt niet meer doorgeven.
 *
 * De klassen dragen allemaal het voorvoegsel blok. Zonder dat botst .prijs
 * hier met .prijs van de webshop, en dan verandert een verkooppagina de
 * productkaarten.
 */

:root {
    /* ── de vertaling van de bank naar Aambeeld ──────────────────────────── */
    /*
       Waarom deze vertaling op :root staat en niet op .blok zelf.
       Ze stond tot 20 september 2026 op `:where(.blok, .blok-knop,
       .blok-vergroot)`. Een aangepaste eigenschap die op het element zelf
       staat, wint altijd van dezelfde eigenschap die het van een voorouder
       erft. Een thema dat op een donkere band `--blok-inkt: wit` zet, werd
       dus door het blok zelf weer op de donkere inkt gezet, en dan staat er
       een zwarte kop op een zwarte band. Op de startpagina van een
       kraanverhuurder waren zo elf blokken onleesbaar: de machinekaarten,
       de troeven, het park, het paneel, de dekkingslijst en de vragen.

       Op :root bestaan dezelfde waarden overal — ook voor de knop en het
       vergrootglas die buiten een blok gebruikt worden — en kan een band ze
       wél overschrijven. Geen enkel thema zet een --blok-waarde op :root, dus
       er is niets dat hierdoor van plaats wisselt; nagemeten over alle
       thema's op 20 september 2026.
    */
    --blok-grond: var(--grond, #fff);
    --blok-paneel: var(--paneel, #fff);
    --blok-inkt: var(--inkt, #1a1a1a);
    --blok-inkt-zacht: var(--inkt-gedempt, #6b6a5f);
    /* De flauwste inkt, voor een onderschrift bij een tekening. Ze stond op
       --inkt-flauw van de huid, en die is met opzet bleek: op wit haalt
       #9c9a8e 2,7 tegen 1 en dat is voor lopende tekst te weinig. Uit de inkt
       zelf gemengd blijft het dezelfde kleurfamilie en haalt ze boven de vier
       en een half. Een band die haar eigen inkt zet, zet ook haar eigen
       flauwe inkt, om dezelfde reden als bij de veldlijn hieronder. */
    --blok-flauw: color-mix(in srgb, var(--blok-inkt) 62%, transparent);
    --blok-accent: var(--accent, #2f6f62);
    --blok-accent-diep: var(--accent-diep, var(--accent, #2f6f62));
    --blok-accent-waas: var(--accent-waas, rgb(47 111 98 / .14));

    /* De accentkleur als tekstkleur, en dat is niet dezelfde kleur.
       Het amber van een kraanverhuurder haalt negen op één tegen zwart en
       nog geen twee tegen wit. Een leus in dat amber leest dus prima op de
       donkere stand en verdwijnt op de lichte. De huid rekent zelf een
       tekstveilige variant uit (--accent-tekst); die wordt hier gebruikt, en
       op de donkere stand wint het volle accent weer. Gemeten op de
       materieelbladzijde in allebei de standen. */
    --blok-accent-tekst: var(--accent-tekst, var(--accent-diep, var(--accent)));
    --blok-op-accent: var(--op-accent, #fff);
    /* De steunkleur van de huid, en pas daarna de groene van een geslaagde
       handeling. Het stond omgekeerd, en dan las dit blok een variabele die
       geen enkele huid zet: de vinkjes in een prijskaart stonden overal groen,
       ook op een huid met een roze accent en een oker steunkleur. Gezien bij
       Knitoo op 16 september 2026, door ernaar te kijken. */
    --blok-steun: var(--steun, var(--goed, #2c7a4b));
    --blok-lijn: var(--lijn, #e4e1d6);

    /* De rand van een bedieningselement, en dat is iets anders dan de haarlijn
       tussen twee alinea's. Een invoerveld, een pil en een knop zonder vulling
       worden herkend aan hun rand en aan niets anders; --blok-lijn is daar met
       opzet te zwak voor. Op de donkere huid van een kraanverhuurder komt ze op
       1,2 tegen de achtergrond uit, en dan staat er op een werf in de zon geen
       veld maar een gat. Drie op een is de ondergrens voor wat geen tekst is.
       Gemengd uit de inkt van het thema haalt ze daarboven op de lichte en op
       de donkere stand, en ze blijft de kleur van de klant. Deze regel hoort
       na --blok-inkt en niet ervoor: staat ze eerder, dan bestaat --blok-inkt
       nog niet, valt de menging weg en wordt de rand currentColor. Dat gaf
       een spierwitte lijn van twee pixels rond de belknop. Gezien en gemeten
       op 19 september 2026. Een band die haar eigen inkt zet, zet ook haar
       eigen --blok-lijn-veld, want een menging wordt uitgerekend waar ze
       geschreven staat en niet waar ze gelezen wordt. */
    --blok-lijn-veld: color-mix(in srgb, var(--blok-inkt) 45%, transparent);
    --blok-nacht: var(--banier, #16150f);
    --blok-op-nacht: var(--op-banier, #f2f0e9);
    --blok-nacht-zacht: color-mix(in oklab, var(--blok-op-nacht) 66%, transparent);

    --blok-radius: var(--radius-l, 14px);
    --blok-radius-klein: var(--radius-s, 4px);
    --blok-kop-font: var(--kop-font, ui-sans-serif, system-ui, sans-serif);
    --blok-lees: 40rem;

    /* Het spectrum is het enige wat niet uit het thema komt: het is een
       verloop en geen kleur, en een thema kent er geen. Wie het merk van de
       klant erin wil, zet deze ene regel om in zijn eigen thema. */
    --blok-spectrum: linear-gradient(
        90deg,
        #f5230e 0%, #ff7a00 16.6%, #ffc400 33.3%, #5fc916 50%,
        #12c9e8 66.6%, #0a6bf0 83.3%, #5a22c4 100%
    );
}

/* De inkt zelf hangt wél aan het blok, want dat is de tekstkleur van het
   onderdeel en geen instelling. Ze leest de waarde die op dat punt geldt: die
   van de wortel, of die van de band waar het blok in staat. */
:where(.blok, .blok-knop, .blok-vergroot) {
    color: var(--blok-inkt);
}

/* Voor wat alleen een schermlezer hoeft te horen. */
.blok__stil {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════ spectrum ══
 *
 * De streep, en dezelfde beweging in één woord van de kop. Het verloop is
 * twee keer zo breed als het vlak en schuift over precies zijn eigen breedte,
 * dus de lus is naadloos. Achttien seconden per ronde: een teken van leven,
 * geen animatie waar iemand naar moet kijken.
 */
@keyframes blokSpectrum {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }
}

.blok-spectrum__lijn {
    height: 5px;
    background: var(--blok-spectrum);
    background-size: 200% 100%;
    animation: blokSpectrum 18s linear infinite;
}

.blok-spectrum__kop {
    margin: 1.5rem 0 0;
    font-family: var(--blok-kop-font);
    font-size: clamp(1.75rem, 3.8vw, 2.5rem);
    line-height: 1.14;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.blok-spectrum__woord {
    font-style: normal;
    background: var(--blok-spectrum);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: blokSpectrum 14s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .blok-spectrum__lijn,
    .blok-spectrum__woord { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════ winkels ══
 *
 * Twee toestanden. Staat de app in de winkel, dan is het een gewone link.
 * Staat hij er nog niet, dan aria-disabled met "Binnenkort" eronder. Een knop
 * die nergens heen gaat zonder dat te zeggen, is de snelste manier om
 * vertrouwen te verliezen.
 */
.blok-winkels { display: flex; flex-wrap: wrap; gap: .75rem; }

.blok-winkel {
    display: inline-flex; align-items: center; gap: .7rem;
    padding: .75rem 1.35rem;
    border: 1px solid transparent;
    border-radius: calc(var(--blok-radius) * .8);
    background: var(--blok-inkt);
    color: var(--blok-grond);
    text-decoration: none; font-weight: 650; line-height: 1.15;
    transition: transform .16s ease, box-shadow .16s ease;
}

.blok-winkel:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgb(0 0 0 / .28); }
.blok-winkel small { display: block; font-size: .68rem; font-weight: 500; opacity: .64; }
.blok-winkel svg { width: 22px; height: 22px; flex: none; }

.blok-winkel[aria-disabled="true"] {
    background: transparent;
    color: var(--blok-inkt);
    border-color: var(--blok-lijn);
    cursor: default;
}

.blok-winkel[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════ cijfers ══
 *
 * Eén uitgewerkt voorbeeld dat het product zelf doorrekent. Dat is waar en het
 * is meteen een demonstratie, en het is het enige soort cijfer dat je zonder
 * bron mag tonen.
 */
.blok-cijfers {
    display: grid; gap: 1px;
    background: var(--blok-lijn);
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius);
    overflow: hidden;
}

@media (min-width: 44rem) { .blok-cijfers { grid-template-columns: repeat(3, 1fr); } }

.blok-cijfers > div { background: var(--blok-grond); padding: 1.5rem; }

.blok-cijfers strong {
    display: block;
    font-family: var(--blok-kop-font);
    font-size: 2rem; line-height: 1.1;
    color: var(--blok-accent-diep);
    margin-bottom: .35rem;
}

.blok-cijfers span { color: var(--blok-inkt-zacht); font-size: .95rem; }

/* ═════════════════════════════════════════════════════════════════ keuze ══
 *
 * Vier opties, dezelfde gekleurde balk, verschillend gearceerd overschot. Het
 * argument staat in het beeld in plaats van in de tekst. Vier balkjes vragen
 * geen bibliotheek: een rij per optie en de breedte via een aangepaste
 * eigenschap.
 */
.blok-keuze {
    background: var(--blok-grond);
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius);
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.blok-keuze__kop {
    display: flex; flex-wrap: wrap;
    align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem;
}

.blok-keuze__kop h3 { margin: 0; font-family: var(--blok-kop-font); font-size: 1.18rem; }

.blok-keuze__kop label {
    display: flex; align-items: center; gap: .6rem;
    font-size: .86rem; font-weight: 600; color: var(--blok-inkt-zacht);
}

.blok-keuze__kop input {
    width: 5.5rem; padding: .5rem .7rem;
    font: inherit; color: var(--blok-inkt);
    background: var(--blok-paneel);
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius-klein);
}

.blok-keuze__staven { display: grid; gap: .9rem; }

.blok-staaf { display: grid; gap: .15rem 1rem; grid-template-columns: 1fr; align-items: center; }

@media (min-width: 42rem) {
    .blok-staaf { grid-template-columns: 11rem 1fr auto; gap: 1rem; }
}

.blok-staaf__naam { font-size: .95rem; }

.blok-staaf__balk {
    position: relative; height: 1.9rem;
    background: var(--blok-accent-waas);
    border-radius: 6px; overflow: hidden;
}

.blok-staaf__nodig {
    position: absolute; inset: 0 auto 0 0;
    width: var(--blok-nodig, 50%);
    background: var(--blok-accent);
    border-radius: 6px 0 0 6px;
}

/* Wat erbovenop in de berging belandt. Gestreept, want het is geen verf die
   iets doet: het is verlies, en dat hoort er ook uit te zien. */
.blok-staaf__over {
    position: absolute; top: 0; bottom: 0;
    left: var(--blok-nodig, 50%);
    width: var(--blok-over, 10%);
    background: repeating-linear-gradient(-45deg, var(--blok-flauw) 0 5px, transparent 5px 10px);
    border-right: 2px solid var(--blok-flauw);
}

.blok-staaf__cijfer { font-size: .9rem; color: var(--blok-inkt-zacht); white-space: nowrap; }
.blok-staaf__cijfer b { color: var(--blok-inkt); font-weight: 700; }

.blok-staaf--gekozen .blok-staaf__naam { font-weight: 700; }
.blok-staaf--gekozen .blok-staaf__naam::after {
    content: ""; display: inline-block;
    width: .45rem; height: .8rem; margin-left: .5rem;
    border: 2px solid var(--blok-steun);
    border-top: 0; border-left: 0;
    transform: rotate(42deg) translateY(-2px);
}

.blok-keuze__legenda {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    margin: 1rem 0 0; font-size: .84rem; color: var(--blok-inkt-zacht);
}

.blok-keuze__legenda span { display: inline-flex; align-items: center; gap: .45rem; }
.blok-keuze__legenda i { width: 1.1rem; height: .75rem; border-radius: 3px; background: var(--blok-accent); }
.blok-keuze__legenda i.rest {
    background: repeating-linear-gradient(-45deg, var(--blok-flauw) 0 4px, transparent 4px 8px);
    border: 1px solid var(--blok-flauw);
}

/* ═════════════════════════════════════════════════════════════════ troef ══
 *
 * De kop zegt wat het oplevert, niet wat het is. De spectrumrand links is het
 * enige merkgebaar op de kaart; meer zou zes kaarten in een raster tot een
 * kermis maken.
 */
.blok-troeven {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.blok-troef {
    position: relative; overflow: hidden;
    background: var(--blok-paneel);
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius);
    padding: 1.6rem 1.6rem 1.6rem 1.9rem;
}

.blok-troef::before {
    content: ""; position: absolute; inset: 0 auto 0 0;
    width: 3px; background: var(--blok-spectrum); opacity: .9;
}

.blok-troef h3 { margin: 0 0 .5rem; font-family: var(--blok-kop-font); font-size: 1.18rem; }
.blok-troef p { margin: 0; color: var(--blok-inkt-zacht); font-size: .97rem; }

/* ═════════════════════════════════════════════════════════════ rekenhulp ══
 *
 * Twee getallen die vermenigvuldigd worden, meer is het niet, en het is het
 * sterkste stuk van een verkooppagina: het is het geld van de lezer op het
 * scherm. Vul nooit een bedrag in als bewering; zet er een startwaarde in die
 * hij aanpast.
 */
.blok-rekenhulp {
    background: var(--blok-paneel);
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius);
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.blok-rekenhulp__rij { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }

.blok-rekenhulp label {
    display: block; flex: 1 1 8rem;
    font-size: .86rem; font-weight: 600; color: var(--blok-inkt-zacht);
}

.blok-rekenhulp input {
    display: block; width: 100%;
    margin-top: .4rem; padding: .7rem .85rem;
    font: inherit; font-size: 1.05rem;
    color: var(--blok-inkt);
    background: var(--blok-grond);
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius-klein);
}

.blok-rekenhulp__uitkomst { border-top: 1px solid var(--blok-lijn); padding-top: 1.1rem; }

.blok-rekenhulp__bedrag {
    margin: 0;
    font-family: var(--blok-kop-font);
    font-size: clamp(2.4rem, 7vw, 3.4rem);
    line-height: 1;
    color: var(--blok-accent-diep);
}

.blok-rekenhulp__uitkomst p { margin: .5rem 0 0; color: var(--blok-inkt-zacht); font-size: .95rem; }

/* ═══════════════════════════════════════════════════════════════ blikken ══
 *
 * Getekend met randen en een verloop, niet als afbeelding: het schaalt mee en
 * klopt vanzelf in de donkere stand. De lijn eronder is een plank. Zonder die
 * lijn zweven de blikken in het midden van hun vak.
 */
.blok-blikken {
    position: relative;
    display: flex; align-items: flex-end; justify-content: center;
    gap: .9rem; min-height: 15rem; padding-bottom: .9rem;
}

.blok-blikken::after {
    content: ""; position: absolute;
    left: 8%; right: 8%; bottom: 0; height: 2px;
    background: var(--blok-accent); opacity: .35; border-radius: 2px;
}

.blok-blik {
    position: relative;
    width: clamp(3.4rem, 10vw, 5.2rem);
    border: 2px solid var(--blok-accent);
    border-radius: 6px 6px 10px 10px;
    background: linear-gradient(to bottom, transparent 0 var(--blok-vulling, 40%), var(--blok-accent) var(--blok-vulling, 40%) 100%);
    opacity: .85;
}

.blok-blik::before {
    content: ""; position: absolute;
    left: 18%; right: 18%; top: -.7rem; height: .7rem;
    border: 2px solid var(--blok-accent); border-bottom: 0;
    border-radius: 8px 8px 0 0; opacity: .75;
}

/* ════════════════════════════════════════════════════════════════ oproep ══
 *
 * Een knop op het moment van instemmen is meer waard dan drie knoppen
 * onderaan. Zet hem waar de lezer net overtuigd is geraakt.
 */
.blok-oproep {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius);
    background: var(--blok-paneel);
}

.blok-oproep p {
    margin: 0; flex: 1 1 16rem;
    font-family: var(--blok-kop-font);
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════ vast ══
 *
 * De balk die onderaan blijft staan zodra de kop uit beeld is. Op een pagina
 * van zeven schermhoogtes staat de knop anders alleen bovenaan en helemaal
 * onderaan.
 *
 * Hij verschijnt zonder script, via de scroll-tijdlijn van de browser. Let op
 * bij het overnemen: een view-tijdlijn werkt hier niet, want die meet of het
 * element zelf in beeld komt, en een vastgezette balk staat per definitie
 * altijd in beeld. Kent een browser dit niet, dan staat hij er altijd, en dat
 * is de veilige kant om op te falen.
 */
.blok-vast {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--laag-plakkend, 20);
    background: var(--blok-nacht);
    border-top: 1px solid color-mix(in oklab, var(--blok-op-nacht) 12%, transparent);
    padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom, 0px));
}

.blok-vast::before {
    content: ""; display: block; position: absolute;
    left: 0; right: 0; top: 0; height: 3px;
    background: var(--blok-spectrum);
    background-size: 200% 100%;
    animation: blokSpectrum 18s linear infinite;
}

.blok-vast__binnen {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
    width: 100%; max-width: var(--breedte, 1320px);
    margin-inline: auto; padding-inline: var(--gutter, 1.5rem);
}

.blok-vast__zin {
    flex: 1 1 12rem; min-width: 0; margin: 0;
    color: var(--blok-op-nacht); font-size: .95rem; line-height: 1.35;
}

.blok-vast__zin small { display: block; color: var(--blok-nacht-zacht); font-size: .82rem; }

.blok-vast .blok-winkel {
    padding: .55rem 1rem; font-size: .9rem;
    background: var(--blok-op-nacht); color: var(--blok-nacht);
}

.blok-vast .blok-winkel[aria-disabled="true"] {
    background: transparent; color: var(--blok-op-nacht);
    border-color: color-mix(in oklab, var(--blok-op-nacht) 28%, transparent);
}

@supports (animation-timeline: scroll()) {
    .blok-vast {
        opacity: 0;
        transform: translateY(100%);
        animation: blokVastIn linear both;
        animation-timeline: scroll(root block);
        animation-range: 68vh 88vh;
    }
    @keyframes blokVastIn {
        from { opacity: 0; transform: translateY(100%); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .blok-vast { opacity: 1; transform: none; animation: none; }
    .blok-vast::before { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════ prijs ══
 *
 * Gratis eerst, het bedrag letterlijk zichtbaar, en het uitgelichte niveau met
 * een rand in de accentkleur. Zet er "eenmalig" bij als het dat is: dat is
 * voor veel mensen het argument, niet de prijs zelf.
 */
.blok-prijzen {
    display: grid; gap: 1.25rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.blok-prijs {
    background: var(--blok-paneel);
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius);
    padding: 1.75rem;
}

.blok-prijs--uitgelicht {
    border-color: var(--blok-accent);
    box-shadow: 0 14px 36px var(--blok-accent-waas);
}

.blok-prijs h3 { margin: 0; font-family: var(--blok-kop-font); font-size: 1.18rem; }

.blok-prijs__bedrag {
    margin: .7rem 0 .25rem;
    font-family: var(--blok-kop-font);
    font-size: 2.5rem; line-height: 1;
}

.blok-prijs__bedrag small { font-size: .88rem; color: var(--blok-inkt-zacht); font-family: inherit; }

.blok-prijs ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }

.blok-prijs li {
    position: relative; padding-left: 1.6rem;
    margin-bottom: .55rem; color: var(--blok-inkt-zacht); font-size: .97rem;
}

.blok-prijs li::before {
    content: ""; position: absolute; left: .15rem; top: .42em;
    width: .45rem; height: .8rem;
    border: 2px solid var(--blok-steun); border-top: 0; border-left: 0;
    transform: rotate(42deg);
}

/* ═════════════════════════════════════════════════════════════════ vraag ══
 *
 * Gewone details-elementen, dus het werkt zonder script en een zoekmachine
 * leest het gewoon. Zet dezelfde tekst woordelijk in de FAQPage-gegevens:
 * loopt dat uiteen, dan wordt het blok genegeerd.
 */
/* De witruimte zat op de `details` en niet op de `summary`. Dat ziet er
   hetzelfde uit en het is het niet: enkel de summary is het tikdoel, dus stond
   er een rij van vierentwintig pixels met achttien pixels dode marge erboven en
   eronder. Gemeten op 390 en op 1280 op 19 september 2026: elke vraag van één
   regel kwam op 24 uit. De ruimte staat nu voor de helft op allebei, zodat de
   rij even hoog blijft en het hele blok raak is. */
.blok-vraag details { border-bottom: 1px solid var(--blok-lijn); padding: .55rem 0; }

.blok-vraag summary {
    display: flex; gap: 1rem; align-items: center;
    cursor: pointer; font-weight: 650; list-style: none;
    padding-block: .55rem; min-block-size: 44px;
}

.blok-vraag summary::-webkit-details-marker { display: none; }

.blok-vraag summary::after {
    content: "+"; margin-left: auto;
    color: var(--blok-accent); font-size: 1.3rem; line-height: 1;
}

.blok-vraag details[open] summary::after { content: "\2212"; }
.blok-vraag details p { margin: .3rem 0 .55rem; color: var(--blok-inkt-zacht); max-width: var(--blok-lees); }

/* ═════════════════════════════════════════════════════════════════ maker ══
 *
 * Een verkooppagina zonder afzender leest als een advertentie; een naam en een
 * adres maken er een bedrijf van. Het jaartal doet het werk: het zegt in één
 * blik dat dit niet de eerste poging is.
 */
.blok-maker {
    display: grid; gap: 1.5rem 3rem;
    grid-template-columns: 1fr; align-items: center;
}

@media (min-width: 46rem) { .blok-maker { grid-template-columns: auto 1fr; } }

.blok-maker__jaartal {
    font-family: var(--blok-kop-font);
    font-size: clamp(3rem, 9vw, 4.6rem);
    line-height: .9;
    color: var(--blok-accent-diep);
}

.blok-maker__jaartal small {
    display: block; margin-top: .5rem;
    font-family: inherit; font-size: .78rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--blok-inkt-zacht);
}

.blok-maker p { margin: 0 0 .75rem; color: var(--blok-inkt-zacht); max-width: var(--blok-lees); }
.blok-maker p:last-child { margin-bottom: 0; }
.blok-maker strong { color: var(--blok-inkt); }

/* ════════════════════════════════════════════════════════════ vertrekken ══
 *
 * Een schakelaar tussen vier volwaardige delen, voor een pagina die meerdere
 * doelgroepen moet overtuigen. Vier stukken onder elkaar betekent dat iedereen
 * door drie moet die niet over hem gaan; vier kaarten naast elkaar betekent
 * dat er van elk maar drie zinnen passen.
 *
 * Alle panelen staan in de HTML en worden verborgen met hidden, niet
 * weggelaten: een zoekmachine leest dus alle argumentaties.
 */
.blok-vertrekken__keuze {
    display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    background: color-mix(in oklab, var(--blok-op-nacht) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--blok-op-nacht) 14%, transparent);
    border-radius: var(--blok-radius) var(--blok-radius) 0 0;
    overflow: hidden;
}

.blok-vertrekken__keuze button {
    position: relative;
    display: flex; flex-direction: column; gap: .2rem; align-items: flex-start;
    padding: 1.1rem 1.2rem 1.15rem;
    border: 0;
    background: color-mix(in oklab, var(--blok-nacht) 88%, #000);
    color: var(--blok-nacht-zacht);
    font: inherit; text-align: left; cursor: pointer;
    transition: background-color .22s ease, color .22s ease;
}

.blok-vertrekken__keuze button b {
    font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--blok-nacht-zacht); transition: color .22s ease;
}

.blok-vertrekken__keuze button span {
    font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
    font-family: var(--code-font, ui-monospace, monospace);
}

/* De streep staat boven en niet onder: zo naait ze de knop aan het paneel vast. */
.blok-vertrekken__keuze button::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--blok-accent), var(--blok-steun));
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}

.blok-vertrekken__keuze button:hover b { color: var(--blok-op-nacht); }
.blok-vertrekken__keuze button[aria-selected="true"] { background: var(--blok-nacht); }
.blok-vertrekken__keuze button[aria-selected="true"] b { color: var(--blok-op-nacht); }
.blok-vertrekken__keuze button[aria-selected="true"]::before { transform: scaleX(1); }

.blok-vertrek {
    position: relative; overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--blok-op-nacht) 14%, transparent);
    border-top: 0;
    border-radius: 0 0 var(--blok-radius) var(--blok-radius);
    background: var(--blok-nacht);
    color: var(--blok-nacht-zacht);
    padding: clamp(1.8rem, 4vw, 3.2rem);
}

.blok-vertrek[hidden] { display: none; }

.blok-vertrek h3 {
    margin: 0 0 1.3rem;
    font-family: var(--blok-kop-font);
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    line-height: 1.05; letter-spacing: -.035em;
    color: var(--blok-op-nacht);
}

.blok-vertrek h3 em { font-style: normal; color: var(--blok-accent); }
.blok-vertrek__intro { margin: 0 0 1rem; max-width: 42rem; line-height: 1.6; }

.blok-vertrek__punten {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.2rem 3rem; margin-top: 2.4rem;
}

@media (max-width: 700px) { .blok-vertrek__punten { grid-template-columns: 1fr; } }

.blok-vertrek__punten h4 { margin: 0 0 .4rem; font-size: 1.02rem; color: var(--blok-op-nacht); }

.blok-vertrek__punten h4::before {
    content: ""; display: block;
    width: 26px; height: 2px; margin-bottom: .85rem;
    background: linear-gradient(90deg, var(--blok-accent), var(--blok-steun));
}

.blok-vertrek__punten p { margin: 0; font-size: .93rem; line-height: 1.55; }

.blok-vertrek[data-komt] { animation: blokVertrekOp .42s cubic-bezier(.16, 1, .3, 1); }

@keyframes blokVertrekOp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .blok-vertrek[data-komt] { animation: none; }
    .blok-vertrekken__keuze button::before { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════ nu open ══
 *
 * Van alles wat op een pagina van een zaak met een deur kan staan, doet dit
 * het meeste. Openingsuren is een tabel die de lezer met zijn eigen klok moet
 * vergelijken; dit is een antwoord.
 *
 * De stand wordt op de server gerekend, in de tijdzone van de zaak. In de
 * browser rekenen betekent "open" bij iemand met een verkeerd gezette klok.
 */
.blok-nuopen__stand { display: flex; align-items: center; gap: .5rem; font-size: .92rem; margin: 0; }

.blok-nuopen__stip {
    inline-size: 9px; block-size: 9px; border-radius: 50%; flex: 0 0 auto;
    background: var(--blok-flauw);
}

.blok-nuopen__stand[data-open="ja"] .blok-nuopen__stip {
    background: var(--blok-steun);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--blok-steun) 60%, transparent);
    animation: blokPols 2.4s ease-out infinite;
}

.blok-nuopen__stand[data-open="ja"] strong { color: var(--blok-steun); }

@keyframes blokPols {
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .blok-nuopen__stand[data-open="ja"] .blok-nuopen__stip { animation: none; }
}

.blok-nuopen__uren {
    display: grid; gap: 2px; margin: .75rem 0 0;
    font-size: .88rem; color: var(--blok-inkt-zacht); max-inline-size: 22rem;
}

.blok-nuopen__uren > div { display: flex; justify-content: space-between; gap: 1.5rem; }
.blok-nuopen__uren dt, .blok-nuopen__uren dd { margin: 0; }
.blok-nuopen__uren dd { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════ inschrijven ══
 *
 * Het formulier is de helft; de zin eronder is de andere helft. Wie niet leest
 * wat er met zijn adres gebeurt, vult het niet in, en wie het wel invult
 * zonder dat te weten, klaagt later.
 *
 * Het lokveld staat buiten beeld in plaats van op display:none. Dat laatste is
 * precies wat een fatsoenlijke bot controleert.
 */
.blok-inschrijven { display: grid; gap: .75rem; max-inline-size: 34rem; }
.blok-inschrijven__rij { display: flex; gap: .5rem; flex-wrap: wrap; }

.blok-inschrijven__rij input[type="email"] {
    flex: 1; min-inline-size: 12rem;
    padding: .7rem .9rem;
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius-klein);
    background: var(--blok-paneel); color: var(--blok-inkt); font: inherit;
}

.blok-inschrijven__rij button {
    padding: .7rem 1.2rem; border: 0;
    border-radius: var(--blok-radius-klein);
    background: var(--blok-accent); color: var(--blok-op-accent);
    font: inherit; font-weight: 600; cursor: pointer;
}

.blok-inschrijven__rij button:hover { background: var(--blok-accent-diep); }
.blok-inschrijven__klein { margin: 0; font-size: .82rem; color: var(--blok-inkt-zacht); line-height: 1.5; }

.blok-lokveld {
    position: absolute; inset-inline-start: -9999px;
    inline-size: 1px; block-size: 1px; overflow: hidden;
}

/* ════════════════════════════════════════════════════════════ waarborgen ══
 *
 * Vier redenen, elk één regel vet en één regel uitleg. Vier is het getal: meer
 * wordt een opsomming die niemand leest, minder oogt mager. Zet er echte
 * cijfers in en haal die uit de instellingen; een bedrag dat hier vaststaat,
 * klopt over een jaar niet meer, en dat is erger dan geen bedrag.
 */
.blok-waarborgen {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    list-style: none; margin: 0; padding: 0;
}

.blok-waarborgen li {
    display: flex; gap: .75rem; align-items: flex-start;
    font-size: .88rem; color: var(--blok-inkt-zacht); line-height: 1.45;
}

.blok-waarborgen strong { display: block; color: var(--blok-inkt); margin-bottom: 1px; }

.blok-waarborgen__icoon {
    display: grid; place-items: center;
    inline-size: 34px; block-size: 34px; flex: 0 0 auto;
    border-radius: calc(var(--blok-radius) * .6);
    background: var(--blok-accent-waas); color: var(--blok-accent-diep);
}

.blok-waarborgen__icoon svg { inline-size: 18px; block-size: 18px; }

/* De proefstand van de vaste oproep, voor het overzichtsscherm in het beheer.
   Daar hoort hij op zijn plek in de rij te staan en niet onderaan het venster
   geplakt: anders zie je hem niet waar hij besproken wordt. */
.blok-vast--stil {
    position: static;
    animation: none;
    opacity: 1;
    transform: none;
    border-radius: var(--blok-radius);
    border: 1px solid color-mix(in oklab, var(--blok-op-nacht) 12%, transparent);
    overflow: hidden;
}

/* ═════════════════════════════════════════════ de vijf van de dienstenpagina
 *
 * Bijgekomen op 19 september 2026. Ze volgen dezelfde regel als de zestien
 * hierboven: geen enkele vaste kleur, alles via --blok-*. Wie morgen een
 * ander accent instelt, ziet deze vijf meeschuiven.
 *
 * Eén ding wijkt af en dat is met opzet: de tikdoelen hier zijn groter dan in
 * de rest van de bank. Deze blokken staan op de site van een vakman en worden
 * bediend door iemand die op dat ogenblik met een probleem in huis zit, vaak
 * buiten, vaak met één hand. Zesenveertig pixels is hier de ondergrens.
 */

.blok-oog {
    margin: 0 0 1.15rem;
    font: 600 .72rem/1 var(--blok-kop-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blok-accent-tekst);
}

/* ───────────────────────────────────────────────────────────────── spoed ── */

.blok--spoed { position: relative; }

.blok-spoed {
    position: relative;
    display: grid;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.25rem, 4vw, 2rem);
    padding-inline-start: clamp(1.6rem, 4vw, 2.4rem);
    border-radius: var(--blok-radius);
    background: var(--blok-nacht);
    color: var(--blok-op-nacht);
    overflow: hidden;
}

@media (min-width: 46rem) {
    .blok-spoed { grid-template-columns: 1fr auto; gap: 2.5rem; }
}

/* De schuine band links. Het is het teken van een werf en van signalisatie,
   en het is het enige merkgebaar op dit blok. Puur decoratief. */
.blok-spoed--alarm .blok-spoed::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 10px;
    background: repeating-linear-gradient(
        135deg,
        var(--blok-accent) 0 9px,
        transparent 9px 18px
    );
}

.blok-spoed__kop {
    margin: 0 0 .4rem;
    font: 800 clamp(1.4rem, 3.4vw, 2rem)/1.1 var(--blok-kop-font);
}

.blok-spoed__zin {
    margin: 0;
    max-width: var(--blok-lees);
    color: var(--blok-nacht-zacht);
    line-height: 1.5;
}

.blok-spoed__klein {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin: .9rem 0 0;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blok-accent);
}

.blok-spoed__platen { display: grid; gap: .6rem; }

/* Het hele vlak is het tikdoel, niet het nummer erin. Wie met natte handen
   mikt, mikt niet op tekst. */
.blok-spoed__plaat {
    display: block;
    min-block-size: 56px;
    padding: .7rem 1.4rem;
    border-radius: calc(var(--blok-radius) * .7);
    background: var(--blok-accent);
    color: var(--blok-op-accent);
    text-decoration: none;
    text-align: center;
}

.blok-spoed__plaat:hover,
.blok-spoed__plaat:focus-visible { background: var(--blok-accent-diep); }

.blok-spoed__nummer {
    display: block;
    font: 800 clamp(1.3rem, 3.6vw, 1.75rem)/1.15 var(--blok-kop-font);
    font-variant-numeric: tabular-nums;
}

.blok-spoed__onder {
    display: block;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .88;
}

.blok-spoed__plaat--tweede {
    background: transparent;
    color: var(--blok-op-nacht);
    border: 2px solid color-mix(in oklab, var(--blok-op-nacht) 34%, transparent);
}

.blok-spoed__plaat--tweede:hover,
.blok-spoed__plaat--tweede:focus-visible {
    background: color-mix(in oklab, var(--blok-op-nacht) 12%, transparent);
}

/* ────────────────────────────────────────────────────────────── symptoom ── */

.blok-symptomen { display: grid; gap: 1.4rem; }

@media (min-width: 46rem) {
    .blok-symptomen { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

/* Geen kaart met een rand rondom: dat is de mal waar alles op lijkt. Hier
   draagt één zware regel links de tekst, en die regel is de accentkleur. */
.blok-symptoom {
    padding: .1rem 0 .1rem 1.15rem;
    border-inline-start: 4px solid var(--blok-accent);
}

.blok-symptoom__klacht {
    margin: 0 0 .5rem;
    font: 700 1.12rem/1.3 var(--blok-kop-font);
    color: var(--blok-inkt);
}

.blok-symptoom__oorzaak {
    margin: 0 0 .5rem;
    font-size: .88rem;
    color: var(--blok-flauw);
}

.blok-symptoom__wij {
    margin: 0;
    line-height: 1.55;
    color: var(--blok-inkt-zacht);
}

/* ───────────────────────────────────────────────────────────── werkwijze ── */

.blok-werkwijze {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: blokstap;
}

.blok-werkwijze__stap {
    counter-increment: blokstap;
    position: relative;
    padding: 1.15rem 0 1.15rem 3.6rem;
    border-block-start: 1px solid var(--blok-lijn);
}

.blok-werkwijze__stap:last-child { border-block-end: 1px solid var(--blok-lijn); }

.blok-werkwijze__stap::before {
    content: counter(blokstap, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1.1rem;
    font: 800 1.5rem/1 var(--blok-kop-font);
    color: color-mix(in oklab, var(--blok-accent) 55%, transparent);
    font-variant-numeric: tabular-nums;
}

.blok-werkwijze__tijd {
    display: inline-block;
    margin-bottom: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--blok-accent-waas);
    /* De tekstveilige variant van het accent, niet de diepe. Het amber van
       een kraanverhuurder haalde in deze pil 2,7 op wit; dat is een tijdstip
       dat niemand leest. --blok-accent-tekst is precies daarvoor uitgerekend.
       Gemeten op de bladzijden verkeersborden en contact op 20 september. */
    color: var(--blok-accent-tekst);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blok-werkwijze__stap h3 {
    margin: 0 0 .3rem;
    font: 700 1.06rem/1.3 var(--blok-kop-font);
}

.blok-werkwijze__stap p {
    margin: 0;
    max-width: var(--blok-lees);
    color: var(--blok-inkt-zacht);
    line-height: 1.55;
}

.blok-werkwijze__slot {
    margin: 1.1rem 0 0;
    max-width: var(--blok-lees);
    color: var(--blok-inkt-zacht);
}

/* ─────────────────────────────────────────────────────────────── dekking ── */

.blok-dekking__zoek { margin: 0 0 1rem; }

.blok-dekking__zoek input {
    inline-size: 100%;
    max-inline-size: 22rem;
    min-block-size: 48px;
    padding: .6rem .9rem;
    border: 2px solid var(--blok-lijn);
    border-radius: calc(var(--blok-radius) * .6);
    background: var(--blok-paneel);
    color: var(--blok-inkt);
    font-size: 1rem;
}

.blok-dekking__zoek input:focus-visible {
    outline: none;
    border-color: var(--blok-accent);
}

.blok-dekking__lijst {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blok-dekking__pil {
    display: inline-flex;
    align-items: center;
    min-block-size: 46px;
    padding: .35rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--blok-lijn);
    background: var(--blok-paneel);
    font-size: .95rem;
}

.blok-dekking__pil[hidden] { display: none; }

.blok-dekking__buiten {
    margin: 1.1rem 0 0;
    max-width: var(--blok-lees);
    color: var(--blok-inkt-zacht);
}

.blok-dekking__buiten[data-op] {
    padding: .8rem 1rem;
    border-radius: calc(var(--blok-radius) * .6);
    background: var(--blok-accent-waas);
    color: var(--blok-inkt);
}

/* ───────────────────────────────────────────────────────────────── maten ── */

.blok-maten {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.15rem;
}

.blok-maat__kop {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .35rem;
}

.blok-maat__naam { font: 700 1.05rem/1.2 var(--blok-kop-font); }
.blok-maat__eenheid { font-size: .8rem; color: var(--blok-flauw); }

.blok-maat__balk {
    block-size: 14px;
    border-radius: 3px;
    background: var(--blok-lijn);
    overflow: hidden;
}

.blok-maat__balk span {
    display: block;
    block-size: 100%;
    background: var(--blok-accent);
}

.blok-maat__past {
    margin: .4rem 0 0;
    max-width: var(--blok-lees);
    font-size: .92rem;
    color: var(--blok-inkt-zacht);
}

/* ═══════════════════════════════════════════════════ de vier van het materieel
 *
 * Bijgekomen op 19 september 2026. Ze horen bij elkaar: alle vier tekenen ze
 * iets dat je niet kunt opschrijven. Wat een machine haalt, hoe groot dat is
 * naast iets dat je kent, dat het al gebeurd is, en welke van de honderdtien
 * werven op de uwe lijkt.
 *
 * Geen enkele vaste kleur, zoals de rest van dit bestand: alles wijst naar de
 * --blok-* bovenaan, en die wijzen naar het thema van de klant.
 */

/* ── bereik ───────────────────────────────────────────────────────────────── */

/* Een blok weet niet hoe breed de kolom is waar het in staat. Deze tekening
   staat op de ene bladzijde over de volle breedte en op de andere in een halve
   kolom naast een foto, en met een gewone mediaquery splitst ze zich in dat
   tweede geval in twee kolommen van honderddertig pixels. Dan is de boog een
   duimnagel en het getal een sliert van drie woorden per regel.

   Vandaar een containervraag: ze kijkt naar haar eigen breedte en niet naar
   die van het scherm. Dat is het enige juiste gereedschap hiervoor, en het is
   meteen waarom dit blok overal herbruikbaar is. */
.blok--bereik { margin-block: 2rem; container-type: inline-size; }

.blok-bereik {
    display: grid;
    gap: 1.25rem 2rem;
    align-items: center;
    grid-template-columns: 1fr;
}

@container (min-width: 34rem) {
    .blok-bereik { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.blok-bereik__tekening svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

/* Het bereikbare gebied. Een vlak en geen lijn, want een vlak zegt "alles
   hierbinnen kan" en een lijn zegt enkel "tot hier". */
/* De vulling is de accentkleur met doorzicht en niet de kant-en-klare tint.
   Die tint is voor een lichte achtergrond gemengd; op de zwarte huid van een
   kraanverhuurder werd ze modderig olijfgroen. Met doorzicht klopt ze op
   allebei. */
.blok-bereik__vlak { fill: var(--blok-accent); fill-opacity: .17; stroke: none; }
.blok-bereik__boog { fill: none; stroke: var(--blok-accent); stroke-width: 2.5; }
.blok-bereik__mast { stroke: var(--blok-accent); stroke-width: 3; }
.blok-bereik__punt { fill: var(--blok-accent); }
.blok-bereik__grond { stroke: var(--blok-inkt-zacht); stroke-width: 1.5; }

/* De mobiele torenkraan. Het werkgebied met de giek horizontaal is het vlak;
   de geknikte standen liggen er lichter overheen, want ze zijn een keuze en
   geen belofte. Zonder dat verschil in dekking leest de tekening als een
   waaier en niet als een kraan die kan kiezen. */
.blok-bereik__knik { fill: var(--blok-accent); fill-opacity: .07; stroke: none; }
.blok-bereik__giek { stroke: var(--blok-accent); stroke-width: 2.5; stroke-linecap: round; }
.blok-bereik__giek--knik { stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .75; }
.blok-bereik__vlucht { stroke: var(--blok-accent); stroke-width: 1.25; stroke-dasharray: 3 4; opacity: .6; }

.blok-bereik__graden {
    fill: var(--blok-accent);
    font: 600 12px/1 var(--blok-kop-font);
}

.blok-bereik__tik { stroke: var(--blok-flauw); stroke-width: 1.5; }

.blok-bereik__tikwoord {
    fill: var(--blok-flauw);
    font: 600 13px/1 var(--blok-kop-font);
}

/* De referentie is grijs en niet in de accentkleur: het is het ding dat we
   niet verkopen. Het staat er enkel om de maat te geven. */
.blok-bereik__ref rect { fill: var(--blok-inkt-zacht); opacity: .5; }
.blok-bereik__refmaat { stroke: var(--blok-inkt-zacht); stroke-width: 1.5; }

.blok-bereik__refwoord {
    fill: var(--blok-inkt-zacht);
    font: 600 13px/1 var(--blok-kop-font);
}

.blok-bereik__onderschrift {
    margin: .5rem 0 0;
    font-size: .85rem;
    color: var(--blok-flauw);
}

.blok-bereik__groot {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    margin: 0;
    line-height: .9;
}

.blok-bereik__groot span {
    font: 700 clamp(3.2rem, 11vw, 5.5rem)/.85 var(--blok-kop-font);
    color: var(--blok-accent-tekst);
    font-variant-numeric: tabular-nums;
}

.blok-bereik__groot em {
    font: 600 1.4rem/1 var(--blok-kop-font);
    font-style: normal;
    color: var(--blok-inkt-zacht);
}

.blok-bereik__wat {
    margin: .2rem 0 0;
    font: 600 .82rem/1.2 var(--blok-kop-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blok-inkt-zacht);
}

.blok-bereik__last {
    margin: .9rem 0 0;
    padding-block-start: .9rem;
    border-block-start: 1px solid var(--blok-lijn);
}

.blok-bereik__last strong { font: 700 1.5rem/1 var(--blok-kop-font); }
.blok-bereik__last span { color: var(--blok-inkt-zacht); font-size: .92rem; }

.blok-bereik__zin {
    margin: .7rem 0 0;
    max-width: var(--blok-lees);
    color: var(--blok-inkt-zacht);
}


/* De knop van een blok.
 *
 * Ze staat hier en niet in het thema, want een blok dat enkel knopt als het
 * thema toevallig .knop kent, is geen blok maar een sjabloonfragment. Ze neemt
 * wel de kleur en de ronding van het thema over, zoals al de rest.
 *
 * Achtenveertig pixels hoog: alles in deze bank wordt op een telefoon bediend,
 * en de helft ervan met een werkhandschoen aan. */
.blok-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-block-size: 48px;
    padding: .55rem 1.3rem;
    border: 2px solid var(--blok-accent);
    border-radius: var(--blok-radius, 4px);
    background: var(--blok-accent);
    color: var(--blok-op-accent);
    font: 600 1rem/1.2 var(--blok-kop-font);
    text-decoration: none;
    cursor: pointer;
}

.blok-knop:hover { background: var(--blok-accent-diep); border-color: var(--blok-accent-diep); color: var(--blok-op-accent); }
.blok-knop:focus-visible { outline: 3px solid var(--blok-accent); outline-offset: 3px; }

.blok-knop--rand {
    background: none;
    border-color: var(--blok-lijn-veld);
    color: var(--blok-inkt);
}

.blok-knop--rand:hover { background: none; border-color: var(--blok-accent); color: var(--blok-inkt); }

/* ── machinekaart ─────────────────────────────────────────────────────────── */

.blok--machine {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    padding-block: 2.2rem;
    border-block-start: 2px solid var(--blok-lijn);
}

/* Op een breed scherm: de foto en de tekening onder elkaar links, de cijfers
   rechts over allebei de rijen. In de bron staat de tekening achteraan, want
   dat is de juiste leesvolgorde op een telefoon; hier wordt ze naar links
   onder de foto getild. Dat is precies waar grid-placement voor bestaat. */
@media (min-width: 62rem) {
    .blok--machine {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.5rem 2.5rem;
        align-items: start;
    }

    .blok-machine__beeld { grid-column: 1; grid-row: 1; }
    .blok-machine__bereik { grid-column: 1; grid-row: 2; }
    .blok-machine__tekst { grid-column: 2; grid-row: 1 / span 2; }
}

.blok-machine__beeld { position: relative; margin: 0; }

.blok-machine__beeld img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--blok-radius, 4px);
}

/* Het typenummer als plaatje op de machine zelf. */
.blok-machine__plaatje {
    position: absolute;
    inset-block-end: .75rem;
    inset-inline-start: .75rem;
    margin: 0;
    padding: .3rem .6rem;
    background: var(--blok-nacht);
    color: var(--blok-op-nacht);
    font: 600 .8rem/1.2 var(--blok-kop-font);
    letter-spacing: .06em;
    border-radius: 2px;
}

.blok-machine__naam { margin: .2rem 0 .1rem; font-size: clamp(1.6rem, 4vw, 2.3rem); }

.blok-machine__leus {
    margin: 0 0 1.1rem;
    font: 600 1.05rem/1.35 var(--blok-kop-font);
    color: var(--blok-accent-tekst);
}

/* De cijfers van het typeplaatje. Naast elkaar, zodat ze te vergelijken zijn
   met die van de machine eronder; onder elkaar leest het opnieuw als een
   tabel en dan vergelijkt niemand nog iets.

   Met flex en niet met een raster: bij drie cijfers en twee kolommen laat een
   raster een leeg vak achter, en dat leest als een cijfer dat vergeten is.
   Hier groeit het laatste cijfer en is de rij gewoon vol. */
.blok-machine__cijfers {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
    background: var(--blok-lijn);
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius, 4px);
    overflow: hidden;
}

.blok-machine__cijfers li {
    flex: 1 1 7.5rem;
    padding: .7rem .8rem;
    background: var(--blok-paneel);
}

.blok-machine__cijfers strong {
    display: block;
    font: 700 1.45rem/1 var(--blok-kop-font);
    font-variant-numeric: tabular-nums;
}

.blok-machine__cijfers em {
    font: 600 .8rem/1 var(--blok-kop-font);
    font-style: normal;
    color: var(--blok-inkt-zacht);
    margin-inline-start: .15rem;
}

.blok-machine__cijfers span {
    display: block;
    margin-block-start: .2rem;
    font-size: .8rem;
    line-height: 1.25;
    color: var(--blok-inkt-zacht);
}

.blok-machine__zin { margin: 0 0 1.2rem; max-width: var(--blok-lees); }

.blok-machine__bereik { margin-block: 1.4rem 0; }
.blok-machine__bereik .blok--bereik { margin-block: 0; }

.blok-machine__kenmerken {
    margin: 0 0 1.4rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.blok-machine__kenmerken li {
    padding: .35rem .7rem;
    border: 1px solid var(--blok-lijn);
    border-radius: 999px;
    font-size: .88rem;
    color: var(--blok-inkt-zacht);
}

.blok-machine__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
}

/* ── bewijsstukken ────────────────────────────────────────────────────────── */

.blok--bewijs { margin-block: 2rem; }

/* Eén gemeenschappelijke hoogte en de breedte volgt daaruit. Een foto van 192
   pixels naast een van 2560 wordt zo een reeks, in plaats van een raster
   waarin de eerste tot een vlek uitgerekt staat. */
.blok-bewijs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.blok-bewijs__stuk {
    margin: 0;
    max-inline-size: 100%;
}

.blok-bewijs__knop {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: var(--blok-radius, 4px);
    overflow: hidden;
}

.blok-bewijs__knop:focus-visible { outline: 3px solid var(--blok-accent); outline-offset: 2px; }

.blok-bewijs__stuk img {
    display: block;
    block-size: var(--blok-bewijs-hoogte, 220px);
    inline-size: auto;
    max-inline-size: 100%;
    object-fit: cover;
    border-radius: var(--blok-radius, 4px);
}

.blok-bewijs__stuk figcaption {
    margin-block-start: .45rem;
    max-inline-size: 22rem;
    font-size: .85rem;
    line-height: 1.35;
    color: var(--blok-inkt-zacht);
}

@media (max-width: 34rem) {
    .blok-bewijs__stuk { inline-size: 100%; }
    .blok-bewijs__stuk img { inline-size: 100%; block-size: auto; }
}

/* De vullende stand: een raster waarin elke foto haar vak vult.
   Enkel voor een archief met grote foto's. Op een breedbeeldfoto van 1440
   pixels valt bijsnijden niet op; op een van 192 wel, en dan is de rij
   hierboven de juiste. */
.blok-bewijs--vullen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    align-items: stretch;
}

.blok-bewijs--vullen .blok-bewijs__stuk,
.blok-bewijs--vullen .blok-bewijs__knop { inline-size: 100%; }

.blok-bewijs--vullen .blok-bewijs__stuk img {
    inline-size: 100%;
    block-size: var(--blok-bewijs-hoogte, 220px);
}

.blok-vergroot {
    max-inline-size: min(96vw, 1200px);
    max-block-size: 92vh;
    padding: 0;
    border: 0;
    background: var(--blok-nacht, #16150f);
    color: var(--blok-op-nacht, #f2f0e9);
    border-radius: var(--blok-radius, 4px);
}

.blok-vergroot::backdrop { background: rgb(0 0 0 / .82); }

.blok-vergroot img {
    display: block;
    max-inline-size: 100%;
    max-block-size: 82vh;
    inline-size: auto;
    block-size: auto;
    margin-inline: auto;
}

.blok-vergroot__bij {
    margin: 0;
    padding: .7rem 1rem;
    font-size: .9rem;
}

.blok-vergroot__sluit {
    position: absolute;
    inset-block-start: .4rem;
    inset-inline-end: .5rem;
    inline-size: 44px;
    block-size: 44px;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / .55);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* ── zeef ─────────────────────────────────────────────────────────────────── */

.blok--zeef { margin-block: 1.5rem; }

.blok-zeef {
    display: grid;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius, 4px);
    background: var(--blok-paneel);
}

.blok-zeef__label {
    display: block;
    margin-block-end: .3rem;
    font: 600 .78rem/1.2 var(--blok-kop-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blok-inkt-zacht);
}

/* ── de rand van een bedieningselement ──────────────────────────────────────
 *
 * Een invoerveld, een pil en een knop met enkel een rand worden herkend aan die
 * rand en aan niets anders. `--blok-lijn` is de haarlijn tussen twee alinea's;
 * die is met opzet zwak. Op de donkere huid van VCA komt ze op 1,2 tegen de
 * achtergrond uit en dan staat er op een werf in de zon geen veld maar een gat.
 * Drie op een is de ondergrens van de norm voor wat geen tekst is.
 *
 * Vandaar een eigen rand, gemengd uit de inkt van het thema: die haalt boven de
 * drie op de lichte én op de donkere stand, en ze blijft van de klant. Gemeten
 * op 19 september 2026 op 390 en op 1280. */
.blok-zeef__veld {
    inline-size: 100%;
    min-block-size: 46px;
    padding: .55rem .8rem;
    border: 1px solid var(--blok-lijn-veld);
    border-radius: var(--blok-radius, 4px);
    background: var(--blok-grond);
    color: var(--blok-inkt);
    font: inherit;
}

.blok-zeef__veld:focus-visible { outline: 2px solid var(--blok-accent); outline-offset: 1px; }

.blok-zeef__etiketten {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Vierenveertig pixels, want dit wordt met een duim bediend en meestal met
   een werkhandschoen aan. */
.blok-zeef__pil {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-block-size: 44px;
    padding: .4rem .85rem;
    border: 1px solid var(--blok-lijn-veld);
    border-radius: 999px;
    background: var(--blok-grond);
    color: var(--blok-inkt);
    font: 600 .92rem/1 var(--blok-kop-font);
    cursor: pointer;
}

.blok-zeef__pil span {
    font-size: .78rem;
    color: var(--blok-inkt-zacht);
    font-variant-numeric: tabular-nums;
}

.blok-zeef__pil:hover { border-color: var(--blok-accent); }

.blok-zeef__pil.is-aan {
    background: var(--blok-accent);
    border-color: var(--blok-accent);
    color: var(--blok-op-accent);
}

.blok-zeef__pil.is-aan span { color: inherit; opacity: .75; }

.blok-zeef__telling {
    margin: .8rem 0 0;
    font-size: .88rem;
    color: var(--blok-inkt-zacht);
}

.blok-zeef__niets {
    margin: 1.5rem 0;
    padding: 1.2rem;
    border: 1px dashed var(--blok-lijn);
    border-radius: var(--blok-radius, 4px);
    color: var(--blok-inkt-zacht);
}


/* Op de donkere stand is het volle accent wél leesbaar, en het is de kleur
   waarop de huid gebouwd is. De tekstveilige variant is enkel nodig zolang de
   achtergrond licht is. */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        --blok-accent-tekst: var(--accent, #ffb100);
    }
}

:root[data-thema="donker"] {
    --blok-accent-tekst: var(--accent, #ffb100);
}


/* ── het park ─────────────────────────────────────────────────────────────

   Een raster van compacte kaarten. Vier op een breed scherm, twee op een
   tablet, één op een telefoon. Vier is het maximum: bij vijf wordt de foto
   smaller dan de tekst eronder en dan leest het als een lijst met plaatjes.

   De kaart is één tikdoel van rand tot rand en niet enkel de titel. Wie met
   een duim op de foto tikt, verwacht dat er iets gebeurt. */

.blok--park { padding-block: .5rem; }

.blok-park__kop {
    margin: 0 0 .6rem;
    font: 700 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--blok-kop-font);
    color: var(--blok-inkt);
}

.blok-park__inleiding {
    margin: 0 0 2rem;
    max-inline-size: var(--blok-lees, 62ch);
    color: var(--blok-inkt-zacht);
}

.blok-park__raster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

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

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

.blok-park__kaart {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    border: 1px solid var(--blok-lijn);
    border-radius: var(--blok-radius, 4px);
    /* Het paneel en niet de grond: een kaart hoort zich van de band waarop ze
       staat los te maken, en op een gekleurde band is de grond diezelfde band. */
    background: var(--blok-paneel);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

a.blok-park__kaart { transition: border-color .25s ease, transform .25s ease; }
a.blok-park__kaart:hover { border-color: var(--blok-accent); transform: translateY(-3px); }
a.blok-park__kaart:focus-visible { outline: 3px solid var(--blok-accent); outline-offset: 3px; }

/* De foto vult een vak van drie op twee, wat er ook in zit. Het vak houdt zijn
   hoogte met een verhouding en het beeld hangt erin met de vier zijden vast:
   zonder dat laatste bepaalt de natuurlijke hoogte van de foto het vak alsnog,
   en dan staan vier kaarten naast elkaar met vier verschillende hoogtes. */
.blok-park__beeld {
    position: relative;
    display: block;
    flex: 0 0 auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--blok-nacht);
}

.blok-park__beeld img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* Het cijfer op de foto en niet eronder: het is de reden dat iemand naar deze
   kaart kijkt, en onder de naam zou het meelezen als gewone tekst. */
.blok-park__cijfer {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: baseline;
    gap: .1rem;
    padding: .3rem .6rem;
    background: var(--blok-accent);
    color: var(--blok-op-accent);
    font-family: var(--blok-kop-font);
}

.blok-park__cijfer strong { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.blok-park__cijfer em { font-style: normal; font-size: .78rem; font-weight: 600; }

.blok-park__lijf {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1rem;
}

.blok-park__type {
    font: 600 .7rem/1 var(--blok-kop-font);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blok-accent-tekst);
}

.blok-park__naam {
    font: 700 1.1rem/1.2 var(--blok-kop-font);
    color: var(--blok-inkt);
}

.blok-park__wat,
.blok-park__zin {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--blok-inkt-zacht);
}

.blok-park__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 2rem 0 0;
}

/* ── het paneel ───────────────────────────────────────────────────────────

   Beeld naast tekst. Op een telefoon staat het beeld altijd boven, ongeacht
   `kant`: een foto onder een knop is een foto die niemand nog ziet. */

.blok--paneel {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 56rem) {
    .blok--paneel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

    /* Van plaats wisselen gebeurt met de rasterkolom en niet met de volgorde
       in de bron. Zo blijft de leesvolgorde voor een schermlezer en voor een
       telefoon dezelfde: eerst het beeld, dan de tekst. */
    .blok-paneel--rechts .blok-paneel__beeld { grid-column: 2; grid-row: 1; }
    .blok-paneel--rechts .blok-paneel__tekst { grid-column: 1; grid-row: 1; }
}

.blok-paneel--kaal { grid-template-columns: 1fr; }

.blok-paneel__beeld img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--blok-radius, 4px);
}

/* ── de wisselende foto's ─────────────────────────────────────────────────

   `.wisselt-laag` is de algemene klasse voor "één laag in een reeks die
   elkaar afwisselt": `blokken.js` schuift `is-aan` erdoor bij elk element met
   `data-blok-wisselaar`. Hoe zo'n laag er precies uitziet, kiest de plek die
   ze gebruikt — hieronder de vorm voor een paneel (een gewone foto naast
   tekst); het thema van de klant kiest zijn eigen vorm voor een volle band. */
.blok-paneel__beeld--wisselt {
    position: relative;
    display: grid;
}

.blok-paneel__beeld--wisselt .wisselt-laag {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 900ms ease;
}

.blok-paneel__beeld--wisselt .wisselt-laag img {
    grid-area: 1 / 1;
}

.blok-paneel__beeld--wisselt .wisselt-laag.is-aan {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .wisselt-laag {
        transition: none;
    }
}

.blok-paneel__kop {
    margin: 0 0 .8rem;
    font: 700 clamp(1.6rem, 3.4vw, 2.4rem)/1.1 var(--blok-kop-font);
    color: var(--blok-inkt);
}

.blok-paneel__zin {
    margin: 0;
    max-inline-size: var(--blok-lees, 62ch);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--blok-inkt-zacht);
}

.blok-paneel__punten {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}

.blok-paneel__punten li {
    position: relative;
    padding-inline-start: 1.5rem;
    line-height: 1.5;
    color: var(--blok-inkt);
}

/* Een streep en geen vinkje: een vinkje belooft dat het afgevinkt is, en dit
   is een opsomming van wat er te krijgen valt. */
.blok-paneel__punten li::before {
    content: "";
    position: absolute;
    inset-block-start: .7em;
    inset-inline-start: 0;
    inline-size: .85rem;
    block-size: 2px;
    background: var(--blok-accent);
}

.blok-paneel__knoppen { margin: 1.8rem 0 0; }


/* ── de troefkaart als rij ────────────────────────────────────────────────

   Dezelfde kaart, onder elkaar, met het nummer links en de etiketten rechts.
   Voor een opsomming van vakgebieden: kop kort, één regel uitleg, een handvol
   trefwoorden. In een raster wordt dat een muur van vakjes met acht pillen
   elk; in een rij blijft het scanbaar. */

.blok-troeven--rij {
    display: block;
}

.blok-troeven--rij .blok-troef {
    display: grid;
    gap: .35rem 1.75rem;
    grid-template-columns: 1fr;
    /* De kaartvorm valt weg: dit is een lijst en geen rek. Wat overblijft is
       de scheidingslijn, en die doet hier het werk van de rand. */
    background: none;
    border: 0;
    border-block-start: 1px solid var(--blok-lijn);
    border-radius: 0;
    padding: 1.6rem 0;
}

.blok-troeven--rij .blok-troef:last-child { border-block-end: 1px solid var(--blok-lijn); }
.blok-troeven--rij .blok-troef::before { display: none; }

@media (min-width: 56rem) {
    .blok-troeven--rij .blok-troef {
        grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 15rem);
        align-items: start;
    }
}

.blok-troef__nr {
    font: 600 .82rem/1 var(--blok-kop-font);
    letter-spacing: .1em;
    color: var(--blok-accent-tekst);
    padding-block-start: .35rem;
}

.blok-troeven--rij .blok-troef h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    margin-block-end: .35rem;
}

.blok-troef__etiketten {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .6rem 0 0;
}

@media (min-width: 56rem) {
    .blok-troef__etiketten { margin-block-start: .35rem; justify-content: flex-end; }
}

.blok-troef__etiket {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border: 1px solid var(--blok-lijn-veld);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blok-inkt-zacht);
    white-space: nowrap;
}

/* ── de loopband ──────────────────────────────────────────────────────────

   Eén smalle band in de accentkleur met de woorden waar een zaak haar geld
   mee verdient. Ze schuift, en ze staat stil zodra iemand om minder beweging
   vraagt. */

.blok--loopband {
    padding: 0;
    background: var(--blok-accent);
    color: var(--blok-op-accent);
    overflow: hidden;
}

.blok-loopband {
    display: flex;
    inline-size: max-content;
    animation: blok-loopband 42s linear infinite;
}

.blok-loopband__spoor {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding-inline-end: 1.6rem;
    padding-block: .8rem;
    font: 700 clamp(.82rem, 1.5vw, 1rem)/1 var(--blok-kop-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.blok-loopband__ruit { font-size: .6em; opacity: .55; }

@keyframes blok-loopband {
    from { transform: translateX(0); }
    /* De helft, want er staan twee gelijke sporen: op dat punt staat de band
       er weer precies zo bij als bij het begin en is de sprong onzichtbaar. */
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .blok-loopband { animation: none; }
}