/* ==========================================================================
   De suite-pagina's — /propositie/ (bedrijven) en /propositie/accountantskantoren/.

   Laag 4b van de publieke CSS (zie .claude/skills/designing-publieke-site.md):
   de onderdelen die alleen deze twee pagina's delen, ná publiek-2026.css. Tot
   03-10-2026 heette dit bestand kantoor-pagina.css en had alleen de kantorenpagina
   het; sinds de bedrijvenpagina dezelfde opzet heeft, staat hier niets meer wat
   bij één pagina hoort. Wat per pagina verschilt, staat in haar inhoudsbron
   (home/content/kantoor_suite.py, home/content/bedrijven_suite.py), ook de plek
   van elk vel op het bord: als CSS-variabelen op het vel zelf.

   Gedrag: static/js/home/propositie-suite.js. Vijf onderdelen:
     1. de schakelaar (bord en werkplek delen hem);
     2. het bord: losse pakketten of één omgeving (#een-systeem);
     3. de film (#film);
     4. de AI-werkplek (#ai-werkplek);
     5. de hoofdstukindex en de hoofdstukken, met de verkenner.

   Kleurgrammatica van het bord: magenta = het stuk (merk en actie), groen =
   gekoppeld (het sluit aan), grijs = gepland. Donker (#1E2126, de kleur van het
   agentvenster in fenofin-2026.css) = waar uw AI-agent werkt.
   ========================================================================== */


/* ---------- 1. De schakelaar ----------
   Twee of drie opties in één omlijsting met de knopradius; de actieve optie in
   inkt. Het bord schakelt met radioknoppen (werkt zonder JavaScript), de werkplek
   met tabbladen (aria-selected). Beide krijgen dezelfde vorm. */
.ff-schakel {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--ff-ink);
    border-radius: var(--ff-r-1);
    overflow: hidden;
    background: var(--ff-sheet);
}

.ff-schakel-optie {
    font-family: var(--ff-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 0.6rem 1rem;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--ff-ink);
    border-radius: 0;
    background: var(--ff-sheet);
    color: var(--ff-ink);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--ff-dur-hover) var(--ff-ease),
                color var(--ff-dur-hover) var(--ff-ease);
}

.ff-schakel-optie:first-child {
    border-left: 0;
}

.ff-schakel-optie:hover {
    background: #F1F3F6;
}

.ff-schakel-optie[aria-selected="true"],
#ff-bord-vandaag:checked ~ .ff-bord-kop .ff-schakel-optie[for="ff-bord-vandaag"] {
    background: var(--ff-ink);
    color: #fff;
}

/* "Met FenoFin" is de merkstand: actief in merkroze, inactief al in merkinkt. */
.ff-schakel-optie[for="ff-bord-fenofin"] {
    color: var(--ff-magenta-ink);
}

#ff-bord-fenofin:checked ~ .ff-bord-kop .ff-schakel-optie[for="ff-bord-fenofin"] {
    background: var(--ff-magenta);
    color: #fff;
}

.ff-schakel-optie:focus-visible,
#ff-bord-vandaag:focus-visible ~ .ff-bord-kop .ff-schakel-optie[for="ff-bord-vandaag"],
#ff-bord-fenofin:focus-visible ~ .ff-bord-kop .ff-schakel-optie[for="ff-bord-fenofin"] {
    outline: 2px solid var(--ff-magenta);
    outline-offset: -4px;
}


/* ---------- 2. Het bord ---------- */

/* Een inleiding over de volle 1040px telt ruim honderd tekens per regel. De
   hoofdstukken houden 760px aan; het bord en de werkplek doen hetzelfde. */
.ff-bord-sectie .bk-section-head p,
#ai-werkplek .bk-section-head p {
    max-width: 760px;
    margin: 0.75rem 0 0;
    line-height: 1.7;
    color: var(--bk-text);
}

/* De radioknoppen zijn er voor de stand en het toetsenbord, niet voor het oog. */
.ff-bord-keuze {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ff-bord {
    position: relative;
}

/* Eén stand tegelijk. De ~ kijkt vanaf de radioknop naar alles wat erna komt. */
#ff-bord-vandaag:checked ~ .ff-bord-fenofin,
#ff-bord-vandaag:checked ~ * .ff-bord-fenofin,
#ff-bord-fenofin:checked ~ .ff-bord-vandaag,
#ff-bord-fenofin:checked ~ * .ff-bord-vandaag {
    display: none;
}

.ff-bord-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    border-top: 1px solid var(--ff-rule);
    padding-top: 1rem;
    margin-bottom: 1.75rem;
}

.ff-bord-telling {
    margin: 0;
    font-family: var(--ff-mono);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--ff-ink);
}

.ff-bord-telling .ff-bord-fenofin {
    color: var(--ff-tie);
}

.ff-bord-vlak {
    position: relative;
}

/* De kop van de omgeving: alleen in de stand Met FenoFin. Hij deelt de
   inktlijn met het raster eronder; samen zijn ze één omlijsting. */
.ff-bord-omgeving {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin: 0;
    padding: 0.75rem 1.05rem;
    border: 1px solid var(--ff-ink);
    border-bottom: 0;
    background: var(--ff-sheet);
    font-family: var(--ff-mono);
    font-size: 0.74rem;
    color: var(--ff-ink-60);
}

.ff-bord-omgeving-merk {
    font-family: var(--ff-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ff-magenta);
}

.ff-bord-raster {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ff-pakket {
    position: relative;
    min-width: 0;
    background: var(--ff-sheet);
    padding: 1rem 1.05rem 1.15rem;
}

/* Vandaag: losse vellen, elk met een eigen rand, scheef en op een eigen hoogte.
   De verschuiving zit in de transform, zodat het raster zelf niet verspringt. */
#ff-bord-vandaag:checked ~ .ff-bord-vlak .ff-bord-raster {
    gap: 2.25rem 1.6rem;
    padding: 0.25rem 0.35rem 2.75rem;
}

#ff-bord-vandaag:checked ~ .ff-bord-vlak .ff-pakket {
    border: 1px solid var(--ff-rule);
    transform: translateY(var(--ff-dy, 0)) rotate(var(--ff-scheef, 0deg));
}

/* Hoogte (--ff-dy) en hoek (--ff-scheef) van elk vel staan op het vel zelf, net als
   zijn plek (--ff-rij, --ff-kolom) en zijn verspringing op een telefoon (--ff-dx):
   de inhoudsbron van de pagina zet ze, {% suite %} maakt er het style-attribuut van.

   Op desktop een vaste plek per vel (rij / kolom). De HTML staat in de volgorde van
   de route, zodat één of twee kolommen de stappen op volgorde tonen; hier liggen ze
   in een raster van vier bij twee, met de route over de bovenste rij. */
@media (min-width: 992px) {
    .ff-pakket {
        grid-row: var(--ff-rij);
        grid-column: var(--ff-kolom);
    }
}

/* Met FenoFin: één raster met de haarlijn als goot, binnen de inktlijn. */
#ff-bord-fenofin:checked ~ .ff-bord-vlak .ff-bord-raster {
    gap: 1px;
    background: var(--ff-rule-soft);
    border: 1px solid var(--ff-ink);
}

.ff-pakket-label {
    display: block;
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ff-ink-60);
    margin-bottom: 0.45rem;
}

#ff-bord-fenofin:checked ~ .ff-bord-vlak .ff-pakket-label {
    color: var(--ff-magenta-ink);
}

.bk-page .ff-pakket-titel {
    font-family: var(--ff-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ff-ink);
    margin: 0 0 0.35rem;
}

.ff-pakket-tekst {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bk-text);
}

/* Het stuk: een bestandsnaam in machinetaal. Gestippeld is een kopie, doorgetrokken
   het document zelf. Het stapnummer is een vierkant tegeltje, geen cirkel. */
.ff-stuk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    margin: 0.85rem 0 0;
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    line-height: 1.3;
}

.ff-stuk-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    background: var(--ff-magenta);
    color: #fff;
    font-weight: 500;
}

.ff-stuk-naam {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--ff-magenta);
    background: var(--ff-sheet);
    color: var(--ff-magenta-ink);
    overflow-wrap: anywhere;
}

.ff-stuk--kopie .ff-stuk-naam {
    border-style: dashed;
}

.ff-stuk-meta {
    color: var(--ff-ink-60);
}

.ff-stuk[data-stuk-bron] .ff-stuk-meta {
    color: var(--ff-tie);
}

/* Een koppeling is geen kopie: geen bestandsnaam, wel waar het stuk dient. */
.ff-koppeling {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    color: var(--ff-tie);
}

.ff-koppeling .ff-check {
    color: var(--ff-tie);
    margin: 0;
}

.ff-pakket-regels {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
}

.ff-pakket-regels li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.32rem 0;
    border-top: 1px solid var(--ff-rule-soft);
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--ff-ink);
}

.ff-pakket-regels .ff-status {
    flex-shrink: 0;
}

/* Waar uw AI-agent werkt: de donkere strook onder de omgeving, in de kleuren van
   het agentvenster bovenaan de pagina. */
.ff-bord-agent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.8rem 1.05rem;
    background: #1E2126;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.86rem;
    line-height: 1.45;
}

.ff-bord-agent-mcp {
    flex-shrink: 0;
    font-family: var(--ff-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: rgba(71, 185, 129, 0.95);
    border: 1px solid rgba(71, 185, 129, 0.5);
    padding: 0.12rem 0.4rem;
}

/* De route van het stuk: lijnen in de goten tussen de vellen. Ze liggen onder
   de vellen (z-index), zodat ze nooit door tekst lopen. Alleen in de stand
   Vandaag; propositie-suite.js tekent ze. */
.ff-bord-lijnen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

#ff-bord-fenofin:checked ~ .ff-bord-vlak .ff-bord-lijnen {
    display: none;
}

.ff-bord-lijn {
    fill: none;
    stroke: var(--ff-magenta);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
    stroke-linecap: round;
}

.ff-bord-hint {
    margin: 1rem 0 0;
    font-family: var(--ff-mono);
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--ff-ink-60);
}

.ff-bord-hint strong {
    font-weight: 500;
    color: var(--ff-magenta-ink);
}

/* Het samenkomen. propositie-suite.js start een view transition; elk vel heeft een
   eigen naam (ff-pakket-<sleutel>, in zijn style-attribuut) en schuift van zijn losse
   plek naar zijn plek in de omgeving. De rest van de pagina doet niet mee (geen naam
   op de root), zodat alles onder het bord gewoon meeschuift in plaats van te
   overvloeien. */
.ff-bord-omgeving        { view-transition-name: ff-bord-omgeving; }
.ff-bord-agent           { view-transition-name: ff-bord-agent; }

:root {
    view-transition-name: none;
}

::view-transition-group(*) {
    animation-duration: calc(var(--ff-dur-in) * 1.5);
    animation-timing-function: var(--ff-ease);
}


/* ---------- 3. De film ---------- */
.ff-film-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 2.5rem;
    align-items: center;
    border-top: 1px solid var(--ff-rule);
    padding-top: 1.75rem;
}

.bk-page .ff-film-tekst h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ff-ink);
    margin: 0.6rem 0 0.85rem;
}

.ff-film-tekst p {
    margin: 0 0 1rem;
    line-height: 1.7;
    color: var(--bk-text);
}

.ff-film-tekst .ff-film-feit {
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ff-rule-soft);
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--ff-ink-60);
}

/* De film staat in zijn kolom, niet gecentreerd op 960px zoals de connectorvideo. */
.bk-video.ff-film-video {
    max-width: none;
    margin: 0;
}


/* ---------- 4. De AI-werkplek ---------- */
.ff-werkplek {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 2.5rem;
    align-items: start;
    border-top: 1px solid var(--ff-rule);
    padding-top: 1.5rem;
}

.ff-werkplek-omgeving {
    margin: 0 0 1.25rem;
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ff-ink-60);
}

/* Het schema: bronnen links, de agent in het midden, de FenoFin Connector rechts.
   De draden zijn randen van lege vlakken: een haak van mail en werkmap naar de
   agent, en één lijn naar de Connector. */
.ff-werkplek-net {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1.05fr) 2.25rem minmax(0, 1.1fr);
    grid-template-rows: auto auto;
    row-gap: 1rem;
    align-items: center;
}

.ff-werkplek-knoop,
.ff-werkplek-agent {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.8rem 0.9rem;
    min-width: 0;
    transition: opacity var(--ff-dur-hover) var(--ff-ease),
                border-color var(--ff-dur-hover) var(--ff-ease);
}

.ff-werkplek-knoop {
    border: 1px solid var(--ff-rule);
    background: var(--ff-sheet);
}

.ff-werkplek-knoop[data-bron="mail"]    { grid-column: 1; grid-row: 1; }
.ff-werkplek-knoop[data-bron="werkmap"] { grid-column: 1; grid-row: 2; }

.ff-werkplek-agent {
    grid-column: 3;
    grid-row: 1 / 3;
    background: #1E2126;
    border: 1px solid #2C3037;
    border-radius: var(--ff-r-2);
}

.ff-werkplek-knoop[data-bron="fenofin"] {
    grid-column: 5;
    grid-row: 1 / 3;
    border-color: var(--ff-ink);
}

.ff-werkplek-knoop-naam {
    font-family: var(--ff-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ff-ink);
}

.ff-werkplek-knoop-tekst {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ff-ink-60);
}

.ff-werkplek-agent .ff-werkplek-knoop-naam {
    color: #fff;
}

.ff-werkplek-agent .ff-werkplek-knoop-tekst {
    color: rgba(255, 255, 255, 0.62);
}

.ff-werkplek-knoop[data-bron="fenofin"] .ff-werkplek-knoop-naam {
    color: var(--ff-magenta-ink);
}

.ff-werkplek-modules {
    margin-top: 0.4rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--ff-rule-soft);
    font-family: var(--ff-mono);
    font-size: 0.66rem;
    line-height: 1.6;
    color: var(--ff-ink-60);
}

.ff-werkplek-draad {
    display: block;
    border: 0 solid var(--ff-rule);
    transition: border-color var(--ff-dur-hover) var(--ff-ease);
}

.ff-werkplek-draad--mail {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    height: calc(50% + 0.5rem);
    border-top-width: 2px;
    border-right-width: 2px;
}

.ff-werkplek-draad--werkmap {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    height: calc(50% + 0.5rem);
    border-bottom-width: 2px;
    border-right-width: 2px;
}

.ff-werkplek-draad--fenofin {
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: center;
    border-top-width: 2px;
}

/* Licht op wat de gekozen opdracht gebruikt; de rest treedt terug. Alleen met
   JavaScript (data-actief), zonder staat het schema er neutraal. */
.ff-werkplek[data-actief] .ff-werkplek-knoop {
    opacity: 0.45;
}

.ff-werkplek[data-actief~="mail"] .ff-werkplek-knoop[data-bron="mail"],
.ff-werkplek[data-actief~="werkmap"] .ff-werkplek-knoop[data-bron="werkmap"],
.ff-werkplek[data-actief~="fenofin"] .ff-werkplek-knoop[data-bron="fenofin"] {
    opacity: 1;
    border-color: var(--ff-ink);
}

.ff-werkplek[data-actief~="mail"] .ff-werkplek-draad--mail,
.ff-werkplek[data-actief~="werkmap"] .ff-werkplek-draad--werkmap,
.ff-werkplek[data-actief~="fenofin"] .ff-werkplek-draad--fenofin {
    border-color: var(--ff-magenta);
}

.ff-werkplek-tabs {
    margin-bottom: 1.25rem;
}

.ff-werkplek-tabs[hidden] {
    display: none;
}

.ff-werkplek-paneel + .ff-werkplek-paneel {
    margin-top: 2rem;
}

.ff-werkplek.is-tabs .ff-werkplek-paneel + .ff-werkplek-paneel {
    margin-top: 0;
}

.ff-werkplek.is-tabs .ff-werkplek-label {
    display: none;
}

.ff-werkplek-label {
    margin: 0 0 0.4rem;
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ff-magenta-ink);
}

.ff-werkplek-opdracht {
    margin: 0 0 1rem;
    font-family: var(--ff-display);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--ff-ink);
}

.ff-werkplek-stappen {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ff-rule-soft);
}

.ff-werkplek-stap {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--ff-rule-soft);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ff-ink);
}

.ff-werkplek-stap-bron {
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--ff-ink-60);
}

.ff-werkplek-stap-wat {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Bootstrap kleurt <code> roze; een toolnaam is machinetaal in inkt. */
.ff-werkplek .ff-toolnaam {
    font-family: var(--ff-mono);
    font-size: 0.8rem;
    color: var(--ff-ink);
    background: none;
    padding: 0;
}

.ff-werkplek-meta {
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    color: var(--ff-ink-60);
}

.ff-werkplek-meta[data-meta="voorstel"] {
    color: var(--ff-magenta-ink);
}

.ff-werkplek-resultaat {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ff-ink);
}

.ff-werkplek-resultaat .ff-check {
    color: var(--ff-tie);
    margin: 0;
}


/* ---------- Responsief: bord, film en werkplek ---------- */
@media (max-width: 991px) {
    .ff-bord-raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ff-film-grid,
    .ff-werkplek {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }
}

@media (max-width: 600px) {
    /* Op een telefoon één kolom: in twee kolommen brak de bestandsnaam midden in
       het woord. De vellen verspringen dan opzij in plaats van in de hoogte, en de
       nummers in de vellen vertellen de route; de lijnen vervallen. */
    .ff-bord-lijnen {
        display: none;
    }
    .ff-bord-raster {
        grid-template-columns: minmax(0, 1fr);
    }
    #ff-bord-vandaag:checked ~ .ff-bord-vlak .ff-bord-raster {
        gap: 0.9rem;
        padding: 0.25rem 0.85rem 1.25rem;
    }
    #ff-bord-vandaag:checked ~ .ff-bord-vlak .ff-pakket {
        transform: translateX(var(--ff-dx, 0)) rotate(var(--ff-scheef, 0deg));
    }
    .ff-pakket {
        padding: 0.85rem 0.9rem 0.95rem;
    }
    .ff-werkplek-tabs.ff-schakel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        width: 100%;
    }
    .ff-werkplek-tabs .ff-schakel-optie {
        padding: 0.6rem 0.45rem;
        font-size: 0.72rem;
        letter-spacing: 0.02em;
    }
    .ff-bord-kop {
        align-items: flex-start;
        flex-direction: column;
    }
    /* Het schema staat rechtop: mail en werkmap naast elkaar, de agent eronder,
       de Connector onderaan, met korte verticale draden. */
    .ff-werkplek-net {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1.25rem auto 1.25rem auto;
        row-gap: 0;
        column-gap: 0.75rem;
    }
    .ff-werkplek-knoop[data-bron="mail"]    { grid-column: 1; grid-row: 1; }
    .ff-werkplek-knoop[data-bron="werkmap"] { grid-column: 2; grid-row: 1; }
    .ff-werkplek-draad--mail,
    .ff-werkplek-draad--werkmap,
    .ff-werkplek-draad--fenofin {
        height: 100%;
        width: 0;
        justify-self: center;
        align-self: stretch;
        border-width: 0;
        border-left-width: 2px;
    }
    .ff-werkplek-draad--mail    { grid-column: 1; grid-row: 2; }
    .ff-werkplek-draad--werkmap { grid-column: 2; grid-row: 2; }
    .ff-werkplek-agent          { grid-column: 1 / 3; grid-row: 3; }
    .ff-werkplek-draad--fenofin { grid-column: 1 / 3; grid-row: 4; }
    .ff-werkplek-knoop[data-bron="fenofin"] { grid-column: 1 / 3; grid-row: 5; }
    .ff-werkplek-stap {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }
}


/* ---------- 5. De hoofdstukken ---------- */
/* Hoofdstukindex en hoofdstukken van een suite-pagina. Inhoud: de inhoudsbron van de
   pagina; hoofdstuk-partial home/propositie/_suite_hoofdstuk.html. De index is een
   raster met de haarlijn als goot (zoals .ff-ingangen op de homepage); een hoofdstuk
   is een kop met mono-nummer, vier punten op een haarlijn en één beeld, een slider
   of alleen de punten. Geen kaarten, iconen of gecentreerde koppen. */
.ff-hoofdstukken {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--ff-rule-soft);
    border: 1px solid var(--ff-rule-soft);
}

.ff-hoofdstukken li {
    background: var(--bk-bg);
}

.ff-hoofdstukken a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    padding: 1rem 1.1rem 1.15rem;
    color: var(--ff-ink);
    text-decoration: none;
    transition: background-color var(--ff-dur-hover) var(--ff-ease);
}

.ff-hoofdstukken a:hover {
    background: var(--ff-sheet);
}

.ff-hoofdstukken a:focus-visible {
    outline: 2px solid var(--ff-magenta);
    outline-offset: -2px;
}

.ff-hoofdstukken-nr {
    font-family: var(--ff-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--ff-magenta-ink);
}

.ff-hoofdstukken-titel {
    font-family: var(--ff-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ff-hoofdstukken-oms {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ff-ink-60);
}

.ff-hoofdstuk {
    border-top: 1px solid var(--ff-rule-soft);
    padding: 3.5rem 0;
}

/* Wint van .ff-roadmap (4rem) op het roadmaphoofdstuk: één ritme voor alle hoofdstukken. */
.ff-hoofdstuk.ff-roadmap {
    padding: 3.5rem 0;
}

.ff-hoofdstuk .bk-section-head {
    margin-bottom: 1.75rem;
}

.ff-hoofdstuk .bk-section-head p {
    max-width: 760px;
    margin: 0.75rem 0 0;
    line-height: 1.7;
    color: var(--bk-text);
}

.ff-punten {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
}

.ff-punten li {
    border-top: 1px solid var(--ff-rule-soft);
    padding-top: 0.9rem;
}

.ff-punten h3 {
    font-family: var(--ff-display);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.4rem;
    color: var(--ff-ink);
}

.ff-punten p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--bk-text);
}

.ff-punten--kolom {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0;
}

/* Een hoofdstuk zonder beeld: alleen de punten, zonder ruimte voor een slider eronder. */
.ff-punten--los {
    margin-bottom: 0;
}

.ff-hoofdstuk-verder {
    max-width: 760px;
    margin: 1.5rem 0 0;
}

.ff-hoofdstuk-duo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 2.5rem;
    align-items: start;
}

.ff-hoofdstuk-beeld {
    margin: 0;
}

.ff-hoofdstuk-beeld img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ff-rule-soft);
    background: var(--ff-sheet);
}

.ff-hoofdstuk-beeld figcaption {
    margin-top: 0.6rem;
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    color: var(--ff-ink-60);
}

.ff-hoofdstuk .bk-video {
    margin: 0 0 2rem;
}

.ff-hoofdstuk-kaarten {
    margin-bottom: 0;
}

.ff-hoofdstuk-sub {
    margin-top: 2.75rem;
}

.ff-hoofdstuk-subtitel {
    font-family: var(--ff-display);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    color: var(--ff-ink);
}

@media (max-width: 991px) {
    .ff-hoofdstukken {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .ff-hoofdstuk,
    .ff-hoofdstuk.ff-roadmap {
        padding: 2.5rem 0;
    }
    .ff-punten,
    .ff-hoofdstuk-duo {
        grid-template-columns: minmax(0, 1fr);
    }
    .ff-hoofdstuk-duo {
        gap: 1.5rem;
    }
}

@media (max-width: 420px) {
    .ff-hoofdstukken {
        grid-template-columns: minmax(0, 1fr);
    }
    .ff-hoofdstukken a {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.6rem;
        padding: 0.75rem 0.9rem;
    }
    .ff-hoofdstukken-oms {
        flex-basis: 100%;
    }
}

.ff-hoofdstuk[hidden] {
    display: none;
}

/* De verkenner: met JavaScript staat er één hoofdstuk tegelijk; de index wijst
   het aan met een merklijn bovenin het vak. */
.ff-hoofdstukken a {
    position: relative;
}

.ff-hoofdstukken a[aria-current="true"] {
    background: var(--ff-sheet);
}

.ff-hoofdstukken a[aria-current="true"]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 2px;
    background: var(--ff-magenta);
}

/* Een gekozen hoofdstuk komt binnen met de regel-in van de hero (fenofin-2026.css):
   het antwoord op een klik, geen reveal bij het scrollen. */
@media (prefers-reduced-motion: no-preference) {
    .ff-hoofdstuk.is-getoond > .bk-container {
        animation: ff-regel-in var(--ff-dur-in) var(--ff-ease) both;
    }
}

.ff-hoofdstuk-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin-top: 2.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ff-rule-soft);
}

.ff-hoofdstuk-nav-buur {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--ff-ink);
    text-decoration: none;
}

.ff-hoofdstuk-nav-buur--volgende {
    align-items: flex-end;
    text-align: right;
}

.ff-hoofdstuk-nav-richting {
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ff-ink-60);
}

.ff-hoofdstuk-nav-titel {
    font-family: var(--ff-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color var(--ff-dur-hover) var(--ff-ease);
}

.ff-hoofdstuk-nav-buur:hover .ff-hoofdstuk-nav-titel {
    color: var(--ff-magenta-ink);
}

.ff-hoofdstuk-nav-index {
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    color: var(--ff-ink-60);
    text-decoration: underline;
    text-decoration-color: var(--ff-rule);
    text-underline-offset: 4px;
}

.ff-hoofdstuk-nav-index:hover {
    color: var(--ff-magenta-ink);
    text-decoration-color: var(--ff-magenta-ink);
}

.ff-hoofdstuk-nav a:focus-visible,
.ff-bord a:focus-visible {
    outline: 2px solid var(--ff-magenta);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .ff-hoofdstuk-nav {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .ff-hoofdstuk-nav-index {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}